[BUGFIX] Colorpicker data transfer to FormEngine broken 35/43635/5
authorWouter Wolters <typo3@wouterwolters.nl>
Tue, 29 Sep 2015 21:23:45 +0000 (23:23 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Wed, 30 Sep 2015 13:42:29 +0000 (15:42 +0200)
The JavaScript calls were broken due to the FormEngine refactorings.
Transfer all inline JavaScript to an AMD module.

Resolves: #70169
Releases: master
Change-Id: Idd57b46f2c8a884b8dd0c05ebcdc882fbd1ec8ab
Reviewed-on: http://review.typo3.org/43635
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Classes/Controller/Wizard/ColorpickerController.php
typo3/sysext/backend/Resources/Public/JavaScript/Wizard/Colorpicker.js [new file with mode: 0644]

index b609f05..936be29 100644 (file)
@@ -150,48 +150,27 @@ class ColorpickerController extends AbstractWizardController {
                                $this->imageError = 'ERROR: The image, "' . $this->exampleImg . '", could not be found!';
                        }
                }
-               $update = '';
+               $update = array();
                if ($this->areFieldChangeFunctionsValid()) {
                        // Setting field-change functions:
                        $fieldChangeFuncArr = unserialize($this->fieldChangeFunc);
                        unset($fieldChangeFuncArr['alert']);
                        foreach ($fieldChangeFuncArr as $v) {
-                               $update .= '
-                               parent.opener.' . $v;
+                               $update[] = 'parent.opener.' . $v;
                        }
                }
                // Initialize document object:
                $this->doc = GeneralUtility::makeInstance(DocumentTemplate::class);
-               $this->doc->JScode = $this->doc->wrapScriptTags('
-                       function checkReference() {     //
-                               if (parent.opener && parent.opener.document && parent.opener.document.' . $this->formName . ' && parent.opener.document.' . $this->formName . '["' . $this->fieldName . '"]) {
-                                       return parent.opener.document.' . $this->formName . '["' . $this->fieldName . '"];
-                               } else {
-                                       close();
-                               }
-                       }
-                       function changeBGcolor(color) { // Changes the color in the table sample back in the TCEform.
-                           if (parent.opener.document.layers) {
-                               parent.opener.document.layers["' . $this->md5ID . '"].bgColor = color;
-                           } else if (parent.opener.document.all) {
-                               parent.opener.document.all["' . $this->md5ID . '"].style.background = color;
-                               } else if (parent.opener.document.getElementById && parent.opener.document.getElementById("' . $this->md5ID . '")) {
-                                       parent.opener.document.getElementById("' . $this->md5ID . '").bgColor = color;
-                               }
-                       }
-                       function setValue(input) {      //
-                               var field = checkReference();
-                               if (field) {
-                                       field.value = input;
-                                       ' . $update . '
-                                       changeBGcolor(input);
-                               }
-                       }
-                       function getValue() {   //
-                               var field = checkReference();
-                               return field.value;
-                       }
-               ');
+               $this->getPageRenderer()->loadRequireJsModule(
+                       'TYPO3/CMS/Backend/Wizard/Colorpicker',
+                       'function(Colorpicker) {
+                               Colorpicker.setFieldChangeFunctions({
+                                       fieldChangeFunctions: function() {'
+                                               . implode('', $update) .
+                                       '}
+                               });
+                       }'
+               );
                // Start page:
                $this->content .= $this->doc->startPage($this->getLanguageService()->getLL('colorpicker_title'));
        }
@@ -231,23 +210,23 @@ class ColorpickerController extends AbstractWizardController {
                                        ' . $this->colorList() . '
                                        ' . $this->colorImage() . '
 
-                                               <!-- Value box: -->
+                                       <!-- Value box: -->
                                        <p class="c-head">' . $this->getLanguageService()->getLL('colorpicker_colorValue', TRUE) . '</p>
                                        <table border="0" cellpadding="0" cellspacing="3">
                                                <tr>
                                                        <td>
-                                                               <input type="text" ' . $this->doc->formWidth(7) . ' maxlength="10" name="colorValue" value="' . htmlspecialchars($this->colorValue) . '" />
+                                                               <input id="colorValue" type="text" ' . $this->doc->formWidth(7) . ' maxlength="10" name="colorValue" value="' . htmlspecialchars($this->colorValue) . '" />
                                                        </td>
                                                        <td style="background-color:' . htmlspecialchars($this->colorValue) . '; border: 1px solid black;">
                                                                <span style="color: black;">' . $this->getLanguageService()->getLL('colorpicker_black', TRUE) . '</span>&nbsp;<span style="color: white;">' . $this->getLanguageService()->getLL('colorpicker_white', TRUE) . '</span>
                                                        </td>
                                                        <td>
-                                                               <input class="btn btn-default" type="submit" name="save_close" value="' . $this->getLanguageService()->getLL('colorpicker_setClose', TRUE) . '" />
+                                                               <input class="btn btn-default" type="submit" id="colorpicker-saveclose" value="' . $this->getLanguageService()->getLL('colorpicker_setClose', TRUE) . '" />
                                                        </td>
                                                </tr>
                                        </table>
 
-                                               <!-- Hidden fields with values that has to be kept constant -->
+                                       <!-- Hidden fields with values that has to be kept constant -->
                                        <input type="hidden" name="showPicker" value="1" />
                                        <input type="hidden" name="fieldChangeFunc" value="' . htmlspecialchars($this->fieldChangeFunc) . '" />
                                        <input type="hidden" name="fieldChangeFuncHash" value="' . htmlspecialchars($this->fieldChangeFuncHash) . '" />
@@ -256,15 +235,8 @@ class ColorpickerController extends AbstractWizardController {
                                        <input type="hidden" name="md5ID" value="' . htmlspecialchars($this->md5ID) . '" />
                                        <input type="hidden" name="exampleImg" value="' . htmlspecialchars($this->exampleImg) . '" />
                                </form>';
-                       // If the save/close button is clicked, then close:
-                       if (GeneralUtility::_GP('save_close')) {
-                               $content .= $this->doc->wrapScriptTags('
-                                       setValue(' . GeneralUtility::quoteJSvalue($this->colorValue) . ');
-                                       parent.close();
-                               ');
-                       }
-                       // Output:
-                       $this->content .= $this->doc->section($this->getLanguageService()->getLL('colorpicker_title'), $content, 0, 1);
+
+                       $this->content .= $this->doc->section($this->getLanguageService()->getLL('colorpicker_title'), $content, FALSE, TRUE);
                }
        }
 
@@ -347,19 +319,13 @@ class ColorpickerController extends AbstractWizardController {
                while (isset($color[$columns * $rows])) {
                        $tCells = array();
                        for ($i = 0; $i < $columns; $i++) {
-                               $tCells[] = '
-                                       <td bgcolor="' . $color[($columns * $rows + $i)] . '" onclick="document.colorform.colorValue.value = ' . GeneralUtility::quoteJSvalue($color[($columns * $rows + $i)]) . '; document.colorform.submit();" title="' . $color[($columns * $rows + $i)] . '">&nbsp;&nbsp;</td>';
+                               $tCells[] = '<td bgcolor="' . $color[($columns * $rows + $i)] . '" class="t3js-colorpicker-value" data-color-value="' . htmlspecialchars($color[($columns * $rows + $i)]) . '" title="' . htmlspecialchars($color[($columns * $rows + $i)]) . '">&nbsp;&nbsp;</td>';
                        }
-                       $tRows[] = '
-                               <tr>' . implode('', $tCells) . '
-                               </tr>';
+                       $tRows[] = '<tr>' . implode('', $tCells) . '</tr>';
                        $rows++;
                }
-               $table = '
-                       <p class="c-head">' . $this->getLanguageService()->getLL('colorpicker_fromMatrix', TRUE) . '</p>
-                       <table border="0" cellpadding="1" cellspacing="1" style="width:100%; border: 1px solid black; cursor:crosshair;">' . implode('', $tRows) . '
-                       </table>';
-               return $table;
+               return '<p class="c-head">' . $this->getLanguageService()->getLL('colorpicker_fromMatrix', TRUE) . '</p>
+                       <table style="width:100%; border: 1px solid black; cursor:crosshair;">' . implode('', $tRows) . '</table>';
        }
 
        /**
@@ -378,13 +344,8 @@ class ColorpickerController extends AbstractWizardController {
                        $opt[] = '<option style="background-color: ' . $colorName . ';" value="' . htmlspecialchars($colorName) . '"' . ($currentValue === $colorName ? ' selected="selected"' : '') . '>' . htmlspecialchars($colorName) . '</option>';
                }
                // Compile selector box and return result:
-               $output = '
-                       <p class="c-head">' . $this->getLanguageService()->getLL('colorpicker_fromList', TRUE) . '</p>
-                       <select onchange="document.colorform.colorValue.value = this.options[this.selectedIndex].value; document.colorform.submit(); return false;">
-                               ' . implode('
-                               ', $opt) . '
-                       </select><br />';
-               return $output;
+               return '<p class="c-head">' . $this->getLanguageService()->getLL('colorpicker_fromList', TRUE) . '</p>
+                       <select class="t3js-colorpicker-selector">' . implode(LF, $opt) . '</select><br />';
        }
 
        /**
@@ -397,7 +358,7 @@ class ColorpickerController extends AbstractWizardController {
                if (!$this->imageError) {
                        if ($this->pickerImage) {
                                if (GeneralUtility::_POST('coords_x')) {
-                                       /* @var $image \TYPO3\CMS\Core\Imaging\GraphicalFunctions */
+                                       /** @var $image \TYPO3\CMS\Core\Imaging\GraphicalFunctions */
                                        $image = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\GraphicalFunctions::class);
                                        $this->colorValue = '#' . $this->getIndex($image->imageCreateFromFile($this->pickerImage), GeneralUtility::_POST('coords_x'), GeneralUtility::_POST('coords_y'));
                                }
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Wizard/Colorpicker.js b/typo3/sysext/backend/Resources/Public/JavaScript/Wizard/Colorpicker.js
new file mode 100644 (file)
index 0000000..b92739b
--- /dev/null
@@ -0,0 +1,64 @@
+/*
+ * 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!
+ */
+
+/**
+ * Colorpicker JavaScript
+ */
+define('TYPO3/CMS/Backend/Wizard/Colorpicker', ['jquery'], function ($) {
+
+       var Colorpicker = {
+               options: {}
+       };
+
+       Colorpicker.setFieldChangeFunctions = function(options) {
+               Colorpicker.options = options;
+       };
+
+       Colorpicker.initializeEvents = function() {
+
+               // Set color value
+               $('.t3js-colorpicker-value').on('click', function(e) {
+                       e.preventDefault();
+                       $('#colorValue').val($(this).data('color-value'));
+                       $(this).closest('form').submit();
+               });
+
+               // Handle the change of the color selector
+               $('.t3js-colorpicker-selector').on('change', function(e) {
+                       e.preventDefault();
+                       $('#colorValue').val($(this).val());
+                       $(this).closest('form').submit();
+               });
+
+               // Handle the transfer of the color value and closing of popup
+               $('#colorpicker-saveclose').on('click', function(e) {
+                       e.preventDefault();
+                       var theField = parent.opener.TYPO3.jQuery('[data-formengine-input-name="' + $('[name="fieldName"]').val() + '"]').get(0);
+                       if (theField) {
+                               theField.value = $('#colorValue').val();
+
+                               if (typeof Colorpicker.options.fieldChangeFunctions === 'function') {
+                                       Colorpicker.options.fieldChangeFunctions();
+                               }
+                       }
+                       parent.close();
+                       return false;
+               });
+       };
+
+       $(document).ready(function() {
+               Colorpicker.initializeEvents();
+       });
+
+       return Colorpicker;
+});
\ No newline at end of file