BodyVisualView.es6.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. /**
  2. * @file
  3. * A Backbone view for the body element.
  4. */
  5. (function ($, Drupal, Backbone) {
  6. Drupal.toolbar.BodyVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.BodyVisualView# */{
  7. /**
  8. * Adjusts the body element with the toolbar position and dimension changes.
  9. *
  10. * @constructs
  11. *
  12. * @augments Backbone.View
  13. */
  14. initialize() {
  15. this.listenTo(this.model, 'change:activeTray ', this.render);
  16. this.listenTo(this.model, 'change:isFixed change:isViewportOverflowConstrained', this.isToolbarFixed);
  17. },
  18. isToolbarFixed() {
  19. // When the toolbar is fixed, it will not scroll with page scrolling.
  20. const isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained');
  21. $('body').toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed')));
  22. },
  23. /**
  24. * @inheritdoc
  25. */
  26. render() {
  27. $('body')
  28. // Toggle the toolbar-tray-open class on the body element. The class is
  29. // applied when a toolbar tray is active. Padding might be applied to
  30. // the body element to prevent the tray from overlapping content.
  31. .toggleClass('toolbar-tray-open', !!this.model.get('activeTray'));
  32. },
  33. });
  34. }(jQuery, Drupal, Backbone));