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 {
}
}
.form-field-inputlink-explanation {
background: #eee;
}
// show text of default language under the translated input field
......
......@@ -202,17 +202,18 @@ class InputLinkElement extends AbstractFormElement
$linkExplanation = $this->getLinkExplanation($itemValue ?: '');
$explanation = htmlspecialchars($linkExplanation['text']);
$toggleButtonTitle = $languageService->sL('LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:buttons.toggleLinkExplanation');
$expansionHtml = [];
$expansionHtml[] = '<div class="form-control-wrap" style="max-width: ' . $width . 'px">';
$expansionHtml[] = '<div class="form-wizards-wrap">';
$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[] = '<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[] = '<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[] = '</button>';
$expansionHtml[] = '</span>';
......
......@@ -11746,6 +11746,9 @@ table.typo3-TCEforms-select-checkbox {
.typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
white-space: nowrap;
}
.form-field-inputlink-explanation {
background: #eee;
}
.t3-form-original-language {
background-color: #dadada;
border: 1px solid #c0c0c0;
......
......@@ -1004,21 +1004,51 @@ define(['jquery',
* Toggle for input link explanation
*/
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();
var $group = $(this).closest('.t3js-form-field-inputlink'),
$inputField = $group.find('.t3js-form-field-inputlink-input'),
$explanationField = $group.find('.t3js-form-field-inputlink-explanation'),
$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)
}).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,11 +56,10 @@ define(['jquery', 'TYPO3/CMS/Recordlist/LinkBrowser'], function($, LinkBrowser)
$.ajax({
url: TYPO3.settings.ajaxUrls['link_browser_encodetypolink'],
data: attributeValues,
method: 'GET',
async: false, // todo: check if we can use promises
success: function(data) {
method: 'GET'
}).done(function(data) {
if (data.typoLink) {
field.value = data.typoLink;
$('#' + field.id, parent.opener.document).val(data.typoLink);
if (typeof field.onchange === 'function') {
field.onchange();
}
......@@ -69,7 +68,6 @@ define(['jquery', 'TYPO3/CMS/Recordlist/LinkBrowser'], function($, LinkBrowser)
close();
}
}
});
}
};
......
......@@ -954,6 +954,9 @@ Do you want to refresh it now?</source>
<trans-unit id="buttons.clipboard">
<source>Clipboard</source>
</trans-unit>
<trans-unit id="buttons.toggleLinkExplanation">
<source>Toggle link explanation</source>
</trans-unit>
<trans-unit id="cm.copy">
<source>Copy</source>
</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