inkcite 1.13.0 → 1.14.0

data/lib/inkcite/parser.rb

@@ -22,7 +22,7 @@ module Inkcite
         # Provide the block with the area that was matched, sans wrapper brackets.
         # Replace the brackets and original value with the block's results.
         result = yield(match[1].to_s) || EMPTY_STRING
-        str[offset.first, offset.last - offset.first] = result
+        str[offset.first, offset.last - offset.first] = result.to_s
 
         # Ensure we don't infinite loop.
         failsafe += 1

data/lib/inkcite/renderer.rb

@@ -1,15 +1,14 @@
 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/fireworks'
 require_relative 'renderer/footnote'
 require_relative 'renderer/google_analytics'
 require_relative 'renderer/image'
@@ -174,6 +173,7 @@ module Inkcite
           :button             => Button.new,
           :div                => Div.new,
           :facebook           => Social::Facebook.new,
+          :fireworks          => Fireworks.new,
           :footnote           => Footnote.new,
           :footnotes          => Footnotes.new,
           :google             => GoogleAnalytics.new,

data/lib/inkcite/renderer/background.rb

@@ -145,7 +145,7 @@ module Inkcite
           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
+          MOBILE_SRC, MOBILE_BACKGROUND_SIZE, MOBILE_WIDTH
       ]
 
     end

data/lib/inkcite/renderer/base.rb

@@ -168,7 +168,7 @@ module Inkcite
           dir_opt_key = add_directional_suffix(opt_key, dir)
           dir_css_key = add_directional_suffix(css_key, dir)
           value = opt[dir_opt_key]
-          next if none?(value)
+          next if value.blank?
 
           value = px(value) if as_px
           into[dir_css_key] = value

data/lib/inkcite/renderer/container_base.rb

@@ -18,10 +18,6 @@ module Inkcite
         padding = opt[:padding]
         element.style[:padding] = px(padding) unless none?(padding)
 
-        # Supports custom padding on mobile - e.g. mobile-padding="15px 5px"
-        mobile_padding = opt[MOBILE_PADDING]
-        element.mobile_style[:padding] = px(mobile_padding) unless none?(mobile_padding)
-
         # Vertical alignment - top, middle, bottom.
         valign = opt[:valign]
         element.style[VERTICAL_ALIGN] = valign unless none?(valign)
@@ -33,6 +29,9 @@ module Inkcite
         # style to the element.
         element.style[WHITE_SPACE] = :nowrap if opt[:nowrap]
 
+        # Support for mobile-padding and mobile-padding-(direction)
+        mix_mobile_padding element, opt, ctx
+
         mix_responsive element, opt, ctx
 
         element.to_s

data/lib/inkcite/renderer/fireworks.rb

@@ -0,0 +1,231 @@
+module Inkcite
+  module Renderer
+
+    # Animated CSS fireworks special effect based on the technique
+    # by Eddie Lin https://codepen.io/yshlin/pen/ylDEk
+    class Fireworks < SpecialEffect
+
+      private
+
+      # Each firework will move this many positions during the
+      # entire animation.
+      TOTAL_POSITIONS = 5
+
+      # The number of hue degrees to randomly alter the hue of each spark
+      HUE_RANGE = :'hue-range'
+
+      # Names of the attributes controlling min and max explosion size.
+      RADIUS_MIN = :'min-radius'
+      RADIUS_MAX = :'max-radius'
+
+      # Attributes used for color generation
+      SATURATION = 100
+      LUMINANCE = 50
+
+      def config_effect_context sfx
+
+        count = sfx.count
+
+        # Total number of firework instances multiplied by the number
+        # of positions each firework will cycle through.
+        position_count = TOTAL_POSITIONS * count
+        positions = sfx.equal_distribution(sfx.position_range, position_count)
+
+        sfx[:x_positions] = positions
+        sfx[:y_positions] = positions.dup
+
+        # Equal distribution of hues based on the number of fireworks
+        # if the rainbow option is selected
+        sfx[:hues] = sfx.equal_distribution(0..360, count)
+
+      end
+
+      def create_explosion_animation n, hue, duration, delay, sfx
+
+        # Calculate the radius size for this explosion
+        min_radius = sfx[RADIUS_MIN].to_i
+        max_radius = sfx[RADIUS_MAX].to_i
+        radius_range = (min_radius..max_radius)
+        radius = rand(radius_range).round(0)
+        half_radius = radius / 2.0
+
+        hue_range = (sfx[HUE_RANGE] || 40).to_i
+        hue_range_2x = hue_range * 2
+
+        sparks = sfx[:sparks].to_i
+
+        box_shadow = sparks.times.collect do |n|
+
+          # Pick a random position for this spark to move to
+          x = (rand(radius) - half_radius).round(0)
+          y = (rand(radius) - half_radius).round(0)
+
+          # Randomly pick a slightly different hue for this spark
+          _hue = hue + hue_range - rand(hue_range_2x)
+          color = Inkcite::Util::hsl_to_color(_hue, SATURATION, LUMINANCE)
+
+          "#{px(x)} #{px(y)} #{color}"
+        end
+
+        anim = Inkcite::Animation.new(sfx.animation_class_name(n, 'bang'), sfx.ctx)
+        anim.duration = duration
+        anim.delay = delay if delay > 0
+        anim.timing_function = Inkcite::Animation::EASE_OUT
+        anim.add_keyframe 100, { BOX_SHADOW => box_shadow.join(', ') }
+
+        sfx.animations << anim
+
+        anim
+      end
+
+      def create_gravity_animation sfx
+
+        anim = Animation.new('gravity', sfx.ctx)
+
+        # All fireworks fade to zero opacity and size by the end of the gravity cycle.
+        keyframe = anim.add_keyframe 100, { :opacity => 0, :width => 0, :height => 0 }
+
+        # Check to see if gravity has been specified for the fireworks.  If so
+        # apply it as a vertical translation (positive equals downward)
+        gravity = sfx[:gravity].to_i
+        keyframe[:transform] = "translateY(#{px(gravity)})" if gravity != 0
+
+        sfx.animations << anim
+
+      end
+
+      def create_position_animation n, duration, delay, sfx
+
+        # This is the percentage amount of the total animation that will
+        # be spent in each position.
+        keyframe_duration = (100 / TOTAL_POSITIONS.to_f)
+
+        anim = Inkcite::Animation.new(sfx.animation_class_name(n, 'position'), sfx.ctx)
+        anim.duration = duration
+        anim.delay = delay if delay > 0
+        anim.timing_function = Inkcite::Animation::LINEAR
+
+        x_positions = sfx[:x_positions]
+        y_positions = sfx[:y_positions]
+
+        percent = 0
+        TOTAL_POSITIONS.times do |n|
+
+          # Pick a random position for this firework
+          top = y_positions.delete_at(rand(y_positions.length))
+          left = x_positions.delete_at(rand(x_positions.length))
+
+          keyframe = anim.add_keyframe(percent, { :top => pct(top), :left => pct(left) })
+          keyframe.duration = keyframe_duration - 0.1
+
+          percent += keyframe_duration
+        end
+
+        sfx.animations << anim
+
+        anim
+      end
+
+      protected
+
+      def config_all_children style, sfx
+
+        # If all of the sparks in the firework have the same size
+        # (e.g. min-size equals max-size) then save some CSS space
+        # by defining it once for all children.
+        if sfx.same_size?
+          style[:width] = px(sfx.min_size)
+          style[:height] = px(sfx.min_size)
+        end
+
+        # Make sure all explosions start off-screen.
+        style[:top] = "-#{px(sfx.max_size)}"
+
+        style[BORDER_RADIUS] = '50%'
+
+        sparks = sfx[:sparks].to_i
+
+        # All sparks start with a box shadow at their exact center,
+        # all in white.
+        box_shadow = sparks.times.collect { |n| '0 0 #fff' }
+        style[BOX_SHADOW] = box_shadow.join(', ')
+
+        # Create the global gravity animation that is consistent for all fireworks.
+        # There is no variance in this animation so it is created and added to the
+        # context only once.
+        create_gravity_animation(sfx)
+
+      end
+
+      def config_child n, child, style, animation, sfx
+
+        # If all of the fireworks are different possible sizes
+        # then pick a random size for this child.
+        unless sfx.same_size?
+          size = sfx.rand_size
+          style[:width] = px(size)
+          style[:height] = px(size)
+        end
+
+        # If rainbow is specified, choose the next color in the array - otherwise
+        # choose a random hue unless a specific one has been specified.
+        hue = sfx[:rainbow] ? sfx[:hues][n] : (sfx[:hue] || rand(360)).to_i
+
+        # Randomly pick a color for this explosion by choosing a
+        # random hue and then converting it to a hex color
+        color = Inkcite::Util::hsl_to_color(hue, 100, 50)
+        style[BACKGROUND_COLOR] = color
+
+        # After the first child, each firework should have a random
+        # delay before its animation starts - giving the different
+        # fireworks a staggered launch.
+        delay = n > 0 ? 0.25 + rand(sfx.count).round(2) : 0
+
+        # This is the total amount of time it will take the firework to
+        # move through each of its positions.
+        position_speed = sfx.rand_speed
+
+        # This is the speed the firework animates it's explosion and gravity
+        # components - which need to repeat n-number of times based on the
+        # total number of positions.
+        explosion_speed = (position_speed / TOTAL_POSITIONS.to_f).round(2)
+
+        gravity_animation = Inkcite::Animation.new('gravity', sfx.ctx)
+        gravity_animation.duration = explosion_speed
+        gravity_animation.delay = delay if n > 0
+        gravity_animation.timing_function = Inkcite::Animation::EASE_IN
+
+        composite_animation = Inkcite::Animation::Composite.new
+        composite_animation << create_explosion_animation(n, hue, explosion_speed, delay, sfx)
+        composite_animation << gravity_animation
+        composite_animation << create_position_animation(n, position_speed, delay, sfx)
+
+        style[:animation] = composite_animation
+
+        # # Each firework consists of three separate animations - one to animate
+        # # the explosion, one to fade out/apply gravity and one to move the
+        # # firework through it's fixed positions.
+        # style[:animation] = "1s bang ease-out infinite, 1s gravity ease-in infinite, #{TOTAL_POSITIONS}s position linear infinite"
+
+        # style[ANIMATION_DURATION] = "#{explosion_speed}s, #{explosion_speed}s, #{position_speed}s"
+
+      end
+
+      def defaults opt, ctx
+        {
+            :bgcolor => '#000000',
+            :sparks => 50,
+            :count => 2,
+            :gravity => 200,
+            RADIUS_MIN => 150,
+            RADIUS_MAX => 400,
+            SIZE_MIN => 10,
+            SIZE_MAX => 10,
+            SPEED_MIN => 5,
+            SPEED_MAX => 10,
+        }
+      end
+
+    end
+  end
+end

data/lib/inkcite/renderer/in_browser.rb

@@ -1,4 +1,3 @@
-
 module Inkcite
   module Renderer
     class InBrowser < Base
@@ -20,7 +19,7 @@ module Inkcite
         color = opt[:color]
 
         # Optional call-to-action override - otherwise defaults to view in browser.
-        cta = opt[:cta] || ctx.production?? 'View in Browser' : 'Preview in Browser'
+        cta = opt[:cta] || ctx.production?? 'View&nbsp;in&nbsp;Browser' : 'Preview&nbsp;in&nbsp;Browser'
 
         id = opt[:id] || 'in-browser'
 

data/lib/inkcite/renderer/responsive.rb

@@ -28,8 +28,9 @@ module Inkcite
       MOBILE_SRC = :'mobile-src'
 
       # Other mobile-specific properties
+      MOBILE_HEIGHT = :'mobile-height'
       MOBILE_PADDING = :'mobile-padding'
-
+      MOBILE_WIDTH = :'mobile-width'
 
       class Rule
 
@@ -241,8 +242,28 @@ module Inkcite
         mix_directional element, element.mobile_style, opt, ctx, MOBILE_MARGIN, :margin, true
       end
 
+      def mix_mobile_padding element, opt, ctx
+        mix_directional element, element.mobile_style, opt, ctx, MOBILE_PADDING, :padding, true
+      end
+
+      # A separate method for mixing in text alignment because the table cell
+      # helper handles alignment different from normal container elements.
+      def mix_mobile_text_align element, opt, ctx
+
+        # Support for mobile-text-align
+        align = opt[MOBILE_TEXT_ALIGN]
+        element.mobile_style[TEXT_ALIGN] = align unless none?(align)
+
+      end
+
       def mix_responsive element, opt, ctx, klass=nil
 
+        mobile_style = opt[MOBILE_STYLE]
+        ctx.error 'mobile-style is no longer supported', { :element => element.to_s, MOBILE_STYLE => mobile_style } unless mobile_style.blank?
+
+        mobile_display = opt[MOBILE_DISPLAY]
+        element.mobile_style[:display] = mobile_display unless none?(mobile_display)
+
         # Apply the "mobile" attribute or use the override if one was provided.
         mix_responsive_klass element, opt, ctx, klass || opt[:mobile]
 
@@ -398,6 +419,11 @@ module Inkcite
 
       end
 
+      def mix_text_align element, opt, ctx
+        super
+        mix_mobile_text_align element, opt, ctx
+      end
+
       def unique_klass ctx
         'm%1d' % ctx.unique_id(:m)
       end
@@ -406,9 +432,10 @@ module Inkcite
 
       # Attribute used to declare custom mobile styles for an element.
       MOBILE_BORDER = :'mobile-border'
+      MOBILE_DISPLAY = :'mobile-display'
       MOBILE_MARGIN = :'mobile-margin'
       MOBILE_STYLE = :'mobile-style'
-      MOBILE_WIDTH = :'mobile-width'
+      MOBILE_TEXT_ALIGN = :'mobile-text-align'
 
       # Universal CSS selector.
       UNIVERSAL = '*'

data/lib/inkcite/renderer/snow.rb

@@ -4,7 +4,7 @@ module Inkcite
 
       protected
 
-      def config_all_children_style style, sfx
+      def config_all_children style, sfx
 
         style[:top] = "-#{px(sfx.max_size + 4)}"
 

data/lib/inkcite/renderer/special_effect.rb

@@ -6,7 +6,7 @@ module Inkcite
       # common to special effects like snow and sparkle.
       class EffectContext
 
-        attr_reader :uuid
+        attr_reader :uuid, :animations
 
         # Expose the opt and ctx attributes
         attr_reader :opt, :ctx
@@ -31,14 +31,26 @@ module Inkcite
           # this special effect.
           @uuid = ctx.unique_id(:sfx)
 
+          # Will hold all of the Animations while the children are
+          # assembled and then added to the styles array at the end
+          # so that all keyframes are together in the source.
+          @animations = []
+
         end
 
         def all_children_class_name
           obfuscate_class_names? ? "sfx#{@uuid}c" : "#{@tag}#{@uuid}-children"
         end
 
-        def animation_class_name child_index
-          obfuscate_class_names? ? "#{@tag}#{@uuid}-anim#{child_index + 1}" : "sfx#{@uuid}a#{child_index + 1}"
+        def animation_class_name child_index, suffix=nil
+
+          base = obfuscate_class_names? ? "#{@tag}#{@uuid}-anim#{child_index + 1}" : "sfx#{@uuid}a#{child_index + 1}"
+          unless suffix.blank?
+            base << '-'
+            base << (obfuscate_class_names? ? suffix[0] : suffix)
+          end
+
+          base
         end
 
         def child_class_name child_index
@@ -53,19 +65,19 @@ module Inkcite
         # of snowflakes or sparkles in the animation.  :flakes and :sparks are
         # technically deprecated.
         def count
-          (@opt[:sparks] || @opt[:flakes] || @opt[:count]).to_i
+          @opt[:count].to_i
         end
 
-        def equal_distribution qty
+        def equal_distribution range, qty
 
           # Space the children generally equally across the width of the
           # container div.  Random distribution sometimes ends up with
           # children clumped at one edge or the other.
-          spacing = POSITION_CEIL / qty.to_f
+          spacing = (range.last - range.first) / qty.to_f
 
           # Now build up a pool of equally-spaced starting positions.
           # TODO: This is probably a perfect spot to use inject()
-          start_left = spacing / 2.0
+          start_left = range.first + (spacing / 2.0)
 
           # This array will hold all of the positions
           positions = [start_left]
@@ -74,13 +86,17 @@ module Inkcite
           # spacing and push onto the list.
           (qty - 1).times { |f| positions << start_left += spacing }
 
-          positions
+          positions.collect { |p| p.round(0) }
         end
 
         def height
           @opt[:height].to_i
         end
 
+        def insets
+          @opt[:insets].to_i
+        end
+
         def max_opacity
           @opt[OPACITY_MAX].to_f
         end
@@ -106,7 +122,7 @@ module Inkcite
         end
 
         def obfuscate_class_names?
-          false && @ctx.production?
+          @ctx.production?
         end
 
         def opacity_range
@@ -137,6 +153,10 @@ module Inkcite
           (-270..270)
         end
 
+        def same_size?
+          min_size == max_size
+        end
+
         def size_range
           (min_size..max_size)
         end
@@ -159,18 +179,24 @@ module Inkcite
           @src
         end
 
+        def position_range
+          min = POSITION_FLOOR + insets
+          max = POSITION_CEIL - insets
+          (min..max)
+        end
+
         # Creates a permanent list of positions (as percentages of the wrap container's
         # total width) which can be used for starting or ending position to equally
         # space animated elements.
         def positions_x
-          @positions_x ||= equal_distribution(count)
+          @positions_x ||= equal_distribution(position_range, count)
         end
 
         # Creates a permanent list of positions (as percentages of the wrap container's
         # total height) which can be used for starting or ending position to equally
         # space animated elements.
         def positions_y
-          @positions_y ||= equal_distribution(count)
+          @positions_y ||= equal_distribution(position_range, count)
         end
 
         def start_time child_index
@@ -247,6 +273,10 @@ module Inkcite
         # at the same time.
         create_child_elements html, styles, sfx
 
+        # Append all of the Keyframes to the end of the styles, now that
+        # the individual children are configured.
+        sfx.animations.each { |a| styles << a.to_keyframe_css }
+
         # Push the completed list of styles into the context's stack.
         ctx.styles << styles.join("\n")
 
@@ -274,10 +304,14 @@ module Inkcite
       OPACITY_MAX = :'max-opacity'
       OPACITY_CEIL = 1.0
 
+      # Static constants for animation-specific CSS
+      ANIMATION_DELAY = :'animation-delay'
+      ANIMATION_DURATION = :'animation-duration'
+
       # The extending class can override this method to perform any
       # additional configuration on the style that affects all
       # children in the animation.
-      def config_all_children_style style, sfx
+      def config_all_children style, sfx
         # This space left intentionally blank
       end
 
@@ -333,7 +367,7 @@ module Inkcite
 
         # Provide the extending class with a chance to apply additional
         # styles to all children.
-        config_all_children_style style, sfx
+        config_all_children style, sfx
 
         styles << style
 
@@ -343,11 +377,6 @@ module Inkcite
       # CSS classes to them allowing each to be sized, animated uniquely.
       def create_child_elements html, styles, sfx
 
-        # Will hold all of the Animations while the children are
-        # assembled and then added to the styles array at the end
-        # so that all keyframes are together in the source.
-        animations = []
-
         sfx.count.times do |n|
 
           child_class_name = sfx.child_class_name(n)
@@ -365,20 +394,28 @@ module Inkcite
           # and its style.
           config_child n, child, style, animation, sfx
 
-          # Now that it is configured, install the animation into the
-          # style - this adds itself with the appropriate browser prefixes.
-          style[:animation] = animation
-
-          # Inject the various pieces into the appropriate lists.
+          # Add the child's HTML element into the email.
           html << child.to_s + '</div>'
-          styles << style
-          animations << animation
 
-        end
+          # If the extending class actually defined an animation for this child
+          # then assign it and add it to the list of animations to be appended
+          # after the styles are injected.
+          unless animation.blank?
 
-        # Append all of the Keyframes to the end of the styles, now that
-        # the individual children are configured.
-        animations.each { |a| styles << a.to_keyframe_css }
+            sfx.animations << animation
+
+            # If the extending class didn't assign the animation already, then
+            # assign it to the child's style - this adds itself with the appropriate
+            # browser prefixes.
+            style[:animation] = animation if style[:animation].blank?
+
+          end
+
+          # Append the child's custom style, unless blank (meaning the extending
+          # class did not customize the child's styles directly).
+          styles << style unless style.blank?
+
+        end
 
       end