added vendor assets and included support for jquery picture

README.md

@@ -66,6 +66,47 @@ A number of specs are included which all pass and should ensure that the view he
 
 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)
 
+## Assets
+
+The gem now also 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.
+
+Assets `jquery-picture.min.js` and `jquery-picture.js` are included.
+
+The view helper includes the view helper methods:
+
+* `picture(alt)`
+* `source(src, media, options = {})
+
+```haml
+= picture 'A giant stone face at The Bayon temple in Angkor Thom, Cambodia' do
+  = source 'small.jpg', ratio: 'x2'
+  = source 'medium.jpg', "400", ratio: 'x2'
+  = source 'large.jpg',  "800", ratio: 'x2'  
+  # ...
+  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon 
+```
+
+And to enable:
+
+```javascript
+$(function(){
+    $('picture').picture();
+});
+```
+
+## Random Notes
+
+[critique of picturefill](http://oscargodson.com/posts/picturefill-needs-to-die.html)
+
 ## Contributing to picturefill-rails
 
 * Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.

VERSION

@@ -1 +1 @@
-0.1.0
+0.2.0

lib/picturefill/view_helper.rb

@@ -1,5 +1,17 @@
 module Picturefill
   module ViewHelper
+    def picture alt = nil
+      options = {}
+      options.merge alt: alt if alt
+      content_tag :picture, nil, options
+    end
+
+    def source 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 +29,7 @@ def picture_src src, *args
       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 +56,7 @@ def picture_src src, *args
       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 = {}

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);