imgix-optimizer 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd027b0cd5fc6f3a425b4bfa91e625eac7fe3c497e3a3417e8db7e6b00444d7c
-  data.tar.gz: 16537284f204d87c8faf335da2aa1e174272de334079d886118dafb57a5b39c7
+  metadata.gz: 42dc4880ac65b270786015db528c75ba85b38d9552babe386ef4d93189c49dcb
+  data.tar.gz: f20dfffa57e6305c77528e295d606abea7798b58e447c4831dc8e2834481bbab
 SHA512:
-  metadata.gz: c21e4346e3a5b1ba13e7169e2df5bcc0d0b3dd510b57784ac91612ab4d4c79f3b0244b11ee36cac95425677ed90a62ab22d766acbdf81191febab9141921757b
-  data.tar.gz: 0d4df2a978eb83d55b6076e304f7f5cd61e532e95e8b85c424c6b491e72aa6702e12a4e66fa5ea6f41e32590acc5c6beb6b6bc878daad09b200230a0b98d40ed
+  metadata.gz: 1abe08ab58629f47d4790474a8453a6c751bf3934a7618ea02d639628f11f29cbd8aa4dd2c074431e41c778552821c4496f58c936ab5af4e6a14b4184fb2f6a4
+  data.tar.gz: 5fbe66cd48a96c5b583856d8a15d3e92102f01720a4acadcbadbab960f4d911d3c9c231978d3119bb2a5bca84b7966a541ada936dcb755d08c065da1e24369e4

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    imgix-optimizer (0.0.3)
+    imgix-optimizer (0.0.4)
 
 GEM
   remote: https://rubygems.org/

data/dist/imgix-optimizer-0.0.3.min.js

@@ -1 +1 @@
-!function(){"use strict";var t=function(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")},e=function(){function l(e,i){for(var t=0;t<i.length;t++){var l=i[t];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(e,i,t){return i&&l(e.prototype,i),t&&l(e,t),e}}(),l=function(){function i(e){t(this,i),this.timeToFade=500,this.dpr=window.devicePixelRatio||1,this.el=$(e),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return e(i,[{key:"initOptimization",value:function(){var e=this;$("<img>").on("load",function(){return e.renderTmpPlaceholderEl()}).attr("src",this.placeholderImgUrl)}},{key:"initEl",value:function(){this.setPlaceholderImgUrl(),this.setContainerTmpCss(),this.setElTmpCss()}},{key:"setPlaceholderImgUrl",value:function(){this.placeholderImgUrl=this.el.css("background-image").replace("url(","").replace(")","").replace(/\"/gi,"").replace(/\'/gi,"").split(", ")[0]}},{key:"setContainerTmpCss",value:function(){this.el.parent().css("position","relative")}},{key:"setElTmpCss",value:function(){"absolute"!=this.el.css("position")&&this.el.css("position","relative")}},{key:"renderTmpPlaceholderEl",value:function(){this.initTmpPlaceholderEl(),this.setTmpPlaceholderElCss(),this.addTmpPlaceholderElToDom(),this.renderFullSizeImg()}},{key:"initTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl=this.el.clone(),this.tmpPlaceholderEl.html("")}},{key:"setTmpPlaceholderElCss",value:function(){this.tmpPlaceholderEl.css({position:"absolute",top:this.el.position().top,left:this.el.position().left,width:this.el.outerWidth(),height:this.el.outerHeight(),backgroundColor:"transparent"})}},{key:"addTmpPlaceholderElToDom",value:function(){this.tmpPlaceholderEl.insertBefore(this.el)}},{key:"renderFullSizeImg",value:function(){this.removeElBgImg(),this.initTmpFullSizeEl(),this.setTmpFullSizeElImg(),this.addTmpFullSizeElToDom(),this.initTransition()}},{key:"removeElBgImg",value:function(){this.elBgColor=this.el.css("background-color"),this.el.css("background-color","transparent"),this.el.css("background-image","")}},{key:"initTmpFullSizeEl",value:function(){this.tmpFullSizeEl=this.tmpPlaceholderEl.clone()}},{key:"setFullSizeImgUrl",value:function(){var e=this.placeholderImgUrl.split("?"),i=e[e.length-1].split("&"),t={};for(var l in i.map(function(e){return t[e.split("=")[0]]=e.split("=")[1]}),this.el.outerWidth()>=this.el.outerHeight()?(t.w=this.el.outerWidth()*this.dpr,delete t.h):(t.h=this.el.outerHeight()*this.dpr,delete t.w),i=[],t)i.push(l+"="+t[l]);return this.fullSizeImgUrl=e[0]+"?"+i.join("&")}},{key:"setTmpFullSizeElImg",value:function(){this.setFullSizeImgUrl(),this.tmpFullSizeEl.css("background-image",'url("'+this.fullSizeImgUrl+'")')}},{key:"addTmpFullSizeElToDom",value:function(){this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl)}},{key:"initTransition",value:function(){$("<img>").on("load",$.proxy(this.transitionImg,this)).attr("src",this.fullSizeImgUrl)}},{key:"transitionImg",value:function(){var e=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){e.updateElImg(),e.replaceElTmpCss(),e.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){this.setFullSizeImgUrl(),this.el.css("background-image","url('"+this.fullSizeImgUrl+"')")}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var i=this;this.initResizeEnd(),$(window).on("resizeEnd",function(e){return i.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),i}(),s=function(){function i(e){t(this,i),this.timeToFade=500,this.placeholderImg=$(e),this.initPlaceholder(),this.initOptimization()}return e(i,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.renderFullSizeImg,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"initPlaceholder",value:function(){this.setPlaceholderCss()}},{key:"setPlaceholderCss",value:function(){"absolute"!=this.placeholderImg.css("position")&&this.placeholderImg.css("position","relative")}},{key:"renderFullSizeImg",value:function(){this.initFullSizeImg(),this.setFullSizeImgTempCss(),this.setFullSizeImgSrc(),this.addFullSizeImgToDom(),this.initTransition()}},{key:"initFullSizeImg",value:function(){this.fullSizeImg=this.placeholderImg.clone()}},{key:"setFullSizeImgTempCss",value:function(){this.fullSizeImg.css({position:"absolute",top:this.placeholderImg.position().top,left:this.placeholderImg.position().left,width:this.placeholderImg.width(),height:this.placeholderImg.height()})}},{key:"setFullSizeImgSrc",value:function(){var e=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.placeholderImg.height());this.fullSizeImg.attr("ix-src",e),this.fullSizeImg.addClass("img-responsive tmp-img-placeholder"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var e=this;this.fullSizeImg.on("load",function(){return e.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var e=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){e.removeFullSizeImgProperties(),e.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("tmp-img-placeholder")}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}}]),i}(),i=function(){function i(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.initOptions(e),this.optimizeImages(),this.optimizeBgImages()}return e(i,[{key:"initOptions",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=e;var i={parent:"body"};for(var t in i)i.hasOwnProperty(t)&&!this.options[t]&&(this.options[t]=i[t])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(e,i){new s(i)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(e,i){new l(i)}),!0}}]),i}();window.Imgix=window.Imgix||{},Imgix.ImgixBgImage=l,Imgix.ImgixImage=s,Imgix.Optimizer=i}();
+!function(){"use strict";var t=function(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")},e=function(){function l(e,i){for(var t=0;t<i.length;t++){var l=i[t];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(e,i,t){return i&&l(e.prototype,i),t&&l(e,t),e}}(),l=function(){function i(e){t(this,i),this.timeToFade=500,this.dpr=window.devicePixelRatio||1,this.el=$(e),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return e(i,[{key:"initOptimization",value:function(){var e=this;$("<img>").on("load",function(){return e.renderTmpPlaceholderEl()}).attr("src",this.placeholderImgUrl)}},{key:"initEl",value:function(){this.setPlaceholderImgUrl(),this.setContainerTmpCss(),this.setElTmpCss()}},{key:"setPlaceholderImgUrl",value:function(){this.placeholderImgUrl=this.el.css("background-image").replace("url(","").replace(")","").replace(/\"/gi,"").replace(/\'/gi,"").split(", ")[0]}},{key:"setContainerTmpCss",value:function(){this.el.parent().css("position","relative")}},{key:"setElTmpCss",value:function(){"absolute"!=this.el.css("position")&&this.el.css("position","relative")}},{key:"renderTmpPlaceholderEl",value:function(){this.initTmpPlaceholderEl(),this.setTmpPlaceholderElCss(),this.addTmpPlaceholderElToDom(),this.renderFullSizeImg()}},{key:"initTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl=this.el.clone(),this.tmpPlaceholderEl.html("")}},{key:"setTmpPlaceholderElCss",value:function(){this.tmpPlaceholderEl.addClass("imgix-optimizing"),this.tmpPlaceholderEl.css({position:"absolute",top:this.el.position().top,left:this.el.position().left,width:this.el.outerWidth(),height:this.el.outerHeight(),backgroundColor:"transparent"})}},{key:"addTmpPlaceholderElToDom",value:function(){this.tmpPlaceholderEl.insertBefore(this.el)}},{key:"renderFullSizeImg",value:function(){this.removeElBgImg(),this.initTmpFullSizeEl(),this.setTmpFullSizeElImg(),this.addTmpFullSizeElToDom(),this.initTransition()}},{key:"removeElBgImg",value:function(){this.elBgColor=this.el.css("background-color"),this.el.css("background-color","transparent"),this.el.css("background-image","")}},{key:"initTmpFullSizeEl",value:function(){this.tmpFullSizeEl=this.tmpPlaceholderEl.clone()}},{key:"setFullSizeImgUrl",value:function(){var e=this.placeholderImgUrl.split("?"),i=e[e.length-1].split("&"),t={};for(var l in i.map(function(e){return t[e.split("=")[0]]=e.split("=")[1]}),this.el.outerWidth()>=this.el.outerHeight()?(t.w=this.el.outerWidth()*this.dpr,delete t.h):(t.h=this.el.outerHeight()*this.dpr,delete t.w),i=[],t)i.push(l+"="+t[l]);return this.fullSizeImgUrl=e[0]+"?"+i.join("&")}},{key:"setTmpFullSizeElImg",value:function(){this.setFullSizeImgUrl(),this.tmpFullSizeEl.css("background-image",'url("'+this.fullSizeImgUrl+'")')}},{key:"addTmpFullSizeElToDom",value:function(){this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl)}},{key:"initTransition",value:function(){$("<img>").on("load",$.proxy(this.transitionImg,this)).attr("src",this.fullSizeImgUrl)}},{key:"transitionImg",value:function(){var e=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){e.updateElImg(),e.replaceElTmpCss(),e.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){this.setFullSizeImgUrl(),this.el.css("background-image","url('"+this.fullSizeImgUrl+"')")}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var i=this;this.initResizeEnd(),$(window).on("resizeEnd",function(e){return i.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),i}(),s=function(){function i(e){t(this,i),this.timeToFade=500,this.placeholderImg=$(e),this.initPlaceholder(),this.initOptimization()}return e(i,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.renderFullSizeImg,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"initPlaceholder",value:function(){this.setPlaceholderCss()}},{key:"setPlaceholderCss",value:function(){"absolute"!=this.placeholderImg.css("position")&&this.placeholderImg.css("position","relative")}},{key:"renderFullSizeImg",value:function(){this.initFullSizeImg(),this.setFullSizeImgTempCss(),this.setFullSizeImgSrc(),this.addFullSizeImgToDom(),this.initTransition()}},{key:"initFullSizeImg",value:function(){this.fullSizeImg=this.placeholderImg.clone()}},{key:"setFullSizeImgTempCss",value:function(){this.fullSizeImg.css({position:"absolute",top:this.placeholderImg.position().top,left:this.placeholderImg.position().left,width:this.placeholderImg.width(),height:this.placeholderImg.height()})}},{key:"setFullSizeImgSrc",value:function(){var e=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.placeholderImg.height());this.fullSizeImg.attr("ix-src",e),this.fullSizeImg.addClass("img-responsive imgix-optimizing"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var e=this;this.fullSizeImg.on("load",function(){return e.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var e=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){e.removeFullSizeImgProperties(),e.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("imgix-optimizing")}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}}]),i}(),i=function(){function i(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.initOptions(e),this.optimizeImages(),this.optimizeBgImages()}return e(i,[{key:"initOptions",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=e;var i={parent:"body"};for(var t in i)i.hasOwnProperty(t)&&!this.options[t]&&(this.options[t]=i[t])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(e,i){new s(i)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(e,i){new l(i)}),!0}}]),i}();window.Imgix=window.Imgix||{},Imgix.ImgixBgImage=l,Imgix.ImgixImage=s,Imgix.Optimizer=i}();

data/dist/imgix-optimizer.js

@@ -151,6 +151,7 @@
     }, {
       key: 'setTmpPlaceholderElCss',
       value: function setTmpPlaceholderElCss() {
+        this.tmpPlaceholderEl.addClass('imgix-optimizing');
         this.tmpPlaceholderEl.css({
           position: 'absolute',
           top: this.el.position().top,
@@ -512,7 +513,7 @@
         var newSrc = this.placeholderImg.attr('src').replace(/(\?|\&)(w=)(\d+)/i, '$1$2' + this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i, '$1$2' + this.placeholderImg.height());
         this.fullSizeImg.attr('ix-src', newSrc);
         // TODO: Make this a configurable option or document it as a more semantic temporary class
-        this.fullSizeImg.addClass('img-responsive tmp-img-placeholder');
+        this.fullSizeImg.addClass('img-responsive imgix-optimizing');
         // TODO: This should respect the option from the Optimizer class for the select
         this.fullSizeImg.removeAttr('data-optimize-img');
       }
@@ -592,7 +593,7 @@
       value: function removeFullSizeImgProperties() {
         this.fullSizeImg.removeAttr('style');
         // TODO: Update this with how the class is handled above.
-        this.fullSizeImg.removeClass('tmp-img-placeholder');
+        this.fullSizeImg.removeClass('imgix-optimizing');
       }
 
       /**

data/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "imgix-optimizer",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imgix-optimizer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-preset-es2015-rollup": "^3.0.0",

data/src/imgix_bg_image.js

@@ -99,6 +99,7 @@ export default class ImgixBgImage {
    * Position the clone directly behind the main element
    */
   setTmpPlaceholderElCss() {
+    this.tmpPlaceholderEl.addClass('imgix-optimizing');
     this.tmpPlaceholderEl.css({
       position: 'absolute',
       top: this.el.position().top,

data/src/imgix_image.js

@@ -92,7 +92,7 @@ export default class ImgixImage {
       .replace(/(\?|\&)(h=)(\d+)/i, '$1$2' + this.placeholderImg.height());
     this.fullSizeImg.attr('ix-src', newSrc);
     // TODO: Make this a configurable option or document it as a more semantic temporary class
-    this.fullSizeImg.addClass('img-responsive tmp-img-placeholder');
+    this.fullSizeImg.addClass('img-responsive imgix-optimizing');
     // TODO: This should respect the option from the Optimizer class for the select
     this.fullSizeImg.removeAttr('data-optimize-img');
   }
@@ -151,7 +151,7 @@ export default class ImgixImage {
   removeFullSizeImgProperties() {
     this.fullSizeImg.removeAttr('style');
     // TODO: Update this with how the class is handled above.
-    this.fullSizeImg.removeClass('tmp-img-placeholder');
+    this.fullSizeImg.removeClass('imgix-optimizing');
   }
 
   /**

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: imgix-optimizer
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Sean C Davis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-31 00:00:00.000000000 Z
+date: 2018-08-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -56,7 +56,6 @@ files:
 - src/optimizer.js
 - test/test.js
 - vendor/assets/javascripts/.keep
-- vendor/assets/javascripts/imgix-optimizer.js
 homepage: https://www.ample.co/
 licenses:
 - MIT

data/vendor/assets/javascripts/imgix-optimizer.js

@@ -1,673 +0,0 @@
-(function () {
-  'use strict';
-
-  var classCallCheck = function (instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  };
-
-  var createClass = function () {
-    function defineProperties(target, props) {
-      for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-      }
-    }
-
-    return function (Constructor, protoProps, staticProps) {
-      if (protoProps) defineProperties(Constructor.prototype, protoProps);
-      if (staticProps) defineProperties(Constructor, staticProps);
-      return Constructor;
-    };
-  }();
-
-  var ImgixBgImage = function () {
-    function ImgixBgImage(el) {
-      classCallCheck(this, ImgixBgImage);
-
-      // Length of time to complete fade-in transition.
-      this.timeToFade = 500;
-      // Device pixel ratio assumes 1 if not set.
-      this.dpr = window['devicePixelRatio'] || 1;
-      // The primary element (i.e. the one with the background image).
-      this.el = $(el);
-      // Background image CSS property must be present.
-      if (this.el.css('background-image') == 'none') {
-        return;
-      }
-      // Prepare the element and its container for optimization.
-      this.initEl();
-      // Kick off the optimization process.
-      this.initOptimization();
-      // Listen for window resize events.
-      this.initEventListeners();
-    }
-
-    /**
-     * Load an image in memory (not within the DOM) with the same source as the
-     * placeholder image. Once that has completed, we know we're safe to begin
-     * processing.
-     */
-
-
-    createClass(ImgixBgImage, [{
-      key: 'initOptimization',
-      value: function initOptimization() {
-        var _this = this;
-
-        $('<img>').on('load', function () {
-          return _this.renderTmpPlaceholderEl();
-        }).attr('src', this.placeholderImgUrl);
-      }
-
-      // ---------------------------------------- | Main Element
-
-      /**
-       * Prepare the main element and its container for optimization.
-       */
-
-    }, {
-      key: 'initEl',
-      value: function initEl() {
-        this.setPlaceholderImgUrl();
-        this.setContainerTmpCss();
-        this.setElTmpCss();
-      }
-
-      /**
-       * Set reference to original image URL, which is expected to be a small
-       * placeholder.
-       */
-
-    }, {
-      key: 'setPlaceholderImgUrl',
-      value: function setPlaceholderImgUrl() {
-        this.placeholderImgUrl = this.el.css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "").replace(/\'/gi, "").split(', ')[0];
-      }
-
-      /**
-       * The parent of our jumbotron container should be relatively positioned
-       * (temporarily) so that we can absolutely position the temp image in the
-       * correct location.
-       */
-
-    }, {
-      key: 'setContainerTmpCss',
-      value: function setContainerTmpCss() {
-        this.el.parent().css('position', 'relative');
-      }
-
-      /**
-       * The main element must have a position set for it to be rendered on top of
-       * the temporary full-size image. We assume that if the element is not
-       * explicitly positioned absolutely, then it can safely be positioned
-       * relatively.
-       */
-
-    }, {
-      key: 'setElTmpCss',
-      value: function setElTmpCss() {
-        if (this.el.css('position') != 'absolute') {
-          this.el.css('position', 'relative');
-        }
-      }
-
-      // ---------------------------------------- | Placeholder Image (Temp)
-
-      /**
-       * Render a clone of the element with the background image directly behind
-       * itself.
-       */
-
-    }, {
-      key: 'renderTmpPlaceholderEl',
-      value: function renderTmpPlaceholderEl() {
-        this.initTmpPlaceholderEl();
-        this.setTmpPlaceholderElCss();
-        this.addTmpPlaceholderElToDom();
-        this.renderFullSizeImg();
-      }
-
-      /**
-       * Create a clone of the element with the background image. Remove content
-       * from the clone -- often elements with a background image contain content.
-       */
-
-    }, {
-      key: 'initTmpPlaceholderEl',
-      value: function initTmpPlaceholderEl() {
-        this.tmpPlaceholderEl = this.el.clone();
-        this.tmpPlaceholderEl.html('');
-      }
-
-      /**
-       * Position the clone directly behind the main element
-       */
-
-    }, {
-      key: 'setTmpPlaceholderElCss',
-      value: function setTmpPlaceholderElCss() {
-        this.tmpPlaceholderEl.css({
-          position: 'absolute',
-          top: this.el.position().top,
-          left: this.el.position().left,
-          width: this.el.outerWidth(),
-          height: this.el.outerHeight(),
-          backgroundColor: 'transparent'
-        });
-      }
-
-      /**
-       * Add temporary element to the DOM, directly before the main element
-       * containing the background image.
-       */
-
-    }, {
-      key: 'addTmpPlaceholderElToDom',
-      value: function addTmpPlaceholderElToDom() {
-        this.tmpPlaceholderEl.insertBefore(this.el);
-      }
-
-      // ---------------------------------------- | Full-Size Image (Temp)
-
-      /**
-       * Create another clone, this time of the temporary placeholder image. This
-       * new element sits behind the other two and is responsible for loading the
-       * full-size image.
-       */
-
-    }, {
-      key: 'renderFullSizeImg',
-      value: function renderFullSizeImg() {
-        this.removeElBgImg();
-        this.initTmpFullSizeEl();
-        this.setTmpFullSizeElImg();
-        this.addTmpFullSizeElToDom();
-        this.initTransition();
-      }
-
-      /**
-       * Remove the background color and image from the main element. The user won't
-       * notice this transition because the temp duplicate image is already set and
-       * is sitting behind the primary element.
-       *
-       * This also stores a reference to the original background color so we can put
-       * it back when the transition is complete.
-       */
-
-    }, {
-      key: 'removeElBgImg',
-      value: function removeElBgImg() {
-        this.elBgColor = this.el.css('background-color');
-        this.el.css('background-color', 'transparent');
-        this.el.css('background-image', '');
-      }
-
-      /**
-       * The temporary full-size element is a clone of the temporary placeholder
-       * image element.
-       */
-
-    }, {
-      key: 'initTmpFullSizeEl',
-      value: function initTmpFullSizeEl() {
-        this.tmpFullSizeEl = this.tmpPlaceholderEl.clone();
-      }
-
-      /**
-       * Sets a reference to the full-size image URL based on the current dimensions
-       * of the main element.
-       */
-
-    }, {
-      key: 'setFullSizeImgUrl',
-      value: function setFullSizeImgUrl() {
-        // Work with the placeholdler image URL, which has been pulled from the
-        // background-image css property of the main elements.
-        var url = this.placeholderImgUrl.split('?');
-        // q is an array of querystring parameters as ["k=v", "k=v", ...].
-        var q = url[url.length - 1].split('&');
-        // Mapping q converts the array to an object of querystring parameters as
-        // { k: v, k: v, ... }.
-        var args = {};
-        q.map(function (x) {
-          return args[x.split('=')[0]] = x.split('=')[1];
-        });
-        // If the image's container is wider than it is tall, we only set width and
-        // unset height, and vice versa.
-        if (this.el.outerWidth() >= this.el.outerHeight()) {
-          args['w'] = this.el.outerWidth() * this.dpr;
-          delete args['h'];
-        } else {
-          args['h'] = this.el.outerHeight() * this.dpr;
-          delete args['w'];
-        }
-        // Redefine q and go the other direction -- take the args object and convert
-        // it back to an array of querystring parameters, as ["k=v", "k=v", ...].
-        q = [];
-        for (var k in args) {
-          q.push(k + '=' + args[k]);
-        }
-        // Store the result and return.
-        return this.fullSizeImgUrl = url[0] + '?' + q.join('&');
-      }
-
-      /**
-       * Change the URL of this temporary element's background image to be the
-       * full-size image.
-       */
-
-    }, {
-      key: 'setTmpFullSizeElImg',
-      value: function setTmpFullSizeElImg() {
-        this.setFullSizeImgUrl();
-        this.tmpFullSizeEl.css('background-image', 'url("' + this.fullSizeImgUrl + '")');
-      }
-
-      /**
-       * Add the temporary full-size element direct before the temporary placeholder
-       * element.
-       */
-
-    }, {
-      key: 'addTmpFullSizeElToDom',
-      value: function addTmpFullSizeElToDom() {
-        this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl);
-      }
-
-      // ---------------------------------------- | Transition
-
-      /**
-       * Load full-size image in memory. When it has loaded we can confidentally
-       * fade out the placeholder, knowing the full-size image will be in its place.
-       */
-
-    }, {
-      key: 'initTransition',
-      value: function initTransition() {
-        $('<img>').on('load', $.proxy(this.transitionImg, this)).attr('src', this.fullSizeImgUrl);
-      }
-
-      /**
-       * Fade out the temporary placeholder, set the background-image on the main
-       * element to the full-size URL, then remove the temporary elements behind the
-       * main element
-       */
-
-    }, {
-      key: 'transitionImg',
-      value: function transitionImg() {
-        var _this2 = this;
-
-        this.fadeOutTmpPlaceholderEl();
-        setTimeout(function () {
-          _this2.updateElImg();
-          _this2.replaceElTmpCss();
-          _this2.removeTmpEls();
-        }, this.timeToFade);
-      }
-
-      /**
-       * Fade out the placeholder element. This was the temporary clone of the main
-       * element that has a placeholder background image.
-       *
-       * Rememeber the main element's background image was unset and its color set
-       * to transparent. That is why fading out this temporary image will work
-       * properly.
-       */
-
-    }, {
-      key: 'fadeOutTmpPlaceholderEl',
-      value: function fadeOutTmpPlaceholderEl() {
-        this.tmpPlaceholderEl.fadeTo(this.timeToFade, 0);
-      }
-
-      /**
-       * Reset the image URL (this helps if the size of the element has changed),
-       * then set the background image to the new source.
-       */
-
-    }, {
-      key: 'updateElImg',
-      value: function updateElImg() {
-        this.setFullSizeImgUrl();
-        this.el.css('background-image', 'url(\'' + this.fullSizeImgUrl + '\')');
-      }
-
-      /**
-       * Set the background color back to what it was before the transition.
-       */
-
-    }, {
-      key: 'replaceElTmpCss',
-      value: function replaceElTmpCss() {
-        this.el.css('background-color', this.elBgColor);
-      }
-
-      /**
-       * Remove both temporary elements from the DOM.
-       */
-
-    }, {
-      key: 'removeTmpEls',
-      value: function removeTmpEls() {
-        this.tmpPlaceholderEl.remove();
-        this.tmpFullSizeEl.remove();
-        this.tmpPlaceholderEl = undefined;
-        this.tmpFullSizeEl = undefined;
-      }
-
-      // ---------------------------------------- | Event Listeners
-
-      /**
-       * Listener for window resize events and update the image when the event ends.
-       */
-
-    }, {
-      key: 'initEventListeners',
-      value: function initEventListeners() {
-        var _this3 = this;
-
-        this.initResizeEnd();
-        $(window).on('resizeEnd', function (event) {
-          return _this3.updateElImg();
-        });
-      }
-
-      /**
-       * Trigger "resizeEnd" event on the window object after resizing has ceased
-       * for at least 0.5 seconds.
-       */
-
-    }, {
-      key: 'initResizeEnd',
-      value: function initResizeEnd() {
-        $(window).resize(function () {
-          if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-          }
-          this.resizeTo = setTimeout(function () {
-            $(this).trigger('resizeEnd');
-          }, 500);
-        });
-      }
-    }]);
-    return ImgixBgImage;
-  }();
-
-  var ImgixImage = function () {
-    function ImgixImage(img) {
-      classCallCheck(this, ImgixImage);
-
-      // Length of crossfade transition.
-      this.timeToFade = 500;
-      // The main image (pixelated placeholder).
-      this.placeholderImg = $(img);
-      // Configure the main placeholder image.
-      this.initPlaceholder();
-      // Kick off the optimization process.
-      this.initOptimization();
-    }
-
-    /**
-     * Load an image in memory (not within the DOM) with the same source as the
-     * placeholder image. Once that has completed, we know we're safe to begin
-     * processing.
-     */
-
-
-    createClass(ImgixImage, [{
-      key: 'initOptimization',
-      value: function initOptimization() {
-        $('<img>').on('load', $.proxy(this.renderFullSizeImg, this)).attr('src', this.placeholderImg.attr('src'));
-      }
-
-      // ---------------------------------------- | Placeholder Image
-
-      /**
-       * Make necessary CSS adjustments to main placeholder image.
-       */
-
-    }, {
-      key: 'initPlaceholder',
-      value: function initPlaceholder() {
-        this.setPlaceholderCss();
-      }
-
-      /**
-       * The main image must have a position set for it to remain in front of the
-       * full-size image. We assume that if the element is not explicitly positioned
-       * absolutely, then it can safely be positioned relatively.
-       */
-
-    }, {
-      key: 'setPlaceholderCss',
-      value: function setPlaceholderCss() {
-        if (this.placeholderImg.css('position') != 'absolute') {
-          this.placeholderImg.css('position', 'relative');
-        }
-      }
-
-      // ---------------------------------------- | Full-Size Image
-
-      /**
-       * Render the full-size image behind the placeholder image.
-       */
-
-    }, {
-      key: 'renderFullSizeImg',
-      value: function renderFullSizeImg() {
-        this.initFullSizeImg();
-        this.setFullSizeImgTempCss();
-        this.setFullSizeImgSrc();
-        this.addFullSizeImgToDom();
-        this.initTransition();
-      }
-
-      /**
-       * The full-size image is a clone of the placeholder image. This enables us to
-       * easily replace it without losing any necessary styles or attributes.
-       */
-
-    }, {
-      key: 'initFullSizeImg',
-      value: function initFullSizeImg() {
-        this.fullSizeImg = this.placeholderImg.clone();
-      }
-
-      /**
-       * Give the full-size image a temporary set of CSS rules so that it can sit
-       * directly behind the placeholder image while loading.
-       */
-
-    }, {
-      key: 'setFullSizeImgTempCss',
-      value: function setFullSizeImgTempCss() {
-        this.fullSizeImg.css({
-          position: 'absolute',
-          top: this.placeholderImg.position().top,
-          left: this.placeholderImg.position().left,
-          width: this.placeholderImg.width(),
-          height: this.placeholderImg.height()
-        });
-      }
-
-      /**
-       * Prep the full-size image with the attributes necessary to become its full
-       * size. Right now it is still just a replica of the placeholder, sitting
-       * right behind the placeholder.
-       *
-       * We set the src directly even though we're using imgix.js because older
-       * browsers don't support the srcset attribute which is what imgix.js relies
-       * upon.
-       */
-
-    }, {
-      key: 'setFullSizeImgSrc',
-      value: function setFullSizeImgSrc() {
-        var newSrc = this.placeholderImg.attr('src').replace(/(\?|\&)(w=)(\d+)/i, '$1$2' + this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i, '$1$2' + this.placeholderImg.height());
-        this.fullSizeImg.attr('ix-src', newSrc);
-        // TODO: Make this a configurable option or document it as a more semantic temporary class
-        this.fullSizeImg.addClass('img-responsive tmp-img-placeholder');
-        // TODO: This should respect the option from the Optimizer class for the select
-        this.fullSizeImg.removeAttr('data-optimize-img');
-      }
-
-      /**
-       * Render the full-size image in the DOM.
-       */
-
-    }, {
-      key: 'addFullSizeImgToDom',
-      value: function addFullSizeImgToDom() {
-        this.fullSizeImg.insertBefore(this.placeholderImg);
-      }
-
-      // ---------------------------------------- | Image Transition
-
-      /**
-       * Once the full-size image is loaded, begin the transition. This is the
-       * critical piece of this process. Imgix.js uses the ix-src attribute to build
-       * out the srcset attribute. Then, based on the sizes attribute, the browser
-       * determines which source to render. Therefore we can't preload in memory
-       * because we need imgix to do its thing directly in the DOM.
-       */
-
-    }, {
-      key: 'initTransition',
-      value: function initTransition() {
-        var _this = this;
-
-        this.fullSizeImg.on('load', function () {
-          return _this.transitionImg();
-        });
-        imgix.init();
-      }
-
-      /**
-       * Fade out the placeholder image, effectively showing the image behind it.
-       *
-       * Once the fade out transition has completed, remove any temporary properties
-       * from the full-size image (so it gets back to being a clone of the
-       * placeholder, with the full-size src).
-       *
-       * Finally, remove the placeholder image from the DOM since we don't need it
-       * any more.
-       */
-
-    }, {
-      key: 'transitionImg',
-      value: function transitionImg() {
-        var _this2 = this;
-
-        if (!this.placeholderImg) return true;
-        this.fadeOutPlaceholder();
-        setTimeout(function () {
-          _this2.removeFullSizeImgProperties();
-          _this2.removeImg();
-        }, this.timeToFade);
-      }
-
-      /**
-       * Fade out the placeholder image.
-       */
-
-    }, {
-      key: 'fadeOutPlaceholder',
-      value: function fadeOutPlaceholder() {
-        this.placeholderImg.fadeTo(this.timeToFade, 0);
-      }
-
-      /**
-       * Remove temporary styles and class from the full-size image, which
-       * effectively means it has replaced the placeholder image.
-       */
-
-    }, {
-      key: 'removeFullSizeImgProperties',
-      value: function removeFullSizeImgProperties() {
-        this.fullSizeImg.removeAttr('style');
-        // TODO: Update this with how the class is handled above.
-        this.fullSizeImg.removeClass('tmp-img-placeholder');
-      }
-
-      /**
-       * Remove the placeholder image from the DOM since we no longer need it.
-       */
-
-    }, {
-      key: 'removeImg',
-      value: function removeImg() {
-        if (!this.placeholderImg) {
-          return;
-        }
-        this.placeholderImg.remove();
-        this.placeholderImg = undefined;
-      }
-    }]);
-    return ImgixImage;
-  }();
-
-  var Optimizer = function () {
-    function Optimizer() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      classCallCheck(this, Optimizer);
-
-      this.initOptions(options);
-      this.optimizeImages();
-      this.optimizeBgImages();
-    }
-
-    // ---------------------------------------- | Options
-
-    createClass(Optimizer, [{
-      key: 'initOptions',
-      value: function initOptions() {
-        var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-        this.options = options;
-        var defaultOptions = {
-          parent: 'body'
-        };
-        for (var key in defaultOptions) {
-          if (defaultOptions.hasOwnProperty(key) && !this.options[key]) {
-            this.options[key] = defaultOptions[key];
-          }
-        }
-      }
-
-      // ---------------------------------------- | Inline Images
-
-    }, {
-      key: 'optimizeImages',
-      value: function optimizeImages() {
-        $(this.options.parent + ' img[data-optimize-img]').each(function (idx, img) {
-          new ImgixImage(img);
-        });
-      }
-
-      // ---------------------------------------- | Background Images
-
-    }, {
-      key: 'optimizeBgImages',
-      value: function optimizeBgImages() {
-        $(this.options.parent + ' [data-optimize-bg-img]').each(function (idx, img) {
-          new ImgixBgImage(img);
-        });
-        return true;
-      }
-    }]);
-    return Optimizer;
-  }();
-
-  window['Imgix'] = window['Imgix'] || {};
-
-  Imgix.ImgixBgImage = ImgixBgImage;
-  Imgix.ImgixImage = ImgixImage;
-  Imgix.Optimizer = Optimizer;
-
-}());