aleph1.co.uk Git - yaffs-website/blob - web/core/modules/toolbar/js/views/BodyVisualView.js

   1 /**
   2  * @file
   3  * A Backbone view for the body element.
   4  */
   5
   6 (function ($, Drupal, Backbone) {
   7
   8   'use strict';
   9
  10   Drupal.toolbar.BodyVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.BodyVisualView# */{
  11
  12     /**
  13      * Adjusts the body element with the toolbar position and dimension changes.
  14      *
  15      * @constructs
  16      *
  17      * @augments Backbone.View
  18      */
  19     initialize: function () {
  20       this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render);
  21     },
  22
  23     /**
  24      * @inheritdoc
  25      */
  26     render: function () {
  27       var $body = $('body');
  28       var orientation = this.model.get('orientation');
  29       var isOriented = this.model.get('isOriented');
  30       var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
  31
  32       $body
  33         // We are using JavaScript to control media-query handling for two
  34         // reasons: (1) Using JavaScript let's us leverage the breakpoint
  35         // configurations and (2) the CSS is really complex if we try to hide
  36         // some styling from browsers that don't understand CSS media queries.
  37         // If we drive the CSS from classes added through JavaScript,
  38         // then the CSS becomes simpler and more robust.
  39         .toggleClass('toolbar-vertical', (orientation === 'vertical'))
  40         .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal'))
  41         // When the toolbar is fixed, it will not scroll with page scrolling.
  42         .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')))
  43         // Toggle the toolbar-tray-open class on the body element. The class is
  44         // applied when a toolbar tray is active. Padding might be applied to
  45         // the body element to prevent the tray from overlapping content.
  46         .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'))
  47         // Apply padding to the top of the body to offset the placement of the
  48         // toolbar bar element.
  49         .css('padding-top', this.model.get('offsets').top);
  50     }
  51   });
  52
  53 }(jQuery, Drupal, Backbone));