compass-svg-sprite 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9a5b49f1d4f1da0528223cbeb3a48d14570f30fa
+  data.tar.gz: 58565af53cd47546167559b54450df4f25673443
+SHA512:
+  metadata.gz: fec9d2f9b8eaff002975b44843c2cd5efd203490465da14a984e62c8aba9d2e143b28458213c9b4d7677d195251f4fb92e05c683708cb7c237f84e8a24926e86
+  data.tar.gz: 0a280531eb20db12775a4241817324dfd32b606162ca4a36998bc8d78246be099dc7af69d6abd0ec7d9169f6297ffa6e6cadde0ada7504e5d09d815b2e7d9c19

data/lib/compass-svg-sprite.rb

@@ -0,0 +1,6 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+stylesheets_dir = File.join(extension_path, 'stylesheets')
+Compass::Frameworks.register('compass-svg-sprite', :path => extension_path, :stylesheets_directory => stylesheets_dir)
+
+require 'compass-svg-sprite/sass_extensions'

data/lib/compass-svg-sprite/core.rb

@@ -0,0 +1,147 @@
+require 'compass-svg-sprite/helpers'
+
+class SvgSprite
+
+  def initialize(config)
+    @@map = Hash.new
+    @@config = Hash.new
+    @@svgs = Hash.new
+    @@width = 0
+    @@height = 0
+
+    init_config(config)
+    init_sprite
+    write_sprite
+  end
+
+  def init_config(config)
+    @@config = map_to_hash(config)
+  end
+
+  def init_sprite
+    svg_dir = File.join(Compass.configuration.images_path, @@config['icons_dir'], "*.svg")
+    files = Dir.glob(svg_dir)
+    files.each do |file|
+      process_icon(file)
+    end
+  end
+
+  def process_icon(file)
+    fileName = File.basename(file, ".svg")
+    svg = optimize_svg(get_contents(file))
+    width = get_svg_size(svg, 'width')
+    height = get_svg_size(svg, 'height')
+    svg = change_icon_position(svg, width, height, @@width, @@config['padding'], fileName)
+    @@svgs[fileName] = Hash.new
+    @@map[fileName] = {
+        'width' => width,
+        'height' => height,
+        'colors' => get_icon_color_variants(fileName, svg, width, height)
+    }
+    @@height = height + @@config['padding'] > @@height ? height + @@config['padding'] : @@height
+  end
+
+  def optimize_svg(svg)
+    svg = svg.gsub(/.*?<svg(.*?)>(.*?)<\/svg>.*?/mi, "<svg\\1>\\2</svg>")
+    svg = svg.gsub(/(\sxmlns=".*?")/mi, "")
+    svg = svg.gsub(/(\sxmlns:xlink=".*?")/mi, "")
+    svg = svg.gsub(/(\sversion=".*?")/mi, "")
+    svg = svg.gsub(/\n|\r|\t/mi, "")
+    svg = svg.gsub(/\s\s+/mi, " ")
+    return svg
+  end
+
+  def change_icon_position(svg, width, height, x, y, id)
+    svg = svg.gsub(/(<svg.*?)(\swidth=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/(<svg.*?)(\sheight=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/(<svg.*?)(\sviewbox=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/(<svg.*?)(\sid=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/(<svg.*?)(\sx=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/(<svg.*?)(\sy=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/(<svg.*?)(\senable-background=".*?")(.*?>)/im, '\1\3')
+    svg = svg.gsub(/^(<svg)/mi, "<svg width=\"#{width}\" height=\"#{height}\" viewBox=\"0 0 #{width} #{height}\" enable-background=\"new 0 0 #{width} #{height}\" id=\"#{id}\" x=\"#{x}\" y=\"#{y}\"")
+    return svg
+  end
+
+  def get_svg_size(svg, kind)
+    size = svg.scan(/<svg.*? #{kind}="(.*?)".*?>/mi)
+    if size[0].kind_of?(Array)
+      size = size[0][0].to_f
+    else
+      viewBoxSizes = svg.scan(/<svg.*? viewbox="(.*?)"/mi)[0][0].split(" ")
+      if kind === 'width'
+        size = viewBoxSizes[2].to_f - viewBoxSizes[0].to_f
+      else
+        size = viewBoxSizes[3].to_f - viewBoxSizes[1].to_f
+      end
+    end
+    return size.round
+  end
+
+  def get_icon_color_variants(fileName, svg, width, height)
+    hash = Hash.new
+    @@width += @@config['padding']
+    hash['default'] = { 'x' => @@width.to_s, 'y' => @@config['padding'].to_s}
+    @@svgs[fileName]['default'] = change_icon_position(svg, width, height, @@width, @@config['padding'], fileName)
+    @@width += width + @@config['padding']
+    if @@config['icon_variants'].kind_of?(Hash) && @@config['icon_variants'][fileName].kind_of?(Hash)
+      @@config['icon_variants'][fileName].each do |name, value|
+        @@width += @@config['padding']
+        hash[name] = { 'x' => @@width.to_s, 'y' => @@config['padding'].to_s}
+        svg = change_icon_color(svg, value)
+        @@svgs[fileName][name] = change_icon_position(svg, width, height, @@width, @@config['padding'], fileName + '-' + name)
+        @@width += width + @@config['padding']
+      end
+    end
+    return hash
+  end
+
+  def change_icon_color(svg, color)
+    case @@config['color_replace_mode']
+      when 'stroke'
+        svg = svg.gsub(/(\sstroke=".*?")/im, " stroke=\"#{color}\"")
+      when 'fill'
+        svg = svg.gsub(/(\sfill=".*?")/im, " fill=\"#{color}\"")
+      when 'both'
+        svg = svg.gsub(/(\sstroke=".*?")/im, " stroke=\"#{color}\"")
+        svg = svg.gsub(/(\sfill=".*?")/im, " fill=\"#{color}\"")
+    end
+    return svg
+  end
+
+  def get_contents(real_path)
+    if File.readable?(real_path)
+      File.open(real_path, "rb") {|io| io.read}
+    else
+      raise Compass::Error, "File not found or cannot be read: #{real_path}"
+    end
+  end
+
+  def write_sprite
+    File.open(File.join(Compass.configuration.images_path, "sprite.svg"), "w") do |file|
+      output = "<svg xmlns=\"http://www.w3.org/2000/svg\""
+      output += " xmlns:xlink=\"http://www.w3.org/1999/xlink\""
+      output += " width=\"#{@@width}\" height=\"#{@@height}\" viewBox=\"0 0 #{@@width} #{@@height}\">\n"
+      @@svgs.each do |icon, value|
+        value.each do |color, svg|
+          output += "\t" + svg + "\n"
+        end
+      end
+      output += "</svg>"
+      file.write(output)
+    end
+  end
+
+  def self.get_map
+    return hash_to_map(@@map)
+  end
+
+  def self.get_width
+    return @@width
+  end
+
+  def self.get_height
+    return @@height
+  end
+
+end

data/lib/compass-svg-sprite/helpers.rb

@@ -0,0 +1,33 @@
+def map_to_hash(map)
+  hash = Hash.new
+  map.value.each do |key, value|
+    case value.class.name
+      when 'Sass::Script::Value::Map'
+        hash[key.value] = map_to_hash(value)
+      when 'Sass::Script::Value::Color'
+        hash[key.value] = value.to_s
+      else
+        hash[key.value] = value.value
+    end
+  end
+  return hash
+end
+
+def value_to_sass(value)
+  case value.class.name
+    when 'String'
+      sass_value = Sass::Script::Value::String.new(value)
+    when 'Fixnum'
+      sass_value = Sass::Script::Value::Number.new(value)
+    when 'Float'
+      sass_value = Sass::Script::Value::Number.new(value)
+    when 'Hash'
+      sass_value = hash_to_map(value)
+  end
+  return sass_value
+end
+
+def hash_to_map(hash)
+  new_hash = Hash[hash.map{|key, value| [value_to_sass(key), value_to_sass(value)]}]
+  return Sass::Script::Value::Map.new(new_hash)
+end

data/lib/compass-svg-sprite/sass_extensions.rb

@@ -0,0 +1,71 @@
+require 'compass-svg-sprite/core'
+require 'compass-svg-sprite/helpers'
+
+module Sass::Script::Functions
+
+  def svg_sprite_map(config)
+    SvgSprite.new(config)
+    SvgSprite.get_map
+  end
+
+  def svg_icon_position_x(map, icon_name, color)
+    icon = get_icon_map(map, icon_name, color)
+    return map_get(icon, value_to_sass('x'))
+  end
+
+  def svg_icon_position_y(map, icon_name, color)
+    icon = get_icon_map(map, icon_name, color)
+    return map_get(icon, value_to_sass('y'))
+  end
+
+  def svg_icon_map(map, icon_name, color, size)
+    icon =  map_get(map, icon_name)
+    icon_width = map_get(icon, value_to_sass('width')).value.to_f
+    icon_height = map_get(icon, value_to_sass('height')).value.to_f
+    x = svg_icon_position_x(map, icon_name, color).value.to_f
+    y = svg_icon_position_y(map, icon_name, color).value.to_f
+    bg_w = svg_sprite_width / icon_width * 100
+    bg_h = svg_sprite_height / icon_height * 100
+    new_x = x / (svg_sprite_width - icon_width) * 100
+    new_y = y / (svg_sprite_height - icon_height) * 100
+    if size.value
+      k = icon_height / size.value
+      new_width = icon_width / k
+      new_height = icon_height / k
+      icon_map = value_to_sass({
+        'width' => new_width.to_f.round,
+        'height' => new_height.to_f.round,
+        'background-size' => "#{bg_w}% #{bg_h}%",
+        'background-position' => "#{new_x}% #{new_y}%"
+      })
+    else
+      icon_map = value_to_sass({
+         'width' => icon_width,
+         'height' => icon_height,
+         'background-size' => "#{bg_w}% #{bg_h}%",
+         'background-position' => "#{new_x}% #{new_y}%"
+      })
+    end
+    return icon_map
+  end
+
+  private
+  def get_icon_map(map, icon_name, color)
+    icon_data = map_get(map, icon_name)
+    icon_variants = map_get(icon_data, value_to_sass('colors'))
+    if !map_has_key(icon_variants, color).value
+      return map_get(icon_variants, value_to_sass('default'))
+    else
+      return map_get(icon_variants, color)
+    end
+  end
+
+  def svg_sprite_width
+    return SvgSprite.get_width
+  end
+
+  def svg_sprite_height
+    return SvgSprite.get_height
+  end
+
+end

metadata

@@ -0,0 +1,48 @@
+--- !ruby/object:Gem::Specification
+name: compass-svg-sprite
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Mike Zhuk
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-03-17 00:00:00.000000000 Z
+dependencies: []
+description: Compass plugin to make svg sprite. This plugin concats all icon from
+  folder into one sprite and provide sass function to work with it.
+email: zhukmichael@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/compass-svg-sprite.rb
+- lib/compass-svg-sprite/core.rb
+- lib/compass-svg-sprite/helpers.rb
+- lib/compass-svg-sprite/sass_extensions.rb
+homepage: 
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: Compass plugin for vector sprites.
+test_files: []