diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index a4f94aa..40939dd 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -65,7 +65,7 @@ * Helper to toggle Edit mode. */ function toggleEditMode() { - setEditModeState(!isInEditMode()); + setEditModeState(!isInEditMode(), true); } /** @@ -85,18 +85,35 @@ } /** + * Display message describing edit mode. + * + * @todo Refactor to use Javascript Message API https://www.drupal.org/node/77245 + */ + function displayEditMessage() { + var editMsg = 'You are now in edit mode.'; + var htmlMsg = '
'; + $(htmlMsg).insertBefore('#main-canvas').hide().fadeIn('slow'); + } + + /** * 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')); + if (displayMessage) { + displayEditMessage(); + } // Close the Manage tray if open when entering edit mode. if ($('#toolbar-item-administration-tray').hasClass('is-active')) { $('#toolbar-item-administration').trigger('click'); @@ -124,6 +141,7 @@ // Disable edit mode. else { $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein'); + $('.settings-tray-messages').remove(); if ($editables.length) { document.querySelector('#main-canvas').removeEventListener('click', preventClick, true); $editables.off('.outsidein'); @@ -148,8 +166,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 dd79fc2..a00bfed 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -122,13 +122,24 @@ public function testBlocks() { * Enables Editing mode by pressing "Edit" button in the toolbar. */ protected function toggleEditingMode() { - $this->waitForElement('div[data-contextual-id="block:block=powered:langcode=en|outside_in::langcode=en"] .contextual-links a'); - - $this->waitForElement('#toolbar-bar', 3000); + $page = $this->getSession()->getPage(); + $contextual_link_locator = 'div[data-contextual-id="block:block=powered:langcode=en|outside_in::langcode=en"] .contextual-links a'; + // If the page just loaded wait for needed elements. + if (!$page->has('css', $contextual_link_locator)) { + $this->waitForElement($contextual_link_locator); + $this->waitForElement('#toolbar-bar'); + } + $in_edit_mode = $page->has('css', '#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(); + 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'); + } } /**