inkcite 1.15.0 → 1.16.0

data/lib/inkcite/renderer/button.rb

@@ -47,6 +47,10 @@ module Inkcite
           @opt[:font] || @ctx[BUTTON_FONT]
         end
 
+        def font_family
+          @opt[Base::FONT_FAMILY] || @ctx[BUTTON_FONT_FAMILY]
+        end
+
         def font_size
           (@opt[Base::FONT_SIZE] || @ctx[BUTTON_FONT_SIZE]).to_i
         end
@@ -96,6 +100,7 @@ module Inkcite
         BUTTON_COLOR = :'button-color'
         BUTTON_FLOAT = :'button-float'
         BUTTON_FONT = :'button-font'
+        BUTTON_FONT_FAMILY = :'button-font-family'
         BUTTON_FONT_SIZE = :'button-font-size'
         BUTTON_FONT_WEIGHT = :'button-font-weight'
         BUTTON_HEIGHT = :'button-height'
@@ -124,9 +129,13 @@ module Inkcite
 
           cfg = Config.new(ctx, opt)
 
+          no_tag = opt[:'no-tag'] == true
+
           # Wrap the table in a link to make the whole thing clickable.  This works
           # in most email clients but doesn't work in Outlook (for a change).
-          html << "{a id=\"#{id}\" href=\"#{href}\" color=\"none\"}"
+          html << %Q({a id="#{id}" href="#{href}" color="none")
+          html << ' no-tag' if no_tag
+          html << '}'
 
           # Responsive button is just a highly styled table/td combination with optional
           # curved corners and a lower bevel (border).
@@ -146,10 +155,11 @@ module Inkcite
           html << " width=#{cfg.width}" if cfg.width > 0
           html << " float=#{cfg.float}" if cfg.float
           html << %Q( mobile="fill"}\n)
-          html << "{td align=center"
-          html << " height=#{cfg.height} valign=middle" if cfg.height > 0
+          html << '{td align=center'
+          html << %Q( height=#{cfg.height} valign=middle) if cfg.height > 0
           html << %Q( font="#{cfg.font}" color="none")
-          html << " line-height=#{cfg.line_height}" unless cfg.line_height.blank?
+          html << %Q( font-family="#{cfg.font_family}") unless cfg.font_family.blank?
+          html << %Q( line-height=#{cfg.line_height}) unless cfg.line_height.blank?
           html << %Q( font-size="#{cfg.font_size}") if cfg.font_size > 0
           html << %Q( font-weight="#{cfg.font_weight}") unless cfg.font_weight.blank?
 
@@ -164,9 +174,9 @@ module Inkcite
           # clickable.
           html << %Q({a id="#{id}" href="#{href}" color="#{cfg.color}")
           html << %Q( letter-spacing="#{cfg.letter_spacing}") unless cfg.letter_spacing.blank?
+          html << %q( no-tag) if no_tag
           html << %q(})
 
-
         else
 
           html << "{/a}{/td}\n{/table}{/a}"

data/lib/inkcite/renderer/container_base.rb

@@ -16,7 +16,17 @@ module Inkcite
 
         # Supports both integers and mixed padding (e.g. 10px 20px)
         padding = opt[:padding]
-        element.style[:padding] = px(padding) unless none?(padding)
+        unless none?(padding)
+          paddingpx = px(padding)
+          element.style[:padding] = paddingpx
+
+          # Copy the padding into the MSO custom padding attribute for high-DPI
+          # compatibility
+          paddingpx = "#{paddingpx} #{paddingpx} #{paddingpx} #{paddingpx}" unless paddingpx.include?(' ')
+          element.style[MSO_PADDING_ALT] = paddingpx
+
+        end
+
 
         # Vertical alignment - top, middle, bottom.
         valign = opt[:valign]
@@ -32,6 +42,10 @@ module Inkcite
         # Support for mobile-padding and mobile-padding-(direction)
         mix_mobile_padding element, opt, ctx
 
+        # White space wrapping can be controlled with mobile-no-wrap or mobile-wrap
+        mobile_white_space = (:nowrap if opt[MOBILE_NOWRAP]) || (:normal if opt[MOBILE_WRAP])
+        element.mobile_style[WHITE_SPACE] = mobile_white_space unless mobile_white_space.nil?
+
         mix_responsive element, opt, ctx
 
         element.to_s

data/lib/inkcite/renderer/image.rb

@@ -25,7 +25,7 @@ module Inkcite
 
           # Need to add an extra space for the email clients (ahem, Gmail,
           # cough) that don't support alt text with line breaks.
-          alt.gsub!("\n", " \n")
+          alt.gsub!("\n", " \n ")
 
           # Remove all HTML from the alt text.  Ran into a situation where a
           # custom Helper was applying styled text as image alt text.  Since

data/lib/inkcite/renderer/image_base.rb

@@ -98,6 +98,14 @@ module Inkcite
       def mix_dimensions img, opt, ctx
         super
         DIMENSIONS.each { |dim| img[dim] = opt[dim] }
+
+        # Allow images to be easily scaled by percentage.
+        scale = opt[:scale].to_f
+        scale = 1 if scale > 1
+        scale = 0 if scale < 0
+
+        DIMENSIONS.each { |dim| img[dim] = (opt[dim].to_f * scale).round } if scale > 0 && scale < 1
+
       end
 
       private

data/lib/inkcite/renderer/list.rb

@@ -0,0 +1,104 @@
+module Inkcite
+  module Renderer
+    class List < Base
+
+      def render tag, opt, ctx
+
+        html = ''
+
+        # Get the stack of list helpers which will used based on whether this is
+        # a list item or a list open/close
+        tag_stack = ctx.tag_stack(:list)
+
+        # Check for the close of any list
+        if tag == 'ul' || tag == 'ol'
+          html << '{table}'
+
+          # Add the type of list as an attribute so the list item can determine the
+          # appropriate bullet/number.
+          opt[:type] = tag
+
+          # Initialize the child count to zero which will be incremented with each
+          # list child added.
+          opt[:children] = 0
+
+          # Push the options onto the stack so they can be referenced by the list items.
+          tag_stack << opt
+
+        elsif tag == '/ul' || tag == '/ol'
+          html << '</td>{/table}'
+
+          # Remove the previously open list declaration.
+          tag_stack.pop
+
+        elsif tag == 'li'
+
+          # Get the options declared when the list was started.
+          parent_opts = tag_stack.opts
+
+          # Increment the child count in the parent opts
+          child_count = parent_opts[:children] = parent_opts[:children] + 1
+
+          if child_count > 1
+
+            # Add a separator between this and previous list items
+            spacing = (parent_opts[:spacing] || 3).to_i
+            if spacing > 0
+              html << "{div height=#{spacing} line-height=#{spacing} font-size=#{spacing}}&nbsp;{/div}</td>"
+            end
+
+            # Start a new row after the previous one.
+            html << '</tr><tr>'
+
+          end
+
+          bullet = if parent_opts[:type] == 'ol'
+            "#{child_count}."
+          else
+            detect(opt[:bullet], parent_opts[:bullet], '&bull;')
+          end
+
+          # Lists can be repurposed sans bullets to be tables of items with
+          # adjustable space between them by setting the bullet to none.
+          unless none?(bullet)
+
+            # Start a new <td> to hold the bullet and spacing.
+            bullet_td = Element.new('td', :valign => :top)
+
+            # Apply fonts to the bullet to it displays consistently.
+            mix_font bullet_td, opt, ctx, parent_opts
+
+            html << bullet_td.to_s
+
+            # Number of non-breaking spaces to put before the bullet.
+            indent = (parent_opts[:indent] || 2).to_i
+            html << '&nbsp;' * indent if indent > 0
+
+            html << bullet
+            html << '&nbsp;</td>'
+
+          end
+
+          # Start a new <td> to hold the list item itself.
+          item_td = Element.new('td')
+
+          # Consistent font handling for the items int he list.
+          mix_font item_td, opt, ctx, parent_opts
+
+          html << item_td.to_s
+
+        elsif tag == '/li'
+
+          # This space left intentionally blank.  The closing {/td} is added either
+          # by the next child in the list (so that vertical space can be injected into
+          # /this/ list item) or by closing the list itself.
+
+        end
+
+        html
+      end
+
+
+    end
+  end
+end

data/lib/inkcite/renderer/mobile_image.rb

@@ -34,6 +34,9 @@ module Inkcite
         # span assumes the exact dimensions of the image.
         DIMENSIONS.each { |dim| img.style[dim] = px(opt[dim]) }
 
+        # Image borders on mobile
+        mix_border img, opt, ctx
+
         mobile = opt[:mobile]
 
         # For FILL-style mobile images, override the width.  The height (in px)

data/lib/inkcite/renderer/responsive.rb

@@ -30,7 +30,9 @@ module Inkcite
       # Other mobile-specific properties
       MOBILE_HEIGHT = :'mobile-height'
       MOBILE_MAX_WIDTH = :'mobile-max-width'
+      MOBILE_NOWRAP = :'mobile-nowrap'
       MOBILE_PADDING = :'mobile-padding'
+      MOBILE_WRAP = :'mobile-wrap'
       MOBILE_WIDTH = :'mobile-width'
 
       class Rule

data/lib/inkcite/renderer/slant.rb

@@ -0,0 +1,207 @@
+module Inkcite
+  module Renderer
+
+    # @helper Slanted Edge
+    # @summary Bulletproof, responsive, sloped edges for modern email designs
+    #
+    # @description
+    # The {slant} Helper provides consistent, reliable sloped edges between sections of your email.  You can customize the size, color and dimensions of the slant.  It renders using CSS in modern email clients and has a VML fallback for Outlook.
+    #
+    # @warning Slants are not compatible with Outlook 2016 which renders a thin, white border around the slant.
+    # @warning Older email clients render angled CSS borders without anti-aliasing
+    #
+    # @credit
+    # Slanted edges based on @M_J_Robbins sloped edges for email concept.
+    # https://codepen.io/M_J_Robbins/pen/rpzLNx
+    #
+    # @usage
+    # {div width=600 padding=15 bgcolor=#009}
+    #    ...
+    # {/div}
+    # {slant bgcolor=#009 color=#909 bottom right width=600 height=50}
+    # {div width=600 padding=15 bgcolor=#909}
+    #    ...
+    # {/div}
+    class Slant < Responsive
+      def render tag, opt, ctx
+
+        html = ''
+
+        # @attribute no-fallback If present, disables VML fallback so the slant doesn't appear in Outlook 2007-2013.; alias no-vml
+        no_vml = opt[NO_FALLBACK] || opt[NO_VML]
+
+        # Check to see if VML is enabled for this email
+        include_fallback = ctx.vml_enabled? && !no_vml
+
+        # The first time the slant is used, we need to initialize the VML shapes
+        # and the responsive class that will be used to scale this.
+        if include_fallback
+          if ctx.once?(:slant)
+
+            # Notify the context that VML has been used in this email.
+            ctx.vml_used!
+
+            html << IF_OUTLOOK_LT_2016
+
+            # These need to be wrapped in a div with zero height otherwise unwanted whitespace will
+            # appear in the email where these shapes are initialized.
+            # https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom
+            html << '{div font-size=0 line-height=0}'
+
+            html << render_vml_triangle('stl', [ [0, 1], [1, 0], [0, 0] ])
+            html << render_vml_triangle('str', [ [0, 0], [1, 0], [1, 1] ])
+            html << render_vml_triangle('sbl', [ [0, 0], [1, 1], [0, 1] ])
+            html << render_vml_triangle('sbr', [ [0, 1], [1, 1], [1, 0] ])
+
+            html << '{/div}'
+            html << '{/if}'
+
+          end
+        end
+
+        # @attribute height The height of the slope in pixels; required
+        height = opt[:height].to_i
+        # @attribute width The width of the slope in pixels; required
+        width = opt[:width].to_i
+        if height <= 0 || width <= 0
+          ctx.error('Missing slant dimensions', opt)
+          return nil
+        end
+
+        # Pre-calculate half the width and height of the slant.
+        half_height = (height / 2.0).round(0)
+        half_width = (width / 2.0).round(0)
+
+        # @attribute color The foreground color of the slanted edge.; default #234
+        color = hex(opt[:color] || '#234')
+
+        directions = [
+            (opt[:bottom] ? :bottom : :top),
+            (opt[:left] ? :left : :right)
+        ]
+
+        border_colors = []
+        DIRECTIONS.each do |d|
+          next if d.nil?
+          border_colors << (directions.include?(d) ? color : TRANSPARENT)
+        end
+
+        # @attribute no-wrap If present, disables the table that wraps the slant. Use this if the slant is already in a container (e.g. table or div) that provides width and background color.
+        no_wrap = opt[NO_WRAP]
+        unless no_wrap
+          wrap_div = Element.new('table')
+          wrap_div[:width] = width
+
+          # @attribute bgcolor The color that appears behind the slanted edge; default transparent; alias background-color
+          bgcolor = detect_bgcolor(opt)
+          wrap_div[:bgcolor] = bgcolor unless none?(bgcolor)
+
+          wrap_div[:mobile] = :fill
+          html << wrap_div.to_helper
+          html << '{td}'
+        end
+
+        # This zero-sized div will have beefed up borders that create the
+        # slant effect.
+        slant_div = Element.new('div')
+        slant_div.style[BORDER_COLOR] = border_colors.join(' ')
+        slant_div.style[BORDER_STYLE] = :solid
+        slant_div.style[BORDER_WIDTH] = "#{px(half_height)} #{px(half_width)}"
+        slant_div.style[MSO_HIDE] = :all
+
+        # Fix to trigger antialiasing in the slanted border on webkit clients
+        # like Outlook for iOS
+        # https://stackoverflow.com/a/27506977
+        slant_div.style[:'-webkit-transform'] = 'rotate(0.0005deg)'
+
+        # Create a custom mobile class name for this slant.  Then check to
+        # see if that responsive rule has already been registered - otherwise
+        # add it.
+        klass = "slant#{half_height}"
+        slant_rule = ctx.media_query.find_by_klass(klass) || Rule.new('div', klass, "border-width: #{px(half_height)} 50vw !important;")
+        ctx.media_query << slant_div.add_rule(slant_rule)
+
+        html << slant_div.to_s
+        html << '</div>'
+
+        if include_fallback
+          backward = false;
+
+          vshape = Element.new('v:shape')
+
+          # Generate the unique VML shape ID from the direction of the
+          # 90-degree corner.
+          type_id = "s" # Slant
+          type_id << (opt[:bottom] ? 'b' : 't')
+          type_id << (opt[:left] ? 'l' : 'r')
+
+          vshape[:type] = quote(type_id)
+          vshape.style[:width] = px(width)
+          vshape.style[:height] = px(height)
+          vshape.style[:'mso-position-horizontal'] = :center
+          vshape[:fillcolor] = color
+          vshape[:stroked] = :f
+
+          # Render the outlook-only VML-based fallback.  Once again, it needs
+          # to be wrapped in a zero-height div to prevent unwanted space from
+          # being injected on certain version of outlook.
+          html << IF_OUTLOOK_LT_2016
+          html << '{div font-size=0 line-height=0}'
+          html << vshape.to_s
+          html << '<o:lock selection="t"/>'
+          html << '</v:shape>'
+          html << '{/div}'
+          html << '{/if}'
+
+        end
+
+        # Close the wrap element.
+        html << '{/td}{/table}' unless no_wrap
+
+        html
+      end
+
+      private
+
+      def render_vml_coordinate coord
+        x, y = coord
+        "#{x * COORDINATE_SCALE},#{y * COORDINATE_SCALE}"
+      end
+
+      def render_vml_triangle id, coords
+
+        path = ''
+        path << 'm' # moveto
+        path << render_vml_coordinate(coords[0])
+        path << 'l' # lineto
+        path << render_vml_coordinate(coords[1])
+        path << ','
+        path << render_vml_coordinate(coords[2])
+        path << 'x' # close
+        path << 'e' # end
+
+        %Q(<v:shapetype id="#{id}" path="#{path}" xmlns:v="urn:schemas-microsoft-com:vml"/>)
+      end
+
+      # This is the MSO conditional used to prevent the slant from
+      # appearing in Outlook 2016 where it has thin lines around the
+      # VML according to Litmus results.
+      IF_OUTLOOK_LT_2016 = '{if test="lt mso 16"}'
+
+      # Flags allowing the user to disable VML fallbacks.
+      NO_FALLBACK = :'no-fallback'
+      NO_VML = :'no-vml'
+
+      # Tag allowing the user to disable the wrap element if they don't want it
+      NO_WRAP = :'no-wrap'
+
+      # Static constant for the color used where the border is transparent
+      # to create the slanted edge.
+      TRANSPARENT = 'transparent'
+
+      # Arbitrary multiplier present in the original codepen.
+      COORDINATE_SCALE = 21600
+
+    end
+  end
+end

data/lib/inkcite/renderer/snow.rb

@@ -2,6 +2,10 @@ module Inkcite
   module Renderer
     class Snow < SpecialEffect
 
+      # Name of the array of value distribution used
+      # to make the animation start at different time points.
+      STARTING_PERCENT = :'starting-percent'
+
       protected
 
       def config_all_children style, sfx
@@ -23,7 +27,13 @@ module Inkcite
         style[:opacity] = opacity if opacity < OPACITY_CEIL
 
         animation.duration = speed
-        animation.delay = ((sfx.time / sfx.count) * n).round(1)
+
+        # If you start an animation with a negative delay, browsers and email clients
+        # start the animation as if it had already begun some time in the past
+        # https://css-tricks.com/starting-css-animations-mid-way/
+        starting_percent = sfx[STARTING_PERCENT][n] / 100.0
+        animation.delay = 0 - (speed * starting_percent).round
+
         animation.timing_function = Animation::LINEAR
 
         start_left = sfx.positions_x[n]
@@ -62,6 +72,10 @@ module Inkcite
         # the container's width in random order.
         sfx.positions_x.shuffle!
 
+        # Generate a random assortment of percent completed for the
+        # snowflakes so they can start mid-fall.
+        sfx[STARTING_PERCENT] = sfx.equal_distribution(0..100, sfx.count).shuffle
+
       end
 
       def defaults opt, ctx