responsive_images 0.0.1 → 0.0.2

data/README.md

@@ -101,7 +101,29 @@ You can also pass custom version to the helper method with:
     # custom versions
     = responsive_background_image @post.image, :sizes => { :'mobile' => :post_small, :tablet => :post_tablet }
     # => style="url(path/to/image.jpg)" data-desktop-src="path/to/image.jpg" data-tablet-src="path/to/post_tablet_image.jpg" data-mobile-src="path/to/post_mobile_image.jpg"
+
+
+### Client-side JavaScript
+
+The ResponsiveImages helpers will allow you to construct your responsive image tags and even select the most appropriate size to load initially but if the browser window sizes changes, we'll need some client-side javascript to adjust the image src. The responsive-images.js is included in this gem but needs to be added to your javascript bundle, in application.js add:
+
+    //= require responsive-images
     
+The responsive-images.js is based on jQuery, so you'll need jQuery loaded.
+
+Now we need to instantiate the plugin. This is quite simple:
+    
+    // setup our responsive images
+    $('img.responsive').responsive_images({
+      mobile_size: 480,
+      tablet_size: 768,
+      desktop_size: 980,
+    });
+    
+Unlike the helper methods, with the JS library, you define breakpoints that will tell the plugin to find the appropriate size and resize it to the appropriate data-attribute. 
+For example, if you're breakpoint is mobile_size then the plugin will look for a data-mobile-src attribute. 
+
+  
 ### Mobvious
 
 ResponsiveImages uses [Mobvious](https://github.com/jistr/mobvious) for device detection. Check out [the gem](https://github.com/jistr/mobvious) for more details. You can use Mobvious to detect the user device by simply calling:

data/lib/responsive_images/rails/engine.rb

@@ -0,0 +1,6 @@
+module ResponsiveImages
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/responsive_images/railtie.rb

@@ -3,7 +3,7 @@ require 'responsive_images/view_helpers'
 require "mobvious"
 
 module ResponsiveImages
-  class Railtie < Rails::Railtie
+  class Railtie < ::Rails::Railtie
     
     # Add our view helpers
     initializer "responsive_images.view_helpers" do

data/lib/responsive_images/responsive_images.rb

@@ -1,14 +1,19 @@
+require "responsive_images/rails/engine"
+require "responsive_images/version"
+require "responsive_images/config"
+require 'responsive_images/railtie' if defined?(Rails)
+
 module ResponsiveImages
-  module Activator
   
-    class << self
-      def initialize attrs={}
-        attrs = ResponsiveImages.options.merge(attrs)
-        Config::VALID_OPTION_KEYS.each do |key|
-          instance_variable_set("@#{key}".to_sym, attrs[key])
-        end
+  extend Config
+  
+  class << self  
+    def initialize attrs={}
+      attrs = ResponsiveImages.options.merge(attrs)
+      Config::VALID_OPTION_KEYS.each do |key|
+        instance_variable_set("@#{key}".to_sym, attrs[key])
       end
     end
-
-  end
-end
+  end  
+  
+end

data/lib/responsive_images/version.rb

@@ -1,3 +1,3 @@
 module ResponsiveImages
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/lib/responsive_images.rb

@@ -1,18 +1 @@
-require "responsive_images/version"
-require "responsive_images/config"
-require 'responsive_images/railtie' if defined?(Rails)
-
-module ResponsiveImages
-  
-  extend Config
-  
-  class << self  
-    def initialize attrs={}
-      attrs = ResponsiveImages.options.merge(attrs)
-      Config::VALID_OPTION_KEYS.each do |key|
-        instance_variable_set("@#{key}".to_sym, attrs[key])
-      end
-    end
-  end  
-  
-end
+require "responsive_images/responsive_images"

data/vendor/assets/javascripts/responsive-images.js

@@ -0,0 +1,98 @@
+;(function($) {
+  
+  $.fn.responsive_images = function(options) {
+    
+    console.log("options:: ", options)
+    
+    // Default settings
+    var defaults = {
+      default_to_small : true,
+      mobile_size: 300,
+      tablet_size: 640,
+      desktop_size: 980,
+      elements : null,
+      screen_width : 0,
+      screen_height : 0,
+    }
+    
+    var responsive_images = this;
+            
+    // Initialize the responsive images plugin
+    var init = function() {
+
+      // merge the default and optional seetings
+      responsive_images.settings = $.extend({}, defaults, options);
+      
+      // Bind to resize and let's activate the resize handler immediately on load
+      bind_to_resize();
+      resize_handler();
+      
+    };
+    
+    
+    
+    // Bind to window resize event to trigger our resize handler
+    var bind_to_resize = function() {
+      $(window).resize(function() {
+        responsive_images.settings.screen_width = $(window).width();
+        responsive_images.settings.screen_height = $(window).height();
+        resize_handler();
+      });
+    };
+    
+    
+    var resize_handler = function() {      
+      // Let's make sure the screen width and height are NOT set to 0. If so, let's set them
+      // to the screen resolution
+      if (responsive_images.settings.screen_width == 0 && responsive_images.settings.screen_height == 0) {
+        responsive_images.settings.screen_width = $(window).width();
+        responsive_images.settings.screen_height = $(window).height();        
+      }      
+      // Set up our array of sizes and the closest match as null
+      var size = null;
+      var size_key = null;
+      var sizes = {
+        mobile_size: defaults.mobile_size,
+        tablet_size: defaults.tablet_size,
+        desktop_size: defaults.desktop_size,
+      };
+      // Loop over our size array to figure out which size is the closest to our screen size
+      $.each(sizes, function(key, value) {
+        if (size == null || Math.abs(value - responsive_images.settings.screen_width) < Math.abs(size - responsive_images.settings.screen_width)) {
+          size = value;
+          size_key = key;
+        };
+      });
+      responsive_images.update_images(size_key, size);      
+    };
+    
+    
+    // Update the actual images
+    responsive_images.update_images = function(key, size) {
+      // Set up our data attribute
+      var data_attribute = "data-" + key.replace("_", "-").replace('size', 'src');      
+      responsive_images.each(function(index, item) {
+        // Let's make sure the data attribute exists
+        if ( $(item).attr(data_attribute) != null ) {        
+          // If the item is a div, let's set the background image
+          if ( $(item).is('div') ) {
+            $(item).css({
+              "background-image" : 'url("' + $(item).attr(data_attribute) + '")',
+              "background-size" : "auto",
+            });
+          }
+          // If it's an image, let's just replace the source
+          else if ( $(item).is('img') ) {
+            $(item).attr('src', $(item).attr(data_attribute));
+          };
+        };
+      });
+    };
+      
+    // Initialize the plugin
+    init();      
+    
+  };
+  
+    
+})(jQuery);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: responsive_images
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -73,11 +73,13 @@ files:
 - Rakefile
 - lib/responsive_images.rb
 - lib/responsive_images/config.rb
+- lib/responsive_images/rails/engine.rb
 - lib/responsive_images/railtie.rb
 - lib/responsive_images/responsive_images.rb
 - lib/responsive_images/version.rb
 - lib/responsive_images/view_helpers.rb
 - responsive_images.gemspec
+- vendor/assets/javascripts/responsive-images.js
 homepage: ''
 licenses:
 - MIT