[BUGFIX] Cleanup JavaScript for ColorPicker 48/47848/5
authorFrank Naegler <frank.naegler@typo3.org>
Fri, 22 Apr 2016 09:57:27 +0000 (11:57 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Thu, 28 Apr 2016 20:49:03 +0000 (22:49 +0200)
This patch introduce an AMD module for the colorpicker and make use of
t3js- prefixed class for initialize the colorpicker.
Also the initialize is not centralized in the module.

Resolves: #75861
Releases: master
Change-Id: I71aea126d91482f8d37f9fa3e0be2bce662aee07
Reviewed-on: https://review.typo3.org/47848
Reviewed-by: Frans Saris <franssaris@gmail.com>
Tested-by: Frans Saris <franssaris@gmail.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/backend/Classes/Form/Element/InputColorPickerElement.php
typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
typo3/sysext/backend/Resources/Public/JavaScript/jquery.clearable.js
typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
typo3/sysext/extensionmanager/Classes/ViewHelpers/Form/TypoScriptConstantsViewHelper.php

index 9b525b2..5890275 100644 (file)
@@ -95,9 +95,15 @@ class InputColorPickerElement extends AbstractFormElement
         $classes[] = 'form-control';
         $classes[] = 'hasDefaultValue';
         $classes[] = 't3js-clearable';
+        $classes[] = 't3js-color-picker';
         $classes[] = 'formengine-colorpickerelement';
         $attributes['class'] = implode(' ', $classes);
 
+        // Load needed js library
+        $resultArray['requireJsModules'][] = array(
+            'TYPO3/CMS/Backend/ColorPicker' => 'function(ColorPicker){ColorPicker.initialize()}'
+        );
+
         // calculate attributes
         $attributes['data-formengine-validation-rules'] = $this->getValidationDataAsJsonString($config);
         $attributes['data-formengine-input-params'] = json_encode($paramsList);
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js b/typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js
new file mode 100644 (file)
index 0000000..f7a502b
--- /dev/null
@@ -0,0 +1,42 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/ColorPicker
+ * contains all logic for the color picker used in FormEngine
+ */
+define(['jquery', 'TYPO3/CMS/Core/Contrib/jquery.minicolors'], function($) {
+
+       /**
+        * @type {{selector: string}}
+        * @exports TYPO3/CMS/Backend/ColorPicker
+        */
+       var ColorPicker = {
+               selector: '.t3js-color-picker'
+       };
+
+       /**
+        * Initialize ColorPicker elements
+        */
+       ColorPicker.initialize = function() {
+               $(function () {
+                       $(ColorPicker.selector).minicolors({
+                               theme: 'bootstrap',
+                               format: 'hex',
+                               position: 'bottom left'
+                       });
+               });
+       };
+
+       return ColorPicker;
+});
index 3c09f7d..b513ccd 100644 (file)
@@ -894,16 +894,6 @@ define(['jquery',
                        DateTimePicker.initialize();
                });
 
-               if ($('.formengine-colorpickerelement').length) {
-                       require(['TYPO3/CMS/Core/Contrib/jquery.minicolors'], function(minicolor) {
-                               $('.formengine-colorpickerelement').minicolors({
-                                               theme: 'bootstrap',
-                                               format: 'hex',
-                                               position: 'bottom left'
-                               });
-                       });
-               }
-
                FormEngine.convertTextareasResizable();
                FormEngine.convertTextareasEnableTab();
        };
index ad98ea4..1228412 100644 (file)
@@ -47,7 +47,8 @@
                        var $input = $(this);
 
                        // make sure the input field is not used twice for a clearable
-                       if (!$input.data('clearable')) {
+                       // or the input field is a colorpicker, because it breaks the colorpicker.
+                       if (!$input.data('clearable') && !$input.hasClass('t3js-color-picker')) {
                                $input.data('clearable', 'loaded');
 
                                // Wrap it with a div and add a span that is the trigger for
index 6a06b38..9b79755 100644 (file)
@@ -1210,18 +1210,11 @@ class ExtendedTemplateService extends TemplateService
                             break;
                         case 'color':
                             $p_field = '
-                                <input class="form-control formengine-colorpickerelement" type="text" id="input-' . $idName . '" rel="' . $idName .
+                                <input class="form-control formengine-colorpickerelement t3js-color-picker" type="text" id="input-' . $idName . '" rel="' . $idName .
                                 '" name="' . $fN . '" value="' . $fV . '"' . $this->getDocumentTemplate()->formWidth(7) . ' onChange="uFormUrl(' . $aname . ')" />';
 
                             if (empty($this->inlineJavaScript[$typeDat['type']])) {
-                                $this->inlineJavaScript[$typeDat['type']] = '
-                                    require([\'TYPO3/CMS/Core/Contrib/jquery.minicolors\'], function() {
-                                        TYPO3.jQuery(\'.formengine-colorpickerelement\').minicolors({
-                                            theme: \'bootstrap\',
-                                            format: \'hex\',
-                                            align: \'bottom left\'
-                                        });
-                                    });';
+                                $this->inlineJavaScript[$typeDat['type']] = 'require([\'TYPO3/CMS/Backend/ColorPicker\'], function(ColorPicker){ColorPicker.initialize()});';
                             }
                             break;
                         case 'wrap':
index 78d2436..28fa91c 100644 (file)
@@ -103,16 +103,10 @@ class TypoScriptConstantsViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\Abs
 
         $output = '
             <div class="form-wizards-element">
-                <input class="form-control t3js-color-input formengine-colorpickerelement" type="text"
+                <input class="form-control t3js-color-input formengine-colorpickerelement t3js-color-picker" type="text"
                   name="' . htmlspecialchars($elementName) . '" value="' . $this->tag->getAttribute('value') . '"/>
                 <script type="text/javascript">
-                    require([\'TYPO3/CMS/Core/Contrib/jquery.minicolors\'], function () {
-                        $(\'.formengine-colorpickerelement\').minicolors({
-                            theme: \'bootstrap\',
-                            format: \'hex\',
-                            position: \'bottom left\'
-                        });
-                    });
+                    require([\'TYPO3/CMS/Backend/ColorPicker\'], function(ColorPicker){ColorPicker.initialize()});
                 </script>
             </div>';