updated core to 8.6.1 via composer
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
* Replaces the home link in toolbar with a back to site link.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
(function($, Drupal, drupalSettings) {
|
||||
const pathInfo = drupalSettings.path;
|
||||
const escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
|
||||
const windowLocation = window.location;
|
||||
@@ -12,7 +12,10 @@
|
||||
// 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)) {
|
||||
if (
|
||||
!pathInfo.currentPathIsAdmin &&
|
||||
!/destination=/.test(windowLocation.search)
|
||||
) {
|
||||
sessionStorage.setItem('escapeAdminPath', windowLocation);
|
||||
}
|
||||
|
||||
@@ -29,15 +32,16 @@
|
||||
*/
|
||||
Drupal.behaviors.escapeAdmin = {
|
||||
attach() {
|
||||
const $toolbarEscape = $('[data-toolbar-escape-admin]').once('escapeAdmin');
|
||||
const $toolbarEscape = $('[data-toolbar-escape-admin]').once(
|
||||
'escapeAdmin',
|
||||
);
|
||||
if ($toolbarEscape.length && pathInfo.currentPathIsAdmin) {
|
||||
if (escapeAdminPath !== null) {
|
||||
$toolbarEscape.attr('href', escapeAdminPath);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
$toolbarEscape.text(Drupal.t('Home'));
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
}(jQuery, Drupal, drupalSettings));
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* A Backbone Model for collapsible menus.
|
||||
*/
|
||||
|
||||
(function (Backbone, Drupal) {
|
||||
(function(Backbone, Drupal) {
|
||||
/**
|
||||
* Backbone Model for collapsible menus.
|
||||
*
|
||||
@@ -11,19 +11,19 @@
|
||||
*
|
||||
* @augments Backbone.Model
|
||||
*/
|
||||
Drupal.toolbar.MenuModel = Backbone.Model.extend(/** @lends Drupal.toolbar.MenuModel# */{
|
||||
|
||||
/**
|
||||
* @type {object}
|
||||
*
|
||||
* @prop {object} subtrees
|
||||
*/
|
||||
defaults: /** @lends Drupal.toolbar.MenuModel# */{
|
||||
|
||||
Drupal.toolbar.MenuModel = Backbone.Model.extend(
|
||||
/** @lends Drupal.toolbar.MenuModel# */ {
|
||||
/**
|
||||
* @type {object}
|
||||
*
|
||||
* @prop {object} subtrees
|
||||
*/
|
||||
subtrees: {},
|
||||
defaults: /** @lends Drupal.toolbar.MenuModel# */ {
|
||||
/**
|
||||
* @type {object}
|
||||
*/
|
||||
subtrees: {},
|
||||
},
|
||||
},
|
||||
});
|
||||
}(Backbone, Drupal));
|
||||
);
|
||||
})(Backbone, Drupal);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* A Backbone Model for the toolbar.
|
||||
*/
|
||||
|
||||
(function (Backbone, Drupal) {
|
||||
(function(Backbone, Drupal) {
|
||||
/**
|
||||
* Backbone model for the toolbar.
|
||||
*
|
||||
@@ -11,143 +11,149 @@
|
||||
*
|
||||
* @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# */{
|
||||
|
||||
Drupal.toolbar.ToolbarModel = Backbone.Model.extend(
|
||||
/** @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: 'horizontal',
|
||||
|
||||
/**
|
||||
* 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: true,
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @prop activeTab
|
||||
* @prop activeTray
|
||||
* @prop isOriented
|
||||
* @prop isFixed
|
||||
* @prop areSubtreesLoaded
|
||||
* @prop isViewportOverflowConstrained
|
||||
* @prop orientation
|
||||
* @prop locked
|
||||
* @prop isTrayToggleVisible
|
||||
* @prop height
|
||||
* @prop offsets
|
||||
*/
|
||||
offsets: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
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: 'horizontal',
|
||||
|
||||
/**
|
||||
* 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: true,
|
||||
|
||||
/**
|
||||
* 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(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.',
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* @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(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));
|
||||
);
|
||||
})(Backbone, Drupal);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* Defines the behavior of the Drupal administration toolbar.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
(function($, Drupal, drupalSettings) {
|
||||
// Merge run-time settings with the defaults.
|
||||
const options = $.extend(
|
||||
{
|
||||
@@ -44,106 +44,167 @@
|
||||
return;
|
||||
}
|
||||
// Process the administrative toolbar.
|
||||
$(context).find('#toolbar-administration').once('toolbar').each(function () {
|
||||
// Establish the toolbar models and views.
|
||||
const model = new Drupal.toolbar.ToolbarModel({
|
||||
locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')),
|
||||
activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
|
||||
height: $('#toolbar-administration').outerHeight(),
|
||||
});
|
||||
|
||||
Drupal.toolbar.models.toolbarModel = model;
|
||||
|
||||
// Attach a listener to the configured media query breakpoints.
|
||||
// Executes it before Drupal.toolbar.views to avoid extra rendering.
|
||||
Object.keys(options.breakpoints).forEach((label) => {
|
||||
const mq = options.breakpoints[label];
|
||||
const mql = window.matchMedia(mq);
|
||||
Drupal.toolbar.mql[label] = mql;
|
||||
// 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);
|
||||
});
|
||||
|
||||
Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
|
||||
el: this,
|
||||
model,
|
||||
strings: options.strings,
|
||||
});
|
||||
Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView({
|
||||
el: this,
|
||||
model,
|
||||
strings: options.strings,
|
||||
});
|
||||
Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
|
||||
el: this,
|
||||
model,
|
||||
});
|
||||
|
||||
// Force layout render to fix mobile view. Only needed on load, not
|
||||
// for every media query match.
|
||||
model.trigger('change:isFixed', model, model.get('isFixed'));
|
||||
model.trigger('change:activeTray', model, model.get('activeTray'));
|
||||
|
||||
// Render collapsible menus.
|
||||
const menuModel = new Drupal.toolbar.MenuModel();
|
||||
Drupal.toolbar.models.menuModel = 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((subtrees) => {
|
||||
menuModel.set('subtrees', subtrees);
|
||||
const 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);
|
||||
});
|
||||
|
||||
// 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', (event, offsets) => {
|
||||
model.set('offsets', offsets);
|
||||
$(context)
|
||||
.find('#toolbar-administration')
|
||||
.once('toolbar')
|
||||
.each(function() {
|
||||
// Establish the toolbar models and views.
|
||||
const model = new Drupal.toolbar.ToolbarModel({
|
||||
locked: JSON.parse(
|
||||
localStorage.getItem('Drupal.toolbar.trayVerticalLocked'),
|
||||
),
|
||||
activeTab: document.getElementById(
|
||||
JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID')),
|
||||
),
|
||||
height: $('#toolbar-administration').outerHeight(),
|
||||
});
|
||||
|
||||
// Broadcast model changes to other modules.
|
||||
model
|
||||
.on('change:orientation', (model, orientation) => {
|
||||
$(document).trigger('drupalToolbarOrientationChange', orientation);
|
||||
})
|
||||
.on('change:activeTab', (model, tab) => {
|
||||
$(document).trigger('drupalToolbarTabChange', tab);
|
||||
})
|
||||
.on('change:activeTray', (model, tray) => {
|
||||
$(document).trigger('drupalToolbarTrayChange', tray);
|
||||
Drupal.toolbar.models.toolbarModel = model;
|
||||
|
||||
// Attach a listener to the configured media query breakpoints.
|
||||
// Executes it before Drupal.toolbar.views to avoid extra rendering.
|
||||
Object.keys(options.breakpoints).forEach(label => {
|
||||
const mq = options.breakpoints[label];
|
||||
const mql = window.matchMedia(mq);
|
||||
Drupal.toolbar.mql[label] = mql;
|
||||
// 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,
|
||||
);
|
||||
});
|
||||
|
||||
// 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),
|
||||
Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView(
|
||||
{
|
||||
el: this,
|
||||
model,
|
||||
strings: options.strings,
|
||||
},
|
||||
);
|
||||
Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView(
|
||||
{
|
||||
el: this,
|
||||
model,
|
||||
strings: options.strings,
|
||||
},
|
||||
);
|
||||
Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView(
|
||||
{
|
||||
el: this,
|
||||
model,
|
||||
},
|
||||
);
|
||||
|
||||
// Force layout render to fix mobile view. Only needed on load, not
|
||||
// for every media query match.
|
||||
model.trigger('change:isFixed', model, model.get('isFixed'));
|
||||
model.trigger('change:activeTray', model, model.get('activeTray'));
|
||||
|
||||
// Render collapsible menus.
|
||||
const menuModel = new Drupal.toolbar.MenuModel();
|
||||
Drupal.toolbar.models.menuModel = 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(subtrees => {
|
||||
menuModel.set('subtrees', subtrees);
|
||||
const 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);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 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', (event, offsets) => {
|
||||
model.set('offsets', offsets);
|
||||
});
|
||||
|
||||
// Broadcast model changes to other modules.
|
||||
model
|
||||
.on('change:orientation', (model, orientation) => {
|
||||
$(document).trigger(
|
||||
'drupalToolbarOrientationChange',
|
||||
orientation,
|
||||
);
|
||||
})
|
||||
.on('change:activeTab', (model, tab) => {
|
||||
$(document).trigger('drupalToolbarTabChange', tab);
|
||||
})
|
||||
.on('change:activeTray', (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),
|
||||
});
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': (event, dialog, $element, settings) => {
|
||||
const $toolbar = $('#toolbar-bar');
|
||||
$toolbar.css('margin-top', '0');
|
||||
|
||||
// When off-canvas is positioned in top, toolbar has to be moved down.
|
||||
if (settings.drupalOffCanvasPosition === 'top') {
|
||||
const height = Drupal.offCanvas
|
||||
.getContainer($element)
|
||||
.outerHeight();
|
||||
$toolbar.css('margin-top', `${height}px`);
|
||||
|
||||
$element.on('dialogContentResize.off-canvas', () => {
|
||||
const newHeight = Drupal.offCanvas
|
||||
.getContainer($element)
|
||||
.outerHeight();
|
||||
$toolbar.css('margin-top', `${newHeight}px`);
|
||||
});
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': () => {
|
||||
$('#toolbar-bar').css('margin-top', '0');
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@@ -153,7 +214,6 @@
|
||||
* @namespace
|
||||
*/
|
||||
Drupal.toolbar = {
|
||||
|
||||
/**
|
||||
* A hash of View instances.
|
||||
*
|
||||
@@ -218,9 +278,13 @@
|
||||
break;
|
||||
|
||||
case 'toolbar.wide':
|
||||
model.set({
|
||||
orientation: ((mql.matches && !model.get('locked')) ? 'horizontal' : 'vertical'),
|
||||
}, { validate: true });
|
||||
model.set(
|
||||
{
|
||||
orientation:
|
||||
mql.matches && !model.get('locked') ? 'horizontal' : 'vertical',
|
||||
},
|
||||
{ validate: true },
|
||||
);
|
||||
// The tray orientation toggle visibility does not need to be
|
||||
// validated.
|
||||
model.set({
|
||||
@@ -240,10 +304,12 @@
|
||||
* @return {string}
|
||||
* A string representing a DOM fragment.
|
||||
*/
|
||||
Drupal.theme.toolbarOrientationToggle = function () {
|
||||
return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
|
||||
Drupal.theme.toolbarOrientationToggle = function() {
|
||||
return (
|
||||
'<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
|
||||
'<button class="toolbar-icon" type="button"></button>' +
|
||||
'</div></div>';
|
||||
'</div></div>'
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -256,7 +322,11 @@
|
||||
* @param {number} [status]
|
||||
* XMLHttpRequest status.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
|
||||
Drupal.AjaxCommands.prototype.setToolbarSubtrees = function(
|
||||
ajax,
|
||||
response,
|
||||
status,
|
||||
) {
|
||||
Drupal.toolbar.setSubtrees.resolve(response.subtrees);
|
||||
};
|
||||
}(jQuery, Drupal, drupalSettings));
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
|
||||
@@ -97,6 +97,26 @@
|
||||
activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0)
|
||||
});
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
||||
var $toolbar = $('#toolbar-bar');
|
||||
$toolbar.css('margin-top', '0');
|
||||
|
||||
if (settings.drupalOffCanvasPosition === 'top') {
|
||||
var height = Drupal.offCanvas.getContainer($element).outerHeight();
|
||||
$toolbar.css('margin-top', height + 'px');
|
||||
|
||||
$element.on('dialogContentResize.off-canvas', function () {
|
||||
var newHeight = Drupal.offCanvas.getContainer($element).outerHeight();
|
||||
$toolbar.css('margin-top', newHeight + 'px');
|
||||
});
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function dialogBeforeclose() {
|
||||
$('#toolbar-bar').css('margin-top', '0');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,18 +8,45 @@
|
||||
* $('.toolbar-menu').drupalToolbarMenu();
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
(function($, Drupal, drupalSettings) {
|
||||
/**
|
||||
* Store the open menu tray.
|
||||
*/
|
||||
let activeItem = Drupal.url(drupalSettings.path.currentPath);
|
||||
|
||||
$.fn.drupalToolbarMenu = function () {
|
||||
$.fn.drupalToolbarMenu = function() {
|
||||
const ui = {
|
||||
handleOpen: Drupal.t('Extend'),
|
||||
handleClose: Drupal.t('Collapse'),
|
||||
};
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
const $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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle clicks from the disclosure button on an item with sub-items.
|
||||
*
|
||||
@@ -56,30 +83,6 @@
|
||||
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) {
|
||||
const $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.
|
||||
*
|
||||
@@ -104,8 +107,11 @@
|
||||
const $item = $(element);
|
||||
if ($item.children('ul.toolbar-menu').length) {
|
||||
const $box = $item.children('.toolbar-box');
|
||||
options.text = Drupal.t('@label', { '@label': $box.find('a').text() });
|
||||
$item.children('.toolbar-box')
|
||||
options.text = Drupal.t('@label', {
|
||||
'@label': $box.find('a').text(),
|
||||
});
|
||||
$item
|
||||
.children('.toolbar-box')
|
||||
.append(Drupal.theme('toolbarMenuItemToggle', options));
|
||||
}
|
||||
});
|
||||
@@ -124,7 +130,7 @@
|
||||
* The current level number to be assigned to the list elements.
|
||||
*/
|
||||
function markListLevels($lists, level) {
|
||||
level = (!level) ? 1 : level;
|
||||
level = !level ? 1 : level;
|
||||
const $lis = $lists.children('li').addClass(`level-${level}`);
|
||||
$lists = $lis.children('ul');
|
||||
if ($lists.length) {
|
||||
@@ -142,19 +148,23 @@
|
||||
* The root of the menu.
|
||||
*/
|
||||
function openActiveItem($menu) {
|
||||
const pathItem = $menu.find(`a[href="${location.pathname}"]`);
|
||||
const pathItem = $menu.find(`a[href="${window.location.pathname}"]`);
|
||||
if (pathItem.length && !activeItem) {
|
||||
activeItem = location.pathname;
|
||||
activeItem = window.location.pathname;
|
||||
}
|
||||
if (activeItem) {
|
||||
const $activeItem = $menu.find(`a[href="${activeItem}"]`).addClass('menu-item--active');
|
||||
const $activeTrail = $activeItem.parentsUntil('.root', 'li').addClass('menu-item--active-trail');
|
||||
const $activeItem = $menu
|
||||
.find(`a[href="${activeItem}"]`)
|
||||
.addClass('menu-item--active');
|
||||
const $activeTrail = $activeItem
|
||||
.parentsUntil('.root', 'li')
|
||||
.addClass('menu-item--active-trail');
|
||||
toggleList($activeTrail, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Return the jQuery object.
|
||||
return this.each(function (selector) {
|
||||
return this.each(function(selector) {
|
||||
const $menu = $(this).once('toolbar-menu');
|
||||
if ($menu.length) {
|
||||
// Bind event handlers.
|
||||
@@ -186,7 +196,9 @@
|
||||
* @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>`;
|
||||
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));
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
|
||||
@@ -14,6 +14,17 @@
|
||||
handleClose: Drupal.t('Collapse')
|
||||
};
|
||||
|
||||
function toggleList($item, switcher) {
|
||||
var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
|
||||
switcher = typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
|
||||
|
||||
$item.toggleClass('open', switcher);
|
||||
|
||||
$toggle.toggleClass('open', switcher);
|
||||
|
||||
$toggle.find('.action').text(switcher ? ui.handleClose : ui.handleOpen);
|
||||
}
|
||||
|
||||
function toggleClickHandler(event) {
|
||||
var $toggle = $(event.target);
|
||||
var $item = $toggle.closest('li');
|
||||
@@ -32,17 +43,6 @@
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function toggleList($item, switcher) {
|
||||
var $toggle = $item.children('.toolbar-box').children('.toolbar-handle');
|
||||
switcher = typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
|
||||
|
||||
$item.toggleClass('open', switcher);
|
||||
|
||||
$toggle.toggleClass('open', switcher);
|
||||
|
||||
$toggle.find('.action').text(switcher ? ui.handleClose : ui.handleOpen);
|
||||
}
|
||||
|
||||
function initItems($menu) {
|
||||
var options = {
|
||||
class: 'toolbar-icon toolbar-handle',
|
||||
@@ -56,7 +56,9 @@
|
||||
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() });
|
||||
options.text = Drupal.t('@label', {
|
||||
'@label': $box.find('a').text()
|
||||
});
|
||||
$item.children('.toolbar-box').append(Drupal.theme('toolbarMenuItemToggle', options));
|
||||
}
|
||||
});
|
||||
@@ -72,9 +74,9 @@
|
||||
}
|
||||
|
||||
function openActiveItem($menu) {
|
||||
var pathItem = $menu.find('a[href="' + location.pathname + '"]');
|
||||
var pathItem = $menu.find('a[href="' + window.location.pathname + '"]');
|
||||
if (pathItem.length && !activeItem) {
|
||||
activeItem = location.pathname;
|
||||
activeItem = window.location.pathname;
|
||||
}
|
||||
if (activeItem) {
|
||||
var $activeItem = $menu.find('a[href="' + activeItem + '"]').addClass('menu-item--active');
|
||||
@@ -98,6 +100,6 @@
|
||||
};
|
||||
|
||||
Drupal.theme.toolbarMenuItemToggle = function (options) {
|
||||
return '<button class="' + options.class + '"><span class="action">' + options.action + '</span><span class="label">' + options.text + '</span></button>';
|
||||
return '<button class="' + options.class + '"><span class="action">' + options.action + '</span> <span class="label">' + options.text + '</span></button>';
|
||||
};
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
@@ -3,35 +3,46 @@
|
||||
* A Backbone view for the body element.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, Backbone) {
|
||||
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() {
|
||||
this.listenTo(this.model, 'change:activeTray ', this.render);
|
||||
this.listenTo(this.model, 'change:isFixed change:isViewportOverflowConstrained', this.isToolbarFixed);
|
||||
},
|
||||
(function($, Drupal, Backbone) {
|
||||
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() {
|
||||
this.listenTo(this.model, 'change:activeTray ', this.render);
|
||||
this.listenTo(
|
||||
this.model,
|
||||
'change:isFixed change:isViewportOverflowConstrained',
|
||||
this.isToolbarFixed,
|
||||
);
|
||||
},
|
||||
|
||||
isToolbarFixed() {
|
||||
// When the toolbar is fixed, it will not scroll with page scrolling.
|
||||
const isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
|
||||
$('body').toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')));
|
||||
},
|
||||
isToolbarFixed() {
|
||||
// When the toolbar is fixed, it will not scroll with page scrolling.
|
||||
const isViewportOverflowConstrained = this.model.get(
|
||||
'isViewportOverflowConstrained',
|
||||
);
|
||||
$('body').toggleClass(
|
||||
'toolbar-fixed',
|
||||
isViewportOverflowConstrained || this.model.get('isFixed'),
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
render() {
|
||||
$('body')
|
||||
// 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'));
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
render() {
|
||||
$('body')
|
||||
// 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'));
|
||||
},
|
||||
},
|
||||
});
|
||||
}(jQuery, Drupal, Backbone));
|
||||
);
|
||||
})(jQuery, Drupal, Backbone);
|
||||
|
||||
@@ -3,38 +3,37 @@
|
||||
* A Backbone view for the collapsible menus.
|
||||
*/
|
||||
|
||||
(function ($, Backbone, Drupal) {
|
||||
Drupal.toolbar.MenuVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.MenuVisualView# */{
|
||||
(function($, Backbone, Drupal) {
|
||||
Drupal.toolbar.MenuVisualView = Backbone.View.extend(
|
||||
/** @lends Drupal.toolbar.MenuVisualView# */ {
|
||||
/**
|
||||
* Backbone View for collapsible menus.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
initialize() {
|
||||
this.listenTo(this.model, 'change:subtrees', this.render);
|
||||
},
|
||||
|
||||
/**
|
||||
* Backbone View for collapsible menus.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
initialize() {
|
||||
this.listenTo(this.model, 'change:subtrees', this.render);
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
render() {
|
||||
const subtrees = this.model.get('subtrees');
|
||||
// Add subtrees.
|
||||
Object.keys(subtrees || {}).forEach(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();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
render() {
|
||||
const subtrees = this.model.get('subtrees');
|
||||
// Add subtrees.
|
||||
Object.keys(subtrees || {}).forEach((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));
|
||||
);
|
||||
})(jQuery, Backbone, Drupal);
|
||||
|
||||
@@ -3,69 +3,79 @@
|
||||
* A Backbone view for the aural feedback of the toolbar.
|
||||
*/
|
||||
|
||||
(function (Backbone, Drupal) {
|
||||
Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarAuralView# */{
|
||||
(function(Backbone, Drupal) {
|
||||
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(options) {
|
||||
this.strings = options.strings;
|
||||
|
||||
/**
|
||||
* 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(options) {
|
||||
this.strings = options.strings;
|
||||
this.listenTo(
|
||||
this.model,
|
||||
'change:orientation',
|
||||
this.onOrientationChange,
|
||||
);
|
||||
this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
|
||||
},
|
||||
|
||||
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(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(model, tray) {
|
||||
const relevantTray =
|
||||
tray === null ? model.previous('activeTray') : tray;
|
||||
// Current activeTray and previous activeTray are empty, no state change
|
||||
// to announce.
|
||||
if (!relevantTray) {
|
||||
return;
|
||||
}
|
||||
const action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
|
||||
const trayNameElement = relevantTray.querySelector(
|
||||
'.toolbar-tray-name',
|
||||
);
|
||||
let 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);
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 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(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(model, tray) {
|
||||
const relevantTray = (tray === null) ? model.previous('activeTray') : tray;
|
||||
// Current activeTray and previous activeTray are empty, no state change
|
||||
// to announce.
|
||||
if (!relevantTray) {
|
||||
return;
|
||||
}
|
||||
const action = (tray === null) ? Drupal.t('closed') : Drupal.t('opened');
|
||||
const trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
|
||||
let 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));
|
||||
);
|
||||
})(Backbone, Drupal);
|
||||
|
||||
@@ -29,7 +29,8 @@
|
||||
var text = void 0;
|
||||
if (trayNameElement !== null) {
|
||||
text = Drupal.t('Tray "@tray" @action.', {
|
||||
'@tray': trayNameElement.textContent, '@action': action
|
||||
'@tray': trayNameElement.textContent,
|
||||
'@action': action
|
||||
});
|
||||
} else {
|
||||
text = Drupal.t('Tray @action.', { '@action': action });
|
||||
|
||||
@@ -3,328 +3,383 @@
|
||||
* A Backbone view for the toolbar element. Listens to mouse & touch.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings, Backbone) {
|
||||
Drupal.toolbar.ToolbarVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarVisualView# */{
|
||||
(function($, Drupal, drupalSettings, Backbone) {
|
||||
Drupal.toolbar.ToolbarVisualView = Backbone.View.extend(
|
||||
/** @lends Drupal.toolbar.ToolbarVisualView# */ {
|
||||
/**
|
||||
* Event map for the `ToolbarVisualView`.
|
||||
*
|
||||
* @return {object}
|
||||
* A map of events.
|
||||
*/
|
||||
events() {
|
||||
// Prevents delay and simulated mouse events.
|
||||
const touchEndToClick = function(event) {
|
||||
event.preventDefault();
|
||||
event.target.click();
|
||||
};
|
||||
|
||||
/**
|
||||
* Event map for the `ToolbarVisualView`.
|
||||
*
|
||||
* @return {object}
|
||||
* A map of events.
|
||||
*/
|
||||
events() {
|
||||
// Prevents delay and simulated mouse events.
|
||||
const 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,
|
||||
};
|
||||
},
|
||||
|
||||
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(options) {
|
||||
this.strings = options.strings;
|
||||
|
||||
/**
|
||||
* 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(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);
|
||||
this.listenTo(
|
||||
this.model,
|
||||
'change:activeTab change:orientation change:isOriented',
|
||||
this.updateToolbarHeight,
|
||||
);
|
||||
|
||||
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);
|
||||
this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented', this.updateToolbarHeight);
|
||||
// Add the tray orientation toggles.
|
||||
this.$el
|
||||
.find('.toolbar-tray .toolbar-lining')
|
||||
.append(Drupal.theme('toolbarOrientationToggle'));
|
||||
|
||||
// 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');
|
||||
},
|
||||
|
||||
// Trigger an activeTab change so that listening scripts can respond on
|
||||
// page load. This will call render.
|
||||
this.model.trigger('change:activeTab');
|
||||
},
|
||||
/**
|
||||
* Update the toolbar element height.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
updateToolbarHeight() {
|
||||
const toolbarTabOuterHeight =
|
||||
$('#toolbar-bar')
|
||||
.find('.toolbar-tab')
|
||||
.outerHeight() || 0;
|
||||
const toolbarTrayHorizontalOuterHeight =
|
||||
$('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
|
||||
this.model.set(
|
||||
'height',
|
||||
toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight,
|
||||
);
|
||||
|
||||
/**
|
||||
* Update the toolbar element height.
|
||||
*
|
||||
* @constructs
|
||||
*
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
updateToolbarHeight() {
|
||||
const toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
|
||||
const toolbarTrayHorizontalOuterHeight = $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
|
||||
this.model.set('height', toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight);
|
||||
$('body').css({
|
||||
'padding-top': this.model.get('height'),
|
||||
});
|
||||
|
||||
$('body').css({
|
||||
'padding-top': this.model.get('height'),
|
||||
});
|
||||
this.triggerDisplace();
|
||||
},
|
||||
|
||||
this.triggerDisplace();
|
||||
},
|
||||
// Trigger a recalculation of viewport displacing elements. Use setTimeout
|
||||
// to ensure this recalculation happens after changes to visual elements
|
||||
// have processed.
|
||||
triggerDisplace() {
|
||||
_.defer(() => {
|
||||
Drupal.displace(true);
|
||||
});
|
||||
},
|
||||
|
||||
// Trigger a recalculation of viewport displacing elements. Use setTimeout
|
||||
// to ensure this recalculation happens after changes to visual elements
|
||||
// have processed.
|
||||
triggerDisplace() {
|
||||
_.defer(() => {
|
||||
Drupal.displace(true);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @inheritdoc
|
||||
*
|
||||
* @return {Drupal.toolbar.ToolbarVisualView}
|
||||
* The `ToolbarVisualView` instance.
|
||||
*/
|
||||
render() {
|
||||
this.updateTabs();
|
||||
this.updateTrayOrientation();
|
||||
this.updateBarAttributes();
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*
|
||||
* @return {Drupal.toolbar.ToolbarVisualView}
|
||||
* The `ToolbarVisualView` instance.
|
||||
*/
|
||||
render() {
|
||||
this.updateTabs();
|
||||
this.updateTrayOrientation();
|
||||
this.updateBarAttributes();
|
||||
$('body').removeClass('toolbar-loading');
|
||||
|
||||
$('body').removeClass('toolbar-loading');
|
||||
// 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();
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Responds to a toolbar tab click.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
onTabClick(event) {
|
||||
// If this tab has a tray associated with it, it is considered an
|
||||
// activatable tab.
|
||||
if (event.target.hasAttribute('data-toolbar-tray')) {
|
||||
const activeTab = this.model.get('activeTab');
|
||||
const clickedTab = event.target;
|
||||
|
||||
/**
|
||||
* Responds to a toolbar tab click.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
onTabClick(event) {
|
||||
// If this tab has a tray associated with it, it is considered an
|
||||
// activatable tab.
|
||||
if (event.target.hasAttribute('data-toolbar-tray')) {
|
||||
const activeTab = this.model.get('activeTab');
|
||||
const 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,
|
||||
);
|
||||
|
||||
// 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(event) {
|
||||
const orientation = this.model.get('orientation');
|
||||
// Determine the toggle-to orientation.
|
||||
const antiOrientation =
|
||||
orientation === 'vertical' ? 'horizontal' : 'vertical';
|
||||
const 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,
|
||||
orientation: antiOrientation,
|
||||
},
|
||||
{
|
||||
validate: true,
|
||||
override: true,
|
||||
},
|
||||
);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the orientation of a toolbar tray.
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*/
|
||||
onOrientationToggleClick(event) {
|
||||
const orientation = this.model.get('orientation');
|
||||
// Determine the toggle-to orientation.
|
||||
const antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
|
||||
const 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,
|
||||
orientation: antiOrientation,
|
||||
}, {
|
||||
validate: true,
|
||||
override: true,
|
||||
});
|
||||
/**
|
||||
* Updates the display of the tabs: toggles a tab and the associated tray.
|
||||
*/
|
||||
updateTabs() {
|
||||
const $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');
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the display of the tabs: toggles a tab and the associated tray.
|
||||
*/
|
||||
updateTabs() {
|
||||
const $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);
|
||||
const name = $tab.attr('data-toolbar-tray');
|
||||
// Store the active tab name or remove the setting.
|
||||
const id = $tab.get(0).id;
|
||||
if (id) {
|
||||
localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
|
||||
}
|
||||
// Activate the associated tray.
|
||||
const $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 {
|
||||
// Activate the selected tab.
|
||||
if ($tab.length > 0) {
|
||||
$tab
|
||||
.addClass('is-active')
|
||||
// Mark the tab as pressed.
|
||||
.prop('aria-pressed', true);
|
||||
const name = $tab.attr('data-toolbar-tray');
|
||||
// Store the active tab name or remove the setting.
|
||||
const id = $tab.get(0).id;
|
||||
if (id) {
|
||||
localStorage.setItem(
|
||||
'Drupal.toolbar.activeTabID',
|
||||
JSON.stringify(id),
|
||||
);
|
||||
}
|
||||
// Activate the associated tray.
|
||||
const $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');
|
||||
}
|
||||
}
|
||||
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() {
|
||||
const 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() {
|
||||
const orientation = this.model.get('orientation');
|
||||
|
||||
// The antiOrientation is used to render the view of action buttons like
|
||||
// the tray orientation toggle.
|
||||
const antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
|
||||
|
||||
// Toggle toolbar's parent classes before other toolbar classes to avoid
|
||||
// potential flicker and re-rendering.
|
||||
$('body')
|
||||
.toggleClass('toolbar-vertical', (orientation === 'vertical'))
|
||||
.toggleClass('toolbar-horizontal', (orientation === 'horizontal'));
|
||||
|
||||
const removeClass = (antiOrientation === 'horizontal') ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
|
||||
const $trays = this.$el.find('.toolbar-tray')
|
||||
.removeClass(removeClass)
|
||||
.addClass(`toolbar-tray-${orientation}`);
|
||||
|
||||
// Update the tray orientation toggle button.
|
||||
const iconClass = `toolbar-icon-toggle-${orientation}`;
|
||||
const iconAntiClass = `toolbar-icon-toggle-${antiOrientation}`;
|
||||
const $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.
|
||||
const dir = document.documentElement.dir;
|
||||
const 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() {
|
||||
const $trays = this.$el.find('.toolbar-tray');
|
||||
if (!this.model.get('isOriented')) {
|
||||
$trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
const $activeTab = $(this.model.get('activeTab'));
|
||||
const 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') {
|
||||
const subtreesHash = drupalSettings.toolbar.subtreesHash;
|
||||
const theme = drupalSettings.ajaxPageState.theme;
|
||||
const endpoint = Drupal.url(`toolbar/subtrees/${subtreesHash}`);
|
||||
const cachedSubtreesHash = localStorage.getItem(`Drupal.toolbar.subtreesHash.${theme}`);
|
||||
const cachedSubtrees = JSON.parse(localStorage.getItem(`Drupal.toolbar.subtrees.${theme}`));
|
||||
const 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);
|
||||
/**
|
||||
* Update the attributes of the toolbar bar element.
|
||||
*/
|
||||
updateBarAttributes() {
|
||||
const 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');
|
||||
}
|
||||
// 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);
|
||||
// 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() {
|
||||
const orientation = this.model.get('orientation');
|
||||
|
||||
// The antiOrientation is used to render the view of action buttons like
|
||||
// the tray orientation toggle.
|
||||
const antiOrientation =
|
||||
orientation === 'vertical' ? 'horizontal' : 'vertical';
|
||||
|
||||
// Toggle toolbar's parent classes before other toolbar classes to avoid
|
||||
// potential flicker and re-rendering.
|
||||
$('body')
|
||||
.toggleClass('toolbar-vertical', orientation === 'vertical')
|
||||
.toggleClass('toolbar-horizontal', orientation === 'horizontal');
|
||||
|
||||
const removeClass =
|
||||
antiOrientation === 'horizontal'
|
||||
? 'toolbar-tray-horizontal'
|
||||
: 'toolbar-tray-vertical';
|
||||
const $trays = this.$el
|
||||
.find('.toolbar-tray')
|
||||
.removeClass(removeClass)
|
||||
.addClass(`toolbar-tray-${orientation}`);
|
||||
|
||||
// Update the tray orientation toggle button.
|
||||
const iconClass = `toolbar-icon-toggle-${orientation}`;
|
||||
const iconAntiClass = `toolbar-icon-toggle-${antiOrientation}`;
|
||||
const $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.
|
||||
const dir = document.documentElement.dir;
|
||||
const 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() {
|
||||
const $trays = this.$el.find('.toolbar-tray');
|
||||
if (!this.model.get('isOriented')) {
|
||||
$trays
|
||||
.removeClass('toolbar-tray-horizontal')
|
||||
.addClass('toolbar-tray-vertical');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
const $activeTab = $(this.model.get('activeTab'));
|
||||
const 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'
|
||||
) {
|
||||
const subtreesHash = drupalSettings.toolbar.subtreesHash;
|
||||
const theme = drupalSettings.ajaxPageState.theme;
|
||||
const endpoint = Drupal.url(`toolbar/subtrees/${subtreesHash}`);
|
||||
const cachedSubtreesHash = localStorage.getItem(
|
||||
`Drupal.toolbar.subtreesHash.${theme}`,
|
||||
);
|
||||
const cachedSubtrees = JSON.parse(
|
||||
localStorage.getItem(`Drupal.toolbar.subtrees.${theme}`),
|
||||
);
|
||||
const 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));
|
||||
);
|
||||
})(jQuery, Drupal, drupalSettings, Backbone);
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
namespace Drupal\Tests\toolbar\FunctionalJavascript;
|
||||
|
||||
use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
|
||||
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
|
||||
|
||||
/**
|
||||
* Tests the JavaScript functionality of the toolbar.
|
||||
*
|
||||
* @group toolbar
|
||||
*/
|
||||
class ToolbarIntegrationTest extends JavascriptTestBase {
|
||||
class ToolbarIntegrationTest extends WebDriverTestBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
@@ -27,7 +27,12 @@ class ToolbarIntegrationTest extends JavascriptTestBase {
|
||||
]);
|
||||
$this->drupalLogin($admin_user);
|
||||
|
||||
// Set size for horizontal toolbar.
|
||||
$this->getSession()->resizeWindow(1200, 600);
|
||||
$this->drupalGet('<front>');
|
||||
$this->assertNotEmpty($this->assertSession()->waitForElement('css', 'body.toolbar-horizontal'));
|
||||
$this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.toolbar-tray'));
|
||||
|
||||
$page = $this->getSession()->getPage();
|
||||
|
||||
// Test that it is possible to toggle the toolbar tray.
|
||||
|
||||
@@ -5,4 +5,4 @@ core: 8.x
|
||||
package: Core
|
||||
version: VERSION
|
||||
dependencies:
|
||||
- breakpoint
|
||||
- drupal:breakpoint
|
||||
|
||||
@@ -217,7 +217,7 @@ function toolbar_toolbar() {
|
||||
* @return array
|
||||
* The updated renderable array.
|
||||
*
|
||||
* @see drupal_render()
|
||||
* @see \Drupal\Core\Render\RendererInterface::render()
|
||||
*/
|
||||
function toolbar_prerender_toolbar_administration_tray(array $element) {
|
||||
$menu_tree = \Drupal::service('toolbar.menu_tree');
|
||||
|
||||
Reference in New Issue
Block a user