compass-img-delivery 0.0.1

data/lib/img-delivery.rb

@@ -0,0 +1,7 @@
+require 'compass'
+require 'img-delivery/functions'
+
+Compass::Frameworks.register("img-delivery",
+  :stylesheets_directory  => File.join(File.dirname(__FILE__), "stylesheets"),
+  :templates_directory    => File.join(File.dirname(__FILE__), "templates")
+)

data/lib/img-delivery/functions.rb

@@ -0,0 +1,138 @@
+require "rubygems"
+require "base64"
+
+# module Compass::ImgDelivery
+
+#     def scss_rule(basename, mime_type, data_uri)
+#         rule = <<-SCSS
+#           .#{basename.downcase} {
+#             background-image: url("data:#{mime_type};base64,#{data_uri}");
+#             background-repeat: no-repeat;
+#           }
+#         SCSS
+#     end
+
+#     def fallback_scss_rule(basename, img_dir)
+#         rule = <<-SCSS
+#           .#{basename.downcase} {
+#             background-image: url("#{img_dir}/#{basename}.png");
+#             background-repeat: no-repeat;
+#           }
+#         SCSS
+#     end
+
+# end
+
+
+module Sass::Script::Functions
+
+    def img_delivery(images_dir = '', css_dir = '', js_dir = '')
+        directory_path = Compass.configuration.images_path + "#{images_dir.value}"
+        svg_scss_content = ""
+        png_scss_content = ""
+        fallback_scss_content = ""
+
+        Dir["#{directory_path}svg/*.svg"].each do |file|
+            basename = File.basename(file, ".svg")
+            outputfile = directory_path + 'png/' + basename + '.png'
+            svg_data_uri = svg_base64(file)
+
+            svg_scss_content << <<-SCSS
+              .#{basename.downcase} {
+                background-image: #{svg_data_uri};
+                background-repeat: no-repeat;
+              }
+
+            SCSS
+
+            # generate pngs
+            # svg2png command
+            cmd = "svg2png #{file} #{outputfile}"
+            puts "Writing #{outputfile}"
+            shell = %x[ #{cmd} ]
+
+            png_data_uri = png_base64(outputfile)
+            png_scss_content << <<-SCSS
+              .#{basename.downcase} {
+                background-image: #{png_data_uri};
+                background-repeat: no-repeat;
+              }
+
+            SCSS
+
+            fallback_img_path =  "/" + Compass.configuration.images_dir + "#{images_dir.value}png"
+            fallback_scss_content << <<-SCSS
+              .#{basename.downcase} {
+                background-image: url("#{fallback_img_path}/#{basename}.png");
+                background-repeat: no-repeat;
+              }
+
+            SCSS
+
+
+            if !File.exists?(outputfile)
+                d = directory_path + 'png'
+                Dir.mkdir(d) unless Dir.exists?(d)
+            end
+        end
+
+        # create svg.scss file
+        css_path = Compass.configuration.css_path + "#{css_dir.value}"
+        svg_scss_file = css_path + '-svg.css.scss'
+        png_scss_file = css_path + '-png.css.scss'
+        fallback_scss_file = css_path + '-fallback.css.scss'
+
+        if !File.exists?(svg_scss_file)
+            d = File.dirname(svg_scss_file)
+            Dir.mkdir(d) unless Dir.exists?(d)
+        end
+
+        File.open(svg_scss_file, 'w') do |f|
+            puts "Writing #{svg_scss_file}"
+            f.write(svg_scss_content)
+        end
+
+        # create png.scss file
+        File.open(png_scss_file, 'w') do |f|
+            puts "Writing #{png_scss_file}"
+            f.write(png_scss_content)
+        end
+
+        # create fallback.scss file
+        File.open(fallback_scss_file, 'w') do |f|
+            puts "Writing #{fallback_scss_file}"
+            f.write(fallback_scss_content)
+        end
+
+        # create js file
+        js_content = File.open(File.join(File.dirname(__FILE__), "../javascripts/img-delivery.js"), "rb")
+        js_content = js_content.read
+        js_path = Compass.configuration.javascripts_path + "#{js_dir.value}"
+
+        js_file = js_path + '.js'
+        if !File.exists?(js_file)
+            d = File.dirname(js_file)
+            Dir.mkdir(d) unless Dir.exists?(d)
+        end
+
+        File.open(js_file, 'w') do |f|
+            puts "Writing #{js_file}"
+            f.write(js_content)
+        end
+
+    end
+
+    def svg_base64(file)
+      data = Base64.encode64(File.read(file)).gsub("\n", '')
+      uri  = "data:image/svg+xml;base64,#{data}"
+
+      "url('#{uri}')"
+    end
+
+    def png_base64(file)
+      data = Base64.encode64(File.read(file)).gsub("\n", '')
+      uri  = "data:image/png;base64,#{data}"
+
+      "url('#{uri}')"
+    end
+end

data/lib/javascripts/img-delivery.js

@@ -0,0 +1,32 @@
+// JS taken from filamentgroup/unicon (https://github.com/aaronrussell/compass-rgbapng/blob/master/lib/rgbapng/functions.rb)
+window.unrepeater = function( css, foo ){
+  // expects a css array with 3 items representing CSS paths to datasvg, datapng, urlpng
+  if( !css || css.length !== 3 ){
+    return;
+  }
+
+  // Thanks Modernizr & Erik Dahlstrom
+  var w = window,
+    svg = !!w.document.createElementNS && !!w.document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect,
+
+    loadCSS = function( data ){
+      var link = w.document.createElement( "link" ),
+        ref = w.document.getElementsByTagName( "script" )[ 0 ];
+      link.rel = "stylesheet";
+      link.href = css[ data && svg ? 0 : data ? 1 : 2 ];
+      ref.parentNode.insertBefore( link, ref );
+    },
+
+    // Thanks Modernizr
+    img = new w.Image();
+
+    img.onerror = function(){
+      loadCSS( false );
+    };
+
+    img.onload = function(){
+      loadCSS( img.width === 1 && img.height === 1 );
+    };
+
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+};

metadata

@@ -0,0 +1,67 @@
+--- !ruby/object:Gem::Specification
+name: compass-img-delivery
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Javier Sánchez-Marín
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-09-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.10.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.10.0
+description: ! 'Compass plugin for managing and delivering sharp vector images to
+  all devices and browsers. I''m not reinventing the wheel, this an idea of Filament
+  Group. Take a look at Unicon http://filamentgroup.com/lab/unicon/ '
+email: javiersanchezmarin@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/img-delivery/functions.rb
+- lib/img-delivery.rb
+- lib/javascripts/img-delivery.js
+- lib/stylesheets/_img-delivery.scss
+homepage: http://github.com/vieron/compass-img-delivery
+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.24
+signing_key: 
+specification_version: 3
+summary: Compass plugin for managing and delivering sharp vector images to all devices
+  and browsers.
+test_files: []