[TASK] Optimize backend checkboxes check / uncheck all 61/45061/9
authorFrank Nägler <frank.naegler@typo3.org>
Mon, 30 Nov 2015 13:03:30 +0000 (14:03 +0100)
committerMarkus Klein <markus.klein@typo3.org>
Thu, 3 Dec 2015 10:54:12 +0000 (11:54 +0100)
This patch optimises the handling of SelectCheckBoxElements.
The checkbox also shows a tooltip now.

Resolves: #71021
Releases: master
Change-Id: If850d489fdc1f3f7909d3695a4509904daea3f18
Reviewed-on: https://review.typo3.org/45061
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
typo3/sysext/backend/Classes/Form/Element/SelectCheckBoxElement.php
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js

index 3d2a3cd..469fbf5 100644 (file)
@@ -127,15 +127,13 @@ class SelectCheckBoxElement extends AbstractFormElement
                 }
                 if (is_array($group['items']) && !empty($group['items'])) {
                     $tableRows = [];
-                    $checkGroup = array();
-                    $uncheckGroup = array();
                     $resetGroup = array();
 
                     // Render rows
                     foreach ($group['items'] as $item) {
                         $tableRows[] = '<tr class="' . $item['class'] . '">';
                         $tableRows[] =    '<td class="col-checkbox">';
-                        $tableRows[] =        '<input type="checkbox" '
+                        $tableRows[] =        '<input type="checkbox" class="t3js-checkbox" '
                                             . 'id="' . $item['id'] . '" '
                                             . 'name="' . htmlspecialchars($item['name']) . '" '
                                             . 'value="' . htmlspecialchars($item['value']) . '" '
@@ -152,25 +150,16 @@ class SelectCheckBoxElement extends AbstractFormElement
                         $tableRows[] =    '</td>';
                         $tableRows[] =    '<td>' . $item['help'] . '</td>';
                         $tableRows[] = '</tr>';
-                        $checkGroup[] = 'document.editform[' . GeneralUtility::quoteJSvalue($item['name']) . '].checked=1;';
-                        $uncheckGroup[] = 'document.editform[' . GeneralUtility::quoteJSvalue($item['name']) . '].checked=0;';
                         $resetGroup[] = 'document.editform[' . GeneralUtility::quoteJSvalue($item['name']) . '].checked=' . $item['checked'] . ';';
                     }
 
-                    // Build toggle group checkbox
-                    $toggleGroupCheckbox = '';
-                    if (!empty($resetGroup)) {
-                        $toggleGroupCheckbox = '<input type="checkbox" '
-                            . 'class="checkbox" '
-                            . 'onclick="if (checked) {' . htmlspecialchars(implode('', $checkGroup) . '} else {' . implode('', $uncheckGroup)) . '}">';
-                    }
-
                     // Build reset group button
                     $resetGroupBtn = '';
                     if (!empty($resetGroup)) {
+                        $resetGroup[] = 'TYPO3.FormEngine.updateCheckboxState(this);';
                         $title = $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:labels.revertSelection', true);
                         $resetGroupBtn = '<a href="#" '
-                            . 'class="btn btn-default" '
+                            . 'class="btn btn-default btn-sm" '
                             . 'onclick="' . implode('', $resetGroup) . ' return false;" '
                             . 'title="' . $title . '">'
                             . $this->iconFactory->getIcon('actions-edit-undo', Icon::SIZE_SMALL)->render() . ' '
@@ -180,11 +169,14 @@ class SelectCheckBoxElement extends AbstractFormElement
                     if (is_array($group['header'])) {
                         $html[] = '<div id="' . $groupId . '" class="panel-collapse collapse" role="tabpanel">';
                     }
+                    $title = $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:labels.toggleall');
                     $html[] =    '<div class="table-responsive">';
                     $html[] =        '<table class="table table-transparent table-hover">';
                     $html[] =            '<thead>';
                     $html[] =                '<tr>';
-                    $html[] =                    '<th class="col-checkbox">' . $toggleGroupCheckbox . '</th>';
+                    $html[] =                    '<th class="col-checkbox">';
+                    $html[] =                       '<input type="checkbox" class="t3js-toggle-checkboxes" data-trigger="hover" data-placement="right" data-title="' . htmlspecialchars($title) . '" data-toggle="tooltip" />';
+                    $html[] =                    '</th>';
                     $html[] =                    '<th class="col-icon"></th>';
                     $html[] =                    '<th class="text-right" colspan="2">' . $resetGroupBtn . '</th>';
                     $html[] =                '</tr>';
@@ -215,6 +207,7 @@ class SelectCheckBoxElement extends AbstractFormElement
 
         $resultArray = $this->initializeResultArray();
         $resultArray['html'] = $html;
+        $resultArray['requireJsModules'][] = 'TYPO3/CMS/Backend/Tooltip';
 
         return $resultArray;
     }
index 15a7cb8..a23e42a 100644 (file)
@@ -586,6 +586,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal'], function ($, Modal) {
                });
 
                FormEngine.initializeRemainingCharacterViews();
+               FormEngine.initializeSelectCheckboxes();
 
                // in multi-select environments with two (e.g. "Access"), on click the item from the right should go to the left
                $(document).on('click', '.t3js-formengine-select-itemstoselect', function(evt) {
@@ -709,6 +710,43 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal'], function ($, Modal) {
        };
 
        /**
+        * Initialize select checkbox element checkboxes
+        */
+       FormEngine.initializeSelectCheckboxes = function() {
+               $('.t3js-toggle-checkboxes').each(function() {
+                       var $checkbox = $(this);
+                       var $table = $checkbox.closest('table');
+                       var $checkboxes = $table.find('.t3js-checkbox');
+                       var checkIt = $checkboxes.length === $table.find('.t3js-checkbox:checked').length;
+                       $checkbox.prop('checked', checkIt);
+               });
+               $(document).on('change', '.t3js-toggle-checkboxes', function(e) {
+                       e.preventDefault();
+                       var $checkbox = $(this);
+                       var $table = $checkbox.closest('table');
+                       var $checkboxes = $table.find('.t3js-checkbox');
+                       var checkIt = $checkboxes.length !== $table.find('.t3js-checkbox:checked').length;
+                       $checkboxes.prop('checked', checkIt);
+                       $checkbox.prop('checked', checkIt);
+               });
+               $(document).on('change', '.t3js-checkbox', function(e) {
+                       FormEngine.updateCheckboxState(this);
+               });
+       };
+
+       /**
+        *
+        * @param {HTMLElement} source
+     */
+       FormEngine.updateCheckboxState = function(source) {
+               var $sourceElement = $(source);
+               var $table = $sourceElement.closest('table');
+               var $checkboxes = $table.find('.t3js-checkbox');
+               var checkIt = $checkboxes.length === $table.find('.t3js-checkbox:checked').length;
+               $table.find('.t3js-toggle-checkboxes').prop('checked', checkIt);
+       };
+
+       /**
         * Get the properties required for proper rendering of the character counter
         *
         * @param {Object} $field