Commit f0f1d0b8 authored by Frank Nägler's avatar Frank Nägler Committed by Markus Klein
Browse files

[TASK] Optimize backend checkboxes check / uncheck all

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: default avatarMorton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: default avatarMorton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
parent 67ba027d
......@@ -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;
}
......
......@@ -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) {
......@@ -708,6 +709,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
*
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment