MAGETWO-71622: [UI Component] Color Picker

irenelagno · irenelagno · commit fbd275c92a45 · 2018-04-05T10:36:24.000-05:00
diff --git a/app/code/Magento/Ui/Component/Form/Element/ColorPicker.php b/app/code/Magento/Ui/Component/Form/Element/ColorPicker.php
@@ -65,7 +65,7 @@ public function getComponentName(): string
      *
      * @return void
      */
-    public function prepare()
+    public function prepare() : void
     {
         $modes = $this->modesProvider->getModes();
         $colorPickerModeSetting = $this->getData('config/colorPickerMode');
diff --git a/app/code/Magento/Ui/Model/ColorPicker/ColorModesProvider.php b/app/code/Magento/Ui/Model/ColorPicker/ColorModesProvider.php
@@ -9,7 +9,7 @@
 namespace Magento\Ui\Model\ColorPicker;
 
 /**
- * Class ColorModesProvider
+ * Collect all modes by configuration
  */
 class ColorModesProvider
 {
@@ -27,6 +27,10 @@ class ColorModesProvider
      */
     private $objectManager;
 
+    /**
+     * @param array $colorModesPool
+     * @param \Magento\Framework\ObjectManagerInterface $objectManager
+     */
     public function __construct(
         array $colorModesPool,
         \Magento\Framework\ObjectManagerInterface $objectManager
@@ -58,9 +62,6 @@ public function getModes(): array
      */
     private function createModeProvider(string $instance): ModeInterface
     {
-        if (!is_subclass_of($instance, ModeInterface::class)) {
-            throw new \InvalidArgumentException($instance . ' does not implement ' . ModeInterface::class);
-        }
         return $this->objectManager->create($instance);
     }
 }
diff --git a/app/code/Magento/Ui/Model/ColorPicker/FullMode.php b/app/code/Magento/Ui/Model/ColorPicker/FullMode.php
@@ -16,7 +16,6 @@ class FullMode implements ModeInterface
     /**
      * {@inheritdoc}
      *
-     * @return array
      */
     public function getConfig(): array
     {
diff --git a/app/code/Magento/Ui/Model/ColorPicker/ModeInterface.php b/app/code/Magento/Ui/Model/ColorPicker/ModeInterface.php
@@ -18,5 +18,5 @@ interface ModeInterface
      *
      * @return array
      */
-    public function getConfig();
+    public function getConfig() : array ;
 }
diff --git a/app/code/Magento/Ui/Model/ColorPicker/PaletteOnlyMode.php b/app/code/Magento/Ui/Model/ColorPicker/PaletteOnlyMode.php
@@ -9,7 +9,7 @@
 namespace Magento\Ui\Model\ColorPicker;
 
 /**
- * Returns config parameters for paletteonly mode
+ * Returns config parameters for palette only mode
  */
 class PaletteOnlyMode implements ModeInterface
 {
diff --git a/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml b/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
@@ -151,7 +151,7 @@
     </imageUploader>
     <colorPicker class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/color-picker" template="ui/form/field">
         <settings>
-            <elementTmpl>ui/form/element/colorPicker</elementTmpl>
+            <elementTmpl>ui/form/element/color-picker</elementTmpl>
             <colorFormat>rgb</colorFormat>
             <colorPickerMode>full</colorPickerMode>
         </settings>
diff --git a/app/code/Magento/Ui/view/base/web/js/form/element/color-picker-palette.js b/app/code/Magento/Ui/view/base/web/js/form/element/color-picker-palette.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+/**
+ * @api
+ */
+define([], function () {
+    'use strict';
+
+    return [
+        [
+            'rgb(0,0,0)', 'rgb(52,52,52)', 'rgb(83,83,83)', 'rgb(135,135,135)', 'rgb(193,193,193)',
+            'rgb(234,234,234)', 'rgb(240,240,240)', 'rgb(255,255,255)'
+        ],
+        [
+            'rgb(252,0,9)', 'rgb(253,135,10)', 'rgb(255,255,13)', 'rgb(35,255,9)', 'rgb(33,255,255)',
+            'rgb(0,0,254)', 'rgb(132,0,254)', 'rgb(251,0,255)'
+        ],
+        [
+            'rgb(240,192,194)', 'rgb(251,223,194)', 'rgb(255,241,193)', 'rgb(210,230,201)',
+            'rgb(199,217,220)', 'rgb(197,219,240)', 'rgb(208,200,227)', 'rgb(229,199,212)'
+        ],
+        [
+            'rgb(228,133,135)', 'rgb(246,193,139)', 'rgb(254,225,136)', 'rgb(168,208,152)',
+            'rgb(146,184,190)', 'rgb(143,184,227)', 'rgb(165,148,204)', 'rgb(202,147,175)'
+        ],
+        [
+            'rgb(214,78,83)', 'rgb(243,163,88)', 'rgb(254,211,83)', 'rgb(130,187,106)',
+            'rgb(99,149,159)', 'rgb(93,150,211)', 'rgb(123,100,182)', 'rgb(180,100,142)'
+        ],
+        [
+            'rgb(190,0,5)', 'rgb(222,126,44)', 'rgb(236,183,39)', 'rgb(89,155,61)', 'rgb(55,110,123)',
+            'rgb(49,112,185)', 'rgb(83,55,150)', 'rgb(147,55,101)'
+        ],
+        [
+            'rgb(133,0,3)', 'rgb(163,74,10)', 'rgb(177,127,7)', 'rgb(45,101,23)', 'rgb(18,62,74)',
+            'rgb(14,62,129)', 'rgb(40,15,97)', 'rgb(95,16,55)'
+        ],
+        [
+            'rgb(81,0,1)', 'rgb(100,48,7)', 'rgb(107,78,3)', 'rgb(31,63,16)',
+            'rgb(13,39,46)', 'rgb(10,40,79)', 'rgb(24,12,59)', 'rgb(59,10,36)'
+        ]
+    ];
+});
diff --git a/app/code/Magento/Ui/view/base/web/js/form/element/color-picker.js b/app/code/Magento/Ui/view/base/web/js/form/element/color-picker.js
@@ -8,45 +8,11 @@
  */
 define([
     'mage/translate',
-    'Magento_Ui/js/form/element/abstract'
-], function ($t, Abstract) {
+    'Magento_Ui/js/form/element/abstract',
+    'Magento_Ui/js/form/element/color-picker-palette'
+], function ($t, Abstract, palette) {
     'use strict';
 
-    var defaultColorPalette = [
-        [
-            'rgb(0,0,0)', 'rgb(52,52,52)', 'rgb(83,83,83)', 'rgb(135,135,135)', 'rgb(193,193,193)',
-            'rgb(234,234,234)', 'rgb(240,240,240)', 'rgb(255,255,255)'
-        ],
-        [
-            'rgb(252,0,9)', 'rgb(253,135,10)', 'rgb(255,255,13)', 'rgb(35,255,9)', 'rgb(33,255,255)',
-            'rgb(0,0,254)', 'rgb(132,0,254)', 'rgb(251,0,255)'
-        ],
-        [
-            'rgb(240,192,194)', 'rgb(251,223,194)', 'rgb(255,241,193)', 'rgb(210,230,201)',
-            'rgb(199,217,220)', 'rgb(197,219,240)', 'rgb(208,200,227)', 'rgb(229,199,212)'
-        ],
-        [
-            'rgb(228,133,135)', 'rgb(246,193,139)', 'rgb(254,225,136)', 'rgb(168,208,152)',
-            'rgb(146,184,190)', 'rgb(143,184,227)', 'rgb(165,148,204)', 'rgb(202,147,175)'
-        ],
-        [
-            'rgb(214,78,83)', 'rgb(243,163,88)', 'rgb(254,211,83)', 'rgb(130,187,106)',
-            'rgb(99,149,159)', 'rgb(93,150,211)', 'rgb(123,100,182)', 'rgb(180,100,142)'
-        ],
-        [
-            'rgb(190,0,5)', 'rgb(222,126,44)', 'rgb(236,183,39)', 'rgb(89,155,61)', 'rgb(55,110,123)',
-            'rgb(49,112,185)', 'rgb(83,55,150)', 'rgb(147,55,101)'
-        ],
-        [
-            'rgb(133,0,3)', 'rgb(163,74,10)', 'rgb(177,127,7)', 'rgb(45,101,23)', 'rgb(18,62,74)',
-            'rgb(14,62,129)', 'rgb(40,15,97)', 'rgb(95,16,55)'
-        ],
-        [
-            'rgb(81,0,1)', 'rgb(100,48,7)', 'rgb(107,78,3)', 'rgb(31,63,16)',
-            'rgb(13,39,46)', 'rgb(10,40,79)', 'rgb(24,12,59)', 'rgb(59,10,36)'
-        ]
-    ];
-
     return Abstract.extend({
 
         defaults: {
@@ -56,8 +22,8 @@ define([
                 maxSelectionSize: 8,
                 clickoutFiresChange: true,
                 allowEmpty: true,
-                localStorageKey: "magento.spectrum",
-                palette: defaultColorPalette
+                localStorageKey: 'magento.spectrum',
+                palette: palette
             }
         },
 
@@ -69,8 +35,8 @@ define([
             this._super();
 
             this.colorPickerConfig.value = this.value;
+
             return this;
         }
     });
 });
- 
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js
@@ -38,6 +38,6 @@ define(function (require) {
         tooltip:        require('./tooltip'),
         repeat:         require('knockoutjs/knockout-repeat'),
         fastForEach:    require('knockoutjs/knockout-fast-foreach'),
-        colorPicker:    require('./colorPicker')
+        colorPicker:    require('./color-picker')
     };
 });
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js
@@ -12,7 +12,6 @@ define([
     'use strict';
 
     ko.bindingHandlers.colorPicker = {
-
         /**
          * Binding init callback.
          *
@@ -22,26 +21,27 @@ define([
          * @param {Object} viewModel
          */
         init: function (element, valueAccessor, allBindings, viewModel) {
-            var config = valueAccessor();
+            var config = valueAccessor(),
 
-            if (!viewModel.disabled()) {
-                config.change = function (value) {
+                /** change value */
+                changeValue = function (value) {
                     if (value == null) {
                         value = '';
                     }
                     config.value(value.toString());
                 };
 
-                config.hide = function (value) {
-                    if (value == null) {
-                        value = '';
-                    }
-                    config.value(value.toString());
-                };
+            if (!viewModel.disabled()) {
+                config.change = changeValue;
+
+                config.hide = changeValue;
+
+                /** show value */
                 config.show = function () {
                     if (!viewModel.focused()) {
                         viewModel.focused(true);
                     }
+
                     return true;
                 };
                 $(element).spectrum(config);
@@ -52,11 +52,18 @@ define([
             }
         },
 
-        update: function(element, valueAccessor) {
+        /**
+         * Reads params passed to binding, parses component declarations.
+         * Fetches for those found and attaches them to the new context.
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         */
+        update: function (element, valueAccessor) {
             var config = valueAccessor();
 
             if (tinycolor(config.value()).isValid() || config.value() === '') {
-                $(element).spectrum("set", config.value());
+                $(element).spectrum('set', config.value());
             }
         }
     };
diff --git a/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js b/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js
@@ -970,6 +970,7 @@ define([
                 if (value === '') {
                     return true;
                 }
+
                 return tinycolor(value).isValid();
             },
             $.mage.__('Wrong color format.')
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/color-picker.html b/app/code/Magento/Ui/view/base/web/templates/form/element/color-picker.html
@@ -7,9 +7,8 @@
 <div class="admin__field-control"
      visible="visible"
      css="$data.additionalClasses">
-    <input type="hidden" class="colorpicker-spectrum" data-bind="colorPicker: colorPickerConfig, attr: { disabled: disabled }" />
-    <input type="text" class="admin__control-text colorpicker-input" data-bind="
-        value: value,
-        hasFocus: focused,
-        attr: { id: uid, placeholder: placeholder, disabled: disabled }" />
+    <input type="hidden" class="colorpicker-spectrum" colorPicker="colorPickerConfig" disable="disabled" />
+    <input type="text" class="admin__control-text colorpicker-input"
+           ko-value="value" hasFocus="focused" disable="disabled"
+           attr="name: inputName, id: uid, placeholder: placeholder"/>
 </div>
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_components.less b/app/design/adminhtml/Magento/backend/web/css/source/_components.less
@@ -23,4 +23,4 @@
 @import 'components/_image-uploader.less';
 @import 'components/_slider.less';
 @import 'components/_url_input.less';
-@import 'components/_color-picker.less';
+@import '../../../../../../../../lib/web/jquery/spectrum/_color-picker.less';
diff --git a/lib/web/jquery/spectrum/_color-picker.less b/lib/web/jquery/spectrum/_color-picker.less

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ public function getComponentName(): string`
`65`	`65`	`*`
`66`	`66`	`* @return void`
`67`	`67`	`*/`
`68`		`- public function prepare()`
	`68`	`+ public function prepare() : void`
`69`	`69`	`{`
`70`	`70`	`$modes = $this->modesProvider->getModes();`
`71`	`71`	`$colorPickerModeSetting = $this->getData('config/colorPickerMode');`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,6 @@ class FullMode implements ModeInterface`
`16`	`16`	`/**`
`17`	`17`	`* {@inheritdoc}`
`18`	`18`	`*`
`19`		`- * @return array`
`20`	`19`	`*/`
`21`	`20`	`public function getConfig(): array`
`22`	`21`	`{`
Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,5 @@ interface ModeInterface`
`18`	`18`	`*`
`19`	`19`	`* @return array`
`20`	`20`	`*/`
`21`		`- public function getConfig();`
	`21`	`+ public function getConfig() : array ;`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`namespace Magento\Ui\Model\ColorPicker;`
`10`	`10`
`11`	`11`	`/**`
`12`		`- * Returns config parameters for paletteonly mode`
	`12`	`+ * Returns config parameters for palette only mode`
`13`	`13`	`*/`
`14`	`14`	`class PaletteOnlyMode implements ModeInterface`
`15`	`15`	`{`