wip #5637 @0.25

diff --git a/src/resources/views/fields/color.blade.php b/src/resources/views/fields/color.blade.php
index ee63c3ff004ea62b1ecc69ba8430be3a558af21c..27744f34130e818d43684e6cf1b0fd627a5d2b98 100644 (file)
--- a/src/resources/views/fields/color.blade.php
+++ b/src/resources/views/fields/color.blade.php
@@ -4,7 +4,7 @@
 @include('crud::fields.inc.translatable_icon')
 <input
     type="text"
-    class="spectrum"
+    class="colorpicker"
     data-show-alpha="{{$field['allows_alpha']?'true':'false'}}"
     data-allow-empty="{{$field['allows_empty']?'true':'false'}}"
     name="{{ $field['name'] }}"
@@ -58,16 +58,27 @@
                 makeSpectrumColorPickers();
 
                 function makeSpectrumColorPickers() {
-                    $("input.spectrum:not(.spectrum-ok)").each(function () {
+                    $("input.colorpicker:not(.spectrum-ok)").each(function () {
                         if ($(this).closest('.sample').length > 0) {
                             return;
                         }
-                        $(this).spectrum({
+                        var e=$(this);
+                        var options={
                             preferredFormat: "hex3",
-                            showInput: true,
                             showInitial: true,
+                            showInput: true,
+                            allowEmpty: true,
                             showAlpha: $(this).attr('data-show-alpha') === 'true',
-                        }).addClass('spectrum-ok');
+                            move:function(color){
+                                e.val(color.toString());
+                                e.trigger('change');
+                            },
+                            dragend:function(color){
+                                e.val(color.toString());
+                                e.trigger('change');
+                            }
+                        };
+                        $(this).spectrum(options).addClass('spectrum-ok');
                     });
                 }