Commit 4c78f44e authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Oliver Bartsch
Browse files

[BUGFIX] Apply correct classes in content element wizard filter

With the upgrade to Bootstrap 5, the CSS classes for setting a tab's
state need to get applied to the anchor element, which was not the case
for the CE wizard filter.

This patch fixes the behavior by applying the classes to the correct
elements.

Resolves: #94512
Releases: master
Change-Id: I034e12d7cc7553aeb89c33d063efffb6651fc40d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69766

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
parent 7f467fe6
......@@ -91,16 +91,17 @@ export default class NewContentElementWizard {
}
private switchTabIfNecessary(tabContainer: Element): void {
const currentActiveTab = tabContainer.querySelector('.active');
const siblings = Array.from(currentActiveTab.parentNode.children);
const currentActiveTab = tabContainer.querySelector('.active').parentElement;
const siblings = Array.from(currentActiveTab.parentElement.children);
for (let sibling of siblings) {
const siblingTabIdentifier = NewContentElementWizard.getTabIdentifier(sibling);
sibling.classList.toggle('disabled', !this.hasTabContent(siblingTabIdentifier));
if (sibling.classList.contains('disabled')) {
sibling.children[0].setAttribute('tabindex', '-1');
const navLink = sibling.querySelector('a');
navLink.classList.toggle('disabled', !this.hasTabContent(siblingTabIdentifier));
if (navLink.classList.contains('disabled')) {
navLink.setAttribute('tabindex', '-1');
} else {
sibling.children[0].removeAttribute('tabindex');
navLink.removeAttribute('tabindex');
}
}
......@@ -136,10 +137,10 @@ export default class NewContentElementWizard {
const tabElement = tabContainerWrapper.querySelector(`a[href="#${tabIdentifier}"]`);
const tabContentElement = this.context.querySelector(`#${tabIdentifier}`);
tabContainerWrapper.querySelector('.t3js-tabmenu-item.active').classList.remove('active');
tabContainerWrapper.querySelector('a.active').classList.remove('active');
tabContainerWrapper.querySelector('.tab-pane.active').classList.remove('active');
tabElement.parentElement.classList.add('active');
tabElement.classList.add('active');
tabContentElement.classList.add('active');
}
}
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
define(["require","exports","TYPO3/CMS/Core/Event/DebounceEvent","TYPO3/CMS/Core/Event/RegularEvent","./Input/Clearable"],(function(e,t,s,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class n{constructor(e){this.context=e.get(0),this.searchField=this.context.querySelector(".t3js-contentWizard-search"),this.registerClearable(),this.registerEvents()}static getTabIdentifier(e){const t=e.querySelector("a"),[,s]=t.href.split("#");return s}static countVisibleContentElements(e){return e.querySelectorAll(".t3js-media-new-content-element-wizard:not(.hidden)").length}focusSearchField(){this.searchField.focus()}registerClearable(){this.searchField.clearable({onClear:e=>{e.value="",this.filterElements(e)}})}registerEvents(){new i("keydown",e=>{const t=e.target;"Escape"===e.code&&(e.stopImmediatePropagation(),t.value="")}).bindTo(this.searchField),new s("keyup",e=>{this.filterElements(e.target)},150).bindTo(this.searchField),new i("submit",e=>{e.preventDefault()}).bindTo(this.searchField.closest("form")),new i("click",e=>{e.preventDefault(),e.stopPropagation()}).delegateTo(this.context,".t3js-tabs .disabled")}filterElements(e){const t=e.closest("form"),s=t.querySelector(".t3js-tabs"),i=t.querySelector(".t3js-filter-noresult");t.querySelectorAll(".t3js-media-new-content-element-wizard").forEach(t=>{const s=t.textContent.trim().replace(/\s+/g," ");t.classList.toggle("hidden",""!==e.value&&!RegExp(e.value,"i").test(s))});const r=n.countVisibleContentElements(t);s.parentElement.classList.toggle("hidden",0===r),i.classList.toggle("hidden",r>0),this.switchTabIfNecessary(s)}switchTabIfNecessary(e){const t=e.querySelector(".active"),s=Array.from(t.parentNode.children);for(let e of s){const t=n.getTabIdentifier(e);e.classList.toggle("disabled",!this.hasTabContent(t)),e.classList.contains("disabled")?e.children[0].setAttribute("tabindex","-1"):e.children[0].removeAttribute("tabindex")}if(!this.hasTabContent(n.getTabIdentifier(t)))for(let i of s){if(i===t)continue;const s=n.getTabIdentifier(i);if(this.hasTabContent(s)){this.switchTab(e.parentElement,s);break}}}hasTabContent(e){const t=this.context.querySelector("#"+e);return n.countVisibleContentElements(t)>0}switchTab(e,t){const s=e.querySelector(`a[href="#${t}"]`),i=this.context.querySelector("#"+t);e.querySelector(".t3js-tabmenu-item.active").classList.remove("active"),e.querySelector(".tab-pane.active").classList.remove("active"),s.parentElement.classList.add("active"),i.classList.add("active")}}t.default=n}));
\ No newline at end of file
define(["require","exports","TYPO3/CMS/Core/Event/DebounceEvent","TYPO3/CMS/Core/Event/RegularEvent","./Input/Clearable"],(function(e,t,s,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class r{constructor(e){this.context=e.get(0),this.searchField=this.context.querySelector(".t3js-contentWizard-search"),this.registerClearable(),this.registerEvents()}static getTabIdentifier(e){const t=e.querySelector("a"),[,s]=t.href.split("#");return s}static countVisibleContentElements(e){return e.querySelectorAll(".t3js-media-new-content-element-wizard:not(.hidden)").length}focusSearchField(){this.searchField.focus()}registerClearable(){this.searchField.clearable({onClear:e=>{e.value="",this.filterElements(e)}})}registerEvents(){new i("keydown",e=>{const t=e.target;"Escape"===e.code&&(e.stopImmediatePropagation(),t.value="")}).bindTo(this.searchField),new s("keyup",e=>{this.filterElements(e.target)},150).bindTo(this.searchField),new i("submit",e=>{e.preventDefault()}).bindTo(this.searchField.closest("form")),new i("click",e=>{e.preventDefault(),e.stopPropagation()}).delegateTo(this.context,".t3js-tabs .disabled")}filterElements(e){const t=e.closest("form"),s=t.querySelector(".t3js-tabs"),i=t.querySelector(".t3js-filter-noresult");t.querySelectorAll(".t3js-media-new-content-element-wizard").forEach(t=>{const s=t.textContent.trim().replace(/\s+/g," ");t.classList.toggle("hidden",""!==e.value&&!RegExp(e.value,"i").test(s))});const n=r.countVisibleContentElements(t);s.parentElement.classList.toggle("hidden",0===n),i.classList.toggle("hidden",n>0),this.switchTabIfNecessary(s)}switchTabIfNecessary(e){const t=e.querySelector(".active").parentElement,s=Array.from(t.parentElement.children);for(let e of s){const t=r.getTabIdentifier(e),s=e.querySelector("a");s.classList.toggle("disabled",!this.hasTabContent(t)),s.classList.contains("disabled")?s.setAttribute("tabindex","-1"):s.removeAttribute("tabindex")}if(!this.hasTabContent(r.getTabIdentifier(t)))for(let i of s){if(i===t)continue;const s=r.getTabIdentifier(i);if(this.hasTabContent(s)){this.switchTab(e.parentElement,s);break}}}hasTabContent(e){const t=this.context.querySelector("#"+e);return r.countVisibleContentElements(t)>0}switchTab(e,t){const s=e.querySelector(`a[href="#${t}"]`),i=this.context.querySelector("#"+t);e.querySelector("a.active").classList.remove("active"),e.querySelector(".tab-pane.active").classList.remove("active"),s.classList.add("active"),i.classList.add("active")}}t.default=r}));
\ 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