%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* ColorSelector widget module
*
* @param {H5P.jQuery} $
*/
H5PEditor.widgets.colorSelector = H5PEditor.ColorSelector = (function ($) {
/**
* Creates a color selector.
*
* @class H5PEditor.ColorSelector
* @param {Object} parent
* @param {Object} field
* @param {Object} params
* @param {function} setValue
*/
function ColorSelector(parent, field, params, setValue) {
this.parent = parent;
this.field = field;
this.params = params;
this.setValue = setValue;
}
/**
* Append the field to the wrapper.
* @public
* @param {H5P.jQuery} $wrapper
*/
ColorSelector.prototype.appendTo = function ($wrapper) {
var self = this;
const id = ns.getNextFieldId(this.field);
var html = H5PEditor.createFieldMarkup(this.field, '<input type="text" id="' + id + '" class="h5p-color-picker">', id);
self.$item = H5PEditor.$(html);
self.$colorPicker = self.$item.find('.h5p-color-picker');
self.config = {
appendTo: self.$item[0],
preferredFormat: 'hex',
color: self.getColor(),
change: function (color) {
self.setColor(color);
},
hide: function (color) {
// Need this to get color if cancel is clicked
self.setColor(color);
}
};
// Make it possible to set spectrum config
if (self.field.spectrum !== undefined) {
self.config = $.extend(self.config, self.field.spectrum);
}
// Create color picker widget
self.$colorPicker.spectrum(self.config);
self.$item.appendTo($wrapper);
};
/**
* Return colorcode in "css" format
*
* @method colorToString
* @param {Object} color
* @return {String}
*/
ColorSelector.prototype.colorToString = function (color) {
switch (this.config.preferredFormat) {
case 'rgb': return color.toRgbString();
case 'hsv': return color.toHsvString();
case 'hsl': return color.toHslString();
default: return color.toHexString();
}
};
/**
* Hide color selector
* @method hide
*/
ColorSelector.prototype.hide = function () {
this.$colorPicker.spectrum('hide');
};
/**
* Save the color
*
* @param {Object} color The
*/
ColorSelector.prototype.setColor = function (color) {
// Save the value, allow null
this.params = (color === null ? null : this.colorToString(color));
this.setValue(this.field, this.params);
};
ColorSelector.prototype.getColor = function () {
var isEmpty = (this.params === null || this.params === "");
return isEmpty ? null : this.params;
};
/**
* Validate the current values.
*/
ColorSelector.prototype.validate = function () {
this.hide();
return (this.params !== undefined && this.params.length !== 0);
};
ColorSelector.prototype.remove = function () {};
return ColorSelector;
})(H5P.jQuery);
Zerion Mini Shell 1.0