inkcite 1.13.0 → 1.14.0

data/lib/inkcite/renderer/table_base.rb

@@ -72,9 +72,15 @@ module Inkcite
         width = opt[:width]
         element[:width] = width unless width.blank?
 
+        mobile_width = opt[MOBILE_WIDTH]
+        element.mobile_style[:width] = px(mobile_width) unless none?(mobile_width)
+
         height = opt[:height].to_i
         element[:height] = height if height > 0
 
+        mobile_height = opt[MOBILE_HEIGHT]
+        element.mobile_style[:height] = px(mobile_height) unless none?(mobile_height)
+
       end
 
       private

data/lib/inkcite/renderer/td.rb

@@ -75,8 +75,10 @@ module Inkcite
           # If the table defines mobile-padding, then apply the correct mobile
           # style to this td - and its !important if there is padding on
           # the td already.
-          mobile_padding = table_opt[MOBILE_PADDING] || opt[MOBILE_PADDING]
-          td.mobile_style[:padding] = px(mobile_padding) unless mobile_padding.blank? || mobile == HIDE
+          unless mobile == HIDE
+            mix_mobile_padding td, table_opt, ctx
+            mix_mobile_padding td, opt, ctx
+          end
 
           # Need to handle Fluid-Drop HTML injection here before the rest of the
           # TD is formalized.  Fluid-Drop removes the width attribute of the cell
@@ -147,6 +149,9 @@ module Inkcite
 
           end
 
+          # Support custom alignment on mobile devices
+          mix_mobile_text_align td, opt, ctx
+
           rowspan = opt[:rowspan].to_i
           td[:rowspan] = rowspan if rowspan > 0
 

data/lib/inkcite/renderer/video_preview.rb

@@ -24,6 +24,11 @@ module Inkcite
         # image name is frozen to ensure it isn't modified later.
         src = opt[:src].freeze
 
+        # This will hold the names of each of the frames, sans any full
+        # URL qualification (e.g. images/)  These are interpolated to
+        # include the index
+        frame_srcs = []
+
         # This will hold all frame source file names interpolated to include
         # index (e.g. %1 being replaced with the frame number, if present).
         frames = []
@@ -40,6 +45,7 @@ module Inkcite
         # this loop also verifies that the referenced image exists.
         frame_count.times do |n|
           frame_src = src.gsub('%1', "#{n + 1}")
+          frame_srcs << frame_src
           frames << image_url(frame_src, opt, ctx, false, false)
         end
 
@@ -91,7 +97,7 @@ module Inkcite
         html << Element.new('a', { :id => id, :href => quote(href), :class => hover_klass, :bgcolor => bgcolor, :bggradient => gradient, :block => true }).to_helper
 
         table = Element.new('table', {
-                :width => '100%', :background => first_frame, BACKGROUND_SIZE => 'cover',
+                :width => '100%', :background => frame_srcs[0], BACKGROUND_SIZE => 'cover',
                 Table::TR_TRANSITION => %q("all .5s cubic-bezier(0.075, 0.82, 0.165, 1)")
             })
 

data/lib/inkcite/util.rb

@@ -52,6 +52,62 @@ module Inkcite
       end
     end
 
+    # Conversion of HSL to RGB color courtesy of
+    # http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+    def self.hsl_to_color h, s, l
+
+      # The algorithm expects h, s and l to be values between 0-1.
+      h = h / 360.0
+      s = s / 100.0
+      l = l / 100.0
+
+      # Wrap the color wheel if the hue provided is less than or
+      # greater than 1
+      h += 1.0 while h < 0
+      h -= 1.0 while h > 1
+
+      s = 0.0 if s < 0
+      s = 1.0 if s > 1
+
+      l = 0.0 if l < 0
+      l = 1.0 if l > 1
+
+      r = g = b = 0
+
+      if s == 0
+        r = g = b = l
+
+      else
+        q = l < 0.5 ? l * (1 + s) : l + s - l * s
+        p = 2 * l - q
+        r = hue_to_rgb(p, q, h + 1/3.0)
+        g = hue_to_rgb(p, q, h)
+        b = hue_to_rgb(p, q, h - 1/3.0)
+
+      end
+
+      r = (r * 255).round(0)
+      g = (g * 255).round(0)
+      b = (b * 255).round(0)
+
+      "##{rgb_to_hex(r)}#{rgb_to_hex(g)}#{rgb_to_hex(b)}"
+    end
+
+    def self.hue_to_rgb p, q, t
+      t += 1 if t < 0
+      t -= 1 if t > 1
+      return (p + (q - p) * 6.0 * t) if (t < 1.0/6.0)
+      return q if (t < 0.5)
+      return (p + (q - p) * (2/3.0 - t) * 6) if (t < 2/3.0)
+      p
+    end
+
+    # RGB to hex courtesy of
+    # http://blog.lebrijo.com/converting-rgb-colors-to-hexadecimal-with-ruby/
+    def self.rgb_to_hex val
+      val.to_s(16).rjust(2, '0').downcase
+    end
+
     def self.lighten color, amount=0.6
       return WHITE if color.nil?
       rgb = color.gsub('#', '').scan(/../).map { |c| c.hex }

data/lib/inkcite/version.rb

@@ -1,3 +1,3 @@
 module Inkcite
-  VERSION = "1.13.0"
+  VERSION = "1.14.0"
 end

data/lib/inkcite/view.rb

@@ -86,6 +86,7 @@ module Inkcite
 
       # Initializing to prevent a ruby verbose warning.
       @footnotes = nil
+      @substitutions = nil
 
     end
 
@@ -338,7 +339,15 @@ module Inkcite
     # Returns the array of browser prefixes that need to be included in
     # CSS styles based on which version of the email this is.
     def prefixes
-      [ '', '-webkit-' ]
+      _prefixes = [ '' ]
+
+      # In development mode, include all prefixes for maximum compatibility.
+      _prefixes += %w(-moz- -ms- -o-) if development?
+
+      # Always include webkit for targeting mobile devices.
+      _prefixes << '-webkit-'
+
+      _prefixes
     end
 
     def preview?
@@ -376,6 +385,9 @@ module Inkcite
       # <!-- commented out --> to ensure the email is as small as possible.
       source = Minifier.remove_comments(source, self)
 
+      # Perform global substitution of characters - e.g. ’ into ' if that's
+      substitution_map.each_pair { |orig, replace| source.gsub!(orig, replace) }
+
       # Protect against unsupported characters
       source = Renderer.fix_illegal_characters(source, self)
 
@@ -509,6 +521,32 @@ module Inkcite
       @subject ||= Renderer.render((self[:subject] || self[:title] || UNTITLED_EMAIL), self)
     end
 
+    # Returns a map where the strings are an original string
+    # and the value is what should replace it - used for
+    # automating common replacements - e.g. trademark symbols
+    # or apostrophes going in the wrong direction
+    def substitution_map
+
+      if @substitutions.nil?
+
+        # Initialize the substitutions map which will be populated
+        # if the local file exists.
+        @substitutions = {}
+
+        # Preload the array of footnotes if they exist
+        substitutions_tsv_file = @email.project_file(SUBSTITUTIONS_TSV_FILE)
+        if File.exist?(substitutions_tsv_file)
+          CSV.foreach(substitutions_tsv_file, { :col_sep => "\t" }) do |fn|
+            original = fn[0]
+            @substitutions[original] = fn[1].to_s unless original.blank?
+          end
+        end
+
+      end
+
+      @substitutions
+    end
+
     def tag_stack tag
       @tag_stack ||= Hash.new()
       @tag_stack[tag] ||= TagStack.new(tag, self)
@@ -623,6 +661,9 @@ module Inkcite
     # Tab-separated file containing footnote declarations.
     FOOTNOTES_TSV_FILE = 'footnotes.tsv'
 
+    # Tab-separated file containing global substitution values.
+    SUBSTITUTIONS_TSV_FILE = 'substitutions.tsv'
+
     def assert_in_browser msg
       raise msg if email? && !development?
     end

data/test/animation_spec.rb

@@ -1,17 +1,20 @@
-
-
 describe Inkcite::Animation do
 
   before do
     @view = Inkcite::Email.new('test/project/').view(:development, :email)
+    @production_view = Inkcite::Email.new('test/project/').view(:production, :email)
   end
 
   it 'supports browser prefixing' do
-    Inkcite::Renderer::Style.new(nil, @view, { :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite')
+    Inkcite::Renderer::Style.new(nil, @view, { :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-moz-animation:video-frames 5s ease infinite;-ms-animation:video-frames 5s ease infinite;-o-animation:video-frames 5s ease infinite;-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite')
+  end
+
+  it 'supports limited browser prefixing in production' do
+    Inkcite::Renderer::Style.new(nil, @production_view, { :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite')
   end
 
   it 'supports browser prefixing specific items only' do
-    Inkcite::Renderer::Style.new(nil, @view, { :left => '25%', :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite;left:25%')
+    Inkcite::Renderer::Style.new(nil, @view, { :left => '25%', :animation => 'video-frames 5s ease infinite' }).to_s.must_equal('-moz-animation:video-frames 5s ease infinite;-ms-animation:video-frames 5s ease infinite;-o-animation:video-frames 5s ease infinite;-webkit-animation:video-frames 5s ease infinite;animation:video-frames 5s ease infinite;left:25%')
   end
 
   it 'can instantiate an animation keyframe' do
@@ -35,8 +38,38 @@ describe Inkcite::Animation do
     anim = Inkcite::Animation.new('snowflake7', @view)
     anim.add_keyframe 5, { :top => '-10px', :left => '22%', :transform => 'rotate(14deg)' }
     anim.add_keyframe 25, { :top => '100%', :left => '18%' }
-    anim.to_keyframe_css.must_equal(%Q(@keyframes snowflake7 {\n5% { left:22%;top:-10px;transform:rotate(14deg) }\n25% { left:18%;top:100% }\n}\n@-webkit-keyframes snowflake7 {\n5% { -webkit-transform:rotate(14deg);left:22%;top:-10px }\n25% { left:18%;top:100% }\n}\n))
+    anim.to_keyframe_css.must_equal(%Q(@keyframes snowflake7 {\n5% { left:22%;top:-10px;transform:rotate(14deg) }\n25% { left:18%;top:100% }\n}\n@-moz-keyframes snowflake7 {\n5% { -moz-transform:rotate(14deg);left:22%;top:-10px }\n25% { left:18%;top:100% }\n}\n@-ms-keyframes snowflake7 {\n5% { -ms-transform:rotate(14deg);left:22%;top:-10px }\n25% { left:18%;top:100% }\n}\n@-o-keyframes snowflake7 {\n5% { -o-transform:rotate(14deg);left:22%;top:-10px }\n25% { left:18%;top:100% }\n}\n@-webkit-keyframes snowflake7 {\n5% { -webkit-transform:rotate(14deg);left:22%;top:-10px }\n25% { left:18%;top:100% }\n}\n))
+  end
+
+  it 'supports keyframe duration' do
+    keyframe = Inkcite::Animation::Keyframe.new(25, @view)
+    keyframe.duration = 15.9
+    keyframe[:top] = '-15%'
+    keyframe.to_css('').must_equal('25%, 40.9% { top:-15% }')
+  end
+
+  it 'reports when an animation is blank' do
+    anim = Inkcite::Animation.new('snowflake7', @view)
+    anim.blank?.must_equal(true)
+    anim.add_keyframe 25, { :top => '100%', :left => '18%' }
+    anim.blank?.must_equal(false)
   end
 
+  it 'supports composite animations' do
+
+    comp_anim = Inkcite::Animation::Composite.new()
+
+    explosion = Inkcite::Animation.new('explosion', @view)
+    explosion.duration = 8
+    explosion.timing_function = Inkcite::Animation::EASE_OUT
+    comp_anim << explosion
+
+    gravity = Inkcite::Animation.new('gravity', @view)
+    gravity.iteration_count = 4
+    comp_anim << gravity
+
+    comp_anim.to_s.must_equal(%q(8s ease-out infinite explosion, 1s linear 4 gravity))
+
+  end
 
 end

data/test/renderer/div_spec.rb

@@ -117,4 +117,34 @@ describe Inkcite::Renderer::Div do
     @view.media_query.find_by_klass('m1').declarations.must_match('width:78px !important')
   end
 
+  it 'supports mobile padding' do
+    Inkcite::Renderer.render('{div mobile-padding="15px 10px"}{/div}', @view).must_equal('<div class="m1"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('padding:15px 10px')
+  end
+
+  it 'supports directional mobile padding' do
+    Inkcite::Renderer.render('{div mobile-padding-top=15}{/div}', @view).must_equal('<div class="m1"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('padding-top:15px')
+  end
+
+  it 'supports directional mobile padding override' do
+    Inkcite::Renderer.render('{div mobile-padding=30px mobile-padding-top=15}{/div}', @view).must_equal('<div class="m1"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('padding:30px;padding-top:15px')
+  end
+
+  it 'supports mobile text alignment' do
+    Inkcite::Renderer.render('{div mobile-text-align="center"}{/div}', @view).must_equal('<div class="m1"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('text-align:center')
+  end
+
+  it 'supports mobile text alignment override' do
+    Inkcite::Renderer.render('{div text-align="right" mobile-text-align="center"}{/div}', @view).must_equal('<div class="m1" style="text-align:right"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('text-align:center !important')
+  end
+
+  it 'supports mobile display override' do
+    Inkcite::Renderer.render('{div mobile-display="block"}{/div}', @view).must_equal('<div class="m1"></div>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('display:block')
+  end
+
 end

data/test/renderer/td_spec.rb

@@ -17,6 +17,16 @@ describe Inkcite::Renderer::Td do
     @view.media_query.find_by_klass('m1').to_css.must_equal('td.m1 { padding:15px }')
   end
 
+  it 'supports directional mobile padding' do
+    Inkcite::Renderer.render('{td mobile-padding-top=15}', @view).must_equal('<td class="m1">')
+    @view.media_query.find_by_klass('m1').to_css.must_equal('td.m1 { padding-top:15px }')
+  end
+
+  it 'supports mobile text alignment' do
+    Inkcite::Renderer.render('{td mobile-text-align="center"}{/td}', @view).must_equal('<td class="m1"></td>')
+    @view.media_query.find_by_klass('m1').declarations.must_match('text-align:center')
+  end
+
   it 'reuses a style that matches mobile padding' do
     Inkcite::Renderer.render('{table mobile-padding=15}{td}{table mobile-padding=15}{td}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0><tr><td class="m1"><table border=0 cellpadding=0 cellspacing=0><tr><td class="m1">')
     @view.media_query.find_by_klass('m1').to_css.must_equal('td.m1 { padding:15px }')
@@ -148,4 +158,19 @@ describe Inkcite::Renderer::Td do
     Inkcite::Renderer.render('{td nowrap}', @view).must_equal('<td nowrap>')
   end
 
+  it 'supports mobile width override' do
+    Inkcite::Renderer.render('{td width=30 mobile-width=15}', @view).must_equal('<td class="m1" width=30>')
+    @view.media_query.find_by_klass('m1').to_css.must_equal('td.m1 { width:15px }')
+  end
+
+  it 'supports mobile height override' do
+    Inkcite::Renderer.render('{td height=30 mobile-height=15}', @view).must_equal('<td class="m1" height=30>')
+    @view.media_query.find_by_klass('m1').to_css.must_equal('td.m1 { height:15px }')
+  end
+
+  it 'supports multiple mobile override attributes' do
+    Inkcite::Renderer.render('{td width=15 border-left="1px dotted #cccccc" mobile-display="block" mobile-width="100%" mobile-border-left="none" mobile-border-top="1px dotted #ccc"}', @view).must_equal('<td class="m1" style="border-left:1px dotted #cccccc" width=15>')
+    @view.media_query.find_by_klass('m1').to_css.must_equal('td.m1 { border-left:none !important;border-top:1px dotted #ccc;display:block;width:100% }')
+  end
+
 end

data/test/renderer/video_preview_spec.rb

@@ -6,7 +6,7 @@ describe Inkcite::Renderer::VideoPreview do
 
   it 'renders an animated video preview' do
     Inkcite::Renderer.render('{video-preview id="ripcurl" href="https://www.campaignmonitor.com/customers/ripcurl" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame%1.jpg" width=600 height=337 frames=3 bgcolor="#5b5f66" gradient="#1d1f21"}', @view).must_equal(%Q(<!--[if !mso]><!-- -->\n<a class="video" href="https://www.campaignmonitor.com/customers/ripcurl" style="background-color:#5b5f66;background-image:radial-gradient(circle at center, #5b5f66, #1d1f21);color:#0099cc;display:block;text-decoration:none" target=_blank>\n<table border=0 cellpadding=0 cellspacing=0 style="-webkit-animation:15s ease infinite video1-frames;animation:15s ease infinite video1-frames;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) 0% 0% / cover no-repeat" width=100%><tr style="transition:all .5s cubic-bezier(0.075, 0.82, 0.165, 1)">\n<td width=25%><img alt="" border=0 src=images/vp-150x337.png style="display:block;height:auto;opacity:0;visibility:hidden" width=100%></td>\n<td align=center valign=middle width=50%>\n<div class="play-button" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1)); border: 4px solid white; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 2px rgba(0,0,0,0.3); height: 34px; margin: 0 auto; padding: 18px 16px 18px 24px; transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1); width: 34px;">\n<div style="border-color: transparent transparent transparent white; border-style: solid; border-width: 17px 0 17px 30px; display: block; font-size: 0; height: 0; Margin: 0 auto; width: 0;">&nbsp;</div>\n</div>\n</td>\n<td width=25%>&nbsp;</td>\n</tr></table>\n</a>\n<div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg);display:none"></div>\n<!--<![endif]-->\n<!--[if mso]>\n<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" coordsize="600,337" coordorigin="0,0" href="https://www.campaignmonitor.com/customers/ripcurl" style="width:600px;height:337px;">\n<v:rect fill="t" stroked="f" style="position:absolute;width:600;height:337;"><v:fill src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg" type="frame"/></v:rect>\n<v:oval fill="t" strokecolor="white" strokeweight="4px" style="position:absolute;left:261;top:129;width:78;height:78"><v:fill color="black" opacity="30%"/></v:oval>\n<v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="white" stroked="f" style="position:absolute;left:285;top:153;width:30;height:30;"/>\n</v:group>\n<![endif]-->))
-    @view.styles.first.must_equal(%Q(.video:hover .play-button {\n  transform: scale(1.1);\n}\n.video:hover tr {\n  background-color: rgba(255, 255, 255, .2);\n}\n@keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n@-webkit-keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n))
+    @view.styles.first.must_equal(%Q(.video:hover .play-button {\n  transform: scale(1.1);\n}\n.video:hover tr {\n  background-color: rgba(255, 255, 255, .2);\n}\n@keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n@-moz-keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n@-ms-keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n@-o-keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n@-webkit-keyframes video1-frames {\n0% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n22% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n33% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n55% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n66% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n88% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n))
 
     # Verify that the transparent spacer image was created and then
     # clean it up.

data/test/util_spec.rb

@@ -0,0 +1,11 @@
+describe Inkcite::Util do
+
+  it 'can convert an HSL color to a hex color' do
+    Inkcite::Util.hsl_to_color(78, 78, 78).must_equal('#d8f39b')
+  end
+
+  it 'can convert an HSL color to a hex color' do
+    Inkcite::Util.hsl_to_color(128, 100, 50).must_equal('#00ff22')
+  end
+
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: inkcite
 version: !ruby/object:Gem::Version
-  version: 1.13.0
+  version: 1.14.0
 platform: ruby
 authors:
 - Jeffrey D. Hoffman
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-01-20 00:00:00.000000000 Z
+date: 2017-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -150,6 +150,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: kraken-io
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: listen
   requirement: !ruby/object:Gem::Requirement
@@ -361,7 +375,6 @@ files:
 - bin/inkcite
 - inkcite.gemspec
 - lib/inkcite.rb
-- lib/inkcite/animation.rb
 - lib/inkcite/cli/base.rb
 - lib/inkcite/cli/build.rb
 - lib/inkcite/cli/init.rb
@@ -371,6 +384,11 @@ files:
 - lib/inkcite/cli/test.rb
 - lib/inkcite/cli/validate.rb
 - lib/inkcite/email.rb
+- lib/inkcite/facade.rb
+- lib/inkcite/facade/animation.rb
+- lib/inkcite/facade/element.rb
+- lib/inkcite/facade/keyframe.rb
+- lib/inkcite/facade/style.rb
 - lib/inkcite/mailer.rb
 - lib/inkcite/minifier.rb
 - lib/inkcite/parser.rb
@@ -380,7 +398,7 @@ files:
 - lib/inkcite/renderer/button.rb
 - lib/inkcite/renderer/container_base.rb
 - lib/inkcite/renderer/div.rb
-- lib/inkcite/renderer/element.rb
+- lib/inkcite/renderer/fireworks.rb
 - lib/inkcite/renderer/footnote.rb
 - lib/inkcite/renderer/google_analytics.rb
 - lib/inkcite/renderer/image.rb
@@ -405,7 +423,6 @@ files:
 - lib/inkcite/renderer/span.rb
 - lib/inkcite/renderer/sparkle.rb
 - lib/inkcite/renderer/special_effect.rb
-- lib/inkcite/renderer/style.rb
 - lib/inkcite/renderer/table.rb
 - lib/inkcite/renderer/table_base.rb
 - lib/inkcite/renderer/td.rb
@@ -445,6 +462,7 @@ files:
 - test/renderer/video_preview_spec.rb
 - test/renderer_spec.rb
 - test/test_helper.rb
+- test/util_spec.rb
 - test/view_spec.rb
 homepage: https://github.com/inkceptional/inkcite
 licenses:
@@ -499,4 +517,5 @@ test_files:
 - test/renderer/video_preview_spec.rb
 - test/renderer_spec.rb
 - test/test_helper.rb
+- test/util_spec.rb
 - test/view_spec.rb