Liferay.ColorPicker = new Liferay.Class( { /** * OPTIONS * * Required * item {string|object}: A jQuery selector or DOM element that specifies which field to insert the selected value into. * * Optional * context {object}: A DOM element which specifies the context in which to search for the item. * hasImage {boolean}: Whether an image is provided in the DOM or options object (via the item option). * * Callbacks * onChange {function}: Called whenever the color changes. * onClose {function}: Called when the color picker is closed. */ initialize: function(options) { var instance = this; instance._onClose = options.onClose; instance._onChange = options.onChange; instance._context = options.context || document.body; instance._hasImage = options.hasImage || false; instance._item = jQuery(options.item || '.use-colorpicker', instance._context); instance._currentColor = {r:255, g:255, b:255}; instance._insertImages(); instance._buildHTML(); }, _buildHTML: function() { var instance = this; var baseDiv = jQuery('
'); var closeButton = jQuery(''); baseDiv.append(closeButton); baseDiv.appendTo('body'); closeButton.click( function(event) { instance._toggle(event, this); } ); var onChange = function(event, ui) { instance._currentInput.val('#' + ui.hex); instance._currentColor = ui.rgb; if (instance._onChange) { instance._onChange(ui.rgb); } }; baseDiv.colorpicker( { change: onChange, picking: onChange, pick: onChange } ); baseDiv.hide(); baseDiv.css( { position: 'absolute', zIndex: Liferay.zIndex.ALERT + 1 } ); instance._baseDiv = baseDiv; }, _insertImages: function() { var instance = this; var context = instance._context; var items = instance._item; var colorPickerImgHTML = '