Commit 6625430f authored by Georg Ringer's avatar Georg Ringer Committed by Frank Nägler
Browse files

[BUGFIX] Show active state for SelectIcons

Highlight the selected icon. This useful feature has been
removed with the FormEngine rewrite.

Resolves: #83781
Releases: master, 8.7
Change-Id: I06376b073585d39d14de6f40bd02172168425944
Reviewed-on: https://review.typo3.org/55568

Tested-by: default avatarTYPO3com <no-reply@typo3.com>
Reviewed-by: default avatarMathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: default avatarMathias Schreiber <mathias.schreiber@typo3.com>
Reviewed-by: Frank Nägler's avatarFrank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Nägler's avatarFrank Naegler <frank.naegler@typo3.org>
parent b615b0ae
......@@ -285,10 +285,22 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
float: left;
padding: 6px;
max-width: 128px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
img {
max-width: 128px;
max-height: 128px;
max-width: 116px;
max-height: 116px;
}
}
.active {
background-color: $table-bg-active;
border-left: 1px solid $table-border-color;
border-right: 1px solid $table-border-color;
}
:first-child.active {
border-left: 1px solid transparent;
}
}
......@@ -20,7 +20,7 @@ use TYPO3\CMS\Backend\Form\Utility\FormEngineUtility;
/**
* Render thumbnails of icons,
* typically used with type=group and internal_type=file and file_reference.
* typically used with type=select.
*/
class SelectIcons extends AbstractNode
{
......@@ -43,8 +43,10 @@ class SelectIcons extends AbstractNode
}
$icon = !empty($item[2]) ? FormEngineUtility::getIconHtml($item[2], $item[0], $item[0]) : '';
if ($icon) {
$fieldValue = $this->data['databaseRow'][$this->data['fieldName']];
$selectIcons[] = [
'title' => $item[0],
'active' => ($fieldValue[0] === (string)$item[1]) ? true : false,
'icon' => $icon,
'index' => $selectItemCounter,
];
......@@ -57,7 +59,8 @@ class SelectIcons extends AbstractNode
$html[] = '<div class="t3js-forms-select-single-icons icon-list">';
$html[] = '<div class="row">';
foreach ($selectIcons as $i => $selectIcon) {
$html[] = '<div class="item">';
$active = ($selectIcon['active']) ? ' active' : '';
$html[] = '<div class="item' . $active . '">';
if (is_array($selectIcon)) {
$html[] = '<a href="#" title="' . htmlspecialchars($selectIcon['title'], ENT_COMPAT, 'UTF-8', false) . '" data-select-index="' . htmlspecialchars((string)$selectIcon['index']) . '">';
$html[] = $selectIcon['icon'];
......
......@@ -36,9 +36,15 @@ define(['jquery'], function($) {
var $groupIconContainer = $selectElement.prev('.input-group-icon');
var options = options || {};
$selectElement.on('change', function() {
$selectElement.on('change', function(e) {
var $me = $(e.target);
// Update prepended select icon
$groupIconContainer.html($selectElement.find(':selected').data('icon'));
var $selectIcons = $me.closest('.t3js-formengine-field-item').find('.t3js-forms-select-single-icons');
$selectIcons.find('.item.active').removeClass('active');
$selectIcons.find('[data-select-index="' + $me.prop('selectedIndex') + '"]').closest('.item').addClass('active');
});
// Append optionally passed additional "change" event callback
......@@ -51,13 +57,15 @@ define(['jquery'], function($) {
$selectElement.on('focus', options.onFocus);
}
$selectElement.closest('.form-control-wrap').find('.t3js-forms-select-single-icons').on('click', function(e) {
var $selectIcon = $(e.target).closest('[data-select-index]');
$selectElement.closest('.form-control-wrap').find('.t3js-forms-select-single-icons a').on('click', function(e) {
var $me = $(e.target);
var $selectIcon = $me.closest('[data-select-index]');
$me.closest('.t3js-forms-select-single-icons').find('.item.active').removeClass('active');
$selectElement
.prop('selectedIndex', $selectIcon.data('selectIndex'))
.trigger('change');
$selectIcon.trigger('blur');
$selectIcon.closest('.item').addClass('active');
return false;
});
......
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