BodyVisualView.es6.js 1.4 KB

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