Chris@0: /**
Chris@0: * DO NOT EDIT THIS FILE.
Chris@0: * See the following change record for more information,
Chris@0: * https://www.drupal.org/node/2815083
Chris@0: * @preserve
Chris@0: **/
Chris@0: 
Chris@0: (function ($, Drupal, drupalSettings, Backbone) {
Chris@0:   Drupal.toolbar.ToolbarVisualView = Backbone.View.extend({
Chris@0:     events: function events() {
Chris@0:       var touchEndToClick = function touchEndToClick(event) {
Chris@0:         event.preventDefault();
Chris@0:         event.target.click();
Chris@0:       };
Chris@0: 
Chris@0:       return {
Chris@0:         'click .toolbar-bar .toolbar-tab .trigger': 'onTabClick',
Chris@0:         'click .toolbar-toggle-orientation button': 'onOrientationToggleClick',
Chris@0:         'touchend .toolbar-bar .toolbar-tab .trigger': touchEndToClick,
Chris@0:         'touchend .toolbar-toggle-orientation button': touchEndToClick
Chris@0:       };
Chris@0:     },
Chris@0:     initialize: function initialize(options) {
Chris@0:       this.strings = options.strings;
Chris@0: 
Chris@0:       this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
Chris@0:       this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
Chris@0:       this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
Chris@0:       this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented', this.updateToolbarHeight);
Chris@0: 
Chris@0:       this.$el.find('.toolbar-tray .toolbar-lining').append(Drupal.theme('toolbarOrientationToggle'));
Chris@0: 
Chris@0:       this.model.trigger('change:activeTab');
Chris@0:     },
Chris@0:     updateToolbarHeight: function updateToolbarHeight() {
Chris@0:       var toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
Chris@0:       var toolbarTrayHorizontalOuterHeight = $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
Chris@0:       this.model.set('height', toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight);
Chris@0: 
Chris@0:       $('body').css({
Chris@0:         'padding-top': this.model.get('height')
Chris@0:       });
Chris@0: 
Chris@0:       this.triggerDisplace();
Chris@0:     },
Chris@0:     triggerDisplace: function triggerDisplace() {
Chris@0:       _.defer(function () {
Chris@0:         Drupal.displace(true);
Chris@0:       });
Chris@0:     },
Chris@0:     render: function render() {
Chris@0:       this.updateTabs();
Chris@0:       this.updateTrayOrientation();
Chris@0:       this.updateBarAttributes();
Chris@0: 
Chris@0:       $('body').removeClass('toolbar-loading');
Chris@0: 
Chris@0:       if (this.model.changed.orientation === 'vertical' || this.model.changed.activeTab) {
Chris@0:         this.loadSubtrees();
Chris@0:       }
Chris@0: 
Chris@0:       return this;
Chris@0:     },
Chris@0:     onTabClick: function onTabClick(event) {
Chris@18:       if (event.currentTarget.hasAttribute('data-toolbar-tray')) {
Chris@0:         var activeTab = this.model.get('activeTab');
Chris@18:         var clickedTab = event.currentTarget;
Chris@0: 
Chris@0:         this.model.set('activeTab', !activeTab || clickedTab !== activeTab ? clickedTab : null);
Chris@0: 
Chris@0:         event.preventDefault();
Chris@0:         event.stopPropagation();
Chris@0:       }
Chris@0:     },
Chris@0:     onOrientationToggleClick: function onOrientationToggleClick(event) {
Chris@0:       var orientation = this.model.get('orientation');
Chris@0: 
Chris@0:       var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
Chris@0:       var locked = antiOrientation === 'vertical';
Chris@0: 
Chris@0:       if (locked) {
Chris@0:         localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
Chris@0:       } else {
Chris@0:         localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
Chris@0:       }
Chris@0: 
Chris@0:       this.model.set({
Chris@0:         locked: locked,
Chris@0:         orientation: antiOrientation
Chris@0:       }, {
Chris@0:         validate: true,
Chris@0:         override: true
Chris@0:       });
Chris@0: 
Chris@0:       event.preventDefault();
Chris@0:       event.stopPropagation();
Chris@0:     },
Chris@0:     updateTabs: function updateTabs() {
Chris@0:       var $tab = $(this.model.get('activeTab'));
Chris@0: 
Chris@0:       $(this.model.previous('activeTab')).removeClass('is-active').prop('aria-pressed', false);
Chris@0: 
Chris@0:       $(this.model.previous('activeTray')).removeClass('is-active');
Chris@0: 
Chris@0:       if ($tab.length > 0) {
Chris@0:         $tab.addClass('is-active').prop('aria-pressed', true);
Chris@0:         var name = $tab.attr('data-toolbar-tray');
Chris@0: 
Chris@0:         var id = $tab.get(0).id;
Chris@0:         if (id) {
Chris@0:           localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
Chris@0:         }
Chris@0: 
Chris@0:         var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray');
Chris@0:         if ($tray.length) {
Chris@0:           $tray.addClass('is-active');
Chris@0:           this.model.set('activeTray', $tray.get(0));
Chris@0:         } else {
Chris@0:           this.model.set('activeTray', null);
Chris@0:         }
Chris@0:       } else {
Chris@0:         this.model.set('activeTray', null);
Chris@0:         localStorage.removeItem('Drupal.toolbar.activeTabID');
Chris@0:       }
Chris@0:     },
Chris@0:     updateBarAttributes: function updateBarAttributes() {
Chris@0:       var isOriented = this.model.get('isOriented');
Chris@0:       if (isOriented) {
Chris@0:         this.$el.find('.toolbar-bar').attr('data-offset-top', '');
Chris@0:       } else {
Chris@0:         this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
Chris@0:       }
Chris@0: 
Chris@0:       this.$el.toggleClass('toolbar-oriented', isOriented);
Chris@0:     },
Chris@0:     updateTrayOrientation: function updateTrayOrientation() {
Chris@0:       var orientation = this.model.get('orientation');
Chris@0: 
Chris@0:       var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
Chris@0: 
Chris@0:       $('body').toggleClass('toolbar-vertical', orientation === 'vertical').toggleClass('toolbar-horizontal', orientation === 'horizontal');
Chris@0: 
Chris@0:       var removeClass = antiOrientation === 'horizontal' ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
Chris@0:       var $trays = this.$el.find('.toolbar-tray').removeClass(removeClass).addClass('toolbar-tray-' + orientation);
Chris@0: 
Chris@0:       var iconClass = 'toolbar-icon-toggle-' + orientation;
Chris@0:       var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation;
Chris@0:       var $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
Chris@0:       $orientationToggle.find('button').val(antiOrientation).attr('title', this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
Chris@0: 
Chris@0:       var dir = document.documentElement.dir;
Chris@0:       var edge = dir === 'rtl' ? 'right' : 'left';
Chris@0: 
Chris@0:       $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
Chris@0: 
Chris@0:       $trays.filter('.toolbar-tray-vertical.is-active').attr('data-offset-' + edge, '');
Chris@0: 
Chris@0:       $trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
Chris@0:     },
Chris@0:     adjustPlacement: function adjustPlacement() {
Chris@0:       var $trays = this.$el.find('.toolbar-tray');
Chris@0:       if (!this.model.get('isOriented')) {
Chris@0:         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
Chris@0:       }
Chris@0:     },
Chris@0:     loadSubtrees: function loadSubtrees() {
Chris@0:       var $activeTab = $(this.model.get('activeTab'));
Chris@0:       var orientation = this.model.get('orientation');
Chris@0: 
Chris@0:       if (!this.model.get('areSubtreesLoaded') && typeof $activeTab.data('drupal-subtrees') !== 'undefined' && orientation === 'vertical') {
Chris@0:         var subtreesHash = drupalSettings.toolbar.subtreesHash;
Chris@0:         var theme = drupalSettings.ajaxPageState.theme;
Chris@0:         var endpoint = Drupal.url('toolbar/subtrees/' + subtreesHash);
Chris@0:         var cachedSubtreesHash = localStorage.getItem('Drupal.toolbar.subtreesHash.' + theme);
Chris@0:         var cachedSubtrees = JSON.parse(localStorage.getItem('Drupal.toolbar.subtrees.' + theme));
Chris@0:         var isVertical = this.model.get('orientation') === 'vertical';
Chris@0: 
Chris@0:         if (isVertical && subtreesHash === cachedSubtreesHash && cachedSubtrees) {
Chris@0:           Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
Chris@0:         } else if (isVertical) {
Chris@0:             localStorage.removeItem('Drupal.toolbar.subtreesHash.' + theme);
Chris@0:             localStorage.removeItem('Drupal.toolbar.subtrees.' + theme);
Chris@0: 
Chris@0:             Drupal.ajax({ url: endpoint }).execute();
Chris@0: 
Chris@0:             localStorage.setItem('Drupal.toolbar.subtreesHash.' + theme, subtreesHash);
Chris@0:           }
Chris@0:       }
Chris@0:     }
Chris@0:   });
Chris@0: })(jQuery, Drupal, drupalSettings, Backbone);