public/js/views/behaviors/smooth-scroll.js

   1 'use strict';
   2 var Marionette = require('backbone.marionette');
   3 var behaviourLookup = require('./lookup');
   4 var _ = require('lodash');
   5 var rafUtils = require('../../utils/raf-utils');
   6 var passiveEventListener = require('../../utils/passive-event-listener');
   7
   8 var Behavior = Marionette.Behavior.extend({
   9   defaults: {
  10     scrollElementSelector: null,
  11     contentWrapper: null
  12   },
  13
  14   initialize: function() {
  15     var selector = this.options.scrollElementSelector;
  16     var wrapperSelector = this.options.contentWrapper;
  17     this.queue = [];
  18
  19     this.scrollElement = selector ? document.querySelector(selector) : this.view.el;
  20     this.wrapper = wrapperSelector ? this.scrollElement.querySelector(wrapperSelector) : null;
  21
  22     // Make sure every time the collectionView renders it decorates its childs and updates the banners
  23     this.listenTo(this.view, 'render', this.decorateIfVisible);
  24
  25     // Debounced actions for improved performance
  26     this.lazyDecorator = _.debounce(this.decorateIfVisible.bind(this), 500);
  27     this.lazyDecoratorQueue = rafUtils.debounce(this.decorateQueue, this);
  28
  29     this.lazyTracker = _.debounce(this.trackViewport.bind(this), 500);
  30     this.lazyPointerEvents = _.debounce(this.enablePointerEvents.bind(this), 250);
  31
  32     this.scrollHandler = this.smoothScroll.bind(this);
  33     passiveEventListener.addEventListener(this.scrollElement, 'scroll', this.scrollHandler);
  34   },
  35
  36   // Trigger an event on the child of it's currently on screen
  37   decorateIfVisible: function() {
  38     this.view.children.each(
  39       function(child) {
  40         if (this.isElementVisible(child.el)) child.trigger('messageInViewport');
  41       }.bind(this)
  42     );
  43   },
  44
  45   onAddChild: function(child) {
  46     this.queue.push(child);
  47     this.lazyDecoratorQueue();
  48   },
  49
  50   decorateQueue: function() {
  51     var queue = this.queue;
  52     this.queue = [];
  53
  54     queue.forEach(function(child) {
  55       if (this.isElementVisible(child.el)) child.trigger('messageInViewport');
  56     }, this);
  57   },
  58
  59   // Give an element tells you if it's on screen or above/below the fold
  60   isElementVisible: function(el) {
  61     var rect = el.getBoundingClientRect();
  62     return (
  63       rect.bottom >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
  64     );
  65   },
  66
  67   // Trigger an event on the view after scrolling to keep track of the most centered element on screen
  68   trackViewport: function() {
  69     this.view.triggerMethod('trackViewportCenter');
  70   },
  71
  72   // Disable hover and other pointer events while scrolling
  73   disablePointerEvents: function() {
  74     if (this.wrapper && !this.wrapper.classList.contains('disable-hover'))
  75       this.wrapper.classList.add('disable-hover');
  76   },
  77
  78   enablePointerEvents: function() {
  79     if (this.wrapper) this.wrapper.classList.remove('disable-hover');
  80   },
  81
  82   smoothScroll: function() {
  83     this.disablePointerEvents();
  84     this.lazyDecorator();
  85     this.lazyTracker();
  86     this.lazyPointerEvents();
  87   },
  88
  89   onDestroy: function() {
  90     passiveEventListener.removeEventListener(this.scrollElement, 'scroll', this.scrollHandler);
  91   }
  92 });
  93
  94 behaviourLookup.register('SmoothScroll', Behavior);
  95 module.exports = Behavior;