imgix-optimizer 0.0.1

data/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "imgix-optimizer",
+  "version": "0.0.1",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-preset-es2015-rollup": "^3.0.0",
+    "rollup": "^0.60.0",
+    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-delete": "^0.1.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-serve": "^0.4.2",
+    "rollup-plugin-uglify": "^4.0.0"
+  },
+  "scripts": {
+    "copy": "cp dist/imgix-optimizer.js vendor/assets/javascripts/",
+    "build": "rollup -c && npm run copy",
+    "dev": "rollup -c ./rollup.config.dev.js -w",
+    "test": "node test/test.js",
+    "pretest": "npm run build"
+  },
+  "files": [
+    "dist/*.js"
+  ],
+  "license": "MIT"
+}

data/rollup.config.dev.js

@@ -0,0 +1,6 @@
+import serve from 'rollup-plugin-serve';
+import cfg from './rollup.config';
+
+cfg[0].plugins.push(serve('dist'));
+
+export default cfg

data/rollup.config.js

@@ -0,0 +1,50 @@
+import pkg from './package.json';
+
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import del from 'rollup-plugin-delete';
+import resolve from 'rollup-plugin-node-resolve';
+import { uglify } from 'rollup-plugin-uglify';
+
+export default [{
+    input: 'src/main.js',
+    output: {
+      name: 'ImgixOptimizer',
+      file: `dist/${pkg.name}.js`,
+      format: 'iife'
+    },
+    plugins: [
+      del({ targets: ['dist/imgix-optimizer*', 'vendor/assets/javascripts/*.js'] }),
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+        babelrc: false,
+        presets: [
+          'es2015-rollup'
+        ]
+      })
+    ]
+  },
+  // --- MINIFIED ---
+  {
+    input: 'src/main.js',
+    output: {
+      name: 'ImgixOptimizer',
+      file: `dist/${pkg.name}-${pkg.version}.min.js`,
+      format: 'iife'
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: 'node_modules/**',
+        babelrc: false,
+        presets: [
+          'es2015-rollup'
+        ]
+      }),
+      uglify()
+    ]
+  }
+];

data/src/imgix_bg_image.js

@@ -0,0 +1,291 @@
+export default class ImgixBgImage {
+
+  constructor(el) {
+    // Length of time to complete fade-in transition.
+    this.timeToFade = 500;
+    // 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.
+   */
+  initOptimization() {
+    $('<img>')
+      .on('load', () => this.renderTmpPlaceholderEl())
+      .attr('src', this.placeholderImgUrl);
+  }
+
+  // ---------------------------------------- | Main Element
+
+  /**
+   * Prepare the main element and its container for optimization.
+   */
+  initEl() {
+    this.setPlaceholderImgUrl();
+    this.setContainerTmpCss();
+    this.setElTmpCss();
+  }
+
+  /**
+   * Set reference to original image URL, which is expected to be a small
+   * placeholder.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  initTmpPlaceholderEl() {
+    this.tmpPlaceholderEl = this.el.clone();
+    this.tmpPlaceholderEl.html('');
+  }
+
+  /**
+   * Position the clone directly behind the main element
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  initTmpFullSizeEl() {
+    this.tmpFullSizeEl = this.tmpPlaceholderEl.clone();
+  }
+
+  /**
+   * Sets a reference to the full-size image URL based on the current dimensions
+   * of the main element.
+   */
+  setFullSizeImgUrl() {
+    // Work with the placeholdler image URL, which has been pulled from the
+    // background-image css property of the main elements.
+    let url = this.placeholderImgUrl.split('?');
+    // q is an array of querystring parameters as ["k=v", "k=v", ...].
+    let q = url[url.length - 1].split('&');
+    // Mapping q converts the array to an object of querystring parameters as
+    // { k: v, k: v, ... }.
+    let args = {};
+    q.map((x) => 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.width() >= this.el.height()) {
+      args['w'] = this.el.width();
+      delete args['h'];
+    } else {
+      args['h'] = this.el.height();
+      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 (let 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.
+   */
+  setTmpFullSizeElImg() {
+    this.setFullSizeImgUrl();
+    this.tmpFullSizeEl.css('background-image', `url("${this.fullSizeImgUrl}")`);
+  }
+
+  /**
+   * Add the temporary full-size element direct before the temporary placeholder
+   * element.
+   */
+  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.
+   */
+  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
+   */
+  transitionImg() {
+    this.fadeOutTmpPlaceholderEl();
+    setTimeout(() => {
+      this.updateElImg();
+      this.replaceElTmpCss();
+      this.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.
+   */
+  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.
+   */
+  updateElImg() {
+    this.setFullSizeImgUrl();
+    this.el.css('background-image', `url('${this.fullSizeImgUrl}')`);
+  }
+
+  /**
+   * Set the background color back to what it was before the transition.
+   */
+  replaceElTmpCss() {
+    this.el.css('background-color', this.elBgColor);
+  }
+
+  /**
+   * Remove both temporary elements from the DOM.
+   */
+  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.
+   */
+  initEventListeners() {
+    this.initResizeEnd();
+    $(window).on('resizeEnd', (event) => this.updateElImg());
+  }
+
+  /**
+   * Trigger "resizeEnd" event on the window object after resizing has ceased
+   * for at least 0.5 seconds.
+   */
+  initResizeEnd() {
+    $(window).resize(function() {
+      if (this.resizeTo) {
+        clearTimeout(this.resizeTo)
+      }
+      this.resizeTo = setTimeout(function() {
+        $(this).trigger('resizeEnd');
+      }, 500);
+    });
+  }
+}

data/src/imgix_image.js

@@ -0,0 +1,143 @@
+export default class ImgixImage {
+
+  constructor(img) {
+    // Length of crossfade transition.
+    this.timeToFade = 500;
+    // Main (pixellated placeholder) image.
+    this.placeholderImg = $(img);
+    // 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.
+   */
+  initOptimization() {
+    $('<img>')
+      .on('load', $.proxy(this.renderFullSizeImg, this))
+      .attr('src', this.placeholderImg.attr('src'));
+  }
+
+  // ---------------------------------------- | Full-Size Image
+
+  /**
+   * Render the full-size image behind the placeholder image.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  initTransition() {
+    this.fullSizeImg.on('load', () => 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.
+   */
+  transitionImg() {
+    if (!this.placeholderImg) return true;
+    this.fadeOutPlaceholder();
+    setTimeout(() => {
+      this.removeFullSizeImgProperties();
+      this.removeImg();
+    }, this.timeToFade);
+  }
+
+  /**
+   * Fade out the placeholder image.
+   */
+  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.
+   */
+  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.
+   */
+  removeImg() {
+    if(!this.placeholderImg) { return }
+    this.placeholderImg.remove();
+    this.placeholderImg = undefined;
+  }
+}

data/src/main.js

@@ -0,0 +1,9 @@
+import ImgixBgImage from './imgix_bg_image';
+import ImgixImage from './imgix_image';
+import Optimizer from './optimizer';
+
+window['Imgix'] = window['Imgix'] || {};
+
+Imgix.ImgixBgImage = ImgixBgImage;
+Imgix.ImgixImage = ImgixImage;
+Imgix.Optimizer = Optimizer;

data/src/optimizer.js

@@ -0,0 +1,43 @@
+import ImgixImage from './imgix_image';
+import ImgixBgImage from './imgix_bg_image';
+
+export default class Optimizer {
+
+  constructor(options = {}) {
+    this.initOptions(options);
+    this.optimizeImages();
+    this.optimizeBgImages();
+  }
+
+  // ---------------------------------------- | Options
+
+  initOptions(options = {}) {
+    this.options = options;
+    const defaultOptions = {
+      parent: 'body'
+    }
+    for (let key in defaultOptions) {
+      if (defaultOptions.hasOwnProperty(key) && !this.options[key]) {
+        this.options[key] = defaultOptions[key];
+      }
+    }
+  }
+
+  // ---------------------------------------- | Inline Images
+
+  optimizeImages() {
+    $(`${this.options.parent} img[data-optimize-img]`).each((idx, img) => {
+      new ImgixImage(img);
+    });
+  }
+
+  // ---------------------------------------- | Background Images
+
+  optimizeBgImages() {
+    $(`${this.options.parent} [data-optimize-bg-img]`).each((idx, img) => {
+      new ImgixBgImage(img);
+    });
+    return true;
+  }
+
+}

data/test/test.js

@@ -0,0 +1,53 @@
+const assert = require('assert');
+const howLongTillLunch = require('..');
+
+function MockDate () {
+	this.date = 0;
+	this.hours = 0;
+	this.minutes = 0;
+	this.seconds = 0;
+	this.milliseconds = 0;
+};
+
+Object.assign(MockDate.prototype, {
+	getDate () { return this.date; },
+	setDate (date) { this.date = date; },
+	setHours (h) { this.hours = h; },
+	setMinutes (m) { this.minutes = m; },
+	setSeconds (s) { this.seconds = s; },
+	setMilliseconds (ms) { this.milliseconds = ms; },
+	valueOf () {
+		return (
+			this.milliseconds +
+			this.seconds * 1e3 +
+			this.minutes * 1e3 * 60 +
+			this.hours * 1e3 * 60 * 60 +
+			this.date * 1e3 * 60 * 60 * 24
+		);
+	}
+});
+
+const now = new MockDate();
+MockDate.now = () => now.valueOf();
+
+global.Date = MockDate;
+
+function test(hours, minutes, seconds, expected) {
+	now.setHours(hours);
+	now.setMinutes(minutes);
+	now.setSeconds(seconds);
+
+	assert.equal(howLongTillLunch(...lunchtime), expected);
+	console.log(`\u001B[32m✓\u001B[39m ${expected}`);
+}
+
+let lunchtime = [ 12, 30 ];
+test(11, 30, 0, '1 hour');
+test(10, 30, 0, '2 hours');
+test(12, 25, 0, '5 minutes');
+test(12, 29, 15, '45 seconds');
+test(13, 30, 0, '23 hours');
+
+// some of us like an early lunch
+lunchtime = [ 11, 0 ];
+test(10, 30, 0, '30 minutes');