From 160d8042486579d81299ad938efacf298d39e374 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 7 Jul 2022 18:21:15 +0200
Subject: [PATCH] wip #4213 @3

---
 src/public/bunchmultiple/bunchmultiple.js  |  4 +-
 src/resources/views/fields/color.blade.php | 44 ++++++++++++++++++++--
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/public/bunchmultiple/bunchmultiple.js b/src/public/bunchmultiple/bunchmultiple.js
index 746dc0e..7bb3884 100644
--- a/src/public/bunchmultiple/bunchmultiple.js
+++ b/src/public/bunchmultiple/bunchmultiple.js
@@ -261,7 +261,7 @@
                 $this.setValues(item, values, false);
                 $(document).trigger('cubist.bunchmultiple.added');
                 $($this).trigger('change');
-            }, 500);
+            }, 10);
         },
 
         setValues(item, values) {
@@ -278,7 +278,7 @@
                         cb.prop('checked', v === true || v === '1' || v === 1);
                     } else if ($(input).is('.select2_from_array')) {
                         try {
-                            if ($(input).data('ajax')!==null && $(input).find('option[value="' + k + '"]').length === 0) {
+                            if ($(input).data('ajax') !== null && $(input).find('option[value="' + k + '"]').length === 0) {
                                 var options = $(input).data('options');
                                 var newOption = new Option(options[v], v, false, false);
                                 $(input).append(newOption).trigger('change');
diff --git a/src/resources/views/fields/color.blade.php b/src/resources/views/fields/color.blade.php
index 9437d04..a8e0a60 100644
--- a/src/resources/views/fields/color.blade.php
+++ b/src/resources/views/fields/color.blade.php
@@ -27,16 +27,52 @@
     @push('crud_fields_styles')
         <link rel="stylesheet" type="text/css"
               href="{{ vendor_asset('vendor/cubist/cms-back/spectrum/spectrum.css') }}">
+        <style>
+            input.spectrum {
+                opacity: 0;
+            }
+
+            .sp-replacer {
+                border-color: #ced3da;
+                border-radius: 3px;
+                padding: 6px;
+                background-color: #fff;
+            }
+
+            .sp-container {
+                border-color: rgba(0, 40, 100, .12);
+                border-radius: 3px;
+            }
+
+            .sp-replacer:hover, .sp-replacer.sp-active {
+                border-color: #2f66b3;
+            }
+        </style>
     @endpush
 
     {{-- FIELD JS - will be loaded in the after_scripts section --}}
     @push('crud_fields_scripts')
         <script src="{{ vendor_asset('vendor/cubist/cms-back/spectrum/spectrum.js') }}"></script>
         <script>
-            $("input.spectrum").spectrum({
-                preferredFormat: "hex6",
-                showInput: true,
-                showInitial: true,
+            $(function () {
+                makeSpectrumColorPickers();
+
+                function makeSpectrumColorPickers() {
+                    $("input.spectrum:not(.spectrum-ok)").each(function () {
+                        if ($(this).closest('.sample').length > 0) {
+                            return;
+                        }
+                        $(this).spectrum({
+                            preferredFormat: "hex6",
+                            showInput: true,
+                            showInitial: true,
+                        }).addClass('spectrum-ok');
+                    });
+                }
+
+                $(document).on('cubist.bunchmultiple.added', function () {
+                    makeSpectrumColorPickers();
+                });
             });
         </script>
     @endpush
-- 
2.39.5