Move into nested docroot
This commit is contained in:
Rob Davies
parent
83a0d3a149
commit
c8b70abde9
13405 changed files with 0 additions and 0 deletions
147
web/core/modules/outside_in/js/offcanvas.js
Normal file
147
web/core/modules/outside_in/js/offcanvas.js
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
* @file
|
||||
* Drupal's off-canvas library.
|
||||
*
|
||||
* @todo This functionality should extracted into a new core library or a part
|
||||
* of the current drupal.dialog.ajax library.
|
||||
* https://www.drupal.org/node/2784443
|
||||
*/
|
||||
|
||||
(function ($, Drupal, debounce, displace) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// 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
|
||||
var minDisplaceWidth = 768;
|
||||
|
||||
/**
|
||||
* The edge of the screen that the dialog should appear on.
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
||||
|
||||
var $mainCanvasWrapper = $('[data-offcanvas-main-canvas]');
|
||||
|
||||
/**
|
||||
* Resets the size of the dialog.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
function resetSize(event) {
|
||||
var offsets = displace.offsets;
|
||||
var $element = event.data.$element;
|
||||
var $widget = $element.dialog('widget');
|
||||
|
||||
var adjustedOptions = {
|
||||
// @see http://api.jqueryui.com/position/
|
||||
position: {
|
||||
my: edge + ' top',
|
||||
at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
|
||||
of: window
|
||||
}
|
||||
};
|
||||
|
||||
$widget.css({
|
||||
position: 'fixed',
|
||||
height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
|
||||
});
|
||||
|
||||
$element
|
||||
.dialog('option', adjustedOptions)
|
||||
.trigger('dialogContentResize.offcanvas');
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjusts the dialog on resize.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
function handleDialogResize(event) {
|
||||
var $element = event.data.$element;
|
||||
var $widget = $element.dialog('widget');
|
||||
|
||||
var $offsets = $widget.find('> :not(#drupal-offcanvas, .ui-resizable-handle)');
|
||||
var offset = 0;
|
||||
var modalHeight;
|
||||
|
||||
// Let scroll element take all the height available.
|
||||
$element.css({height: 'auto'});
|
||||
modalHeight = $widget.height();
|
||||
$offsets.each(function () { offset += $(this).outerHeight(); });
|
||||
|
||||
// Take internal padding into account.
|
||||
var scrollOffset = $element.outerHeight() - $element.height();
|
||||
$element.height(modalHeight - offset - scrollOffset);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjusts the body padding when the dialog is resized.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
function bodyPadding(event) {
|
||||
if ($('body').outerWidth() < minDisplaceWidth) {
|
||||
return;
|
||||
}
|
||||
var $element = event.data.$element;
|
||||
var $widget = $element.dialog('widget');
|
||||
|
||||
var width = $widget.outerWidth();
|
||||
var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
|
||||
if (width !== mainCanvasPadding) {
|
||||
$mainCanvasWrapper.css('padding-' + edge, width + 'px');
|
||||
$widget.attr('data-offset-' + edge, width);
|
||||
displace();
|
||||
}
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': function (event, dialog, $element, settings) {
|
||||
if ($element.is('#drupal-offcanvas')) {
|
||||
var eventData = {settings: settings, $element: $element};
|
||||
$('.ui-dialog-offcanvas, .ui-dialog-offcanvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
|
||||
|
||||
$element
|
||||
.on('dialogresize.offcanvas', eventData, debounce(bodyPadding, 100))
|
||||
.on('dialogContentResize.offcanvas', eventData, handleDialogResize)
|
||||
.on('dialogContentResize.offcanvas', eventData, debounce(bodyPadding, 100))
|
||||
.trigger('dialogresize.offcanvas');
|
||||
|
||||
$element.dialog('widget').attr('data-offset-' + edge, '');
|
||||
|
||||
$(window)
|
||||
.on('resize.offcanvas scroll.offcanvas', eventData, debounce(resetSize, 100))
|
||||
.trigger('resize.offcanvas');
|
||||
}
|
||||
},
|
||||
'dialog:beforecreate': function (event, dialog, $element, settings) {
|
||||
if ($element.is('#drupal-offcanvas')) {
|
||||
$('body').addClass('js-tray-open');
|
||||
// @see http://api.jqueryui.com/position/
|
||||
settings.position = {
|
||||
my: 'left top',
|
||||
at: edge + ' top',
|
||||
of: window
|
||||
};
|
||||
settings.dialogClass += ' ui-dialog-offcanvas';
|
||||
// Applies initial height to dialog based on window height.
|
||||
// See http://api.jqueryui.com/dialog for all dialog options.
|
||||
settings.height = $(window).height();
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function (event, dialog, $element) {
|
||||
if ($element.is('#drupal-offcanvas')) {
|
||||
$('body').removeClass('js-tray-open');
|
||||
$(document).off('.offcanvas');
|
||||
$(window).off('.offcanvas');
|
||||
$mainCanvasWrapper.css('padding-' + edge, 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
|
||||
262
web/core/modules/outside_in/js/outside_in.js
Normal file
262
web/core/modules/outside_in/js/outside_in.js
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
/**
|
||||
* @file
|
||||
* Drupal's Settings Tray library.
|
||||
*/
|
||||
|
||||
(function ($, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var blockConfigureSelector = '[data-outside-in-edit]';
|
||||
var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
|
||||
var itemsToToggleSelector = '[data-offcanvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
|
||||
var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
|
||||
var quickEditItemSelector = '[data-quickedit-entity-id]';
|
||||
|
||||
/**
|
||||
* Reacts to contextual links being added.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The `drupalContextualLinkAdded` event.
|
||||
* @param {object} data
|
||||
* An object containing the data relevant to the event.
|
||||
*
|
||||
* @listens event:drupalContextualLinkAdded
|
||||
*/
|
||||
$(document).on('drupalContextualLinkAdded', function (event, data) {
|
||||
// Bind Ajax behaviors to all items showing the class.
|
||||
// @todo Fix contextual links to work with use-ajax links in
|
||||
// https://www.drupal.org/node/2764931.
|
||||
Drupal.attachBehaviors(data.$el[0]);
|
||||
|
||||
// Bind a listener to all 'Quick edit' links for blocks
|
||||
// Click "Edit" button in toolbar to force Contextual Edit which starts
|
||||
// Settings Tray edit mode also.
|
||||
data.$el.find(blockConfigureSelector)
|
||||
.on('click.outsidein', function () {
|
||||
if (!isInEditMode()) {
|
||||
$(toggleEditSelector).trigger('click.outsidein');
|
||||
}
|
||||
// Always disable QuickEdit regardless of whether "EditMode" was just enabled.
|
||||
disableQuickEdit();
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('keyup.outsidein', function (e) {
|
||||
if (isInEditMode() && e.keyCode === 27) {
|
||||
Drupal.announce(
|
||||
Drupal.t('Exited edit mode.')
|
||||
);
|
||||
toggleEditMode();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Gets all items that should be toggled with class during edit mode.
|
||||
*
|
||||
* @return {jQuery}
|
||||
* Items that should be toggled.
|
||||
*/
|
||||
function getItemsToToggle() {
|
||||
return $(itemsToToggleSelector).not(contextualItemsSelector);
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to check the state of the outside-in mode.
|
||||
*
|
||||
* @todo don't use a class for this.
|
||||
*
|
||||
* @return {boolean}
|
||||
* State of the outside-in edit mode.
|
||||
*/
|
||||
function isInEditMode() {
|
||||
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to toggle Edit mode.
|
||||
*/
|
||||
function toggleEditMode() {
|
||||
setEditModeState(!isInEditMode());
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent default click events except contextual links.
|
||||
*
|
||||
* In edit mode the default action of click events is suppressed.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The click event.
|
||||
*/
|
||||
function preventClick(event) {
|
||||
// Do not prevent contextual links.
|
||||
if ($(event.target).closest('.contextual-links').length) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Close any active toolbar tray before entering edit mode.
|
||||
*/
|
||||
function closeToolbarTrays() {
|
||||
$(Drupal.toolbar.models.toolbarModel.get('activeTab')).trigger('click');
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the QuickEdit module editor if open.
|
||||
*/
|
||||
function disableQuickEdit() {
|
||||
$('.quickedit-toolbar button.action-cancel').trigger('click');
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes/removes offcanvas.
|
||||
*/
|
||||
function closeOffCanvas() {
|
||||
$('.ui-dialog-offcanvas .ui-dialog-titlebar-close').trigger('click');
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to switch edit mode state.
|
||||
*
|
||||
* @param {boolean} 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'));
|
||||
closeToolbarTrays();
|
||||
|
||||
$editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
|
||||
if ($editables.length) {
|
||||
// Use event capture to prevent clicks on links.
|
||||
document.querySelector('[data-offcanvas-main-canvas]').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) {
|
||||
// Contextual links are allowed to function in Edit mode.
|
||||
if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
|
||||
return;
|
||||
}
|
||||
$(e.currentTarget).find(blockConfigureSelector).trigger('click');
|
||||
disableQuickEdit();
|
||||
});
|
||||
$(quickEditItemSelector)
|
||||
.not(contextualItemsSelector)
|
||||
.on('click.outsidein', function (e) {
|
||||
// For all non-contextual links or the contextual QuickEdit link close the off-canvas tray.
|
||||
if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
|
||||
closeOffCanvas();
|
||||
}
|
||||
// Do not trigger if target is quick edit link to avoid loop.
|
||||
if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
|
||||
return;
|
||||
}
|
||||
$(e.currentTarget).find('li.quickedit a').trigger('click');
|
||||
});
|
||||
}
|
||||
}
|
||||
// Disable edit mode.
|
||||
else {
|
||||
$editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
|
||||
if ($editables.length) {
|
||||
document.querySelector('[data-offcanvas-main-canvas]').removeEventListener('click', preventClick, true);
|
||||
$editables.off('.outsidein');
|
||||
$(quickEditItemSelector).off('.outsidein');
|
||||
}
|
||||
|
||||
$editButton.text(Drupal.t('Edit'));
|
||||
closeOffCanvas();
|
||||
disableQuickEdit();
|
||||
}
|
||||
getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
|
||||
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches contextual's edit toolbar tab behavior.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches contextual toolbar behavior on a contextualToolbar-init event.
|
||||
*/
|
||||
Drupal.behaviors.outsideInEdit = {
|
||||
attach: function () {
|
||||
var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
|
||||
if (editMode) {
|
||||
setEditModeState(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Toggle the js-outside-edit-mode class.
|
||||
*/
|
||||
Drupal.behaviors.toggleEditMode = {
|
||||
attach: function () {
|
||||
|
||||
$(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
|
||||
|
||||
var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog';
|
||||
var replace = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas';
|
||||
// Loop through all Ajax links and change the format to dialog-offcanvas when
|
||||
// needed.
|
||||
Drupal.ajax.instances
|
||||
.filter(function (instance) {
|
||||
var hasElement = instance && !!instance.element;
|
||||
var rendererOffcanvas = false;
|
||||
var wrapperOffcanvas = false;
|
||||
if (hasElement) {
|
||||
rendererOffcanvas = $(instance.element).attr('data-dialog-renderer') === 'offcanvas';
|
||||
wrapperOffcanvas = instance.options.url.indexOf('drupal_dialog_offcanvas') === -1;
|
||||
}
|
||||
return hasElement && rendererOffcanvas && wrapperOffcanvas;
|
||||
})
|
||||
.forEach(function (instance) {
|
||||
// @todo Move logic for data-dialog-renderer attribute into ajax.js
|
||||
// https://www.drupal.org/node/2784443
|
||||
instance.options.url = instance.options.url.replace(search, replace);
|
||||
// Check to make sure existing dialogOptions aren't overridden.
|
||||
if (!('dialogOptions' in instance.options.data)) {
|
||||
instance.options.data.dialogOptions = {};
|
||||
}
|
||||
instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
|
||||
instance.progress = {type: 'fullscreen'};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Manage Active editable class on opening and closing of the dialog.
|
||||
$(window).on({
|
||||
'dialog:beforecreate': function (event, dialog, $element, settings) {
|
||||
if ($element.is('#drupal-offcanvas')) {
|
||||
$('body .outside-in-active-editable').removeClass('outside-in-active-editable');
|
||||
var $activeElement = $('#' + settings.outsideInActiveEditableId);
|
||||
if ($activeElement.length) {
|
||||
$activeElement.addClass('outside-in-active-editable');
|
||||
settings.dialogClass += ' ui-dialog-outside-in';
|
||||
}
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function (event, dialog, $element) {
|
||||
if ($element.is('#drupal-offcanvas')) {
|
||||
$('body .outside-in-active-editable').removeClass('outside-in-active-editable');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, Drupal);
|
||||
Reference in a new issue