diff --git a/core/modules/outside_in/js/outside_in.es6.js b/core/modules/outside_in/js/outside_in.es6.js index eea9075cab..2424b4693e 100644 --- a/core/modules/outside_in/js/outside_in.es6.js +++ b/core/modules/outside_in/js/outside_in.es6.js @@ -3,7 +3,7 @@ * Drupal's Settings Tray library. */ -(function ($, Drupal) { +(function ($, Drupal, debounce) { 'use strict'; @@ -77,7 +77,7 @@ * Helper to toggle Edit mode. */ function toggleEditMode() { - setEditModeState(!isInEditMode()); + setEditModeState(!isInEditMode(), true); } /** @@ -118,12 +118,30 @@ } /** + * Display message describing edit mode. + * + * @todo Refactor to use Javascript Message API https://www.drupal.org/node/77245 + */ + function displayEditMessage() { + const editMsg = Drupal.t('You are now in edit mode.'); + const msgDiv = document.createElement('div'); + msgDiv.setAttribute('id', 'settings-tray-edit-message') + msgDiv.setAttribute('class', 'settings-tray-messages messages messages--status'); + msgDiv.setAttribute('role', 'alert'); + msgDiv.innerHTML = editMsg; + $(msgDiv).insertBefore('div.dialog-off-canvas__main-canvas').hide().fadeIn('slow'); + Drupal.announce(editMsg); + $(msgDiv).on('click.outsidein', e => $(e.target).remove()); + } + + + /** * Helper to switch edit mode state. * * @param {boolean} editMode * True enable edit mode, false disable edit mode. */ - 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 outside-in-page-wrapper.html.twig'); } @@ -135,6 +153,11 @@ $editButton.text(Drupal.t('Editing')); closeToolbarTrays(); + if (displayMessage) { + const displayFunction = debounce(displayEditMessage, 300, true); + displayFunction(); + } + $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); if ($editables.length) { // Use event capture to prevent clicks on links. @@ -179,6 +202,8 @@ $editButton.text(Drupal.t('Edit')); closeOffCanvas(); disableQuickEdit(); + // Remove edit mode message. + $('#settings-tray-edit-message').remove(); } getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode); @@ -262,4 +287,4 @@ } }); -})(jQuery, Drupal); +})(jQuery, Drupal, Drupal.debounce); diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index 83416c26e6..493ed657ac 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -5,7 +5,7 @@ * @preserve **/ -(function ($, Drupal) { +(function ($, Drupal, debounce) { 'use strict'; @@ -43,7 +43,7 @@ } function toggleEditMode() { - setEditModeState(!isInEditMode()); + setEditModeState(!isInEditMode(), true); } function preventClick(event) { @@ -65,7 +65,23 @@ $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click'); } + function displayEditMessage() { + var editMsg = Drupal.t('You are now in edit mode.'); + var msgDiv = document.createElement('div'); + msgDiv.setAttribute('id', 'settings-tray-edit-message'); + msgDiv.setAttribute('class', 'settings-tray-messages messages messages--status'); + msgDiv.setAttribute('role', 'alert'); + msgDiv.innerHTML = editMsg; + $(msgDiv).insertBefore('div.dialog-off-canvas__main-canvas').hide().fadeIn('slow'); + Drupal.announce(editMsg); + $(msgDiv).on('click.outsidein', 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 outside-in-page-wrapper.html.twig'); } @@ -77,6 +93,11 @@ $editButton.text(Drupal.t('Editing')); closeToolbarTrays(); + if (displayMessage) { + var displayFunction = debounce(displayEditMessage, 300, true); + displayFunction(); + } + $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); if ($editables.length) { document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); @@ -110,6 +131,8 @@ $editButton.text(Drupal.t('Edit')); closeOffCanvas(); disableQuickEdit(); + + $('#settings-tray-edit-message').remove(); } getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode); @@ -170,4 +193,4 @@ } } }); -})(jQuery, Drupal); \ No newline at end of file +})(jQuery, Drupal, Drupal.debounce); \ No newline at end of file diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php index a5eacc5c53..107a055283 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -351,6 +351,7 @@ protected function assertEditModeEnabled() { $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Editing'); // The main canvas element should have the "js-outside-in-edit-mode" class. $web_assert->elementExists('css', '.dialog-off-canvas__main-canvas.js-outside-in-edit-mode'); + $web_assert->elementTextContains('css', '#settings-tray-edit-message', 'You are now in edit mode'); } /** @@ -367,6 +368,7 @@ protected function assertEditModeDisabled() { // The main canvas element should NOT have the "js-outside-in-edit-mode" // class. $web_assert->elementNotExists('css', '.dialog-off-canvas__main-canvas.js-outside-in-edit-mode'); + $web_assert->elementNotExists('css', '#settings-tray-edit-message'); } /**