responsive_image_tag 0.2.6 → 0.3.0

data/README.rdoc

@@ -6,11 +6,11 @@ It's quite common today for web sites to be viewed on a wide range of devices, f
 
 Wouldn't it be nice if you could serve small images to mobile clients, and large images to desktop clients?  The HTML spec doesn't really allow for device-specific asset serving, but it can be done with a little dash of cleverness. The technique used here allows you to serve device-specific images, and not make two server requests (saving bandwidth and server load).
 
-We've packaged it up as a rubygem. 
+We've packaged it up as a rubygem.
 
 responsive_image_tag is a Rails helper which selects an image depending on the width of the current device. The <tt>screen.width</tt> is detected by javascript and then an image element is inserted in the page with a dynamically created <tt>src</tt> attribute.
 
-It works with Rails 2 and Rails 3, and there are javascript adapters for both jQuery and Prototype.  Pick your poison. 
+It works with Rails 2 and Rails 3, and there are javascript adapters for both jQuery and Prototype.  Pick your poison.
 
 == Motivation and approach
 
@@ -49,45 +49,53 @@ Put it in your Gemfile:
 Then install it:
 
  bundle install
- 
+
 There's a generator which copies a JavaScript file into place in <tt>public/javascripts</tt>.
 
 You can run it like this:
 
- 
-=== Rails 3
-
- rails g responsive_image_tag:jquery
 
-or 
+=== Rails 3
 
- rails g responsive_image_tag:prototype
+ rails g responsive_image_tag:copy_js
 
 === Rails 2
 
- script/generate jquery_responsive_image_tag
+ script/generate responsive_image_tag *Currently untested
+
+=== Padrino
 
-or
+ padrino g copy_rit_js
 
- script/generate prototype_responsive_image_tag
+ Options:
 
+ -d, [--js_destination] The destination path to copy the Javascript file too. Default: 'public/javascripts'
 
 == Usage
 
 You need to do two things. First, make sure that you include a reference to the JavaScript file in your layout:
 
- <%= javascript_include_tag "responsive-image-tag-jquery" %>
+ <%= javascript_include_tag "responsive-image-tag" %>
 
-or 
+After that, you can use the new tag like so, in a view:
 
- <%= javascript_include_tag "responsive-image-tag-prototype" %>
+ <%= responsive_image_tag("small.jpg", "big.jpg", :alt => "Alt text", :class => "css-class") %>
 
-After that, you can use the new tag like so, in a view:
+This will output HTML like so:
+
+  <span class="img-placeholder"></span>
+  <noscript data-fullsrc="big.jpg" data-mobilesrc="small.jpg" class="responsivize" data-alttext="Alt text" data-cssclass="css-class">
+    <img alt="Image reads deliver for today, inspire for tomorrow" class="scale-with-grid" src="big.jpg" />
+  </noscript>
+
+$(".responsivize").responsiveImageTag();
 
- <%= responsive_image_tag("small.jpg", "big.jpg") %>
+Optional CSS class for the images, otherwise it will add 'responsive'.
+
+$(".responsivize").responsiveImageTag({cssClass: "scale-with-grid"});
 
 == Contributing to responsive_image_tag
- 
+
 * Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet
 * Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
 * Fork the project

data/VERSION

@@ -1 +1 @@
-0.2.6
+0.3.0

data/generators/responsive_image_tag/responsive_image_tag_generator.rb

@@ -0,0 +1,11 @@
+class ResponsiveImageTagGenerator < Rails::Generator::Base
+
+  SOURCE = File.join("..", "..", "..", "lib", "responsive_image_tag", "generators", "templates", "responsive-image-tag.js")
+
+  def manifest
+    record do |m|
+        m.file SOURCE, "public/javascripts/responsive-image-tag.js"
+    end
+  end
+
+end

data/lib/generators/responsive_image_tag/{jquery_generator.rb → copy_js_generator.rb}

@@ -1,20 +1,18 @@
-# encoding: utf-8
-
 module ResponsiveImageTag
   module Generators
-    class JqueryGenerator < Rails::Generators::Base
+    class CopyJsGenerator < Rails::Generators::Base
       desc 'Creates a javascript file which takes care of responsive images for you'
 
       def self.source_root
         File.expand_path("../templates", __FILE__)
       end
 
-      def create_javascript_file
-        template 'responsive-image-tag-jquery.js', 
+      def copy_javascript_file
+        template 'responsive-image-tag.js',
           File.join(
-            'public', 'javascripts', 'responsive-image-tag-jquery.js')
+            'public', 'javascripts', 'responsive-image-tag.js')
       end
-      
+
     end
   end
 end

data/lib/generators/responsive_image_tag/{padrino_rit.rb → padrino_copy_rit_js.rb}

@@ -3,15 +3,14 @@ module Padrino
     ##
     # Defines the generator for installing the Jquery Responsive Image Tag script.
     #
-    class Rit < Thor::Group
-
+    class CopyRitJs < Thor::Group
       # Add this generator to our padrino-gen
-      Padrino::Generators.add_generator(:rit, self)
+      Padrino::Generators.add_generator(:copy_rit_js, self)
 
       # Define the source template root and themes.
       def self.source_root; File.expand_path(File.dirname(__FILE__)); end
       # Defines the "banner" text for the CLI.
-      def self.banner; "padrino g rit"; end
+      def self.banner; "padrino g copy_rit_js"; end
 
       # Include related modules
       include Thor::Actions
@@ -21,13 +20,11 @@ module Padrino
       desc "Description:\n\n\tpadrino g rit - Creates a JavaScript file which takes care of responsive images for you"
 
       class_option :js_destination, :aliases => "-d", :desc => "The destination path to copy the Javascript file too", :default => 'public/javascripts', :type => :string
-      class_option :js_type, :aliases => "-t", :desc => "The type of Javascript file to use [jquery or prototype]", :default => 'jquery', :type => :string
 
-      def create_javascript_file
-        template "templates/responsive-image-tag-#{options[:js_type]}.js",
-          destination_root(options[:js_destination] + "/responsive-image-tag-#{options[:js_type]}.js")
+      def copy_javascript_file
+        template "templates/responsive-image-tag.js",
+          destination_root(options[:js_destination] + "/responsive-image-tag.js")
       end
-
     end
   end
 end

data/lib/generators/responsive_image_tag/templates/responsive-image-tag.js

@@ -0,0 +1,57 @@
+(function($) {
+  if(!$.responsiveImageTag){
+    $.responsiveImageTag = new Object();
+  };
+
+  $.responsiveImageTag = function(el, options) {
+    // To avoid scope issues, use 'base' instead of 'this'
+    // to reference this class from internal events and functions.
+    var base = this;
+
+    // Access to jQuery and DOM versions of element
+    base.$el = $(el);
+    base.el = el;
+    base.el.data('responsiveImageTag', base);
+    base.platform = "desktop";
+    base.options = $.extend({}, $.responsiveImageTag.defaultOptions, options);
+
+    //Public functions
+    base.init = function() {
+      // Test for available width in current browser window
+      // 767px, anything smaller than an ipad is considered mobile
+      if(screen.width <= 767){
+        base.platform = "mobile";
+      }
+
+      var $img = $("<img/>", {
+                    "alt": base.$el.attr("data-alttext"),
+                    "class": base.$el.attr("data-cssclass")
+                  });
+
+      if(base.platform === "mobile"){
+        $img.attr("src", base.$el.attr("data-mobilesrc"));
+      }else{
+        $img.attr("src", base.$el.attr("data-fullsrc"));
+      }
+
+      base.$el.prev().append($img);
+      base.$el.hide();
+    };
+
+    // Call init function
+    base.init();
+  };
+
+  $.responsiveImageTag.defaultOptions = {
+    // Currently no options
+  };
+
+  $.fn.responsiveImageTag = function(options) {
+    return this.each(function() {
+       (new $.responsiveImageTag($(this), options));
+    });
+  };
+
+  //Private function
+
+})(jQuery);

data/lib/responsive_image_tag.rb

@@ -1,14 +1,12 @@
 begin
   require 'padrino-gen'
-  # debugger
-  Padrino::Generators.load_paths << Dir[File.dirname(__FILE__) + '/generators/responsive_image_tag/padrino_rit.rb']
+  Padrino::Generators.load_paths << Dir[File.dirname(__FILE__) + '/generators/responsive_image_tag/padrino_copy_rit_js.rb']
 rescue LoadError
   # Fail silently
   puts "Error"
 end
 
 module ResponsiveImageTag
-
   # Emits the special (and somewhat ugly) markup for our responsive image
   # tag.
   #
@@ -38,7 +36,6 @@ module ResponsiveImageTag
     end
     attrs
   end
-
 end
 
-ActionView::Base.send(:include, ResponsiveImageTag) if defined?(ActionView::Base)
+ActionView::Base.send(:include, ResponsiveImageTag) if defined?(ActionView::Base)

data/responsive_image_tag.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "responsive_image_tag"
-  s.version = "0.2.6"
+  s.version = "0.3.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Dave Hrycyszyn"]
-  s.date = "2012-10-02"
+  s.date = "2012-10-03"
   s.description = "Allows you to specify two images in a responsive_image_tag, and includes a javascript generator which will rewrite the DOM, requesting the correct image based on the screen size of the current client device."
   s.email = "dave.hrycyszyn@headlondon.com"
   s.extra_rdoc_files = [
@@ -24,14 +24,11 @@ Gem::Specification.new do |s|
     "README.rdoc",
     "Rakefile",
     "VERSION",
-    "generators/responsive_image_tag/jquery_responsive_image_tag_generator.rb",
-    "generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb",
+    "generators/responsive_image_tag/responsive_image_tag_generator.rb",
     "generators/responsive_image_tag/templates/README",
-    "lib/generators/responsive_image_tag/jquery_generator.rb",
-    "lib/generators/responsive_image_tag/padrino_rit.rb",
-    "lib/generators/responsive_image_tag/prototype_generator.rb",
-    "lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js",
-    "lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js",
+    "lib/generators/responsive_image_tag/copy_js_generator.rb",
+    "lib/generators/responsive_image_tag/padrino_copy_rit_js.rb",
+    "lib/generators/responsive_image_tag/templates/responsive-image-tag.js",
     "lib/responsive_image_tag.rb",
     "responsive_image_tag.gemspec",
     "test/helper.rb",

data/test/test_responsive_image_tag.rb

@@ -72,7 +72,6 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
           assert @noscript.attributes["class"]
           assert @noscript.attributes["class"].value = "responsivize"
         end
-
       end
 
       describe "with an :alt option specified" do
@@ -115,4 +114,4 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
 
     end
   end
-end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: responsive_image_tag
 version: !ruby/object:Gem::Version
-  version: 0.2.6
+  version: 0.3.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-10-02 00:00:00.000000000Z
+date: 2012-10-03 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minitest
-  requirement: &2169114280 !ruby/object:Gem::Requirement
+  requirement: &2165304520 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *2169114280
+  version_requirements: *2165304520
 - !ruby/object:Gem::Dependency
   name: bundler
-  requirement: &2169113760 !ruby/object:Gem::Requirement
+  requirement: &2165303700 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -32,10 +32,10 @@ dependencies:
         version: 1.0.0
   type: :development
   prerelease: false
-  version_requirements: *2169113760
+  version_requirements: *2165303700
 - !ruby/object:Gem::Dependency
   name: jeweler
-  requirement: &2169113240 !ruby/object:Gem::Requirement
+  requirement: &2165302480 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -43,10 +43,10 @@ dependencies:
         version: 1.6.4
   type: :development
   prerelease: false
-  version_requirements: *2169113240
+  version_requirements: *2165302480
 - !ruby/object:Gem::Dependency
   name: rcov
-  requirement: &2169112420 !ruby/object:Gem::Requirement
+  requirement: &2165301480 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -54,10 +54,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *2169112420
+  version_requirements: *2165301480
 - !ruby/object:Gem::Dependency
   name: actionpack
-  requirement: &2169109680 !ruby/object:Gem::Requirement
+  requirement: &2165300340 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -65,10 +65,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *2169109680
+  version_requirements: *2165300340
 - !ruby/object:Gem::Dependency
   name: nokogiri
-  requirement: &2169108780 !ruby/object:Gem::Requirement
+  requirement: &2165299280 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -76,7 +76,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *2169108780
+  version_requirements: *2165299280
 description: Allows you to specify two images in a responsive_image_tag, and includes
   a javascript generator which will rewrite the DOM, requesting the correct image
   based on the screen size of the current client device.
@@ -94,14 +94,11 @@ files:
 - README.rdoc
 - Rakefile
 - VERSION
-- generators/responsive_image_tag/jquery_responsive_image_tag_generator.rb
-- generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb
+- generators/responsive_image_tag/responsive_image_tag_generator.rb
 - generators/responsive_image_tag/templates/README
-- lib/generators/responsive_image_tag/jquery_generator.rb
-- lib/generators/responsive_image_tag/padrino_rit.rb
-- lib/generators/responsive_image_tag/prototype_generator.rb
-- lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js
-- lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js
+- lib/generators/responsive_image_tag/copy_js_generator.rb
+- lib/generators/responsive_image_tag/padrino_copy_rit_js.rb
+- lib/generators/responsive_image_tag/templates/responsive-image-tag.js
 - lib/responsive_image_tag.rb
 - responsive_image_tag.gemspec
 - test/helper.rb
@@ -121,7 +118,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1939109034445376453
+      hash: -1544391004788800078
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:

data/generators/responsive_image_tag/jquery_responsive_image_tag_generator.rb

@@ -1,11 +0,0 @@
-class JqueryResponsiveImageTagGenerator < Rails::Generator::Base
-
-  SOURCE = File.join("..", "..", "..", "lib", "generators", "responsive_image_tag", "templates", "responsive-image-tag-jquery.js")
-
-  def manifest
-    record do |m|
-        m.file SOURCE, "public/javascripts/responsive-image-tag-jquery.js"
-    end
-  end
-
-end

data/generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb

@@ -1,11 +0,0 @@
-class PrototypeResponsiveImageTagGenerator < Rails::Generator::Base
-
-  SOURCE = File.join("..", "..", "..", "lib", "generators", "responsive_image_tag", "templates", "responsive-image-tag-prototype.js")
-
-  def manifest
-    record do |m|
-        m.file SOURCE, "public/javascripts/responsive-image-tag-prototype.js"
-    end
-  end
-
-end

data/lib/generators/responsive_image_tag/prototype_generator.rb

@@ -1,20 +0,0 @@
-# encoding: utf-8
-
-module ResponsiveImageTag
-  module Generators
-    class PrototypeGenerator < Rails::Generators::Base
-      desc 'Creates a javascript file which takes care of responsive images for you'
-
-      def self.source_root
-        File.expand_path("../templates", __FILE__)
-      end
-
-      def create_javascript_file
-        template 'responsive-image-tag-prototype.js', 
-          File.join(
-            'public', 'javascripts', 'responsive-image-tag-prototype.js')
-      end
-      
-    end
-  end
-end

data/lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js

@@ -1,50 +0,0 @@
-/*jslint browser:true */
-/*global $, $$*/
-
-// responsiveImageTag detects all <noscript> elements on the page with a class
-// of 'responsivize'.
-
-// It retrieves both HTML5 data attributes and then creates an image tag with
-// the correct source destination depending on the available screen width of
-// the user's device. This way smaller images are sent to mobile devices or
-// any device smaller than 768px.
-
-// The <noscript> tags are then removed from the page.
-var responsiveImageTag = {
-
-    replaceInitialImages:function() {
-		var platform = "desktop";
-		var responsiveImages = $(".responsivize");
-		var i,
-			noOfresponsiveImages = responsiveImages.length;
-
-			// Test for available width in current browser window
-			// 767px, anything smaller than an ipad is considered mobile
-		if(screen.width <= 767){
-			platform = "mobile";
-		}
-
-		//set initial source element on image
-		for(i = 0; i < noOfresponsiveImages; i = i + 1 ){
-			var noScriptElem = $(responsiveImages[i]);
-			var img = window.document.createElement("img");
-
-			img.alt = noScriptElem.attr("data-alttext");
-			img.className = noScriptElem.attr("data-cssclass");
-
-			if(platform === "mobile"){
-				img.src = noScriptElem.attr("data-mobilesrc");
-			}else{
-				img.src = noScriptElem.attr("data-fullsrc");
-			}
-
-			noScriptElem.prev().append(img);
-			noScriptElem.hide();
-		}
-    }
-};
-
-$(function() {
-	responsiveImageTag.replaceInitialImages();
-});
-

data/lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js

@@ -1,50 +0,0 @@
-/*jslint browser:true */
-/*global $, $$*/
-
-// responsiveImageTag detects all noscript elements on the page with a class
-// of 'responsivize'.
-
-// It retrieves both HTML5 data attributes and then creates an image tag with
-// the correct source destination depending on the available screen width of
-// the user'ss device. This way smaller images are sent to mobile devices or
-// any device smaller than 768px.
-
-// The <noscript> tags are then removed from the page.
-var responsiveImageTag = {
-
-    replaceInitialImages:function() {
-		var platform = "desktop";
-		var responsiveImages = $$(".responsivize");
-		var i,
-			noOfresponsiveImages = responsiveImages.length;
-
-		// Test for available width in current browser window
-		// 767px, anything smaller than an ipad is considered mobile
-		if(screen.width <= 767){
-			platform = "mobile";
-		}
-
-		// Set initial source element on image
-		for(i = 0; i < noOfresponsiveImages; i = i + 1 ){
-			var noScriptElem = responsiveImages[i];
-			var img = window.document.createElement("img");
-
-			img.alt = noScriptElem.getAttribute("data-alttext");
-			img.className = noScriptElem.getAttribute("data-cssclass");
-
-			if(platform === "mobile"){
-				img.src = noScriptElem.getAttribute("data-mobilesrc");
-			}else{
-				img.src = noScriptElem.getAttribute("data-fullsrc");
-			}
-
-			noScriptElem.previous().appendChild(img);
-			noScriptElem.style.display = "none";
-		}
-    }
-};
-
-document.observe("dom:loaded", function() {
-	responsiveImageTag.replaceInitialImages();
-});
-