Move into nested docroot
This commit is contained in:
parent
83a0d3a149
commit
c8b70abde9
13405 changed files with 0 additions and 0 deletions
web/core/modules/toolbar/js
48
web/core/modules/toolbar/js/escapeAdmin.js
Normal file
48
web/core/modules/toolbar/js/escapeAdmin.js
Normal file
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* @file
|
||||
* Replaces the home link in toolbar with a back to site link.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var pathInfo = drupalSettings.path;
|
||||
var escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
|
||||
var windowLocation = window.location;
|
||||
|
||||
// Saves the last non-administrative page in the browser to be able to link
|
||||
// back to it when browsing administrative pages. If there is a destination
|
||||
// parameter there is not need to save the current path because the page is
|
||||
// loaded within an existing "workflow".
|
||||
if (!pathInfo.currentPathIsAdmin && !/destination=/.test(windowLocation.search)) {
|
||||
sessionStorage.setItem('escapeAdminPath', windowLocation);
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces the "Home" link with "Back to site" link.
|
||||
*
|
||||
* Back to site link points to the last non-administrative page the user
|
||||
* visited within the same browser tab.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches the replacement functionality to the toolbar-escape-admin element.
|
||||
*/
|
||||
Drupal.behaviors.escapeAdmin = {
|
||||
attach: function () {
|
||||
var $toolbarEscape = $('[data-toolbar-escape-admin]').once('escapeAdmin');
|
||||
if ($toolbarEscape.length && pathInfo.currentPathIsAdmin) {
|
||||
if (escapeAdminPath !== null) {
|
||||
$toolbarEscape.attr('href', escapeAdminPath);
|
||||
}
|
||||
else {
|
||||
$toolbarEscape.text(Drupal.t('Home'));
|
||||
}
|
||||
$toolbarEscape.closest('.toolbar-tab').removeClass('hidden');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, Drupal, drupalSettings);
|
33
web/core/modules/toolbar/js/models/MenuModel.js
Normal file
33
web/core/modules/toolbar/js/models/MenuModel.js
Normal file
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* @file
|
||||
* A Backbone Model for collapsible menus.
|
||||
*/
|
||||
|
||||
(function (Backbone, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Backbone Model for collapsible menus.
|
||||
*
|
||||
* @constructor
|
||||
*
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
Drupal.toolbar.MenuModel = Backbone.Model.extend(/** @lends Drupal.toolbar.MenuModel# */{
|
||||
|
||||
/**
|
||||
* @type {object}
|
||||
*
|
||||
* @prop {object} subtrees
|
||||
*/
|
||||
defaults: /** @lends Drupal.toolbar.MenuModel# */{
|
||||
|
||||
/**
|
||||
* @type {object}
|
||||
*/
|
||||
subtrees: {}
|
||||
}
|
||||
});
|
||||
|
||||
}(Backbone, Drupal));
|
157
web/core/modules/toolbar/js/models/ToolbarModel.js
Normal file
157
web/core/modules/toolbar/js/models/ToolbarModel.js
Normal file
|
@ -0,0 +1,157 @@
|
|||
/**
|
||||
* @file
|
||||
* A Backbone Model for the toolbar.
|
||||
*/
|
||||
|
||||
(function (Backbone, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Backbone model for the toolbar.
|
||||
*
|
||||
* @constructor
|
||||
*
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
Drupal.toolbar.ToolbarModel = Backbone.Model.extend(/** @lends Drupal.toolbar.ToolbarModel# */{
|
||||
|
||||
/**
|
||||
* @type {object}
|
||||
*
|
||||
* @prop activeTab
|
||||
* @prop activeTray
|
||||
* @prop isOriented
|
||||
* @prop isFixed
|
||||
* @prop areSubtreesLoaded
|
||||
* @prop isViewportOverflowConstrained
|
||||
* @prop orientation
|
||||
* @prop locked
|
||||
* @prop isTrayToggleVisible
|
||||
* @prop height
|
||||
* @prop offsets
|
||||
*/
|
||||
defaults: /** @lends Drupal.toolbar.ToolbarModel# */{
|
||||
|
||||
/**
|
||||
* The active toolbar tab. All other tabs should be inactive under
|
||||
* normal circumstances. It will remain active across page loads. The
|
||||
* active item is stored as an ID selector e.g. '#toolbar-item--1'.
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
activeTab: null,
|
||||
|
||||
/**
|
||||
* Represents whether a tray is open or not. Stored as an ID selector e.g.
|
||||
* '#toolbar-item--1-tray'.
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
activeTray: null,
|
||||
|
||||
/**
|
||||
* Indicates whether the toolbar is displayed in an oriented fashion,
|
||||
* either horizontal or vertical.
|
||||
*
|
||||
* @type {bool}
|
||||
*/
|
||||
isOriented: false,
|
||||
|
||||
/**
|
||||
* Indicates whether the toolbar is positioned absolute (false) or fixed
|
||||
* (true).
|
||||
*
|
||||
* @type {bool}
|
||||
*/
|
||||
isFixed: false,
|
||||
|
||||
/**
|
||||
* Menu subtrees are loaded through an AJAX request only when the Toolbar
|
||||
* is set to a vertical orientation.
|
||||
*
|
||||
* @type {bool}
|
||||
*/
|
||||
areSubtreesLoaded: false,
|
||||
|
||||
/**
|
||||
* If the viewport overflow becomes constrained, isFixed must be true so
|
||||
* that elements in the trays aren't lost off-screen and impossible to
|
||||
* get to.
|
||||
*
|
||||
* @type {bool}
|
||||
*/
|
||||
isViewportOverflowConstrained: false,
|
||||
|
||||
/**
|
||||
* The orientation of the active tray.
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
orientation: 'vertical',
|
||||
|
||||
/**
|
||||
* A tray is locked if a user toggled it to vertical. Otherwise a tray
|
||||
* will switch between vertical and horizontal orientation based on the
|
||||
* configured breakpoints. The locked state will be maintained across page
|
||||
* loads.
|
||||
*
|
||||
* @type {bool}
|
||||
*/
|
||||
locked: false,
|
||||
|
||||
/**
|
||||
* Indicates whether the tray orientation toggle is visible.
|
||||
*
|
||||
* @type {bool}
|
||||
*/
|
||||
isTrayToggleVisible: false,
|
||||
|
||||
/**
|
||||
* The height of the toolbar.
|
||||
*
|
||||
* @type {number}
|
||||
*/
|
||||
height: null,
|
||||
|
||||
/**
|
||||
* The current viewport offsets determined by {@link Drupal.displace}. The
|
||||
* offsets suggest how a module might position is components relative to
|
||||
* the viewport.
|
||||
*
|
||||
* @type {object}
|
||||
*
|
||||
* @prop {number} top
|
||||
* @prop {number} right
|
||||
* @prop {number} bottom
|
||||
* @prop {number} left
|
||||
*/
|
||||
offsets: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*
|
||||
* @param {object} attributes
|
||||
* Attributes for the toolbar.
|
||||
* @param {object} options
|
||||
* Options for the toolbar.
|
||||
*
|
||||
* @return {string|undefined}
|
||||
* Returns an error message if validation failed.
|
||||
*/
|
||||
validate: function (attributes, options) {
|
||||
// Prevent the orientation being set to horizontal if it is locked, unless
|
||||
// override has not been passed as an option.
|
||||
if (attributes.orientation === 'horizontal' && this.get('locked') && !options.override) {
|
||||
return Drupal.t('The toolbar cannot be set to a horizontal orientation when it is locked.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}(Backbone, Drupal));
|
257
web/core/modules/toolbar/js/toolbar.js
Normal file
257
web/core/modules/toolbar/js/toolbar.js
Normal file
|
@ -0,0 +1,257 @@
|
|||
/**
|
||||
* @file
|
||||
* Defines the behavior of the Drupal administration toolbar.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// Merge run-time settings with the defaults.
|
||||
var options = $.extend(
|
||||
{
|
||||
breakpoints: {
|
||||
'toolbar.narrow': '',
|
||||
'toolbar.standard': '',
|
||||
'toolbar.wide': ''
|
||||
}
|
||||
},
|
||||
drupalSettings.toolbar,
|
||||
// Merge strings on top of drupalSettings so that they are not mutable.
|
||||
{
|
||||
strings: {
|
||||
horizontal: Drupal.t('Horizontal orientation'),
|
||||
vertical: Drupal.t('Vertical orientation')
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Registers tabs with the toolbar.
|
||||
*
|
||||
* The Drupal toolbar allows modules to register top-level tabs. These may
|
||||
* point directly to a resource or toggle the visibility of a tray.
|
||||
*
|
||||
* Modules register tabs with hook_toolbar().
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches the toolbar rendering functionality to the toolbar element.
|
||||
*/
|
||||
Drupal.behaviors.toolbar = {
|
||||
attach: function (context) {
|
||||
// Verify that the user agent understands media queries. Complex admin
|
||||
// toolbar layouts require media query support.
|
||||
if (!window.matchMedia('only screen').matches) {
|
||||
return;
|
||||
}
|
||||
// Process the administrative toolbar.
|
||||
$(context).find('#toolbar-administration').once('toolbar').each(function () {
|
||||
|
||||
// Establish the toolbar models and views.
|
||||
var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
|
||||
locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')) || false,
|
||||
activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID')))
|
||||
});
|
||||
Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
|
||||
el: this,
|
||||
model: model,
|
||||
strings: options.strings
|
||||
});
|
||||
Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView({
|
||||
el: this,
|
||||
model: model,
|
||||
strings: options.strings
|
||||
});
|
||||
Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
|
||||
el: this,
|
||||
model: model
|
||||
});
|
||||
|
||||
// Render collapsible menus.
|
||||
var menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel();
|
||||
Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
|
||||
el: $(this).find('.toolbar-menu-administration').get(0),
|
||||
model: menuModel,
|
||||
strings: options.strings
|
||||
});
|
||||
|
||||
// Handle the resolution of Drupal.toolbar.setSubtrees.
|
||||
// This is handled with a deferred so that the function may be invoked
|
||||
// asynchronously.
|
||||
Drupal.toolbar.setSubtrees.done(function (subtrees) {
|
||||
menuModel.set('subtrees', subtrees);
|
||||
var theme = drupalSettings.ajaxPageState.theme;
|
||||
localStorage.setItem('Drupal.toolbar.subtrees.' + theme, JSON.stringify(subtrees));
|
||||
// Indicate on the toolbarModel that subtrees are now loaded.
|
||||
model.set('areSubtreesLoaded', true);
|
||||
});
|
||||
|
||||
// Attach a listener to the configured media query breakpoints.
|
||||
for (var label in options.breakpoints) {
|
||||
if (options.breakpoints.hasOwnProperty(label)) {
|
||||
var mq = options.breakpoints[label];
|
||||
var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
|
||||
// Curry the model and the label of the media query breakpoint to
|
||||
// the mediaQueryChangeHandler function.
|
||||
mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
|
||||
// Fire the mediaQueryChangeHandler for each configured breakpoint
|
||||
// so that they process once.
|
||||
Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger an initial attempt to load menu subitems. This first attempt
|
||||
// is made after the media query handlers have had an opportunity to
|
||||
// process. The toolbar starts in the vertical orientation by default,
|
||||
// unless the viewport is wide enough to accommodate a horizontal
|
||||
// orientation. Thus we give the Toolbar a chance to determine if it
|
||||
// should be set to horizontal orientation before attempting to load
|
||||
// menu subtrees.
|
||||
Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
|
||||
|
||||
$(document)
|
||||
// Update the model when the viewport offset changes.
|
||||
.on('drupalViewportOffsetChange.toolbar', function (event, offsets) {
|
||||
model.set('offsets', offsets);
|
||||
});
|
||||
|
||||
// Broadcast model changes to other modules.
|
||||
model
|
||||
.on('change:orientation', function (model, orientation) {
|
||||
$(document).trigger('drupalToolbarOrientationChange', orientation);
|
||||
})
|
||||
.on('change:activeTab', function (model, tab) {
|
||||
$(document).trigger('drupalToolbarTabChange', tab);
|
||||
})
|
||||
.on('change:activeTray', function (model, tray) {
|
||||
$(document).trigger('drupalToolbarTrayChange', tray);
|
||||
});
|
||||
|
||||
// If the toolbar's orientation is horizontal and no active tab is
|
||||
// defined then show the tray of the first toolbar tab by default (but
|
||||
// not the first 'Home' toolbar tab).
|
||||
if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
|
||||
Drupal.toolbar.models.toolbarModel.set({
|
||||
activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toolbar methods of Backbone objects.
|
||||
*
|
||||
* @namespace
|
||||
*/
|
||||
Drupal.toolbar = {
|
||||
|
||||
/**
|
||||
* A hash of View instances.
|
||||
*
|
||||
* @type {object.<string, Backbone.View>}
|
||||
*/
|
||||
views: {},
|
||||
|
||||
/**
|
||||
* A hash of Model instances.
|
||||
*
|
||||
* @type {object.<string, Backbone.Model>}
|
||||
*/
|
||||
models: {},
|
||||
|
||||
/**
|
||||
* A hash of MediaQueryList objects tracked by the toolbar.
|
||||
*
|
||||
* @type {object.<string, object>}
|
||||
*/
|
||||
mql: {},
|
||||
|
||||
/**
|
||||
* Accepts a list of subtree menu elements.
|
||||
*
|
||||
* A deferred object that is resolved by an inlined JavaScript callback.
|
||||
*
|
||||
* @type {jQuery.Deferred}
|
||||
*
|
||||
* @see toolbar_subtrees_jsonp().
|
||||
*/
|
||||
setSubtrees: new $.Deferred(),
|
||||
|
||||
/**
|
||||
* Respond to configured narrow media query changes.
|
||||
*
|
||||
* @param {Drupal.toolbar.ToolbarModel} model
|
||||
* A toolbar model
|
||||
* @param {string} label
|
||||
* Media query label.
|
||||
* @param {object} mql
|
||||
* A MediaQueryList object.
|
||||
*/
|
||||
mediaQueryChangeHandler: function (model, label, mql) {
|
||||
switch (label) {
|
||||
case 'toolbar.narrow':
|
||||
model.set({
|
||||
isOriented: mql.matches,
|
||||
isTrayToggleVisible: false
|
||||
});
|
||||
// If the toolbar doesn't have an explicit orientation yet, or if the
|
||||
// narrow media query doesn't match then set the orientation to
|
||||
// vertical.
|
||||
if (!mql.matches || !model.get('orientation')) {
|
||||
model.set({orientation: 'vertical'}, {validate: true});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'toolbar.standard':
|
||||
model.set({
|
||||
isFixed: mql.matches
|
||||
});
|
||||
break;
|
||||
|
||||
case 'toolbar.wide':
|
||||
model.set({
|
||||
orientation: ((mql.matches) ? 'horizontal' : 'vertical')
|
||||
}, {validate: true});
|
||||
// The tray orientation toggle visibility does not need to be
|
||||
// validated.
|
||||
model.set({
|
||||
isTrayToggleVisible: mql.matches
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* A toggle is an interactive element often bound to a click handler.
|
||||
*
|
||||
* @return {string}
|
||||
* A string representing a DOM fragment.
|
||||
*/
|
||||
Drupal.theme.toolbarOrientationToggle = function () {
|
||||
return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
|
||||
'<button class="toolbar-icon" type="button"></button>' +
|
||||
'</div></div>';
|
||||
};
|
||||
|
||||
/**
|
||||
* Ajax command to set the toolbar subtrees.
|
||||
*
|
||||
* @param {Drupal.Ajax} ajax
|
||||
* {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
|
||||
* @param {object} response
|
||||
* JSON response from the Ajax request.
|
||||
* @param {number} [status]
|
||||
* XMLHttpRequest status.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
|
||||
Drupal.toolbar.setSubtrees.resolve(response.subtrees);
|
||||
};
|
||||
|
||||
}(jQuery, Drupal, drupalSettings));
|
197
web/core/modules/toolbar/js/toolbar.menu.js
Normal file
197
web/core/modules/toolbar/js/toolbar.menu.js
Normal file
|
@ -0,0 +1,197 @@
|
|||
/**
|
||||
* @file
|
||||
* Builds a nested accordion widget.
|
||||
*
|
||||
* Invoke on an HTML list element with the jQuery plugin pattern.
|
||||
*
|
||||
* @example
|
||||
* $('.toolbar-menu').drupalToolbarMenu();
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Store the open menu tray.
|
||||
*/
|
||||
var activeItem = Drupal.url(drupalSettings.path.currentPath);
|
||||
|
||||
$.fn.drupalToolbarMenu = function () {
|
||||
|
||||
var ui = {
|
||||
handleOpen: Drupal.t('Extend'),
|
||||
handleClose: Drupal.t('Collapse')
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle clicks from the disclosure button on an item with sub-items.
|
||||
*
|
||||
* @param {Object} event
|
||||
* A jQuery Event object.
|
||||
*/
|
||||
function toggleClickHandler(event) {
|
||||
var $toggle = $(event.target);
|
||||
var $item = $toggle.closest('li');
|
||||
// Toggle the list item.
|
||||
toggleList($item);
|
||||
// Close open sibling menus.
|
||||
var $openItems = $item.siblings().filter('.open');
|
||||
toggleList($openItems, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle clicks from a menu item link.
|
||||
*
|
||||
* @param {Object} event
|
||||
* A jQuery Event object.
|
||||
*/
|
||||
function linkClickHandler(event) {
|
||||
// If the toolbar is positioned fixed (and therefore hiding content
|
||||
// underneath), then users expect clicks in the administration menu tray
|
||||
// to take them to that destination but for the menu tray to be closed
|
||||
// after clicking: otherwise the toolbar itself is obstructing the view
|
||||
// of the destination they chose.
|
||||
if (!Drupal.toolbar.models.toolbarModel.get('isFixed')) {
|
||||
Drupal.toolbar.models.toolbarModel.set('activeTab', null);
|
||||
}
|
||||
// Stopping propagation to make sure that once a toolbar-box is clicked
|
||||
// (the whitespace part), the page is not redirected anymore.
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the open/close state of a list is a menu.
|
||||
*
|
||||
* @param {jQuery} $item
|
||||
* The li item to be toggled.
|
||||
*
|
||||
* @param {Boolean} switcher
|
||||
* A flag that forces toggleClass to add or a remove a class, rather than
|
||||
* simply toggling its presence.
|
||||
*/
|
||||
function toggleList($item, switcher) {
|
||||
var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
|
||||
switcher = (typeof switcher !== 'undefined') ? switcher : !$item.hasClass('open');
|
||||
// Toggle the item open state.
|
||||
$item.toggleClass('open', switcher);
|
||||
// Twist the toggle.
|
||||
$toggle.toggleClass('open', switcher);
|
||||
// Adjust the toggle text.
|
||||
$toggle
|
||||
.find('.action')
|
||||
// Expand Structure, Collapse Structure.
|
||||
.text((switcher) ? ui.handleClose : ui.handleOpen);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add markup to the menu elements.
|
||||
*
|
||||
* Items with sub-elements have a list toggle attached to them. Menu item
|
||||
* links and the corresponding list toggle are wrapped with in a div
|
||||
* classed with .toolbar-box. The .toolbar-box div provides a positioning
|
||||
* context for the item list toggle.
|
||||
*
|
||||
* @param {jQuery} $menu
|
||||
* The root of the menu to be initialized.
|
||||
*/
|
||||
function initItems($menu) {
|
||||
var options = {
|
||||
class: 'toolbar-icon toolbar-handle',
|
||||
action: ui.handleOpen,
|
||||
text: ''
|
||||
};
|
||||
// Initialize items and their links.
|
||||
$menu.find('li > a').wrap('<div class="toolbar-box">');
|
||||
// Add a handle to each list item if it has a menu.
|
||||
$menu.find('li').each(function (index, element) {
|
||||
var $item = $(element);
|
||||
if ($item.children('ul.toolbar-menu').length) {
|
||||
var $box = $item.children('.toolbar-box');
|
||||
options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
|
||||
$item.children('.toolbar-box')
|
||||
.append(Drupal.theme('toolbarMenuItemToggle', options));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a level class to each list based on its depth in the menu.
|
||||
*
|
||||
* This function is called recursively on each sub level of lists elements
|
||||
* until the depth of the menu is exhausted.
|
||||
*
|
||||
* @param {jQuery} $lists
|
||||
* A jQuery object of ul elements.
|
||||
*
|
||||
* @param {number} level
|
||||
* The current level number to be assigned to the list elements.
|
||||
*/
|
||||
function markListLevels($lists, level) {
|
||||
level = (!level) ? 1 : level;
|
||||
var $lis = $lists.children('li').addClass('level-' + level);
|
||||
$lists = $lis.children('ul');
|
||||
if ($lists.length) {
|
||||
markListLevels($lists, level + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On page load, open the active menu item.
|
||||
*
|
||||
* Marks the trail of the active link in the menu back to the root of the
|
||||
* menu with .menu-item--active-trail.
|
||||
*
|
||||
* @param {jQuery} $menu
|
||||
* The root of the menu.
|
||||
*/
|
||||
function openActiveItem($menu) {
|
||||
var pathItem = $menu.find('a[href="' + location.pathname + '"]');
|
||||
if (pathItem.length && !activeItem) {
|
||||
activeItem = location.pathname;
|
||||
}
|
||||
if (activeItem) {
|
||||
var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('menu-item--active');
|
||||
var $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
|
||||
toggleList($activeTrail, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Return the jQuery object.
|
||||
return this.each(function (selector) {
|
||||
var $menu = $(this).once('toolbar-menu');
|
||||
if ($menu.length) {
|
||||
// Bind event handlers.
|
||||
$menu
|
||||
.on('click.toolbar', '.toolbar-box', toggleClickHandler)
|
||||
.on('click.toolbar', '.toolbar-box a', linkClickHandler);
|
||||
|
||||
$menu.addClass('root');
|
||||
initItems($menu);
|
||||
markListLevels($menu);
|
||||
// Restore previous and active states.
|
||||
openActiveItem($menu);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* A toggle is an interactive element often bound to a click handler.
|
||||
*
|
||||
* @param {object} options
|
||||
* Options for the button.
|
||||
* @param {string} options.class
|
||||
* Class to set on the button.
|
||||
* @param {string} options.action
|
||||
* Action for the button.
|
||||
* @param {string} options.text
|
||||
* Used as label for the button.
|
||||
*
|
||||
* @return {string}
|
||||
* A string representing a DOM fragment.
|
||||
*/
|
||||
Drupal.theme.toolbarMenuItemToggle = function (options) {
|
||||
return '<button class="' + options['class'] + '"><span class="action">' + options.action + '</span><span class="label">' + options.text + '</span></button>';
|
||||
};
|
||||
|
||||
}(jQuery, Drupal, drupalSettings));
|
53
web/core/modules/toolbar/js/views/BodyVisualView.js
Normal file
53
web/core/modules/toolbar/js/views/BodyVisualView.js
Normal file
|
@ -0,0 +1,53 @@
|
|||
/**
|
||||
* @file
|
||||
* A Backbone view for the body element.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, Backbone) {
|
||||
|
||||
'use strict';
|
||||
|
||||
Drupal.toolbar.BodyVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.BodyVisualView# */{
|
||||
|
||||
/**
|
||||
* Adjusts the body element with the toolbar position and dimension changes.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
initialize: function () {
|
||||
this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
|
||||
},
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
render: function () {
|
||||
var $body = $('body');
|
||||
var orientation = this.model.get('orientation');
|
||||
var isOriented = this.model.get('isOriented');
|
||||
var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
|
||||
|
||||
$body
|
||||
// We are using JavaScript to control media-query handling for two
|
||||
// reasons: (1) Using JavaScript let's us leverage the breakpoint
|
||||
// configurations and (2) the CSS is really complex if we try to hide
|
||||
// some styling from browsers that don't understand CSS media queries.
|
||||
// If we drive the CSS from classes added through JavaScript,
|
||||
// then the CSS becomes simpler and more robust.
|
||||
.toggleClass('toolbar-vertical', (orientation === 'vertical'))
|
||||
.toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
|
||||
// When the toolbar is fixed, it will not scroll with page scrolling.
|
||||
.toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
|
||||
// Toggle the toolbar-tray-open class on the body element. The class is
|
||||
// applied when a toolbar tray is active. Padding might be applied to
|
||||
// the body element to prevent the tray from overlapping content.
|
||||
.toggleClass('toolbar-tray-open', !!this.model.get('activeTray'))
|
||||
// Apply padding to the top of the body to offset the placement of the
|
||||
// toolbar bar element.
|
||||
.css('padding-top', this.model.get('offsets').top);
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery, Drupal, Backbone));
|
46
web/core/modules/toolbar/js/views/MenuVisualView.js
Normal file
46
web/core/modules/toolbar/js/views/MenuVisualView.js
Normal file
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* @file
|
||||
* A Backbone view for the collapsible menus.
|
||||
*/
|
||||
|
||||
(function ($, Backbone, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
Drupal.toolbar.MenuVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.MenuVisualView# */{
|
||||
|
||||
/**
|
||||
* Backbone View for collapsible menus.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
initialize: function () {
|
||||
this.listenTo(this.model, 'change:subtrees', this.render);
|
||||
},
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
render: function () {
|
||||
var subtrees = this.model.get('subtrees');
|
||||
// Add subtrees.
|
||||
for (var id in subtrees) {
|
||||
if (subtrees.hasOwnProperty(id)) {
|
||||
this.$el
|
||||
.find('#toolbar-link-' + id)
|
||||
.once('toolbar-subtrees')
|
||||
.after(subtrees[id]);
|
||||
}
|
||||
}
|
||||
// Render the main menu as a nested, collapsible accordion.
|
||||
if ('drupalToolbarMenu' in $.fn) {
|
||||
this.$el
|
||||
.children('.toolbar-menu')
|
||||
.drupalToolbarMenu();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery, Backbone, Drupal));
|
70
web/core/modules/toolbar/js/views/ToolbarAuralView.js
Normal file
70
web/core/modules/toolbar/js/views/ToolbarAuralView.js
Normal file
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
* @file
|
||||
* A Backbone view for the aural feedback of the toolbar.
|
||||
*/
|
||||
|
||||
(function (Backbone, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarAuralView# */{
|
||||
|
||||
/**
|
||||
* Backbone view for the aural feedback of the toolbar.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*
|
||||
* @param {object} options
|
||||
* Options for the view.
|
||||
* @param {object} options.strings
|
||||
* Various strings to use in the view.
|
||||
*/
|
||||
initialize: function (options) {
|
||||
this.strings = options.strings;
|
||||
|
||||
this.listenTo(this.model, 'change:orientation', this.onOrientationChange);
|
||||
this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
|
||||
},
|
||||
|
||||
/**
|
||||
* Announces an orientation change.
|
||||
*
|
||||
* @param {Drupal.toolbar.ToolbarModel} model
|
||||
* The toolbar model in question.
|
||||
* @param {string} orientation
|
||||
* The new value of the orientation attribute in the model.
|
||||
*/
|
||||
onOrientationChange: function (model, orientation) {
|
||||
Drupal.announce(Drupal.t('Tray orientation changed to @orientation.', {
|
||||
'@orientation': orientation
|
||||
}));
|
||||
},
|
||||
|
||||
/**
|
||||
* Announces a changed active tray.
|
||||
*
|
||||
* @param {Drupal.toolbar.ToolbarModel} model
|
||||
* The toolbar model in question.
|
||||
* @param {HTMLElement} tray
|
||||
* The new value of the tray attribute in the model.
|
||||
*/
|
||||
onActiveTrayChange: function (model, tray) {
|
||||
var relevantTray = (tray === null) ? model.previous('activeTray') : tray;
|
||||
var action = (tray === null) ? Drupal.t('closed') : Drupal.t('opened');
|
||||
var trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
|
||||
var text;
|
||||
if (trayNameElement !== null) {
|
||||
text = Drupal.t('Tray "@tray" @action.', {
|
||||
'@tray': trayNameElement.textContent, '@action': action
|
||||
});
|
||||
}
|
||||
else {
|
||||
text = Drupal.t('Tray @action.', {'@action': action});
|
||||
}
|
||||
Drupal.announce(text);
|
||||
}
|
||||
});
|
||||
|
||||
}(Backbone, Drupal));
|
305
web/core/modules/toolbar/js/views/ToolbarVisualView.js
Normal file
305
web/core/modules/toolbar/js/views/ToolbarVisualView.js
Normal file
|
@ -0,0 +1,305 @@
|
|||
/**
|
||||
* @file
|
||||
* A Backbone view for the toolbar element. Listens to mouse & touch.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings, Backbone) {
|
||||
|
||||
'use strict';
|
||||
|
||||
Drupal.toolbar.ToolbarVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarVisualView# */{
|
||||
|
||||
/**
|
||||
* Event map for the `ToolbarVisualView`.
|
||||
*
|
||||
* @return {object}
|
||||
* A map of events.
|
||||
*/
|
||||
events: function () {
|
||||
// Prevents delay and simulated mouse events.
|
||||
var touchEndToClick = function (event) {
|
||||
event.preventDefault();
|
||||
event.target.click();
|
||||
};
|
||||
|
||||
return {
|
||||
'click .toolbar-bar .toolbar-tab .trigger': 'onTabClick',
|
||||
'click .toolbar-toggle-orientation button': 'onOrientationToggleClick',
|
||||
'touchend .toolbar-bar .toolbar-tab .trigger': touchEndToClick,
|
||||
'touchend .toolbar-toggle-orientation button': touchEndToClick
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Backbone view for the toolbar element. Listens to mouse & touch.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*
|
||||
* @param {object} options
|
||||
* Options for the view object.
|
||||
* @param {object} options.strings
|
||||
* Various strings to use in the view.
|
||||
*/
|
||||
initialize: function (options) {
|
||||
this.strings = options.strings;
|
||||
|
||||
this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
|
||||
this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
|
||||
this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
|
||||
|
||||
// Add the tray orientation toggles.
|
||||
this.$el
|
||||
.find('.toolbar-tray .toolbar-lining')
|
||||
.append(Drupal.theme('toolbarOrientationToggle'));
|
||||
|
||||
// Trigger an activeTab change so that listening scripts can respond on
|
||||
// page load. This will call render.
|
||||
this.model.trigger('change:activeTab');
|
||||
},
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*
|
||||
* @return {Drupal.toolbar.ToolbarVisualView}
|
||||
* The `ToolbarVisualView` instance.
|
||||
*/
|
||||
render: function () {
|
||||
this.updateTabs();
|
||||
this.updateTrayOrientation();
|
||||
this.updateBarAttributes();
|
||||
// Load the subtrees if the orientation of the toolbar is changed to
|
||||
// vertical. This condition responds to the case that the toolbar switches
|
||||
// from horizontal to vertical orientation. The toolbar starts in a
|
||||
// vertical orientation by default and then switches to horizontal during
|
||||
// initialization if the media query conditions are met. Simply checking
|
||||
// that the orientation is vertical here would result in the subtrees
|
||||
// always being loaded, even when the toolbar initialization ultimately
|
||||
// results in a horizontal orientation.
|
||||
//
|
||||
// @see Drupal.behaviors.toolbar.attach() where admin menu subtrees
|
||||
// loading is invoked during initialization after media query conditions
|
||||
// have been processed.
|
||||
if (this.model.changed.orientation === 'vertical' || this.model.changed.activeTab) {
|
||||
this.loadSubtrees();
|
||||
}
|
||||
// Trigger a recalculation of viewport displacing elements. Use setTimeout
|
||||
// to ensure this recalculation happens after changes to visual elements
|
||||
// have processed.
|
||||
window.setTimeout(function () {
|
||||
Drupal.displace(true);
|
||||
}, 0);
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Responds to a toolbar tab click.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
onTabClick: function (event) {
|
||||
// If this tab has a tray associated with it, it is considered an
|
||||
// activatable tab.
|
||||
if (event.target.hasAttribute('data-toolbar-tray')) {
|
||||
var activeTab = this.model.get('activeTab');
|
||||
var clickedTab = event.target;
|
||||
|
||||
// Set the event target as the active item if it is not already.
|
||||
this.model.set('activeTab', (!activeTab || clickedTab !== activeTab) ? clickedTab : null);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the orientation of a toolbar tray.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
onOrientationToggleClick: function (event) {
|
||||
var orientation = this.model.get('orientation');
|
||||
// Determine the toggle-to orientation.
|
||||
var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
|
||||
var locked = antiOrientation === 'vertical';
|
||||
// Remember the locked state.
|
||||
if (locked) {
|
||||
localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
|
||||
}
|
||||
else {
|
||||
localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
|
||||
}
|
||||
// Update the model.
|
||||
this.model.set({
|
||||
locked: locked,
|
||||
orientation: antiOrientation
|
||||
}, {
|
||||
validate: true,
|
||||
override: true
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the display of the tabs: toggles a tab and the associated tray.
|
||||
*/
|
||||
updateTabs: function () {
|
||||
var $tab = $(this.model.get('activeTab'));
|
||||
// Deactivate the previous tab.
|
||||
$(this.model.previous('activeTab'))
|
||||
.removeClass('is-active')
|
||||
.prop('aria-pressed', false);
|
||||
// Deactivate the previous tray.
|
||||
$(this.model.previous('activeTray'))
|
||||
.removeClass('is-active');
|
||||
|
||||
// Activate the selected tab.
|
||||
if ($tab.length > 0) {
|
||||
$tab
|
||||
.addClass('is-active')
|
||||
// Mark the tab as pressed.
|
||||
.prop('aria-pressed', true);
|
||||
var name = $tab.attr('data-toolbar-tray');
|
||||
// Store the active tab name or remove the setting.
|
||||
var id = $tab.get(0).id;
|
||||
if (id) {
|
||||
localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
|
||||
}
|
||||
// Activate the associated tray.
|
||||
var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray');
|
||||
if ($tray.length) {
|
||||
$tray.addClass('is-active');
|
||||
this.model.set('activeTray', $tray.get(0));
|
||||
}
|
||||
else {
|
||||
// There is no active tray.
|
||||
this.model.set('activeTray', null);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// There is no active tray.
|
||||
this.model.set('activeTray', null);
|
||||
localStorage.removeItem('Drupal.toolbar.activeTabID');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the attributes of the toolbar bar element.
|
||||
*/
|
||||
updateBarAttributes: function () {
|
||||
var isOriented = this.model.get('isOriented');
|
||||
if (isOriented) {
|
||||
this.$el.find('.toolbar-bar').attr('data-offset-top', '');
|
||||
}
|
||||
else {
|
||||
this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
|
||||
}
|
||||
// Toggle between a basic vertical view and a more sophisticated
|
||||
// horizontal and vertical display of the toolbar bar and trays.
|
||||
this.$el.toggleClass('toolbar-oriented', isOriented);
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the orientation of the active tray if necessary.
|
||||
*/
|
||||
updateTrayOrientation: function () {
|
||||
var orientation = this.model.get('orientation');
|
||||
// The antiOrientation is used to render the view of action buttons like
|
||||
// the tray orientation toggle.
|
||||
var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
|
||||
// Update the orientation of the trays.
|
||||
var $trays = this.$el.find('.toolbar-tray')
|
||||
.removeClass('toolbar-tray-horizontal toolbar-tray-vertical')
|
||||
.addClass('toolbar-tray-' + orientation);
|
||||
|
||||
// Update the tray orientation toggle button.
|
||||
var iconClass = 'toolbar-icon-toggle-' + orientation;
|
||||
var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation;
|
||||
var $orientationToggle = this.$el.find('.toolbar-toggle-orientation')
|
||||
.toggle(this.model.get('isTrayToggleVisible'));
|
||||
$orientationToggle.find('button')
|
||||
.val(antiOrientation)
|
||||
.attr('title', this.strings[antiOrientation])
|
||||
.text(this.strings[antiOrientation])
|
||||
.removeClass(iconClass)
|
||||
.addClass(iconAntiClass);
|
||||
|
||||
// Update data offset attributes for the trays.
|
||||
var dir = document.documentElement.dir;
|
||||
var edge = (dir === 'rtl') ? 'right' : 'left';
|
||||
// Remove data-offset attributes from the trays so they can be refreshed.
|
||||
$trays.removeAttr('data-offset-left data-offset-right data-offset-top');
|
||||
// If an active vertical tray exists, mark it as an offset element.
|
||||
$trays.filter('.toolbar-tray-vertical.is-active').attr('data-offset-' + edge, '');
|
||||
// If an active horizontal tray exists, mark it as an offset element.
|
||||
$trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the tops of the trays so that they align with the bottom of the bar.
|
||||
*/
|
||||
adjustPlacement: function () {
|
||||
var $trays = this.$el.find('.toolbar-tray');
|
||||
if (!this.model.get('isOriented')) {
|
||||
$trays.css('margin-top', 0);
|
||||
$trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
|
||||
}
|
||||
else {
|
||||
// The toolbar container is invisible. Its placement is used to
|
||||
// determine the container for the trays.
|
||||
$trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calls the endpoint URI that builds an AJAX command with the rendered
|
||||
* subtrees.
|
||||
*
|
||||
* The rendered admin menu subtrees HTML is cached on the client in
|
||||
* localStorage until the cache of the admin menu subtrees on the server-
|
||||
* side is invalidated. The subtreesHash is stored in localStorage as well
|
||||
* and compared to the subtreesHash in drupalSettings to determine when the
|
||||
* admin menu subtrees cache has been invalidated.
|
||||
*/
|
||||
loadSubtrees: function () {
|
||||
var $activeTab = $(this.model.get('activeTab'));
|
||||
var orientation = this.model.get('orientation');
|
||||
// Only load and render the admin menu subtrees if:
|
||||
// (1) They have not been loaded yet.
|
||||
// (2) The active tab is the administration menu tab, indicated by the
|
||||
// presence of the data-drupal-subtrees attribute.
|
||||
// (3) The orientation of the tray is vertical.
|
||||
if (!this.model.get('areSubtreesLoaded') && typeof $activeTab.data('drupal-subtrees') !== 'undefined' && orientation === 'vertical') {
|
||||
var subtreesHash = drupalSettings.toolbar.subtreesHash;
|
||||
var theme = drupalSettings.ajaxPageState.theme;
|
||||
var endpoint = Drupal.url('toolbar/subtrees/' + subtreesHash);
|
||||
var cachedSubtreesHash = localStorage.getItem('Drupal.toolbar.subtreesHash.' + theme);
|
||||
var cachedSubtrees = JSON.parse(localStorage.getItem('Drupal.toolbar.subtrees.' + theme));
|
||||
var isVertical = this.model.get('orientation') === 'vertical';
|
||||
// If we have the subtrees in localStorage and the subtree hash has not
|
||||
// changed, then use the cached data.
|
||||
if (isVertical && subtreesHash === cachedSubtreesHash && cachedSubtrees) {
|
||||
Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
|
||||
}
|
||||
// Only make the call to get the subtrees if the orientation of the
|
||||
// toolbar is vertical.
|
||||
else if (isVertical) {
|
||||
// Remove the cached menu information.
|
||||
localStorage.removeItem('Drupal.toolbar.subtreesHash.' + theme);
|
||||
localStorage.removeItem('Drupal.toolbar.subtrees.' + theme);
|
||||
// The AJAX response's command will trigger the resolve method of the
|
||||
// Drupal.toolbar.setSubtrees Promise.
|
||||
Drupal.ajax({url: endpoint}).execute();
|
||||
// Cache the hash for the subtrees locally.
|
||||
localStorage.setItem('Drupal.toolbar.subtreesHash.' + theme, subtreesHash);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery, Drupal, drupalSettings, Backbone));
|
Reference in a new issue