397 lines
14 KiB
JavaScript
397 lines
14 KiB
JavaScript
/**
|
|
* @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, but only if there is a menu.
|
|
this.$el
|
|
.find('.toolbar-tray .toolbar-lining')
|
|
.has('.toolbar-menu')
|
|
.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')[0].style.paddingTop = `${this.model.get('height')}px`;
|
|
$('html')[0].style.scrollPaddingTop = `${this.model.get('height')}px`;
|
|
|
|
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();
|
|
|
|
$('[data-toolbar-anti-flicker-loading]').remove();
|
|
$('html').removeClass([
|
|
'toolbar-loading',
|
|
'toolbar-horizontal',
|
|
'toolbar-vertical',
|
|
'toolbar-tray-open',
|
|
'toolbar-fixed',
|
|
'toolbar-oriented',
|
|
'toolbar-anti-flicker',
|
|
]);
|
|
$('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.currentTarget.hasAttribute('data-toolbar-tray')) {
|
|
const activeTab = this.model.get('activeTab');
|
|
const clickedTab = event.currentTarget;
|
|
|
|
// 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');
|
|
|
|
// The stored active tab is removed as updateTabs() can be called when
|
|
// a tray is explicitly closed, thus not replaced with a new active tab.
|
|
localStorage.removeItem('Drupal.toolbar.activeTabID');
|
|
// 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'));
|
|
const $orientationToggleButton = $orientationToggle.find('button');
|
|
$orientationToggleButton[0].value = antiOrientation;
|
|
$orientationToggleButton
|
|
.attr('title', this.strings[antiOrientation])
|
|
.removeClass(iconClass)
|
|
.addClass(iconAntiClass);
|
|
$orientationToggleButton[0].textContent = this.strings[antiOrientation];
|
|
|
|
// 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);
|