Your IP : 192.168.165.1
H5PEditor.SemanticStructure = (function ($) {
/**
* The base of the semantic structure system.
* All semantic structure class types will inherit this class.
*
* @class
* @param {Object} field
* @param {Object} defaultWidget
*/
function SemanticStructure(field, defaultWidget) {
var self = this;
// Initialize event inheritance
H5P.EventDispatcher.call(self);
/**
* Determine this fields label. Used in error messages.
* @public
*/
self.label = (field.label === undefined ? field.name : field.label);
// Support old editor libraries
self.field = {};
const id = H5PEditor.getNextFieldId(field);
const descriptionId = (field.description !== undefined ? H5PEditor.getDescriptionId(id) : undefined)
/**
* Global instance variables.
* @private
*/
var $widgetSelect, $wrapper, $inner, $errors, $helpText, widgets;
/**
* Initialize. Wrapped to avoid leaking variables
* @private
*/
var init = function () {
// Create field wrapper
$wrapper = $('<div/>', {
'class': 'field ' + field.type + ' ' + H5PEditor.createImportance(field.importance)
});
/* We want to be in control of the label, description and errors
containers to give the editor some structure. Also we do not provide
direct access to the field object to avoid cluttering semantics.json with
non-semantic properties and options. Getters and setters will be
created for what is needed. */
// Create field label
if (field.label !== 0) {
// Add label
createLabel(self.label, field.optional, id).appendTo($wrapper);
}
// Create description
var $description;
if (field.description !== undefined) {
$description = $('<div/>', {
'id': descriptionId,
'class': 'h5peditor-field-description',
text: field.description,
appendTo: $wrapper
});
$description.html($description.html().replace('\n', '<br/>'));
}
widgets = getValidWidgets();
if (widgets.length > 1) {
// Create widget select box
$widgetSelect = $('<ul/>', {
'class': 'h5peditor-widget-select',
title: H5PEditor.t('core', 'editMode'),
appendTo: $wrapper
});
for (var i = 0; i < widgets.length; i++) {
addWidgetOption(widgets[i], i === 0);
}
// Allow custom styling when selector is present
$wrapper.addClass('h5peditor-widgets');
}
// Create inner wrapper
$inner = $('<div/>', {
'class': 'h5peditor-widget-wrapper' + (widgets.length > 1 ? ' content' : ' '),
appendTo: $wrapper
});
// Create errors container
$errors = $('<div/>', {
'class': 'h5p-errors'
});
// Create help text
$helpText = $('<div/>', {
'class': 'h5p-help-text'
});
};
/**
* Add widget select option.
*
* @private
*/
var addWidgetOption = function (widget, active) {
var $option = $('<li/>', {
'class': 'h5peditor-widget-option' + (active ? ' ' + CLASS_WIDGET_ACTIVE : ''),
text: widget.label,
role: 'button',
tabIndex: 1,
on: {
click: function () {
// Update UI
$widgetSelect.children('.' + CLASS_WIDGET_ACTIVE).removeClass(CLASS_WIDGET_ACTIVE);
$option.addClass(CLASS_WIDGET_ACTIVE);
// Change Widget
changeWidget(widget.name);
}
}
}).appendTo($widgetSelect);
};
/**
* Get a list of widgets that are valid and loaded.
*
* @private
* @throws {TypeError} widgets must be an array
* @returns {Array} List of valid widgets
*/
var getValidWidgets = function () {
if (field.widgets === undefined) {
// No widgets specified use default
return [defaultWidget];
}
if (!(field.widgets instanceof Array)) {
throw TypeError('widgets must be an array');
}
// Check if specified widgets are valid
var validWidgets = [];
for (var i = 0; i < field.widgets.length; i++) {
var widget = field.widgets[i];
if (getWidget(widget.name)) {
validWidgets.push(widget);
}
}
if (!validWidgets.length) {
// There are no valid widgets, add default
validWidgets.push(self.default);
}
return validWidgets;
};
/**
* Finds the widget class with the given name.
*
* @private
* @param {String} name
* @returns {Class}
*/
var getWidget = function (name) {
return H5PEditor[name];
};
/**
* Change the UI widget.
*
* @private
* @param {String} name
*/
var changeWidget = function (name) {
if (self.widget !== undefined) {
// Validate our fields first to makes sure all "stored" from their widgets
self.validate();
// Remove old widgets
self.widget.remove();
}
// TODO: Improve error handling?
var widget = getWidget(name);
self.widget = new widget(self);
self.trigger('changeWidget');
self.widget.appendTo($inner);
// Add errors container and description.
$errors.appendTo($inner);
if (self.widget.helpText !== undefined) {
$helpText.html(self.widget.helpText).appendTo($inner);
}
else {
$helpText.detach();
}
};
/**
* Appends the field widget to the given container.
*
* @public
* @param {jQuery} $container
*/
self.appendTo = function ($container) {
// Use first widget by default
changeWidget(widgets[0].name);
$wrapper.appendTo($container);
};
/**
* Remove this field and widget.
*
* @public
*/
self.remove = function () {
self.widget.remove();
$wrapper.remove();
};
/**
* Remove this field and widget.
*
* @public
* @param {String} message
*/
self.setError = function (message) {
$errors.append(H5PEditor.createError(message));
};
/**
* Clear error messages.
*
* @public
*/
self.clearErrors = function () {
$errors.html('');
};
/**
* Get the name of this field.
*
* @public
* @returns {String} Name of the current field
*/
self.getName = function () {
return field.name;
};
/**
* Get the input id the label points to.
*
* @returns {String} Name of the current field
*/
self.getId = function () {
return id;
};
/**
* Get the description id to point to.
*
* @returns {String} Name of the current field
*/
self.getDescriptionId = function () {
return descriptionId;
};
// Must be last
init();
}
// Extends the event dispatcher
SemanticStructure.prototype = Object.create(H5P.EventDispatcher.prototype);
SemanticStructure.prototype.constructor = SemanticStructure;
/**
* Create generic editor label.
*
* @private
* @param {String} text
* @returns {jQuery}
*/
var createLabel = function (text, optional, id) {
return $('<label/>', {
'for': id,
'class': 'h5peditor-label' + (optional ? '' : ' h5peditor-required'),
text: text
});
};
/**
* @constant
*/
var CLASS_WIDGET_ACTIVE = 'h5peditor-widget-active';
return SemanticStructure;
})(H5P.jQuery);