inkcite 1.12.1 → 1.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 729a1ea12dcb8c0180541d0b4aebb22346985f2f
-  data.tar.gz: c10280cade618463c9ecebe81e50b1acca46a49e
+  metadata.gz: db3a1196fe9bcc49e718925d27731a469807acdc
+  data.tar.gz: 4dfc1aa8998ec37e5ed03a81facaf7f75ac6bfc9
 SHA512:
-  metadata.gz: 39f5ebde420c845be3b262d7b4266a491bed516f561a5679616bd4d235693adbba3c6990bdc9b51c61facb00dcfd35b418c2c2f7f3602f13f7daeb7de971bdf6
-  data.tar.gz: 2f8441f0f65e4faf1323229c30a8fbdd2ea4b31fc8cdc61f4a1520921bc23fb3cb6727e76cd898b104227f047a924d1af7150180dd8e152fa6e36d14c5ae586a
+  metadata.gz: e1e085b9a0668c30f9c6bd968f962caa42205b45702c4c9cba5893bb71ea1fe0b63f6e85c90e767912c42640f36f3a94ed11b54078d189323fc1886a5d37ab7c
+  data.tar.gz: 92166f271e19bbcc7058136e2d77a441179a341ef8107d19c24a0f15f8ddc883c319d5410a50edfecfdac89180b1d518dd5270a1614fd09846f8f3145c3d08c6

data/lib/inkcite/animation.rb

@@ -1,135 +1,157 @@
 module Inkcite
-  module Animation
+  class Animation
 
     class Keyframe
 
-      attr_reader :percent
+      attr_reader :percent, :style
+
+      def initialize percent, ctx, styles={}
 
-      def initialize percent, styles={}
         # Animation percents are always rounded to the nearest whole number.
         @percent = percent.round(0)
-        @styles = styles
+
+        # Instantiate a new Style for this percentage.
+        @style = Inkcite::Renderer::Style.new("#{@percent}%", ctx, styles)
+
       end
 
       def [] key
-        @styles[key]
+        @style[key]
       end
 
       def []= key, val
-        @styles[key] = val
+        @style[key] = val
       end
 
+      # For style chaining - e.g. keyframe.add(:key1, 'val').add(:key)
       def add key, val
-        self[key] = val
+        @style[key] = val
         self
       end
 
+      # Appends a value to an existing key
+      def append key, val
+
+        @style[key] ||= ''
+        @style[key] << ' ' unless @style[key].blank?
+        @style[key] << val
+
+      end
+
       def add_with_prefixes key, val, ctx
 
-        Animation.get_prefixes(ctx).each do |prefix|
+        ctx.prefixes.each do |prefix|
           _key = "#{prefix}#{key}".to_sym
           self[_key] = val
         end
+
         self
       end
 
-      def to_s
+      def to_css prefix
+        @style.to_css(prefix)
+      end
 
-        css = ''
-        css << "  #{@percent}%"
-        css << ' ' * (7 - css.length)
-        css << '{ '
-        css << Renderer.render_styles(@styles)
-        css << ' }'
+      private
 
-        css
-      end
+      # Creates a copy of the array of styles with the appropriate
+      # properties (e.g. transform) prefixed.
+      def get_prefixed_styles prefix
 
-    end
+        _styles = {}
 
-    class Keyframes
+        @styles.each_pair do |key, val|
+          key = "#{prefix}#{key}".to_sym if Inkcite::Renderer::Style.needs_prefixing?(key)
+          _styles[key] = val
+        end
 
-      def initialize name, context
-        @name = name
-        @ctx = context
-        @keyframes = []
+        _styles
       end
 
-      def << keyframe
-        @keyframes << keyframe
-      end
+    end
 
-      def add_keyframe percent, styles
-        self << Keyframe.new(percent, styles)
-      end
+    # Infinite iteration count
+    INFINITE = 'infinite'
 
-      def to_s
+    # Timing functions
+    LINEAR = 'linear'
+    EASE = 'ease'
+    EASE_IN_OUT = 'ease-in-out'
 
-        css = ''
+    # Animation name, view context and array of keyframes
+    attr_reader :name, :ctx
 
-        keyframe_css = @keyframes.sort { |kf1,kf2| kf1.percent <=> kf2.percent }.collect(&:to_s).join("\n")
+    attr_accessor :duration, :timing_function, :delay, :iteration_count
 
-        prefixes = Animation.get_prefixes(@ctx)
+    def initialize name, ctx
+      @name = name
+      @ctx = ctx
 
-        prefixes.each do |prefix|
-          css << "@#{prefix}keyframes #{@name} {\n"
-          css << keyframe_css
-          css << "\n}\n"
-        end
+      # Default values for the animation's properties
+      @duration = 1
+      @delay = 0
+      @iteration_count = INFINITE
+      @timing_function = LINEAR
 
-        css
-      end
+      # Initialize the keyframes
+      @keyframes = []
 
     end
 
-    def self.get_prefixes ctx
-      ALL_BROWSERS
-    end
+    def add_keyframe percent, styles={}
+      keyframe = Keyframe.new(percent, @ctx, styles)
 
-    # True if we're limiting the animation to webkit only.  In development
-    # or in the browser version of the email, the animation should be as
-    # compatible as possible but in all other cases it should be webkit only.
-    def self.webkit_only? ctx
-      false #&& !(ctx.development? || ctx.browser?)
+      @keyframes << keyframe
+
+      keyframe
     end
 
-    # Renders the CSS with the appropriate browser prefixes based
-    # on whether or not this version of the email is webkit only.
-    def self.with_browser_prefixes css, ctx, opts={}
+    def to_keyframe_css
+
+      css = ''
+
+      # Sort the keyframes by percent in ascending order.
+      sorted_keyframes = @keyframes.sort { |kf1, kf2| kf1.percent <=> kf2.percent }
 
-      indentation = opts[:indentation] || ''
+      # Iterate through each prefix and render a set of keyframes
+      # for each.
+      @ctx.prefixes.each do |prefix|
+        css << "@#{prefix}keyframes #{@name} {\n"
+        css << sorted_keyframes.collect { |kf| kf.to_css(prefix) }.join("\n")
+        css << "\n}\n"
+      end
+
+      css
 
-      # Convert an integer indentation value into that number of spaces.
-      indentation = ' ' * indentation if indentation.is_a?(Integer)
+    end
 
-      separator = opts[:separator] || "\n"
+    # Renders this Animation declaration in the syntax defined here
+    # https://developer.mozilla.org/en-US/docs/Web/CSS/animation
+    # e.g. "3s ease-in 1s 2 reverse both paused slidein"
+    def to_s
 
-      # Determine which prefixes will be applied.
-      browser_prefixes = webkit_only?(ctx) ? WEBKIT_BROWSERS : ALL_BROWSERS
+      # The desired format is: duration | timing-function | delay |
+      # iteration-count | direction | fill-mode | play-state | name
+      # Although currently not all attributes are supported.
+      css = [
+          seconds(@duration),
+          @timing_function
+      ]
 
-      # This will hold the completed CSS with all prefixes applied.
-      _css = ''
+      css << seconds(@delay) if @delay > 0
 
-      # Iterate through the prefixes and apply them with the indentation
-      # and CSS declaration with line breaks.
-      browser_prefixes.each do |prefix|
-        _css << indentation
-        _css << prefix
-        _css << css
-        _css << separator
-      end
+      css << @iteration_count
 
-      _css
+      css << @name
+
+      css.join(' ')
     end
 
     private
 
-
-    # Static arrays with browser prefixes.  Turns out that Firefox, IE and Opera
-    # don't require a prefix so to target everything we need the non-prefixed version
-    # (hence the blank entry) plus the webkit prefix.
-    WEBKIT_BROWSERS = ['-webkit-']
-    ALL_BROWSERS = [''] + WEBKIT_BROWSERS
+    def seconds val
+      "#{val}s"
+    end
 
   end
 end

data/lib/inkcite/cli/base.rb

@@ -49,6 +49,9 @@ module Inkcite
           :aliases => '-a',
           :desc => 'Add one or more (space-separated) recipients to this specific mailing',
           :type => :array
+      option :'no-upload',
+          :desc => 'Skip the asset upload, email the preview immediately',
+          :type => :boolean
       def preview to=:developer
         require_relative 'preview'
         Cli::Preview.invoke(email, to, options)
@@ -100,6 +103,9 @@ module Inkcite
       end
 
       desc 'test [options]', 'Tests (or re-tests) the email with Litmus or Email on Acid'
+      option :'no-upload',
+          :desc => 'Skip the asset upload, test the email immediately',
+          :type => :boolean
       option :version,
           :aliases => '-v',
           :desc => 'Test a specific version of the email'

data/lib/inkcite/cli/preview.rb

@@ -8,7 +8,7 @@ module Inkcite
 
         # Push the browser preview(s) up to the server to ensure that the
         # latest images and "view in browser" versions are available.
-        email.upload
+        email.upload unless opt[:'no-upload']
 
         also = opt[:also]
         unless also.blank?

data/lib/inkcite/cli/test.rb

@@ -29,9 +29,9 @@ module Inkcite
           USAGE
         end
 
-        # Push the browser preview up to the server to ensure that the
-        # latest images are available.
-        email.upload
+        # Unless disabled, push the browser preview up to the server to ensure
+        # that the latest images are available.
+        email.upload unless opts[:'no-upload']
 
         Inkcite::Mailer.send(email, opts.merge({ :to => send_to }))
 

data/lib/inkcite/renderer.rb

@@ -2,9 +2,12 @@ require_relative 'renderer/base'
 require_relative 'renderer/element'
 require_relative 'renderer/responsive'
 require_relative 'renderer/container_base'
+require_relative 'renderer/special_effect'
 require_relative 'renderer/image_base'
 require_relative 'renderer/table_base'
+require_relative 'renderer/style'
 
+require_relative 'renderer/background'
 require_relative 'renderer/button'
 require_relative 'renderer/div'
 require_relative 'renderer/footnote'
@@ -20,7 +23,6 @@ require_relative 'renderer/mobile_image'
 require_relative 'renderer/mobile_only'
 require_relative 'renderer/mobile_style'
 require_relative 'renderer/mobile_toggle'
-require_relative 'renderer/outlook_background'
 require_relative 'renderer/partial'
 require_relative 'renderer/preheader'
 require_relative 'renderer/property'
@@ -28,6 +30,7 @@ require_relative 'renderer/redacted'
 require_relative 'renderer/snow'
 require_relative 'renderer/social'
 require_relative 'renderer/span'
+require_relative 'renderer/sparkle'
 require_relative 'renderer/table'
 require_relative 'renderer/td'
 require_relative 'renderer/video_preview'
@@ -68,7 +71,7 @@ module Inkcite
     def self.hex color
 
       # Convert #rgb into #rrggbb
-      if !color.blank? && color.length < 7
+      if !color.blank? && color.length == 4 && color.start_with?('#')
         red = color[1]
         green = color[2]
         blue = color[3]
@@ -167,6 +170,7 @@ module Inkcite
       @renderers ||= {
           :'++'               => Increment.new,
           :a                  => Link.new,
+          :background         => Background.new,
           :button             => Button.new,
           :div                => Div.new,
           :facebook           => Social::Facebook.new,
@@ -183,12 +187,12 @@ module Inkcite
           :'mobile-only'      => MobileOnly.new,
           :'mobile-style'     => MobileStyle.new,
           :'mobile-toggle-on' => MobileToggleOn.new,
-          :'outlook-bg'       => OutlookBackground.new,
           :pintrest           => Social::Pintrest.new,
           :preheader          => Preheader.new,
           :redacted           => Redacted.new,
           :snow               => Snow.new,
           :span               => Span.new,
+          :sparkle            => Sparkle.new,
           :table              => Table.new,
           :td                 => Td.new,
           :twitter            => Social::Twitter.new,

data/lib/inkcite/renderer/background.rb

@@ -0,0 +1,153 @@
+module Inkcite
+  module Renderer
+
+    # Bulletproof background image support courtesy of @stigm via Campaign Monitor
+    # https://backgrounds.cm/
+    #
+    # {background src=YJOX1PC.png bgcolor=#7bceeb height=92 width=120}
+    #   ...
+    # {/background}
+    #
+    class Background < ImageBase
+
+      def render tag, opt, ctx
+
+        html = ''
+
+        if tag == '/background'
+
+          html << '</div>'
+
+          # If VML is enabled, then close the textbox and rect that were created
+          # by the opening tags.
+          if ctx.vml_enabled?
+            html << '{outlook-only}'
+            html << '</v:textbox>'
+            html << '</v:rect>'
+            html << '{/outlook-only}'
+          end
+
+          html << '{/td}'
+          html << '{/table}'
+
+        else
+
+          # Primary background image
+          src = opt[:src]
+
+          # Dimensions
+          width = opt[:width]
+          height = opt[:height].to_i
+
+          # True if the background image's width should fill the available
+          # horizontal space.  Specified by either leaving the width blank or
+          # specifying 'fill' or '100%'
+          fill_width = width.nil? || width == 'fill' || width == '100%' || width.to_i <= 0
+
+          table = Element.new('table')
+          table[:height] = height if height > 0
+          table[:width] = (fill_width ? '100%' : width)
+          table[:background] = quote(src) unless none?(src)
+
+          # Iterate through the list of the parameters that are copied straight into
+          # the internal {table} Helper.  This is a sanitized list of supported
+          # parameters to prevent the user from setting things inadvertently that
+          # might interfere with the display of the background (e.g. padding)
+          TABLE_PASSTHRU_OPS.each do |key|
+            val = opt[key]
+            table[key] = quote(val) unless none?(val)
+          end
+
+          # Determine if a fallback background color has been defined.
+          bgcolor = detect_bgcolor(opt)
+          table[:bgcolor] = quote(bgcolor) unless none?(bgcolor)
+
+          # Check for a background gradient
+          bggradient = detect_bggradient(opt)
+          table[:bggradient] = quote(bggradient) unless none?(bggradient)
+
+          td = Element.new('td')
+
+          valign = opt[:valign]
+          td[:valign] = valign unless valign.blank?
+
+          html << table.to_helper
+          html << td.to_helper
+
+          # VML is only added if it is enabled for the project.
+          if ctx.vml_enabled?
+
+            # Get the fully-qualified URL to the image or placeholder image if it's
+            # missing from the images directory.  This comes back with quotes around it.
+            outlook_src = image_url(opt[OUTLOOK_SRC] || src, opt, ctx, false)
+
+            # 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 = Element.new('v:rect', { :'xmlns:v' => quote('urn:schemas-microsoft-com:vml'), :fill => quote('t'), :stroke => quote('f') })
+
+            if fill_width
+
+              # 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
+
+            rect.style[:height] = px(height) unless fit_to_shape
+
+            fill = Element.new('v:fill', { :type => '"tile"', :src => outlook_src, :self_close => true })
+            fill[:color] = quote(bgcolor) unless none?(bgcolor)
+
+            textbox = Element.new('v:textbox', :inset => '"0,0,0,0"')
+            textbox.style[:'mso-fit-shape-to-text'] = 'True' if fit_to_shape
+
+            html << '{outlook-only}'
+            html << rect.to_s
+            html << fill.to_s
+            html << textbox.to_s
+            html << '{/outlook-only}'
+
+            # Flag the context as having had VML used within it.
+            ctx.vml_used!
+
+          end
+
+          div = Element.new('div')
+
+          # 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
+
+          # Text alignment within the div.
+          mix_text_align div, opt, ctx
+
+          html << div.to_s
+
+        end
+
+        html
+      end
+
+      private
+
+      # The custom
+      MOBILE_SRC = :'mobile-src'
+
+      # These are the parameters that are passed directly from
+      # the provided opt to the {table} rendered within the
+      # background Helper.
+      TABLE_PASSTHRU_OPS = [
+          BACKGROUND_POSITION, :border, BORDER_BOTTOM, BORDER_LEFT, BORDER_RADIUS, BORDER_RIGHT,
+          BORDER_SPACING, BORDER_TOP, :mobile, MOBILE_BGCOLOR, MOBILE_BACKGROUND, MOBILE_BACKGROUND_COLOR,
+          MOBILE_BACKGROUND_IMAGE, MOBILE_BACKGROUND_REPEAT, MOBILE_BACKGROUND_POSITION, MOBILE_PADDING,
+          MOBILE_SRC, MOBILE_BACKGROUND_SIZE
+      ]
+
+    end
+  end
+end