Your IP : 192.168.165.1
/* global ns */
/**
* Callback for setting new parameters.
*
* @callback H5PEditor.newParams
* @param {Object} field Current field details.
* @param {Object} params New parameters.
*/
/**
* Create a field where one can select and include another library to the form.
*
* @class H5PEditor.Library
* @extends H5P.EventDispatcher
* @param {Object} parent Parent field in editor.
* @param {Object} field Details for current field.
* @param {Object} params Default parameters.
* @param {newParams} setValue Callback for setting new parameters.
*/
ns.Library = function (parent, field, params, setValue) {
var self = this;
H5P.EventDispatcher.call(this);
if (params === undefined) {
this.params = {
params: {}
};
// If you do a console log here it might show that this.params is
// something else than what we set it to. One of life's big mysteries...
setValue(field, this.params);
}
else {
this.params = params;
}
this.field = field;
this.parent = parent;
this.changes = [];
this.optionsLoaded = false;
this.library = parent.library + '/' + field.name;
this.passReadies = true;
parent.ready(function () {
self.passReadies = false;
});
// Confirmation dialog for changing library
this.confirmChangeLibrary = new H5P.ConfirmationDialog({
headerText: H5PEditor.t('core', 'changeLibrary'),
dialogText: H5PEditor.t('core', 'confirmChangeLibrary')
}).appendTo(document.body);
// Load library on confirmation
this.confirmChangeLibrary.on('confirmed', function () {
self.loadLibrary(self.$select.val());
});
// Revert to current library on cancel
this.confirmChangeLibrary.on('canceled', function () {
self.$select.val(self.currentLibrary);
});
H5P.externalDispatcher.on('datainclipboard', this.updateCopyPasteButtons.bind(this));
};
ns.Library.prototype = Object.create(H5P.EventDispatcher.prototype);
ns.Library.prototype.constructor = ns.Library;
/**
* Update state of copy and paste buttons dependent on what is currently in
* the clipboard
*/
ns.Library.prototype.updateCopyPasteButtons = function () {
if (!window.localStorage || !this.libraries) {
return;
}
// Check if content type is supported here
const pasteCheck = ns.canPastePlus(H5P.getClipboard(), this.libraries);
const canPaste = pasteCheck.canPaste;
const canCopy = (this.currentLibrary !== undefined && this.currentLibrary !== '-');
this.$copyButton
.prop('disabled', !canCopy)
.toggleClass('disabled', !canCopy);
this.$pasteButton
.text(ns.t('core', canCopy ? 'pasteAndReplaceButton' : 'pasteButton'))
.attr('title', canPaste ? H5PEditor.t('core', 'pasteFromClipboard') : pasteCheck.description)
.toggleClass('disabled', !canPaste)
.prop('disabled', !canPaste);
};
/**
* Append the library selector to the form.
*
* @alias H5PEditor.Library#appendTo
* @param {H5P.jQuery} $wrapper
*/
ns.Library.prototype.appendTo = function ($wrapper) {
var that = this;
var html = '<div class="field ' + this.field.type + '">';
const id = ns.getNextFieldId(this.field);
if (this.field.label !== 0 && this.field.label !== undefined) {
html += '<div class="h5p-editor-flex-wrapper">' +
'<label class="h5peditor-label-wrapper" for="' + id + '">' +
'<span class="h5peditor-label' +
(this.field.optional ? '' : ' h5peditor-required') + '">' +
this.field.label +
'</span>' +
'</label>' +
'</div>';
}
html += ns.createDescription(this.field.description, id);
html += '<select id="' + id + '"';
if (this.field.description !== undefined) {
html += ' aria-describedby="' + ns.getDescriptionId(id) + '"';
}
html += '>' + ns.createOption('-', 'Loading...') + '</select>';
/**
* For some content types with custom editors, we don't want to add the copy
* and paste button, since it is handled by the custom editors themself.
*
* @return {boolean}
*/
var enableCopyAndPaste = function () {
var librarySelector = ns.findLibraryAncestor(that.parent);
if (librarySelector.currentLibrary !== undefined) {
var library = ns.libraryFromString(librarySelector.currentLibrary);
var config = {
'H5P.CoursePresentation': {
major: 1,
minor: 20
},
'H5P.InteractiveVideo': {
major: 1,
minor: 20
},
'H5P.DragQuestion': {
major: 1,
minor: 13
}
}[library.machineName];
if (config === undefined) {
return true;
}
return library.majorVersion > config.major ||
(library.majorVersion == config.major && library.minorVersion >= config.minor);
}
return true;
};
if (window.localStorage && enableCopyAndPaste()) {
html += ns.createCopyPasteButtons();
}
html += '<div class="libwrap"></div>';
html += '</div>';
this.$myField = ns.$(html).appendTo($wrapper);
this.$select = this.$myField.children('select');
this.$label = this.$myField.find('.h5peditor-label');
this.$clearfix = this.$myField.children('.h5peditor-clearfix');
this.$libraryWrapper = this.$myField.children('.libwrap');
if (window.localStorage) {
this.$copyButton = this.$myField.find('.h5peditor-copy-button').click(function () {
that.validate(); // Make sure all values are up-to-date
H5P.clipboardify(that.params);
ns.attachToastTo(
that.$copyButton.get(0),
H5PEditor.t('core', 'copiedToClipboard'),
{position: {horizontal: 'center', vertical: 'above', noOverflowX: true}}
);
});
this.$pasteButton = this.$myField.find('.h5peditor-paste-button')
.click(that.pasteContent.bind(this));
}
ns.LibraryListCache.getLibraries(that.field.options, that.librariesLoaded, that);
};
/**
* Hide fields that are not required.
*/
ns.Library.prototype.hide = function () {
this.$label.hide();
this.$libraryWrapper.addClass('no-margin');
this.hideLibrarySelector();
this.hideCopyPaste();
};
/**
* Hide library selector.
*/
ns.Library.prototype.hideLibrarySelector = function () {
this.$myField.children('select').hide();
};
/**
* Hide copy button and paste button.
*/
ns.Library.prototype.hideCopyPaste = function () {
this.$myField.children('.h5peditor-copypaste-wrap').hide();
};
/**
* Replace library content using the object in clipboard
*/
ns.Library.prototype.pasteContent = function () {
var self = this;
const clipboard = H5P.getClipboard();
// Check if content type is supported here
if (!ns.canPaste(clipboard, self.libraries)) {
console.error('Tried to paste unsupported sub-content');
return;
}
// Load library on confirmation
ns.confirmReplace(this.params.library, this.$select.offset().top, function () {
// Update UI
self.$select.val(clipboard.generic.library);
// Delete old params (to keep object ref)
for (var prop in self.params) {
if (self.params.hasOwnProperty(prop)) {
delete self.params[prop];
}
}
// Update params
for (prop in clipboard.generic) {
if (clipboard.generic.hasOwnProperty(prop)) {
self.params[prop] = clipboard.generic[prop];
}
}
// Load form
self.loadLibrary(clipboard.generic.library, true);
});
};
/**
* Confirm replace if there is content selected
*
* @param {function} next
*/
ns.Library.prototype.confirmReplace = function (next) {
if (this.params.library) {
// Confirm changing library
var confirmReplace = new H5P.ConfirmationDialog({
headerText: H5PEditor.t('core', 'changeLibrary'),
dialogText: H5PEditor.t('core', 'confirmChangeLibrary')
}).appendTo(document.body);
confirmReplace.on('confirmed', next);
confirmReplace.show(this.$select.offset().top);
}
else {
// No need to confirm
next();
}
};
/**
* Handler for when the library list has been loaded
*
* @alias H5PEditor.Library#librariesLoaded
* @param {Array} libList
*/
ns.Library.prototype.librariesLoaded = function (libList) {
var self = this;
this.libraries = libList;
var options = ns.createOption('-', '-');
for (var i = 0; i < self.libraries.length; i++) {
var library = self.libraries[i];
if (library.uberName === self.params.library ||
(library.title !== undefined && (library.restricted === undefined || !library.restricted))) {
options += ns.createOption(library.uberName, library.title, library.uberName === self.params.library);
}
}
self.$select.html(options).change(function () {
// Use timeout to avoid bug in Chrome >44, when confirm is used inside change event.
// Ref. https://code.google.com/p/chromium/issues/detail?id=525629
setTimeout(function () {
// Check if library is selected
if (self.params.library) {
// Confirm changing library
self.confirmChangeLibrary.show(self.$select.offset().top);
}
else {
// Load new library
self.loadLibrary(self.$select.val());
}
}, 0);
});
if (self.libraries.length === 1) {
self.$select.hide();
self.$myField.children('.h5p-editor-flex-wrapper').hide();
self.$clearfix.hide();
self.loadLibrary(self.$select.children(':last').val(), true);
}
self.updateCopyPasteButtons();
if (self.runChangeCallback === true) {
// In case a library has been selected programmatically trigger change events, e.g. a default library.
self.change();
self.runChangeCallback = false;
}
// Load default library.
if (this.params.library !== undefined) {
self.loadLibrary(this.params.library, true);
}
};
/**
* Load the selected library.
*
* @alias H5PEditor.Library#loadLibrary
* @param {string} libraryName On the form machineName.majorVersion.minorVersion
* @param {boolean} [preserveParams]
*/
ns.Library.prototype.loadLibrary = function (libraryName, preserveParams) {
var that = this;
this.removeChildren();
if (libraryName === '-') {
delete this.params.library;
delete this.params.params;
delete this.params.subContentId;
delete this.params.metadata;
this.$libraryWrapper.attr('class', 'libwrap');
this.updateCopyPasteButtons();
this.change();
return;
}
this.$libraryWrapper.html(ns.t('core', 'loading')).attr('class', 'libwrap ' + libraryName.split(' ')[0].toLowerCase().replace('.', '-') + '-editor' + (this.libraries.length === 1 ? ' no-margin' : ''));
ns.loadLibrary(libraryName, function (semantics) {
// Locate selected library object
const library = that.findLibrary(libraryName);
if (library === undefined) {
that.loadLibrary('-');
that.$libraryWrapper.html(ns.createError(ns.t('core', 'unknownLibrary', {'%lib': libraryName}))).attr('class', 'libwrap errors ' + libraryName.split(' ')[0].toLowerCase().replace('.', '-') + '-editor' + (that.libraries.length === 1 ? ' no-margin' : ''));
return;
}
that.currentLibrary = libraryName;
that.params.library = libraryName;
if (preserveParams === undefined || !preserveParams) {
// Reset params
delete that.params.subContentId;
that.params.params = {};
that.params.metadata = {};
}
if (that.params.subContentId === undefined) {
that.params.subContentId = H5P.createUUID();
}
if (that.params.metadata === undefined) {
that.params.metadata = {};
}
// Reset wrapper content
that.$libraryWrapper.html('');
// Locate form
const ancestor = ns.findAncestor(that.parent);
// Update the main language switcher
ancestor.addLanguages(library.uberName, ns.libraryCache[library.uberName].languages);
// Store selected Content Type title in metadata for Copyright usage
that.params.metadata.contentType = library.title;
// Add metadata form for subcontent
const metadataSettings = that.getLibraryMetadataSettings(library);
if (!metadataSettings.disable) {
that.metadataForm = new ns.MetadataForm(that, that.params.metadata, that.$libraryWrapper, !metadataSettings.disableExtraTitleField, true);
}
else {
that.metadataForm = null; // Prevent usage of last selected content's metadata form
}
ns.processSemanticsChunk(semantics, that.params.params, that.$libraryWrapper, that);
that.updateCopyPasteButtons();
if (that.metadataForm && metadataSettings.disableExtraTitleField) {
// Find another location for the metadata button
for (let i = 0; i < that.children.length; i++) {
if (that.children[i].$item) {
// Use the first field with a valid $item
that.metadataForm.appendButtonTo(that.children[i].$item);
break;
}
}
}
if (that.libraries !== undefined) {
that.change();
}
else {
that.runChangeCallback = true;
}
});
};
/**
* Locate the Library object for the given library name.
*
* @param {String} libraryName
* @return {Object}
*/
ns.Library.prototype.findLibrary = function (libraryName) {
const self = this;
for (let i = 0; i < self.libraries.length; i++) {
if (self.libraries[i].uberName === libraryName) {
return self.libraries[i];
}
}
};
/**
* Locate the Library Metadata Settings object for the given library.
*
* @param {String} libraryName
* @return {Object}
*/
ns.Library.prototype.getLibraryMetadataSettings = function (library) {
return library.metadataSettings ? library.metadataSettings : {
disable: !ns.enableMetadata(library.uberName),
disableExtraTitleField: false
};
};
/**
* Add the given callback or run it.
*
* @alias H5PEditor.Library#change
* @param {Function} callback
*/
ns.Library.prototype.change = function (callback) {
if (callback !== undefined) {
// Add callback
this.changes.push(callback);
}
else {
// Find library
var library, i;
for (i = 0; i < this.libraries.length; i++) {
if (this.libraries[i].uberName === this.params.library) {
library = this.libraries[i];
break;
}
}
// Run callbacks
for (i = 0; i < this.changes.length; i++) {
this.changes[i](library);
}
}
};
/**
* Validate this field and its children.
*
* @alias H5PEditor.Library#validate
* @returns {boolean}
*/
ns.Library.prototype.validate = function () {
var valid = true;
if (this.metadataForm && this.metadataForm.children) {
for (var i = 0; i < this.metadataForm.children.length; i++) {
if (this.metadataForm.children[i].validate() === false) {
valid = false;
}
}
}
if (this.children) {
for (var i = 0; i < this.children.length; i++) {
if (this.children[i].validate() === false) {
valid = false;
}
}
}
else if (this.libraries && this.libraries.length) {
valid = false;
}
return (this.field.optional ? true : valid);
};
/**
* Collect functions to execute once the tree is complete.
*
* @alias H5PEditor.Library#ready
* @param {Function} ready
*/
ns.Library.prototype.ready = function (ready) {
if (this.passReadies) {
this.parent.ready(ready);
}
else {
this.readies.push(ready);
}
};
/**
* Custom remove children that supports common fields.
*
* * @alias H5PEditor.Library#removeChildren
*/
ns.Library.prototype.removeChildren = function () {
if (this.metadataForm && this.metadataForm.children !== undefined) {
ns.removeChildren(this.metadataForm.children);
}
if (this.currentLibrary === '-' || this.children === undefined) {
return;
}
// Remove old metadata form and button
if (this.$metadataFormWrapper) {
this.$metadataFormWrapper.remove();
delete this.$metadataFormWrapper;
this.$metadataButton.remove();
delete this.$metadataButton;
}
var ancestor = ns.findAncestor(this.parent);
for (var library in ancestor.commonFields) {
if (library === this.currentLibrary) {
var remove = false;
for (var fieldName in ancestor.commonFields[library]) {
var field = ancestor.commonFields[library][fieldName];
if (field.parents.length === 1) {
field.instance.remove();
remove = true;
}
for (var i = 0; i < field.parents.length; i++) {
if (field.parents[i] === this) {
field.parents.splice(i, 1);
field.setValues.splice(i, 1);
}
}
}
if (remove) {
delete ancestor.commonFields[library];
ns.$(ns.renderableCommonFields[library].wrapper).remove();
}
}
}
// Locate selected library object
const lib = this.findLibrary(this.currentLibrary);
// Update the main language switcher
ancestor.removeLanguages(lib.uberName, ns.libraryCache[lib.uberName].languages);
ns.removeChildren(this.children);
};
/**
* Allows ancestors and widgets to do stuff with our children.
*
* @alias H5PEditor.Library#forEachChild
* @param {Function} task
*/
ns.Library.prototype.forEachChild = function (task) {
for (var i = 0; i < this.children.length; i++) {
if (task(this.children[i], i)) {
return;
}
}
};
/**
* Called when this item is being removed.
*
* @alias H5PEditor.Library#remove
*/
ns.Library.prototype.remove = function () {
this.removeChildren();
if (this.$select !== undefined) {
this.$select.parent().remove();
}
};
// Tell the editor what widget we are.
ns.widgets.library = ns.Library;