inkcite 1.11.0 → 1.12.0

data/lib/inkcite/renderer/in_browser.rb

@@ -20,7 +20,7 @@ module Inkcite
         color = opt[:color]
 
         # Optional call-to-action override - otherwise defaults to view in browser.
-        cta = opt[:cta] || 'View in Browser'
+        cta = opt[:cta] || ctx.production?? 'View in Browser' : 'Preview in Browser'
 
         id = opt[:id] || 'in-browser'
 

data/lib/inkcite/renderer/link.rb

@@ -18,7 +18,7 @@ module Inkcite
 
           # Check to see if the declaration has been marked as a block
           # element and if so, close the div.
-          html << '</div>' if opening[:block]
+          html << '</div>' if opening[:div]
 
           return html
         end
@@ -41,17 +41,82 @@ module Inkcite
         # including font, background color, border, etc.
         mix_all a, opt, ctx
 
-        id   = opt[:id]
-        href = opt[:href]
+        id, href, target_blank = Link.process(opt[:id], opt[:href], opt[:force], ctx)
+
+        a[:target] = BLANK if target_blank
+
+        # Make sure that these types of links have quotes.
+        href = quote(href) unless ctx.text?
+
+        # Set the href attribute to the resolved href.
+        a[:href] = href
+
+        # Links never get any text decoration.
+        a.style[TEXT_DECORATION] = NONE
+
+        # Force the display: block attribute if the boolean block parameter has
+        # been specified.
+        a.style[:display] = :block if opt[:block]
+
+        if ctx.browser?
+
+          # Programmatically we can install onclick listeners for hosted versions.
+          # Check to see if one is specified and the Javascript is permitted in
+          # this version.
+          onclick = opt[:onclick]
+          a[:onclick] = quote(onclick) unless onclick.blank?
+
+        end
+
+        html = ''
+
+        if ctx.text?
+          html << a[:href]
+
+        else
+
+          klass = opt[:class]
+          a.classes << klass unless klass.blank?
+
+          mix_responsive a, opt, ctx
+
+          # Some responsive modes (e.g. button) change the display type from in-line
+          # to block.  This change can cause unexpected whitespace or other unexpected
+          # layout changes.  Outlook doesn't support block display on link elements
+          # so the best workaround is simply to wrap the element in <div> tags.
+          if a.responsive_styles.any?(&:block?)
+            html << '<div>'
+
+            # Remember that we made this element block-display so that we can append
+            # the extra div when we close the tag.
+            opt[:div] = true
+
+          end
+
+          html << a.to_s
+
+        end
+
+        html
+      end
+
+      def self.process id, href, force, ctx
+
+        # Initially assume a blank target isn't needed
+        target_blank = false
 
         # If a URL wasn't provided in the HTML, then check to see if there is
         # a link declared in the project's links_tsv file.  If so, we need to
         # duplicate it so that tagging doesn't get applied multiple times.
         if href.blank?
           links_tsv_href = ctx.links_tsv[id]
-          href = links_tsv_href.dup unless links_tsv_href.blank?
+          href = links_tsv_href unless links_tsv_href.blank?
         end
 
+        # 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
+
         # 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.
         missing = href.blank?
@@ -89,10 +154,14 @@ module Inkcite
             # If we don't have a URL, check to see if we've encountered this
             href = last_href || ctx[MISSING_LINK_HREF]
 
-            ctx.error "Link missing href", { :id => id } unless last_href
+            ctx.error 'Link missing href', { :id => id } unless last_href
 
           else
 
+            # Ensure the validity of the URL in the link to prevent problems -
+            # e.g. unexpected carriage return in the href.
+            ctx.error('Link href appears to be invalid', { :id => id, :href => href }) unless force || valid?(href)
+
             # Optionally tag the link's query string for post-send log analytics.
             href = add_tagging(id, href, ctx)
 
@@ -105,7 +174,7 @@ module Inkcite
 
               # It saves everyone a lot of time if you alert them that an ID appears multiple times
               # in the email and with mismatched URLs.
-              ctx.error "Link href mismatch", { :id => id, :expected => last_href, :found => href }
+              ctx.error 'Link href mismatch', { :id => id, :expected => last_href, :found => href }
 
             end
 
@@ -116,59 +185,11 @@ module Inkcite
           # URLs interfering with the links file.
           href = add_tracking(id, href, ctx)
 
-          a[:target] = BLANK
+          target_blank = true
 
         end
 
-        # Make sure that these types of links have quotes.
-        href = quote(href) unless ctx.text?
-
-        # Set the href attribute to the resolved href.
-        a[:href] = href
-
-        # Links never get any text decoration.
-        a.style[TEXT_DECORATION] = NONE
-
-        if ctx.browser?
-
-          # Programmatically we can install onclick listeners for hosted versions.
-          # Check to see if one is specified and the Javascript is permitted in
-          # this version.
-          onclick = opt[:onclick]
-          a[:onclick] = quote(onclick) unless onclick.blank?
-
-        end
-
-        html = ''
-
-        if ctx.text?
-          html << a[:href]
-
-        else
-
-          klass = opt[:class]
-          a.classes << klass unless klass.blank?
-
-          mix_responsive a, opt, ctx
-
-          # Some responsive modes (e.g. button) change the display type from in-line
-          # to block.  This change can cause unexpected whitespace or other unexpected
-          # layout changes.  Outlook doesn't support block display on link elements
-          # so the best workaround is simply to wrap the element in <div> tags.
-          if a.responsive_styles.any?(&:block?)
-            html << '<div>'
-
-            # Remember that we made this element block-display so that we can append
-            # the extra div when we close the tag.
-            opt[:block] = true
-
-          end
-
-          html << a.to_s
-
-        end
-
-        html
+        [ id, href, target_blank ]
       end
 
       private
@@ -196,7 +217,7 @@ module Inkcite
       # Signifies an auto-incrementing link ID.
       PLUS_PLUS = '++'
 
-      def add_tagging id, href, ctx
+      def self.add_tagging id, href, ctx
 
         # Check to see if we're tagging links.
         tag = ctx[TAG_LINKS]
@@ -214,7 +235,7 @@ module Inkcite
         href
       end
 
-      def add_tracking id, href, ctx
+      def self.add_tracking id, href, ctx
 
         # Check to see if a trackable link string has been defined.
         tracking = ctx[Inkcite::Email::TRACK_LINKS]
@@ -226,7 +247,7 @@ module Inkcite
         href
       end
 
-      def replace_tag tag, id, ctx
+      def self.replace_tag tag, id, ctx
 
         # Inject the link's ID into the tag - that's the only value that can't
         # be resolved from the context.
@@ -235,6 +256,17 @@ module Inkcite
         Inkcite::Renderer.render(tag, ctx)
       end
 
+      # Tests whether or not the href provided is a valid http(s) link.
+      # Courtest http://stackoverflow.com/questions/7167895/whats-a-good-way-to-validate-links-urls-in-rails
+      def self.valid? url
+        begin
+          uri = URI.parse(url)
+          uri.kind_of?(URI::HTTP)
+        rescue URI::InvalidURIError
+          false
+        end
+      end
+
     end
   end
 end

data/lib/inkcite/renderer/lorem.rb

@@ -16,7 +16,7 @@ module Inkcite
         # we don't want it to ship accidentally.
         ctx.error 'Email contains Lorem Ipsum' unless opt[:force]
 
-        if type == :headline
+        html = if type == :headline
           words = (limit || 4).to_i
           Faker::Lorem.words(words).join(SPACE).titlecase
 
@@ -30,6 +30,14 @@ module Inkcite
 
         end
 
+        # Replace the last space in the generated text with a
+        # non-breaking space so that the last two words always
+        # wrap together - no dangling words in rapid design mode.
+        if last_space = html.rindex(' ')
+          html[last_space] = ' '
+        end
+
+        html
       end
 
       private

data/lib/inkcite/renderer/mobile_image.rb

@@ -7,15 +7,6 @@ module Inkcite
       # Image swapping technique
       def render tag, opt, ctx
 
-        tag_stack = ctx.tag_stack(:mobile_image)
-
-        if tag == '/mobile-img'
-          tag_stack.pop
-          return '</span>'
-        end
-
-        tag_stack << opt
-
         # This is a transient, wrapper Element that we're going to use to
         # style the attributes of the object that will appear when the
         # email is viewed on a mobile device.
@@ -25,6 +16,8 @@ module Inkcite
 
         mix_background img, opt, ctx
 
+        mix_margins img, opt, ctx
+
         display = opt[:display]
         img.style[:display] = "#{display}" if display && display != BLOCK && display != DEFAULT
 
@@ -58,10 +51,9 @@ module Inkcite
         # Add the class that handles inserting the correct background image.
         ctx.media_query << span.add_rule(Rule.new('span', klass, img.style))
 
-        span.to_s
+        span + '</span>'
       end
 
     end
   end
 end
-

data/lib/inkcite/renderer/mobile_only.rb

@@ -0,0 +1,48 @@
+# Fresh thinking on mobile-only content courtesy of FreshInbox's technique
+# http://freshinbox.com/blog/bulletproof-solution-to-hiding-mobile-content-when-opened-in-non-mobile-email-clients/
+module Inkcite
+  module Renderer
+    class MobileOnly < Responsive
+
+      def render tag, opt, ctx
+
+        # True if this is the open tag ({mobile-only})
+        is_open = tag == 'mobile-only'
+
+        html = ''
+
+        if is_open
+
+          # 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]><!-->'
+
+          # These elements style the div such that it is invisible in all
+          # other major email clients.
+          div = Element.new('div')
+          div.style[:display] = 'none'
+          div.style[:'max-height'] = 0
+          div.style[:'overflow'] = 'hidden'
+
+          klass = opt[:inline] ? 'show-inline' : 'show'
+          mix_responsive_klass div, opt, ctx, klass
+
+          html << div.to_s
+
+        else
+
+          # Close the div
+          html << '</div>'
+
+          # Close the outlook conditional for the close tag.
+          html << '<!--<![endif]-->'
+
+        end
+
+        html
+      end
+
+    end
+  end
+end

data/lib/inkcite/renderer/outlook_background.rb

@@ -1,10 +1,19 @@
 module Inkcite
   module Renderer
-    class OutlookBackground < Base
+
+    # Outlook background image support courtesy of @stigm via Campaign Monitor's
+    # Bulletproof Background Images: https://backgrounds.cm/
+    #
+    # {outlook-bg src=YJOX1PC.png bgcolor=#7bceeb height=92 width=120}
+    #   ...
+    # {/outlook-bg}
+    #
+    class OutlookBackground < ImageBase
 
       def render tag, opt, ctx
 
-        # Do nothing if vml is disabled globally.
+        # Do nothing if vml is disabled globally.  Disable by setting
+        # 'vml: false' in config.yml
         return nil unless ctx.vml_enabled?
 
         html = '<!--[if gte mso 9]>'
@@ -16,22 +25,61 @@ module Inkcite
 
         else
 
-          src = opt[:src]
-          raise 'Outlook background missing required src attribute' if src.blank?
+          # Get the fully-qualified URL to the image or placeholder image if it's
+          # missing from the images directory.
+          src = image_url(opt[:src], opt, ctx, false)
+
+          rect = Element.new('v:rect', {
+                  :'xmlns:v' => quote('urn:schemas-microsoft-com:vml'),
+                  :fill => quote(true),
+                  :stroke => quote(false)
+              })
 
-          width = opt[:width].to_i
+          width = opt[:width]
           height = opt[:height].to_i
-          raise "Outlook background requires dimensions: #{width}x#{height} " if width <= 0 || height <= 0
 
-          html << render_tag('v:rect',
-              { :'xmlns:v' => quote('urn:schemas-microsoft-com:vml'), :fill => quote(true), :stroke => quote(false) },
-              { :width => px(width), :height => px(height) }
-          )
+          # When width is omitted, set to 100% or marked as 'fill' then
+          # make the image fill the available space.  It will tile.
+          if width.nil? || width == 'fill' || width == '100%' || width.to_i <= 0
+
+            # The number you pass to 'mso-width-percent' is ten times the percentage you'd like.
+            # https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
+            rect.style[:'mso-width-percent'] = 1000
+
+          else
+            rect.style[:width] = px(width)
+
+          end
+
+          # True if the height of the background image will fit to content within the
+          # background element (specified by omitting the 'height' attribute).
+          fit_to_shape = height <= 0
+          rect.style[:height] = px(height) unless fit_to_shape
+
+          fill = Element.new('v:fill', {
+                  :type => '"tile"',
+                  :src => src,
+                  :self_close => true
+              })
+
+          # Check for a background color.
+          bgcolor = opt[:bgcolor]
+          fill[:color] = quote(hex(bgcolor)) unless bgcolor.blank?
+
+          textbox = Element.new('v:textbox', :inset => '"0,0,0,0"')
+          textbox.style[:'mso-fit-shape-to-text'] = 'true' if fit_to_shape
+
+          html << rect.to_s
+          html << fill.to_s
+          html << textbox.to_s
+
+          div = Element.new('div')
 
-          html << render_tag('v:fill', { :type => 'tile', :src => quote(ctx.image_url(src)), :color => hex(opt[:bgcolor]), :self_close => true })
+          # Font family and other attributes get reset within the v:textbox so allow
+          # the font series of attributes to be applied.
+          mix_font div, opt, ctx
 
-          html << render_tag('v:textbox', { :inset => '0,0,0,0' })
-          html << '<div>'
+          html << div.to_s
 
           # Flag the context as having had VML used within it.
           ctx.vml_used!

data/lib/inkcite/renderer/property.rb

@@ -22,7 +22,7 @@ module Inkcite
           # onto the stack.  No need to push opts and pollute the stack if
           # there is no closing tag to take advantage of them.
           close_tag = "#{SLASH}#{tag}"
-          ctx.tag_stack(tag) << opt unless ctx[close_tag].blank?
+          ctx.tag_stack(tag) << opt unless ctx[close_tag].nil?
 
         else
 

data/lib/inkcite/renderer/responsive.rb

@@ -11,6 +11,7 @@ module Inkcite
       HIDE        = 'hide'
       IMAGE       = 'img'
       SHOW        = 'show'
+      SHOW_INLINE = 'show-inline'
       SWITCH      = 'switch'
       SWITCH_UP   = 'switch-up'
       TOGGLE      = 'toggle'
@@ -135,7 +136,8 @@ module Inkcite
         styles << Rule.new(UNIVERSAL, HIDE, 'display: none !important;', false)
 
         # SHOW, which means the element is hidden on desktop but shown on mobile.
-        styles << Rule.new(UNIVERSAL, SHOW, 'display: block !important;', false)
+        styles << Rule.new('div', SHOW, 'display: block !important; max-height: none !important;', false)
+        styles << Rule.new('div', SHOW_INLINE, 'display: inline !important; max-height: none !important;', false)
 
         # Brian Graves' Column Drop Pattern: Table goes to 100% width by way of
         # the FILL rule and its cells stack vertically.
@@ -162,11 +164,10 @@ module Inkcite
 
         button_styles = {
             :color => "#{cfg.color} !important",
-            :display => 'block',
-            BACKGROUND_COLOR => cfg.bgcolor,
-            TEXT_SHADOW => "0 -1px 0 #{cfg.text_shadow}"
+            :display => 'block'
         }
 
+        button_styles[BACKGROUND_COLOR] = cfg.bgcolor unless cfg.bgcolor.blank?
         button_styles[:border] = cfg.border unless cfg.border.blank?
         button_styles[BORDER_BOTTOM] = cfg.border_bottom if cfg.bevel > 0
         button_styles[BORDER_RADIUS] = Renderer.px(cfg.border_radius) unless cfg.border_radius.blank?
@@ -175,6 +176,7 @@ module Inkcite
         button_styles[MARGIN_TOP] = Renderer.px(cfg.margin_top) if cfg.margin_top > 0
         button_styles[:padding] = Renderer.px(cfg.padding) unless cfg.padding.blank?
         button_styles[TEXT_ALIGN] = 'center'
+        button_styles[TEXT_SHADOW] = "0 -1px 0 #{cfg.text_shadow}" unless cfg.text_shadow.blank?
 
         styles << Rule.new('a', BUTTON, button_styles, false)
 
@@ -211,6 +213,9 @@ module Inkcite
         line_height = detect_font(MOBILE_LINE_HEIGHT, font, opt, parent, ctx)
         style[LINE_HEIGHT] = "#{px(line_height)} !important" unless line_height.blank?
 
+        color = detect_font(MOBILE_FONT_COLOR, font, opt, parent, ctx)
+        style[:color] = "#{hex(color)} !important" unless color.blank?
+
         mix_responsive_style element, opt, ctx, Renderer.render_styles(style) unless style.blank?
 
         font
@@ -283,10 +288,6 @@ module Inkcite
 
         end
 
-        # If the rule is SHOW (only on mobile) we need to restyle the element
-        # so it is hidden.
-        element.style[:display] = 'none' if klass == SHOW
-
         # Add the responsive rule to the element
         element.add_rule rule
 
@@ -347,6 +348,7 @@ module Inkcite
       UNIVERSAL = '*'
 
       # For font overrides on mobile devices.
+      MOBILE_FONT_COLOR  = :'mobile-color'
       MOBILE_FONT_SIZE   = :'mobile-font-size'
       MOBILE_LINE_HEIGHT = :'mobile-line-height'