inkcite 1.12.0 → 1.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c14c10f673644c60a3e92d4c511858d562c16f58
-  data.tar.gz: 0690d93ebed3be3f26735c9e6ecdd70301936a43
+  metadata.gz: 729a1ea12dcb8c0180541d0b4aebb22346985f2f
+  data.tar.gz: c10280cade618463c9ecebe81e50b1acca46a49e
 SHA512:
-  metadata.gz: 2553f347fb054d2cf5ab68be3696a1223eabda24b7f1196d09871c3068c6cab2ccdda81214b8890720f8bf9463bd560d9093bee9f4db9d9c2e1aeaae1f240f30
-  data.tar.gz: 62224686033d05c4587995d4c92268287fac082a16013f54d71d9f185d5fb98ca7afbc54d14b9576170c24d4792069cfa0478841448cab82ec29e77296f9bb37
+  metadata.gz: 39f5ebde420c845be3b262d7b4266a491bed516f561a5679616bd4d235693adbba3c6990bdc9b51c61facb00dcfd35b418c2c2f7f3602f13f7daeb7de971bdf6
+  data.tar.gz: 2f8441f0f65e4faf1323229c30a8fbdd2ea4b31fc8cdc61f4a1520921bc23fb3cb6727e76cd898b104227f047a924d1af7150180dd8e152fa6e36d14c5ae586a

data/assets/builtin-helpers.tsv

@@ -0,0 +1,9 @@
+// Conditional helpers for inclusion or exclusion.
+if	<!--[if $test$]>	<![endif]-->
+if-not	<!--[if !$test$]><!-- -->	<!--<![endif]-->
+
+// Predeclaring common inclusion and exclusion targets
+not-outlook	{if-not test=mso}	{/if-not}
+not-vml	{if-not test=vml}	{/if-not}
+outlook-only	{if test=mso}	{/if}
+vml-only	{if test=vml}	{/if}

data/lib/inkcite/renderer/base.rb

@@ -91,7 +91,7 @@ module Inkcite
       end
 
       def if_mso html
-        %Q(<!--[if mso]>#{html.to_s}<![endif]-->)
+        %Q({outlook-only}#{html.to_s}{/outlook-only})
       end
 
       def none? val

data/lib/inkcite/renderer/image.rb

@@ -84,10 +84,8 @@ module Inkcite
           img[:src] = image_url(outlook_src, opt, ctx)
 
           # Wrap the image in the outlook-specific conditionals.
-          html << '<!--[if mso]>'
-          html << img.to_s
-          html << '<![endif]-->'
-          html << '<!--[if !mso]><!-- -->'
+          html << if_mso(img)
+          html << '{not-outlook}'
 
         end
 
@@ -137,7 +135,7 @@ module Inkcite
         html << img.to_s
 
         # Conclude the outlook-specific conditional if opened.
-        html << '<!--<![endif]-->' unless outlook_src.blank?
+        html << '{/not-outlook}' unless outlook_src.blank?
 
         html
       end
@@ -148,10 +146,6 @@ module Inkcite
       # be copied to the title field.
       COPY_ALT_TO_TITLE = :'copy-alt-to-title'
 
-      # Name of the property that allows an outlook-specific src to be specified
-      # for an image.
-      OUTLOOK_SRC = :'outlook-src'
-
     end
   end
 end

data/lib/inkcite/renderer/image_base.rb

@@ -4,6 +4,10 @@ module Inkcite
 
       protected
 
+      # Name of the property that allows an outlook-specific src to be specified
+      # for an image.
+      OUTLOOK_SRC = :'outlook-src'
+
       # Display mode constants
       BLOCK = 'block'
       DEFAULT = 'default'
@@ -12,7 +16,7 @@ module Inkcite
       # For the given image source URL provided, returns either the fully-qualfied
       # path to the image (via View's image_url method) or returns a placeholder
       # if the image is missing.
-      def image_url _src, opt, ctx, assert_dimensions=true
+      def image_url _src, opt, ctx, assert_dimensions=true, add_quotes=true
 
         src = _src
 
@@ -81,7 +85,10 @@ module Inkcite
         # src so that we don't display the verbose qualified URL to the developer.
         ctx.error('Missing image dimensions', { :src => _src }) if missing_dimensions && assert_dimensions
 
-        quote(src)
+        # If desired (and usually it is) wrap the src in quotes.
+        src = quote(src) if add_quotes
+
+        src
       end
 
       def klass_name src, ctx

data/lib/inkcite/renderer/link.rb

@@ -115,7 +115,7 @@ module Inkcite
 
         # Always duplicate the string provided just to make sure we're not
         # modifying a frozen link or adding tagging to a previously tagged HREF.
-        href = href.dup
+        href = href.dup if href
 
         # True if the href is missing.  If so, we may try to look it up by it's ID
         # or we'll insert a default TBD link.

data/lib/inkcite/renderer/mobile_only.rb

@@ -16,7 +16,7 @@ module Inkcite
           # Intentionally NOT using 'mso-hide: all' version as it requires all
           # nested tables to have that attribute applied. Why have all that extra
           # markup - just use this simple conditional instead.
-          html << '<!--[if !mso 9]><!-->'
+          html << '{if-not test="mso 9"}'
 
           # These elements style the div such that it is invisible in all
           # other major email clients.
@@ -36,7 +36,7 @@ module Inkcite
           html << '</div>'
 
           # Close the outlook conditional for the close tag.
-          html << '<!--<![endif]-->'
+          html << '{/if-not}'
 
         end
 

data/lib/inkcite/renderer/outlook_background.rb

@@ -16,7 +16,7 @@ module Inkcite
         # 'vml: false' in config.yml
         return nil unless ctx.vml_enabled?
 
-        html = '<!--[if gte mso 9]>'
+        html = '{if test="gte mso 9"}'
 
         if tag == '/outlook-bg'
           html << '</div>'
@@ -86,7 +86,7 @@ module Inkcite
 
         end
 
-        html << '<![endif]-->'
+        html << '{/if}'
 
         html
       end

data/lib/inkcite/renderer/video_preview.rb

@@ -3,7 +3,7 @@ module Inkcite
 
     # Better video preview courtesy of @stigm
     # https://medium.com/cm-engineering/better-video-previews-for-email-12432ce71846#.2o9qgc7hd
-    class VideoPreview < Base
+    class VideoPreview < ImageBase
 
       def render tag, opt, ctx
 
@@ -40,15 +40,7 @@ module Inkcite
         # this loop also verifies that the referenced image exists.
         frame_count.times do |n|
           frame_src = src.gsub('%1', "#{n + 1}")
-
-          # Check that non-fully-qualified images exist in the project's
-          # images/ directory.
-          unless Util::is_fully_qualified?(frame_src)
-            ctx.assert_image_exists(frame_src)
-            frame_src = ctx.image_url(frame_src)
-          end
-
-          frames << frame_src
+          frames << image_url(frame_src, opt, ctx, false, false)
         end
 
         # Grab the first fully-qualified frame
@@ -81,12 +73,22 @@ module Inkcite
         # assigned to the table and defined in the CSS.
         animation_name = "#{hover_klass}#{uid}-frames"
 
+        # Size calculations based on the specified arrow size or
+        # the defaulted 30px arrow.  The border_* variables control
+        # the circular border around the play arrow.
+        play_arrow_size = (opt[PLAY_ARROW_SIZE] || 30).to_i
+        play_arrow_height = (play_arrow_size * 0.5666).round
+        play_border_radius = (play_arrow_size * 1.1333).round
+        play_border_top_bottom = (play_arrow_size * 0.6).round
+        play_border_right = (play_arrow_size * 0.5333).round
+        play_border_left = (play_arrow_size * 0.8).round
+
         html = []
-        html << '<!--[if !vml]-->'
+        html << '{not-outlook}'
 
         # Using an Element to produce the appropriate anchor helper with
         # the desired
-        html << Element.new('a', { :id => id, :href => href, :class => hover_klass, :bgcolor => bgcolor, :bggradient => gradient, :block => true }).to_helper
+        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',
@@ -95,8 +97,6 @@ module Inkcite
         table[:animation] = %Q("#{animation_name} #{duration}s ease infinite") if has_animation
         html << table.to_helper
 
-        html << Element.new('td', :width => '25%').to_helper
-
         # Transparent spacer for preserving aspect ratio.
         spacer_image_name = "vp-#{scaled_width}x#{height}.png"
         spacer_image = File.join(ctx.email.image_dir, spacer_image_name)
@@ -114,26 +114,18 @@ module Inkcite
 
         end
 
-        # 12/21/16: Using placehold.it is sub-optimal. It would be better
-        # to generate a transparent gif using something like Rmagick.  I've
-        # seen some instances where placeholdit can crash outlook but I guess
-        # this part is hidden from outlook so it isn't so bad.
-        html << Element.new('img', { :src => ctx.image_url(spacer_image_name), :alt => '', :width => '100%', :border => 0,
-                :style => { :height => :auto, :opacity => 0, :visibility => :hidden } }).to_s
-
-        html << '{/td}'
+        # Assembling the first <td> which manages the aspect ratio of the
+        # video as a separate string to avoid unnecessary line breaks in
+        # the resulting HTML.
+        aspect_ratio_td = Element.new('td', :width => '25%').to_helper
+        aspect_ratio_td << Element.new('img', { :src => ctx.image_url(spacer_image_name), :alt => quote(''), :width => '100%', :border => 0,
+                :style => { :height => :auto, :display => :block, :opacity => 0, :visibility => :hidden } }).to_s
+        aspect_ratio_td << '{/td}'
+        html << aspect_ratio_td
 
         # Center column holds the CSS-based arrow
         html << Element.new('td', :width => '50%', :align => :center, :valign => :middle).to_helper
 
-        play_arrow_size = (opt[PLAY_ARROW_SIZE] || 30).to_i
-
-        play_border_radius = (play_arrow_size * 1.1333).round
-        play_border_top_bottom = (play_arrow_size * 0.6).round
-        play_border_right = (play_arrow_size * 0.5333).round
-        play_border_left = (play_arrow_size * 0.8).round
-        play_arrow_height = (play_arrow_size * 0.5666).round
-
         # These are the arrow and circle border, respectively.  Not currently
         # configurable in terms of size or color.
         html << %Q(<div class="#{play_button_klass}" 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: #{px(play_border_radius)}; margin: 0 auto; padding: #{px(play_border_top_bottom)} #{px(play_border_right)} #{px(play_border_top_bottom)} #{px(play_border_left)}; transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1); width: #{px(play_border_radius)};">)
@@ -149,28 +141,53 @@ module Inkcite
         # browser only loads the frames once the animation demands them.
         if has_animation && !opt[NO_PRELOAD]
           all_frames = frames.collect { |f| %Q(url(#{f})) }.join(',')
-          html << Element.new('div', :style => { BACKGROUND_IMAGE => %Q("#{all_frames}"), :display => 'none' }).to_s + '</div>'
+          html << Element.new('div', :style => { BACKGROUND_IMAGE => %Q(#{all_frames}), :display => 'none' }).to_s + '</div>'
         end
 
         # Concludes the if [if !vml] section targeting non-outlook.
-        html << '<![endif]-->'
-
-        # Outlook arrow size also not configurable at this time.
-        outlook_arrow_size = 78
-        outlook_left = width / 2 - outlook_arrow_size / 2
-        outlook_top = height / 2 - outlook_arrow_size / 2
-
-        # Use the link central processing routine to ensure a viable link has
-        # been provided and tag/track it from Outlook.
-        outlook_href = Link.process(id, href, false, ctx)
-
-        html << '<!--[if vml]>'
-        html << %Q(<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" coordsize="#{width},#{height}" coordorigin="0,0" href="#{outlook_href}" style="width:#{width}px;height:#{height}px;">)
-        html << %Q(<v:rect fill="t" stroked="f" style="position:absolute;width:#{width};height:#{height};"><v:fill src="#{first_frame}" type="frame"/></v:rect>)
-        html << %Q(<v:oval fill="t" strokecolor="white" strokeweight="4px" style="position:absolute;left:#{outlook_left};top:"#{outlook_top};width:#{outlook_arrow_size};height:#{outlook_arrow_size}"><v:fill color="black" opacity="30%" /></v:oval>)
-        html << %q(<v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="white" stroked="f" style="position:absolute;left:289;top:151;width:30;height:34;" />)
-        html << '</v:group>'
-        html << '<![endif]-->'
+        html << '{/not-outlook}'
+
+        # Check for the outlook-src attribute which will be used in place of
+        # the first frame if it is specified.
+        outlook_src = opt[OUTLOOK_SRC]
+        outlook_src = outlook_src.blank? ? first_frame : image_url(outlook_src, opt, ctx, false, false)
+
+        html << '{outlook-only}'
+        if ctx.vml_enabled?
+
+          # Calculations necessary to render the play arrow in VML.
+          outlook_arrow_size = (play_arrow_size * 2.6).round
+          outlook_arrow_width = (play_arrow_size * 1.0666).round
+          outlook_arrow_height = (play_arrow_size * 0.5333).round
+          outlook_arrow_left = width / 2 - play_arrow_size / 2
+          outlook_arrow_top = height / 2 - play_arrow_size / 2
+          outlook_border_left = width / 2 - outlook_arrow_size / 2
+          outlook_border_top = height / 2 - outlook_arrow_size / 2
+
+          # Use the link central processing routine to ensure a viable link has
+          # been provided and tag/track it from Outlook.
+          outlook_id, outlook_href, target_blank = Link.process(id, href, false, ctx)
+
+          html << %Q(<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" coordsize="#{width},#{height}" coordorigin="0,0" href="#{outlook_href}" style="width:#{width}px;height:#{height}px;">)
+          html << %Q(<v:rect fill="t" stroked="f" style="position:absolute;width:#{width};height:#{height};"><v:fill src="#{outlook_src}" type="frame"/></v:rect>)
+          html << %Q(<v:oval fill="t" strokecolor="white" strokeweight="4px" style="position:absolute;left:#{outlook_border_left};top:#{outlook_border_top};width:#{outlook_arrow_size};height:#{outlook_arrow_size}"><v:fill color="black" opacity="30%"/></v:oval>)
+          html << %Q(<v:shape coordsize="#{play_border_left},#{outlook_arrow_width}" path="m,l,#{outlook_arrow_width},#{play_border_left},#{outlook_arrow_height},xe" fillcolor="white" stroked="f" style="position:absolute;left:#{outlook_arrow_left};top:#{outlook_arrow_top};width:#{play_arrow_size};height:#{play_arrow_size};"/>)
+          html << '</v:group>'
+
+          # Notify the context that VML was used in this version.
+          ctx.vml_used!
+
+        else
+
+          # This is the only version that can support alt text.
+          alt = opt[:alt] || 'Click to play'
+
+          html << Element.new('a', { :id => id, :href => quote(href) }).to_helper +
+              Element.new('img', { :src => quote(outlook_src), :height => height, :width => width, :alt => quote(alt) }).to_helper +
+              '{/a}'
+
+        end
+        html << '{/outlook-only}'
 
         # Will hold any CSS styles, if there are some necessary
         # to inject into the email.

data/lib/inkcite/version.rb

@@ -1,3 +1,3 @@
 module Inkcite
-  VERSION = "1.12.0"
+  VERSION = "1.12.1"
 end

data/lib/inkcite/view.rb

@@ -420,9 +420,7 @@ module Inkcite
 
         # Enable responsive media queries on Windows phones courtesy of @jamesmacwhite
         # https://blog.jmwhite.co.uk/2014/03/01/windows-phone-does-support-css3-media-queries-in-html-email/
-        html << '<!--[if !mso]><!-- -->'
-        html << '<meta http-equiv="X-UA-Compatible" content="IE=edge" />'
-        html << '<!--<![endif]-->'
+        html << Renderer.render('{not-outlook}<meta http-equiv="X-UA-Compatible" content="IE=edge" />{/not-outlook}', self)
 
         # Some native Android clients display the title before the preheader so
         # don't include it in non-development or email rendering per @moonstrips
@@ -847,10 +845,8 @@ module Inkcite
       html.join(NEW_LINE)
     end
 
-    def load_helper_file filename, into, abort_on_fail=true
+    def load_helper_file file, into, abort_on_fail=true
 
-      path = @email.path
-      file = File.join(path, filename)
       unless File.exist?(file)
         error("Unable to load helper file", :file => file) if abort_on_fail
         return
@@ -904,18 +900,24 @@ module Inkcite
         :n => NEW_LINE
       }
 
+      # Get the project path from which most helpers will be loaded.
+      path = @email.path
+
+      # First load the built-in helpers.
+      load_helper_file(File.join(Inkcite.asset_path, 'builtin-helpers.tsv'), _helpers, false)
+
       # Check to see if the config.yml includes a "helpers:" array which allows
       # additional out-of-project, shared helper files to be loaded.
       included_helpers = [*@email.config[:helpers]]
-      included_helpers.each { |file| load_helper_file(file, _helpers) }
+      included_helpers.each { |file| load_helper_file(File.join(path, file), _helpers) }
 
       # Load the project's properties, which may include references to additional
       # properties in other directories.
-      load_helper_file 'helpers.tsv', _helpers
+      load_helper_file File.join(path, 'helpers.tsv'), _helpers
 
       # Look for a version-specific override allowing restyling of an email based
       # on its version - e.g. difference colors in the "no orders for 30 days" email.
-      load_helper_file "helpers-#{@version}.tsv", _helpers, false
+      load_helper_file File.join(path, "helpers-#{@version}.tsv"), _helpers, false
 
       # As a convenience pre-populate the month name of the email.
       mm = _helpers[:mm].to_i

data/test/renderer/mobile_only_spec.rb

@@ -5,17 +5,17 @@ describe Inkcite::Renderer::MobileOnly do
   end
 
   it 'styles a div to show content only on mobile' do
-    Inkcite::Renderer.render('{mobile-only}I will only appear on mobile{/mobile-only}', @view).must_equal('<!--[if !mso 9]><!--><div class="show" style="display:none;max-height:0;overflow:hidden">I will only appear on mobile</div><!--<![endif]-->')
+    Inkcite::Renderer.render('{mobile-only}I will only appear on mobile{/mobile-only}', @view).must_equal('<!--[if !mso 9]><!-- --><div class="show" style="display:none;max-height:0;overflow:hidden">I will only appear on mobile</div><!--<![endif]-->')
     @view.media_query.find_by_klass('show').declarations.must_match('display: block !important; max-height: none !important;')
   end
 
   it 'supports inline as a boolean attribute' do
-    Inkcite::Renderer.render('800-555-1212{mobile-only inline}&nbsp;&raquo;{/mobile-only}', @view).must_equal('800-555-1212<!--[if !mso 9]><!--><div class="show-inline" style="display:none;max-height:0;overflow:hidden">&nbsp;&raquo;</div><!--<![endif]-->')
+    Inkcite::Renderer.render('800-555-1212{mobile-only inline}&nbsp;&raquo;{/mobile-only}', @view).must_equal('800-555-1212<!--[if !mso 9]><!-- --><div class="show-inline" style="display:none;max-height:0;overflow:hidden">&nbsp;&raquo;</div><!--<![endif]-->')
     @view.media_query.find_by_klass('show-inline').declarations.must_match('display: inline !important; max-height: none !important;')
   end
 
   it 'does not support fonts or other container attributes' do
-    Inkcite::Renderer.render('{mobile-only font=large}Fonts not supported{/mobile-only}', @view).must_equal('<!--[if !mso 9]><!--><div class="show" style="display:none;max-height:0;overflow:hidden">Fonts not supported</div><!--<![endif]-->')
+    Inkcite::Renderer.render('{mobile-only font=large}Fonts not supported{/mobile-only}', @view).must_equal('<!--[if !mso 9]><!-- --><div class="show" style="display:none;max-height:0;overflow:hidden">Fonts not supported</div><!--<![endif]-->')
   end
 
 end

data/test/renderer/video_preview_spec.rb

@@ -5,7 +5,7 @@ describe Inkcite::Renderer::VideoPreview do
   end
 
   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 !vml]-->\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:video1-frames 15s ease infinite;animation:video1-frames 15s ease infinite;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%>\n<img border=0 src=images/vp-150x337.png style="height:auto;opacity:0;visibility:hidden" width=100%>\n</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 vml]>\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="["ripcurl", "https://www.campaignmonitor.com/customers/ripcurl", true]" 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:289;top:151;width:30;height:34;" />\n</v:group>\n<![endif]-->))
+    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:video1-frames 15s ease infinite;animation:video1-frames 15s ease infinite;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 {\n  0%   { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n  22%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n  33%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n  55%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n  66%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n  88%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n  100% { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n}\n@-webkit-keyframes video1-frames {\n  0%   { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n  22%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame1.jpg) }\n  33%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n  55%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame2.jpg) }\n  66%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n  88%  { background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/103009/frame3.jpg) }\n  100% { 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
@@ -16,4 +16,15 @@ describe Inkcite::Renderer::VideoPreview do
 
   end
 
+  it 'supports the outlook-src attribute' 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" outlook-src="outlook-anim.gif" 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:video1-frames 15s ease infinite;animation:video1-frames 15s ease infinite;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="images/outlook-anim.gif" 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]-->))
+
+    # Verify that the transparent spacer image was created and then
+    # clean it up.
+    spacer_image = @view.email.image_path('vp-150x337.png')
+    File.exist?(spacer_image).must_equal(true)
+    File.delete(spacer_image)
+
+  end
+
 end

data/test/view_spec.rb

@@ -25,4 +25,16 @@ describe Inkcite::View do
     Inkcite::Renderer.render('{project}', @view).must_equal('project')
   end
 
+  it 'can produce Outlook-only code' do
+    Inkcite::Renderer.render('{outlook-only}MSO 07-13{/outlook-only}', @view).must_equal('<!--[if mso]>MSO 07-13<![endif]-->')
+  end
+
+  it 'can produce code only visible in VML-aware clients' do
+    Inkcite::Renderer.render('{vml-only}VML-aware clients only{/vml-only}', @view).must_equal('<!--[if vml]>VML-aware clients only<![endif]-->')
+  end
+
+  it 'can exclude Outlook' do
+    Inkcite::Renderer.render('{not-vml}All except VML-aware clients{/not-vml}', @view).must_equal('<!--[if !vml]><!-- -->All except VML-aware clients<!--<![endif]-->')
+  end
+
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: inkcite
 version: !ruby/object:Gem::Version
-  version: 1.12.0
+  version: 1.12.1
 platform: ruby
 authors:
 - Jeffrey D. Hoffman
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-12-30 00:00:00.000000000 Z
+date: 2017-01-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -345,6 +345,7 @@ files:
 - README.md
 - Rakefile
 - assets/blueprint.png
+- assets/builtin-helpers.tsv
 - assets/example/helpers.tsv
 - assets/example/source.html
 - assets/example/source.txt