[BUGFIX] Improve preview of InputLinkelement 92/51592/9
authorGeorg Ringer <georg.ringer@gmail.com>
Wed, 8 Feb 2017 18:49:23 +0000 (19:49 +0100)
committerAndreas Fernandez <typo3@scripting-base.de>
Wed, 22 Feb 2017 08:23:14 +0000 (09:23 +0100)
- 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 <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: Josef Glatz <josef.glatz@typo3.org>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Build/Resources/Public/Less/TYPO3/_element_tceforms.less
typo3/sysext/backend/Classes/Form/Element/InputLinkElement.php
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
typo3/sysext/backend/Resources/Public/JavaScript/FormEngineLinkBrowserAdapter.js
typo3/sysext/lang/Resources/Private/Language/locallang_core.xlf

index e9ffce7..49bd3a7 100644 (file)
@@ -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
 
index 84f2afd..e3c4468 100644 (file)
@@ -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>';
index e72347d..02bbf68 100644 (file)
@@ -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;
index ea68b0b..e1e246d 100644 (file)
@@ -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)
+                       }
                });
        };
 
index 7a52778..f350f13 100644 (file)
@@ -56,19 +56,17 @@ 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) {
-                                       if (data.typoLink) {
-                                               field.value = data.typoLink;
-                                               if (typeof field.onchange === 'function') {
-                                                       field.onchange();
-                                               }
+                               method: 'GET'
+                       }).done(function(data) {
+                               if (data.typoLink) {
+                                       $('#' + field.id, parent.opener.document).val(data.typoLink);
+                                       if (typeof field.onchange === 'function') {
+                                               field.onchange();
+                                       }
 
-                                               FormEngineLinkBrowserAdapter.updateFunctions();
+                                       FormEngineLinkBrowserAdapter.updateFunctions();
 
-                                               close();
-                                       }
+                                       close();
                                }
                        });
                }
index b5ac8cc..0cb7dbb 100644 (file)
@@ -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>