X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Ftoolbar%2Fjs%2Fviews%2FToolbarVisualView.js;fp=web%2Fcore%2Fmodules%2Ftoolbar%2Fjs%2Fviews%2FToolbarVisualView.js;h=6b4ce21cc6f66748a46a3fbac3d620f0d066282b;hp=f26c98c4d933c43b7cec871716cceb7ea37e96e3;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hpb=aea91e65e895364e460983b890e295aa5d5540a5 diff --git a/web/core/modules/toolbar/js/views/ToolbarVisualView.js b/web/core/modules/toolbar/js/views/ToolbarVisualView.js index f26c98c4d..6b4ce21cc 100644 --- a/web/core/modules/toolbar/js/views/ToolbarVisualView.js +++ b/web/core/modules/toolbar/js/views/ToolbarVisualView.js @@ -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); - - // Update data offset attributes for the trays. + 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 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); \ No newline at end of file