Commit c241c1ba authored by webchick's avatar webchick

Issue #2162407 by jibran: Split up toolbar.js.

parent 3903c26c
/**
* @file
* A Backbone Model for collapsible menus.
*/
(function (Backbone, Drupal) {
"use strict";
/**
* Backbone Model for collapsible menus.
*/
Drupal.toolbar.MenuModel = Backbone.Model.extend({
defaults: {
subtrees: {}
}
});
}(Backbone, Drupal));
/**
* @file
* A Backbone Model for the toolbar.
*/
(function (Backbone, Drupal) {
"use strict";
/**
* Backbone model for the toolbar.
*/
Drupal.toolbar.ToolbarModel = Backbone.Model.extend({
defaults: {
// 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'.
activeTab: null,
// Represents whether a tray is open or not. Stored as an ID selector e.g.
// '#toolbar-item--1-tray'.
activeTray: null,
// Indicates whether the toolbar is displayed in an oriented fashion,
// either horizontal or vertical.
isOriented: false,
// Indicates whether the toolbar is positioned absolute (false) or fixed
// (true).
isFixed: false,
// Menu subtrees are loaded through an AJAX request only when the Toolbar
// is set to a vertical orientation.
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.
isViewportOverflowConstrained: false,
// The orientation of the active tray.
orientation: 'vertical',
// 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.
locked: false,
// Indicates whether the tray orientation toggle is visible.
isTrayToggleVisible: false,
// The height of the toolbar.
height: null,
// The current viewport offsets determined by Drupal.displace(). The
// offsets suggest how a module might position is components relative to
// the viewport.
offsets: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
/**
* {@inheritdoc}
*/
validate: function (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));
This diff is collapsed.
/**
* @file
* A Backbone view for the body element.
*/
(function ($, Drupal, Backbone) {
"use strict";
/**
* Adjusts the body element with the toolbar position and dimension changes.
*/
Drupal.toolbar.BodyVisualView = Backbone.View.extend({
/**
* {@inheritdoc}
*/
initialize: function () {
this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
},
/**
* {@inheritdoc}
*/
render: function () {
var $body = $('body');
var orientation = this.model.get('orientation');
var isOriented = this.model.get('isOriented');
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);
}
});
}(jQuery, Drupal, Backbone));
/**
* @file
* A Backbone view for the collapsible menus.
*/
(function ($,Backbone, Drupal) {
"use strict";
/**
* Backbone View for collapsible menus.
*/
Drupal.toolbar.MenuVisualView = Backbone.View.extend({
/**
* {@inheritdoc}
*/
initialize: function () {
this.listenTo(this.model, 'change:subtrees', this.render);
},
/**
* {@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.
if ('drupalToolbarMenu' in $.fn) {
this.$el
.children('.menu')
.drupalToolbarMenu();
}
}
});
}(jQuery, Backbone, Drupal));
/**
* @file
* A Backbone view for the aural feedback of the toolbar.
*/
(function (Backbone, Drupal) {
"use strict";
/**
* Backbone view for the aural feedback of the toolbar.
*/
Drupal.toolbar.ToolbarAuralView = Backbone.View.extend({
/**
* {@inheritdoc}
*/
initialize: function (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
* @param String orientation
* The new value of the orientation attribute in the model.
*/
onOrientationChange: function (model, orientation) {
Drupal.announce(Drupal.t('Tray orientation changed to @orientation.', {
'@orientation': orientation
}));
},
/**
* Announces a changed active tray.
*
* @param Drupal.Toolbar.ToolbarModel model
* @param Element orientation
* The new value of the tray attribute in the model.
*/
onActiveTrayChange: function (model, tray) {
var relevantTray = (tray === null) ? model.previous('activeTray') : tray;
var trayName = relevantTray.querySelector('.toolbar-tray-name').textContent;
var text;
if (tray === null) {
text = Drupal.t('Tray "@tray" closed.', { '@tray': trayName });
}
else {
text = Drupal.t('Tray "@tray" opened.', { '@tray': trayName });
}
Drupal.announce(text);
}
});
}(Backbone, Drupal));
This diff is collapsed.
......@@ -562,16 +562,26 @@ function toolbar_get_rendered_subtrees() {
* Implements hook_library_info().
*/
function toolbar_library_info() {
$path = drupal_get_path('module', 'toolbar');
$libraries['toolbar'] = array(
'title' => 'Toolbar',
'version' => \Drupal::VERSION,
'js' => array(
drupal_get_path('module', 'toolbar') . '/js/toolbar.js' => array(),
// Core.
$path . '/js/toolbar.js' => array(),
// Models.
$path . '/js/models/MenuModel.js' => array(),
$path . '/js/models/ToolbarModel.js' => array(),
// Views.
$path . '/js/views/BodyVisualView.js' => array(),
$path . '/js/views/MenuVisualView.js' => array(),
$path . '/js/views/ToolbarAuralView.js' => array(),
$path . '/js/views/ToolbarVisualView.js' => array(),
),
'css' => array(
drupal_get_path('module', 'toolbar') . '/css/toolbar.module.css',
drupal_get_path('module', 'toolbar') . '/css/toolbar.theme.css',
drupal_get_path('module', 'toolbar') . '/css/toolbar.icons.css',
$path . '/css/toolbar.module.css',
$path . '/css/toolbar.theme.css',
$path . '/css/toolbar.icons.css',
),
'dependencies' => array(
array('system', 'modernizr'),
......@@ -591,10 +601,10 @@ function toolbar_library_info() {
'title' => 'Toolbar nested accordion menus.',
'version' => \Drupal::VERSION,
'js' => array(
drupal_get_path('module', 'toolbar') . '/js/toolbar.menu.js' => array(),
$path . '/js/toolbar.menu.js' => array(),
),
'css' => array(
drupal_get_path('module', 'toolbar') . '/css/toolbar.menu.css',
$path . '/css/toolbar.menu.css',
),
'dependencies' => array(
array('system', 'jquery'),
......@@ -606,7 +616,7 @@ function toolbar_library_info() {
'title' => 'Provides a button to escape the administration area.',
'version' => \Drupal::VERSION,
'js' => array(
drupal_get_path('module', 'toolbar') . '/js/escapeAdmin.js',
$path . '/js/escapeAdmin.js',
),
'dependencies' => array(
array('system', 'jquery'),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment