retinajs-rails 0.1 → 0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2857eb920425c41d8ace4ff4dc3cf2d32dee87a1
-  data.tar.gz: 19361a8fdb779b8d8ca98a3dac064b12e8582c18
+  metadata.gz: b543d7cfda51df21fe2c7633829f99e8187e0d8d
+  data.tar.gz: 278d5c80eca30acf827d357a26d7abf2a7fbdcaf
 SHA512:
-  metadata.gz: 8267f846f8995894822e1650a163b80977cea32048c14d91c9e738640f294f618c86a4d5f02b73e75142e2ad9990a9cc2b3c7a8f2ad3bf4eea10781e5e5ac76b
-  data.tar.gz: 81f7fc5e57c15fbe8692d88b15e061643ed0b62c86fadf4b67d320adfe53134626191c212a5b15c7a740e1169131acf6764896050c0eea24ecdc284824bcd22c
+  metadata.gz: 121d8b255c47c3e5d561cc77f272ad244ec0bc31ff2789b198965720f52029d38657f16a53502db3e6710de58800a176c60f38a3ba0d987a0c6f8a132d98e2ef
+  data.tar.gz: e2d1b3be8a6d4e9ed9f10469d38e089284daa6e4f226d83dcbfe1d2fe5445fbf10c7de510c6a717b341c36427c047d7f092381442940377e5d8c3dd9a05734a6

data/.gitignore

@@ -0,0 +1,2 @@
+
+*.gem

data/README.md

@@ -0,0 +1,83 @@
+# retinajs-rails
+
+Integrates [Retina.js](http://imulus.github.io/retinajs/) with the rails asset pipeline.
+
+Retina.js is an awesome and simple plugin for rendering retina images for displays that support this.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem "retinajs-rails", "~> 0.1"
+
+And then execute:
+
+    $ bundle
+
+## Usage
+
+To import the js plugin, add the following line to your application.js:
+
+``` ruby
+//= require retina
+```
+
+### Image helper
+
+Now you will be able to render retina images by using the `image_tag_with_at2x` helper. Example:
+```ruby
+# Replace:
+image_tag "logo.png"
+
+# With:
+image_tag_with_at2x "logo.png"
+```
+
+This will output the HTML similar to::
+```html
+<img data-at2x="/assets/logo@2x.png" src="/assets/logo.png">
+```
+
+### SCSS mixin
+
+If you'd like to use the SCSS mixin, you need to import `retina.scss`, add the following line to your application.scss:
+
+``` ruby
+@import "retina"
+```
+
+Now you're able to use the `.at2x` mixin in your stylesheets.
+
+For example:
+
+```scss
+.logo {
+  @include at2x('logo', 'png', 200px, 100px);
+}
+```
+
+will compile to:
+
+```scss
+.logo {
+  background-image: url('/assets/logo.png');
+}
+
+@media all and (-webkit-min-device-pixel-ratio: 1.5) {
+  .logo {
+    background-image: url('/assets/logo@2x.png');
+    background-size: 200px 100px;
+  }
+}
+```
+
+For more information about Retina.js, see:
+[http://imulus.github.io/retinajs/](http://imulus.github.io/retinajs/)
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/app/assets/javascripts/retina.js

@@ -0,0 +1,182 @@
+/*!
+ * Retina.js v1.3.0
+ *
+ * Copyright 2014 Imulus, 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.
+ */
+
+(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();
+        };
+    };
+
+    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)';
+
+        if (root.devicePixelRatio > 1) {
+            return true;
+        }
+
+        if (root.matchMedia && root.matchMedia(mediaQuery).matches) {
+            return true;
+        }
+
+        return false;
+    };
+
+
+    var regexMatch = /\.\w+$/;
+    function suffixReplace (match) {
+        return config.retinaImageSuffix + match;
+    }
+
+    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;
+        }
+    }
+
+    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();
+            }
+        });
+    }
+
+    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 (Retina.isRetina()) {
+        Retina.init(root);
+    }
+})();

data/app/assets/stylesheets/retina.scss

@@ -0,0 +1,20 @@
+// retina.sass
+// 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}";
+
+  background-image: image-url("#{$at1x_path}");
+
+  @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;
+  }
+}

data/lib/retinajs-rails.rb

@@ -0,0 +1,12 @@
+module RetinaJs
+  class Engine < ::Rails::Engine
+  end
+end
+
+module ImageHelper
+  def image_tag_with_at2x(name_at_1x, options={})
+    name_at_2x = name_at_1x.gsub(%r{\.\w+$}, '@2x\0')
+    image_tag(name_at_1x, options.merge("data-at2x" => asset_path(name_at_2x)))
+  end
+end
+ActionView::Base.send :include, ImageHelper

data/retinajs-rails.gemspec

@@ -0,0 +1,16 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |gem|
+  gem.name          = 'retinajs-rails'
+  gem.version       = '0.2'
+  gem.date          = Date.today
+  gem.authors       = ["Joshua Jansen"]
+  gem.email         = ["joshuajansen88@gmail.com"]
+  gem.description   = %q{Adds retina.js assets and image helpers to your Rails app}
+  gem.summary       = %q{This gem adds the retina.js assets to your asset pipeline and adds helper methods for rendering retina images.}
+  gem.homepage      = "https://github.com/joshuajansen/retinajs-rails"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.require_paths = ["lib"]
+  gem.license       = 'MIT'
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: retinajs-rails
 version: !ruby/object:Gem::Version
-  version: '0.1'
+  version: '0.2'
 platform: ruby
 authors:
 - Joshua Jansen
@@ -16,7 +16,13 @@ email:
 executables: []
 extensions: []
 extra_rdoc_files: []
-files: []
+files:
+- ".gitignore"
+- README.md
+- app/assets/javascripts/retina.js
+- app/assets/stylesheets/retina.scss
+- lib/retinajs-rails.rb
+- retinajs-rails.gemspec
 homepage: https://github.com/joshuajansen/retinajs-rails
 licenses:
 - MIT