[BUGFIX] Update ColorPicker to use cleaned minicolors hex value 52/59052/5
authorFilipe DA COSTA <filipe@apart.lu>
Fri, 7 Dec 2018 12:20:21 +0000 (13:20 +0100)
committerDaniel Goerz <daniel.goerz@posteo.de>
Tue, 26 Mar 2019 18:11:56 +0000 (19:11 +0100)
Force ColorPicker to use the formatted/cleaned value jQuery's minicolors
produces instead of just displaying it but still saving the raw value
the user inputs.

Resolves: #87031
Releases: master, 9.5
Change-Id: I49d9f094961137ae50561475d5421f536b705c70
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/59052
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Henrik Elsner <helsner@dfau.de>
Tested-by: Daniel Goerz <daniel.goerz@posteo.de>
Reviewed-by: Henrik Elsner <helsner@dfau.de>
Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>
typo3/sysext/backend/Resources/Private/TypeScript/ColorPicker.ts
typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js

index 5bd6a92..049d72a 100644 (file)
@@ -13,6 +13,7 @@
 
 import * as $ from 'jquery';
 import 'TYPO3/CMS/Core/Contrib/jquery.minicolors';
+import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
 
 /**
  * Module: TYPO3/CMS/Backend/ColorPicker
@@ -51,6 +52,16 @@ class ColorPicker {
         $element.val('');
       }
     });
+    // On blur, use the formatted value from minicolors
+    $(document).on('blur', '.t3js-color-picker', (event: Event): void => {
+      const $element = $(event.target);
+      $element.closest('.t3js-formengine-field-item')
+        .find('INPUT[type="hidden"]')
+        .val($element.val());
+      if ($element.val() === '') { // force FormEngineReview if value is empty
+        FormEngine.Validation.validate();
+      }
+    });
   }
 }
 // create an instance and return it
index 02a7e86..b0fa310 100644 (file)
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","jquery","TYPO3/CMS/Core/Contrib/jquery.minicolors"],function(t,e,o){"use strict";return new(function(){function t(){this.selector=".t3js-color-picker"}return t.prototype.initialize=function(){o(this.selector).minicolors({format:"hex",position:"bottom left",theme:"bootstrap"}),o(document).on("change",".t3js-colorpicker-value-trigger",function(t){var e=o(t.target);""!==e.val()&&(e.closest(".t3js-formengine-field-item").find(".t3js-color-picker").val(e.val()).trigger("paste"),e.val(""))})},t}())});
\ No newline at end of file
+define(["require","exports","jquery","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Core/Contrib/jquery.minicolors"],function(e,t,o,i){"use strict";return new(function(){function e(){this.selector=".t3js-color-picker"}return e.prototype.initialize=function(){o(this.selector).minicolors({format:"hex",position:"bottom left",theme:"bootstrap"}),o(document).on("change",".t3js-colorpicker-value-trigger",function(e){var t=o(e.target);""!==t.val()&&(t.closest(".t3js-formengine-field-item").find(".t3js-color-picker").val(t.val()).trigger("paste"),t.val(""))}),o(document).on("blur",".t3js-color-picker",function(e){var t=o(e.target);t.closest(".t3js-formengine-field-item").find('INPUT[type="hidden"]').val(t.val()),""===t.val()&&i.Validation.validate()})},e}())});
\ No newline at end of file