Commit e2e1f61c authored by webchick's avatar webchick
Browse files

Issue #2803375 by cilefen, tedbow, saurabh-chugh, Wim Leers: Rename Outside-in...

Issue #2803375 by cilefen, tedbow, saurabh-chugh, Wim Leers: Rename Outside-in module to "Settings Tray" for real
parent 271134ee
...@@ -311,9 +311,6 @@ Node Access ...@@ -311,9 +311,6 @@ Node Access
Options Options
- ? - ?
Outside In
- Ted Bowman 'tedbow' https://www.drupal.org/u/tedbow
Page Cache Page Cache
- Lorenz Schori 'znerol' https://www.drupal.org/u/znerol - Lorenz Schori 'znerol' https://www.drupal.org/u/znerol
- Fabian Franz 'Fabianx' https://www.drupal.org/u/fabianx - Fabian Franz 'Fabianx' https://www.drupal.org/u/fabianx
...@@ -360,6 +357,9 @@ Search ...@@ -360,6 +357,9 @@ Search
Serialization Serialization
- Damian Lee 'damiankloip' https://www.drupal.org/u/damiankloip - Damian Lee 'damiankloip' https://www.drupal.org/u/damiankloip
Settings Tray
- Ted Bowman 'tedbow' https://www.drupal.org/u/tedbow
Seven Seven
- ? - ?
......
...@@ -123,7 +123,6 @@ ...@@ -123,7 +123,6 @@
"drupal/migrate_drupal_ui": "self.version", "drupal/migrate_drupal_ui": "self.version",
"drupal/node": "self.version", "drupal/node": "self.version",
"drupal/options": "self.version", "drupal/options": "self.version",
"drupal/outside_in": "self.version",
"drupal/page_cache": "self.version", "drupal/page_cache": "self.version",
"drupal/path": "self.version", "drupal/path": "self.version",
"drupal/quickedit": "self.version", "drupal/quickedit": "self.version",
...@@ -132,6 +131,7 @@ ...@@ -132,6 +131,7 @@
"drupal/rest": "self.version", "drupal/rest": "self.version",
"drupal/search": "self.version", "drupal/search": "self.version",
"drupal/serialization": "self.version", "drupal/serialization": "self.version",
"drupal/settings_tray": "self.version",
"drupal/seven": "self.version", "drupal/seven": "self.version",
"drupal/shortcut": "self.version", "drupal/shortcut": "self.version",
"drupal/simpletest": "self.version", "drupal/simpletest": "self.version",
......
...@@ -14,10 +14,10 @@ ...@@ -14,10 +14,10 @@
float: right; float: right;
} }
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode a, .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode a,
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode input { .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode input {
pointer-events: none; pointer-events: none;
} }
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .contextual-links a { .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .contextual-links a {
pointer-events: inherit; pointer-events: inherit;
} }
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
/* Transition the editables on the page, their contextual links and their hover states. */ /* Transition the editables on the page, their contextual links and their hover states. */
.dialog-off-canvas__main-canvas .contextual, .dialog-off-canvas__main-canvas .contextual,
.dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable, .dialog-off-canvas__main-canvas .js-settings-tray-edit-mode .settings-tray-editable,
.dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable { .dialog-off-canvas__main-canvas.js-tray-open .js-settings-tray-edit-mode .settings-tray-editable {
transition: all .7s ease; transition: all .7s ease;
} }
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
*/ */
/* Style the edit mode toolbar and tabs. */ /* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-outside-in-edit-mode { #toolbar-bar.js-settings-tray-edit-mode {
background-image: linear-gradient(to bottom,#0c97ed,#1f86c7); background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
} }
.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) { .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
color: #999; color: #999;
} }
.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active { .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
color: #333; color: #333;
} }
...@@ -60,11 +60,11 @@ ...@@ -60,11 +60,11 @@
} }
/* Style the editables while in edit mode. */ /* Style the editables while in edit mode. */
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable { .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
outline: 1px dashed rgba(0,0,0,0.5); outline: 1px dashed rgba(0,0,0,0.5);
box-shadow: 0 0 0 1px rgba(255,255,255,0.7); box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
} }
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover, .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable { .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
} }
...@@ -8,13 +8,13 @@ ...@@ -8,13 +8,13 @@
*/ */
/* Style the edit mode toolbar and tabs. */ /* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-outside-in-edit-mode { #toolbar-bar.js-settings-tray-edit-mode {
background-color: #fff; background-color: #fff;
} }
#toolbar-bar.js-outside-in-edit-mode .toolbar-item { #toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
color: #999; color: #999;
} }
#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active { #toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
color: #333; color: #333;
} }
...@@ -58,10 +58,10 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus { ...@@ -58,10 +58,10 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
background-image: url(../../../misc/icons/ffffff/pencil.svg); background-image: url(../../../misc/icons/ffffff/pencil.svg);
} }
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active { #toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
background-image: none; background-image: none;
color: #fff; color: #fff;
} }
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover { #toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background-image: linear-gradient(to bottom, #0094f0, #0e69be); background-image: linear-gradient(to bottom, #0094f0, #0e69be);
} }
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
/** /**
* The minimum width to use body displace needs to match the width at which * The minimum width to use body displace needs to match the width at which
* the tray will be %100 width. @see outside_in.module.css * the tray will be %100 width. @see settings_tray.module.css
* @type {Number} * @type {Number}
*/ */
minDisplaceWidth: 768, minDisplaceWidth: 768,
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
*/ */
(function ($, Drupal) { (function ($, Drupal) {
const blockConfigureSelector = '[data-outside-in-edit]'; const blockConfigureSelector = '[data-settings-tray-edit]';
const toggleEditSelector = '[data-drupal-outsidein="toggle"]'; const toggleEditSelector = '[data-drupal-settingstray="toggle"]';
const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button'; const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
const quickEditItemSelector = '[data-quickedit-entity-id]'; const quickEditItemSelector = '[data-quickedit-entity-id]';
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
*/ */
function setEditModeState(editMode) { function setEditModeState(editMode) {
if (!document.querySelector('[data-off-canvas-main-canvas]')) { if (!document.querySelector('[data-off-canvas-main-canvas]')) {
throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig'); throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
} }
editMode = !!editMode; editMode = !!editMode;
const $editButton = $(toggleEditSelector); const $editButton = $(toggleEditSelector);
...@@ -77,16 +77,16 @@ ...@@ -77,16 +77,16 @@
$editButton.text(Drupal.t('Editing')); $editButton.text(Drupal.t('Editing'));
closeToolbarTrays(); closeToolbarTrays();
$editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); $editables = $('[data-drupal-settingstray="editable"]').once('settingstray');
if ($editables.length) { if ($editables.length) {
// Use event capture to prevent clicks on links. // Use event capture to prevent clicks on links.
document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
// When a click occurs try and find the outside-in edit link // When a click occurs try and find the settings-tray edit link
// and click it. // and click it.
$editables $editables
.not(contextualItemsSelector) .not(contextualItemsSelector)
.on('click.outsidein', (e) => { .on('click.settingstray', (e) => {
// Contextual links are allowed to function in Edit mode. // Contextual links are allowed to function in Edit mode.
if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) { if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
return; return;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
}); });
$(quickEditItemSelector) $(quickEditItemSelector)
.not(contextualItemsSelector) .not(contextualItemsSelector)
.on('click.outsidein', (e) => { .on('click.settingstray', (e) => {
/** /**
* For all non-contextual links or the contextual QuickEdit link * For all non-contextual links or the contextual QuickEdit link
* close the off-canvas dialog. * close the off-canvas dialog.
...@@ -114,31 +114,31 @@ ...@@ -114,31 +114,31 @@
} }
// Disable edit mode. // Disable edit mode.
else { else {
$editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein'); $editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
if ($editables.length) { if ($editables.length) {
document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true); document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
$editables.off('.outsidein'); $editables.off('.settingstray');
$(quickEditItemSelector).off('.outsidein'); $(quickEditItemSelector).off('.settingstray');
} }
$editButton.text(Drupal.t('Edit')); $editButton.text(Drupal.t('Edit'));
closeOffCanvas(); closeOffCanvas();
disableQuickEdit(); disableQuickEdit();
} }
getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode); getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
} }
/** /**
* Helper to check the state of the outside-in mode. * Helper to check the state of the settings-tray mode.
* *
* @todo don't use a class for this. * @todo don't use a class for this.
* *
* @return {boolean} * @return {boolean}
* State of the outside-in edit mode. * State of the settings-tray edit mode.
*/ */
function isInEditMode() { function isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
} }
/** /**
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
$(document).on('drupalContextualLinkAdded', (event, data) => { $(document).on('drupalContextualLinkAdded', (event, data) => {
// When the first contextual link is added to the page set Edit Mode. // When the first contextual link is added to the page set Edit Mode.
$('body').once('outside_in.edit_mode_init').each(() => { $('body').once('settings_tray.edit_mode_init').each(() => {
const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false'; const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) { if (editMode) {
setEditModeState(true); setEditModeState(true);
...@@ -180,9 +180,9 @@ ...@@ -180,9 +180,9 @@
* mode also. * mode also.
*/ */
data.$el.find(blockConfigureSelector) data.$el.find(blockConfigureSelector)
.on('click.outsidein', () => { .on('click.settingstray', () => {
if (!isInEditMode()) { if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.outside_in'); $(toggleEditSelector).trigger('click').trigger('click.settings_tray');
} }
/** /**
* Always disable QuickEdit regardless of whether "EditMode" was just * Always disable QuickEdit regardless of whether "EditMode" was just
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
}); });
}); });
$(document).on('keyup.outsidein', (e) => { $(document).on('keyup.settingstray', (e) => {
if (isInEditMode() && e.keyCode === 27) { if (isInEditMode() && e.keyCode === 27) {
Drupal.announce( Drupal.announce(
Drupal.t('Exited edit mode.'), Drupal.t('Exited edit mode.'),
...@@ -202,16 +202,16 @@ ...@@ -202,16 +202,16 @@
}); });
/** /**
* Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode. * Toggle the js-settings-tray-edit-mode class on items that we want to disable while in edit mode.
* *
* @type {Drupal~behavior} * @type {Drupal~behavior}
* *
* @prop {Drupal~behaviorAttach} attach * @prop {Drupal~behaviorAttach} attach
* Toggle the js-outside-edit-mode class. * Toggle the js-settings-tray-edit-mode class.
*/ */
Drupal.behaviors.toggleEditMode = { Drupal.behaviors.toggleEditMode = {
attach() { attach() {
$(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
// Find all Ajax instances that use the 'off_canvas' renderer. // Find all Ajax instances that use the 'off_canvas' renderer.
Drupal.ajax.instances Drupal.ajax.instances
// If there is an element and the renderer is 'off_canvas' then we want // If there is an element and the renderer is 'off_canvas' then we want
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
if (!('dialogOptions' in instance.options.data)) { if (!('dialogOptions' in instance.options.data)) {
instance.options.data.dialogOptions = {}; instance.options.data.dialogOptions = {};
} }
instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id'); instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
instance.progress = { type: 'fullscreen' }; instance.progress = { type: 'fullscreen' };
}); });
}, },
...@@ -234,16 +234,16 @@ ...@@ -234,16 +234,16 @@
$(window).on({ $(window).on({
'dialog:beforecreate': (event, dialog, $element, settings) => { 'dialog:beforecreate': (event, dialog, $element, settings) => {
if ($element.is('#drupal-off-canvas')) { if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable'); $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
const $activeElement = $(`#${settings.outsideInActiveEditableId}`); const $activeElement = $(`#${settings.settingsTrayActiveEditableId}`);
if ($activeElement.length) { if ($activeElement.length) {
$activeElement.addClass('outside-in-active-editable'); $activeElement.addClass('settings-tray-active-editable');
} }
} }
}, },
'dialog:beforeclose': (event, dialog, $element) => { 'dialog:beforeclose': (event, dialog, $element) => {
if ($element.is('#drupal-off-canvas')) { if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable'); $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
} }
}, },
}); });
......
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