comparison core/modules/toolbar/js/views/ToolbarVisualView.js @ 0:4c8ae668cc8c

Initial import (non-working)

+/**
+* 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);