Commit 712e8fea authored by Nikita Hovratov's avatar Nikita Hovratov Committed by Benni Mack
Browse files

[BUGFIX] Fix InputLinkElement to be visible again

Since the bootstrap v5 update, the inputLinkElement is styled with flex
form instead of display table. This became a problem, because this broke
the appearance of the explanation toggling.

The initial idea to hide the complete clearable wrap didn't work
properly as it is loaded dynamically and it's not ensured it exists
when trying to hide it.

To circumvent this problem, the styling is now done with some extra css.
Additionally the wrong form-control class is removed from the clearable
wrap and the styling is now also moved to own css.

Resolves: #93941
Releases: master
Change-Id: I0bb0d1cf26ed40dd3c87a58e08cc39e449b96c0d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69064

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 7ccc93c1
......@@ -488,3 +488,23 @@ textarea {
resize: none;
}
}
//
// This is needed for input links, because the input is wrapped dynamically
// with a clearable div. If the field is unlocked for explanation view, the
// wrap should grow to 100%, else it should shrink to 0%.
//
.input-group > .form-control-clearable {
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.form-control:not(.hidden) + .form-control-clearable {
flex-grow: 0;
width: auto;
}
.form-control.hidden + .close {
display: none;
}
......@@ -30,10 +30,6 @@ class InputLinkElement {
constructor(elementId: string) {
DocumentService.ready().then((document: Document): void => {
this.element = <HTMLSelectElement>document.getElementById(elementId);
if (this.element.classList.contains('hidden')) {
this.element.classList.remove('hidden');
this.element.parentElement.classList.add('hidden');
}
this.container = <HTMLElement>this.element.closest('.t3js-form-field-inputlink');
this.toggleSelector = <HTMLButtonElement>this.container.querySelector(Selectors.toggleSelector);
this.explanationField = <HTMLInputElement>this.container.querySelector(Selectors.explanationSelector);
......@@ -48,11 +44,7 @@ class InputLinkElement {
*/
private toggleVisibility(explanationShown: boolean): void {
this.explanationField.classList.toggle('hidden', explanationShown);
this.element.parentElement.classList.toggle('hidden', !explanationShown);
const clearable = this.container.querySelector('.form-control-clearable button.close');
if (clearable !== null) {
clearable.classList.toggle('hidden', !explanationShown);
}
this.element.classList.toggle('hidden', !explanationShown);
}
private registerEventHandler(): void {
......
......@@ -69,7 +69,7 @@ class Clearable {
}
const wrap = document.createElement('div');
wrap.classList.add('form-control-clearable', 'form-control');
wrap.classList.add('form-control-clearable');
this.parentNode.insertBefore(wrap, this);
wrap.appendChild(this);
......
......@@ -225,11 +225,9 @@ class InputLinkElement extends AbstractFormElement
$expansionHtml[] = '<span class="t3js-form-field-inputlink-icon input-group-addon">' . $linkExplanation['icon'] . '</span>';
$expansionHtml[] = '<input class="form-control t3js-form-field-inputlink-explanation" data-bs-toggle="tooltip" title="' . $explanation . '" value="' . $explanation . '" readonly>';
$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" title="' . htmlspecialchars($toggleButtonTitle) . '">';
$expansionHtml[] = $this->iconFactory->getIcon('actions-version-workspaces-preview-link', Icon::SIZE_SMALL)->render();
$expansionHtml[] = '</button>';
$expansionHtml[] = '</span>';
$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[] = '<input type="hidden" name="' . $parameterArray['itemFormElName'] . '" value="' . htmlspecialchars($itemValue) . '" />';
$expansionHtml[] = '</div>';
$expansionHtml[] = '</div>';
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
define(["require","exports","TYPO3/CMS/Core/DocumentService"],(function(e,t,i){"use strict";var l;!function(e){e.toggleSelector=".t3js-form-field-inputlink-explanation-toggle",e.inputFieldSelector=".t3js-form-field-inputlink-input",e.explanationSelector=".t3js-form-field-inputlink-explanation",e.iconSelector=".t3js-form-field-inputlink-icon"}(l||(l={}));return class{constructor(e){this.element=null,this.container=null,this.toggleSelector=null,this.explanationField=null,this.icon=null,i.ready().then(t=>{this.element=t.getElementById(e),this.element.classList.contains("hidden")&&(this.element.classList.remove("hidden"),this.element.parentElement.classList.add("hidden")),this.container=this.element.closest(".t3js-form-field-inputlink"),this.toggleSelector=this.container.querySelector(l.toggleSelector),this.explanationField=this.container.querySelector(l.explanationSelector),this.icon=this.container.querySelector(l.iconSelector),this.toggleVisibility(""===this.explanationField.value),this.registerEventHandler()})}toggleVisibility(e){this.explanationField.classList.toggle("hidden",e),this.element.parentElement.classList.toggle("hidden",!e);const t=this.container.querySelector(".form-control-clearable button.close");null!==t&&t.classList.toggle("hidden",!e)}registerEventHandler(){this.toggleSelector.addEventListener("click",e=>{e.preventDefault();const t=!this.explanationField.classList.contains("hidden");this.toggleVisibility(t)}),this.container.querySelector(l.inputFieldSelector).addEventListener("change",()=>{const e=!this.explanationField.classList.contains("hidden");e&&this.toggleVisibility(e),this.disableToggle(),this.clearIcon()})}disableToggle(){this.toggleSelector.classList.add("disabled"),this.toggleSelector.setAttribute("disabled","disabled")}clearIcon(){this.icon.innerHTML=""}}}));
\ No newline at end of file
define(["require","exports","TYPO3/CMS/Core/DocumentService"],(function(e,t,i){"use strict";var l;!function(e){e.toggleSelector=".t3js-form-field-inputlink-explanation-toggle",e.inputFieldSelector=".t3js-form-field-inputlink-input",e.explanationSelector=".t3js-form-field-inputlink-explanation",e.iconSelector=".t3js-form-field-inputlink-icon"}(l||(l={}));return class{constructor(e){this.element=null,this.container=null,this.toggleSelector=null,this.explanationField=null,this.icon=null,i.ready().then(t=>{this.element=t.getElementById(e),this.container=this.element.closest(".t3js-form-field-inputlink"),this.toggleSelector=this.container.querySelector(l.toggleSelector),this.explanationField=this.container.querySelector(l.explanationSelector),this.icon=this.container.querySelector(l.iconSelector),this.toggleVisibility(""===this.explanationField.value),this.registerEventHandler()})}toggleVisibility(e){this.explanationField.classList.toggle("hidden",e),this.element.classList.toggle("hidden",!e)}registerEventHandler(){this.toggleSelector.addEventListener("click",e=>{e.preventDefault();const t=!this.explanationField.classList.contains("hidden");this.toggleVisibility(t)}),this.container.querySelector(l.inputFieldSelector).addEventListener("change",()=>{const e=!this.explanationField.classList.contains("hidden");e&&this.toggleVisibility(e),this.disableToggle(),this.clearIcon()})}disableToggle(){this.toggleSelector.classList.add("disabled"),this.toggleSelector.setAttribute("disabled","disabled")}clearIcon(){this.icon.innerHTML=""}}}));
\ No newline at end of file
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
define(["require","exports"],(function(e,t){"use strict";class n{static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n <span class="icon-markup">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n <path\n d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n 0l.7.7c.2.2.2.5 0 .7z"\n class="icon-color"/>\n </svg>\n </span>\n </span>',e.style.visibility="hidden",e.classList.add("close"),e}constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.isClearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");const t=document.createElement("div");t.classList.add("form-control-clearable","form-control"),this.parentNode.insertBefore(t,this),t.appendChild(this);const s=n.createCloseButton(),i=()=>{s.style.visibility=0===this.value.length?"hidden":"visible"};s.addEventListener("click",t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),i()}),t.appendChild(s),this.addEventListener("focus",i),this.addEventListener("keyup",i),i(),this.isClearable=!0}}}return new n}));
\ No newline at end of file
define(["require","exports"],(function(e,t){"use strict";class n{static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n <span class="icon-markup">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n <path\n d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n 0l.7.7c.2.2.2.5 0 .7z"\n class="icon-color"/>\n </svg>\n </span>\n </span>',e.style.visibility="hidden",e.classList.add("close"),e}constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.isClearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");const t=document.createElement("div");t.classList.add("form-control-clearable"),this.parentNode.insertBefore(t,this),t.appendChild(this);const s=n.createCloseButton(),i=()=>{s.style.visibility=0===this.value.length?"hidden":"visible"};s.addEventListener("click",t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),i()}),t.appendChild(s),this.addEventListener("focus",i),this.addEventListener("keyup",i),i(),this.isClearable=!0}}}return new n}));
\ No newline at end of file
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