diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js index aa325b5..fa0df7a 100644 --- a/core/modules/outside_in/js/outside_in.js +++ b/core/modules/outside_in/js/outside_in.js @@ -7,32 +7,8 @@ 'use strict'; - $('.outside-in-editable') - // Bind an event listener to the .outside-in-editable div - // This listen for click events and stops default actions of those elements. - .on('click', '.js-outside-in-edit-mode', function (e) { - if (localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false') { - e.preventDefault(); - } - }) - // Bind an event listener to the .outside-in-editable div - // When a click occurs try and find the outside-in edit link - // and click it. - .not('div.contextual a, div.contextual button') - .on('click', function (e) { - if ($(e.target.offsetParent).hasClass('contextual')) { - return; - } - if (!localStorage.getItem('Drupal.contextualToolbar.isViewing')) { - return; - } - var editLink = $(e.target).find('a[data-dialog-renderer="offcanvas"]')[0]; - if (!editLink) { - var closest = $(e.target).closest('.outside-in-editable'); - editLink = closest.find('li a[data-dialog-renderer="offcanvas"]')[0]; - } - editLink.click(); - }); + var blockConfigureSelector = '[data-dialog-renderer="offcanvas"]'; + var toggleEditSelector = '[data-drupal-outsidein="toggle"]'; /** * Reacts to contextual links being added. @@ -53,45 +29,67 @@ // Bind a listener to all 'Quick edit' links for blocks // Click "Edit" button in toolbar to force Contextual Edit which starts // Outside-In edit mode also. - data.$el.find('.outside-inblock-configure a').on('click', function () { - if (!isActiveMode()) { - $('div.contextual-toolbar-tab.toolbar-tab button').click(); - } - }); + data.$el.find(blockConfigureSelector) + .on('click.outsidein', function () { + if (!isActiveMode()) { + $(toggleEditSelector).trigger('click.outsidein'); + } + }); }); /** * Gets all items that should be toggled with class during edit mode. * - * @return {*} + * @return {jQuery} * Items that should be toggled. */ - var getItemsToToggle = function () { - return $('#main-canvas, #toolbar-bar, .outside-in-editable a, .outside-in-editable button') - .not('div.contextual a, div.contextual button'); - }; + function getItemsToToggle() { + return $('#main-canvas, #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button') + .not('[data-contextual-id] a, [data-contextual-id] button'); + } - var isActiveMode = function () { + /** + * Helper to check the state of the outside-in mode. + * + * @todo don't use a class for this. + * + * @return {bool} + * State of the outside-in edit mode. + */ + function isActiveMode() { return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); - }; + } + + function toggleActiveMode() { + setActiveMode(!isActiveMode()); + } - var setToggleActiveMode = function setToggleActiveMode(forceActive) { - forceActive = forceActive || false; - if (forceActive || !isActiveMode()) { - $('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Editing')); + /** + * Helper to switch edit mode state. + * + * @param {bool} activeMode + * True enable edit mode, false disable edit mode. + */ + function setActiveMode(activeMode) { + activeMode = !!activeMode; + var $editButton = $(toggleEditSelector); + // Active edit mode. + if (activeMode) { + $editButton.text(Drupal.t('Editing')); // Close the Manage tray if open when entering edit mode. if ($('#toolbar-item-administration-tray').hasClass('is-active')) { - $('#toolbar-item-administration').click(); + $('#toolbar-item-administration').trigger('click'); } - getItemsToToggle().addClass('js-outside-in-edit-mode'); - $('.edit-mode-inactive').addClass('visually-hidden'); } + // Disable edit mode. else { - $('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Edit')); - getItemsToToggle().removeClass('js-outside-in-edit-mode'); - $('.edit-mode-inactive').removeClass('visually-hidden'); + $editButton.text(Drupal.t('Edit')); + // Close/remove offcanvas. + $('.ui-dialog-offcanvas .ui-dialog-titlebar-close').trigger('click'); } - }; + getItemsToToggle().toggleClass('js-outside-in-edit-mode', activeMode); + $('.edit-mode-inactive').toggleClass('visually-hidden', activeMode); + } /** * Attaches contextual's edit toolbar tab behavior. @@ -105,7 +103,7 @@ attach: function () { var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; if (editMode) { - setToggleActiveMode(true); + setActiveMode(true); } } }; @@ -120,9 +118,33 @@ */ Drupal.behaviors.toggleActiveMode = { attach: function () { - $('.contextual-toolbar-tab.toolbar-tab button').once('toggle-edit-mode').on('click', function () { - setToggleActiveMode(); - }); + + $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleActiveMode); + + var $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); + if ($editables.length) { + + // Bind an event listener to the editable div and stops default actions + // of those elements. + $editables.on('click.outsidein', '.js-outside-in-edit-mode', function (e) { + if (isActiveMode()) { + e.preventDefault(); + } + }); + + // When a click occurs try and find the outside-in edit link + // and click it. + $editables + .not('[data-contextual-id] a, [data-contextual-id] button') + .on('click.outsidein', function (e) { + // @todo check if we can't use currentTarget too. + if ($(e.target).parent().hasClass('contextual') || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) { + return; + } + + $(e.currentTarget).find(blockConfigureSelector).trigger('click'); + }); + } var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog'; var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas'; diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml index 0b704af..6728113 100644 --- a/core/modules/outside_in/outside_in.libraries.yml +++ b/core/modules/outside_in/outside_in.libraries.yml @@ -10,6 +10,7 @@ drupal.outside_in: dependencies: - core/jquery - core/drupal + - core/jquery.once - core/drupal.ajax drupal.off_canvas: version: VERSION diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module index b3e6f07..d608ecd 100644 --- a/core/modules/outside_in/outside_in.module +++ b/core/modules/outside_in/outside_in.module @@ -89,8 +89,9 @@ function outside_in_preprocess_block(&$variables) { // The main system block does not contain the block contextual links. $variables['#cache']['contexts'][] = 'outside_in_is_applied'; if ($variables['plugin_id'] !== 'system_main_block' && \Drupal::service('outside_in.manager')->isApplicable()) { - // Add class to all blocks to allow Javascript to target. + // Add class and attributes to all blocks to allow Javascript to target. $variables['attributes']['class'][] = 'outside-in-editable'; + $variables['attributes']['data-drupal-outsidein'] = 'editable'; } } @@ -104,6 +105,7 @@ function outside_in_toolbar_alter(&$items) { if (isset($items['contextual']['tab']) && \Drupal::service('outside_in.manager')->isApplicable()) { $items['contextual']['#weight'] = -1000; $items['contextual']['#attached']['library'][] = 'outside_in/drupal.outside_in'; + $items['contextual']['tab']['#attributes']['data-drupal-outsidein'] = 'toggle'; // Set a class on items to mark whether they should be active in edit mode. // @todo Create a dynamic method for modules to set their own items. diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php index 4487e24..73431ac 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -37,17 +37,12 @@ protected function setUp() { * Tests updating the "Powered by Drupal" block in the Off-Canvas tray. */ public function testPoweredByBlock() { - + $block_selector = '#block-powered'; $page = $this->getSession()->getPage(); - $web_assert = $this->assertSession(); $this->drupalGet('user'); - $this->enableEditingMode(); - - // Open "Powered by Drupal" block form by clicking div. - $page->find('css', '#block-powered')->click(); - $this->waitForOffCanvasToOpen(); - $this->assertOffCanvasBlockFormIsValid(); + $this->toggleEditingMode(); + $this->openBlockForm($block_selector); // Fill out form, save the form. $new_label = 'Can you imagine anyone showing the label on this block?'; @@ -58,7 +53,14 @@ public function testPoweredByBlock() { // https://www.drupal.org/node/2789381 // $this->getTray()->pressButton('Save block'); // Make sure the changes are present. + // $web_assert = $this->assertSession(); // $web_assert->pageTextContains($new_label); + + $this->openBlockForm($block_selector); + + $this->toggleEditingMode(); + // Canvas should close when editing module is closed. + $this->waitForOffCanvasToClose(); } /** @@ -67,15 +69,14 @@ public function testPoweredByBlock() { * Also tests updating the site name. */ public function testBrandingBlock() { - $web_assert = $this->assertSession(); + $block_selector = '#block-branding'; + $this->drupalGet('user'); $page = $this->getSession()->getPage(); - $this->enableEditingMode(); + $this->toggleEditingMode(); // Open branding block form by clicking div. - $page->find('css', '#block-branding')->click(); - $this->waitForOffCanvasToOpen(); - $this->assertOffCanvasBlockFormIsValid(); + $this->openBlockForm($block_selector); // Fill out form, save the form. $new_site_name = 'The site that will live a very short life.'; @@ -83,15 +84,22 @@ public function testBrandingBlock() { // @todo Uncomment the following lines after GastonJS problem solved. // https://www.drupal.org/node/2789381 + // $web_assert = $this->assertSession(); // $this->getTray()->pressButton('Save block'); // Make sure the changes are present. //$web_assert->pageTextContains($new_site_name); + + $this->openBlockForm($block_selector); + + $this->toggleEditingMode(); + // Canvas should close when editing module is closed. + $this->waitForOffCanvasToClose(); } /** * Enables Editing mode by pressing "Edit" button in the toolbar. */ - protected function enableEditingMode() { + 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); @@ -114,4 +122,18 @@ protected function assertOffCanvasBlockFormIsValid() { $web_assert->elementNotExists('css', 'select[data-drupal-selector="edit-region"]'); } + /** + * Open block form by clicking the element found with a css selector. + * + * @param string $block_selector + * A css selector selects the block or an element within it. + */ + protected function openBlockForm($block_selector) { + $page = $this->getSession()->getPage(); + // Open block form by clicking div. + $page->find('css', $block_selector)->click(); + $this->waitForOffCanvasToOpen(); + $this->assertOffCanvasBlockFormIsValid(); + } + }