diff --git a/core/modules/contextual/contextual.toolbar.js b/core/modules/contextual/contextual.toolbar.js index 231ff78..d2d6e18 100644 --- a/core/modules/contextual/contextual.toolbar.js +++ b/core/modules/contextual/contextual.toolbar.js @@ -34,8 +34,7 @@ Drupal.behaviors.contextualToolbar = { }) .on('drupalOverlayClose.contextualToolbar', function () { model.set('isVisible', true); - }) - .on('drupalEditModeChanged', Drupal.contextualToolbar.editModeChangedHandler); + }); // Update the model to show the edit tab if there's >=1 contextual link. if ($contextuals.length > 0) { @@ -57,13 +56,7 @@ Drupal.behaviors.contextualToolbar = { } }; -Drupal.contextualToolbar = Drupal.contextualToolbar || { - models: {}, - views: {}, - editModeChangedHandler: function (event, data) { - Drupal.toolbar.setActiveItem($('.js .toolbar .bar .contextual-toolbar-tab')); - } -}; +Drupal.contextualToolbar = Drupal.contextualToolbar || { models: {}, views: {}}; /** * Backbone Model for the edit toggle. diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js index d4531ba..c3b35d6 100644 --- a/core/modules/toolbar/js/toolbar.js +++ b/core/modules/toolbar/js/toolbar.js @@ -17,14 +17,15 @@ */ Drupal.behaviors.toolbar = { attach: function (context) { - var defaults = this.defaults; + var that = this; + // Merge the defaults and toolbar settings into the full list of options. + var options = $.extend({}, this.defaults, (drupalSettings.toolbar || {})); + // Process the administration toolbar element. $(context).find('#toolbar-administration').once('toolbar', function () { - // Create a reference to the defaults in this function scope. - var options = $.extend(defaults, drupalSettings.toolbar); // Set up switching between the vertical and horizontal presentation // of the toolbar trays based on a breakpoint. var mql = window.matchMedia(options.breakpoints['module.toolbar.wide']); - var model = new Drupal.toolbar.Model({ + var model = that.models.toolbarModel = new Drupal.toolbar.ToolbarModel({ locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')) || false, activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))), mqMatches: mql.matches @@ -35,24 +36,43 @@ model.set('mqMatches', mql.matches); }); + that.views.toolbarView = new Drupal.toolbar.ToolbarView( + $.extend({ + el: this, + model: model + }, options) + ); + + that.views.bodyView = new Drupal.toolbar.BodyView( + $.extend({ + el: this, + model: model + }, options) + ); + + // Render collapsible menus. + var menuModel = that.models.menuModel = new Drupal.toolbar.MenuModel(); + that.views.menuView = new Drupal.toolbar.MenuView( + $.extend({ + el: $(this).find('.toolbar-menu-administration').get(0), + model: menuModel + }, options) + ); + + // Handle the resolution of Drupal.toolbar.setSubtrees(). + // This is handled with a deferred so that the function may be invoked + // asynchronously. + Drupal.toolbar.setSubtrees.done(function (subtrees) { + menuModel.set('subtrees', subtrees); + }); + // Respond to viewport offset dimension changes. $(document) .on('drupalViewportOffsetChange.toolbar', function (event, offsets) { - model.set('offsets', { - top: offsets.top, - right: offsets.right, - bottom: offsets.bottom, - left: offsets.left - }); - // Alter the padding on the top of the body element. - $('body').css('padding-top', offsets.top); + // Update the model with the new offset values. + model.set('offsets', offsets); }); - // Respond to toolbar events. - $(document) - .on('drupalToolbarOrientationChange.toolbar', Drupal.toolbar.orientationChangeHandler) - .on('drupalToolbarTrayChange.toolbar', Drupal.toolbar.trayChangeHandler); - // Broadcast model changes to other modules. model .on('change:orientation', function (model, orientation) { @@ -65,29 +85,17 @@ $(document).trigger('drupalToolbarTrayChange', tray); }); - // Build the toolbar view and assign it to the closure variable reference. - var view = new Drupal.toolbar.View({ - el: this, - model: model, - strings: options.strings - }); - - // Render collapsible menus. - var menuModel = new Drupal.toolbar.MenuModel(); - var menuView = new Drupal.toolbar.MenuView({ - el: $(this).find('.toolbar-menu-administration').get(0), - model: menuModel - }); - // Handle the resolution of Drupal.toolbar.setSubtrees(). - // This is handled with a deferred so that the function may be invoked - // asynchronously. - Drupal.toolbar.setSubtrees.done(function (subtrees) { - menuModel.set('subtrees', subtrees); - }); // Call displace to get the initial placement of offset elements. Drupal.displace(); }); }, + + // A map of View instances. + views: {}, + + // A map of Model instances. + models: {}, + // Default options. defaults: { breakpoints: { @@ -104,7 +112,9 @@ /** * Toolbar methods of Backbone objects. */ -Drupal.toolbar = Drupal.toolbar || { +Drupal.toolbar = Drupal.toolbar || {}; + +$.extend(Drupal.toolbar, { /** * Accepts a list of subtree menu elements. * @@ -116,40 +126,9 @@ Drupal.toolbar = Drupal.toolbar || { setSubtrees: new $.Deferred(), /** - * Responds to drupalToolbarOrientationChange. - * - * Applies classes to the body element that reflect the current orientation - * of the active toolbar. - * - * @param jQuery.Event event - * @param String orientation - * The value can be either 'horizontal' or 'vertical'. - */ - orientationChangeHandler: function (event, orientation) { - $('body') - .toggleClass('toolbar-vertical', orientation === 'vertical') - .toggleClass('toolbar-horizontal', orientation === 'horizontal'); - }, - - /** - * Responds to drupalToolbarTrayChange. - * - * Toggles the toolbar-tray-open class on the body elment. The class is applied - * when a toolbar tray is active. - * - * @param jQuery.Event event - * @param DOM tray - * The currently active tray DOM element. - */ - trayChangeHandler: function (event, tray) { - $('body') - .toggleClass('toolbar-tray-open', !!tray); - }, - - /** * Backbone model for the toolbar. */ - Model: Backbone.Model.extend({ + ToolbarModel: Backbone.Model.extend({ defaults: { // The active toolbar item. All other items should be inactive under // normal circumstances. It will remain active across page loads. The active @@ -184,7 +163,7 @@ Drupal.toolbar = Drupal.toolbar || { /** * Backbone view for the toolbar element. */ - View: Backbone.View.extend({ + ToolbarView: Backbone.View.extend({ events: { 'click .bar .toolbar-tab': 'onTabClick', 'click .toggle-orientation button': 'onOrientationToggleClick' @@ -475,15 +454,49 @@ Drupal.toolbar = Drupal.toolbar || { .drupalToolbarMenu(); } } + }), + + /** + * Adjusts the body element with the toolbar position and dimension changes. + */ + BodyView: Backbone.View.extend({ + + /** + * Implements Backbone.View.prototype.initialize(). + */ + initialize: function () { + this.model.on('change:orientation change:offsets change:activeTray', this.render, this); + }, + + /** + * Implements Backbone.View.prototype.render(). + */ + render: function () { + var orientation = this.model.get('orientation'); + var tray = this.model.get('activeTray'); + var offsets = this.model.get('offsets'); + + $('body') + // Apply classes to the body element that reflect the current + // orientation of the active toolbar. + .toggleClass('toolbar-vertical', orientation === 'vertical') + .toggleClass('toolbar-horizontal', orientation === 'horizontal') + // Toggle the toolbar-tray-open class on the body elment. The class is + // applied when a toolbar tray is active. + .toggleClass('toolbar-tray-open', !!tray) + // Apply padding to the top of the body to offset the placement of the + // toolbar bar element. + .css('padding-top', offsets.top); + } }) -}; +}); /** * Theme function for the toolbar orientation toggle. * * @return * The corresponding HTML. - */ + */ Drupal.theme.toolbarOrientationToggle = function () { return '
' + '' + diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module index d99cfc6..a25e1d8 100644 --- a/core/modules/toolbar/toolbar.module +++ b/core/modules/toolbar/toolbar.module @@ -633,7 +633,6 @@ function toolbar_library_info() { array('system', 'backbone'), array('system', 'matchmedia'), array('system', 'jquery.once'), - array('system', 'drupal.debounce'), array('system', 'drupal.displace'), array('toolbar', 'toolbar.menu'), ),