responsive_image_tag 0.1.3 → 0.2.0

data/README.rdoc

@@ -17,7 +17,7 @@ You can run it like this:
  
 === Rails 3
 
- rails generate responsive_image_tag
+ rails g responsive_image_tag:javascript
 
 === Rails 2
 

data/VERSION

@@ -1 +1 @@
-0.1.3
+0.2.0

data/generators/responsive_image_tag/{responsive_image_tag_generator.rb → jquery_responsive_image_tag_generator.rb}

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

data/generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb

@@ -0,0 +1,11 @@
+class PrototypeResponsiveImageTagGenerator < Rails::Generator::Base
+
+  SOURCE = File.join("..", "..", "..", "lib", "rails", "generators", "responsive_image_tag", "javascript", "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/rails/generators/responsive_image_tag/javascript/{javascript_generator.rb → jquery_javascript_generator.rb}

@@ -2,7 +2,7 @@
 
 module ResponsiveImageTag
   module Generators
-    class JavascriptGenerator < Rails::Generators::Base
+    class JqueryJavascriptGenerator < Rails::Generators::Base
       desc 'Creates a javascript file which takes care of responsive images for you'
 
       def self.source_root
@@ -10,8 +10,9 @@ module ResponsiveImageTag
       end
 
       def create_javascript_file
-        template 'responsive-image-tag.js', 
-                File.join('public', 'javascripts', 'responsive-image-tag.js')
+        template 'responsive-image-tag-jquery.js', 
+          File.join(
+            'public', 'javascripts', 'responsive-image-tag-prototype.js')
       end
       
     end

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

@@ -0,0 +1,20 @@
+# encoding: utf-8
+
+module ResponsiveImageTag
+  module Generators
+    class PrototypeJavascriptGenerator < 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/rails/generators/responsive_image_tag/javascript/templates/{responsive-image-tag.js → responsive-image-tag-jquery.js}

@@ -23,25 +23,25 @@ var responsiveImageTag = {
 
 		//set initial source element on image
 		for(i = 0; i < noOfresponsiveImages; i = i + 1 ){
-			var noScriptElem = responsiveImages[i];
+			var noScriptElem = $(responsiveImages[i]);
 			var img = window.document.createElement("img");
 
-			img.alt = noScriptElem.getAttribute("data-alttext");
+			img.alt = noScriptElem.attr("data-alttext");
 
 			if(platform === "mobile"){
-				img.src = noScriptElem.getAttribute("data-mobilesrc");
+				img.src = noScriptElem.attr("data-mobilesrc");
 			}else{
-				img.src = noScriptElem.getAttribute("data-fullsrc");
+				img.src = noScriptElem.attr("data-fullsrc");
 			}
 
 			img.className = "responsive";
-			noScriptElem.previous().appendChild(img);	
-			noScriptElem.style.display = "none";
+			noScriptElem.prev().append(img);	
+			noScriptElem.hide();
 		}
     }
 };
 
-document.observe("dom:loaded", function() {
+$(function() {
 	responsiveImageTag.replaceInitialImages();
 });
-
+       

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

@@ -0,0 +1,50 @@
+/*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");
+
+			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() {
+	responsiveImageTag.replaceInitialImages();
+});
+

data/responsive_image_tag.gemspec

@@ -5,7 +5,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{responsive_image_tag}
-  s.version = "0.1.3"
+  s.version = "0.2.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Dave Hrycyszyn"]
@@ -24,10 +24,13 @@ Gem::Specification.new do |s|
     "README.rdoc",
     "Rakefile",
     "VERSION",
-    "generators/responsive_image_tag/responsive_image_tag_generator.rb",
+    "generators/responsive_image_tag/jquery_responsive_image_tag_generator.rb",
+    "generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb",
     "generators/responsive_image_tag/templates/README",
-    "lib/rails/generators/responsive_image_tag/javascript/javascript_generator.rb",
-    "lib/rails/generators/responsive_image_tag/javascript/templates/responsive-image-tag.js",
+    "lib/rails/generators/responsive_image_tag/javascript/jquery_javascript_generator.rb",
+    "lib/rails/generators/responsive_image_tag/javascript/prototype_javascript_generator.rb",
+    "lib/rails/generators/responsive_image_tag/javascript/templates/responsive-image-tag-jquery.js",
+    "lib/rails/generators/responsive_image_tag/javascript/templates/responsive-image-tag-prototype.js",
     "lib/responsive_image_tag.rb",
     "responsive_image_tag.gemspec",
     "test/helper.rb",

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: responsive_image_tag
 version: !ruby/object:Gem::Version 
-  hash: 29
+  hash: 23
   prerelease: 
   segments: 
   - 0
-  - 1
-  - 3
-  version: 0.1.3
+  - 2
+  - 0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Dave Hrycyszyn
@@ -123,10 +123,13 @@ files:
 - README.rdoc
 - Rakefile
 - VERSION
-- generators/responsive_image_tag/responsive_image_tag_generator.rb
+- generators/responsive_image_tag/jquery_responsive_image_tag_generator.rb
+- generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb
 - generators/responsive_image_tag/templates/README
-- lib/rails/generators/responsive_image_tag/javascript/javascript_generator.rb
-- lib/rails/generators/responsive_image_tag/javascript/templates/responsive-image-tag.js
+- lib/rails/generators/responsive_image_tag/javascript/jquery_javascript_generator.rb
+- lib/rails/generators/responsive_image_tag/javascript/prototype_javascript_generator.rb
+- lib/rails/generators/responsive_image_tag/javascript/templates/responsive-image-tag-jquery.js
+- lib/rails/generators/responsive_image_tag/javascript/templates/responsive-image-tag-prototype.js
 - lib/responsive_image_tag.rb
 - responsive_image_tag.gemspec
 - test/helper.rb