Commit fdc09d31 authored by webchick's avatar webchick

Issue #2785589 by nod_, tedbow, drpal, droplet: Fix js and jsdoc of outside-in module

parent 2c60b6d2
...@@ -7,32 +7,10 @@ ...@@ -7,32 +7,10 @@
'use strict'; 'use strict';
$('.outside-in-editable') var blockConfigureSelector = '[data-dialog-renderer="offcanvas"]';
// Bind an event listener to the .outside-in-editable div var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
// This listen for click events and stops default actions of those elements. var itemsToToggleSelector = '#main-canvas, #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
.on('click', '.js-outside-in-edit-mode', function (e) { var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
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();
});
/** /**
* Reacts to contextual links being added. * Reacts to contextual links being added.
...@@ -53,45 +31,96 @@ ...@@ -53,45 +31,96 @@
// Bind a listener to all 'Quick edit' links for blocks // Bind a listener to all 'Quick edit' links for blocks
// Click "Edit" button in toolbar to force Contextual Edit which starts // Click "Edit" button in toolbar to force Contextual Edit which starts
// Outside-In edit mode also. // Outside-In edit mode also.
data.$el.find('.outside-inblock-configure a').on('click', function () { data.$el.find(blockConfigureSelector)
if (!isActiveMode()) { .on('click.outsidein', function () {
$('div.contextual-toolbar-tab.toolbar-tab button').click(); if (!isInEditMode()) {
} $(toggleEditSelector).trigger('click.outsidein');
}); }
});
}); });
/** /**
* Gets all items that should be toggled with class during edit mode. * Gets all items that should be toggled with class during edit mode.
* *
* @return {*} * @return {jQuery}
* Items that should be toggled. * Items that should be toggled.
*/ */
var getItemsToToggle = function () { function getItemsToToggle() {
return $('#main-canvas, #toolbar-bar, .outside-in-editable a, .outside-in-editable button') return $(itemsToToggleSelector).not(contextualItemsSelector);
.not('div.contextual a, div.contextual 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 isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
}; }
function toggleEditMode() {
setEditModeState(!isInEditMode());
}
var setToggleActiveMode = function setToggleActiveMode(forceActive) { function preventClick(event) {
forceActive = forceActive || false; event.preventDefault();
if (forceActive || !isActiveMode()) { }
$('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Editing'));
/**
* Helper to switch edit mode state.
*
* @param {bool} editMode
* True enable edit mode, false disable edit mode.
*/
function setEditModeState(editMode) {
editMode = !!editMode;
var $editButton = $(toggleEditSelector);
var $editables;
// Turn on edit mode.
if (editMode) {
$editButton.text(Drupal.t('Editing'));
// Close the Manage tray if open when entering edit mode. // Close the Manage tray if open when entering edit mode.
if ($('#toolbar-item-administration-tray').hasClass('is-active')) { if ($('#toolbar-item-administration-tray').hasClass('is-active')) {
$('#toolbar-item-administration').click(); $('#toolbar-item-administration').trigger('click');
}
$editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
if ($editables.length) {
// Use event capture to prevent clicks on links.
document.addEventListener('click', preventClick, true);
// When a click occurs try and find the outside-in edit link
// and click it.
$editables
.not(contextualItemsSelector)
.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');
});
} }
getItemsToToggle().addClass('js-outside-in-edit-mode');
$('.edit-mode-inactive').addClass('visually-hidden');
} }
// Disable edit mode.
else { else {
$('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Edit')); $editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
getItemsToToggle().removeClass('js-outside-in-edit-mode'); if ($editables.length) {
$('.edit-mode-inactive').removeClass('visually-hidden'); document.removeEventListener('click', preventClick, true);
$editables.off('.outsidein');
}
$editButton.text(Drupal.t('Edit'));
// Close/remove offcanvas.
$('.ui-dialog-offcanvas .ui-dialog-titlebar-close').trigger('click');
} }
}; getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
}
/** /**
* Attaches contextual's edit toolbar tab behavior. * Attaches contextual's edit toolbar tab behavior.
...@@ -105,7 +134,7 @@ ...@@ -105,7 +134,7 @@
attach: function () { attach: function () {
var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) { if (editMode) {
setToggleActiveMode(true); setEditModeState(true);
} }
} }
}; };
...@@ -118,11 +147,10 @@ ...@@ -118,11 +147,10 @@
* @prop {Drupal~behaviorAttach} attach * @prop {Drupal~behaviorAttach} attach
* Toggle the js-outside-edit-mode class. * Toggle the js-outside-edit-mode class.
*/ */
Drupal.behaviors.toggleActiveMode = { Drupal.behaviors.toggleEditMode = {
attach: function () { attach: function () {
$('.contextual-toolbar-tab.toolbar-tab button').once('toggle-edit-mode').on('click', function () {
setToggleActiveMode(); $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
});
var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog'; var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog';
var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas'; var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas';
......
...@@ -10,6 +10,7 @@ drupal.outside_in: ...@@ -10,6 +10,7 @@ drupal.outside_in:
dependencies: dependencies:
- core/jquery - core/jquery
- core/drupal - core/drupal
- core/jquery.once
- core/drupal.ajax - core/drupal.ajax
drupal.off_canvas: drupal.off_canvas:
version: VERSION version: VERSION
......
...@@ -89,8 +89,9 @@ function outside_in_preprocess_block(&$variables) { ...@@ -89,8 +89,9 @@ function outside_in_preprocess_block(&$variables) {
// The main system block does not contain the block contextual links. // The main system block does not contain the block contextual links.
$variables['#cache']['contexts'][] = 'outside_in_is_applied'; $variables['#cache']['contexts'][] = 'outside_in_is_applied';
if ($variables['plugin_id'] !== 'system_main_block' && \Drupal::service('outside_in.manager')->isApplicable()) { 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']['class'][] = 'outside-in-editable';
$variables['attributes']['data-drupal-outsidein'] = 'editable';
} }
} }
...@@ -104,6 +105,7 @@ function outside_in_toolbar_alter(&$items) { ...@@ -104,6 +105,7 @@ function outside_in_toolbar_alter(&$items) {
if (isset($items['contextual']['tab']) && \Drupal::service('outside_in.manager')->isApplicable()) { if (isset($items['contextual']['tab']) && \Drupal::service('outside_in.manager')->isApplicable()) {
$items['contextual']['#weight'] = -1000; $items['contextual']['#weight'] = -1000;
$items['contextual']['#attached']['library'][] = 'outside_in/drupal.outside_in'; $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. // 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. // @todo Create a dynamic method for modules to set their own items.
......
...@@ -37,17 +37,12 @@ protected function setUp() { ...@@ -37,17 +37,12 @@ protected function setUp() {
* Tests updating the "Powered by Drupal" block in the Off-Canvas tray. * Tests updating the "Powered by Drupal" block in the Off-Canvas tray.
*/ */
public function testPoweredByBlock() { public function testPoweredByBlock() {
$block_selector = '#block-powered';
$page = $this->getSession()->getPage(); $page = $this->getSession()->getPage();
$web_assert = $this->assertSession();
$this->drupalGet('user'); $this->drupalGet('user');
$this->enableEditingMode(); $this->toggleEditingMode();
$this->openBlockForm($block_selector);
// Open "Powered by Drupal" block form by clicking div.
$page->find('css', '#block-powered')->click();
$this->waitForOffCanvasToOpen();
$this->assertOffCanvasBlockFormIsValid();
// Fill out form, save the form. // Fill out form, save the form.
$new_label = 'Can you imagine anyone showing the label on this block?'; $new_label = 'Can you imagine anyone showing the label on this block?';
...@@ -58,7 +53,19 @@ public function testPoweredByBlock() { ...@@ -58,7 +53,19 @@ public function testPoweredByBlock() {
// https://www.drupal.org/node/2789381 // https://www.drupal.org/node/2789381
// $this->getTray()->pressButton('Save block'); // $this->getTray()->pressButton('Save block');
// Make sure the changes are present. // Make sure the changes are present.
// $web_assert = $this->assertSession();
// $web_assert->pageTextContains($new_label); // $web_assert->pageTextContains($new_label);
$this->openBlockForm($block_selector);
$this->toggleEditingMode();
// Canvas should close when editing module is closed.
$this->waitForOffCanvasToClose();
// Go into Edit mode again
$this->toggleEditingMode();
// Open block form by click "Drupal" link in content.
$this->openBlockForm("$block_selector .content a");
} }
/** /**
...@@ -67,15 +74,14 @@ public function testPoweredByBlock() { ...@@ -67,15 +74,14 @@ public function testPoweredByBlock() {
* Also tests updating the site name. * Also tests updating the site name.
*/ */
public function testBrandingBlock() { public function testBrandingBlock() {
$web_assert = $this->assertSession(); $block_selector = '#block-branding';
$this->drupalGet('user'); $this->drupalGet('user');
$page = $this->getSession()->getPage(); $page = $this->getSession()->getPage();
$this->enableEditingMode(); $this->toggleEditingMode();
// Open branding block form by clicking div. // Open branding block form by clicking div.
$page->find('css', '#block-branding')->click(); $this->openBlockForm($block_selector);
$this->waitForOffCanvasToOpen();
$this->assertOffCanvasBlockFormIsValid();
// Fill out form, save the form. // Fill out form, save the form.
$new_site_name = 'The site that will live a very short life.'; $new_site_name = 'The site that will live a very short life.';
...@@ -83,15 +89,22 @@ public function testBrandingBlock() { ...@@ -83,15 +89,22 @@ public function testBrandingBlock() {
// @todo Uncomment the following lines after GastonJS problem solved. // @todo Uncomment the following lines after GastonJS problem solved.
// https://www.drupal.org/node/2789381 // https://www.drupal.org/node/2789381
// $web_assert = $this->assertSession();
// $this->getTray()->pressButton('Save block'); // $this->getTray()->pressButton('Save block');
// Make sure the changes are present. // Make sure the changes are present.
//$web_assert->pageTextContains($new_site_name); //$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. * 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('div[data-contextual-id="block:block=powered:langcode=en|outside_in::langcode=en"] .contextual-links a');
$this->waitForElement('#toolbar-bar', 3000); $this->waitForElement('#toolbar-bar', 3000);
...@@ -114,4 +127,18 @@ protected function assertOffCanvasBlockFormIsValid() { ...@@ -114,4 +127,18 @@ protected function assertOffCanvasBlockFormIsValid() {
$web_assert->elementNotExists('css', 'select[data-drupal-selector="edit-region"]'); $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();
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment