RubyGems - esvg - Versions diffs - 1.1.2 → 2.0.0 - Mend

esvg 1.1.2 → 2.0.0

Files changed (12) hide show

checksums.yaml CHANGED

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 22b09f33bb221a8e3e0ca935a7e1ee2b958d4503
-  data.tar.gz: d0415a87014d73b3363fc29f5879bbb06e81bf55
+  metadata.gz: f91ffc4405922601e5479caba9d427a28d643a03
+  data.tar.gz: 9bb5670d1a45fd37173b0fe311feddb04c47a17b
 SHA512:
-  metadata.gz: bc4b112d6b50c3189dfdad7c16493b4c79fddb4dd3671b2b8422d8bc208abd431141736d70ade7a50613de0df1c96d4da6e0a4c5c757228867191027774c01e6
-  data.tar.gz: f3a7e00e22411e3dd4ab823be0077fd0509aae1ce9df3eefae7a2014a74828bb33d30f49c5e6d3d26465bbe365218080047e214d5a21d2f7f54925d34ea62442
+  metadata.gz: c14ff33cbb42652bd23dd6514e682705e5d9fd0278f1b31793ae230c0d14c3d7e24c5ab1865cde2fda0ec0e874c5839d949f08e7cbd142adf9643efe995963aa
+  data.tar.gz: 5bd5b90cb67ea78cd5125577a129bd219830202afbbfb2ab2e0837de93f3c3464bd75ac62b0efbeff143932ba783d8713b3fd8e2c4256a08c778f462c573d1f8

data/.gitignore CHANGED

@@ -7,3 +7,4 @@
 /pkg/
 /spec/reports/
 /tmp/
+/test/build

data/.travis.yml CHANGED

@@ -2,3 +2,4 @@ language: ruby
 rvm:
   - 2.1.2
 before_install: gem install bundler -v 1.10.3
+script: bundle exec clash

data/CHANGELOG.md CHANGED

@@ -1,5 +1,11 @@
 # Changelog
+### 2.0.0 (2015-07-10)
+- New: Embed via JS for cacheable icon symbols
+- New: Better integration with Rails
+- Change: CLI flags and options have been updated.
+- Change: CSS instead of Sass, for Stylesheet output.
 ### 1.1.2 (2015-06-30)
 - Fix: Measuring modified time works better now.

data/README.md CHANGED

@@ -1,8 +1,13 @@
 # Esvg
-Easily embed optimized SVGs in HTML or CSS. Use as a standalone tool or with Rails.
+Easily embed optimized SVGs in JS, HTML, or CSS. Use as a standalone tool or with Rails.
+1. Converts a directory full of SVGs into a single optimized SVG using symbols.
+2. Uses Javascript to inject SVGs into pages, so it's easily cacheable.
+3. Offers Rails application helpers for placing icons in your views.
 [![Gem Version](http://img.shields.io/gem/v/esvg.svg)](https://rubygems.org/gems/esvg)
+[![Build Status](http://img.shields.io/travis/imathis/esvg.svg)](https://travis-ci.org/imathis/esvg)
 [![License](http://img.shields.io/:license-mit-blue.svg)](http://imathis.mit-license.org)
 ## Installation
@@ -23,23 +28,27 @@ Or install it yourself as:
 ## Usage: Rails
-Add SVG files to your `app/assets/svg_icons/` directory, then embed these SVGs in your application layout at the top of the `<body>`, like this:
+First, add SVG files to your `app/assets/svg_icons/` directory.
+### Inject SVG symbols
+Then create an `esvg.js.erb` in your `app/assets/javascripts/` and add the following:
 ```
-<body>
-<%= embed_svgs %>
-...
-</body>
+<%= Esvg.embed %>
 ```
-To include only a subset of SVG icons on a page you can pass an array of icon names like this.
+Finally add the following to your `application.js`
 ```
-# Say we're on user/show
-<%= embed_svgs %w(siloutte gear menu) %>
+//= require esvg
 ```
-To place an SVG icon, use the `svg_icon` helper.
+This script will inject your SVG symbols at the top of your site's `<body>` as soon as the DOM is ready, and after any Turbolinks `page:change` event.
+### Place an icon
+To place an SVG icon, use the `svg_icon` helper. This helper will embed an SVG `use` tag which will reference the appropriate symbol. Here's how it works.
 ```
 # Syntax: svg_icon name, [options]
@@ -73,42 +82,27 @@ To place an SVG icon, use the `svg_icon` helper.
 $ esvg PATH [options]
 # Examples:
-$ esvg                          # Read icons from current directory, write HTML to ./esvg.html
-$ esvg icons --output embedded  # Read icons from 'icons' directory, write HTML to embedded/esvg.html
-$ esvg --stylesheet             # Embed icons in Stylesheet and write to ./esvg.scss
-$ esvg --config foo.yml         # Read confguration from foo.yml
+$ esvg                          # Read icons from current directory, write js to ./esvg.js
+$ esvg icons                    # Read icons from 'icons' directory, write js to ./esvg.js
+$ esvg --output embedded        # Read icons from current directory, write js to embedded/esvg.js
+$ esvg -f --format              # Embed icons in Stylesheet and write to ./esvg.scss
+$ esvg -c --config foo.yml      # Read confguration from foo.yml (otherwise, defaults to esvg.yml, or config/esvg.yml)
 ```
-## Configuration: Rails
-Esvg reads configuration from `config/esvg.yml` if used with Rails.
-Options when used with Rails:
-```
-path: app/assets/svg_icons  # Where to find SVG icons
-namespace: icon             # Add to the filename when creating symbol ids
-namespace_after: true       # Add after the name, e.g. kitten-icon
-stylesheet_embed: false     # Embed as a stylesheet
-font_size: 1em              # Default size for SVGs (if embeded in stylesheets)
-```
-## Configuration: stand-alone CLI
+## Configuration
 If you're using esvg from the command line, configuration files are read from `./esvg.yml` or you can pass a path with the `--config` option to read the config file from elsewhere.
 ```
-path: .                     # Where to find SVG icons
-namespace: icon             # Add to the filename when creating symbol ids
-namespace_after: true       # Add after the name, e.g. kitten-icon
+path: .                     # Where to find SVG icons (Rails defaults to app/assets/esvg)
+output_path: .              # Where to write output files (CLI only)
+format: js                  # Format for output (js, html, css)
+base_class: svg-icon        # Select all icons with this base classname
+namespace: icon             # Namespace for symbol ids or CSS classnames
+namespace_before: true      # Add namespace before, e.g. icon-kitten
-stylesheet_embed: false     # Embed as a stylesheet
 font_size: 1em              # Default size for SVGs (if embeded in stylesheets)
-output_path: .              # Where to write output files
 ```
 ## Contributing

data/esvg.gemspec CHANGED

@@ -23,4 +23,5 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "bundler", "~> 1.10"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "pry-byebug"
+  spec.add_development_dependency "clash"
 end

data/exe/esvg CHANGED

@@ -8,25 +8,19 @@ require 'esvg'
 options = {}
 OptionParser.new do |opts|
-  opts.on("-s", "--stylesheet", "Embed SVGs in Sass file") do
-    options[:stylesheet_embed] = true
+  opts.on("-f", "--format TYPE", String, "Options: css, js, html (defaults to js)") do |format|
+    options[:format] = format
   end
-  opts.on("-c", "--config PATH", String, "Path to a config file (default: esvg.yml or config/esvg.yml)") do |path|
-    options[:config_file] = path
+  opts.on("-o", "--output PATH", String, "Where should JS/SCSS/HTML files be written, (default: current directory)") do |path|
+    options[:output_path] = path
   end
-  opts.on("-o", "--output PATH", String, "Where should SCSS/HTML files be written, (default: current directory)") do |path|
-    options[:output_path] = path
+  opts.on("-c", "--config PATH", String, "Path to a config file (default: esvg.yml, config/esvg.yml)") do |path|
+    options[:config_file] = path
   end
 end.parse!
 options[:path] = ARGV.shift
-esvg = Esvg::SVG.new(options)
-if options[:stylesheet_embed]
-  esvg.write_stylesheet
-else
-  esvg.write_html
-end
+esvg = Esvg::SVG.new(options).write

data/lib/esvg.rb CHANGED

@@ -13,7 +13,7 @@ module Esvg
   extend self
   def icons(options={})
-    @icons ||= SVG.new(options)
+    @icons = SVG.new(options)
     if rails? && ::Rails.env != 'production' && @icons.modified?
       @icons.read_icons
@@ -22,8 +22,8 @@ module Esvg
     @icons
   end
-  def embed_svgs(names=[])
-    icons.html(names).html_safe
+  def embed(options={})
+    icons(options).embed
   end
   def svg_icon(name, options={})

data/lib/esvg/helpers.rb CHANGED

@@ -1,6 +1,6 @@
 module Esvg::Helpers
-  def embed_svgs(names=[])
-    Esvg.embed_svgs(names)
+  def embed_svgs(options={})
+    Esvg.embed(options).html_safe
   end
   def svg_icon(name, options={})

data/lib/esvg/svg.rb CHANGED

@@ -6,16 +6,15 @@ module Esvg
       path: Dir.pwd,
       base_class: 'svg-icon',
       namespace: 'icon',
-      namespace_after: true,
+      namespace_before: true,
       font_size: '1em',
-      stylesheet_embed: false,
-      output_path: Dir.pwd
+      output_path: Dir.pwd,
+      names: [],
+      format: 'js'
     }
     CONFIG_RAILS = {
-      path: "app/assets/svg_icons",
-      css_path: "app/assets/stylesheets/_svg_icons.scss",
-      html_path: "app/views/shared/_svg_icons.html"
+      path: "app/assets/esvg"
     }
     def initialize(options={})
@@ -23,6 +22,17 @@ module Esvg
       read_icons
     end
+    def embed
+      case config[:format]
+      when "html"
+        html
+      when "js"
+        js
+      when "css"
+        css
+      end
+    end
     def modified?
       mtime = File.mtime(find_files.last)
       @mtime != mtime
@@ -42,36 +52,52 @@ module Esvg
       end
     end
-    def write_stylesheet
+    def write
+      case config[:format]
+      when "html"
+        write_html
+      when "js"
+        write_js
+      when "css"
+        write_css
+      end
+    end
+    def write_file(path, contents)
+      FileUtils.mkdir_p(File.expand_path(File.dirname(path)))
+      File.open(path, 'w') do |io|
+        io.write(contents)
+      end
+    end
+    def write_js
       unless @files.empty?
-        FileUtils.mkdir_p(File.expand_path(File.dirname(config[:css_path])))
+        write_file config[:js_path], js
+      end
+    end
-        File.open(config[:css_path], 'w') do |io|
-          io.write(stylesheet)
-        end
+    def write_css
+      unless @files.empty?
+        write_file config[:css_path], css
       end
     end
     def write_html
       unless @files.empty?
-        FileUtils.mkdir_p(File.expand_path(File.dirname(config[:html_path])))
-        File.open(config[:html_path], 'w') do |io|
-          io.write(html)
-        end
+        write_file config[:html_path], html
       end
     end
-    def stylesheet
+    def css
       styles = []
-      preamble = %Q{%svg-icon {
+      classes = files.keys.map{|k| ".#{icon_name(k)}"}.join(', ')
+      preamble = %Q{#{classes} {
     clip: auto;
     font-size: #{config[:font_size]};
-    background: {
-      size: auto 1em;
-      repeat: no-repeat;
-      position: center center;
-    }
+    background-size: auto 1em;
+    background-repeat: no-repeat;
+    background-position: center center;
     display: inline-block;
     overflow: hidden;
     height: 1em;
@@ -86,13 +112,13 @@ module Esvg
                     .gsub(/>/, '%3E') # escape >
                     .gsub(/#/, '%23') # escape #
                     .gsub(/\n/,'')    # remove newlines
-        styles << ".#{icon_name(name)} { background-image: url('data:image/svg+xml;utf-8,#{f}'); @extend %svg-icon; }"
+        styles << ".#{icon_name(name)} { background-image: url('data:image/svg+xml;utf-8,#{f}'); }"
       end
       styles.join("\n")
     end
-    def html(names=[])
-      names = Array(names) # In case a single string is passed
+    def html
+      names = Array(config[:names]) # In case a single string is passed
       if @files.empty?
         ''
@@ -112,10 +138,30 @@ module Esvg
           icons = @svgs.select { |k,v| names.include?(k) }
         end
-        %Q{<svg class="icon-symbols" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">#{icons.values.join("\n")}</svg>}
+        %Q{<svg id="esvg-symbols" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">#{icons.values.join("\n")}</svg>}
       end
     end
+    def js
+      %Q{var esvg = {
+  embed: function(){
+    if (!document.querySelector('#esvg-symbols')) {
+      document.querySelector('body').insertAdjacentHTML('afterbegin', '#{html.gsub(/\n/,'').gsub("'"){"\\'"}}')
+    }
+  }
+}
+// If DOM is already ready, embed SVGs
+if (document.readyState == 'interactive') { esvg.embed() }
+// Handle Turbolinks (or other things that fire page change events)
+document.addEventListener("page:change", function(event) { esvg.embed() })
+// Handle standard DOM ready events
+document.addEventListener("DOMContentLoaded", function(event) { esvg.embed() })
+}
+    end
     def svg_icon(file, options={})
       name = icon_name(file)
       %Q{<svg class="#{config[:base_class]} #{name} #{options[:class] || ""}" #{dimensions(@files[file])}><use xlink:href="##{name}"/>#{title(options)}#{desc(options)}</svg>}.html_safe
@@ -138,15 +184,16 @@ module Esvg
         paths = [options[:config_file], 'config/esvg.yml', 'esvg.yml'].compact
         config = if path = paths.select{ |p| File.exist?(p)}.first
-          CONFIG.merge(symbolize_keys(YAML.load(File.read(path) || {}))).merge(options)
+          CONFIG.merge(symbolize_keys(YAML.load(File.read(path) || {})))
         else
-          CONFIG.merge(options)
+          CONFIG
         end
         config.merge!(CONFIG_RAILS) if Esvg.rails?
-        config.merge(options)
+        config.merge!(options)
-        config[:css_path]  ||= File.join(config[:output_path], 'esvg.scss')
+        config[:js_path]   ||= File.join(config[:output_path], 'esvg.js')
+        config[:css_path]  ||= File.join(config[:output_path], 'esvg.css')
         config[:html_path] ||= File.join(config[:output_path], 'esvg.html')
         config.delete(:output_path)
@@ -172,12 +219,15 @@ module Esvg
       if @files[name].nil?
         raise "No icon named #{name} exists at #{config[:path]}"
       end
+      classname(name)
+    end
+    def classname(name)
       name = dasherize(name)
-      if config[:namespace_after]
-        "#{name}-#{config[:namespace]}"
-      else
+      if config[:namespace_before]
         "#{config[:namespace]}-#{name}"
+      else
+        "#{name}-#{config[:namespace]}"
       end
     end

data/lib/esvg/version.rb CHANGED

@@ -1,3 +1,3 @@
 module Esvg
-  VERSION = "1.1.2"
+  VERSION = "2.0.0"
 end

metadata CHANGED

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: esvg
 version: !ruby/object:Gem::Version
-  version: 1.1.2
+  version: 2.0.0
 platform: ruby
 authors:
 - Brandon Mathis
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2015-06-30 00:00:00.000000000 Z
+date: 2015-07-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: svg_optimizer
@@ -66,6 +66,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: clash
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description:
 email:
 - brandon@imathis.com