responsive_image_tag 0.1.1 → 0.1.2

data/Gemfile

@@ -11,4 +11,5 @@ group :development do
   gem "jeweler", "~> 1.6.4"
   gem "rcov", ">= 0"
   gem "actionpack"
+  gem "nokogiri"
 end

data/Gemfile.lock

@@ -27,6 +27,7 @@ GEM
       git (>= 1.2.5)
       rake
     minitest (2.4.0)
+    nokogiri (1.5.0)
     rack (1.2.3)
     rack-mount (0.6.14)
       rack (>= 1.0.0)
@@ -44,4 +45,5 @@ DEPENDENCIES
   bundler (~> 1.0.0)
   jeweler (~> 1.6.4)
   minitest
+  nokogiri
   rcov

data/README.rdoc

@@ -46,6 +46,9 @@ After that, you can use the new tag like so, in a view:
 
 == Copyright
 
-Copyright (c) 2011 futurechimp. See LICENSE.txt for
-further details.
+Copyright (c) 2011 Headlondon, http://www.headlondon.com
+
+Authors: Dave Hrycyszyn, Mairead Buchan
+
+See LICENSE.txt for further details.
 

data/VERSION

@@ -1 +1 @@
-0.1.1
+0.1.2

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

@@ -1,3 +1,6 @@
+/*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
@@ -5,8 +8,9 @@
 //images are sent to mobile devices or any device smaller than 768px. 
 
 //The noscript tags are then removed from the page.
-var responsiveImageTag = new function() {
-    this.replaceInitialImages = function() {
+var responsiveImageTag = {
+	
+    replaceInitialImages:function() {
 		var platform = "desktop";
 		var responsiveImages = $$(".responsivize");
 		var i, 
@@ -22,6 +26,8 @@ var responsiveImageTag = new function() {
 			var noScriptElem = responsiveImages[i];
 			var img = window.document.createElement("img");
 
+			img.alt = noScriptElem.getAttribute("data-alttext");
+
 			if(platform === "mobile"){
 				img.src = noScriptElem.getAttribute("data-mobilesrc");
 			}else{
@@ -32,9 +38,10 @@ var responsiveImageTag = new function() {
 			noScriptElem.previous().appendChild(img);	
 			noScriptElem.style.display = "none";
 		}
-    };
-}
+    }
+};
+
 document.observe("dom:loaded", function() {
 	responsiveImageTag.replaceInitialImages();
-})
+});
 

data/lib/responsive_image_tag.rb

@@ -9,15 +9,26 @@ module ResponsiveImageTag
   def responsive_image_tag(small, big, options = {})
     output = tag "span", {:class => "img-placeholder"}
     output += tag "/span", nil, true
-    output += tag "noscript", {
-      "data-fullsrc" => image_path(big),
-      "data-mobilesrc" => image_path(small),
-      :class => "responsivize"}, true
+    output += tag "noscript", noscript_attributes(small, big, options), true  
     output += image_tag(small, options)
     output += tag "/noscript", nil, true
     output
   end
   
+  private 
+  
+  def noscript_attributes(small, big, options)
+    attrs = {
+      "data-fullsrc" => image_path(big),
+      "data-mobilesrc" => image_path(small),
+      :class => "responsivize"
+    }
+    unless options.nil? || options == {} || options[:alt].nil?
+      attrs.merge!(:alt => options[:alt])
+    end
+    attrs
+  end
+  
 end
 
 ActionView::Base.send(:include, ResponsiveImageTag) if defined?(ActionView::Base)

data/responsive_image_tag.gemspec

@@ -5,7 +5,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{responsive_image_tag}
-  s.version = "0.1.1"
+  s.version = "0.1.2"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Dave Hrycyszyn"]
@@ -48,12 +48,14 @@ Gem::Specification.new do |s|
       s.add_development_dependency(%q<jeweler>, ["~> 1.6.4"])
       s.add_development_dependency(%q<rcov>, [">= 0"])
       s.add_development_dependency(%q<actionpack>, [">= 0"])
+      s.add_development_dependency(%q<nokogiri>, [">= 0"])
     else
       s.add_dependency(%q<minitest>, [">= 0"])
       s.add_dependency(%q<bundler>, ["~> 1.0.0"])
       s.add_dependency(%q<jeweler>, ["~> 1.6.4"])
       s.add_dependency(%q<rcov>, [">= 0"])
       s.add_dependency(%q<actionpack>, [">= 0"])
+      s.add_dependency(%q<nokogiri>, [">= 0"])
     end
   else
     s.add_dependency(%q<minitest>, [">= 0"])
@@ -61,6 +63,7 @@ Gem::Specification.new do |s|
     s.add_dependency(%q<jeweler>, ["~> 1.6.4"])
     s.add_dependency(%q<rcov>, [">= 0"])
     s.add_dependency(%q<actionpack>, [">= 0"])
+    s.add_dependency(%q<nokogiri>, [">= 0"])
   end
 end
 

data/test/helper.rb

@@ -19,6 +19,7 @@ require 'responsive_image_tag'
 
 require 'active_support'
 require 'action_view'
+require 'nokogiri'
 
 class MiniTest::Unit::TestCase
 end

data/test/test_responsive_image_tag.rb

@@ -9,13 +9,23 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
         ENV["RAILS_ASSET_ID"] = ""
         view = ActionView::Base.new
         @tag = view.responsive_image_tag("small.jpg", "big.jpg")
+        @doc = Nokogiri::HTML.fragment(@tag)
+      end
+      
+      it "should write in one <span>" do
+        assert_equal 1, @doc.xpath('span').length
+      end
+      
+      it "should put a img-placeholder class on the <span>" do
+        span_class = @doc.xpath('span').first.attributes["class"]
+        assert_equal "img-placeholder", span_class.value
       end
 
       it "should write an <img> tag" do
-        @tag.must_match "img"
+        @tag.must_match "<img"
       end
 
-      it "should have a src attribute" do
+      it "should put a src attribute on <img" do
         @tag.must_match "src="
       end
 
@@ -31,26 +41,58 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
         @tag.must_match "data-fullsrc=\"/images/big.jpg\""
       end
       
-      describe "with an :alt option specified" do
+      describe "the noscript tag" do
         before do
-          view = ActionView::Base.new
-          @tag = view.responsive_image_tag("small.jpg", "big.jpg", :alt => "foo")
+          @noscript = @doc.xpath("noscript").first
         end
-        it "should have an alt attribute with a value of 'foo'" do
-          @tag.must_match "alt=\"foo\""
+      
+        it "should exist, once" do
+          assert_equal(1, @doc.xpath("noscript").length)
+        end
+      
+        it "should have a data-fullsrc attribute" do
+          assert @noscript.attributes["data-fullsrc"]
+        end
+        
+        it "should point data-fullsrc at the big image" do
+          assert_equal "/images/big.jpg",
+            @noscript.attributes["data-fullsrc"].value
+        end
+      
+        it "should have a data-mobilesrc attribute" do
+          assert @noscript.attributes["data-mobilesrc"]
+        end
+        
+        it "should point data-mobilesrc at the small image" do
+          assert_equal "/images/small.jpg",
+            @noscript.attributes["data-mobilesrc"].value
         end
-      end
       
-      describe "with ENV['RAILS_ASSET_ID'] set" do
+        it "should put the 'responsivize' class on the <noscript> tag" do
+          assert @noscript.attributes["class"]
+          assert @noscript.attributes["class"].value = "responsivize"
+        end
+        
+      end  
+      
+      describe "with an :alt option specified" do
         before do
-          ENV["RAILS_ASSET_ID"] = "images/"
           view = ActionView::Base.new
-          @tag = view.responsive_image_tag("small.jpg", "big.jpg")
+          @tag = view.responsive_image_tag(
+                    "small.jpg", "big.jpg", :alt => "foo")
+          @doc = Nokogiri::HTML.fragment(@tag)
         end
         
-        it "should prepend the correct asset path onto full-src" do
-          @tag.must_match "data-fullsrc=\"/images/big.jpg"
+        it "should put an :alt attribute on the <noscript> tag" do
+          noscript = @doc.xpath("noscript").first
+          assert noscript.attributes["alt"]
         end
+        
+        it "should put a value of 'foo' into the :alt" do
+          noscript = @doc.xpath("noscript").first
+          assert_equal "foo", noscript.attributes["alt"].value
+        end        
+        
       end
        
     end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: responsive_image_tag
 version: !ruby/object:Gem::Version 
-  hash: 25
+  hash: 31
   prerelease: 
   segments: 
   - 0
   - 1
-  - 1
-  version: 0.1.1
+  - 2
+  version: 0.1.2
 platform: ruby
 authors: 
 - Dave Hrycyszyn
@@ -92,6 +92,20 @@ dependencies:
   requirement: *id005
   prerelease: false
   name: actionpack
+- !ruby/object:Gem::Dependency 
+  type: :development
+  version_requirements: &id006 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  requirement: *id006
+  prerelease: false
+  name: nokogiri
 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.
 email: dave.hrycyszyn@headlondon.com
 executables: []