SumOfUs/Champaign

import $ from 'jquery';
import MobileCheck from './mobile_check';

const DesktopSticky = Backbone.View.extend({
  el: '.desktop-sticky',

  // extraClass: string, optional - the class to add to the wrapper
  //             generated by the sticky library (for CSS)
  // el: the CSS selector for the element to make sticky
  initialize: function(options) {
    this.extraClass = options.extraClass || '';

    this.isSticky = false;
    this.questionSticky();

    // can't use events hash cause scoped to window
    $(window).on('resize', () => this.questionSticky());
  },

  makeSticky: function() {
    if (!this.isSticky) {
      $(this.$el).sticky({ topSpacing: 0 });
      if (this.extraClass.length) {
        this.$el.parent('.sticky-wrapper').addClass(this.extraClass);
      }
      this.isSticky = true;
    }
  },

  unmakeSticky: function() {
    if (this.isSticky) {
      this.$el.unstick();
      this.isSticky = false;
    }
  },

  questionSticky: function() {
    if (MobileCheck.isMobile() || this.$el.hasClass('not-sticky')) {
      this.unmakeSticky();
    } else {
      this.makeSticky();
    }
  },
});

window.champaign.DesktopSticky = DesktopSticky;