Commit d32af630 authored by alexpott's avatar alexpott

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

This reverts commit fdc09d31.
parent 93bea22b
......@@ -7,10 +7,32 @@
'use strict';
var blockConfigureSelector = '[data-dialog-renderer="offcanvas"]';
var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
var itemsToToggleSelector = '#main-canvas, #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
$('.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();
});
/**
* Reacts to contextual links being added.
......@@ -31,96 +53,45 @@
// 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(blockConfigureSelector)
.on('click.outsidein', function () {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click.outsidein');
}
});
data.$el.find('.outside-inblock-configure a').on('click', function () {
if (!isActiveMode()) {
$('div.contextual-toolbar-tab.toolbar-tab button').click();
}
});
});
/**
* Gets all items that should be toggled with class during edit mode.
*
* @return {jQuery}
* @return {*}
* Items that should be toggled.
*/
function getItemsToToggle() {
return $(itemsToToggleSelector).not(contextualItemsSelector);
}
var getItemsToToggle = function () {
return $('#main-canvas, #toolbar-bar, .outside-in-editable a, .outside-in-editable button')
.not('div.contextual a, div.contextual button');
};
/**
* 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() {
var isActiveMode = function () {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
}
function toggleEditMode() {
setEditModeState(!isInEditMode());
}
function preventClick(event) {
event.preventDefault();
}
};
/**
* 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'));
var setToggleActiveMode = function setToggleActiveMode(forceActive) {
forceActive = forceActive || false;
if (forceActive || !isActiveMode()) {
$('#toolbar-bar .contextual-toolbar-tab button').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').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');
});
$('#toolbar-item-administration').click();
}
getItemsToToggle().addClass('js-outside-in-edit-mode');
$('.edit-mode-inactive').addClass('visually-hidden');
}
// Disable edit mode.
else {
$editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
if ($editables.length) {
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');
$('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Edit'));
getItemsToToggle().removeClass('js-outside-in-edit-mode');
$('.edit-mode-inactive').removeClass('visually-hidden');
}
getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
}
};
/**
* Attaches contextual's edit toolbar tab behavior.
......@@ -134,7 +105,7 @@
attach: function () {
var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
setToggleActiveMode(true);
}
}
};
......@@ -147,10 +118,11 @@
* @prop {Drupal~behaviorAttach} attach
* Toggle the js-outside-edit-mode class.
*/
Drupal.behaviors.toggleEditMode = {
Drupal.behaviors.toggleActiveMode = {
attach: function () {
$(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
$('.contextual-toolbar-tab.toolbar-tab button').once('toggle-edit-mode').on('click', function () {
setToggleActiveMode();
});
var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog';
var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas';
......
......@@ -10,7 +10,6 @@ drupal.outside_in:
dependencies:
- core/jquery
- core/drupal
- core/jquery.once
- core/drupal.ajax
drupal.off_canvas:
version: VERSION
......
......@@ -92,9 +92,8 @@ 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 and attributes to all blocks to allow Javascript to target.
// Add class to all blocks to allow Javascript to target.
$variables['attributes']['class'][] = 'outside-in-editable';
$variables['attributes']['data-drupal-outsidein'] = 'editable';
}
}
......@@ -108,7 +107,6 @@ 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.
......
......@@ -37,12 +37,17 @@ 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->toggleEditingMode();
$this->openBlockForm($block_selector);
$this->enableEditingMode();
// 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.
$new_label = 'Can you imagine anyone showing the label on this block?';
......@@ -53,19 +58,7 @@ 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();
// Go into Edit mode again
$this->toggleEditingMode();
// Open block form by click "Drupal" link in content.
$this->openBlockForm("$block_selector .content a");
}
/**
......@@ -74,14 +67,15 @@ public function testPoweredByBlock() {
* Also tests updating the site name.
*/
public function testBrandingBlock() {
$block_selector = '#block-branding';
$web_assert = $this->assertSession();
$this->drupalGet('user');
$page = $this->getSession()->getPage();
$this->toggleEditingMode();
$this->enableEditingMode();
// Open branding block form by clicking div.
$this->openBlockForm($block_selector);
$page->find('css', '#block-branding')->click();
$this->waitForOffCanvasToOpen();
$this->assertOffCanvasBlockFormIsValid();
// Fill out form, save the form.
$new_site_name = 'The site that will live a very short life.';
......@@ -89,22 +83,15 @@ 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 toggleEditingMode() {
protected function enableEditingMode() {
$this->waitForElement('div[data-contextual-id="block:block=powered:langcode=en|outside_in::langcode=en"] .contextual-links a');
$this->waitForElement('#toolbar-bar', 3000);
......@@ -127,18 +114,4 @@ 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();
}
}
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