Permalink
Browse files

added vendor assets and included support for jquery picture

  • Loading branch information...
1 parent 831d2a5 commit 84d31c1394a8ddb1d3a5a637c1a8cc568f2c909c @kristianmandrup committed Aug 16, 2012
View
41 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.
View
2 VERSION
@@ -1 +1 @@
-0.1.0
+0.2.0
View
15 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 = {}
View
241 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);
View
18 vendor/assets/javascripts/jquery-picture.min.js
@@ -0,0 +1,18 @@
+/**
+ * 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(e){e.fn.picture=function(t){var n={container:null},r=e.extend({},n,t);this.each(function(){function a(o){if(o)if(s.get(0).tagName.toLowerCase()=="figure"){var a=s.data();e.each(a,function(e){var n;n=e.replace(/[^\d.]/g,"");n&&t.push(n)})}else s.find("source").each(function(){var n,r;n=e(this).attr("media");if(n){r=n.replace(/[^\d.]/g,"");t.push(r)}});var c=0;r.container==null?n=e(window).width()*u:n=e(r.container).width()*u;e.each(t,function(e,t){parseInt(n)>=parseInt(t)&&parseInt(c)<=parseInt(t)&&(c=t)});if(i!==c){i=c;s.get(0).tagName.toLowerCase()=="figure"?l():f()}}function f(){var t=new Object;s.find("source").each(function(){var n,r,i;n=e(this).attr("media");r=e(this).attr("src");n?i=n.replace(/[^\d.]/g,""):i=0;t[i]=r});if(s.find("img").length==0){var n='<img src="'+t[i]+'" style="'+s.attr("style")+'" alt="'+s.attr("alt")+'">';s.find("a").length==0?s.append(n):s.find("a").append(n)}else s.find("img").attr("src",t[i])}function l(){var t=new Object,n=s.data();e.each(n,function(e,n){var r;r=e.replace(/[^\d.]/g,"");r||(r=0);t[r]=n});if(s.find("img").length==0){var r='<img src="'+t[i]+'" alt="'+s.attr("title")+'">';s.find("a").length==0?s.prepend(r):s.find("a").prepend(r)}else s.find("img").attr("src",t[i])}var t=new Array,n,i,s,o,u=1;window.devicePixelRatio!==undefined&&(u=window.devicePixelRatio);s=e(this);a(!0);o=!1;e(window).resize(function(){o!==!1&&clearTimeout(o);o=setTimeout(a,200)})})}})(jQuery);
View
60 vendor/assets/javascripts/picturefill.js
@@ -0,0 +1,60 @@
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
+
+(function( w ){
+
+ // Enable strict mode
+ "use strict";
+
+ w.picturefill = function() {
+ var ps = w.document.getElementsByTagName( "div" );
+
+ // Loop the pictures
+ for( var i = 0, il = ps.length; i < il; i++ ){
+ if( ps[ i ].getAttribute( "data-picture" ) !== null ){
+
+ var sources = ps[ i ].getElementsByTagName( "div" ),
+ matches = [];
+
+ // See if which sources match
+ for( var j = 0, jl = sources.length; j < jl; j++ ){
+ var media = sources[ j ].getAttribute( "data-media" );
+ // if there's no media specified, OR w.matchMedia is supported
+ if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
+ matches.push( sources[ j ] );
+ }
+ }
+
+ // Find any existing img element in the picture element
+ var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+ if( matches.length ){
+ if( !picImg ){
+ picImg = w.document.createElement( "img" );
+ picImg.alt = ps[ i ].getAttribute( "data-alt" );
+ ps[ i ].appendChild( picImg );
+ }
+
+ picImg.src = matches.pop().getAttribute( "data-src" );
+ }
+ else if( picImg ){
+ ps[ i ].removeChild( picImg );
+ }
+ }
+ }
+ };
+
+ // Run on resize and domready (w.load as a fallback)
+ if( w.addEventListener ){
+ w.addEventListener( "resize", w.picturefill, false );
+ w.addEventListener( "DOMContentLoaded", function(){
+ w.picturefill();
+ // Run once only
+ w.removeEventListener( "load", w.picturefill, false );
+ }, false );
+ w.addEventListener( "load", w.picturefill, false );
+ }
+ else if( w.attachEvent ){
+ w.attachEvent( "onload", w.picturefill );
+ }
+
+}( this ));
View
2 vendor/assets/javascripts/picturefill/matchmedia.js
@@ -0,0 +1,2 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);

0 comments on commit 84d31c1

Please sign in to comment.