hisrc-rails 0.1.0

data/.gitignore

@@ -0,0 +1,2 @@
+Gemfile.lock
+log/

data/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.1.0 (June 16, 2012)
+
+* First public version.

data/Gemfile

@@ -0,0 +1,3 @@
+source :rubygems
+
+gemspec

data/README.md

@@ -0,0 +1,86 @@
+# hisrc-rails
+
+Retina displays are coming! Be sure to make your Rails app ready today.
+
+How? Well, there are a lot of different approaches: 
+* http://css-tricks.com/which-responsive-images-solution-should-you-use/
+* http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
+
+The one I like the most is [HiSRC](https://github.com/teleject/hisrc). This gem makes your live easier through two steps:
+
+* It adds HiSRC to the Rails asset pipeline – no more messing around with javascript files.
+* It provides a helper method to easy include HiSRC in your Rails views.
+
+## Installation
+
+In your `Gemfile`:
+
+```ruby
+gem 'hisrc-rails'
+```
+
+In your `application.js`:
+
+```js
+//= require hisrc
+
+$(function() {
+  $('img').hisrc();
+});
+```
+
+For detailed information about available configuration options be sure to checkout the [HiSRC readme](https://github.com/teleject/hisrc#setting-up).
+
+## Usage
+
+This gem provides a nice little helper method to optimize your views: `responsive_image_tag`
+
+`responsive_image_tag` accepts the same options as `image_tag`, and two additional options as well:
+
+* `:'1x'` - If no 1x option is provided, the `src` is used.
+* `:'2x'` - If no 2x options is provided, "@2x" is added to the `src`. So "rails.png" becomes "rails@2x.png".
+
+## Examples
+```ruby
+responsive_image_tag("rails.png")
+# => <img src="/assets/rails.png" data-1x="/assets/rails.png" data-2x="/assets/rails@2x.png" />
+
+responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400")
+# => <img src="http://placehold.it/100x100" data-1x="http://placehold.it/200x200" data-2x="http://placehold.it/200x200" />
+```
+
+## Acknowledgements
+Many thanks to [1Mark](https://github.com/1Marc) for [his first version](https://github.com/1Marc/hisrc) of HiSRC, and to [teleject](https://github.com/teleject) for maintaining the [current version](https://github.com/teleject/hisrc) of this really great jQuery plugin. :)
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+## Copyright
+
+(The MIT license)
+
+Copyright (c) 2012 Mario Uher
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -0,0 +1,8 @@
+require 'rake'
+require 'rake/testtask'
+
+Rake::TestTask.new do |t|
+  t.test_files = Dir.glob('spec/**/*_spec.rb')
+end
+
+task(default: :test)

data/hisrc-rails.gemspec

@@ -0,0 +1,18 @@
+Gem::Specification.new do |gem|
+  gem.name          = 'hisrc-rails'
+  gem.version       = '0.1.0'
+  gem.authors       = 'Mario Uher'
+  gem.email         = 'uher.mario@gmail.com'
+  gem.description   = 'Make owners of the MacBook Pro with Retina Display happy and provide high-res images within your Rails app.'
+  gem.summary       = 'Use hisrc-rails with Rails 3.1+.'
+  gem.homepage      = 'http://haihappen.github.com/hisrc-rails'
+
+  gem.files         = `git ls-files`.split("\n")
+  gem.require_path  = 'lib'
+
+  gem.add_dependency 'activesupport', '~> 3.1'
+  gem.add_dependency 'jquery-rails', '~> 2.0'
+
+  gem.add_development_dependency 'minitest'
+  gem.add_development_dependency 'rails', '~> 3.1'
+end

data/lib/hisrc-rails.rb

@@ -0,0 +1,3 @@
+module HisrcRails
+  require 'hisrc-rails/railtie' if defined?(Rails)
+end

data/lib/hisrc-rails/railtie.rb

@@ -0,0 +1,15 @@
+require 'rails/railtie'
+require 'rails/engine'
+
+module HisrcRails
+  class Railtie < Rails::Railtie
+    initializer 'hisrc-rails.initialize' do
+      ActiveSupport.on_load :action_view do
+        require 'hisrc-rails/responsive_image_tag_helper'
+        include HisrcRails::ResponsiveImageTagHelper
+      end
+    end
+  end
+
+  class Engine < ::Rails::Engine; end
+end

data/lib/hisrc-rails/responsive_image_tag_helper.rb

@@ -0,0 +1,30 @@
+require 'active_support/core_ext/object/blank'
+
+module HisrcRails
+  module ResponsiveImageTagHelper
+    # Returns a hisrc-ready html image tag for the +src+.
+    # If not otherwise specified, it will add two data attributes
+    # which are required for hisrc to work.
+    #
+    # ==== Options
+    # +responsive_image_tag+ accepts the same options as +image_tag+,
+    # and two additional options as well:
+    #
+    # * <tt>:'1x'</tt> - If no 1x option is provided, the +src+ is used.
+    # * <tt>:'2x'</tt> - If no 2x options is provided, "@2x" is added to
+    # the +src+. So "rails.png" becomes "rails@2x.png".
+    #
+    # ==== Examples
+    #  responsive_image_tag("rails.png") # =>
+    #    <img src="/assets/rails.png" data-1x="/assets/rails.png" data-2x="/assets/rails@2x.png" />
+    #  responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400") # =>
+    #    <img src="http://placehold.it/100x100" data-1x="http://placehold.it/200x200" data-2x="http://placehold.it/200x200" />
+    def responsive_image_tag(src, options = {})
+      options[:data] ||= {}
+      options[:data][:'1x'] ||= path_to_image(options.delete(:'1x').presence || options.delete('1x').presence || src)
+      options[:data][:'2x'] ||= path_to_image(options.delete(:'2x').presence || options.delete('2x').presence || src.gsub(/([\w\/]+).(\w+)/, '\1@2x.\2'))
+      
+      image_tag(src, options)
+    end
+  end
+end

data/spec/integration_spec.rb

@@ -0,0 +1,22 @@
+require File.expand_path('../spec_helper', __FILE__)
+require 'rails/railtie'
+require 'hisrc-rails/railtie'
+require 'action_controller/railtie'
+
+class App < Rails::Application
+  config.active_support.deprecation = :log
+  new.initialize!
+end
+
+describe ActionView::Base do
+  it 'haz method' do
+    ActionView::Base.instance_methods.must_include(:responsive_image_tag)
+  end
+end
+
+
+describe ActionController::Base do
+  it 'haz helper' do
+    ActionController::Base.helpers.methods.must_include(:responsive_image_tag)
+  end
+end

data/spec/responsive_image_tag_helper_spec.rb

@@ -0,0 +1,58 @@
+require File.expand_path('../spec_helper', __FILE__)
+require 'hisrc-rails/responsive_image_tag_helper'
+
+describe HisrcRails::ResponsiveImageTagHelper do
+  let(:mock) do
+    Class.new(MiniTest::Mock) do
+      include HisrcRails::ResponsiveImageTagHelper
+      
+      def path_to_image(_) _ end
+    end.new
+  end
+
+  def data(_1x, _2x)
+    { data: { :'1x' => _1x, :'2x' => _2x }}
+  end
+
+
+  describe :responsive_image_tag do
+    it 'sets the data-1x and data-2x attributes' do
+      mock.expect(:image_tag, nil, ['rails.png', data('rails.png', 'rails@2x.png')])
+      
+      mock.responsive_image_tag('rails.png')
+      mock.verify
+    end
+
+
+    it 'accepts a long +src+ path too' do
+      mock.expect(:image_tag, nil, ['long/path/to/image.png', data('long/path/to/image.png', 'long/path/to/image@2x.png')])
+      
+      mock.responsive_image_tag('long/path/to/image.png')
+      mock.verify
+    end
+
+
+    it 'allows to explicity set the +x+ option' do
+      mock.expect(:image_tag, nil, ['http://placehold.it/100x100', data('http://placehold.it/200x200', 'http://placehold.it/400x400')])
+      
+      mock.responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400")
+      mock.verify
+    end
+
+
+    it 'allows to explicity set the +x+ option using strings' do
+      mock.expect(:image_tag, nil, ['http://placehold.it/100x100', data('http://placehold.it/200x200', 'http://placehold.it/400x400')])
+      
+      mock.responsive_image_tag("http://placehold.it/100x100", '1x' => "http://placehold.it/200x200", '2x' => "http://placehold.it/400x400")
+      mock.verify
+    end
+
+
+    it 'allows to explicity set the +data+ hash' do
+      mock.expect(:image_tag, nil, ['http://placehold.it/100x100', data('http://placehold.it/200x200', 'http://placehold.it/400x400')])
+      
+      mock.responsive_image_tag("http://placehold.it/100x100", data: { :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400" })
+      mock.verify
+    end
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,5 @@
+$:.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
+
+require 'minitest/autorun'
+require 'minitest/pride'
+require 'minitest/spec'

data/vendor/assets/javascripts/hisrc.js

@@ -0,0 +1,252 @@
+/*
+ * Hisrc jQuery Plugin
+ *
+ * Copyright (c) 2012
+ * Licensed under the MIT license.
+ *
+ */
+
+(function($){
+	$.hisrc = {
+		bandwidth: null,
+		connectionTestResult: null,
+		connectionKbps: null,
+		connectionType: null,
+		devicePixelRatio: null
+	};
+
+	$.hisrc.defaults = {
+		useTransparentGif: false,
+		transparentGifSrc: 'data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+		minKbpsForHighBandwidth: 300,
+		speedTestUri: 'https://s3.amazonaws.com/cdeutsch/50K',
+		speedTestKB: 50,
+		speedTestExpireMinutes: 30,
+		forcedBandwidth: false
+	};
+
+	// for performance, run this right away (requires jQuery, but no need to wait for DOM to be ready)
+	$.hisrc.speedTest = function() {
+		$(window).hisrc();
+	};
+
+	$.fn.hisrc = function(options) {
+		var settings = $.extend({}, $.hisrc.defaults, options),
+
+			$els = $(this),
+
+			// check bandwidth via @Modernizr's network-connection.js
+			connection = navigator.connection || { type: 0 }, // polyfill
+
+			isSlowConnection = connection.type == 3
+								|| connection.type == 4
+								|| /^[23]g$/.test(connection.type);
+
+
+		// get pixel ratio
+		$.hisrc.devicePixelRatio = 1;
+		if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio; }
+
+
+		// variables/functions below for speed test are taken from Foresight.js
+		// Copyright (c) 2012 Adam Bradley
+		// Licensed under the MIT license.
+		// https://github.com/adamdbradley/foresight.js
+		// Modified by Christopher Deutsch for hisrc.js
+		var speedTestUri = settings.speedTestUri,
+			STATUS_LOADING = 'loading',
+			STATUS_COMPLETE = 'complete',
+			LOCAL_STORAGE_KEY = 'fsjs', // may as well piggy-back on Forsight localstorage key since we're doing the same thing.
+			speedConnectionStatus,
+
+			initSpeedTest = function () {
+
+				// only check the connection speed once, if there is a status then we've
+				// already got info or it already started
+				if ( speedConnectionStatus ) {
+					return;
+				}
+
+				// force that this device has a low or high bandwidth, used more so for debugging purposes
+				if ( settings.forcedBandwidth ) {
+					$.hisrc.bandwidth = settings.forcedBandwidth;
+					$.hisrc.connectionTestResult = 'forced';
+					speedConnectionStatus = STATUS_COMPLETE;
+					$els.trigger('speedTestComplete.hisrc');
+					return;
+				}
+
+				// if the device pixel ratio is 1, then no need to do a network connection
+				// speed test since it can't show hi-res anyways
+				if ( $.hisrc.devicePixelRatio === 1 ) {
+					$.hisrc.connectionTestResult = 'skip';
+					speedConnectionStatus = STATUS_COMPLETE;
+					$els.trigger('speedTestComplete.hisrc');
+					return;
+				}
+
+				// if we know the connection is 2g or 3g
+				// don't even bother with the speed test, cuz its slow
+				// Copyright (c) Faruk Ates, Paul Irish, Alex Sexton
+				// Available under the BSD and MIT licenses: www.modernizr.com/license/
+				// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/network-connection.js
+				// Modified by Adam Bradley for Foresight.js
+				$.hisrc.connectionType = connection.type;
+				if ( isSlowConnection ) {
+					// we know this connection is slow, don't bother even doing a speed test
+					$.hisrc.connectionTestResult = 'connTypeSlow';
+					speedConnectionStatus = STATUS_COMPLETE;
+					$els.trigger('speedTestComplete.hisrc');
+					return;
+				}
+
+				// check if a speed test has recently been completed and its
+				// results are saved in the local storage
+				try {
+					var fsData = JSON.parse( localStorage.getItem( LOCAL_STORAGE_KEY ) );
+					if ( fsData !== null ) {
+						if ( ( new Date() ).getTime() < fsData.exp ) {
+							// already have connection data within our desired timeframe
+							// use this recent data instead of starting another test
+							$.hisrc.bandwidth = fsData.bw;
+							$.hisrc.connectionKbps = fsData.kbps;
+							$.hisrc.connectionTestResult = 'localStorage';
+							speedConnectionStatus = STATUS_COMPLETE;
+							$els.trigger('speedTestComplete.hisrc');
+							return;
+						}
+					}
+				} catch( e ) { }
+
+				var
+				speedTestImg = document.createElement( 'img' ),
+				endTime,
+				startTime,
+				speedTestTimeoutMS;
+
+				speedTestImg.onload = function () {
+					// speed test image download completed
+					// figure out how long it took and an estimated connection speed
+					endTime = ( new Date() ).getTime();
+
+					var duration = ( endTime - startTime ) / 1000;
+					duration = ( duration > 1 ? duration : 1 ); // just to ensure we don't divide by 0
+
+					$.hisrc.connectionKbps = ( ( settings.speedTestKB * 1024 * 8 ) / duration ) / 1024;
+					$.hisrc.bandwidth = ( $.hisrc.connectionKbps >= settings.minKbpsForHighBandwidth ? 'high' : 'low' );
+
+					speedTestComplete( 'networkSuccess' );
+				};
+
+				speedTestImg.onerror = function () {
+					// fallback incase there was an error downloading the speed test image
+					speedTestComplete( 'networkError', 5 );
+				};
+
+				speedTestImg.onabort = function () {
+					// fallback incase there was an abort during the speed test image
+					speedTestComplete( 'networkAbort', 5 );
+				};
+
+				// begin the network connection speed test image download
+				startTime = ( new Date() ).getTime();
+				speedConnectionStatus = STATUS_LOADING;
+				if ( document.location.protocol === 'https:' ) {
+					// if this current document is SSL, make sure this speed test request
+					// uses https so there are no ugly security warnings from the browser
+					speedTestUri = speedTestUri.replace( 'http:', 'https:' );
+				}
+				speedTestImg.src = speedTestUri + "?r=" + Math.random();
+
+				// calculate the maximum number of milliseconds it 'should' take to download an XX Kbps file
+				// set a timeout so that if the speed test download takes too long
+				// than it isn't a 'high-bandwidth' and ignore what the test image .onload has to say
+				// this is used so we don't wait too long on a speed test response
+				// Adding 350ms to account for TCP slow start, quickAndDirty === TRUE
+				speedTestTimeoutMS = ( ( ( settings.speedTestKB * 8 ) / settings.minKbpsForHighBandwidth ) * 1000 ) + 350;
+				setTimeout( function () {
+					speedTestComplete( 'networkSlow' );
+				}, speedTestTimeoutMS );
+			},
+
+			speedTestComplete = function ( connTestResult, expireMinutes ) {
+				// if we haven't already gotten a speed connection status then save the info
+				if (speedConnectionStatus === STATUS_COMPLETE) { return; }
+
+				// first one with an answer wins
+				speedConnectionStatus = STATUS_COMPLETE;
+				$.hisrc.connectionTestResult = connTestResult;
+
+				try {
+					if ( !expireMinutes ) {
+						expireMinutes = settings.speedTestExpireMinutes;
+					}
+					var fsDataToSet = {
+						kbps: $.hisrc.connectionKbps,
+						bw: $.hisrc.bandwidth,
+						exp: ( new Date() ).getTime() + (expireMinutes * 60000)
+					};
+					localStorage.setItem( LOCAL_STORAGE_KEY, JSON.stringify( fsDataToSet ) );
+				} catch( e ) { }
+
+				// trigger swap once speedtest is complete.
+				$els.trigger('speedTestComplete.hisrc');
+			},
+
+			setImageSource = function ( $el, src ) {
+				if ( settings.useTransparentGif ) {
+					$el.attr('src', settings.transparentGifSrc)
+						.css('max-height', '100%')
+						.css('max-width', '100%')
+						.css('background', 'url("' + src + '") no-repeat 0 0')
+						.css('background-size', 'contain');
+				} else {
+					$el.attr( 'src', src );
+				}
+			};
+
+		$els.each(function(){
+			var $el = $(this);
+
+			if (!$el.data('m1src')) {
+				$el.data('m1src', $el.attr('src'));
+			}
+
+			// check for zero which often happens in safari.
+			if (!$el.attr('width') &&  $el.width() > 0) {
+				$el.attr('width', $el.width());
+			}
+			if (!$el.attr('height') &&  $el.height() > 0) {
+				$el.attr('height', $el.height());
+			}
+
+			$el.on('speedTestComplete.hisrc', function(){
+
+				if (speedConnectionStatus === STATUS_COMPLETE) {
+
+					if (isSlowConnection) {
+						$el.attr( 'src', $el.data('m1src') );
+					} else {
+
+						// check if client can get high res image
+						if ($.hisrc.devicePixelRatio > 1 && $.hisrc.bandwidth === 'high') {
+							setImageSource( $el, $el.data('2x') );
+						} else {
+							setImageSource( $el, $el.data('1x') );
+						}
+					}
+					// turn off so hisrc() can be called many times on same element.
+					$el.off('speedTestComplete.hisrc');
+				}
+
+			});
+		});
+
+		initSpeedTest();
+
+		return $els;
+	};
+
+})(jQuery);
+
+

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: hisrc-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Mario Uher
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-06-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+description: Make owners of the MacBook Pro with Retina Display happy and provide
+  high-res images within your Rails app.
+email: uher.mario@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- CHANGELOG.md
+- Gemfile
+- README.md
+- Rakefile
+- hisrc-rails.gemspec
+- lib/hisrc-rails.rb
+- lib/hisrc-rails/railtie.rb
+- lib/hisrc-rails/responsive_image_tag_helper.rb
+- spec/integration_spec.rb
+- spec/responsive_image_tag_helper_spec.rb
+- spec/spec_helper.rb
+- vendor/assets/javascripts/hisrc.js
+homepage: http://haihappen.github.com/hisrc-rails
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: Use hisrc-rails with Rails 3.1+.
+test_files: []
+has_rdoc: