diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index 0b8bc88..cb5c3cc 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -77,7 +77,7 @@ * Helper to toggle Edit mode. */ function toggleEditMode() { - setEditModeState(!isInEditMode()); + setEditModeState(!isInEditMode(), true); } /** @@ -118,20 +118,41 @@ } /** + * Display message describing edit mode. + * + * @todo Refactor to use Javascript Message API https://www.drupal.org/node/77245 + */ + function displayEditMessage() { + var msgDiv = document.createElement('div'); + msgDiv.setAttribute('class', 'settings-tray-messages messages messages--status'); + msgDiv.setAttribute('role', 'alert'); + msgDiv.innerHTML = 'You are now in edit mode.'; + $(msgDiv).insertBefore('div.dialog-offcanvas__main-canvas').hide().fadeIn('slow'); + $(msgDiv).on('click.outsidein', function (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 display edit mode message when starting, false do not show message. */ - function setEditModeState(editMode) { + function setEditModeState(editMode, displayMessage) { editMode = !!editMode; + displayMessage = (displayMessage !== false); var $editButton = $(toggleEditSelector); var $editables; // Turn on edit mode. if (editMode) { $editButton.text(Drupal.t('Editing')); closeToolbarTrays(); - + if (displayMessage) { + displayEditMessage(); + } $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); if ($editables.length) { // Use event capture to prevent clicks on links. @@ -167,6 +188,7 @@ // Disable edit mode. else { $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein'); + $('.settings-tray-messages').remove(); if ($editables.length) { document.querySelector('[data-offcanvas-main-canvas]').removeEventListener('click', preventClick, true); $editables.off('.outsidein'); @@ -192,8 +214,9 @@ Drupal.behaviors.outsideInEdit = { attach: function () { var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; - if (editMode) { - setEditModeState(true); + // Enter Edit mode if set in local storage and not currently in edit mode. + if (editMode && !isInEditMode()) { + setEditModeState(true, false); } } }; diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php index 04c6e70..d57cc19 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -166,15 +166,19 @@ public function providerTestBlocks() { * Enables Editing mode by pressing "Edit" button in the toolbar. */ protected function toggleEditingMode() { - $this->assertSession()->waitForElementVisible('css', 'div[data-contextual-id="block:block=powered:langcode=en|outside_in::langcode=en"] .contextual-links a', 10000); - // Waiting for QuickEdit icon animation. - $this->assertSession()->assertWaitOnAjaxRequest(); + $page = $this->getSession()->getPage(); + $in_edit_mode = $page->has('css', 'div.dialog-offcanvas__main-canvas.js-outside-in-edit-mode'); - $edit_button = $this->getSession()->getPage()->find('css', '#toolbar-bar div.contextual-toolbar-tab button'); + $edit_button = $page->find('css', '#toolbar-bar div.contextual-toolbar-tab button'); $edit_button->press(); - // Waiting for Toolbar animation. $this->assertSession()->assertWaitOnAjaxRequest(); + if (!$in_edit_mode) { + $this->assertSession()->elementTextContains('css', '.settings-tray-messages', 'You are now in edit mode.'); + } + else { + $this->assertSession()->elementNotExists('css', '.settings-tray-messages'); + } } /**