git.r.bdr.sh - rbdr/r.bdr.sh/blob - jekyll/js/unlimited_pizza/melty_cheese.js

   1 'use strict';
   2
   3 Class(UnlimitedPizza, "MeltyCheese").inherits(Widget)({
   4   prototype : {
   5     min : 60, // min height of the element
   6     max : 480, // max height of the element
   7     minThreshold : 200, // distance from bottom before we start
   8     maxThreshold : 500, // distance from bottom before we stop
   9     _loaded : false,
  10
  11     init : function (config) {
  12       Widget.prototype.init.call(this, config)
  13
  14       this._bindInternalEvents();
  15     },
  16
  17     _bindInternalEvents : function bindInternalEvents() {
  18       this.bind('activate', this._onActivate.bind(this));
  19       this.bind('deactivate', this._onDeactivate.bind(this));
  20     },
  21
  22     _onActivate : function _activate() {
  23       // If this is the first time activating it... then load
  24       if (!this._loaded) {
  25         this._load();
  26       }
  27     },
  28
  29     _onDeactivate : function _deactivate() {
  30       this._unload();
  31     },
  32
  33     /*
  34      * Loads everything.
  35      */
  36     _load : function _load() {
  37       this._bindEvents();
  38
  39       this.image = this.element.find('img')
  40     },
  41
  42     _unload : function _unload() {
  43       this._loaded = false;
  44       this._unbindEvents();
  45     },
  46
  47     _bindEvents : function bindEvents() {
  48       $(window).on('scroll', this._onScroll.bind(this));
  49       $(window).on('resize', this._onScroll.bind(this));
  50     },
  51
  52     _unbindEvents : function unbindEvents() {
  53       $(window).off('scroll');
  54       $(window).off('resize');
  55     },
  56
  57     /* Listeners beyond */
  58
  59     _onScroll : function onScroll() {
  60       var documentTop, documentBottom, elementTop, diff, height;
  61
  62
  63       documentTop = $(window).scrollTop();
  64       documentBottom = documentTop + $(window).height();
  65       elementTop = this.element.offset().top;
  66       diff = documentBottom - elementTop;
  67
  68       this.max = this.image.height();
  69       this.min = this.max / 10;
  70
  71       diff -= this.minThreshold;
  72
  73       height = diff * this.max / this.maxThreshold;
  74
  75       if (height < this.min) {
  76         height = this.min;
  77       }
  78
  79       if (height > this.max) {
  80         height = this.max;
  81       }
  82
  83       this.element.height(height);
  84     },
  85
  86   }
  87 });