yaffs.net Git - yaffs-website/blob - web/core/modules/toolbar/js/views/ToolbarVisualView.js

   1 /**
   2 * DO NOT EDIT THIS FILE.
   3 * See the following change record for more information,
   4 * https://www.drupal.org/node/2815083
   5 * @preserve
   6 **/
   7
   8 (function ($, Drupal, drupalSettings, Backbone) {
   9   Drupal.toolbar.ToolbarVisualView = Backbone.View.extend({
  10     events: function events() {
  11       var touchEndToClick = function touchEndToClick(event) {
  12         event.preventDefault();
  13         event.target.click();
  14       };
  15
  16       return {
  17         'click .toolbar-bar .toolbar-tab .trigger': 'onTabClick',
  18         'click .toolbar-toggle-orientation button': 'onOrientationToggleClick',
  19         'touchend .toolbar-bar .toolbar-tab .trigger': touchEndToClick,
  20         'touchend .toolbar-toggle-orientation button': touchEndToClick
  21       };
  22     },
  23     initialize: function initialize(options) {
  24       this.strings = options.strings;
  25
  26       this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible', this.render);
  27       this.listenTo(this.model, 'change:mqMatches', this.onMediaQueryChange);
  28       this.listenTo(this.model, 'change:offsets', this.adjustPlacement);
  29       this.listenTo(this.model, 'change:activeTab change:orientation change:isOriented', this.updateToolbarHeight);
  30
  31       this.$el.find('.toolbar-tray .toolbar-lining').append(Drupal.theme('toolbarOrientationToggle'));
  32
  33       this.model.trigger('change:activeTab');
  34     },
  35     updateToolbarHeight: function updateToolbarHeight() {
  36       var toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;
  37       var toolbarTrayHorizontalOuterHeight = $('.is-active.toolbar-tray-horizontal').outerHeight() || 0;
  38       this.model.set('height', toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight);
  39
  40       $('body').css({
  41         'padding-top': this.model.get('height')
  42       });
  43
  44       this.triggerDisplace();
  45     },
  46     triggerDisplace: function triggerDisplace() {
  47       _.defer(function () {
  48         Drupal.displace(true);
  49       });
  50     },
  51     render: function render() {
  52       this.updateTabs();
  53       this.updateTrayOrientation();
  54       this.updateBarAttributes();
  55
  56       $('body').removeClass('toolbar-loading');
  57
  58       if (this.model.changed.orientation === 'vertical' || this.model.changed.activeTab) {
  59         this.loadSubtrees();
  60       }
  61
  62       return this;
  63     },
  64     onTabClick: function onTabClick(event) {
  65       if (event.target.hasAttribute('data-toolbar-tray')) {
  66         var activeTab = this.model.get('activeTab');
  67         var clickedTab = event.target;
  68
  69         this.model.set('activeTab', !activeTab || clickedTab !== activeTab ? clickedTab : null);
  70
  71         event.preventDefault();
  72         event.stopPropagation();
  73       }
  74     },
  75     onOrientationToggleClick: function onOrientationToggleClick(event) {
  76       var orientation = this.model.get('orientation');
  77
  78       var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
  79       var locked = antiOrientation === 'vertical';
  80
  81       if (locked) {
  82         localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
  83       } else {
  84         localStorage.removeItem('Drupal.toolbar.trayVerticalLocked');
  85       }
  86
  87       this.model.set({
  88         locked: locked,
  89         orientation: antiOrientation
  90       }, {
  91         validate: true,
  92         override: true
  93       });
  94
  95       event.preventDefault();
  96       event.stopPropagation();
  97     },
  98     updateTabs: function updateTabs() {
  99       var $tab = $(this.model.get('activeTab'));
 100
 101       $(this.model.previous('activeTab')).removeClass('is-active').prop('aria-pressed', false);
 102
 103       $(this.model.previous('activeTray')).removeClass('is-active');
 104
 105       if ($tab.length > 0) {
 106         $tab.addClass('is-active').prop('aria-pressed', true);
 107         var name = $tab.attr('data-toolbar-tray');
 108
 109         var id = $tab.get(0).id;
 110         if (id) {
 111           localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify(id));
 112         }
 113
 114         var $tray = this.$el.find('[data-toolbar-tray="' + name + '"].toolbar-tray');
 115         if ($tray.length) {
 116           $tray.addClass('is-active');
 117           this.model.set('activeTray', $tray.get(0));
 118         } else {
 119           this.model.set('activeTray', null);
 120         }
 121       } else {
 122         this.model.set('activeTray', null);
 123         localStorage.removeItem('Drupal.toolbar.activeTabID');
 124       }
 125     },
 126     updateBarAttributes: function updateBarAttributes() {
 127       var isOriented = this.model.get('isOriented');
 128       if (isOriented) {
 129         this.$el.find('.toolbar-bar').attr('data-offset-top', '');
 130       } else {
 131         this.$el.find('.toolbar-bar').removeAttr('data-offset-top');
 132       }
 133
 134       this.$el.toggleClass('toolbar-oriented', isOriented);
 135     },
 136     updateTrayOrientation: function updateTrayOrientation() {
 137       var orientation = this.model.get('orientation');
 138
 139       var antiOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical';
 140
 141       $('body').toggleClass('toolbar-vertical', orientation === 'vertical').toggleClass('toolbar-horizontal', orientation === 'horizontal');
 142
 143       var removeClass = antiOrientation === 'horizontal' ? 'toolbar-tray-horizontal' : 'toolbar-tray-vertical';
 144       var $trays = this.$el.find('.toolbar-tray').removeClass(removeClass).addClass('toolbar-tray-' + orientation);
 145
 146       var iconClass = 'toolbar-icon-toggle-' + orientation;
 147       var iconAntiClass = 'toolbar-icon-toggle-' + antiOrientation;
 148       var $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
 149       $orientationToggle.find('button').val(antiOrientation).attr('title', this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
 150
 151       var dir = document.documentElement.dir;
 152       var edge = dir === 'rtl' ? 'right' : 'left';
 153
 154       $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
 155
 156       $trays.filter('.toolbar-tray-vertical.is-active').attr('data-offset-' + edge, '');
 157
 158       $trays.filter('.toolbar-tray-horizontal.is-active').attr('data-offset-top', '');
 159     },
 160     adjustPlacement: function adjustPlacement() {
 161       var $trays = this.$el.find('.toolbar-tray');
 162       if (!this.model.get('isOriented')) {
 163         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
 164       }
 165     },
 166     loadSubtrees: function loadSubtrees() {
 167       var $activeTab = $(this.model.get('activeTab'));
 168       var orientation = this.model.get('orientation');
 169
 170       if (!this.model.get('areSubtreesLoaded') && typeof $activeTab.data('drupal-subtrees') !== 'undefined' && orientation === 'vertical') {
 171         var subtreesHash = drupalSettings.toolbar.subtreesHash;
 172         var theme = drupalSettings.ajaxPageState.theme;
 173         var endpoint = Drupal.url('toolbar/subtrees/' + subtreesHash);
 174         var cachedSubtreesHash = localStorage.getItem('Drupal.toolbar.subtreesHash.' + theme);
 175         var cachedSubtrees = JSON.parse(localStorage.getItem('Drupal.toolbar.subtrees.' + theme));
 176         var isVertical = this.model.get('orientation') === 'vertical';
 177
 178         if (isVertical && subtreesHash === cachedSubtreesHash && cachedSubtrees) {
 179           Drupal.toolbar.setSubtrees.resolve(cachedSubtrees);
 180         } else if (isVertical) {
 181             localStorage.removeItem('Drupal.toolbar.subtreesHash.' + theme);
 182             localStorage.removeItem('Drupal.toolbar.subtrees.' + theme);
 183
 184             Drupal.ajax({ url: endpoint }).execute();
 185
 186             localStorage.setItem('Drupal.toolbar.subtreesHash.' + theme, subtreesHash);
 187           }
 188       }
 189     }
 190   });
 191 })(jQuery, Drupal, drupalSettings, Backbone);