Commit 767d7cfc authored by Georg Ringer's avatar Georg Ringer Committed by Andreas Fernandez
Browse files

[BUGFIX] Improve preview of InputLinkelement

- Use a div instead of an input field to avoid issues like
  tooltip not shown because of the disabled attribute.
- Trigger onchange from LinkBrowser popup
- If no value found, show the input field, which makes it easier
  to e.g. enter an external url.
- Show helpful title for toggle button on hover

Resolves: #79667
Related: #79670
Releases: master
Change-Id: If00d892d0ae7aebe0dfc5f17f5d43af16d0ee730
Reviewed-on: https://review.typo3.org/51592


Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Tested-by: default avatarTYPO3com <no-reply@typo3.com>
Reviewed-by: Josef Glatz's avatarJosef Glatz <josef.glatz@typo3.org>
Tested-by: Josef Glatz's avatarJosef Glatz <josef.glatz@typo3.org>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <typo3@scripting-base.de>
parent 3ca7d0bb
...@@ -155,6 +155,10 @@ table.typo3-TCEforms-select-checkbox { ...@@ -155,6 +155,10 @@ table.typo3-TCEforms-select-checkbox {
} }
} }
.form-field-inputlink-explanation {
background: #eee;
}
// show text of default language under the translated input field // show text of default language under the translated input field
......
...@@ -202,17 +202,18 @@ class InputLinkElement extends AbstractFormElement ...@@ -202,17 +202,18 @@ class InputLinkElement extends AbstractFormElement
$linkExplanation = $this->getLinkExplanation($itemValue ?: ''); $linkExplanation = $this->getLinkExplanation($itemValue ?: '');
$explanation = htmlspecialchars($linkExplanation['text']); $explanation = htmlspecialchars($linkExplanation['text']);
$toggleButtonTitle = $languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:buttons.toggleLinkExplanation');
$expansionHtml = []; $expansionHtml = [];
$expansionHtml[] = '<div class="form-control-wrap" style="max-width: ' . $width . 'px">'; $expansionHtml[] = '<div class="form-control-wrap" style="max-width: ' . $width . 'px">';
$expansionHtml[] = '<div class="form-wizards-wrap">'; $expansionHtml[] = '<div class="form-wizards-wrap">';
$expansionHtml[] = '<div class="form-wizards-element">'; $expansionHtml[] = '<div class="form-wizards-element">';
$expansionHtml[] = '<div class="input-group t3js-form-field-inputlink" data-toggle="tooltip" data-title="' . $explanation . '">'; $expansionHtml[] = '<div class="input-group t3js-form-field-inputlink">';
$expansionHtml[] = '<span class="input-group-addon">' . $linkExplanation['icon'] . '</span>'; $expansionHtml[] = '<span class="input-group-addon">' . $linkExplanation['icon'] . '</span>';
$expansionHtml[] = '<input class="form-control t3js-form-field-inputlink-explanation" disabled value="' . $explanation . '">'; $expansionHtml[] = '<div class="form-control form-field-inputlink-explanation t3js-form-field-inputlink-explanation" data-toggle="tooltip" data-title="' . $explanation . '">' . $explanation . '</div>';
$expansionHtml[] = '<input type="text"' . GeneralUtility::implodeAttributes($attributes, true) . ' />'; $expansionHtml[] = '<input type="text"' . GeneralUtility::implodeAttributes($attributes, true) . ' />';
$expansionHtml[] = '<span class="input-group-btn">'; $expansionHtml[] = '<span class="input-group-btn">';
$expansionHtml[] = '<button class="btn btn-default t3js-form-field-inputlink-explanation-toggle" type="button">'; $expansionHtml[] = '<button class="btn btn-default t3js-form-field-inputlink-explanation-toggle" type="button" title="' . htmlspecialchars($toggleButtonTitle) . '">';
$expansionHtml[] = $this->iconFactory->getIcon('actions-version-workspaces-preview-link', Icon::SIZE_SMALL)->render(); $expansionHtml[] = $this->iconFactory->getIcon('actions-version-workspaces-preview-link', Icon::SIZE_SMALL)->render();
$expansionHtml[] = '</button>'; $expansionHtml[] = '</button>';
$expansionHtml[] = '</span>'; $expansionHtml[] = '</span>';
......
...@@ -11746,6 +11746,9 @@ table.typo3-TCEforms-select-checkbox { ...@@ -11746,6 +11746,9 @@ table.typo3-TCEforms-select-checkbox {
.typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell { .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
white-space: nowrap; white-space: nowrap;
} }
.form-field-inputlink-explanation {
background: #eee;
}
.t3-form-original-language { .t3-form-original-language {
background-color: #dadada; background-color: #dadada;
border: 1px solid #c0c0c0; border: 1px solid #c0c0c0;
......
...@@ -1004,21 +1004,51 @@ define(['jquery', ...@@ -1004,21 +1004,51 @@ define(['jquery',
* Toggle for input link explanation * Toggle for input link explanation
*/ */
FormEngine.initializeInputLinkToggle = function() { FormEngine.initializeInputLinkToggle = function() {
$(document).on('click', '.t3js-form-field-inputlink-explanation-toggle', function(e) { var toggleClass = '.t3js-form-field-inputlink-explanation-toggle',
inputFieldClass = '.t3js-form-field-inputlink-input',
explanationClass = '.t3js-form-field-inputlink-explanation';
// if empty, show input field
$(explanationClass).filter(function () {
return !$.trim($(this).html());
}).each(function () {
var $group = $(this).closest('.t3js-form-field-inputlink'),
$inputField = $group.find(inputFieldClass),
$explanationField = $group.find(explanationClass),
explanationShown;
explanationShown = !$explanationField.hasClass('hidden');
$explanationField.toggleClass('hidden', explanationShown);
$inputField.toggleClass('hidden', !explanationShown);
$group.find('.form-control-clearable button.close').toggleClass('hidden', !explanationShown)
});
$(document).on('click', toggleClass, function (e) {
e.preventDefault(); e.preventDefault();
var $group = $(this).closest('.t3js-form-field-inputlink'), var $group = $(this).closest('.t3js-form-field-inputlink'),
$inputField = $group.find('.t3js-form-field-inputlink-input'), $inputField = $group.find(inputFieldClass),
$explanationField = $group.find('.t3js-form-field-inputlink-explanation'), $explanationField = $group.find(explanationClass),
explanationShown; explanationShown;
explanationShown = !$explanationField.hasClass('hidden'); explanationShown = !$explanationField.hasClass('hidden');
$explanationField.toggleClass('hidden', explanationShown); $explanationField.toggleClass('hidden', explanationShown);
$inputField.toggleClass('hidden', !explanationShown); $inputField.toggleClass('hidden', !explanationShown);
$group.find('.form-control-clearable button.close').toggleClass('hidden', !explanationShown) $group.find('.form-control-clearable button.close').toggleClass('hidden', !explanationShown)
}).on('change', '.t3js-form-field-inputlink-input', function() { });
var $group = $(this).closest('.t3js-form-field-inputlink');
$group.find('.t3js-form-field-inputlink-explanation, .t3js-form-field-inputlink-explanation-toggle').remove(); $(inputFieldClass).on('change', function () {
var $group = $(this).closest('.t3js-form-field-inputlink'),
$inputField = $group.find(inputFieldClass),
$explanationField = $group.find(explanationClass),
explanationShown;
if (!$explanationField.hasClass('hidden')) {
explanationShown = !$explanationField.hasClass('hidden');
$explanationField.toggleClass('hidden', explanationShown);
$inputField.toggleClass('hidden', !explanationShown);
$group.find('.form-control-clearable button.close').toggleClass('hidden', !explanationShown)
}
}); });
}; };
......
...@@ -56,19 +56,17 @@ define(['jquery', 'TYPO3/CMS/Recordlist/LinkBrowser'], function($, LinkBrowser) ...@@ -56,19 +56,17 @@ define(['jquery', 'TYPO3/CMS/Recordlist/LinkBrowser'], function($, LinkBrowser)
$.ajax({ $.ajax({
url: TYPO3.settings.ajaxUrls['link_browser_encodetypolink'], url: TYPO3.settings.ajaxUrls['link_browser_encodetypolink'],
data: attributeValues, data: attributeValues,
method: 'GET', method: 'GET'
async: false, // todo: check if we can use promises }).done(function(data) {
success: function(data) { if (data.typoLink) {
if (data.typoLink) { $('#' + field.id, parent.opener.document).val(data.typoLink);
field.value = data.typoLink; if (typeof field.onchange === 'function') {
if (typeof field.onchange === 'function') { field.onchange();
field.onchange(); }
}
FormEngineLinkBrowserAdapter.updateFunctions(); FormEngineLinkBrowserAdapter.updateFunctions();
close(); close();
}
} }
}); });
} }
......
...@@ -954,6 +954,9 @@ Do you want to refresh it now?</source> ...@@ -954,6 +954,9 @@ Do you want to refresh it now?</source>
<trans-unit id="buttons.clipboard"> <trans-unit id="buttons.clipboard">
<source>Clipboard</source> <source>Clipboard</source>
</trans-unit> </trans-unit>
<trans-unit id="buttons.toggleLinkExplanation">
<source>Toggle link explanation</source>
</trans-unit>
<trans-unit id="cm.copy"> <trans-unit id="cm.copy">
<source>Copy</source> <source>Copy</source>
</trans-unit> </trans-unit>
......
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