gkh-fontcustom 1.3.7

data/lib/fontcustom/utility.rb

@@ -0,0 +1,117 @@
+require "json"
+require "thor/actions"
+require "thor/shell"
+require "thor/shell/basic"
+require "thor/shell/color"
+
+# Requires access to:
+#   @options or @cli_options
+#   @manifest
+module Fontcustom
+  module Utility
+    include Thor::Actions
+
+    #
+    # Hacks that allow Thor::Actions and Thor::Shell to be used in Fontcustom classes.
+    #
+
+    def self.shell
+      @shell || Thor::Shell::Color.new
+    end
+
+    def shell
+      Fontcustom::Utility.shell
+    end
+
+    def behavior
+      :invoke
+    end
+
+    def say_status(*args)
+      shell.say_status *args
+    end
+
+    def destination_root
+      @destination_stack ||= [project_root]
+      @destination_stack.last
+    end
+
+    def source_paths
+      @source_paths ||= [File.join(Fontcustom.gem_lib, "templates"), Dir.pwd]
+    end
+
+    #
+    # Options
+    #
+
+    module HashWithMethodAccess
+      def method_missing(method, arg = nil)
+        if method[-1, 1] == "="
+          self[method[0...-1].to_sym] = arg
+        else
+          self[method.to_sym]
+        end
+      end
+    end
+
+    def symbolize_hash(hash)
+      hash.inject({}) { |memo, (k, v)| memo[k.to_sym] = v; memo }
+    end
+
+    def methodize_hash(hash)
+      hash.extend HashWithMethodAccess
+    end
+
+    #
+    # Paths
+    #
+
+    def project_root
+      if @manifest.is_a? String
+        File.dirname @manifest
+      else
+        File.dirname @manifest.manifest
+      end
+    end
+
+    #
+    # File Manipulation
+    #
+
+    def write_file(file, content = "", message = nil, message_body = nil)
+      File.open(file, "w") { |f| f.write(content) }
+      if message
+        body = message_body || file
+        say_message message, body
+      end
+    end
+
+    #
+    # Messages
+    #
+
+    def say_message(status, message, color = nil)
+      return if options[:quiet] && status != :error && status != :debug
+      color = :red if [:error, :debug, :warn].include?(status)
+      say_status status, message, color
+    end
+
+    def say_changed(status, changed)
+      return if options[:quiet] || ! options[:debug] && status == :delete
+      say_status status, changed.join(line_break)
+    end
+
+   # magic number for Thor say_status line breaks
+    def line_break(n = 14)
+      "\n#{" " * n}"
+    end
+
+    def options
+      if @data
+        @data[:options]
+      else
+        @options || @cli_options || @config_options || {}
+      end
+    end
+  end
+end

data/lib/fontcustom/version.rb

@@ -0,0 +1,3 @@
+module Fontcustom
+  VERSION = "1.3.7"
+end

data/lib/fontcustom/watcher.rb

@@ -0,0 +1,90 @@
+require "fontcustom"
+require "listen"
+
+module Fontcustom
+  class Watcher
+    include Utility
+
+    def initialize(options, is_test = false)
+      @base = Fontcustom::Base.new options
+      @options = @base.options
+      @is_test = is_test
+
+      templates = @options[:templates].dup.map { |template| File.basename(template) }
+      packaged = %w|preview css scss scss-rails|
+      templates.delete_if { |template| packaged.include?(template) }
+
+      create_listener(templates)
+    end
+
+    def watch
+      compile unless @options[:skip_first]
+      start
+    rescue SignalException # Catches Ctrl + C
+      stop
+    end
+
+    private
+
+    def create_listener(templates)
+      listen_options = {}
+      listen_options[:polling_fallback_message] = false if @is_test
+
+      listen_dirs = [@options[:input][:vectors]]
+      listen_dirs << @options[:input][:templates] unless templates.empty?
+
+      if listen_eq2
+        listen_options[:only] = /(#{templates.join("|")}|.+\.svg)$/
+        @listener = Listen.to(listen_dirs, listen_options, &callback)
+      else
+        listen_options[:filter] = /(#{templates.join("|")}|.+\.svg)$/
+        listen_options[:relative_paths] = true
+        @listener = Listen::Listener.new(listen_dirs, listen_options, &callback)
+      end
+    end
+
+    def start
+      if @is_test # Non-blocking listener
+        @listener.start
+      else
+        if listen_eq2
+          @listener.start.join
+        else
+          @listener.start!
+        end
+      end
+    end
+
+    def stop
+      @listener.stop
+      shell.say "\nFont Custom is signing off. Good night and good luck.", :yellow
+    end
+
+    def callback
+      Proc.new do |modified, added, removed|
+        begin
+          say_message :changed, modified.join(", ") unless modified.empty?
+          say_message :added, added.join(", ") unless added.empty?
+          say_message :removed, removed.join(", ") unless removed.empty?
+          changed = modified + added + removed
+          compile unless changed.empty?
+        rescue Fontcustom::Error => e
+          say_message :error, e.message
+        end
+      end
+    end
+
+    def compile
+      @base.compile
+    end
+
+    def listen_eq2
+      begin
+        require 'listen/version'
+        ::Listen::VERSION =~ /^2\./
+      rescue LoadError
+        false
+      end
+    end
+  end
+end

data/spec/fixtures/example/_example-rails.scss

@@ -0,0 +1,50 @@
+//
+// Icon Font: example
+//
+
+@font-face {
+  font-family: "example";
+  src: font-url("../foo/bar/example.eot?") format("embedded-opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "example";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
+       font-url("../foo/bar/example.ttf") format("truetype"),
+       font-url("../foo/bar/example.svg#example") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "example";
+    src: font-url("../foo/bar/example.svg#example") format("svg");
+  }
+}
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.icon-C:before,
+.icon-D:before,
+.icon-a_R3ally-eXotic-f1Le-Name:before {
+  display: inline-block;
+  font-family: "example";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+.icon-C:before { content: "\f100"; }
+.icon-D:before { content: "\f101"; }
+.icon-a_R3ally-eXotic-f1Le-Name:before { content: "\f102"; }

data/spec/fixtures/example/example-preview.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>example glyphs preview</title>
+
+    <style>
+      /* Page Styles */
+
+      * {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        background: #fff;
+        color: #444;
+        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      a,
+      a:visited {
+        color: #888;
+        text-decoration: underline;
+      }
+      a:hover,
+      a:focus { color: #000; }
+
+      header {
+        border-bottom: 2px solid #ddd;
+        margin-bottom: 20px;
+        overflow: hidden;
+        padding: 20px 0;
+      }
+
+      header h1 {
+        color: #888;
+        float: left;
+        font-size: 36px;
+        font-weight: 300;
+      }
+
+      header a {
+        float: right;
+        font-size: 14px;
+      }
+
+      .container {
+        margin: 0 auto;
+        max-width: 1200px;
+        min-width: 960px;
+        padding: 0 40px;
+        width: 90%;
+      }
+
+      .glyph {
+        border-bottom: 1px dotted #ccc;
+        padding: 10px 0 20px;
+        margin-bottom: 20px;
+      }
+
+      .preview-glyphs { vertical-align: bottom; }
+
+      .preview-scale {
+        color: #888;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+
+      .step {
+        display: inline-block;
+        line-height: 1;
+        position: relative;
+        width: 10%;
+      }
+
+      .step .letters,
+      .step i {
+        -webkit-transition: opacity .3s;
+        -moz-transition: opacity .3s;
+        -ms-transition: opacity .3s;
+        -o-transition: opacity .3s;
+        transition: opacity .3s;
+      }
+
+      .step:hover .letters { opacity: 1; }
+      .step:hover i { opacity: .3; }
+
+      .letters {
+        opacity: .3;
+        position: absolute;
+      }
+
+      .characters-off .letters { display: none; }
+      .characters-off .step:hover i { opacity: 1; }
+
+      
+      .size-12 { font-size: 12px; }
+      
+      .size-14 { font-size: 14px; }
+      
+      .size-16 { font-size: 16px; }
+      
+      .size-18 { font-size: 18px; }
+      
+      .size-21 { font-size: 21px; }
+      
+      .size-24 { font-size: 24px; }
+      
+      .size-36 { font-size: 36px; }
+      
+      .size-48 { font-size: 48px; }
+      
+      .size-60 { font-size: 60px; }
+      
+      .size-72 { font-size: 72px; }
+      
+
+      .usage { margin-top: 10px; }
+
+      .usage input {
+        font-family: monospace;
+        margin-right: 3px;
+        padding: 2px 5px;
+        text-align: center;
+      }
+
+      .usage .point { width: 150px; }
+
+      .usage .class { width: 250px; }
+
+      footer {
+        color: #888;
+        font-size: 12px;
+        padding: 20px 0;
+      }
+
+      /* Icon Font: example */
+
+      @font-face {
+  font-family: "example";
+  src: url("./example.eot?") format("embedded-opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "example";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),
+       url("./example.ttf") format("truetype"),
+       url("./example.svg#example") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "example";
+    src: url("./example.svg#example") format("svg");
+  }
+}
+
+      [data-icon]:before { content: attr(data-icon); }
+
+      [data-icon]:before,
+      .icon-C:before,
+.icon-D:before,
+.icon-a_R3ally-eXotic-f1Le-Name:before {
+        display: inline-block;
+  font-family: "example";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+      }
+
+      .icon-C:before { content: "\f100"; }
+.icon-D:before { content: "\f101"; }
+.icon-a_R3ally-eXotic-f1Le-Name:before { content: "\f102"; }
+    </style>
+
+    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
+    <script>
+      function toggleCharacters() {
+        var body = document.getElementsByTagName('body')[0];
+        body.className = body.className === 'characters-off' ? '' : 'characters-off';
+      }
+    </script>
+  </head>
+
+  <body class="characters-off">
+    <div id="page" class="container">
+      <header>
+        <h1>example contains 3 glyphs:</h1>
+        <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
+      </header>
+
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-C" class="icon-C"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-C" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-D" class="icon-D"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-D" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-a_R3ally-eXotic-f1Le-Name" class="icon-a_R3ally-eXotic-f1Le-Name"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-a_R3ally-eXotic-f1Le-Name" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
+        </div>
+      </div>
+      
+
+      <footer>
+        Made with love using <a href="http://fontcustom.com">Font Custom</a>.
+      </footer>
+    </div>
+  </body>
+</html>