diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/NewContentElementWizard.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/NewContentElementWizard.ts index 3d92e190c63107ce6f81c4918b5f6f300bd26ace..bd232d24341e51b222775ef9b7853d4b8aaaf5da 100644 --- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/NewContentElementWizard.ts +++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/NewContentElementWizard.ts @@ -37,6 +37,10 @@ export default class NewContentElementWizard { this.registerEvents(); } + public focusSearchField(): void { + this.searchField.focus(); + } + private registerClearable(): void { this.searchField.clearable({ onClear: (input: HTMLInputElement): void => { diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Wizard/NewContentElement.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Wizard/NewContentElement.ts index 48728c483f89389f91211966efad7473a23c22d7..b609a4591ca5a616b1ba71f6ef3efacf268c17de 100644 --- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Wizard/NewContentElement.ts +++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Wizard/NewContentElement.ts @@ -32,7 +32,17 @@ class NewContentElement { title, type: Modal.types.ajax, }).on('modal-loaded', (): void => { - new NewContentElementWizard($modal); + // This rather works in local environments only + $modal.on('shown.bs.modal', (): void => { + const wizard = new NewContentElementWizard($modal); + wizard.focusSearchField(); + }); + }).on('shown.bs.modal', (): void => { + // This is the common case with any latency that the modal is rendered before the content is loaded + $modal.on('modal-loaded', (): void => { + const wizard = new NewContentElementWizard($modal); + wizard.focusSearchField(); + }); }); } } diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/NewContentElementWizard.js b/typo3/sysext/backend/Resources/Public/JavaScript/NewContentElementWizard.js index ecd755458e32c149452e4328a8b88c8727af5e2d..124579dd74f3d1ba0aef391c4dac476fdac2a849 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/NewContentElementWizard.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/NewContentElementWizard.js @@ -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,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class i{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(".media-new-content-element-wizard:not(.hidden)").length}registerClearable(){this.searchField.clearable({onClear:e=>{e.value="",this.filterElements(e)}})}registerEvents(){new n("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 n("submit",e=>{e.preventDefault()}).bindTo(this.searchField.closest("form")),new n("click",e=>{e.preventDefault(),e.stopPropagation()}).delegateTo(this.context,".t3js-tabs .disabled")}filterElements(e){const t=e.closest("form"),s=t.querySelector(".t3js-tabs"),n=t.querySelector(".t3js-filter-noresult");t.querySelectorAll(".media.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=i.countVisibleContentElements(t);s.parentElement.classList.toggle("hidden",0===r),n.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=i.getTabIdentifier(e);e.classList.toggle("disabled",!this.hasTabContent(t))}if(!this.hasTabContent(i.getTabIdentifier(t)))for(let n of s){if(n===t)continue;const s=i.getTabIdentifier(n);if(this.hasTabContent(s)){this.switchTab(e.parentElement,s);break}}}hasTabContent(e){const t=this.context.querySelector(`#${e}`);return i.countVisibleContentElements(t)>0}switchTab(e,t){const s=e.querySelector(`a[href="#${t}"]`),n=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"),n.classList.add("active")}}t.default=i})); \ 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 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(".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(".media.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))}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 diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Wizard/NewContentElement.js b/typo3/sysext/backend/Resources/Public/JavaScript/Wizard/NewContentElement.js index b393a99960c9003677b3af95e80d91a5b07e1cb0..fe8a2e6e11153e0baf1c448dfcb5c82fdc8fde95 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/Wizard/NewContentElement.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/Wizard/NewContentElement.js @@ -10,4 +10,4 @@ * * The TYPO3 project - inspiring people to share! */ -define(["require","exports","../Enum/Severity","../Modal","TYPO3/CMS/Backend/NewContentElementWizard"],(function(e,t,n,a,d){"use strict";return class{static wizard(e,t){const i=a.advanced({callback:e=>{e.find(".t3js-modal-body").addClass("t3-new-content-element-wizard-window")},content:e,severity:n.SeverityEnum.notice,size:a.sizes.medium,title:t,type:a.types.ajax}).on("modal-loaded",()=>{new d.default(i)})}}})); \ No newline at end of file +define(["require","exports","../Enum/Severity","../Modal","TYPO3/CMS/Backend/NewContentElementWizard"],(function(e,n,t,d,a){"use strict";return class{static wizard(e,n){const o=d.advanced({callback:e=>{e.find(".t3js-modal-body").addClass("t3-new-content-element-wizard-window")},content:e,severity:t.SeverityEnum.notice,size:d.sizes.medium,title:n,type:d.types.ajax}).on("modal-loaded",()=>{o.on("shown.bs.modal",()=>{new a.default(o).focusSearchField()})}).on("shown.bs.modal",()=>{o.on("modal-loaded",()=>{new a.default(o).focusSearchField()})})}}})); \ No newline at end of file