[TASK] Migrate constant editor JavaScript to jQuery 71/33671/7
authorWouter Wolters <typo3@wouterwolters.nl>
Fri, 31 Oct 2014 20:05:34 +0000 (21:05 +0100)
committerBenjamin Mack <benni@typo3.org>
Sat, 15 Nov 2014 20:47:41 +0000 (21:47 +0100)
In our efforts to migrate all old-school JS to jQuery
RequireJS modules, there are a few small JS functions
related to the TypoScript constant editor which are
replaced by a proper RequireJS Module.

Resolves: #62624
Releases: master
Change-Id: Id0d5e4a986f0b94ef399da84ff20c0a026c7d795
Reviewed-on: http://review.typo3.org/33671
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
typo3/js/constantEditor.js [deleted file]
typo3/sysext/core/Classes/TypoScript/ConfigurationForm.php
typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
typo3/sysext/tstemplate/Classes/Controller/TypoScriptTemplateConstantEditorModuleFunctionController.php
typo3/sysext/tstemplate/Resources/Public/JavaScript/ConstantEditor.js [new file with mode: 0644]

diff --git a/typo3/js/constantEditor.js b/typo3/js/constantEditor.js
deleted file mode 100644 (file)
index 47544fc..0000000
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * 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!
- */
-
-
-/**
- * observes clicks edit icons and make inline edit
- *
- * @author     Steffen Kamper
- * @author     Jeff Segars
- */
-
-var ModuleConstantEditor = Class.create({
-       /**
-        * initially register event listeners
-        */
-       initialize: function() {
-
-                       // initialize event listeners
-               Event.observe(document, 'dom:loaded', function(){
-                       $$('.typo3-tstemplate-ceditor-control').invoke('observe', 'click', this.changeProperty);
-                       $$('.typo3-tstemplate-ceditor-color-select').invoke('observe', 'change', this.updateColorFromSelect);
-                       $$('.typo3-tstemplate-ceditor-color-input').invoke('observe', 'change', this.updateColorFromInput);
-               }.bind(this));
-               
-       },
-       
-       /**
-        * initially register event listeners
-        */
-       changeProperty: function(event) {
-               var editIcon = Event.element(event);
-               var paramName = editIcon.readAttribute('rel');
-               var defaultDiv = $('defaultTS-'+paramName);
-               var userDiv = $('userTS-'+paramName);
-               var checkBox = $('check[' + paramName + ']');
-               
-               if (editIcon.hasClassName('editIcon')) {
-                       $(defaultDiv).hide(); 
-                       $(userDiv).show().setStyle({backgroundColor: '#fdf8bd'}); 
-                       $(checkBox).enable().setValue('checked');
-               } 
-               
-               if (editIcon.hasClassName('undoIcon')) {
-                       $(userDiv).hide(); 
-                       $(defaultDiv).show(); 
-                       $(checkBox).setValue('').disable();
-               }
-       },
-       
-       updateColorFromSelect: function(event) {
-               var colorSelect = Event.element(event);
-               var paramName = colorSelect.readAttribute('rel');
-               
-               var colorValue = colorSelect.getValue();
-               var colorInput = $('input-'+paramName);
-               var colorBox = $('colorbox-'+paramName);
-               
-               $(colorInput).setValue(colorValue);
-               $(colorBox).setStyle({backgroundColor: colorValue});
-       },
-       
-       updateColorFromInput: function(event) {
-               var colorInput = Event.element(event);
-               var paramName = colorInput.readAttribute('rel');
-               
-               var colorValue = colorInput.getValue();
-               var colorBox = $('colorbox-'+paramName);
-               var colorSelect = $('select-'+paramName);
-
-               $(colorBox).setStyle({backgroundColor: colorValue});
-               
-               $(colorSelect).childElements().each(function(option) {
-                       if (option.value === colorValue) {
-                               option.selected = true;
-                       } else {
-                               option.selected = false;
-                       }
-               });
-       }
-       
-});
-
-
-var TYPO3ModuleConstantEditor = new ModuleConstantEditor();
index 6666809..be81ad5 100644 (file)
@@ -186,6 +186,7 @@ class ConfigurationForm extends \TYPO3\CMS\Core\TypoScript\ExtendedTemplateServi
         */
        public function ext_fNandV($params) {
                $fN = 'data[' . $params['name'] . ']';
+               $idName = str_replace('.', '-', $params['name']);
                $fV = ($params['value'] = isset($this->ext_realValues[$params['name']]) ? $this->ext_realValues[$params['name']] : $params['default_value']);
                $reg = array();
                // Values entered from the constantsedit cannot be constants!
@@ -193,7 +194,7 @@ class ConfigurationForm extends \TYPO3\CMS\Core\TypoScript\ExtendedTemplateServi
                        $fV = '';
                }
                $fV = htmlspecialchars($fV);
-               return array($fN, $fV, $params);
+               return array($fN, $fV, $params, $idName);
        }
 
        /**
index 36e7d8a..dc92677 100644 (file)
@@ -1030,13 +1030,14 @@ class ExtendedTemplateService extends TemplateService {
         */
        public function ext_fNandV($params) {
                $fN = 'data[' . $params['name'] . ']';
+               $idName = str_replace('.', '-', $params['name']);
                $fV = $params['value'];
                // Values entered from the constantsedit cannot be constants!   230502; removed \{ and set {
                if (preg_match('/^{[\\$][a-zA-Z0-9\\.]*}$/', trim($fV), $reg)) {
                        $fV = '';
                }
                $fV = htmlspecialchars($fV);
-               return array($fN, $fV, $params);
+               return array($fN, $fV, $params, $idName);
        }
 
        /**
@@ -1048,8 +1049,6 @@ class ExtendedTemplateService extends TemplateService {
         */
        public function ext_printFields($theConstants, $category) {
                reset($theConstants);
-               $output = '<script type="text/javascript" src="' . $GLOBALS['BACK_PATH'] . 'js/constantEditor.js"></script>
-               ';
                $subcat = '';
                if (is_array($this->categories[$category])) {
                        $help = $this->helpConfig;
@@ -1084,12 +1083,12 @@ class ExtendedTemplateService extends TemplateService {
                                        $p_field = '';
                                        $raname = substr(md5($params['name']), 0, 10);
                                        $aname = '\'' . $raname . '\'';
-                                       list($fN, $fV, $params) = $this->ext_fNandV($params);
+                                       list($fN, $fV, $params, $idName) = $this->ext_fNandV($params);
                                        switch ($typeDat['type']) {
                                                case 'int':
 
                                                case 'int+':
-                                                       $p_field = '<input id="' . $fN . '" type="text" name="' . $fN . '" value="' . $fV . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(5) . ' onChange="uFormUrl(' . $aname . ')" />';
+                                                       $p_field = '<input id="' . $idName . '" type="text" name="' . $fN . '" value="' . $fV . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(5) . ' onChange="uFormUrl(' . $aname . ')" />';
                                                        if ($typeDat['paramstr']) {
                                                                $p_field .= ' Range: ' . $typeDat['paramstr'];
                                                        } elseif ($typeDat['type'] == 'int+') {
@@ -1108,12 +1107,12 @@ class ExtendedTemplateService extends TemplateService {
                                                                }
                                                                $p_field .= '<option value="' . htmlspecialchars($val) . '"' . $sel . '>' . $val . '</option>';
                                                        }
-                                                       $p_field = '<select id="select-' . $fN . '" rel="' . $fN . '" name="C' . $fN . '" class="typo3-tstemplate-ceditor-color-select" onChange="uFormUrl(' . $aname . ');">' . $p_field . '</select>';
-                                                       $p_field .= '<input type="text" id="input-' . $fN . '" rel="' . $fN . '" name="' . $fN . '" class="typo3-tstemplate-ceditor-color-input" value="' . $fV . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(7) . ' onChange="uFormUrl(' . $aname . ')" />';
+                                                       $p_field = '<select id="select-' . $idName . '" rel="' . $idName . '" name="C' . $fN . '" class="typo3-tstemplate-ceditor-color-select" onChange="uFormUrl(' . $aname . ');">' . $p_field . '</select>';
+                                                       $p_field .= '<input type="text" id="input-' . $idName . '" rel="' . $idName . '" name="' . $fN . '" class="typo3-tstemplate-ceditor-color-input" value="' . $fV . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(7) . ' onChange="uFormUrl(' . $aname . ')" />';
                                                        break;
                                                case 'wrap':
                                                        $wArr = explode('|', $fV);
-                                                       $p_field = '<input type="text" id="' . $fN . '" name="' . $fN . '" value="' . $wArr[0] . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(29) . ' onChange="uFormUrl(' . $aname . ')" />';
+                                                       $p_field = '<input type="text" id="' . $idName . '" name="' . $fN . '" value="' . $wArr[0] . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(29) . ' onChange="uFormUrl(' . $aname . ')" />';
                                                        $p_field .= ' | ';
                                                        $p_field .= '<input type="text" name="W' . $fN . '" value="' . $wArr[1] . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(15) . ' onChange="uFormUrl(' . $aname . ')" />';
                                                        break;
@@ -1146,7 +1145,7 @@ class ExtendedTemplateService extends TemplateService {
                                                                        }
                                                                        $p_field .= '<option value="' . htmlspecialchars($val) . '"' . $sel . '>' . $GLOBALS['LANG']->sL($label) . '</option>';
                                                                }
-                                                               $p_field = '<select id="' . $fN . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
+                                                               $p_field = '<select id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
                                                        }
                                                        break;
                                                case 'boolean':
@@ -1155,7 +1154,7 @@ class ExtendedTemplateService extends TemplateService {
                                                        if ($fV) {
                                                                $sel = ' checked';
                                                        }
-                                                       $p_field .= '<input id="' . $fN . '" type="checkbox" name="' . $fN . '" value="' . ($typeDat['paramstr'] ? $typeDat['paramstr'] : 1) . '"' . $sel . ' onClick="uFormUrl(' . $aname . ')" />';
+                                                       $p_field .= '<input id="' . $idName . '" type="checkbox" name="' . $fN . '" value="' . ($typeDat['paramstr'] ? $typeDat['paramstr'] : 1) . '"' . $sel . ' onClick="uFormUrl(' . $aname . ')" />';
                                                        break;
                                                case 'comment':
                                                        $p_field = '<input type="hidden" name="' . $fN . '" value="#" />';
@@ -1163,7 +1162,7 @@ class ExtendedTemplateService extends TemplateService {
                                                        if (!$fV) {
                                                                $sel = ' checked';
                                                        }
-                                                       $p_field .= '<input id="' . $fN . '" type="checkbox" name="' . $fN . '" value=""' . $sel . ' onClick="uFormUrl(' . $aname . ')" />';
+                                                       $p_field .= '<input id="' . $idName . '" type="checkbox" name="' . $fN . '" value=""' . $sel . ' onClick="uFormUrl(' . $aname . ')" />';
                                                        break;
                                                case 'file':
                                                        $p_field = '<option value=""></option>';
@@ -1179,7 +1178,7 @@ class ExtendedTemplateService extends TemplateService {
                                                                $p_field .= '<option value=""></option>';
                                                                $p_field .= '<option value="' . htmlspecialchars($val) . '" selected>' . $val . '</option>';
                                                        }
-                                                       $p_field = '<select id="' . $fN . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
+                                                       $p_field = '<select id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
                                                        $p_field .= $theImage;
                                                        break;
                                                case 'user':
@@ -1191,16 +1190,16 @@ class ExtendedTemplateService extends TemplateService {
 
                                                default:
                                                        $fwidth = $typeDat['type'] == 'small' ? 10 : 46;
-                                                       $p_field = '<input id="' . $fN . '" type="text" name="' . $fN . '" value="' . $fV . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth($fwidth) . ' onChange="uFormUrl(' . $aname . ')" />';
+                                                       $p_field = '<input id="' . $idName . '" type="text" name="' . $fN . '" value="' . $fV . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth($fwidth) . ' onChange="uFormUrl(' . $aname . ')" />';
                                        }
                                        // Define default names and IDs
-                                       $userTyposcriptID = 'userTS-' . $params['name'];
-                                       $defaultTyposcriptID = 'defaultTS-' . $params['name'];
+                                       $userTyposcriptID = 'userTS-' . $idName;
+                                       $defaultTyposcriptID = 'defaultTS-' . $idName;
                                        $checkboxName = 'check[' . $params['name'] . ']';
-                                       $checkboxID = $checkboxName;
+                                       $checkboxID = 'check-' . $idName;
                                        // Handle type=color specially
                                        if ($typeDat['type'] == 'color' && substr($params['value'], 0, 2) != '{$') {
-                                               $color = '<div id="colorbox-' . $fN . '" class="typo3-tstemplate-ceditor-colorblock" style="background-color:' . $params['value'] . ';">&nbsp;</div>';
+                                               $color = '<div id="colorbox-' . $idName . '" class="typo3-tstemplate-ceditor-colorblock" style="background-color:' . $params['value'] . ';">&nbsp;</div>';
                                        } else {
                                                $color = '';
                                        }
@@ -1219,13 +1218,13 @@ class ExtendedTemplateService extends TemplateService {
                                                        'class' => 'typo3-tstemplate-ceditor-control undoIcon',
                                                        'alt' => 'Revert to default Constant',
                                                        'title' => 'Revert to default Constant',
-                                                       'rel' => $params['name']
+                                                       'rel' => $idName
                                                ));
                                                $editIconHTML = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('actions-document-open', array(
                                                        'class' => 'typo3-tstemplate-ceditor-control editIcon',
                                                        'alt' => 'Edit this Constant',
                                                        'title' => 'Edit this Constant',
-                                                       'rel' => $params['name']
+                                                       'rel' => $idName
                                                ));
                                                $constantCheckbox = '<input type="hidden" name="' . $checkboxName . '" id="' . $checkboxID . '" value="' . $checkboxValue . '"/>';
                                                // If there's no default value for the field, use a static label.
index 69c3590..67094b1 100644 (file)
@@ -98,6 +98,7 @@ class TypoScriptTemplateConstantEditorModuleFunctionController extends \TYPO3\CM
                // initialize
                $existTemplate = $this->initialize_editor($this->pObj->id, $template_uid);
                if ($existTemplate) {
+                       $this->pObj->doc->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Tstemplate/ConstantEditor');
                        $saveId = $tplRow['_ORIG_uid'] ? $tplRow['_ORIG_uid'] : $tplRow['uid'];
                        // Update template ?
                        if (\TYPO3\CMS\Core\Utility\GeneralUtility::_POST('submit') || \TYPO3\CMS\Core\Utility\MathUtility::canBeInterpretedAsInteger(\TYPO3\CMS\Core\Utility\GeneralUtility::_POST('submit_x')) && \TYPO3\CMS\Core\Utility\MathUtility::canBeInterpretedAsInteger(\TYPO3\CMS\Core\Utility\GeneralUtility::_POST('submit_y'))) {
@@ -138,6 +139,7 @@ class TypoScriptTemplateConstantEditorModuleFunctionController extends \TYPO3\CM
                        // Category and constant editor config:
                        $category = $this->pObj->MOD_SETTINGS['constant_editor_cat'];
                        $tmpl->ext_getTSCE_config($category);
+
                        $printFields = trim($tmpl->ext_printFields($theConstants, $category));
                        if ($printFields) {
                                $theOutput .= $this->pObj->doc->section('', $printFields);
diff --git a/typo3/sysext/tstemplate/Resources/Public/JavaScript/ConstantEditor.js b/typo3/sysext/tstemplate/Resources/Public/JavaScript/ConstantEditor.js
new file mode 100644 (file)
index 0000000..4c6e435
--- /dev/null
@@ -0,0 +1,95 @@
+/**
+ * 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!
+ */
+/**
+ * Various functions related to the Constant Editor
+ * e.g. updating the field and working with colors
+ */
+define('TYPO3/CMS/Tstemplate/ConstantEditor', ['jquery'], function($) {
+
+       var ConstantEditor = {
+               options: {
+                       editIconSelector: '.typo3-tstemplate-ceditor-control',
+                       colorSelectSelector: '.typo3-tstemplate-ceditor-color-select',
+                       colorInputSelector: '.typo3-tstemplate-ceditor-color-input'
+               }
+       };
+
+       /**
+        * initially register event listeners
+        */
+       ConstantEditor.changeProperty = function($editIcon) {
+               var constantName = $editIcon.attr('rel');
+               var $defaultDiv = $('#defaultTS-' + constantName);
+               var $userDiv = $('#userTS-' + constantName);
+               var $checkBox = $('#check-' + constantName);
+
+               if ($editIcon.hasClass('editIcon')) {
+                       $defaultDiv.hide();
+                       $userDiv.show().css({background: '#fdf8bd'});
+                       $checkBox.attr('disabled', false).attr('checked', true);
+               }
+
+               if ($editIcon.hasClass('undoIcon')) {
+                       $userDiv.hide();
+                       $defaultDiv.show();
+                       $checkBox.val('').attr('disabled', true);
+               }
+       };
+
+       /**
+        * updates the color from a dropdown
+        */
+       ConstantEditor.updateColorFromSelect = function($colorSelect) {
+               var constantName = $colorSelect.attr('rel');
+               var colorValue = $colorSelect.val();
+
+               $('#input-' + constantName).val(colorValue);
+               $('#colorbox-' + constantName).css({background: colorValue});
+       };
+
+       /**
+        * updates the color from an input field
+        */
+       ConstantEditor.updateColorFromInput = function($colorInput) {
+               var constantName = $colorInput.attr('rel');
+               var colorValue = $colorInput.val();
+
+               $('#colorbox-' + constantName).css({background: colorValue});
+               $('#select-' + constantName).children().each(function(option) {
+                       option.selected = (option.value === colorValue);
+               });
+       };
+
+       /**
+        * Registers listeners
+        */
+       ConstantEditor.initializeEvents = function() {
+               $(document).on('click', ConstantEditor.options.editIconSelector, function() {
+                       ConstantEditor.changeProperty($(this));
+               }).on('click', ConstantEditor.options.colorSelectSelector, function() {
+                       ConstantEditor.updateColorFromSelect($(this));
+               }).on('click', ConstantEditor.options.colorInputSelector, function() {
+                       ConstantEditor.updateColorFromInput($(this));
+               });
+       };
+
+       /**
+        * initialize and return the ConstantEditor object
+        */
+       return function() {
+               $(document).ready(function() {
+                       ConstantEditor.initializeEvents();
+               });
+               return ConstantEditor;
+       }();
+});
\ No newline at end of file