responsive_image_tag 0.1.0 → 0.1.1

data/README.rdoc

@@ -1,6 +1,38 @@
 = responsive_image_tag
 
-Description goes here.
+== Installation
+
+Put it in your Gemfile:
+
+ gem 'responsive_image_tag'
+
+Then install it:
+
+ bundle install
+ 
+There's a generator which copies a JavaScript file into place in @public/javascripts@.
+
+You can run it like this:
+
+ 
+=== Rails 3
+
+ rails generate responsive_image_tag
+
+=== Rails 2
+
+ script/generate responsive_image_tag
+
+
+== 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" %>
+ 
+After that, you can use the new tag like so, in a view:
+
+ <%= responsive_image_tag("small.jpg", "big.jpg") %>
 
 == Contributing to responsive_image_tag
  

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.1.1

data/lib/rails/generators/responsive_image_tag/javascript/javascript_generator.rb

@@ -11,7 +11,7 @@ module ResponsiveImageTag
 
       def create_javascript_file
         template 'responsive-image-tag.js', 
-                  File.join('javascript', 'responsive-image-tag.js')
+                File.join('public', 'javascripts', 'responsive-image-tag.js')
       end
       
     end

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

@@ -1,18 +1,40 @@
-function replaceImages(){
-		
+//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 users 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 = new function() {
+    this.replaceInitialImages = function() {
+		var platform = "desktop";
 		var responsiveImages = $$(".responsivize");
 		var i, 
 			noOfresponsiveImages = responsiveImages.length;
-		
-		for(i = 0; i < noOfresponsiveImages; i = i + 1 ){
-			var newImg = window.document.createElement("img");
-			newImg.src = responsiveImages[i].getAttribute("data-fullsrc");
-			responsiveImages[i].previous().appendChild(newImg);
-			responsiveImages[i].style.display = "none"; 
+
+		//test for available width in current browser window
+		if(screen.width <= 767){ //767px, anything smaller than an ipad is considered mobile 
+			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");
+
+			if(platform === "mobile"){
+				img.src = noScriptElem.getAttribute("data-mobilesrc");
+			}else{
+				img.src = noScriptElem.getAttribute("data-fullsrc");
+			}
+
+			img.className = "responsive";
+			noScriptElem.previous().appendChild(img);	
+			noScriptElem.style.display = "none";
+		}
+    };
+}
 document.observe("dom:loaded", function() {
-	replaceImages()
+	responsiveImageTag.replaceInitialImages();
 })
+

data/lib/responsive_image_tag.rb

@@ -8,8 +8,11 @@ module ResponsiveImageTag
   #
   def responsive_image_tag(small, big, options = {})
     output = tag "span", {:class => "img-placeholder"}
-    output += tag "/span"
-    output += tag "noscript", {"data-fullsrc" => image_path(big), :class => "responsivize"}, true
+    output += tag "/span", nil, true
+    output += tag "noscript", {
+      "data-fullsrc" => image_path(big),
+      "data-mobilesrc" => image_path(small),
+      :class => "responsivize"}, true
     output += image_tag(small, options)
     output += tag "/noscript", nil, true
     output

data/responsive_image_tag.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{responsive_image_tag}
-  s.version = "0.1.0"
+  s.version = "0.1.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Dave Hrycyszyn"]
-  s.date = %q{2011-08-16}
+  s.date = %q{2011-08-17}
   s.description = %q{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 = %q{dave.hrycyszyn@headlondon.com}
   s.extra_rdoc_files = [

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: responsive_image_tag
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 25
   prerelease: 
   segments: 
   - 0
   - 1
-  - 0
-  version: 0.1.0
+  - 1
+  version: 0.1.1
 platform: ruby
 authors: 
 - Dave Hrycyszyn
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-08-16 00:00:00 +01:00
+date: 2011-08-17 00:00:00 +01:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency