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       this._onScroll();
  41     },
  42
  43     _unload : function _unload() {
  44       this._loaded = false;
  45       this._unbindEvents();
  46     },
  47
  48     _bindEvents : function bindEvents() {
  49       $(window).on('scroll', this._onScroll.bind(this));
  50       $(window).on('resize', this._onScroll.bind(this));
  51     },
  52
  53     _unbindEvents : function unbindEvents() {
  54       $(window).off('scroll');
  55       $(window).off('resize');
  56     },
  57
  58     /* Listeners beyond */
  59
  60     _onScroll : function onScroll() {
  61       var documentTop, documentBottom, elementTop, diff, height;
  62
  63
  64       documentTop = $(window).scrollTop();
  65       documentBottom = documentTop + $(window).height();
  66       elementTop = this.element.offset().top;
  67       diff = documentBottom - elementTop;
  68
  69       this.max = this.image.height();
  70       this.min = this.max / 10;
  71
  72       diff -= this.minThreshold;
  73
  74       height = diff * this.max / this.maxThreshold;
  75
  76       if (height < this.min) {
  77         height = this.min;
  78       }
  79
  80       if (height > this.max) {
  81         height = this.max;
  82       }
  83
  84       this.element.height(height);
  85     },
  86
  87   }
  88 });