diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/PageActions.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/PageActions.ts index 237b3ac56c322303a0bb8f27725eed82f6e8120c..7a9a204089885677bbdaa2511b02513564988ec5 100644 --- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/PageActions.ts +++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/PageActions.ts @@ -73,21 +73,18 @@ class PageActions { return; } - const $editActionLink = $('<a class="hidden" href="#" data-action="edit"><span class="t3-icon fa fa-pencil"></span></a>'); - $editActionLink.on('click', (e: JQueryEventObject): void => { - e.preventDefault(); + const $editActionLink = $( + '<button type="button" class="btn btn-link" aria-label="' + TYPO3.lang.editPageTitle + '" data-action="edit">' + + '<span class="t3-icon fa fa-pencil"></span>' + + '</button>' + ); + $editActionLink.on('click', (): void => { this.editPageTitle(); }); this.$pageTitle .on('dblclick', (): void => { this.editPageTitle(); }) - .on('mouseover', (): void => { - $editActionLink.removeClass('hidden'); - }) - .on('mouseout', (): void => { - $editActionLink.addClass('hidden'); - }) .append($editActionLink); } @@ -175,7 +172,8 @@ class PageActions { $h1.replaceWith($inputFieldWrap); $inputField.val($h1.text()).focus(); - $inputField.on('keyup', (e: JQueryEventObject): void => { + // Use type 'keydown' instead of 'keyup' which would be triggered directly in case a keyboard is used to start editing. + $inputField.on('keydown', (e: JQueryEventObject): void => { switch (e.which) { case KeyTypesEnum.ENTER: $inputFieldWrap.find('[data-action="submit"]').trigger('click'); diff --git a/typo3/sysext/backend/Resources/Private/Language/locallang_layout.xlf b/typo3/sysext/backend/Resources/Private/Language/locallang_layout.xlf index 620b6aa77a0c144f39ceabc9a81cfff780c2c919..0f41cf47845fe03c9e8a8acf091ca0a8758c091e 100644 --- a/typo3/sysext/backend/Resources/Private/Language/locallang_layout.xlf +++ b/typo3/sysext/backend/Resources/Private/Language/locallang_layout.xlf @@ -120,6 +120,9 @@ <trans-unit id="editPageProperties" resname="editPageProperties"> <source>Edit page properties</source> </trans-unit> + <trans-unit id="editPageTitle" resname="editPageTitle"> + <source>Edit the page title</source> + </trans-unit> <trans-unit id="editPageLanguageOverlayProperties" resname="editPageLanguageOverlayProperties"> <source>Edit page language overlay properties</source> </trans-unit> diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js b/typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js index 4108ebbd7e2da963337aad281de59e3c0233f35f..c55a7072565b648ed0584c9f53e0426e10301def 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js @@ -10,4 +10,4 @@ * * The TYPO3 project - inspiring people to share! */ -var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","./Enum/KeyTypes","jquery","./Storage/Persistent","./Wizard/NewContentElement"],(function(e,t,i,a,n,s){"use strict";var l;a=__importDefault(a),function(e){e.pageTitle=".t3js-title-inlineedit",e.hiddenElements=".t3js-hidden-record",e.newButton=".t3js-toggle-new-content-element-wizard"}(l||(l={}));return new class{constructor(){this.pageId=0,this.pageOverlayId=0,this.$pageTitle=null,this.$showHiddenElementsCheckbox=null,a.default(()=>{this.initializeElements(),this.initializeEvents(),this.initializeNewContentElementWizard(),this.initializePageTitleRenaming()})}setPageId(e){this.pageId=e}setLanguageOverlayId(e){this.pageOverlayId=e}initializePageTitleRenaming(){if(!a.default.isReady)return void a.default(()=>{this.initializePageTitleRenaming()});if(this.pageId<=0)return;const e=a.default('<a class="hidden" href="#" data-action="edit"><span class="t3-icon fa fa-pencil"></span></a>');e.on("click",e=>{e.preventDefault(),this.editPageTitle()}),this.$pageTitle.on("dblclick",()=>{this.editPageTitle()}).on("mouseover",()=>{e.removeClass("hidden")}).on("mouseout",()=>{e.addClass("hidden")}).append(e)}initializeElements(){this.$pageTitle=a.default(l.pageTitle+":first"),this.$showHiddenElementsCheckbox=a.default("#checkTt_content_showHidden")}initializeEvents(){this.$showHiddenElementsCheckbox.on("change",this.toggleContentElementVisibility)}toggleContentElementVisibility(e){const t=a.default(e.currentTarget),i=a.default(l.hiddenElements),s=a.default("<span />",{class:"checkbox-spinner fa fa-circle-o-notch fa-spin"});t.hide().after(s),t.prop("checked")?i.slideDown():i.slideUp(),n.set("moduleData.web_layout.tt_content_showHidden",t.prop("checked")?"1":"0").done(()=>{s.remove(),t.show()})}editPageTitle(){const e=a.default('<form><div class="form-group"><div class="input-group input-group-lg"><input class="form-control t3js-title-edit-input"><span class="input-group-btn"><button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> </span><span class="input-group-btn"><button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> </span></div></div></form>'),t=e.find("input");e.find('[data-action="cancel"]').on("click",()=>{e.replaceWith(this.$pageTitle),this.initializePageTitleRenaming()}),e.find('[data-action="submit"]').on("click",()=>{const i=t.val().trim();""!==i&&this.$pageTitle.text()!==i?this.saveChanges(t):e.find('[data-action="cancel"]').trigger("click")}),t.parents("form").on("submit",e=>(e.preventDefault(),!1));const n=this.$pageTitle;n.children().last().remove(),n.replaceWith(e),t.val(n.text()).focus(),t.on("keyup",t=>{switch(t.which){case i.KeyTypesEnum.ENTER:e.find('[data-action="submit"]').trigger("click");break;case i.KeyTypesEnum.ESCAPE:e.find('[data-action="cancel"]').trigger("click")}})}saveChanges(t){const i=t.parents("form");i.find("button").addClass("disabled"),t.attr("disabled","disabled");let a,n={};a=this.pageOverlayId>0?this.pageOverlayId:this.pageId,n.data={},n.data.pages={},n.data.pages[a]={title:t.val()},e(["TYPO3/CMS/Backend/AjaxDataHandler"],e=>{e.process(n).then(()=>{i.find("[data-action=cancel]").trigger("click"),this.$pageTitle.text(t.val()),this.initializePageTitleRenaming(),top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree()}).catch(()=>{i.find("[data-action=cancel]").trigger("click")})})}initializeNewContentElementWizard(){Array.from(document.querySelectorAll(l.newButton)).forEach(e=>{e.classList.remove("disabled")}),a.default(l.newButton).on("click",e=>{e.preventDefault();const t=a.default(e.currentTarget);s.wizard(t.attr("href"),t.data("title"))})}}})); \ No newline at end of file +var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};define(["require","exports","./Enum/KeyTypes","jquery","./Storage/Persistent","./Wizard/NewContentElement"],(function(t,e,i,a,n,s){"use strict";var l;a=__importDefault(a),function(t){t.pageTitle=".t3js-title-inlineedit",t.hiddenElements=".t3js-hidden-record",t.newButton=".t3js-toggle-new-content-element-wizard"}(l||(l={}));return new class{constructor(){this.pageId=0,this.pageOverlayId=0,this.$pageTitle=null,this.$showHiddenElementsCheckbox=null,a.default(()=>{this.initializeElements(),this.initializeEvents(),this.initializeNewContentElementWizard(),this.initializePageTitleRenaming()})}setPageId(t){this.pageId=t}setLanguageOverlayId(t){this.pageOverlayId=t}initializePageTitleRenaming(){if(!a.default.isReady)return void a.default(()=>{this.initializePageTitleRenaming()});if(this.pageId<=0)return;const t=a.default('<button type="button" class="btn btn-link" aria-label="'+TYPO3.lang.editPageTitle+'" data-action="edit"><span class="t3-icon fa fa-pencil"></span></button>');t.on("click",()=>{this.editPageTitle()}),this.$pageTitle.on("dblclick",()=>{this.editPageTitle()}).append(t)}initializeElements(){this.$pageTitle=a.default(l.pageTitle+":first"),this.$showHiddenElementsCheckbox=a.default("#checkTt_content_showHidden")}initializeEvents(){this.$showHiddenElementsCheckbox.on("change",this.toggleContentElementVisibility)}toggleContentElementVisibility(t){const e=a.default(t.currentTarget),i=a.default(l.hiddenElements),s=a.default("<span />",{class:"checkbox-spinner fa fa-circle-o-notch fa-spin"});e.hide().after(s),e.prop("checked")?i.slideDown():i.slideUp(),n.set("moduleData.web_layout.tt_content_showHidden",e.prop("checked")?"1":"0").done(()=>{s.remove(),e.show()})}editPageTitle(){const t=a.default('<form><div class="form-group"><div class="input-group input-group-lg"><input class="form-control t3js-title-edit-input"><span class="input-group-btn"><button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> </span><span class="input-group-btn"><button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> </span></div></div></form>'),e=t.find("input");t.find('[data-action="cancel"]').on("click",()=>{t.replaceWith(this.$pageTitle),this.initializePageTitleRenaming()}),t.find('[data-action="submit"]').on("click",()=>{const i=e.val().trim();""!==i&&this.$pageTitle.text()!==i?this.saveChanges(e):t.find('[data-action="cancel"]').trigger("click")}),e.parents("form").on("submit",t=>(t.preventDefault(),!1));const n=this.$pageTitle;n.children().last().remove(),n.replaceWith(t),e.val(n.text()).focus(),e.on("keydown",e=>{switch(e.which){case i.KeyTypesEnum.ENTER:t.find('[data-action="submit"]').trigger("click");break;case i.KeyTypesEnum.ESCAPE:t.find('[data-action="cancel"]').trigger("click")}})}saveChanges(e){const i=e.parents("form");i.find("button").addClass("disabled"),e.attr("disabled","disabled");let a,n={};a=this.pageOverlayId>0?this.pageOverlayId:this.pageId,n.data={},n.data.pages={},n.data.pages[a]={title:e.val()},t(["TYPO3/CMS/Backend/AjaxDataHandler"],t=>{t.process(n).then(()=>{i.find("[data-action=cancel]").trigger("click"),this.$pageTitle.text(e.val()),this.initializePageTitleRenaming(),top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree()}).catch(()=>{i.find("[data-action=cancel]").trigger("click")})})}initializeNewContentElementWizard(){Array.from(document.querySelectorAll(l.newButton)).forEach(t=>{t.classList.remove("disabled")}),a.default(l.newButton).on("click",t=>{t.preventDefault();const e=a.default(t.currentTarget);s.wizard(e.attr("href"),e.data("title"))})}}})); \ No newline at end of file diff --git a/typo3/sysext/core/Tests/Acceptance/Backend/Page/PageModuleCest.php b/typo3/sysext/core/Tests/Acceptance/Backend/Page/PageModuleCest.php index c2ee5737a62ab22b26a2f28c5364e7962f0bf220..67a0f4324a2740d945f7953562d9990f25474fec 100644 --- a/typo3/sysext/core/Tests/Acceptance/Backend/Page/PageModuleCest.php +++ b/typo3/sysext/core/Tests/Acceptance/Backend/Page/PageModuleCest.php @@ -72,7 +72,7 @@ class PageModuleCest */ private function renamePage(BackendTester $I, string $oldTitle, string $newTitle) { - $editLinkSelector = 'a[data-action="edit"]'; + $editLinkSelector = 'button[data-action="edit"]'; $inputFieldSelector = 'input[class*="t3js-title-edit-input"]'; $I->canSee($oldTitle, 'h1');