mjml-rb 0.2.1

data/lib/mjml-rb/components/column.rb

@@ -0,0 +1,241 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Column < Base
+      TAGS = %w[mj-column].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "background-color" => "color",
+        "border" => "string",
+        "border-bottom" => "string",
+        "border-left" => "string",
+        "border-radius" => "unit(px,%){1,4}",
+        "border-right" => "string",
+        "border-top" => "string",
+        "direction" => "enum(ltr,rtl)",
+        "inner-background-color" => "color",
+        "inner-border" => "string",
+        "inner-border-bottom" => "string",
+        "inner-border-left" => "string",
+        "inner-border-radius" => "unit(px,%){1,4}",
+        "inner-border-right" => "string",
+        "inner-border-top" => "string",
+        "padding" => "unit(px,%){1,4}",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-top" => "unit(px,%)",
+        "vertical-align" => "enum(top,bottom,middle)",
+        "width" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "direction" => "ltr",
+        "vertical-align" => "top"
+      }.freeze
+
+      GUTTER_ATTRIBUTES = %w[padding padding-top padding-right padding-bottom padding-left].freeze
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        width_pct = context.delete(:_column_width_pct) || 100.0
+        css_class = attrs["css-class"]
+        a = self.class.default_attributes.merge(attrs)
+
+        pct_str          = width_pct.to_f.to_s.sub(/\.?0+$/, "")
+        col_class_suffix = pct_str.gsub(".", "-")
+        context[:column_widths][col_class_suffix] = pct_str if context[:column_widths]
+
+        col_class = "mj-column-per-#{col_class_suffix} mj-outlook-group-fix"
+        col_class = "#{col_class} #{css_class}" if css_class && !css_class.empty?
+
+        vertical_align = a["vertical-align"]
+        col_style = style_join(
+          "font-size" => "0px",
+          "text-align" => "left",
+          "direction" => a["direction"],
+          "display" => "inline-block",
+          "vertical-align" => vertical_align,
+          "width" => "100%"
+        )
+
+        column_markup =
+          if gutter?(a)
+            render_gutter(node, context, a, vertical_align, width_pct)
+          else
+            render_column(node, context, a, vertical_align, width_pct, inside_gutter: false)
+          end
+
+        %(<div class="#{escape_attr(col_class)}" style="#{col_style}">#{column_markup}</div>)
+      end
+
+      private
+
+      def gutter?(attrs)
+        GUTTER_ATTRIBUTES.any? { |name| attrs[name] && !attrs[name].empty? }
+      end
+
+      def render_gutter(node, context, attrs, vertical_align, width_pct)
+        table_attrs = {
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "width" => "100%",
+          "style" => (has_border_radius?(attrs) ? "border-collapse:separate" : nil)
+        }
+        td_attrs = {
+          "style" => style_join(table_style(attrs, vertical_align).merge(gutter_style(attrs, vertical_align)))
+        }
+
+        %(<table#{html_attrs(table_attrs)}><tbody><tr><td#{html_attrs(td_attrs)}>#{render_column(node, context, attrs, vertical_align, width_pct, inside_gutter: true)}</td></tr></tbody></table>)
+      end
+
+      def render_column(node, context, attrs, vertical_align, width_pct, inside_gutter:)
+        table_attrs = {
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "width" => "100%"
+        }
+
+        styles = inside_gutter ? inner_table_style(attrs) : table_style(attrs, vertical_align)
+        table_attrs["style"] = style_join(styles) if styles.any?
+
+        children = with_child_container_width(context, attrs, width_pct) do
+          render_children(node, context, parent: "mj-column")
+        end
+        %(<table#{html_attrs(table_attrs)}><tbody>#{children}</tbody></table>)
+      end
+
+      def table_style(attrs, vertical_align)
+        style = {
+          "background-color" => attrs["background-color"],
+          "border" => attrs["border"],
+          "border-bottom" => attrs["border-bottom"],
+          "border-left" => attrs["border-left"],
+          "border-radius" => attrs["border-radius"],
+          "border-right" => attrs["border-right"],
+          "border-top" => attrs["border-top"],
+          "vertical-align" => vertical_align
+        }
+        style["border-collapse"] = "separate" if has_border_radius?(attrs)
+        style
+      end
+
+      def inner_table_style(attrs)
+        style = {
+          "background-color" => attrs["inner-background-color"],
+          "border" => attrs["inner-border"],
+          "border-bottom" => attrs["inner-border-bottom"],
+          "border-left" => attrs["inner-border-left"],
+          "border-radius" => attrs["inner-border-radius"],
+          "border-right" => attrs["inner-border-right"],
+          "border-top" => attrs["inner-border-top"]
+        }
+        style["border-collapse"] = "separate" if has_inner_border_radius?(attrs)
+        style
+      end
+
+      def gutter_style(attrs, vertical_align)
+        {
+          "padding" => attrs["padding"],
+          "padding-top" => attrs["padding-top"],
+          "padding-right" => attrs["padding-right"],
+          "padding-bottom" => attrs["padding-bottom"],
+          "padding-left" => attrs["padding-left"],
+          "vertical-align" => vertical_align
+        }
+      end
+
+      def has_border_radius?(attrs)
+        present_attr?(attrs["border-radius"])
+      end
+
+      def has_inner_border_radius?(attrs)
+        present_attr?(attrs["inner-border-radius"])
+      end
+
+      def present_attr?(value)
+        value && !value.empty?
+      end
+
+      def with_child_container_width(context, attrs, width_pct)
+        previous_container_width = context[:container_width]
+        context[:container_width] = child_container_width(context, attrs, width_pct)
+        yield
+      ensure
+        context[:container_width] = previous_container_width
+      end
+
+      def child_container_width(context, attrs, width_pct)
+        parent_width = parse_pixel_value(context[:container_width] || "600px")
+        width = attrs["width"]
+        raw_width =
+          if present_attr?(width) && width.end_with?("%")
+            parent_width * parse_pixel_value(width) / 100.0
+          elsif present_attr?(width) && width.end_with?("px")
+            parse_pixel_value(width)
+          else
+            parent_width * width_pct / 100.0
+          end
+
+        all_paddings = horizontal_padding_width(attrs) +
+                       horizontal_border_width(attrs, "border") +
+                       horizontal_border_width(attrs, "inner-border")
+
+        "#{[raw_width - all_paddings, 0].max}px"
+      end
+
+      def horizontal_padding_width(attrs)
+        padding_value(attrs, "left") + padding_value(attrs, "right")
+      end
+
+      def padding_value(attrs, side)
+        specific_padding = attrs["padding-#{side}"]
+        return parse_pixel_value(specific_padding) if present_attr?(specific_padding)
+
+        shorthand_padding_value(attrs["padding"], side)
+      end
+
+      def shorthand_padding_value(value, side)
+        return 0.0 unless present_attr?(value)
+
+        parts = value.split(/\s+/)
+        case parts.length
+        when 1
+          parse_pixel_value(parts[0])
+        when 2
+          side == "left" || side == "right" ? parse_pixel_value(parts[1]) : parse_pixel_value(parts[0])
+        when 3
+          side == "left" || side == "right" ? parse_pixel_value(parts[1]) : parse_pixel_value(side == "top" ? parts[0] : parts[2])
+        when 4
+          parse_pixel_value(parts[side == "left" ? 3 : 1])
+        else
+          0.0
+        end
+      end
+
+      def horizontal_border_width(attrs, attribute_prefix)
+        border_width(attrs["#{attribute_prefix}-left"] || attrs[attribute_prefix]) +
+          border_width(attrs["#{attribute_prefix}-right"] || attrs[attribute_prefix])
+      end
+
+      def border_width(value)
+        return 0.0 unless present_attr?(value)
+        return 0.0 if value.strip == "none"
+
+        matched = value.match(/(-?\d+(?:\.\d+)?)px/)
+        matched ? matched[1].to_f : 0.0
+      end
+
+      def parse_pixel_value(value)
+        return 0.0 unless present_attr?(value)
+
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/divider.rb

@@ -0,0 +1,120 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Divider < Base
+      TAGS = ["mj-divider"].freeze
+
+      DEFAULTS = {
+        "align" => "center",
+        "border-color" => "#000000",
+        "border-style" => "solid",
+        "border-width" => "4px",
+        "padding" => "10px 25px",
+        "width" => "100%"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULTS.merge(attrs)
+
+        outer_td_style = style_join(
+          "background" => a["container-background-color"],
+          "font-size" => "0px",
+          "padding" => a["padding"],
+          "padding-top" => a["padding-top"],
+          "padding-right" => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left" => a["padding-left"],
+          "word-break" => "break-word"
+        )
+        outer_td_attrs = {
+          "align" => a["align"],
+          "class" => a["css-class"],
+          "style" => outer_td_style
+        }
+
+        border_top = "#{a["border-style"]} #{a["border-width"]} #{a["border-color"]}"
+        margin = compute_margin(a["align"])
+
+        p_style = style_join(
+          "border-top" => border_top,
+          "font-size" => "1px",
+          "margin" => margin,
+          "width" => a["width"]
+        )
+
+        outlook_width = get_outlook_width(a, context)
+        outlook_style = style_join(
+          "border-top" => border_top,
+          "font-size" => "1px",
+          "margin" => margin,
+          "width" => outlook_width
+        )
+
+        p_tag = %(<p style="#{p_style}"></p>)
+        outlook = outlook_block(a["align"], outlook_style, outlook_width)
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{p_tag}\n#{outlook}</td></tr>)
+      end
+
+      private
+
+      def compute_margin(align)
+        case align
+        when "left"  then "0px"
+        when "right" then "0px 0px 0px auto"
+        else              "0px auto"
+        end
+      end
+
+      def get_outlook_width(attrs, context)
+        container_width = (context[:container_width] || "600px").to_f
+        padding = attrs["padding"] || "10px 25px"
+        parts = padding.split(/\s+/)
+        pad_left  = shorthand_value(parts, :left).to_f
+        pad_right = shorthand_value(parts, :right).to_f
+
+        if attrs["padding-left"]
+          pad_left = attrs["padding-left"].to_f
+        end
+        if attrs["padding-right"]
+          pad_right = attrs["padding-right"].to_f
+        end
+
+        width = attrs["width"] || "100%"
+
+        if width =~ /^(\d+(?:\.\d+)?)\s*%$/
+          pct = ::Regexp.last_match(1).to_f / 100.0
+          effective = container_width - pad_left - pad_right
+          "#{(effective * pct).to_i}px"
+        elsif width =~ /^(\d+(?:\.\d+)?)\s*px$/
+          width
+        else
+          "#{(container_width - pad_left - pad_right).to_i}px"
+        end
+      end
+
+      def shorthand_value(parts, side)
+        case parts.length
+        when 1 then parts[0]
+        when 2, 3 then parts[1]
+        when 4 then side == :left ? parts[3] : parts[1]
+        else "0"
+        end
+      end
+
+      def outlook_block(align, style, width)
+        # Strip trailing px for the HTML width attribute
+        width_int = width.to_i.to_s
+        <<~HTML.strip
+          <!--[if mso | IE]><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" style="#{style}" role="presentation" width="#{width_int}" ><tr><td style="height:0;line-height:0;"> &nbsp;
+          </td></tr></table><![endif]-->
+        HTML
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/hero.rb

@@ -0,0 +1,285 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Hero < Base
+      TAGS = ["mj-hero"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "mode" => "string",
+        "height" => "unit(px,%)",
+        "background-url" => "string",
+        "background-width" => "unit(px,%)",
+        "background-height" => "unit(px,%)",
+        "background-position" => "string",
+        "border-radius" => "string",
+        "container-background-color" => "color",
+        "inner-background-color" => "color",
+        "inner-padding" => "unit(px,%){1,4}",
+        "inner-padding-top" => "unit(px,%)",
+        "inner-padding-left" => "unit(px,%)",
+        "inner-padding-right" => "unit(px,%)",
+        "inner-padding-bottom" => "unit(px,%)",
+        "padding" => "unit(px,%){1,4}",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-top" => "unit(px,%)",
+        "background-color" => "color",
+        "vertical-align" => "enum(top,bottom,middle)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "mode" => "fixed-height",
+        "height" => "0px",
+        "background-url" => nil,
+        "background-position" => "center center",
+        "padding" => "0px",
+        "padding-bottom" => nil,
+        "padding-left" => nil,
+        "padding-right" => nil,
+        "padding-top" => nil,
+        "background-color" => "#ffffff",
+        "vertical-align" => "top"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        container_width = normalize_container_width(context[:container_width] || "600px")
+        content_width = hero_container_width(a, container_width)
+
+        content = with_container_width(context, content_width) do
+          render_children(node, context, parent: "mj-hero")
+        end
+
+        div_attrs = {
+          "class" => a["css-class"],
+          "style" => style_join(
+            "margin" => "0 auto",
+            "max-width" => container_width
+          )
+        }
+
+        table_attrs = {
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "style" => "width:100%;",
+          "width" => "100%"
+        }
+
+        wrapper = %(<div#{html_attrs(div_attrs)}><table#{html_attrs(table_attrs)}><tbody><tr style="vertical-align:top;">#{render_mode(a, content, container_width)}</tr></tbody></table></div>)
+
+        "#{outlook_before(a, container_width)}#{wrapper}#{outlook_after}"
+      end
+
+      private
+
+      def render_mode(attrs, content, container_width)
+        common_attrs = {
+          "background" => attrs["background-url"],
+          "style" => style_join(
+            "background" => background_style(attrs),
+            "background-position" => attrs["background-position"],
+            "background-repeat" => "no-repeat",
+            "border-radius" => attrs["border-radius"],
+            "padding" => attrs["padding"],
+            "padding-top" => attrs["padding-top"],
+            "padding-left" => attrs["padding-left"],
+            "padding-right" => attrs["padding-right"],
+            "padding-bottom" => attrs["padding-bottom"],
+            "vertical-align" => attrs["vertical-align"]
+          )
+        }
+
+        if attrs["mode"] == "fluid-height"
+          ratio = background_ratio(attrs, container_width)
+          fluid_td_attrs = {
+            "style" => style_join(
+              "width" => "0.01%",
+              "padding-bottom" => "#{ratio}%",
+              "mso-padding-bottom-alt" => "0"
+            )
+          }
+
+          [
+            %(<td#{html_attrs(fluid_td_attrs)}></td>),
+            %(<td#{html_attrs(common_attrs)}>#{render_content(attrs, content, container_width)}</td>),
+            %(<td#{html_attrs(fluid_td_attrs)}></td>)
+          ].join
+        else
+          height = [parse_unit_value(attrs["height"]) - padding_side(attrs, "top") - padding_side(attrs, "bottom"), 0].max
+          fixed_attrs = common_attrs.merge(
+            "height" => height.to_i.to_s,
+            "style" => style_join(
+              "background" => background_style(attrs),
+              "background-position" => attrs["background-position"],
+              "background-repeat" => "no-repeat",
+              "border-radius" => attrs["border-radius"],
+              "padding" => attrs["padding"],
+              "padding-top" => attrs["padding-top"],
+              "padding-left" => attrs["padding-left"],
+              "padding-right" => attrs["padding-right"],
+              "padding-bottom" => attrs["padding-bottom"],
+              "vertical-align" => attrs["vertical-align"],
+              "height" => "#{height.to_i}px"
+            )
+          )
+          %(<td#{html_attrs(fixed_attrs)}>#{render_content(attrs, content, container_width)}</td>)
+        end
+      end
+
+      def render_content(attrs, content, container_width)
+        outlook_attrs = {
+          "align" => "center",
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "width" => container_width.delete_suffix("px"),
+          "style" => "width:#{container_width};"
+        }
+        outlook_td_style = style_join(
+          "background-color" => attrs["inner-background-color"],
+          "padding" => attrs["inner-padding"],
+          "padding-top" => attrs["inner-padding-top"],
+          "padding-left" => attrs["inner-padding-left"],
+          "padding-right" => attrs["inner-padding-right"],
+          "padding-bottom" => attrs["inner-padding-bottom"]
+        )
+        inner_div_attrs = {
+          "class" => "mj-hero-content",
+          "style" => style_join(
+            "background-color" => attrs["inner-background-color"],
+            "margin" => "0px auto"
+          )
+        }
+        inner_table_attrs = {
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "style" => "width:100%;margin:0px;",
+          "width" => "100%"
+        }
+
+        [
+          %(<!--[if mso | IE]><table#{html_attrs(outlook_attrs)}><tr><td style="#{outlook_td_style}"><![endif]-->),
+          %(<div#{html_attrs(inner_div_attrs)}><table#{html_attrs(inner_table_attrs)}><tbody>#{content}</tbody></table></div>),
+          %(<!--[if mso | IE]></td></tr></table><![endif]-->)
+        ].join
+      end
+
+      def outlook_before(attrs, container_width)
+        table_attrs = {
+          "align" => "center",
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "style" => "width:#{container_width};",
+          "width" => container_width.delete_suffix("px")
+        }
+        image_attrs = {
+          "style" => style_join(
+            "border" => "0",
+            "height" => attrs["background-height"],
+            "mso-position-horizontal" => "center",
+            "position" => "absolute",
+            "top" => "0",
+            "width" => attrs["background-width"] || container_width,
+            "z-index" => "-3"
+          ),
+          "src" => attrs["background-url"],
+          "xmlns:v" => "urn:schemas-microsoft-com:vml"
+        }
+
+        opening = %(<!--[if mso | IE]><table#{html_attrs(table_attrs)}><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">)
+        return "#{opening}<![endif]-->" if attrs["background-url"].nil? || attrs["background-url"].empty?
+
+        "#{opening}<v:image#{html_attrs(image_attrs)} /><![endif]-->"
+      end
+
+      def outlook_after
+        %(<!--[if mso | IE]></td></tr></table><![endif]-->)
+      end
+
+      def background_style(attrs)
+        parts = [attrs["background-color"]]
+        if attrs["background-url"] && !attrs["background-url"].empty?
+          parts << %(url('#{attrs["background-url"]}'))
+          parts << "no-repeat"
+          parts << "#{attrs["background-position"]} / cover"
+        end
+        parts.compact.join(" ")
+      end
+
+      def background_ratio(attrs, container_width)
+        background_height = parse_unit_value(attrs["background-height"])
+        background_width = parse_unit_value(attrs["background-width"] || container_width)
+        return 0 if background_width.zero?
+
+        ((background_height / background_width) * 100).round
+      end
+
+      def with_container_width(context, width)
+        previous = context[:container_width]
+        context[:container_width] = width
+        yield
+      ensure
+        context[:container_width] = previous
+      end
+
+      def hero_container_width(attrs, container_width)
+        width = parse_unit_value(container_width)
+        content_width = width - padding_side(attrs, "left") - padding_side(attrs, "right")
+        "#{[content_width, 0].max}px"
+      end
+
+      def normalize_container_width(value)
+        "#{parse_unit_value(value)}px"
+      end
+
+      def padding_side(attrs, side)
+        specific = attrs["padding-#{side}"]
+        return parse_unit_value(specific) unless blank?(specific)
+
+        padding_shorthand_value(attrs["padding"], side)
+      end
+
+      def padding_shorthand_value(value, side)
+        return 0 if blank?(value)
+
+        parts = value.to_s.strip.split(/\s+/)
+        case parts.length
+        when 1
+          parse_unit_value(parts[0])
+        when 2
+          %w[left right].include?(side) ? parse_unit_value(parts[1]) : parse_unit_value(parts[0])
+        when 3
+          %w[left right].include?(side) ? parse_unit_value(parts[1]) : parse_unit_value(side == "top" ? parts[0] : parts[2])
+        when 4
+          parse_unit_value(parts[side == "left" ? 3 : 1])
+        else
+          0
+        end
+      end
+
+      def parse_unit_value(value)
+        return 0 if blank?(value)
+
+        match = value.to_s.match(/-?\d+(?:\.\d+)?/)
+        match ? match[0].to_f : 0
+      end
+
+      def blank?(value)
+        value.nil? || value.to_s.empty?
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/html_attributes.rb

@@ -0,0 +1,32 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class HtmlAttributes < Base
+      TAGS = %w[mj-selector mj-html-attribute].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "mj-selector" => {
+          "path" => "string"
+        },
+        "mj-html-attribute" => {
+          "name" => "string"
+        }
+      }.freeze
+
+      class << self
+        def allowed_attributes_for(tag_name)
+          ALLOWED_ATTRIBUTES[tag_name] || {}
+        end
+      end
+
+      def self.allowed_attributes
+        {}
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        render_children(node, context, parent: parent)
+      end
+    end
+  end
+end