Adds new assets for dynamic headers

[rbdr/r.bdr.sh] / jekyll / js / unlimited_pizza / melty_cheese.js

'use strict';

Class(UnlimitedPizza, "MeltyCheese").inherits(Widget)({
  prototype : {
    min : 60, // min height of the element
    max : 480, // max height of the element
    minThreshold : 200, // distance from bottom before we start
    maxThreshold : 500, // distance from bottom before we stop
    _loaded : false,

    init : function (config) {
      Widget.prototype.init.call(this, config)

      this._bindInternalEvents();
    },

    _bindInternalEvents : function bindInternalEvents() {
      this.bind('activate', this._onActivate.bind(this));
      this.bind('deactivate', this._onDeactivate.bind(this));
    },

    _onActivate : function _activate() {
      // If this is the first time activating it... then load
      if (!this._loaded) {
        this._load();
      }
    },

    _onDeactivate : function _deactivate() {
      this._unload();
    },

    /*
     * Loads everything.
     */
    _load : function _load() {
      this._bindEvents();

      this.image = this.element.find('img')
    },

    _unload : function _unload() {
      this._loaded = false;
      this._unbindEvents();
    },

    _bindEvents : function bindEvents() {
      $(window).on('scroll', this._onScroll.bind(this));
      $(window).on('resize', this._onScroll.bind(this));
    },

    _unbindEvents : function unbindEvents() {
      $(window).off('scroll');
      $(window).off('resize');
    },

    /* Listeners beyond */

    _onScroll : function onScroll() {
      var documentTop, documentBottom, elementTop, diff, height;


      documentTop = $(window).scrollTop();
      documentBottom = documentTop + $(window).height();
      elementTop = this.element.offset().top;
      diff = documentBottom - elementTop;

      this.max = this.image.height();
      this.min = this.max / 10;

      diff -= this.minThreshold;

      height = diff * this.max / this.maxThreshold;

      if (height < this.min) {
        height = this.min;
      }

      if (height > this.max) {
        height = this.max;
      }

      console.log("I, ", this.name, "should be ", height);

      this.element.height(height);
    },

  }
});