inkcite 1.7.0 → 1.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9d4ff329598b10063f608482495b1067089c890f
-  data.tar.gz: 382ad87478df473ad76bda20a7fb306e125c65b5
+  metadata.gz: d4d3044cbc8db45ebd662ab451d759ef1f0aa25d
+  data.tar.gz: e87b26d745c307427fd53c7f1e55c19e242f3aaa
 SHA512:
-  metadata.gz: 15a0cb8480b9e0abf92c31e2304b3f65baa64b450af06bd66061e3ca18f217645239bf5bedac1a74b0b5bea43a28e6a115de350c62ea30818e9a9b58bb0bddee
-  data.tar.gz: 7313d13e0033675536c3255946bde8cd37c5eef54fbd50c9abe8787a97cf77f76fde38f7bd1e2090f967b8ba4f512da4daa16bd132db776cb8d566c2ed643932
+  metadata.gz: efb49479b68f7745f54902ea4d488c80532345baf772f74f6c939c22a77247c8f9635f4ac73cbf765cab9b3b96319c5af832f06f53c072e5ffd3541cda5a7460
+  data.tar.gz: 40b7fcc6f1bf820be7bfe5b890730a831b08f48fdd390061584c6808164b19998f1f038a1ad33740365f38689498e192d61f2f4d8719cb6280a235e9fd68b66a

data/README.md

@@ -5,12 +5,13 @@ Like [Middleman] is to static web sites, Inkcite makes it easy for email
 developers to keep their code DRY (don’t repeat yourself) and integrate
 versioning, testing and minification into their workflow.
 
-* Easy, flexible templates, variables and helpers
-* ERB for easy A/B testing and versioning
+* Easy, flexible templates, variables and Helpers
+* ERB for dynamic content and easy A/B Testing and Versioning
 * Automatic link tagging and tracking
-* [Litmus] integration for compatibility
-* Preview distribution lists
-* Content inclusion/exclusion rules
+* [Litmus]-integrated compatibility testing and analytics
+* Email preview distribution lists
+* Automatic image optimization using ImageOptim
+* Failsafe rules to double-check your work
 
 ## Installation
 
@@ -106,7 +107,7 @@ developer questions in a timely manner.
 
 ## License
 
-Copyright (c) 2014 Jeffrey D. Hoffman. MIT Licensed, see [LICENSE] for
+Copyright (c) 2014-2015 Jeffrey D. Hoffman. MIT Licensed, see [LICENSE] for
 details.
 
 [Middleman]: http://middlemanapp.com

data/inkcite.gemspec

@@ -29,6 +29,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency 'faker'
   spec.add_dependency 'guard'
   spec.add_dependency 'guard-livereload'
+  spec.add_dependency 'htmlbeautifier'
   spec.add_dependency 'image_optim'
   spec.add_dependency 'image_optim_pack'
   spec.add_dependency 'litmus'

data/lib/inkcite/cli/base.rb

@@ -9,6 +9,10 @@ module Inkcite
       option :archive,
           :aliases => '-a',
           :desc => 'The name of the archive to compress final assets into'
+      option :environment,
+          :aliases => '-e',
+          :desc => 'The environment (development, preview or production) to build',
+          :default => :production
       option :force,
           :aliases => '-f',
           :desc => 'Build even if there are errors (not recommended)',
@@ -16,10 +20,7 @@ module Inkcite
 
       def build
         require_relative 'build'
-        Cli::Build.invoke(email, {
-            :archive => options['archive'],
-            :force => options['force']
-        })
+        Cli::Build.invoke(email, options)
       end
 
       desc 'init NAME [options]', 'Initialize a new email project in the NAME directory'

data/lib/inkcite/cli/build.rb

@@ -7,24 +7,23 @@ module Inkcite
         errors = false
 
         # Don't allow production files to be built if there are errors.
-        email.views(:production) do |ev|
+        email.views(opts[:environment]) do |ev|
 
           ev.render!
+          next if ev.errors.blank?
 
-          if !ev.errors.blank?
-            puts "The #{ev.version} version (#{ev.format}) has #{ev.errors.size} errors:"
-            puts " - #{ev.errors.join("\n - ")}"
-            errors = true
-          end
+          puts "The #{ev.version} version (#{ev.format}) has #{ev.errors.size} errors:"
+          puts " - #{ev.errors.join("\n - ")}"
+          errors = true
 
         end
 
-        abort("Fix errors or use --force to build") if errors && !opts[:force]
+        abort('Fix errors or use --force to build') if errors && !opts[:force]
 
         # First, compile all assets to the build directory.
         build_to_dir email, opts
 
-        # No archive? Build to files instead.
+        # Compress the directory into an archive if so desired.
         archive = opts[:archive]
         build_archive(email, opts) unless archive.blank?
 
@@ -102,7 +101,7 @@ module Inkcite
         email.optimize_images
 
         # For each of the production views, build the HTML and links files.
-        email.views(:production) do |ev|
+        email.views(opts[:environment]) do |ev|
 
           File.open(File.join(build_html_to, ev.file_name), 'w') { |f| ev.write(f) }
 
@@ -113,7 +112,8 @@ module Inkcite
 
         # Copy all of the source images into the build directory in preparation
         # for optimization
-        FileUtils.cp_r(File.join(email.optimized_image_dir, '.'), build_images_to)
+        build_images_from = email.optimized_image_dir
+        FileUtils.cp_r(File.join(build_images_from, '.'), build_images_to) if File.exists?(build_images_from)
 
       end
 

data/lib/inkcite/cli/init.rb

@@ -19,7 +19,7 @@ module Inkcite
         is_empty = opts[:empty]
 
         # True if we're initializing a project from the built-in files.
-        is_new = opts[:from].blank?
+        is_new = from_path.blank?
         if is_new
 
           # Use the default, bundled path if a from-path wasn't specified.
@@ -51,7 +51,7 @@ module Inkcite
 
         # If the example email is required, switch to the example root and
         # copy the files within over the existing files.
-        unless is_empty
+        if is_new && !is_empty
           from_path = File.join(Inkcite.asset_path, 'example')
           FileUtils.cp_r(File.join(from_path, '.'), full_init_path)
           puts 'Copied example email files'

data/lib/inkcite/cli/server.rb

@@ -1,5 +1,6 @@
 require 'guard'
 require 'guard/commander'
+require 'htmlbeautifier'
 require 'rack'
 require 'rack-livereload'
 require 'webrick'
@@ -123,6 +124,10 @@ module Inkcite
 
             html = view.render!
 
+            # If we're rendering the development version of the email, beautify the
+            # output so that
+            html = HtmlBeautifier.beautify(html) if view.development?
+
             unless view.errors.blank?
               error_count = view.errors.count
               puts "#{ts} #{error_count} error#{'s' if error_count > 1} or warning#{'s' if error_count > 1}:"

data/lib/inkcite/email.rb

@@ -1,6 +1,7 @@
 module Inkcite
   class Email
 
+    BROWSER_VERSION     = :'browser-version'
     CACHE_BUST          = :'cache-bust'
     IMAGE_HOST          = :'image-host'
     IMAGE_PLACEHOLDERS  = :'image-placeholders'
@@ -28,7 +29,11 @@ module Inkcite
 
     def formats env
 
-      f = [ :email, :browser ]
+      # Inkcite is always capable of producing an email version of
+      # the project.
+      f = [ :email ]
+
+      f << :browser if config[BROWSER_VERSION] == true
 
       # Need to make sure a source.txt exists before we can include
       # it in the list of known formats.
@@ -61,7 +66,7 @@ module Inkcite
     end
 
     def optimize_images?
-      config[Inkcite::Email::OPTIMIZE_IMAGES] == true
+      config[OPTIMIZE_IMAGES] == true
     end
 
     # Returns the directory that optimized, compressed images
@@ -102,7 +107,9 @@ module Inkcite
       version = (version || versions.first).to_sym
 
       raise "Unknown environment \"#{environment}\" - must be one of #{ENVIRONMENTS.join(',')}" unless ENVIRONMENTS.include?(environment)
-      raise "Unknown format \"#{format}\" - must be one of #{FORMATS.join(',')}" unless FORMATS.include?(format)
+
+      _formats = formats(environment)
+      raise "Unknown format \"#{format}\" - must be one of #{_formats.join(',')}" unless _formats.include?(format)
       raise "Unknown version: \"#{version}\" - must be one of #{versions.join(',')}" unless versions.include?(version)
 
       # Instantiate a new view of this email with the desired view and
@@ -130,9 +137,6 @@ module Inkcite
 
     private
 
-    # Allowed formats.
-    FORMATS = [ :browser, :email, :text ].freeze
-
     # Name of the property controlling the meta data file name and
     # the default file name.
     META_FILE_NAME = :'meta-file'

data/lib/inkcite/renderer/base.rb

@@ -24,6 +24,7 @@ module Inkcite
       MARGIN_LEFT = :'margin-left'
       MARGIN_RIGHT = :'margin-right'
       MARGIN_TOP = :'margin-top'
+      MAX_WIDTH = :'max-width'
       PADDING_X = :'padding-x'
       PADDING_Y = :'padding-y'
       TEXT_ALIGN = :'text-align'
@@ -78,6 +79,10 @@ module Inkcite
         Renderer.hex(color)
       end
 
+      def if_mso html
+        %Q(<!--[if mso]>#{html.to_s}<![endif]-->)
+      end
+
       def none? val
         val.blank? || val == NONE
       end
@@ -92,6 +97,21 @@ module Inkcite
 
       end
 
+      def mix_border element, opt
+
+        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
+
+      end
+
       def mix_font element, opt, ctx, parent=nil
 
         # Always ensure we have a parent to inherit from.

data/lib/inkcite/renderer/div.rb

@@ -8,16 +8,24 @@ module Inkcite
 
         div = Element.new('div')
 
+        width = opt[:width]
+        div.style[:width] = px(width) unless width.blank?
+
         height = opt[:height].to_i
         div.style[:height] = px(height) if height > 0
 
+        mix_background div, opt
+        mix_font div, opt, ctx
+
         # Text alignment - left, right, center.
         align = opt[:align]
         div.style[TEXT_ALIGN] = align unless none?(align)
 
-        mix_font div, opt, ctx
+        valign = opt[:valign]
+        div.style[VERTICAL_ALIGN] = valign unless valign.blank?
 
-        mix_background div, opt
+        display = opt[:display]
+        div.style[:display] = display unless display.blank?
 
         mix_responsive div, opt, ctx
 

data/lib/inkcite/renderer/element.rb

@@ -13,7 +13,19 @@ module Inkcite
         # True if the tag self-closes as in "<img .../>"
         @self_close = att.delete(:self_close) == true
 
+        # For caller convenience, accept a style hash from the attributes
+        # or initialize it here.
+        @styles = att.delete(:style) || {}
+
+      end
+
+      # I found myself doing a lot of Element.new('tag', { }).to_s + 'more html'
+      # so this method makes it easier by allowing elements to be added to
+      # strings.
+      def + html
+        to_s << html.to_s
       end
+      alias_method :concat, :+
 
       def [] key
         @att[key]
@@ -52,7 +64,7 @@ module Inkcite
       end
 
       def style
-        @styles ||= {}
+        @styles
       end
 
       def to_s

data/lib/inkcite/renderer/footnote.rb

@@ -21,6 +21,7 @@ module Inkcite
         # activate but those read from footnotes.tsv are inactive until
         # referenced in the source.
         attr_accessor :active
+        alias_method :active?, :active
 
         def initialize id, symbol, text, active=true
           @id = id
@@ -94,8 +95,8 @@ module Inkcite
           # Grab the last numeric footnote that was specified and, assuming
           # there is one, increment the count.  Otherwise, start the count
           # off at one.
-          last_instance = ctx.footnotes.select(&:numeric?).last
-          instance.symbol = last_instance.nil? ? 1 : last_instance.symbol.to_i + 1
+          last_instance = ctx.footnotes.select { |fn| fn.numeric? && fn.active? }.collect(&:number).max.to_i
+          instance.symbol = last_instance + 1
 
         end
 

data/lib/inkcite/renderer/image.rb

@@ -14,6 +14,7 @@ module Inkcite
         img[:src] = image_url(opt[:src], opt, ctx)
 
         mix_background img, opt
+        mix_border img, opt
 
         # Check to see if there is alt text specified for this image.  We are
         # testing against nil because sometimes the author desires an empty
@@ -36,6 +37,9 @@ module Inkcite
 
             mix_font img, opt, ctx
 
+            text_align = opt[TEXT_ALIGN]
+            img.style[TEXT_ALIGN] = text_align unless text_align.blank?
+
           end
 
         end
@@ -75,9 +79,28 @@ module Inkcite
 
         mobile = opt[:mobile]
 
-        # Check to see if this image is inside of a mobile-image declaration.
-        # If so, the image defaults to hide on mobile.
-        mobile = HIDE if mobile.blank? && !ctx.parent_opts(:mobile_image).blank?
+        # Fluid-Hybrid responsive images courtesy of @moonstrips and @CourtFantinato.
+        # http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919#comment-2074740905
+        if mobile == FLUID
+
+          # Set the inline styles of the image to scale with aspect ratio
+          # intact up to the maximum width of the image itself.
+          img.style[MAX_WIDTH] = px(opt[:width])
+          img.style[:width] = '100%'
+          img.style[:height] = 'auto'
+
+          # Leave the explicit width attribute set (this prevents Outlook from
+          # blowing up) but clear the height attribute as Gmail images will not
+          # maintain aspect ratio if present.
+          img[:height] = nil
+
+        else
+
+          # Check to see if this image is inside of a mobile-image declaration.
+          # If so, the image defaults to hide on mobile.
+          mobile = HIDE if mobile.blank? && !ctx.parent_opts(:mobile_image).blank?
+
+        end
 
         mix_responsive img, opt, ctx, mobile
 

data/lib/inkcite/renderer/responsive.rb

@@ -2,15 +2,17 @@ module Inkcite
   module Renderer
     class Responsive < Base
 
-      BUTTON    = 'button'
-      DROP      = 'drop'
-      FILL      = 'fill'
-      HIDE      = 'hide'
-      IMAGE     = 'img'
-      SHOW      = 'show'
-      SWITCH    = 'switch'
-      SWITCH_UP = 'switch-up'
-      TOGGLE    = 'toggle'
+      BUTTON     = 'button'
+      DROP       = 'drop'
+      FILL       = 'fill'
+      FLUID      = 'fluid'
+      FLUID_DROP = 'fluid-drop'
+      HIDE       = 'hide'
+      IMAGE      = 'img'
+      SHOW       = 'show'
+      SWITCH     = 'switch'
+      SWITCH_UP  = 'switch-up'
+      TOGGLE     = 'toggle'
 
       # For elements that take on different background properties
       # when they go responsive
@@ -180,6 +182,12 @@ module Inkcite
 
       protected
 
+      # Returns true if the mobile klass provided matches any of the
+      # Fluid-Hybrid classes.
+      def is_fluid? mobile
+        mobile == FLUID || mobile == FLUID_DROP
+      end
+
       def mix_font element, opt, ctx, parent=nil
 
         # Let the super class do its thing and grab the name of the font
@@ -215,6 +223,11 @@ module Inkcite
         # Nothing to do if there is no class specified.s
         return nil if klass.blank?
 
+        # The Fluid-Hybrid klass is also ignored because it doesn't involve
+        # media queries - aborting early to avoid the "missing mobile class"
+        # warning normally generated.
+        return nil if is_fluid?(klass)
+
         mq = ctx.media_query
 
         # The element's tag - e.g. table, td, etc.
@@ -226,7 +239,7 @@ module Inkcite
 
           id = opt[:id]
           if id.blank?
-            ctx.errors 'Mobile elements with toggle behavior require an ID attribute', { :tag => tag} if id.blank?
+            ctx.errors 'Mobile elements with toggle behavior require an ID attribute', { :tag => tag } if id.blank?
 
           else
 

data/lib/inkcite/renderer/table.rb

@@ -4,60 +4,144 @@ module Inkcite
 
       def render tag, opt, ctx
 
+        html = ''
+
+        # We're either going to be pushing a newly opened table onto this stack
+        # or we're popping the open opts off of it.
         tag_stack = ctx.tag_stack(:table)
 
         if tag == CLOSE_TABLE
 
-          # Remove this table from the stack of previously open tags.
-          tag_stack.pop
+          # Pop the opts used when the table was originally opened.  Then grab the
+          # mobile attribute. If this is a fluid table, we'll need to do close some
+          # of the additional tags injected when it was opened.
+          open_opt = tag_stack.pop
+          open_mobile = open_opt[:mobile]
 
-          return '</tr></table>'
+          # If the table was declared as Fluid-Hybrid Drop, then there are some additional
+          # elements that need to be closed before the regular row-table closure that
+          # the Table helper normally produces.
+          if open_mobile == FLUID_DROP
 
-        end
+            # Close the interior conditional table for Outlook that contains the floating blocks.
+            html << if_mso('</tr></table>')
 
-        # Push this table onto the stack which will make it's declaration
-        # available to its child TDs.
-        tag_stack << opt
+            # Close what @campaignmonitor calls the "secret weapon" cell that typically aligns
+            # the text horizontally and vertically aligns the floating elements.
+            html << '</td>' # Styled
+          end
 
-        table = Element.new(tag, { :border => 0, :cellspacing => 0 })
+          # Normal Inkcite Helper close HTML.
+          html << '</tr></table>'
 
-        # Inherit base cell attributes - border, background color and image, etc.
-        mix_all table, opt, ctx
+          # Close the conditional table for Output that contains the entire fluid layout.
+          html << if_mso('</td></tr></table>') if is_fluid?(open_mobile)
 
-        # Text shadowing
-        mix_text_shadow table, opt, ctx
+        else
 
-        # Conveniently accept padding (easier to type and consistent with CSS)or
-        # cellpadding which must always be declared.
-        table[:cellpadding] = (opt[:padding] || opt[:cellpadding]).to_i
+          # Push this table onto the stack which will make it's declaration
+          # available to its child TDs.
+          tag_stack << opt
 
-        # Conveniently accept both float and align to mean the same thing.
-        align = opt[:align] || opt[:float]
-        table[:align] = align unless align.blank?
+          table = Element.new(tag, { :border => 0, :cellspacing => 0 })
 
-        border_radius = opt[BORDER_RADIUS].to_i
-        table.style[BORDER_RADIUS] = px(border_radius) if border_radius > 0
+          # Grab the responsive mobile klass that is assigned to this table, if any.
+          mobile = opt[:mobile]
 
-        border_collapse = opt[BORDER_COLLAPSE]
-        table.style[BORDER_COLLAPSE] = border_collapse unless border_collapse.blank?
+          # Check if fluid-drop has been specified.  This will force a lot more HTML to
+          # be produced for this table and its child TDs.
+          is_fluid_drop = mobile == FLUID_DROP
 
-        # Apply margins.
-        mix_margins table, opt, ctx
+          # Inherit base cell attributes - border, background color and image, etc.
+          mix_all table, opt, ctx
+          mix_margins table, opt, ctx
+          mix_text_shadow table, opt, ctx
 
-        mobile = opt[:mobile]
+          # Conveniently accept padding (easier to type and consistent with CSS) or
+          # cellpadding which must always be declared.
+          #
+          # If Fluid-Drop is enabled, padding is always zero at this top-level table
+          # and will be applied in the TD renderer when it creates a new table to
+          # wrap itself in.
+          table[:cellpadding] = is_fluid_drop ? 0 : get_padding(opt)
 
-        # When a Table is configured to have it's cells DROP then it
-        # actually needs to FILL on mobile and it's child Tds will
-        # be DROP'd.  Override the local mobile klass so the child Tds
-        # see the parent as DROP.
-        mobile = FILL if mobile == DROP || mobile == SWITCH
+          # Conveniently accept both float and align to mean the same thing.
+          align = opt[:align] || opt[:float]
+          table[:align] = align unless align.blank?
 
-        mix_responsive table, opt, ctx, mobile
+          border_radius = opt[BORDER_RADIUS].to_i
+          table.style[BORDER_RADIUS] = px(border_radius) if border_radius > 0
 
-        table.to_s + '<tr>'
-      end
+          border_collapse = opt[BORDER_COLLAPSE]
+          table.style[BORDER_COLLAPSE] = border_collapse unless border_collapse.blank?
+
+
+          # For both fluid and fluid-drop share certain setup which is performed here.
+          if is_fluid?(mobile)
+
+            # Width must always be specified on fluid tables, like it is for images.
+            # Warn the designer if a width has not been supplied in pixels.
+            width = opt[:width].to_i
+            ctx.error("Width is a required attribute when '#{mobile}' is applied to a {table}", opt) unless width > 0
+
+            # Fluid table method courtesy of @campaignmonitor - assign the max-width in
+            # pixels and set the normal width to 100%.
+            # https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/
+            table.style[MAX_WIDTH] = px(width)
+            table[:width] = '100%'
+
+            # Outlook (and Lotus Notes, if you can believe it) doesn't support max-width
+            # so we need to wrap the entire fluid table in a conditional table that
+            # ensures layout displays within the actual maximum pixels width.
+            html << if_mso(Element.new('table', {
+                        :align => opt[:align], :border => 0, :cellspacing => 0, :cellpadding => 0, :width => opt[:width].to_i
+                    }) + '<tr><td>')
+
+          elsif mobile == DROP || mobile == SWITCH
+
+            # When a Table is configured to have it's cells DROP then it
+            # actually needs to FILL on mobile and it's child Tds will
+            # be DROP'd.  Override the local mobile klass so the child Tds
+            # see the parent as DROP.
+            mobile = FILL
+
+          end
 
-      private
+          mix_responsive table, opt, ctx, mobile
+
+          html << table.to_s
+          html << '<tr>'
+
+          if is_fluid_drop
+
+            # Fluid-Drop tables need a default alignment specified which is inherited
+            # by the child TD elements if not otherwise specified.
+            #
+            # 11/8/2015: For reasons I don't understand, if the table is not valigned
+            # middle by default, then we lose the ability to valign-middle individual
+            # TD children.  So, if we force 'middle' here, then the TDs can override
+            # with 'top' or 'bottom' alignment when desired.
+            valign = opt[:valign] ||= 'middle'
+
+            # According to @campaignmonitor this is the secret weapon of Fluid-Hyrbid
+            # drop which wraps the floating elements and centers them appropriately.
+            # https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/
+            #
+            # The zero-size font addresses a rendering problem in Outlook:
+            # https://css-tricks.com/fighting-the-space-between-inline-block-elements/
+            html << Element.new('td', :style => { TEXT_ALIGN => :center, VERTICAL_ALIGN => opt[:valign], FONT_SIZE => 0 }).to_s
+
+            # Lastly, Outlook needs yet another conditional table that will be used
+            # to contain the floating blocks.  The TD elements are generated by
+            # each of the columns within this Fluid-Drop table.
+            html << if_mso(Element.new('table', :width => '100%', :align => :center, :cellpadding => 0, :cellspacing => 0, :border => 0) + '<tr>')
+
+          end
+
+        end
+
+        html
+      end
 
       CLOSE_TABLE = '/table'
 

data/lib/inkcite/renderer/table_base.rb

@@ -4,10 +4,16 @@ module Inkcite
 
       protected
 
+      # Returns cellpadding specified from the provided attributes by
+      # Checking both :padding and :cellpadding.
+      def get_padding opt
+        (opt[:padding] || opt[:cellpadding]).to_i
+      end
+
       def mix_all element, opt, ctx
 
         mix_background element, opt, ctx
-        mix_border element, opt, ctx
+        mix_border element, opt
         mix_dimensions element, opt, ctx
 
       end
@@ -67,21 +73,6 @@ 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
-
-      end
-
       def mix_dimensions element, opt, ctx
 
         # Not taking .to_i because we want to accept both integer values

data/lib/inkcite/renderer/td.rb

@@ -4,79 +4,171 @@ module Inkcite
 
       def render tag, opt, ctx
 
+        html = ''
+
+        # Tracks the depth of currently open TD elements.
         tag_stack = ctx.tag_stack(:td)
 
+        # Grab the attributes of the parent table so that the TD can inherit
+        # specific values like padding, valign, responsiveness, etc.
+        table_opt = ctx.parent_opts(:table)
+
+        # Check to see if the parent table was set to fluid-drop which causes
+        # the table cells to be wrapped in <div> elements and floated to
+        # cause them to display more responsively on Android Mail and Gmail apps.
+        #
+        # Fluid-Hybrid TD courtesy of @moonstrips and our friends at Campaign Monitor
+        # https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/
+        is_fluid_drop = table_opt[:mobile] == FLUID_DROP
+
         if tag == CLOSE_TD
+
+          # Retrieve the opts that were used to open this TD.  We'll need them to
+          # check for the private _fluid_drop attribute.
           tag_stack.pop
-          return '</td>'
-        end
 
-        # Push this tag onto the stack so that child elements (e.g. links)
-        # can have access to its attributes.
-        tag_stack << opt
+          # Normal HTML produced by the Helper to close the cell.
+          html << '</td>'
 
-        # Grab the attributes of the parent table so that the TD can inherit
-        # specific values like padding, valign, responsiveness, etc.
-        parent = ctx.parent_opts(:table)
-
-        td = Element.new('td')
-
-        # Inherit base cell attributes - border, background color and image, etc.
-        mix_all td, opt, ctx
-
-        # Force the td to collapse to a single pixel to support images that
-        # are less than 15 pixels.
-        opt.merge!({
-            :font => NONE,
-            :color => NONE,
-            FONT_SIZE => 1,
-            LINE_HEIGHT => 1
-        }) unless opt[:flush].blank?
-
-        # It is a best-practice to declare the same padding on all cells in a
-        # table.  Check to see if padding was declared on the parent.
-        padding = parent[:padding].to_i
-        td.style[:padding] = px(padding) if padding > 0
-
-        # Custom handling for text align on TDs rather than Base's mix_text_align
-        # because if possible, using align= rather than a style keeps emails
-        # smaller.  But for left-aligned text, you gotta use a style because
-        # you know, Outlook.
-        align = opt[:align]
-        unless align.blank?
-          td[:align] = align
-
-          # Must use style to reinforce left-align text in certain email clients.
-          # All other alignments are accepted naturally.
-          td.style[TEXT_ALIGN] = align if align == LEFT
+          # If the td was originally opened with fluid-drop, we need to do a fair
+          # bit of cleanup...
+          if is_fluid_drop
 
-        end
+            # Close the
+            html << '</tr></table>'
 
-        valign = detect(opt[:valign], parent[:valign])
-        td[:valign] = valign unless valign.blank?
+            # Close the floating, responsive div.
+            html << '{/div}'
 
-        rowspan = opt[:rowspan].to_i
-        td[:rowspan] = rowspan if rowspan > 0
+            # Close the conditional cell
+            html << if_mso('</td>')
 
-        mix_font td, opt, ctx, parent
+          end
 
-        mobile = opt[:mobile]
-        if mobile.blank?
+        else
 
-          # If the cell doesn't define it's own responsive behavior, check to
-          # see if it inherits from its parent table.  DROP and SWITCH declared
-          # at the table-level descend to their tds.
-          pm = parent[:mobile]
-          mobile = pm if pm == DROP || pm == SWITCH
+          # Push this tag onto the stack so that child elements (e.g. links)
+          # can have access to its attributes.
+          tag_stack << opt
 
-        end
+          td = Element.new('td')
+
+          # Check to see if a width has been specified for this element.  The
+          # width is critical to Fluid-Hybrid drop.
+          width = opt[:width].to_i
+
+          # Check for vertical alignment applied to either the TD or to the
+          # parent Table.
+          valign = detect(opt[:valign], table_opt[:valign])
+          td[:valign] = valign unless valign.blank?
+
+          # It is a best-practice to declare the same padding on all cells in a
+          # table.  Check to see if padding was declared on the parent.
+          padding = get_padding(table_opt)
+          td.style[:padding] = px(padding) if padding > 0
+
+          mobile = opt[:mobile]
+
+          # Need to handle Fluid-Drop HTML injection here before the rest of the
+          # TD is formalized.  Fluid-Drop removes the width attribute of the cell
+          # as it is wrapped in a 100%-width table.
+          if is_fluid_drop
+
+            # Width must be specified for Fluid-Drop cells.  Vertical-alignment is
+            # also important but should have been preset by the Table Helper if it
+            # was omitted by the designer.
+            ctx.error("Width is a required attribute when #{FLUID_DROP} is specified", opt) unless width > 0
+            ctx.error("Vertical alignment should be specified when #{FLUID_DROP} is specified", opt) if valign.blank?
+
+            # Conditional Outlook cell to prevent the 100%-wide table within from
+            # stretching beyond the max-width.  Also, valign necessary to get float
+            # elements to align properly.
+            html << if_mso(Element.new('td', :width => width, :valign => valign))
+
+            # Per @campaignmonitor, the secret to the Fluid-Drop trick is to wrap the
+            # floating table in a div with "display: inline-block" - which means that
+            # they'll obey the text-align property on the parent cell (text-align affects
+            # all inline or inline-block elements in a container).
+            # https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/
+
+            div_mobile = mobile == HIDE ? HIDE : FILL
+            html << %Q({div width=#{width} display=inline-block valign=#{valign} mobile="#{div_mobile}"})
 
-        mix_responsive td, opt, ctx, mobile
+            # One last wrapper table within the div.  This 100%-wide table is also where any
+            # padding applied to the elements belongs.
+            html << Element.new('table', :cellpadding => padding, :cellspacing => 0, :border => 0, :width => '100%').to_s
+            html << '<tr>'
 
-        #outlook-bg	<!-&#45;&#91;if gte mso 9]>[n]<v:rect style="width:%width%px;height:%height%px;" strokecolor="none"><v:fill type="tile" src="%src%" /></v:fill></v:rect><v:shape id="theText[rnd]" style="position:absolute;width:%width%px;height:%height%px;margin:0;padding:0;%style%">[n]<!&#91;endif]&#45;->
-        #/outlook-bg	<!-&#45;&#91;if gte mso 9]></v:shape><!&#91;endif]&#45;->
+            # Remove the width attribute from the TDs declaration.
+            opt.delete(:width)
+
+            # The TD nested within the floating div and additional table will inherit center-aligned
+            # text which means fluid-drop cells would have a default layout inconsistent with a regular
+            # TD - which will typically be left-aligned.  So, unless otherwise specified, presume that
+            # the TD should have left-aligned text.
+            opt[:align] = 'left' if opt[:align].blank?
+
+            mobile = ''
+
+          end
+
+          # Inherit base cell attributes - border, background color and image, etc.
+          mix_all td, opt, ctx
+
+          # Force the td to collapse to a single pixel to support images that
+          # are less than 15 pixels.
+          opt.merge!({
+                  :font => NONE,
+                  :color => NONE,
+                  FONT_SIZE => 1,
+                  LINE_HEIGHT => 1
+              }) unless opt[:flush].blank?
+
+          # Custom handling for text align on TDs rather than Base's mix_text_align
+          # because if possible, using align= rather than a style keeps emails
+          # smaller.  But for left-aligned text, you gotta use a style because
+          # you know, Outlook.
+          align = opt[:align]
+          unless align.blank?
+            td[:align] = align
+
+            # Must use style to reinforce left-align text in certain email clients.
+            # All other alignments are accepted naturally.
+            td.style[TEXT_ALIGN] = align if align == LEFT
+
+          end
+
+          rowspan = opt[:rowspan].to_i
+          td[:rowspan] = rowspan if rowspan > 0
+
+          mix_font td, opt, ctx, table_opt
+
+          # In Fluid-Drop, the font-size is set to zero to overcome Outlook rendering
+          # problems so it is important to warn the designer that they need to set
+          # it back to a reasonable size on the TD element.
+          # TODO [JDH 11/14/2015] Decide if the warning re: font-size should ever
+          # be restored based on whether or not users are finding it confusing.
+
+          if mobile.blank?
+
+            # If the cell doesn't define it's own responsive behavior, check to
+            # see if it inherits from its parent table.  DROP and SWITCH declared
+            # at the table-level descend to their tds.
+            pm = table_opt[:mobile]
+            mobile = pm if pm == DROP || pm == SWITCH
+
+          end
+
+          mix_responsive td, opt, ctx, mobile
+
+          #outlook-bg	<!-&#45;&#91;if gte mso 9]>[n]<v:rect style="width:%width%px;height:%height%px;" strokecolor="none"><v:fill type="tile" src="%src%" /></v:fill></v:rect><v:shape id="theText[rnd]" style="position:absolute;width:%width%px;height:%height%px;margin:0;padding:0;%style%">[n]<!&#91;endif]&#45;->
+          #/outlook-bg	<!-&#45;&#91;if gte mso 9]></v:shape><!&#91;endif]&#45;->
+
+          html << td.to_s
+
+        end
 
-        td.to_s
+        html
       end
 
       private

data/lib/inkcite/uploader.rb

@@ -8,7 +8,7 @@ module Inkcite
 
       times = []
 
-      [ 'source.html', 'source.txt', 'helpers.tsv' ].each do |file|
+      ['source.html', 'source.txt', 'helpers.tsv'].each do |file|
         file = email.project_file(file)
         times << File.mtime(file).to_i if File.exists?(file)
       end
@@ -81,8 +81,8 @@ module Inkcite
       end
 
       # TODO: Verify SFTP configuration
-      host     = config[:host]
-      path     = config[:path]
+      host = config[:host]
+      path = config[:path]
       username = config[:username]
       password = config[:password]
 
@@ -107,7 +107,7 @@ module Inkcite
         # Upload each version of the email.
         email.versions.each do |version|
 
-          view = email.view(:preview, :browser, version)
+          view = email.view(:preview, :email, version)
 
           # Need to pass the upload path through the renderer to ensure
           # that embedded tags will be converted into data.
@@ -117,28 +117,34 @@ module Inkcite
           # the content and images is present.
           mkdir! sftp, remote_root
 
+          # Upload the images to the remote directory.  We use the last_remote_root
+          # to ensure that we're not repeatedly uploading the same images over and
+          # over when force is enabled -- but will re-upload images to distinct
+          # remote roots.
+          copy! sftp, local_images, remote_root, force && last_remote_root != remote_root
+          last_remote_root = remote_root
+
+          # Check to see if we're creating an in-browser version of the email.
+          next unless email.formats.include?(:browser)
+
+          browser_view = email.view(:preview, :browser, version)
+
           # Check to see if there is a HTML version of this preview.  Some emails
           # do not have a hosted version and so it is not necessary to upload the
           # HTML version of the email - but this is a bad practice.
           file_name = view.file_name
-          unless file_name.blank?
-
-            remote_file_name = File.join(remote_root, file_name)
-            puts "Uploading #{remote_file_name}"
-
-            # We need to use StringIO to write the email to a buffer in order to upload
-            # the email's content in binary so that its encoding is honored.  SFTP defaults
-            # to ASCII-8bit in non-binary mode, so it was blowing up on UTF-8 special
-            # characters (e.g. "Mäkinen").
-            # http://stackoverflow.com/questions/9439289/netsftp-transfer-mode-binary-vs-text
-            io = StringIO.new(view.render!)
-            sftp.upload!(io, remote_file_name)
-
-          end
-
-          # Upload the images to the remote directory
-          copy! sftp, local_images, remote_root, force && last_remote_root != remote_root
-          last_remote_root = remote_root
+          next if file_name.blank?
+
+          remote_file_name = File.join(remote_root, file_name)
+          puts "Uploading #{remote_file_name}"
+
+          # We need to use StringIO to write the email to a buffer in order to upload
+          # the email's content in binary so that its encoding is honored.  SFTP defaults
+          # to ASCII-8bit in non-binary mode, so it was blowing up on UTF-8 special
+          # characters (e.g. "Mäkinen").
+          # http://stackoverflow.com/questions/9439289/netsftp-transfer-mode-binary-vs-text
+          io = StringIO.new(browser_view.render!)
+          sftp.upload!(io, remote_file_name)
 
         end
 

data/lib/inkcite/version.rb

@@ -1,3 +1,3 @@
 module Inkcite
-  VERSION = "1.7.0"
+  VERSION = "1.8.0"
 end

data/lib/inkcite/view.rb

@@ -61,8 +61,15 @@ module Inkcite
       @config[FILE_NAME] = file_name
 
       # The MediaQuery object manages the responsive styles that are applied to
-      # the email during rendering.
-      @media_query = MediaQuery.new(self, 480)
+      # the email during rendering.  Check to see if a breakwidth has been supplied
+      # in helpers.tsv so the designer can control the primary breakpoint.
+      breakpoint = @config[:'mobile-breakpoint'].to_i
+      if breakpoint <= 0
+        breakpoint = @config[:width].to_i - 1
+        breakpoint = 480 if breakpoint <= 0
+      end
+
+      @media_query = MediaQuery.new(self, breakpoint)
 
       # Set the version index based on the position of this
       # version in the list of those defined.
@@ -218,7 +225,11 @@ module Inkcite
       image_host = if development?
         (@email.optimize_images?? Minifier::IMAGE_CACHE : Email::IMAGES) + '/'
       else
-        self[Email::IMAGE_HOST]
+
+        # Use the image host defined in config.yml or, out-of-the-box refer to images/
+        # in the build directory.
+        self[Email::IMAGE_HOST] || (Email::IMAGES + '/')
+
       end
 
       src_url << image_host unless image_host.blank?
@@ -227,7 +238,7 @@ module Inkcite
       src_url << src
 
       # Cache-bust the image if the caller is expecting it to be there.
-      src_url << "?#{Time.now.to_i}" if is_enabled?(Email::CACHE_BUST)
+      src_url << "?#{Time.now.to_i}" if !production? && is_enabled?(Email::CACHE_BUST)
 
       # Transpose any embedded tags into actual values.
       Renderer.render(src_url, self)
@@ -361,7 +372,15 @@ module Inkcite
         html << '<meta name="viewport" content="width=device-width"/>'
         html << "<meta name=\"generator\" content=\"Inkcite #{Inkcite::VERSION}\"/>"
 
-        html << "<title>#{self.title}</title>"
+        # Enable responsive media queries on Windows phones courtesy of @jamesmacwhite
+        # https://blog.jmwhite.co.uk/2014/03/01/windows-phone-does-support-css3-media-queries-in-html-email/
+        html << '<!--[if !mso]><!-->'
+        html << '<meta http-equiv="X-UA-Compatible" content="IE=edge" />'
+        html << '<!--<![endif]-->'
+
+        # Some native Android clients display the title before the preheader so
+        # don't include it in non-development or email rendering per @moonstrips
+        html << "<title>#{self.title if (development? || browser?)}</title>"
 
         # Add external script sources.
         html += external_scripts

data/test/renderer/image_spec.rb

@@ -79,4 +79,8 @@ describe Inkcite::Renderer::Image do
     @view.media_query.find_by_klass('i01').to_css.must_equal('img[class~="i01"] { content: url("images/inkcite-mobile.jpg") !important; }')
   end
 
+  it 'supports fluid-hybrid desktop and style' do
+    Inkcite::Renderer.render('{img src=inkcite.jpg height=200 width=325 mobile=fluid}', @view).must_equal('<img border=0 src="images/inkcite.jpg" style="display:block;height:auto;max-width:325px;width:100%" width=325>')
+  end
+
 end

data/test/renderer/table_spec.rb

@@ -31,4 +31,24 @@ describe Inkcite::Renderer::Table do
     Inkcite::Renderer.render('{table margin=15 margin-left=8}', @view).must_equal('<table border=0 cellpadding=0 cellspacing=0 style="margin-bottom:15px;margin-left:8px;margin-right:15px;margin-top:15px"><tr>')
   end
 
+  it 'supports fluid-hybrid desktop and style' do
+     Inkcite::Renderer.render('{table width=500 mobile=fluid}', @view).must_equal(%Q(<!--[if mso]><table border=0 cellpadding=0 cellspacing=0 width=500><tr><td><![endif]--><table border=0 cellpadding=0 cellspacing=0 style="max-width:500px" width=100%><tr>))
+   end
+
+  it 'carries table alignment into the Outlook wrap table in fluid-hybrid' do
+     Inkcite::Renderer.render('{table align=center width=500 mobile=fluid}', @view).must_equal(%Q(<!--[if mso]><table align=center border=0 cellpadding=0 cellspacing=0 width=500><tr><td><![endif]--><table align=center border=0 cellpadding=0 cellspacing=0 style="max-width:500px" width=100%><tr>))
+  end
+
+  it 'supports fluid-drop desktop and style' do
+
+    markup = ''
+    markup << %Q({table font-size=25 bgcolor=#090 border="5px solid #f0f" padding=15 width=600 mobile="fluid-drop"})
+    markup << %Q({td width=195 bgcolor=#009 color=#fff valign=top}left{/td})
+    markup << %Q({td width=195 align=center}centered two-line{/td})
+    markup << %Q({td width=195 bgcolor=#900 color=#fff align=right font-size=30}right<br>three<br>lines{/td})
+    markup << %Q({/table})
+
+    Inkcite::Renderer.render(markup, @view).must_equal(%Q(<!--[if mso]><table border=0 cellpadding=0 cellspacing=0 width=600><tr><td><![endif]--><table bgcolor=#009900 border=0 cellpadding=0 cellspacing=0 style="border:5px solid #f0f;max-width:600px" width=100%><tr><td style="font-size:0;text-align:center;vertical-align:middle"><!--[if mso]><table align=center border=0 cellpadding=0 cellspacing=0 width=100%><tr><![endif]--><!--[if mso]><td valign=top width=195><![endif]--><div class="fill" style="display:inline-block;vertical-align:top;width:195px"><table border=0 cellpadding=15 cellspacing=0 width=100%><tr><td align=left bgcolor=#000099 style="color:#ffffff;font-size:25px;padding:15px;text-align:left" valign=top>left</td></tr></table></div><!--[if mso]></td><![endif]--><!--[if mso]><td valign=middle width=195><![endif]--><div class="fill" style="display:inline-block;vertical-align:middle;width:195px"><table border=0 cellpadding=15 cellspacing=0 width=100%><tr><td align=center style="font-size:25px;padding:15px" valign=middle>centered two-line</td></tr></table></div><!--[if mso]></td><![endif]--><!--[if mso]><td valign=middle width=195><![endif]--><div class="fill" style="display:inline-block;vertical-align:middle;width:195px"><table border=0 cellpadding=15 cellspacing=0 width=100%><tr><td align=right bgcolor=#990000 style="color:#ffffff;font-size:30px;padding:15px" valign=middle>right<br>three<br>lines</td></tr></table></div><!--[if mso]></td><![endif]--><!--[if mso]></tr></table><![endif]--></td></tr></table><!--[if mso]></td></tr></table><![endif]-->))
+  end
+
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: inkcite
 version: !ruby/object:Gem::Version
-  version: 1.7.0
+  version: 1.8.0
 platform: ruby
 authors:
 - Jeffrey D. Hoffman
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-04 00:00:00.000000000 Z
+date: 2015-11-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -94,6 +94,20 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: htmlbeautifier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: image_optim
   requirement: !ruby/object:Gem::Requirement
@@ -313,9 +327,6 @@ files:
 - assets/init/image_optim.yml
 - assets/init/source.html
 - bin/inkcite
-- bin/release-major
-- bin/release-minor
-- bin/release-patch
 - inkcite.gemspec
 - lib/inkcite.rb
 - lib/inkcite/cli/base.rb

data/bin/release-major

@@ -1 +0,0 @@
-gem bump --version major --push --release

data/bin/release-minor

@@ -1 +0,0 @@
-gem bump --version minor --push --release