123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- /**
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/2815083
- * @preserve
- **/
- (function ($, Drupal, drupalSettings, Backbone) {
- Drupal.toolbar.ToolbarVisualView = Backbone.View.extend({
- events: function events() {
- var touchEndToClick = function touchEndToClick(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
- };
- },
- 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);
- this.$el.find('.toolbar-tray .toolbar-lining').append(Drupal.theme('toolbarOrientationToggle'));
- 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);
- $('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();
- $('body').removeClass('toolbar-loading');
- if (this.model.changed.orientation === 'vertical' || this.model.changed.activeTab) {
- this.loadSubtrees();
- }
- return this;
- },
- onTabClick: function onTabClick(event) {
- if (event.target.hasAttribute('data-toolbar-tray')) {
- var activeTab = this.model.get('activeTab');
- var clickedTab = event.target;
- this.model.set('activeTab', !activeTab || clickedTab !== activeTab ? clickedTab : null);
- event.preventDefault();
- event.stopPropagation();
- }
- },
- onOrientationToggleClick: function onOrientationToggleClick(event) {
- var orientation = this.model.get('orientation');
- var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
- var locked = antiOrientation === 'vertical';
- if (locked) {
- localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
- } else {
- localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
- }
- this.model.set({
- locked: locked,
- orientation: antiOrientation
- }, {
- validate: true,
- override: true
- });
- event.preventDefault();
- event.stopPropagation();
- },
- updateTabs: function updateTabs() {
- var $tab = $(this.model.get('activeTab'));
- $(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').prop('aria-pressed', true);
- var name = $tab.attr('data-toolbar-tray');
- var id = $tab.get(0).id;
- if (id) {
- localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
- }
- 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 {
- this.model.set('activeTray', null);
- }
- } else {
- this.model.set('activeTray', null);
- localStorage.removeItem('Drupal.toolbar.activeTabID');
- }
- },
- updateBarAttributes: function updateBarAttributes() {
- var 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');
- }
- this.$el.toggleClass('toolbar-oriented', isOriented);
- },
- updateTrayOrientation: function updateTrayOrientation() {
- var orientation = this.model.get('orientation');
- 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 dir = document.documentElement.dir;
- var edge = dir === 'rtl' ? 'right' : 'left';
- $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
- $trays.filter('.toolbar-tray-vertical.is-active').attr('data-offset-' + edge, '');
- $trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
- },
- adjustPlacement: function adjustPlacement() {
- var $trays = this.$el.find('.toolbar-tray');
- if (!this.model.get('isOriented')) {
- $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
- }
- },
- loadSubtrees: function loadSubtrees() {
- var $activeTab = $(this.model.get('activeTab'));
- var orientation = this.model.get('orientation');
- if (!this.model.get('areSubtreesLoaded') && typeof $activeTab.data('drupal-subtrees') !== 'undefined' && orientation === 'vertical') {
- var subtreesHash = drupalSettings.toolbar.subtreesHash;
- var theme = drupalSettings.ajaxPageState.theme;
- var endpoint = Drupal.url('toolbar/subtrees/' + subtreesHash);
- 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 (isVertical && subtreesHash === cachedSubtreesHash && cachedSubtrees) {
- Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
- } 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);
|