diff --git a/core/modules/settings_tray/js/settings_tray.es6.js b/core/modules/settings_tray/js/settings_tray.es6.js index a680115490..799900f1b4 100644 --- a/core/modules/settings_tray/js/settings_tray.es6.js +++ b/core/modules/settings_tray/js/settings_tray.es6.js @@ -59,13 +59,51 @@ return $(itemsToToggleSelector).not(contextualItemsSelector); } + /** + * Displays a message informing the user that they have entered edit mode. + * + * This message appear at the top of the page below the toolbar. + * The user will be able to click on the message to remove it. + * It will also be removed when exiting edit mode. + * + * @todo Refactor to use Javascript Message API + * https://www.drupal.org/node/77245 + */ + function displayEditMessage() { + if ($('#settings-tray-edit-message').length) { + // If the message div is already displayed it does not need to be displayed again. + return; + } + const editMsg = Drupal.t('Click a page element to edit it.'); + const msgDiv = document.createElement('div'); + msgDiv.setAttribute('id', 'settings-tray-edit-message'); + Drupal.dialog(msgDiv, { + position: { + my: 'left+5 top+5', + at: 'left+5 top+5', + of: '.dialog-off-canvas-main-canvas', + }, + autoResize: false, + draggable: false, + minHeight: '50px', + title: editMsg, + dialogClass: 'settings-tray-edit-message', + }).show(); + Drupal.announce(editMsg); + // This dialog only has a title therefore we don't display the content area. + msgDiv.style.display = 'none'; + $(msgDiv).on('click.settings_tray', e => $(e.target).remove()); + } + /** * Helper to switch edit mode state. * * @param {boolean} editMode * True enable edit mode, false disable edit mode. + * @param {boolean} displayMessage + * True if the message about entering edit mode should be shown. */ - function setEditModeState(editMode) { + function setEditModeState(editMode, displayMessage = false) { if (!document.querySelector('[data-off-canvas-main-canvas]')) { throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig'); } @@ -77,6 +115,10 @@ $editButton.text(Drupal.t('Editing')); closeToolbarTrays(); + if (displayMessage) { + displayEditMessage(); + } + $editables = $('[data-drupal-settingstray="editable"]').once('settingstray'); if ($editables.length) { // Use event capture to prevent clicks on links. @@ -124,6 +166,8 @@ $editButton.text(Drupal.t('Edit')); closeOffCanvas(); disableQuickEdit(); + // Remove edit mode message. + $('#settings-tray-edit-message').remove(); } getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode); @@ -145,7 +189,7 @@ * Helper to toggle Edit mode. */ function toggleEditMode() { - setEditModeState(!isInEditMode()); + setEditModeState(!isInEditMode(), true); } /** diff --git a/core/modules/settings_tray/js/settings_tray.js b/core/modules/settings_tray/js/settings_tray.js index 78c5b60382..8aeacc4ff2 100644 --- a/core/modules/settings_tray/js/settings_tray.js +++ b/core/modules/settings_tray/js/settings_tray.js @@ -35,7 +35,36 @@ return $(itemsToToggleSelector).not(contextualItemsSelector); } + function displayEditMessage() { + if ($('#settings-tray-edit-message').length) { + return; + } + var editMsg = Drupal.t('Click a page element to edit it.'); + var msgDiv = document.createElement('div'); + msgDiv.setAttribute('id', 'settings-tray-edit-message'); + Drupal.dialog(msgDiv, { + position: { + my: 'left+5 top+5', + at: 'left+5 top+5', + of: '.dialog-off-canvas-main-canvas' + }, + autoResize: false, + draggable: false, + minHeight: '50px', + title: editMsg, + dialogClass: 'settings-tray-edit-message' + }).show(); + Drupal.announce(editMsg); + + msgDiv.style.display = 'none'; + $(msgDiv).on('click.settings_tray', function (e) { + return $(e.target).remove(); + }); + } + function setEditModeState(editMode) { + var displayMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + if (!document.querySelector('[data-off-canvas-main-canvas]')) { throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig'); } @@ -47,6 +76,10 @@ $editButton.text(Drupal.t('Editing')); closeToolbarTrays(); + if (displayMessage) { + displayEditMessage(); + } + $editables = $('[data-drupal-settingstray="editable"]').once('settingstray'); if ($editables.length) { document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); @@ -80,6 +113,8 @@ $editButton.text(Drupal.t('Edit')); closeOffCanvas(); disableQuickEdit(); + + $('#settings-tray-edit-message').remove(); } getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode); @@ -90,7 +125,7 @@ } function toggleEditMode() { - setEditModeState(!isInEditMode()); + setEditModeState(!isInEditMode(), true); } function prepareAjaxLinks() { diff --git a/core/modules/settings_tray/settings_tray.libraries.yml b/core/modules/settings_tray/settings_tray.libraries.yml index de5c82c78d..1443109519 100644 --- a/core/modules/settings_tray/settings_tray.libraries.yml +++ b/core/modules/settings_tray/settings_tray.libraries.yml @@ -17,3 +17,5 @@ drupal.settings_tray: - core/drupal - core/jquery.once - core/drupal.ajax + - core/drupal.announce + - toolbar/toolbar diff --git a/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php index fcfecde400..03329b51f3 100644 --- a/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php +++ b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php @@ -284,6 +284,7 @@ protected function openBlockForm($block_selector, $contextual_link_container = ' $this->click($block_selector); $this->waitForOffCanvasToOpen(); $this->assertOffCanvasBlockFormIsValid(); + $this->closeMessageDialog(); } /** @@ -416,6 +417,8 @@ protected function assertEditModeEnabled() { $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Editing'); // The main canvas element should have the "js-settings-tray-edit-mode" class. $web_assert->elementExists('css', '.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode'); + $web_assert->elementTextContains('css', '.settings-tray-edit-message', 'Click a page element to edit it'); + $this->closeMessageDialog(); } /** @@ -432,6 +435,7 @@ protected function assertEditModeDisabled() { // The main canvas element should NOT have the "js-settings-tray-edit-mode" // class. $web_assert->elementNotExists('css', '.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode'); + $web_assert->elementNotExists('css', '#settings-tray-edit-message'); } /** @@ -577,4 +581,16 @@ protected function getTestThemes() { }); } + /** + * Closes the message dialog that contains "You are in edit mode." message. + * + * Also waits for the dialog to be removed from the page. + */ + protected function closeMessageDialog() { + if ($message_dialog_close_button = $this->assertSession()->waitForElementVisible('css', '[aria-describedby="settings-tray-edit-message"]')) { + $message_dialog_close_button->click(); + $this->waitForNoElement('css', '[aria-describedby="settings-tray-edit-message"]'); + } + } + }