picturefill-rails 0.1.0 → 0.2.1

data/README.md

@@ -1,5 +1,11 @@
 # Picturefill View helpers for Rails
 
+This gem provides polyfills for 3 wys to render responsive images:
+
+* picturefill
+* jquery-picture
+* srcset
+
 [picturefill](https://github.com/scottjehl/picturefill) is currently the best way for rendering [Responsive Images](http://5by5.tv/webahead/25) on a web page.
 
 *picturefill-rails* provides nice view helper methods to render the picturefill.
@@ -32,6 +38,8 @@ The above can be rendered in Rails 3+ by writing the following code, using the V
   = picture_src 'medium_x2.jpg', "(min-width: 400px) and (min-device-pixel-ratio: 2.0)"
   = picture_src 'largs.jpg',     "(min-width: 800px)"
   = picture_src 'large_x2.jpg',  "(min-width: 800px) and (min-device-pixel-ratio: 2.0)"
+  # ...
+  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon temple in Angkor Thom, Cambodia" 
 ```
 
 Note: This example uses [HAML](https://github.com/haml/haml) as the rendering engine.
@@ -45,6 +53,8 @@ Using conventions, and an extra `ratio:` option, the following shorthand is poss
   = picture_src 'small.jpg', ratio: 'x2'
   = picture_src 'medium.jpg', "400", ratio: 'x2'
   = picture_src 'large.jpg',  "800", ratio: 'x2'  
+  # ...
+  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon temple in Angkor Thom, Cambodia"
 ```
 
 This will ouput exactly the same HTML as the previous example :)
@@ -60,7 +70,108 @@ A number of specs are included which all pass and should ensure that the view he
 
 ## TODO
 
-The `#picture_src` method works, but could use some heavy refactoring! I don't like methods of more than 10 lines! Is a bad sign. Reponsibilities should be off-loaded to other methods (or classes)
+The `#picture_src` method works, but could use some heavy refactoring! I don't like methods of more than 10 lines! Reponsibilities should be off-loaded to other methods (or classes)
+
+Currently the gem only supports Ruby 1.9+ and has only been tested on 1.9.3.
+
+## Assets
+
+The gem includes the picturefill javascript assets that are automatically available for the asset pipeline. In your `application.js` manifest file require:
+
+* `picturefill.js`
+* `picturefill\matchemedia.js`
+
+See [demo](http://scottjehl.github.com/picturefill/) for a full example!
+
+## jQuery Picture
+
+[jquery picture](http://jquerypicture.com/) is now also partly supported. It is very similar to picturefill but with slightly different tags.
+
+The assets `jquery-picture.min.js` and `jquery-picture.js` are included in vendor/assets.
+
+The view helper includes the helper methods:
+
+* `picture_tag(alt)`
+* `source_tag(src, media, options = {})
+
+Usage example:
+
+```haml
+= picture_tag 'A giant stone face at The Bayon temple in Angkor Thom, Cambodia' do
+  = source_tag 'small.jpg', ratio: 'x2'
+  = source_tag 'medium.jpg', "400", ratio: 'x2'
+  = source_tag 'large.jpg',  "800", ratio: 'x2'  
+  # ...
+  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon 
+```
+
+And to enable via jquery:
+
+```javascript
+$(function(){
+    $('picture').picture();
+});
+```
+
+*Arcticles*
+
+[critique of picturefill](http://oscargodson.com/posts/picturefill-needs-to-die.html)
+
+## Img SrcSet Polyfill
+
+See [the specification][spec] for the reference algorithm.
+
+See [repo]: https://github.com/borismus/srcset-polyfill
+
+### Usage
+
+Use the `srcset` attribute of `<img>` elements. For example:
+
+    <img alt="The Breakfast Combo"
+         src="banner.jpeg"
+         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
+                 banner-phone-HD.jpeg 100w 2x"/>
+
+
+Include `srcset.min.js` in your page.
+
+*View helper*
+
+* `imgset_tag src, srcset, options = {}` (alias `imageset_tag`)
+
+```haml
+= imgset_tag "banner.jpeg", "banner-HD.jpeg 2x, banner-phone.jpeg 100w,banner-phone-HD.jpeg 100w 2x", alt: "The Breakfast Combo"
+```
+
+outputs the HTML code shown above.
+
+If you leave out the srcset argument it will fallback to a single src image
+
+```haml
+= imgset_tag "banner.jpeg", alt: "The Breakfast Combo"
+```
+
+Same as
+
+```haml
+= image_tag "banner.jpeg", alt: "The Breakfast Combo"
+```
+
+### Assets
+
+The gem includes srcset javascript assets that are automatically available for the asset pipeline. In your `application.js` manifest file require:
+
+* `srcset.min.js` (prod)
+* `srcset.js` (dev/test)
+
+### Open questions
+
+- How to reliably check for srcset support in the browser (so as to not
+  attempt to polyfill if it's not necessary?)
+- Is it safe to use `-webkit-transform` to scale things?
+- Is it worth falling back to `-webkit-image-set` if available?
+
+[spec]: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates
 
 ## Contributing to picturefill-rails
  

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.2.1

data/lib/picturefill/view_helper.rb

@@ -1,5 +1,24 @@
 module Picturefill
   module ViewHelper
+    def imgset_tag src, srcset = nil, options = {}
+      options.merge!(:src => src)
+      options.merge!(:srcset => srcset) if srcset
+      content_tag :img, nil, options
+    end
+    alias_method :imageset_tag, :imgset_tag
+
+    def picture_tag alt = nil
+      options = {}
+      options.merge alt: alt if alt
+      content_tag :picture, nil, options
+    end
+
+    def source_tag src, *args
+      options = args.extract_options!
+      media = args.first.to_s if args.first.kind_of?(String) || args.first.kind_of?(Fixnum)      
+      picture_src src, media, options.merge(tag: :source)
+    end
+
     def picturefill options = {}, &block
       opts = {}
       alt = options.delete :alt
@@ -17,6 +36,7 @@ module Picturefill
       options = args.extract_options!
       media = args.first.to_s if args.first.kind_of?(String) || args.first.kind_of?(Fixnum)
 
+      tag = options[:tag] || :div
       ratio_opt = options.delete(:ratio)
       media_opt = Picturefill::ViewHelper.extract media unless media.blank? 
 
@@ -43,7 +63,7 @@ module Picturefill
       options.merge! :"data-media" => media_opt unless auto_ratio_tag || media_opt.blank?
       options.merge! :"data-src" => src      
 
-      content_tag(:div, nil, options) + next_content
+      content_tag(tag, nil, options) + next_content
     end
 
     def picture_fallback src, options = {}

data/picturefill-rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "picturefill-rails"
-  s.version = "0.1.0"
+  s.version = "0.2.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Kristian Mandrup"]
-  s.date = "2012-08-16"
+  s.date = "2012-08-29"
   s.description = "Use picturefill with Rails :)"
   s.email = "kmandrup@gmail.com"
   s.extra_rdoc_files = [
@@ -30,7 +30,21 @@ Gem::Specification.new do |s|
     "lib/picturefill/view_helper.rb",
     "picturefill-rails.gemspec",
     "spec/picturefill/view_helper_spec.rb",
-    "spec/spec_helper.rb"
+    "spec/spec_helper.rb",
+    "spec/srcset/banner-HD.jpeg",
+    "spec/srcset/banner-phone-HD.jpeg",
+    "spec/srcset/banner-phone.jpeg",
+    "spec/srcset/banner.jpeg",
+    "spec/srcset/index.html",
+    "spec/srcset/tests/index.html",
+    "spec/srcset/tests/srcset-tests.js",
+    "spec/srcset/view_helper_spec.rb",
+    "vendor/assets/javascripts/jquery-picture.js",
+    "vendor/assets/javascripts/jquery-picture.min.js",
+    "vendor/assets/javascripts/picturefill.js",
+    "vendor/assets/javascripts/picturefill/matchmedia.js",
+    "vendor/assets/javascripts/srcset.js",
+    "vendor/assets/javascripts/srcset.min.js"
   ]
   s.homepage = "http://github.com/kristianmandrup/picturefill-rails"
   s.licenses = ["MIT"]

data/spec/srcset/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Srcset Polyfill Demo</title>
+    <script src="../../vendor/assets/javascripts/srcset.js"></script>
+    <style>
+      body { background: gray; }
+    </style>
+  </head>
+
+  <div id="container"><img alt="The Breakfast Combo"
+         src="banner.jpeg"
+         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></div>
+  </body>
+</html>
+

data/spec/srcset/tests/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Srcset Polyfill Unit tests</title>
+    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+    <script src="http://code.jquery.com/qunit/qunit-git.js"></script>
+    <script src="../../../vendor/assets/javascripts/srcset.js"></script>
+    <script src="srcset-tests.js"></script>
+  </head>
+
+  <h1><img alt="The Breakfast Combo"
+         src="banner.jpeg"
+         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1>
+
+
+  <body>
+    <h1 id="qunit-header">Srcset Polyfill Unit Tests</h1>
+    <h2 id="qunit-banner"></h2>
+    <div id="qunit-testrunner-toolbar"></div>
+    <h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+    <div id="qunit-fixture">test markup, will be hidden</div>
+
+    <div id="test">
+    </div>
+  </body>
+</html>
+

data/spec/srcset/tests/srcset-tests.js

@@ -0,0 +1,100 @@
+module('srcset validation');
+
+test('valid image candidate strings validate', function() {
+  var s1 = new SrcsetInfo({src: 'pear.jpeg', srcset: 'pear-mobile.jpeg'});
+  ok(s1.isValid, 'simple image candidates without descriptors understood.');
+  var s2 = new SrcsetInfo({src: 'pear.jpeg', srcset: 'pear-mobile.jpeg 720w'});
+  ok(s2.isValid, 'simple image candidates understood.');
+  var s3 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 1.1x'});
+  ok(s3.isValid, 'simple image candidates understood.');
+  var s4 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w'});
+  ok(s4.isValid, 'compound image candidates understood.');
+  var s5 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x'});
+  ok(s5.isValid, 'complex compound image candidates understood.');
+});
+
+test('invalid image candidate strings do not validate', function() {
+  var s1 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 720k, pear-tablet.jpeg 1280w'});
+  ok(!s1.isValid, 'unknown descriptor units rejected');
+  var s2 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 7.2w, pear-tablet.jpeg 1280w'});
+  ok(!s2.isValid, 'non-integer widths rejected.');
+});
+
+module('srcset parsing');
+
+test('single image declarations set to the right defaults', function() {
+  var s1 = new SrcsetInfo({srcset: 'pear-mobile.jpeg'});
+  var img = s1.imageCandidates[0];
+  equal(img.x, 1, 'default density set');
+  equal(img.w, Infinity, 'default width set');
+  equal(img.h, Infinity, 'default height set');
+});
+
+test('single image declarations parse correctly', function() {
+  var s1 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 720w'});
+  var img = s1.imageCandidates[0];
+  equal(img.src, 'pear-mobile.jpeg', 'image src validates');
+  equal(img.w, 720, 'width set');
+});
+
+test('multiple image candidates parse correctly', function() {
+  var s1 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1.5x'});
+  equal(s1.imageCandidates.length, 3, '3 image candidates found');
+  var img = s1.imageCandidates[2];
+  equal(img.x, 1.5, 'last image candidate density is 1.5');
+});
+
+test('repeated values for image candidates are ignored', function() {
+  var s1 = new SrcsetInfo({srcset: 'pear-mobile.jpeg 720w, pear-tablet.jpeg 720w'});
+  equal(s1.imageCandidates.length, 1, '1 image candidate found');
+  var img = s1.imageCandidates[0];
+  equal(img.src, 'pear-mobile.jpeg', 'last candidate ignored.');
+});
+
+
+module('image candidate selection');
+
+test('simple srcset picks correct image candidate', function() {
+  var old = new ViewportInfo();
+  old.setForTesting({w: 2000, h: 1000, x: 1});
+  var s1 = new SrcsetInfo({src: 'banner.jpeg', srcset: 'banner-HD.jpeg 2x'});
+  var img = old.getBestImage(s1);
+  equal(img.src, 'banner.jpeg', 'picked right image');
+  var hd = new ViewportInfo();
+  hd.setForTesting({w: 2000, h: 1000, x: 2});
+  var img = hd.getBestImage(s1);
+  equal(img.src, 'banner-HD.jpeg', 'picked right image');
+});
+
+test('ambiguous srcset picks best image candidate', function() {
+  var vp = new ViewportInfo();
+  vp.setForTesting({w: 500, h: 500});
+  var s1 = new SrcsetInfo({src: 'banner.jpeg',
+                        srcset: 'banner-wide.jpeg 300w 1000h, banner-tall.jpeg 1000w 300h, banner.jpeg'});
+  var img = vp.getBestImage(s1);
+  equal(img.src, 'banner.jpeg', 'makes sense.');
+});
+
+test('complex srcset picks best image candidate', function() {
+  var mobile = new ViewportInfo();
+  mobile.setForTesting({w: 320, h: 480, x: 2});
+  var s1 = new SrcsetInfo({src: 'banner.jpeg', srcset: 'banner-HD.jpeg 2x, banner-phone.jpeg 400w, banner-phone-HD.jpeg 400w 2x'});
+  var img = mobile.getBestImage(s1);
+  equal(img.src, 'banner-phone-HD.jpeg', 'picked best image for phone');
+  var desktop = new ViewportInfo();
+  desktop.setForTesting({w: 1440, h: 1280, x: 2});
+  var img = desktop.getBestImage(s1);
+  equal(img.src, 'banner-HD.jpeg', 'picked best image for desktop');
+  var old = new ViewportInfo();
+  old.setForTesting({w: 320, h: 480, x: 1});
+  var img = old.getBestImage(s1);
+  equal(img.src, 'banner-phone.jpeg', 'picked best image for desktop');
+});
+
+test('john mellor test', function() {
+  var mobile = new ViewportInfo();
+  mobile.setForTesting({w: 320, h: 480, x: 2.1});
+  var s1 = new SrcsetInfo({srcset: 'ipad1.jpg 1024w, iphone4.jpg 320w 2x'});
+  var img = mobile.getBestImage(s1);
+  equal(img.src, 'iphone4.jpg', 'picked best image for phone');
+});

data/spec/srcset/view_helper_spec.rb

@@ -0,0 +1,35 @@
+require 'spec_helper'
+
+describe Picturefill::ViewHelper do
+  include ControllerTestHelpers,
+          Picturefill::ViewHelper
+
+  describe '#imgset_tag' do
+    context 'no arguments' do
+      specify do
+        expect { imgset_tag }.to raise_error
+      end
+    end
+
+    context 'one argument' do
+      specify do
+        output = imgset_tag('hello.jpg')
+        output.should  == "<img src=\"hello.jpg\"></img>"
+      end
+    end
+
+    context 'alt option' do
+      it "should add the data-alt atribute" do
+        output = imgset_tag "banner.jpeg", "banner-HD.jpeg 2x, banner-phone.jpeg 100w,banner-phone-HD.jpeg 100w 2x"
+        output.should == "<img src=\"banner.jpeg\" srcset=\"banner-HD.jpeg 2x, banner-phone.jpeg 100w,banner-phone-HD.jpeg 100w 2x\"></img>"
+      end
+    end
+
+    context 'alt option and block' do
+      it "should add a piture src" do
+        output = imgset_tag "banner.jpeg", "banner-HD.jpeg 2x, banner-phone.jpeg 100w,banner-phone-HD.jpeg 100w 2x", alt: "The Breakfast Combo"
+        output.should == "<img alt=\"The Breakfast Combo\" src=\"banner.jpeg\" srcset=\"banner-HD.jpeg 2x, banner-phone.jpeg 100w,banner-phone-HD.jpeg 100w 2x\"></img>"
+      end
+    end
+  end
+end

data/vendor/assets/javascripts/jquery-picture.js

@@ -0,0 +1,241 @@
+/**
+ * jQuery Picture
+ * http://jquerypicture.com
+ * http://github.com/Abban/jQuery-Picture
+ * 
+ * May 2012
+ * 
+ * @version 0.9
+ * @author Abban Dunne http://abandon.ie
+ * @license MIT
+ * 
+ * jQuery Picture is a plugin to add support for responsive images to your layouts.
+ * It supports both figure elements with some custom data attributes and the new
+ * proposed picture format. This plugin will be made redundant when the format is
+ * approved and implemented by browsers. Lets hope that happens soon. In the meantime
+ * this plugin will be kept up to date with latest developments.
+ * 
+ */
+(function($){
+
+  $.fn.picture = function(args){
+
+    var defaults = {
+
+      container : null
+
+        };
+
+    var settings = $.extend({}, defaults, args);
+
+    this.each(function(){
+
+      var breakpoints = new Array();
+
+      var windowWidth, currentMedia, element, timeoutOffset;
+
+      // Check the device pixel ratio
+      var PixelRatio = 1;
+      if(window.devicePixelRatio !== undefined) PixelRatio = window.devicePixelRatio;
+
+      // Save off the element so it can be easily used inside a function
+      element = $(this);
+
+      // Initialise the images
+      getCurrentMedia(true);
+
+      // Only call the image resize function 200ms after window stops being resized
+      timeoutOffset = false;
+
+      $(window).resize(function(){
+
+        if(timeoutOffset !== false)
+          clearTimeout(timeoutOffset);
+
+        timeoutOffset = setTimeout(getCurrentMedia, 200);
+
+      });
+
+
+      /**
+       * getCurrentMedia
+       * 
+       * Checks the window width off the media query types and selects the current one.
+       * Calls the setPicture or setFigure function to set the image.
+       * 
+       */
+      function getCurrentMedia(init){
+
+        if(init){
+
+          if(element.get(0).tagName.toLowerCase() == 'figure'){
+
+            var mediaObj = element.data();
+
+            $.each(mediaObj, function(media){
+
+              var num;
+
+              num = media.replace(/[^\d.]/g, '');
+
+              if(num)
+                breakpoints.push(num);
+
+            });
+
+          }else{
+
+            element.find('source').each(function(){
+
+              var media, num;
+
+              media = $(this).attr('media');
+
+              if(media){
+
+                num = media.replace(/[^\d.]/g, '');
+
+                breakpoints.push(num);
+              }
+
+            });
+
+          }
+
+        }
+
+        var c = 0;
+
+        // Check if user defined container, otherwise take window
+        if (settings.container == null){
+
+          windowWidth = ($(window).width()) * PixelRatio;
+
+        }else{
+
+          windowWidth = ($(settings.container).width()) * PixelRatio;
+
+        }
+
+        // Set the c variable to the current media width
+        $.each(breakpoints, function(i,v){
+
+          if(parseInt(windowWidth) >= parseInt(v) && parseInt(c) <= parseInt(v))
+            c = v;
+
+        });
+
+        if(currentMedia !== c){
+          currentMedia = c;
+
+          if(element.get(0).tagName.toLowerCase() == 'figure')
+            setFigure();
+          else
+            setPicture();
+        }
+
+      }
+
+
+      /**
+       * setPicture
+       * 
+       * Pulls the image src and media attributes from the source tags and sets
+       * the src of the enclosed img tag to the appropriate one.
+       * 
+       */
+      function setPicture(){
+
+        var sizes = new Object();
+
+        element.find('source').each(function(){
+
+          var media, path, num;
+          media = $(this).attr('media');
+          path = $(this).attr('src');
+
+          if(media)
+            num = media.replace(/[^\d.]/g, '');
+          else
+            num = 0;
+
+          sizes[num] = path;
+
+        });
+
+        if(element.find('img').length == 0){
+
+          var prep = '<img src="' + sizes[currentMedia] + '" style="' + element.attr('style') + '" alt="' + element.attr('alt') + '">';
+
+          if(element.find('a').length == 0){
+
+            element.append(prep);
+
+          }else{
+
+            element.find('a').append(prep);
+
+          }
+
+        }else{
+
+          element.find('img').attr('src', sizes[currentMedia]);
+
+        }
+
+      }
+
+
+      /**
+       * setFigure
+       * 
+       * Pulls the image src and and media values from the data attributes
+       * and sets the src of the enclosed img tag to the appropriate one.
+       * 
+       */
+      function setFigure(){
+
+        var sizes = new Object();
+
+        var mediaObj = element.data();
+
+        $.each(mediaObj, function(media, path){
+
+          var num;
+
+          num = media.replace(/[^\d.]/g, '');
+
+          if(!num)
+            num = 0;
+
+          sizes[num] = path;
+
+        });
+
+        if(element.find('img').length == 0){
+
+          var prep = '<img src="' + sizes[currentMedia] + '" alt="' + element.attr('title') + '">';
+
+          if(element.find('a').length == 0){
+
+            element.prepend(prep);
+
+          }else{
+
+            element.find('a').prepend(prep);
+
+          }
+
+        }else{
+
+          element.find('img').attr('src', sizes[currentMedia]);
+
+        }
+
+      }
+
+    });
+
+  };
+
+})(jQuery);