inkcite 1.12.1 → 1.13.0

data/lib/inkcite/renderer/base.rb

@@ -11,8 +11,11 @@ module Inkcite
       BACKGROUND_SIZE = :'background-size'
       BORDER_BOTTOM = :'border-bottom'
       BORDER_COLLAPSE = :'border-collapse'
+      BORDER_LEFT = :'border-left'
       BORDER_RADIUS = :'border-radius'
+      BORDER_RIGHT = :'border-right'
       BORDER_SPACING = :'border-spacing'
+      BORDER_TOP = :'border-top'
       BOX_SHADOW = :'box-shadow'
       FONT_FAMILY = :'font-family'
       FONT_SIZE = :'font-size'
@@ -37,11 +40,8 @@ module Inkcite
       WEBKIT_ANIMATION = :'-webkit-animation'
       WHITE_SPACE = :'white-space'
 
-      # CSS Margins
-      MARGINS = [MARGIN_TOP, MARGIN_LEFT, MARGIN_BOTTOM, MARGIN_RIGHT]
-
-      # CSS Directions
-      DIRECTIONS = [:top, :right, :bottom, :left]
+      # CSS direction suffixes including nil/empty for convenience.
+      DIRECTIONS = [ nil, :top, :right, :bottom, :left]
 
       # Attribute and CSS dimensions
       DIMENSIONS = [:width, :height]
@@ -85,6 +85,11 @@ module Inkcite
         none?(bgcolor) ? nil : hex(bgcolor)
       end
 
+      def detect_bggradient opt, default=nil
+        bggradient = detect(opt[:gradient], opt[:bggradient], opt[BACKGROUND_GRADIENT])
+        none?(bggradient) ? nil : hex(bggradient)
+      end
+
       # Convenience pass-thru to Renderer's static helper method.
       def hex color
         Renderer.hex(color)
@@ -118,14 +123,13 @@ module Inkcite
         element.style[BACKGROUND_COLOR] = bgcolor if bgcolor
 
         # Background gradient support
-        bggradient = detect(opt[:bggradient] || opt[BACKGROUND_GRADIENT])
+        bggradient = detect_bggradient(opt)
         unless none?(bggradient)
 
           # As a shortcut a gradient can be specified simply by designating
           # both a bgcolor and the gradient color - this will insert a radial
           # gradient automatically.
           if bggradient.start_with?('#')
-            bggradient = hex(bggradient)
 
             # If a bgcolor is provided, the gradient goes bgcolor -> bggradient.
             # Otherwise, it goes bggradient->darker(bggradient)
@@ -141,18 +145,7 @@ module Inkcite
       end
 
       def mix_border element, opt, ctx
-
-        border = opt[:border]
-        element.style[:border] = border unless border.blank?
-
-        # Iterate through each of the possible borders and apply them individually
-        # to the style if they are defined.
-        DIRECTIONS.each do |dir|
-          key = :"border-#{dir}"
-          border = opt[key]
-          element.style[key] = border unless border.blank? || border == NONE
-        end
-
+        mix_directional element, element.style, opt, ctx, :border
       end
 
       def mix_border_radius element, opt, ctx
@@ -162,6 +155,27 @@ module Inkcite
 
       end
 
+      # Helper to mix CSS properties that can be defined as either a
+      # singular shorthand (e.g. border) or in one or more of the
+      # compass directions (e.g. border-top, border-left).
+      def mix_directional element, into, opt, ctx, opt_key, css_key=nil, as_px=false
+
+        css_key = opt_key if css_key.nil?
+
+        # Iterate through each of the possible directions (including blank)
+        # and apply them each to the element's style hash.
+        DIRECTIONS.each do |dir|
+          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)
+
+          value = px(value) if as_px
+          into[dir_css_key] = value
+        end
+
+      end
+
       def mix_font element, opt, ctx, parent=nil
 
         # Always ensure we have a parent to inherit from.
@@ -201,19 +215,16 @@ module Inkcite
 
       def mix_margins element, opt, ctx
 
-        # Check to see if the 'all' margin attribute is specified.
-        all_margin = opt[MARGIN]
+        # Outlook supports Margin, not margin.
+        mix_directional element, element.style, opt, ctx, :margin, :Margin, true
 
-        # Applying individual margins helps ensure compatibility across
-        # all email clients. Cough! Cough! Looking at you Outlook.
-        MARGINS.each do |margin|
+      end
 
-          # Check for specific direction margin (e.g. margin-left) which
-          # would override all margins.  Otherwise, inherit all margin.
-          amt = (opt[margin] || all_margin).to_i
-          element.style[margin] = px(amt) if amt > 0
+      # Text alignment - left, right, center.
+      def mix_text_align element, opt, ctx
 
-        end
+        align = detect(opt[:align] || opt[TEXT_ALIGN])
+        element.style[TEXT_ALIGN] = align unless none?(align)
 
       end
 
@@ -280,6 +291,24 @@ module Inkcite
         html
       end
 
+      private
+
+      # Helper method which adds the directional suffix (e.g. top)
+      # to the provided key (border) and converts to a symbol.
+      def add_directional_suffix key, dir
+
+        # Nothing to do if the direction isn't provided.
+        return key if dir.blank?
+
+        # Need to convert the key to a string since it is likely
+        # a symbol that has been provided.
+        dir_key = ''
+        dir_key << key.to_s
+        dir_key << '-'
+        dir_key << dir.to_s
+        dir_key.to_sym
+      end
+
     end
   end
 end

data/lib/inkcite/renderer/container_base.rb

@@ -11,12 +11,17 @@ module Inkcite
         mix_border element, opt, ctx
         mix_border_radius element, opt, ctx
         mix_font element, opt, ctx
+        mix_margins element, opt, ctx
         mix_text_align element, opt, ctx
 
         # Supports both integers and mixed padding (e.g. 10px 20px)
         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,11 +38,13 @@ module Inkcite
         element.to_s
       end
 
-      # Text alignment - left, right, center.
-      def mix_text_align element, opt, ctx
+      def mix_width element, opt, ctx
+
+        width = opt[:width]
+        element.style[:width] = px(width) unless width.blank?
 
-        align = opt[:align]
-        element.style[TEXT_ALIGN] = align unless none?(align)
+        mobile_width = opt[MOBILE_WIDTH]
+        element.mobile_style[:width] = px(mobile_width) unless mobile_width.blank?
 
       end
 

data/lib/inkcite/renderer/div.rb

@@ -8,8 +8,7 @@ module Inkcite
 
         div = Element.new('div')
 
-        width = opt[:width]
-        div.style[:width] = px(width) unless width.blank?
+        mix_width div, opt, ctx
 
         height = opt[:height].to_i
         div.style[:height] = px(height) if height > 0

data/lib/inkcite/renderer/element.rb

@@ -2,7 +2,7 @@ module Inkcite
   module Renderer
     class Element
 
-      attr_reader :tag
+      attr_reader :mobile_style, :style, :tag
 
       def initialize tag, att={}
 
@@ -19,7 +19,10 @@ module Inkcite
 
         # For caller convenience, accept a style hash from the attributes
         # or initialize it here.
-        @styles = att.delete(:style) || {}
+        @style = att.delete(:style) || {}
+
+        # Collection of mobile-only CSS properties for this element.
+        @mobile_style = att.delete(:mobile_style) || {}
 
       end
 
@@ -67,10 +70,6 @@ module Inkcite
         @self_close
       end
 
-      def style
-        @styles
-      end
-
       # Generates a Helper tag rather than a string tag - e.g. {img src=test.png}
       # rather than <img src=test.png>
       def to_helper
@@ -80,7 +79,7 @@ module Inkcite
       def to_s open='<', close='>'
 
         # Convert the style hash into CSS style attribute.
-        @att[:style] = Renderer.quote(Renderer.render_styles(@styles)) unless @styles.blank?
+        @att[:style] = Renderer.quote(Renderer.render_styles(@style)) unless @style.blank?
 
         # Convert the list of CSS classes assigned to this element into an attribute
         self[:class] = Renderer.quote(@classes.to_a.sort.join(' ')) unless @classes.blank?

data/lib/inkcite/renderer/responsive.rb

@@ -2,29 +2,34 @@ module Inkcite
   module Renderer
     class Responsive < Base
 
-      BUTTON      = 'button'
-      DROP        = 'drop'
-      FILL        = 'fill'
-      FLUID       = 'fluid'
-      FLUID_DROP  = 'fluid-drop'
+      BUTTON = 'button'
+      DROP = 'drop'
+      FILL = 'fill'
+      FLUID = 'fluid'
+      FLUID_DROP = 'fluid-drop'
       FLUID_STACK = 'fluid-stack'
-      HIDE        = 'hide'
-      IMAGE       = 'img'
-      SHOW        = 'show'
+      HIDE = 'hide'
+      IMAGE = 'img'
+      SHOW = 'show'
       SHOW_INLINE = 'show-inline'
-      SWITCH      = 'switch'
-      SWITCH_UP   = 'switch-up'
-      TOGGLE      = 'toggle'
+      SWITCH = 'switch'
+      SWITCH_UP = 'switch-up'
+      TOGGLE = 'toggle'
 
       # For elements that take on different background properties
       # when they go responsive
-      MOBILE_BGCOLOR             = :'mobile-bgcolor'
-      MOBILE_BACKGROUND          = :'mobile-background'
-      MOBILE_BACKGROUND_COLOR    = :'mobile-background-color'
-      MOBILE_BACKGROUND_IMAGE    = :'mobile-background-image'
-      MOBILE_BACKGROUND_REPEAT   = :'mobile-background-repeat'
+      MOBILE_BGCOLOR = :'mobile-bgcolor'
+      MOBILE_BACKGROUND = :'mobile-background'
+      MOBILE_BACKGROUND_COLOR = :'mobile-background-color'
+      MOBILE_BACKGROUND_IMAGE = :'mobile-background-image'
+      MOBILE_BACKGROUND_REPEAT = :'mobile-background-repeat'
       MOBILE_BACKGROUND_POSITION = :'mobile-background-position'
-      MOBILE_BACKGROUND_SIZE     = :'mobile-background-size'
+      MOBILE_BACKGROUND_SIZE = :'mobile-background-size'
+      MOBILE_SRC = :'mobile-src'
+
+      # Other mobile-specific properties
+      MOBILE_PADDING = :'mobile-padding'
+
 
       class Rule
 
@@ -58,7 +63,7 @@ module Inkcite
         end
 
         def att_selector_string
-          "[class~=#{Renderer.quote(@klass)}]"
+          ".#{@klass}"
         end
 
         def block?
@@ -153,7 +158,7 @@ module Inkcite
         # FILL causes specific types of elements to expand to 100% of the available
         # width of the mobile device.
         styles << Rule.new('img', FILL, 'width: 100% !important; height: auto !important;', false)
-        styles << Rule.new([ 'table', 'td' ], FILL, 'width: 100% !important; background-size: 100% auto !important;', false)
+        styles << Rule.new(['table', 'td'], FILL, 'width: 100% !important; background-size: 100% auto !important;', false)
 
         # For mobile-image tags.
         styles << Rule.new('span', IMAGE, 'display: block; background-position: center; background-size: cover;', false)
@@ -198,6 +203,11 @@ module Inkcite
         mobile == FLUID_DROP || mobile == FLUID_STACK
       end
 
+      def mix_border element, opt, ctx
+        super
+        mix_directional element, element.mobile_style, opt, ctx, MOBILE_BORDER, :border
+      end
+
       def mix_font element, opt, ctx, parent=nil
 
         # Let the super class do its thing and grab the name of the font
@@ -205,29 +215,39 @@ module Inkcite
         font = super
 
         # Will hold the mobile font overrides for this element, if any.
-        style = { }
+        font_family = detect_font(MOBILE_FONT_FAMILY, font, opt, parent, ctx)
+        element.mobile_style[FONT_FAMILY] = font_family unless font_family.blank?
 
         font_size = detect_font(MOBILE_FONT_SIZE, font, opt, parent, ctx)
-        style[FONT_SIZE] = "#{px(font_size)} !important" unless font_size.blank?
-
-        line_height = detect_font(MOBILE_LINE_HEIGHT, font, opt, parent, ctx)
-        style[LINE_HEIGHT] = "#{px(line_height)} !important" unless line_height.blank?
+        element.mobile_style[FONT_SIZE] = px(font_size) unless font_size.blank?
 
         color = detect_font(MOBILE_FONT_COLOR, font, opt, parent, ctx)
-        style[:color] = "#{hex(color)} !important" unless color.blank?
+        element.mobile_style[:color] = hex(color) unless color.blank?
+
+        font_weight = detect_font(MOBILE_FONT_WEIGHT, font, opt, parent, ctx)
+        element.mobile_style[FONT_WEIGHT] = font_weight unless font_weight.blank?
 
-        mix_responsive_style element, opt, ctx, Renderer.render_styles(style) unless style.blank?
+        letter_spacing = detect_font(MOBILE_LETTER_SPACING, font, opt, parent, ctx)
+        element.mobile_style[LETTER_SPACING] = px(letter_spacing) unless none?(letter_spacing)
+
+        line_height = detect_font(MOBILE_LINE_HEIGHT, font, opt, parent, ctx)
+        element.mobile_style[LINE_HEIGHT] = px(line_height) unless line_height.blank?
 
         font
       end
 
+      def mix_margins element, opt, ctx
+        super
+        mix_directional element, element.mobile_style, opt, ctx, MOBILE_MARGIN, :margin, true
+      end
+
       def mix_responsive element, opt, ctx, klass=nil
 
         # Apply the "mobile" attribute or use the override if one was provided.
         mix_responsive_klass element, opt, ctx, klass || opt[:mobile]
 
         # Apply the "mobile-style" attribute if one was provided.
-        mix_responsive_style element, opt, ctx, opt[MOBILE_STYLE]
+        mix_responsive_style element, opt, ctx
 
       end
 
@@ -293,11 +313,54 @@ module Inkcite
 
       end
 
-      def mix_responsive_style element, opt, ctx, declarations=nil
+      def mix_responsive_style element, opt, ctx
+
+        # Warn that mobile-style is no longer supported.  Developers should
+        # use the stronger, faster, better-er mobile-* attributes
+        __unsupported_style = element[MOBILE_STYLE]
+        ctx.errors('The mobile-style attribute is no longer supported', { :element => element.to_s, :mobile_style => __unsupported_style }) unless __unsupported_style.blank?
+
+        _mobile_style = element.mobile_style
+        return if _mobile_style.blank?
+
+        # Will hold a preprocessed list of direction-free, lowercased properties
+        # (ahem, Outlook Margin) so we can easily determine if a mobile style
+        # needs !important to override its desktop style value.
+        desktop_style_keys = Set.new
+        desktop_style = {}
+        element.style.each_pair do |key, css|
 
-        # Check to see if a mobile style (e.g. "mobile-style='background-color: #ff0;'")
-        # has been declared for this element.
-        declarations ||= opt[MOBILE_STYLE]
+          key = key.to_s.downcase
+          desktop_style[key.to_sym] = css
+
+          base_key = get_directionless_key(key)
+          desktop_style_keys.add(base_key)
+
+        end
+
+        # This will hold the decorated list of CSS properties.  If the element
+        # has any existing styles that are being overridden in the mobile styles
+        # we need to append the !important flag.
+        decorated_style = {}
+
+        # Iterate through the defined mobile styles, determine which need to
+        # have !important and assemble a new hash to be rendered as CSS.
+        _mobile_style.each_pair do |key, css|
+
+          # No need to put attributes in the mobile style if they match
+          # the existing desktop style of the element.
+          next if css == desktop_style[key]
+
+          # Append !important to the CSS if it overrides a value in the
+          # element's in-lined styles.  Need to test bo
+          base_key = get_directionless_key(key)
+          css = "#{css} !important" if desktop_style_keys.include?(base_key)
+
+          decorated_style[key] = css
+        end
+
+        # Render the array of styles to a CSS declaration string
+        declarations = Renderer.render_styles decorated_style
         return if declarations.blank?
 
         mq = ctx.media_query
@@ -307,11 +370,11 @@ module Inkcite
         # If no klass was specified, check to see if any previously defined rule matches
         # the style declarations.  If so, we'll reuse that rule and apply the klass
         # to this object to avoid unnecessary duplication in the HTML.
-        rule = mq.find_by_declaration(declarations);
+        rule = mq.find_by_declaration(declarations)
         if rule.nil?
 
           # Generate a unique class name for this style if it has not already been declared.
-          # These are of the form m001, etc.  Redability is not important because it's
+          # These are of the form m001, etc.  Readability is not important because it's
           # dynamically generated and referenced.
           klass = unique_klass(ctx)
 
@@ -336,22 +399,46 @@ module Inkcite
       end
 
       def unique_klass ctx
-        "m%1d" % ctx.unique_id(:m)
+        'm%1d' % ctx.unique_id(:m)
       end
 
       private
 
       # Attribute used to declare custom mobile styles for an element.
+      MOBILE_BORDER = :'mobile-border'
+      MOBILE_MARGIN = :'mobile-margin'
       MOBILE_STYLE = :'mobile-style'
+      MOBILE_WIDTH = :'mobile-width'
 
       # Universal CSS selector.
       UNIVERSAL = '*'
 
-      # For font overrides on mobile devices.
-      MOBILE_FONT_COLOR  = :'mobile-color'
-      MOBILE_FONT_SIZE   = :'mobile-font-size'
+      # For font overrides on mobile devices.  These values are read from
+      # the object's attributes and installed into the element's mobile_styles.
+      MOBILE_FONT_COLOR = :'mobile-color'
+      MOBILE_FONT_FAMILY = :'mobile-font-family'
+      MOBILE_FONT_SIZE = :'mobile-font-size'
+      MOBILE_FONT_WEIGHT = :'mobile-font-weight'
+      MOBILE_LETTER_SPACING = :'mobile-letter-spacing'
       MOBILE_LINE_HEIGHT = :'mobile-line-height'
 
+      # Accepts a key, such as border or border-left, and returns the
+      # key sans direction suffix - so border and border respectively.
+      # The opposite of add_directional_suffix().
+      def get_directionless_key key
+        key = key.to_s
+
+        # Iterate through the possible directions and if the key ends
+        # with the separator and direction (e.g. -left) trim that off
+        # and return it.
+        DIRECTIONS.each do |dir|
+          dir = "-#{dir}"
+          return key[0, dir.length] if key.end_with?(dir)
+        end
+
+        key
+      end
+
     end
   end
 end