Added ColorPicker wrapper and callback support

See #2238

diff --git a/wcfsetup/install/files/js/WCF.ColorPicker.js b/wcfsetup/install/files/js/WCF.ColorPicker.js
index eabc6d45facf0e4407fd78208005c4a8c1734714..6d26f1fc3ca248e6cda1352c6980d200028d2ace 100644 (file)
--- a/wcfsetup/install/files/js/WCF.ColorPicker.js
+++ b/wcfsetup/install/files/js/WCF.ColorPicker.js
@@ -26,6 +26,12 @@ WCF.ColorPicker = Class.extend({
         */
        _barSelector: null,
        
+       /**
+        * optional submit callback
+        * @var Function
+        */
+       _callbackSubmit: null,
+       
        /**
         * dialog overlay
         * @var jQuery
@@ -104,6 +110,7 @@ WCF.ColorPicker = Class.extend({
         * @param       string          selector
         */
        init: function(selector) {
+               this._callbackSubmit = null;
                this._elementID = '';
                this._hsv = { h: 0, s: 100, v: 100 };
                this._position = { };
@@ -117,6 +124,15 @@ WCF.ColorPicker = Class.extend({
                $elements.click($.proxy(this._open, this));
        },
        
+       /**
+        * Sets an optional submit callback.
+        * 
+        * @param       {Function}      callback
+        */
+       setCallbackSubmit: function(callback) {
+               this._callbackSubmit = callback;
+       },
+       
        /**
         * Opens the color picker overlay.
         * 
@@ -328,6 +344,15 @@ WCF.ColorPicker = Class.extend({
                $('#' + $element.data('store')).val('rgba(' + this._rgba.r.val() + ', ' + this._rgba.g.val() + ', ' + this._rgba.b.val() + ', ' + (this._rgba.a.val() / 100) + ')').trigger('change');
                
                this._dialog.wcfDialog('close');
+               
+               if (typeof this._callbackSubmit === 'function') {
+                       this._callbackSubmit({
+                               r: this._rgba.r.val(),
+                               g: this._rgba.g.val(),
+                               b: this._rgba.b.val(),
+                               a: (this._rgba.a.val() / 100)
+                       });
+               }
        },
        
        /**
@@ -560,4 +585,10 @@ WCF.ColorPicker = Class.extend({
        rgbToHex: function(r, g, b) {
                return window.__wcf_bc_colorUtil.rgbToHex(r, g, b);
        }
-});
\ No newline at end of file
+});
+
+(function() {
+       if (typeof window.__wcf_bc_colorPickerInit === 'function') {
+               window.__wcf_bc_colorPickerInit();
+       }
+})();
\ No newline at end of file

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js b/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js
index 93f62237062b76dc20dc719d790f2c33f8f66af3..752d89db31d23b1e7d611a215f5e09be7a3d40b4 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/ColorUtil.js
@@ -1,6 +1,17 @@
+/**
+ * Helper functions to convert between different color formats.
+ *
+ * @author      Alexander Ebert
+ * @copyright   2001-2017 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module      WoltLabSuite/Core/ColorUtil
+ */
 define([], function () {
        "use strict";
        
+       /**
+        * @exports     WoltLabSuite/Core/ColorUtil
+        */
        var ColorUtil = {
                /**
                 * Converts a HSV color into RGB.

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
new file mode 100644 (file)
index 0000000..ffe9d71
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
@@ -0,0 +1,81 @@
+/**
+ * Wrapper class to provide color picker support. Constructing a new object does not
+ * guarantee the picker to be ready at the time of call.
+ * 
+ * @author      Alexander Ebert
+ * @copyright   2001-2017 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module      WoltLabSuite/Core/Ui/Color/Picker
+ */
+define(['Core'], function (Core) {
+       "use strict";
+       
+       var _marshal = function (element, options) {
+               if (typeof window.WCF === 'object' && typeof window.WCF.ColorPicker === 'function') {
+                       _marshal = function (element, options) {
+                               var picker = new window.WCF.ColorPicker(element);
+                               
+                               if (typeof options.callbackSubmit === 'function') {
+                                       picker.setCallbackSubmit(options.callbackSubmit);
+                               }
+                               
+                               return picker;
+                       };
+                       
+                       return _marshal(element, options);
+               }
+               else {
+                       if (_queue.length === 0) {
+                               window.__wcf_bc_colorPickerInit = function () {
+                                       _queue.forEach(function (data) {
+                                               _marshal(data[0], data[1]);
+                                       });
+                                       
+                                       window.__wcf_bc_colorPickerInit = undefined;
+                                       _queue = [];
+                               };
+                       }
+                       
+                       _queue.push([element, options]);
+               }
+       };
+       var _queue = [];
+       
+       /**
+        * @constructor
+        */
+       function UiColorPicker(element, options) { this.init(element, options); }
+       UiColorPicker.prototype = {
+               /**
+                * Initializes a new color picker instance. This is actually just a wrapper that does
+                * not guarantee the picker to be ready at the time of call.
+                * 
+                * @param       {Element}       element         input element
+                * @param       {Object}        options         list of initialization options
+                */
+               init: function (element, options) {
+                       if (!(element instanceof Element)) {
+                               throw new TypeError("Expected a valid DOM element, use `UiColorPicker.fromSelector()` if you want to use a CSS selector.");
+                       }
+                       
+                       this._options = Core.extend({
+                               callbackSubmit: null
+                       }, options);
+                       
+                       _marshal(element);
+               }
+       };
+       
+       /**
+        * Initializes a color picker for all input elements matching the given selector.
+        * 
+        * @param       {string}        selector        CSS selector
+        */
+       UiColorPicker.fromSelector = function (selector) {
+               elBySelAll(selector, undefined, function (element) {
+                       new UiColorPicker(element);
+               });
+       };
+       
+       return UiColorPicker;
+});