picture_tag-rails 0.0.1

data/.gitignore

@@ -0,0 +1,21 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+.DS_Store
+.rspec
+log/
+.rvmrc

data/Gemfile

@@ -0,0 +1,12 @@
+source 'https://rubygems.org'
+gemspec;
+gem 'actionpack', '>= 3.0.0'
+gem 'activesupport', '>= 3.0.0'
+gem 'activemodel', '>= 3.0.0'
+gem 'railties', '>= 3.0.0'
+gem 'tzinfo'
+group :test, :development do
+  gem 'guard-rspec'
+  gem 'rb-fsevent', '~> 0.9.1'
+  gem 'rspec-rails'
+end

data/Guardfile

@@ -0,0 +1,9 @@
+# A sample Guardfile
+# More info at https://github.com/guard/guard#readme
+
+guard 'rspec', :version => 2 do
+  watch(%r{^spec/.+_spec\.rb$})
+  watch(%r{^lib/picture_tag/(.+)\.rb$})     { |m| "spec/lib/#{m[1]}_spec.rb" }
+  watch('spec/spec_helper.rb')  { "spec" }
+end
+

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Bookis Smuin
+
+MIT License
+
+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/README.md

@@ -0,0 +1,76 @@
+# picture_tag
+
+A Rails view helper extension to generate the proposed HTML5 picture tag markup.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+`gem 'picture_tag-rails'`
+
+Or install it yourself as:
+
+`gem install picture_tag-rails`
+
+## Usage
+
+```erb
+<%= picture_tag(image_path, options) %>
+```  
+
+With default sizes and media queries
+```erb
+<%= picture_tag('/images/cat.jpg', alt: "Kitty cat!") %>
+```  
+
+produces
+
+```html
+<picture>
+  <source media='(min-width: 1600px)' srcset='/images/cat-large.jpg 1x, /images/cat-large@2x.jpg 2x' />
+  <source media='(min-width: 1000px)' srcset='/images/cat-medium.jpg 1x, /images/cat-medium@2x.jpg 2x' />
+  <source media='(min-width: 768px)' srcset='/images/cat-small.jpg 1x, /images/cat-small@2x.jpg 2x' />
+  <source media='(min-width: 480px)' srcset='/images/cat-tiny.jpg 1x, /images/cat-tiny@2x.jpg 2x' />
+  <source srcset='/images/cat-tiny.jpg 1x, /images/cat-tiny@2x.jpg 2x' />
+  <img alt=\"Kitty cat!\" src=\"/images/cat-tiny.jpg\" />
+</picture>
+```
+
+## Paperclip
+
+Paperclip options for default media queries and sizes
+
+```ruby
+has_attached_file :image, {
+  styles: { 
+    tiny:   "320x", 
+    small:  "480x", 
+    medium: "768x", 
+    large:  "1000x", 
+    huge:   "1600x",
+    %s(tiny@2x)   => "640x", 
+    %s(small@2x)  => "960x", 
+    %s(medium@2x) => "1536x", 
+    %s(large@2x)  => "2000x", 
+    %s(large@2x)  => "3200x"
+  }
+```
+
+## Options
+
+To exclude `<source>` elements with media queries above a max width:
+```erb
+<%= picture_tag(image_path, max_width: "600px") %>
+```
+
+To override the default media queries and names:
+```erb
+<%= picture_tag(image_path, sizes: {itty_bitty: "(min-width: 10px)"}) %>
+```
+
+All `image_tag` options are valid for `picture_tag`. See [image_tag Docs](http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html)
+
+## Todo
+
+- Add optional paperclip integration functionality
+- Implement Retina support

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/picture_tag/railtie.rb

@@ -0,0 +1,8 @@
+require 'picture_tag/view_helpers'
+module PictureTag
+  class Railtie < Rails::Railtie
+    initializer "picture_tag.view_helpers" do
+      ActionView::Base.send :include, ViewHelpers
+    end
+  end
+end

data/lib/picture_tag/version.rb

@@ -0,0 +1,3 @@
+module PictureTag
+  VERSION = "0.0.1"
+end

data/lib/picture_tag/view_helpers.rb

@@ -0,0 +1,54 @@
+module PictureTag
+  module ViewHelpers
+    
+    def picture_tag(image_path, options={})
+      filename, extension = split_image_path_from_extension(image_path)
+      sizes = determine_sizes(options)
+      
+      html = "<picture>"
+      sizes.each do |size, media_query| 
+        html << build_source_tag(filename, size, extension, media_query)
+      end
+      html << add_default_source_and_image(filename, sizes.last.first, extension, options)
+      html << "</picture>"
+      
+      html
+    end
+  
+    def split_image_path_from_extension(image_path)
+      image_path.gsub!('-original', '')
+      image_path.split(/\.(?=[^\.]+(?: |$))| /) # Splits on last period before the first whitespace.
+    end
+  
+    def build_source_tag(filename, size, extension, media_query=nil)
+      srcset = image_path("#{filename}-#{size}.#{extension}") + " 1x, "
+      srcset << image_path("#{filename}-#{size}@2x.#{extension}") + " 2x"
+      "<source #{"media='#{media_query}' " if media_query}srcset='#{srcset}' />"
+    end
+  
+    def add_default_source_and_image(filename, size, extension, options)
+      html = build_source_tag(filename, size, extension)    
+      options[:alt] ||= filename.split('/').last.capitalize
+      html << image_tag("#{filename}-#{size}.#{extension}", options)
+      html
+    end
+    
+    def determine_sizes(options)
+      sizes = options.delete(:sizes) || default_sizes
+      max_width = options[:max_width].to_i if options[:max_width]
+      sizes = sizes.delete_if {|k,query| query.match(/\d+/)[0].to_i > max_width } if max_width
+      sizes = sizes.sort_by {|k,v| k.to_s }
+    end
+  
+    def default_sizes
+      {
+        :huge   => "(min-width: 1600px)", 
+        :large  => "(min-width: 1000px)", 
+        :medium => "(min-width: 768px)", 
+        :small  => "(min-width: 480px)",
+        :tiny   => "(min-width: 320px)"
+      }
+    end
+  
+  end
+end

data/lib/picture_tag.rb

@@ -0,0 +1,2 @@
+require "picture_tag/version"
+require 'picture_tag/railtie' if defined?(Rails)

data/picture_tag-rails.gemspec

@@ -0,0 +1,19 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'picture_tag/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "picture_tag-rails"
+  gem.version       = PictureTag::VERSION
+  gem.authors       = ["Bookis Smuin"]
+  gem.email         = ["vegan.bookis@gmail.com"]
+  gem.description   = %q{Rails View Helper picture_tag extension}
+  gem.summary       = %q{A Rails view helper extension to generate the proposed HTML5 picture tag markup.}
+  gem.homepage      = ""
+
+  gem.files         = `git ls-files`.split($/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+end

data/spec/lib/view_helpers_spec.rb

@@ -0,0 +1,105 @@
+require 'spec_helper'
+describe PictureTag::ViewHelpers, :type => :helper  do
+  
+  describe "split image path" do
+    let(:split_image_path) { helper.split_image_path_from_extension("/path/something.s-original.jpg") }
+    it "removes the -original" do
+      split_image_path.first.should eq "/path/something.s"
+    end
+    
+    it "splits jpg" do
+      split_image_path.last.should eq "jpg"
+    end
+    
+  end
+  
+  describe "building the source tag" do
+    
+    it "builds using a media query" do
+      helper.build_source_tag('test', 'small', 'jpg', "(min-width: 100px)").
+      should eq "<source media='(min-width: 100px)' srcset='/images/test-small.jpg 1x, /images/test-small@2x.jpg 2x' />"
+    end
+    
+    it "builds without a media query" do
+      helper.build_source_tag('/path/test', 'small', 'png').
+      should eq "<source srcset='/path/test-small.png 1x, /path/test-small@2x.png 2x' />"
+    end
+    
+    it "builds without an external path" do
+      helper.build_source_tag('http://www.image/path/test', 'small', 'png',"(min-width: 100px)").
+      should eq "<source media='(min-width: 100px)' srcset='http://www.image/path/test-small.png 1x, http://www.image/path/test-small@2x.png 2x' />"
+    end
+  end
+  
+  describe "default source and image" do
+    it "builds source and img" do
+      helper.add_default_source_and_image('test', 'small', 'jpg', {}).
+      should eq "<source srcset='/images/test-small.jpg 1x, /images/test-small@2x.jpg 2x' /><img alt=\"Test\" src=\"/images/test-small.jpg\" />"
+    end
+    
+    it "adds a class to the img tag" do
+      helper.add_default_source_and_image('test', 'small', 'jpg', {:class => "span2"}).
+      should eq "<source srcset='/images/test-small.jpg 1x, /images/test-small@2x.jpg 2x' /><img alt=\"Test\" class=\"span2\" src=\"/images/test-small.jpg\" />"
+    end
+    
+  end
+  
+  describe "determine sizes" do
+    let(:sizes) { {:huge => "(min-width: 1600px)", :small => "(min-width: 500px)"} }
+    it "puts the hash into a sorted array" do
+      helper.determine_sizes(:sizes => sizes).should eq [[:huge, "(min-width: 1600px)"], [:small, "(min-width: 500px)"]]
+    end
+    
+    it "excludes sizes larger than tha max_width" do
+      helper.determine_sizes(:sizes => sizes, :max_width => "501px" ).should eq [[:small, "(min-width: 500px)"]]
+    end
+    
+    it "keeps with an equal max width" do
+      helper.determine_sizes(:sizes => sizes, :max_width => "500px" ).should eq [[:small, "(min-width: 500px)"]]
+    end
+
+    it "removes with a lesser max width" do
+      helper.determine_sizes(:sizes => sizes, :max_width => "499px" ).should eq []
+    end
+    
+  end
+  
+  describe "options" do
+    def html
+      "<picture>" +
+      "<source media='(min-width: 1600px)' srcset='/images/cat-huge.jpg 1x, /images/cat-huge@2x.jpg 2x' />" +
+      "<source media='(min-width: 1000px)' srcset='/images/cat-large.jpg 1x, /images/cat-large@2x.jpg 2x' />" +
+      "<source media='(min-width: 768px)' srcset='/images/cat-medium.jpg 1x, /images/cat-medium@2x.jpg 2x' />" +
+      "<source media='(min-width: 480px)' srcset='/images/cat-small.jpg 1x, /images/cat-small@2x.jpg 2x' />" +
+      "<source media='(min-width: 320px)' srcset='/images/cat-tiny.jpg 1x, /images/cat-tiny@2x.jpg 2x' />" +
+      "<source srcset='/images/cat-tiny.jpg 1x, /images/cat-tiny@2x.jpg 2x' />" +
+      "<img alt=\"Cat\" src=\"/images/cat-tiny.jpg\" />" +
+      "</picture>"
+    end
+
+
+    it  "matches the complete html" do
+      helper.picture_tag('/images/cat.jpg').should eq html 
+    end
+
+    it  "matches the complete html with an alt tag" do
+      helper.picture_tag('/images/cat.jpg', :alt => "Kitty!").should eq html.gsub("Cat", "Kitty!") 
+    end
+
+    it "overwrites the default sizes if sizes given" do
+      h = "<picture>" +
+      "<source media='(min-width: 1px)' srcset='/images/cat-hidden.jpg 1x, /images/cat-hidden@2x.jpg 2x' />" +
+      "<source srcset='/images/cat-hidden.jpg 1x, /images/cat-hidden@2x.jpg 2x' />" +
+      "<img alt=\"Cat\" src=\"/images/cat-hidden.jpg\" />" +
+      "</picture>"
+
+      helper.picture_tag('/images/cat.jpg', :sizes => {:hidden => "(min-width: 1px)"}).
+      should eq h
+    end
+    
+    it "excludes source tags with a media query above the given amount" do
+      helper.picture_tag("cat.jpg", :max_width => "500").split('source').should have(4).things
+    end
+  end
+  
+end

data/spec/spec_helper.rb

@@ -0,0 +1,13 @@
+require 'rubygems'
+
+require "action_controller/railtie"
+
+module Config
+  class Application < ::Rails::Application
+    config.active_support.deprecation = :stderr 
+  end
+end
+Config::Application.initialize!
+
+require 'rspec/rails'
+require 'picture_tag'

metadata

@@ -0,0 +1,79 @@
+--- !ruby/object:Gem::Specification 
+name: picture_tag-rails
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Bookis Smuin
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-09-25 00:00:00 Z
+dependencies: []
+
+description: Rails View Helper picture_tag extension
+email: 
+- vegan.bookis@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- Guardfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/picture_tag.rb
+- lib/picture_tag/railtie.rb
+- lib/picture_tag/version.rb
+- lib/picture_tag/view_helpers.rb
+- picture_tag-rails.gemspec
+- spec/lib/view_helpers_spec.rb
+- spec/spec_helper.rb
+homepage: ""
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: A Rails view helper extension to generate the proposed HTML5 picture tag markup.
+test_files: 
+- spec/lib/view_helpers_spec.rb
+- spec/spec_helper.rb