From 280ae00b88e09388c7f656b7d094267b16df7392 Mon Sep 17 00:00:00 2001
From: Klaas Poortinga <poortinga.k@gmail.com>
Date: Sun, 29 Mar 2020 18:06:02 +0200
Subject: [PATCH] Colorpicker improvements (#5002)

* add readonly and disabled support to colorpicker

* add support for attributes in colorpicker widget

* Hide default options is disabled and readonly state. Modify styling to be more inline with spectrum disabled state
---
 modules/backend/formwidgets/ColorPicker.php   | 14 +++++
 .../colorpicker/assets/css/colorpicker.css    | 11 ++++
 .../colorpicker/assets/js/colorpicker.js      | 16 ++++--
 .../colorpicker/assets/less/colorpicker.less  | 55 +++++++++++++++++++
 .../colorpicker/partials/_colorpicker.htm     | 26 +++++----
 5 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/modules/backend/formwidgets/ColorPicker.php b/modules/backend/formwidgets/ColorPicker.php
index 6c4f24eff..281965890 100644
--- a/modules/backend/formwidgets/ColorPicker.php
+++ b/modules/backend/formwidgets/ColorPicker.php
@@ -43,6 +43,16 @@ class ColorPicker extends FormWidgetBase
      */
     public $showAlpha = false;
 
+    /**
+     * @var bool If true, the color picker is set to read-only mode
+     */
+    public $readOnly = false;
+
+    /**
+     * @var bool If true, the color picker is set to disabled mode
+     */
+    public $disabled = false;
+
     //
     // Object properties
     //
@@ -61,6 +71,8 @@ class ColorPicker extends FormWidgetBase
             'availableColors',
             'allowEmpty',
             'showAlpha',
+            'readOnly',
+            'disabled',
         ]);
     }
 
@@ -83,6 +95,8 @@ class ColorPicker extends FormWidgetBase
         $this->vars['availableColors'] = $availableColors = $this->getAvailableColors();
         $this->vars['allowEmpty'] = $this->allowEmpty;
         $this->vars['showAlpha'] = $this->showAlpha;
+        $this->vars['readOnly'] = $this->readOnly;
+        $this->vars['disabled'] = $this->disabled;
         $this->vars['isCustomColor'] = !in_array($value, $availableColors);
     }
 
diff --git a/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css b/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
index ee3ac29d0..a18ca9f3b 100644
--- a/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
+++ b/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
@@ -10,6 +10,17 @@
 .field-colorpicker >ul li.custom-color:hover span,
 .field-colorpicker >ul li.custom-color.active span {border-style:solid}
 .field-colorpicker >ul li.custom-color:before {text-indent:0;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;content:"\f0d8";display:block;text-align:center;color:#000;background:#e0e0e0;font-size:9px;height:9px;line-height:9px;width:9px;position:absolute;bottom:3px;right:3px}
+.field-colorpicker.disabled >ul li:hover {cursor:not-allowed;background-color:transparent}
+.field-colorpicker.disabled >ul li:hover span {border:1px solid #cecece}
+.field-colorpicker.disabled >ul li.active {background-color:transparent}
+.field-colorpicker.disabled >ul li.custom-color {position:relative}
+.field-colorpicker.disabled >ul li.custom-color span {border-style:dashed}
+.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:before,
+.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:after {position:absolute;left:15px;content:' ';height:24px;width:1px;background-color:#cecece}
+.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:before {transform:rotate(45deg)}
+.field-colorpicker.disabled >ul li.custom-color span.disabled.is-empty:after {transform:rotate(-45deg)}
+.field-colorpicker.disabled >ul li.custom-color:hover span {border-style:dashed}
+.field-colorpicker.disabled >ul li.custom-color.active span {border:1px solid #cecece}
 .sp-hue,
 .sp-slider {cursor:row-resize}
 .sp-color,
diff --git a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
index cc625b660..ea0821ee2 100644
--- a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
+++ b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
@@ -1,6 +1,6 @@
 /*
  * ColorPicker plugin
- * 
+ *
  * Data attributes:
  * - data-control="colorpicker" - enables the plugin on an element
  * - data-data-locker="input#locker" - Input element to store and restore the chosen color
@@ -28,7 +28,8 @@
     ColorPicker.DEFAULTS = {
         showAlpha: false,
         allowEmpty: false,
-        dataLocker: null
+        dataLocker: null,
+        disabled: false
     }
 
     ColorPicker.prototype.init = function() {
@@ -39,10 +40,12 @@
         this.$customColorSpan = $('>span', this.$customColor)
         this.originalColor = this.$customColor.data('hexColor')
 
-        this.$colorList.on('click', '>li', function(){
-            self.selectColor(this)
-            self.$dataLocker.trigger('change')
-        })
+        if (!this.options.disabled) {
+            this.$colorList.on('click', '>li', function(){
+                self.selectColor(this)
+                self.$dataLocker.trigger('change')
+            })
+        }
 
         /*
          * Custom color
@@ -57,6 +60,7 @@
                 chooseText: $.oc.lang.get('colorpicker.choose', 'Ok'),
                 cancelText: '⨯',
                 appendTo: 'parent',
+                disabled: this.options.disabled,
                 hide: function(color) {
                     var hex = color ? color.toHexString() : ''
                     self.$customColorSpan.css('background', hex)
diff --git a/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less b/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
index 99189e187..a2c59666d 100644
--- a/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
+++ b/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
@@ -69,6 +69,61 @@
 
     }
 
+    &.disabled {
+        > ul {
+            li {
+                &:hover {
+                    cursor: not-allowed;
+                    background-color: transparent;
+
+                    span {
+                        border: 1px solid @color-colorpicker-border;
+                    }
+                }
+
+                &.active {
+                    background-color: transparent;
+                }
+
+                &.custom-color {
+                    position: relative;
+
+                    span {
+                        border-style: dashed;
+
+                        &.disabled.is-empty {
+                            &:before, &:after {
+                                position: absolute;
+                                left: 15px;
+                                content: ' ';
+                                height: 24px;
+                                width: 1px;
+                                background-color: #cecece;
+                            }
+                            &:before {
+                                transform: rotate(45deg);
+                            }
+                            &:after {
+                                transform: rotate(-45deg);
+                            }
+                        }
+                    }
+
+                    &:hover {
+                        span {
+                            border-style: dashed;
+                        }
+                    }
+                    &.active {
+                        span {
+                            border: 1px solid @color-colorpicker-border;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
 }
 
 //
diff --git a/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm b/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm
index e1317e8fe..d48211471 100644
--- a/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm
+++ b/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm
@@ -3,26 +3,32 @@
 <?php else: ?>
     <div
         id="<?= $this->getId() ?>"
-        class="field-colorpicker"
+        class="field-colorpicker <?php if($readOnly || $disabled): ?>disabled<?php endif; ?>"
         data-control="colorpicker"
         <?php if ($showAlpha): ?>data-show-alpha="<?= $showAlpha ?>"<?php endif ?>
         <?php if ($allowEmpty): ?>data-allow-empty="<?= $allowEmpty ?>"<?php endif ?>
-        data-data-locker="#<?= $this->getId('input') ?>">
+        data-data-locker="#<?= $this->getId('input') ?>"
+        <?php if ($readOnly || $disabled): ?>data-disabled="true"<?php endif; ?>
+        <?= $this->formField->getAttributes() ?>>
 
         <ul>
-            <?php foreach ($availableColors as $index => $color): ?>
-                <li
-                    class="<?= $color == $value ? 'active' : null ?>"
-                    data-hex-color="<?= $color ?>">
-                    <span style="background: <?= $color ?>"><?= $color ?></span>
-                </li>
-            <?php endforeach ?>
+            <?php if (!$readOnly && !$disabled): ?>
+                <?php foreach ($availableColors as $index => $color): ?>
+                    <li
+                        class="<?= $color == $value ? 'active' : null ?>"
+                        data-hex-color="<?= $color ?>">
+                        <span style="background: <?= $color ?>"><?= $color ?></span>
+                    </li>
+                <?php endforeach ?>
+            <?php endif; ?>
 
             <li
                 class="custom-color <?= $isCustomColor == $value ? 'active' : null ?>"
                 data-hex-color="<?= $isCustomColor ? e($value) : '#ffffff' ?>"
                 data-custom-color>
-                <span style="background: <?= $isCustomColor ? e($value) : '#ffffff' ?>"></span>
+                <span
+                    class="<?php if (!$value): ?>is-empty<?php endif; ?> <?php if ($readOnly || $disabled): ?>disabled<?php endif; ?>"
+                    style="background: <?= $isCustomColor ? e($value) : '#ffffff' ?>"></span>
             </li>
         </ul>