opdavies/drupalcampbristol
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Composer, update everything

Browse source
This commit is contained in:
Oliver Davies 2018-11-23 12:29:20 +00:00
parent ea3e94409f
commit dda5c284b6
19527 changed files with 1135420 additions and 351004 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/core/modules/toolbar/js/views/BodyVisualView.es6.js Normal file
View file

@ -0,0 +1,48 @@
/**
* @file
* 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,
);
},
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'));
},
},
);
})(jQuery, Drupal, Backbone);

61
web/core/modules/toolbar/js/views/BodyVisualView.js
View file

@ -1,53 +1,22 @@
/**
* @file
* A Backbone view for the body element.
*/
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(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);
Drupal.toolbar.BodyVisualView = Backbone.View.extend({
initialize: function initialize() {
this.listenTo(this.model, 'change:activeTray ', this.render);
this.listenTo(this.model, 'change:isFixed change:isViewportOverflowConstrained', this.isToolbarFixed);
},
/**
* @inheritdoc
*/
render: function () {
var $body = $('body');
var orientation = this.model.get('orientation');
var isOriented = this.model.get('isOriented');
isToolbarFixed: function isToolbarFixed() {
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);
$('body').toggleClass('toolbar-fixed', isViewportOverflowConstrained || this.model.get('isFixed'));
},
render: function render() {
$('body').toggleClass('toolbar-tray-open', !!this.model.get('activeTray'));
}
});
}(jQuery, Drupal, Backbone));
})(jQuery, Drupal, Backbone);

39
web/core/modules/toolbar/js/views/MenuVisualView.es6.js Normal file
View file

@ -0,0 +1,39 @@
/**
* @file
* A Backbone view for the collapsible menus.
*/
(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);
},
/**
* @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);

51
web/core/modules/toolbar/js/views/MenuVisualView.js
View file

@ -1,46 +1,27 @@
/**
* @file
* A Backbone view for the collapsible menus.
*/
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(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 () {
Drupal.toolbar.MenuVisualView = Backbone.View.extend({
initialize: function initialize() {
this.listenTo(this.model, 'change:subtrees', this.render);
},
render: function render() {
var _this = this;
/**
* @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.
Object.keys(subtrees || {}).forEach(function (id) {
_this.$el.find('#toolbar-link-' + id).once('toolbar-subtrees').after(subtrees[id]);
});
if ('drupalToolbarMenu' in $.fn) {
this.$el
.children('.toolbar-menu')
.drupalToolbarMenu();
this.$el.children('.toolbar-menu').drupalToolbarMenu();
}
}
});
}(jQuery, Backbone, Drupal));
})(jQuery, Backbone, Drupal);

81
web/core/modules/toolbar/js/views/ToolbarAuralView.es6.js Normal file
View file

@ -0,0 +1,81 @@
/**
* @file
* A Backbone view for the aural feedback of the toolbar.
*/
(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;
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);
},
},
);
})(Backbone, Drupal);

69
web/core/modules/toolbar/js/views/ToolbarAuralView.js
View file

@ -1,70 +1,41 @@
/**
* @file
* A Backbone view for the aural feedback of the toolbar.
*/
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(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) {
Drupal.toolbar.ToolbarAuralView = Backbone.View.extend({
initialize: function initialize(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) {
onOrientationChange: function onOrientationChange(model, orientation) {
Drupal.announce(Drupal.t('Tray orientation changed to @orientation.', {
'@orientation': orientation
}));
},
onActiveTrayChange: function onActiveTrayChange(model, tray) {
var relevantTray = tray === null ? model.previous('activeTray') : tray;
/**
* 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');
if (!relevantTray) {
return;
}
var action = tray === null ? Drupal.t('closed') : Drupal.t('opened');
var trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
var text;
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});
} else {
text = Drupal.t('Tray @action.', { '@action': action });
}
Drupal.announce(text);
}
});
}(Backbone, Drupal));
})(Backbone, Drupal);

385
web/core/modules/toolbar/js/views/ToolbarVisualView.es6.js Normal file
View file

@ -0,0 +1,385 @@
/**
* @file
* 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# */ {
/**
* 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,
};
},
/**
* 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,
);
// 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');
},
/**
* 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'),
});
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);
});
},
/**
* @inheritdoc
*
* @return {Drupal.toolbar.ToolbarVisualView}
* The `ToolbarVisualView` instance.
*/
render() {
this.updateTabs();
this.updateTrayOrientation();
this.updateBarAttributes();
$('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();
}
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;
// 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();
},
/**
* 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 {
// 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() {
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);
}
// 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);

272
web/core/modules/toolbar/js/views/ToolbarVisualView.js
View file

@ -1,23 +1,14 @@
/**
* @file
* A Backbone view for the toolbar element. Listens to mouse & touch.
*/
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(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) {
Drupal.toolbar.ToolbarVisualView = Backbone.View.extend({
events: function events() {
var touchEndToClick = function touchEndToClick(event) {
event.preventDefault();
event.target.click();
};
@ -29,110 +20,70 @@
'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) {
initialize: function 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);
// Add the tray orientation toggles.
this.$el
.find('.toolbar-tray .toolbar-lining')
.append(Drupal.theme('toolbarOrientationToggle'));
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');
},
updateToolbarHeight: function updateToolbarHeight() {
var toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
var toolbarTrayHorizontalOuterHeight = $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
this.model.set('height', toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight);
/**
* @inheritdoc
*
* @return {Drupal.toolbar.ToolbarVisualView}
* The `ToolbarVisualView` instance.
*/
render: function () {
$('body').css({
'padding-top': this.model.get('height')
});
this.triggerDisplace();
},
triggerDisplace: function triggerDisplace() {
_.defer(function () {
Drupal.displace(true);
});
},
render: function render() {
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.
$('body').removeClass('toolbar-loading');
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.
onTabClick: function onTabClick(event) {
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);
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) {
onOrientationToggleClick: function onOrientationToggleClick(event) {
var orientation = this.model.get('orientation');
// Determine the toggle-to orientation.
var antiOrientation = (orientation === 'vertical') ? 'horizontal' : 'vertical';
var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
var locked = antiOrientation === 'vertical';
// Remember the locked state.
if (locked) {
localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
}
else {
} else {
localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
}
// Update the model.
this.model.set({
locked: locked,
orientation: antiOrientation
@ -144,136 +95,78 @@
event.preventDefault();
event.stopPropagation();
},
/**
* Updates the display of the tabs: toggles a tab and the associated tray.
*/
updateTabs: function () {
updateTabs: function updateTabs() {
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.
$(this.model.previous('activeTab')).removeClass('is-active').prop('aria-pressed', false);
$(this.model.previous('activeTray')).removeClass('is-active');
if ($tab.length > 0) {
$tab
.addClass('is-active')
// Mark the tab as pressed.
.prop('aria-pressed', true);
$tab.addClass('is-active').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.
} else {
this.model.set('activeTray', null);
}
}
else {
// There is no active tray.
} else {
this.model.set('activeTray', null);
localStorage.removeItem('Drupal.toolbar.activeTabID');
}
},
/**
* Update the attributes of the toolbar bar element.
*/
updateBarAttributes: function () {
updateBarAttributes: function updateBarAttributes() {
var isOriented = this.model.get('isOriented');
if (isOriented) {
this.$el.find('.toolbar-bar').attr('data-offset-top', '');
}
else {
} 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 () {
updateTrayOrientation: function updateTrayOrientation() {
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 antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
$('body').toggleClass('toolbar-vertical', orientation === 'vertical').toggleClass('toolbar-horizontal', orientation === 'horizontal');
var removeClass = antiOrientation === 'horizontal' ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
var $trays = this.$el.find('.toolbar-tray').removeClass(removeClass).addClass('toolbar-tray-' + orientation);
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);
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.
var edge = dir === 'rtl' ? 'right' : 'left';
$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 () {
adjustPlacement: function adjustPlacement() {
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 () {
loadSubtrees: function loadSubtrees() {
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;
@ -281,25 +174,18 @@
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);
}
} else if (isVertical) {
localStorage.removeItem('Drupal.toolbar.subtreesHash.' + theme);
localStorage.removeItem('Drupal.toolbar.subtrees.' + theme);
Drupal.ajax({ url: endpoint }).execute();
localStorage.setItem('Drupal.toolbar.subtreesHash.' + theme, subtreesHash);
}
}
}
});
}(jQuery, Drupal, drupalSettings, Backbone));
})(jQuery, Drupal, drupalSettings, Backbone);