retinajs-rails 0.2 → 2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b543d7cfda51df21fe2c7633829f99e8187e0d8d
-  data.tar.gz: 278d5c80eca30acf827d357a26d7abf2a7fbdcaf
+  metadata.gz: d7d7b055ab3b02ec01c58e348d388f2d588b8439
+  data.tar.gz: 712146e59a0f9842d5465237a6a00509b3718151
 SHA512:
-  metadata.gz: 121d8b255c47c3e5d561cc77f272ad244ec0bc31ff2789b198965720f52029d38657f16a53502db3e6710de58800a176c60f38a3ba0d987a0c6f8a132d98e2ef
-  data.tar.gz: e2d1b3be8a6d4e9ed9f10469d38e089284daa6e4f226d83dcbfe1d2fe5445fbf10c7de510c6a717b341c36427c047d7f092381442940377e5d8c3dd9a05734a6
+  metadata.gz: 9276307acb3d2290994064a38f9305c5f2b86b844f726c6a124786eaff2280ed6f5243cd104a35b0a9b90be714414047b1df541a45dccb28b8047e02d92363b8
+  data.tar.gz: 0e3a00adb827256b814320bee9e2c33893084931d066b4b25b5ac9d94aac5cba8a8223fdce707faa2f499c2bfbb363cec3ac066fefd18314f5064f377cac85f1

data/README.md

@@ -8,7 +8,7 @@ Retina.js is an awesome and simple plugin for rendering retina images for displa
 
 Add this line to your application's Gemfile:
 
-    gem "retinajs-rails", "~> 0.1"
+    gem "retinajs-rails", "~> 2.1"
 
 And then execute:
 

data/app/assets/javascripts/retina.js

@@ -1,182 +1,253 @@
 /*!
- * Retina.js v1.3.0
+ * Retina.js v2.1.0
  *
- * Copyright 2014 Imulus, LLC
+ * Copyright 2016 Axial, LLC
  * Released under the MIT license
  *
  * Retina.js is an open source script that makes it easy to serve
  * high-resolution images to devices with retina displays.
  */
+'use strict';
 
-(function() {
-    var root = (typeof exports === 'undefined' ? window : exports);
-    var config = {
-        // An option to choose a suffix for 2x images
-        retinaImageSuffix : '@2x',
-
-        // Ensure Content-Type is an image before trying to load @2x image
-        // https://github.com/imulus/retinajs/pull/45)
-        check_mime_type: true,
-
-        // Resize high-resolution images to original image's pixel dimensions
-        // https://github.com/imulus/retinajs/issues/8
-        force_original_dimensions: true
-    };
-
-    function Retina() {}
-
-    root.Retina = Retina;
-
-    Retina.configure = function(options) {
-        if (options === null) {
-            options = {};
-        }
-
-        for (var prop in options) {
-            if (options.hasOwnProperty(prop)) {
-                config[prop] = options[prop];
-            }
-        }
-    };
-
-    Retina.init = function(context) {
-        if (context === null) {
-            context = root;
-        }
-
-        var existing_onload = context.onload || function(){};
-
-        context.onload = function() {
-            var images = document.getElementsByTagName('img'), retinaImages = [], i, image;
-            for (i = 0; i < images.length; i += 1) {
-                image = images[i];
-                if (!!!image.getAttributeNode('data-no-retina')) {
-                    retinaImages.push(new RetinaImage(image));
-                }
-            }
-            existing_onload();
-        };
-    };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/*
+ * Determine whether or not `window` is available.
+ */
+var hasWindow = typeof window !== 'undefined';
 
-    Retina.isRetina = function(){
-        var mediaQuery = '(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)';
+/*
+ * Get the device pixel ratio per our environment.
+ * Default to 1.
+ */
+var environment = hasWindow ? window.devicePixelRatio || 1 : 1;
 
-        if (root.devicePixelRatio > 1) {
-            return true;
-        }
+/*
+ * Define a pattern for capturing src url suffixes.
+ */
+var srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
+var inlineReplace = /url\(('|")?([^\)'"]+)('|")?\)/i;
 
-        if (root.matchMedia && root.matchMedia(mediaQuery).matches) {
-            return true;
-        }
+/*
+ * Define our selectors for elements to target.
+ */
+var selector = '[data-rjs]';
 
-        return false;
-    };
+/*
+ * Define the attribute we'll use to mark an image as having been processed.
+ */
+var processedAttr = 'data-rjs-processed';
 
+/**
+ * Shortcut for turning some iterable object into an array.
+ *
+ * @param  {Iterable} object Any iterable object.
+ *
+ * @return {Array}
+ */
+function arrayify(object) {
+  return Array.prototype.slice.call(object);
+}
 
-    var regexMatch = /\.\w+$/;
-    function suffixReplace (match) {
-        return config.retinaImageSuffix + match;
+/**
+ * Chooses the actual image size to fetch, (for example 2 or 3) that
+ * will be used to create a suffix like "@2x" or "@3x".
+ *
+ * @param  {String|Number} cap The number the user provided indicating that
+ *                             they have prepared images up to this size.
+ *
+ * @return {Number} The number we'll be using to create a suffix.
+ */
+function chooseCap(cap) {
+  var numericCap = parseInt(cap, 10);
+
+  /*
+   * If the environment's device pixel ratio is less than what the user
+   * provided, we'll only grab images at that size.
+   */
+  if (environment < numericCap) {
+    return environment;
+
+    /*
+     * If the device pixel ratio is greater than or equal to what the
+     * user provided, we'll use what the user provided.
+     */
+  } else {
+      return numericCap;
     }
+}
 
-    function RetinaImagePath(path, at_2x_path) {
-        this.path = path || '';
-        if (typeof at_2x_path !== 'undefined' && at_2x_path !== null) {
-            this.at_2x_path = at_2x_path;
-            this.perform_check = false;
-        } else {
-            if (undefined !== document.createElement) {
-                var locationObject = document.createElement('a');
-                locationObject.href = this.path;
-                locationObject.pathname = locationObject.pathname.replace(regexMatch, suffixReplace);
-                this.at_2x_path = locationObject.href;
-            } else {
-                var parts = this.path.split('?');
-                parts[0] = parts[0].replace(regexMatch, suffixReplace);
-                this.at_2x_path = parts.join('?');
-            }
-            this.perform_check = true;
-        }
+/**
+ * Makes sure that, since we are going to swap out the source of an image,
+ * the image does not change size on the page.
+ *
+ * @param  {Element} image An image element in the DOM.
+ *
+ * @return {Element} The same element that was passed in.
+ */
+function forceOriginalDimensions(image) {
+  if (!image.hasAttribute('data-no-resize')) {
+    if (image.offsetWidth === 0 && image.offsetHeight === 0) {
+      image.setAttribute('width', image.naturalWidth);
+      image.setAttribute('height', image.naturalHeight);
+    } else {
+      image.setAttribute('width', image.offsetWidth);
+      image.setAttribute('height', image.offsetHeight);
     }
-
-    root.RetinaImagePath = RetinaImagePath;
-
-    RetinaImagePath.confirmed_paths = [];
-
-    RetinaImagePath.prototype.is_external = function() {
-        return !!(this.path.match(/^https?\:/i) && !this.path.match('//' + document.domain) );
-    };
-
-    RetinaImagePath.prototype.check_2x_variant = function(callback) {
-        var http, that = this;
-        if (this.is_external()) {
-            return callback(false);
-        } else if (!this.perform_check && typeof this.at_2x_path !== 'undefined' && this.at_2x_path !== null) {
-            return callback(true);
-        } else if (this.at_2x_path in RetinaImagePath.confirmed_paths) {
-            return callback(true);
-        } else {
-            http = new XMLHttpRequest();
-            http.open('HEAD', this.at_2x_path);
-            http.onreadystatechange = function() {
-                if (http.readyState !== 4) {
-                    return callback(false);
-                }
-
-                if (http.status >= 200 && http.status <= 399) {
-                    if (config.check_mime_type) {
-                        var type = http.getResponseHeader('Content-Type');
-                        if (type === null || !type.match(/^image/i)) {
-                            return callback(false);
-                        }
-                    }
-
-                    RetinaImagePath.confirmed_paths.push(that.at_2x_path);
-                    return callback(true);
-                } else {
-                    return callback(false);
-                }
-            };
-            http.send();
-        }
-    };
-
-
-    function RetinaImage(el) {
-        this.el = el;
-        this.path = new RetinaImagePath(this.el.getAttribute('src'), this.el.getAttribute('data-at2x'));
-        var that = this;
-        this.path.check_2x_variant(function(hasVariant) {
-            if (hasVariant) {
-                that.swap();
-            }
-        });
+  }
+  return image;
+}
+
+/**
+ * Determines whether the retina image actually exists on the server.
+ * If so, swaps out the retina image for the standard one. If not,
+ * leaves the original image alone.
+ *
+ * @param {Element} image  An image element in the DOM.
+ * @param {String}  newSrc The url to the retina image.
+ *
+ * @return {undefined}
+ */
+function setSourceIfAvailable(image, retinaURL) {
+  var imgType = image.nodeName.toLowerCase();
+
+  /*
+   * Create a new image element and give it a load listener. When the
+   * load listener fires, it means the URL is correct and we will then
+   * attach it to the user's image.
+   */
+  var testImage = document.createElement('img');
+  testImage.addEventListener('load', function () {
+    /*
+     * If we're dealing with an image tag, force it's dimensions
+     * and set the source attribute. If not, go after the background-image
+     * inline style.
+     */
+    if (imgType === 'img') {
+      forceOriginalDimensions(image).setAttribute('src', retinaURL);
+    } else {
+      image.style.backgroundImage = 'url(' + retinaURL + ')';
     }
+  });
+
+  /*
+   * Attach the retina URL to our proxy image to load in the new
+   * image resource.
+   */
+  testImage.setAttribute('src', retinaURL);
+
+  /*
+   * Mark our image as processed so that it won't be processed again.
+   */
+  image.setAttribute(processedAttr, true);
+}
+
+/**
+ * Attempts to do an image url swap on a given image.
+ *
+ * @param  {Element}       image An image in the DOM.
+ * @param  {String}        src   The original image source attribute.
+ * @param  {String|Number} rjs   The pixel density cap for images provided.
+ *
+ * @return {undefined}
+ */
+function dynamicSwapImage(image, src) {
+  var rjs = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
+
+  var cap = chooseCap(rjs);
+
+  /*
+   * Don't do anything if the cap is less than 2 or there is no src.
+   */
+  if (src && cap > 1) {
+    var newSrc = src.replace(srcReplace, '@' + cap + 'x$1');
+    setSourceIfAvailable(image, newSrc);
+  }
+}
+
+/**
+ * Performs an image url swap on a given image with a provided url.
+ *
+ * @param  {Element} image  An image in the DOM.
+ * @param  {String}  src    The original image source attribute.
+ * @param  {String}  hdsrc  The path for a 2x image.
+ *
+ * @return {undefined}
+ */
+function manualSwapImage(image, src, hdsrc) {
+  if (environment > 1) {
+    setSourceIfAvailable(image, hdsrc);
+  }
+}
+
+/**
+ * Collects all images matching our selector, and converts our
+ * NodeList into an Array so that Array methods will be available to it.
+ *
+ * @param {Iterable} images  Optional. An Array, jQuery selection, or NodeList
+ *                           of elements to affect with retina.js.
+ *
+ * @return {Iterable} Contains all elements matching our selector.
+ */
+function getImages(images) {
+  if (!images) {
+    return typeof document !== 'undefined' ? arrayify(document.querySelectorAll(selector)) : [];
+  } else {
+    return typeof images.forEach === 'function' ? images : arrayify(images);
+  }
+}
+
+/**
+ * Converts a string like "url(hello.png)" into "hello.png".
+ *
+ * @param  {Element} img An HTML element with a background image.
+ *
+ * @return {String}
+ */
+function cleanBgImg(img) {
+  return img.style.backgroundImage.replace(inlineReplace, '$2');
+}
+
+/**
+ * Gets all participating images and dynamically swaps out each one for its
+ * retina equivalent taking into account the environment capabilities and
+ * the densities for which the user has provided images.
+ *
+ * @param {Iterable} images  Optional. An Array, jQuery selection, or NodeList
+ *                           of elements to affect with retina.js. If not
+ *                           provided, retina.js will grab all images on the
+ *                           page.
+ *
+ * @return {undefined}
+ */
+function retina(images) {
+  getImages(images).forEach(function (img) {
+    if (!img.getAttribute(processedAttr)) {
+      var isImg = img.nodeName.toLowerCase() === 'img';
+      var src = isImg ? img.getAttribute('src') : cleanBgImg(img);
+      var rjs = img.getAttribute('data-rjs');
+      var rjsIsNumber = !isNaN(parseInt(rjs, 10));
+
+      /*
+       * If the user provided a number, dynamically swap out the image.
+       * If the user provided a url, do it manually.
+       */
+      if (rjsIsNumber) {
+        dynamicSwapImage(img, src, rjs);
+      } else {
+        manualSwapImage(img, src, rjs);
+      }
+    }
+  });
+}
 
-    root.RetinaImage = RetinaImage;
-
-    RetinaImage.prototype.swap = function(path) {
-        if (typeof path === 'undefined') {
-            path = this.path.at_2x_path;
-        }
-
-        var that = this;
-        function load() {
-            if (! that.el.complete) {
-                setTimeout(load, 5);
-            } else {
-                if (config.force_original_dimensions) {
-                    that.el.setAttribute('width', that.el.offsetWidth);
-                    that.el.setAttribute('height', that.el.offsetHeight);
-                }
-
-                that.el.setAttribute('src', path);
-            }
-        }
-        load();
-    };
-
+/*
+ * If this environment has `window`, activate the plugin.
+ */
+if (hasWindow) {
+  window.addEventListener('load', retina);
+  window.retinajs = retina;
+}
 
-    if (Retina.isRetina()) {
-        Retina.init(root);
-    }
-})();
+exports.default = retina;

data/app/assets/stylesheets/retina.scss

@@ -1,20 +1,102 @@
-// retina.sass
+// retina.scss
 // A helper mixin for applying high-resolution background images (http://www.retinajs.com)
 
 // Submitted by Nathan Crank
 // nathancrank.com
 
-@mixin at2x($path, $ext: "jpg", $w: auto, $h: auto) {
-  $at1x_path: "#{$path}.#{$ext}";
-  $at2x_path: "#{$path}@2x.#{$ext}";
+// Updated by Gabriel R. Sezefredo
+// gabriel.sezefredo.com.br
 
-  background-image: image-url("#{$at1x_path}");
+// Updated by John Newman
+// github.com/jgnewman
+// http://axial.agency
 
-  @media all and (-webkit-min-device-pixel-ratio : 1.5),
-         all and (-o-min-device-pixel-ratio: 3/2),
-         all and (min--moz-device-pixel-ratio: 1.5),
-         all and (min-device-pixel-ratio: 1.5) {
-           background-image: image-url("#{$at2x_path}");
-           background-size: $w $h;
+
+/**
+ * Allows you to use retina images at various pixel densities.
+ * Examples:
+ *
+ *   @include retina(/images/mypic.jpg, 2);
+ *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
+ *
+ * @param  {Value}  $path               The path to the file name minus extension.
+ * @param  {Number} $cap:    2          The highest pixel density level images exist for.
+ * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
+ * @param  {Value}  $extras: null       Any other `background` values to be added.
+ */
+@mixin retina($path, $cap: 2, $size: auto auto, $extras: null) {
+
+  /*
+   * Set a counter and get the length of the image path.
+   */
+  $position: -1;
+  $strpath: '#{$path}';
+  $length: str-length($strpath);
+
+  /*
+   * Loop ver the image path and figure out the
+   * position of the dot where the extension begins.
+   */
+  @for $i from $length through $length - 10{
+      @if $position == -1 {
+          $char : str-slice($strpath, $i, $i);
+          @if str-index($char, ".") == 1 {
+              $position: $i;
+          }
+      }
+  }
+
+  /*
+   * If we were able to figure out where the extension is,
+   * slice the path into a base and an extension. Use that to
+   * calculate urls for different density environments. Set
+   * values for different environments.
+   */
+  @if $position != -1 {
+    $ext: str-slice($strpath, $position + 1, $length);
+    $base: str-slice($strpath, 1, $position - 1);
+    $at1x_path: "#{$base}.#{$ext}";
+    $at2x_path: "#{$base}@2x.#{$ext}";
+
+    /*
+     * Set a base background for 1x environments.
+     */
+    background: url("#{$at1x_path}") $extras;
+    background-size: $size;
+
+    /*
+     * Create an @2x-ish media query.
+     */
+    @media all and (-webkit-min-device-pixel-ratio : 1.5),
+           all and (-o-min-device-pixel-ratio: 3/2),
+           all and (min--moz-device-pixel-ratio: 1.5),
+           all and (min-device-pixel-ratio: 1.5) {
+             background      : url("#{$at2x_path}") $extras;
+             background-size : $size;
+    }
+
+    /*
+     * Create media queries for all environments that the user has
+     * provided images for.
+     */
+    @if $cap >= 2 {
+      @for $env from 2 through $cap {
+        $suffix: "@#{$env}x";
+        @media (-webkit-min-device-pixel-ratio: $env),
+               (min-resolution: $env * 96dpi) {
+                 background      : url("#{$base}#{$suffix}.#{$ext}") $extras;
+                 background-size : $size;
+        }
+      }
+    }
+
+  /*
+   * If anything went wrong trying to separate the file from its
+   * extension, set a background value without doing anything to it.
+   */
+  } @else {
+    background: url("#{$path}") $extras;
+    background-size: $size;
   }
+
 }

data/retinajs-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'retinajs-rails'
-  gem.version       = '0.2'
+  gem.version       = '2.1'
   gem.date          = Date.today
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: retinajs-rails
 version: !ruby/object:Gem::Version
-  version: '0.2'
+  version: '2.1'
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-05 00:00:00.000000000 Z
+date: 2016-07-14 00:00:00.000000000 Z
 dependencies: []
 description: Adds retina.js assets and image helpers to your Rails app
 email: