mjml-rb 0.2.1

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

@@ -0,0 +1,210 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Accordion < Base
+      TAGS = %w[
+        mj-accordion
+        mj-accordion-element
+        mj-accordion-title
+        mj-accordion-text
+      ].freeze
+
+      HEAD_STYLE = <<~CSS.freeze
+        noinput.mj-accordion-checkbox { display:block!important; }
+        @media yahoo, only screen and (min-width:0) {
+          .mj-accordion-element { display:block; }
+          input.mj-accordion-checkbox, .mj-accordion-less { display:none!important; }
+          input.mj-accordion-checkbox + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
+          input.mj-accordion-checkbox + * .mj-accordion-content { overflow:hidden; display:none; }
+          input.mj-accordion-checkbox + * .mj-accordion-more { display:block!important; }
+          input.mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }
+          input.mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }
+          input.mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }
+        }
+        .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor:auto; touch-action:auto; -webkit-user-select:auto; -moz-user-select:auto; user-select:auto; }
+        .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow:hidden; display:block; }
+        .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display:none; }
+      CSS
+
+      DEFAULTS = {
+        "border" => "2px solid black",
+        "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+        "icon-align" => "middle",
+        "icon-wrapped-url" => "https://i.imgur.com/bIXv1bk.png",
+        "icon-wrapped-alt" => "+",
+        "icon-unwrapped-url" => "https://i.imgur.com/w4uTygT.png",
+        "icon-unwrapped-alt" => "-",
+        "icon-position" => "right",
+        "icon-height" => "32px",
+        "icon-width" => "32px",
+        "padding" => "10px 25px"
+      }.freeze
+
+      TITLE_DEFAULTS = {
+        "font-size" => "13px",
+        "padding" => "16px"
+      }.freeze
+
+      TEXT_DEFAULTS = {
+        "font-size" => "13px",
+        "line-height" => "1",
+        "padding" => "16px"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def head_style
+        HEAD_STYLE
+      end
+
+      def head_style_tags
+        ["mj-accordion"]
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        case tag_name
+        when "mj-accordion"
+          render_accordion(node, context, attrs)
+        when "mj-accordion-element"
+          render_accordion_element(node, context, DEFAULTS.merge(attrs))
+        when "mj-accordion-title"
+          render_accordion_title(node, DEFAULTS.merge(attrs))
+        when "mj-accordion-text"
+          render_accordion_text(node, DEFAULTS.merge(attrs))
+        else
+          render_children(node, context, parent: parent)
+        end
+      end
+
+      private
+
+      def render_accordion(node, context, attrs)
+        accordion_attrs = DEFAULTS.merge(attrs)
+        outer_style = style_join(
+          "padding" => accordion_attrs["padding"],
+          "background-color" => accordion_attrs["container-background-color"]
+        )
+        table_style = style_join(
+          "width" => "100%",
+          "border-collapse" => "collapse",
+          "border" => accordion_attrs["border"],
+          "border-bottom" => "none",
+          "font-family" => accordion_attrs["font-family"]
+        )
+        inner = node.element_children.map do |child|
+          case child.tag_name
+          when "mj-accordion-element"
+            render_accordion_element(child, context, accordion_attrs)
+          when "mj-raw"
+            raw_inner(child)
+          else
+            render_node(child, context, parent: "mj-accordion")
+          end
+        end.join
+
+        %(<tr><td style="#{outer_style}"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" class="mj-accordion" style="#{table_style}"><tbody>#{inner}</tbody></table></td></tr>)
+      end
+
+      def render_accordion_element(node, context, parent_attrs)
+        attrs = parent_attrs.merge(resolved_attributes(node, context))
+        td_style = style_join(
+          "padding" => "0px",
+          "background-color" => attrs["background-color"]
+        )
+        label_style = style_join(
+          "font-size" => "13px",
+          "font-family" => attrs["font-family"] || parent_attrs["font-family"]
+        )
+
+        children = node.element_children
+        has_title = children.any? { |child| child.tag_name == "mj-accordion-title" }
+        has_text = children.any? { |child| child.tag_name == "mj-accordion-text" }
+        content = []
+        content << render_accordion_title(nil, attrs) unless has_title
+
+        children.each do |child|
+          case child.tag_name
+          when "mj-accordion-title"
+            child_attrs = attrs.merge(resolved_attributes(child, context))
+            content << render_accordion_title(child, child_attrs)
+          when "mj-accordion-text"
+            child_attrs = attrs.merge(resolved_attributes(child, context))
+            content << render_accordion_text(child, child_attrs)
+          when "mj-raw"
+            content << raw_inner(child)
+          end
+        end
+        content << render_accordion_text(nil, attrs) unless has_text
+
+        css_class = attrs["css-class"] ? %( class="#{escape_attr(attrs["css-class"])}") : ""
+        %(<tr#{css_class}><td style="#{td_style}"><label class="mj-accordion-element" style="#{label_style}"><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><div>#{content.join("\n")}</div></label></td></tr>)
+      end
+
+      def render_accordion_title(node, attrs)
+        title_attrs = TITLE_DEFAULTS.merge(attrs)
+        td_style = style_join(
+          "width" => "100%",
+          "background-color" => title_attrs["background-color"],
+          "color" => title_attrs["color"],
+          "font-size" => title_attrs["font-size"],
+          "font-family" => title_attrs["font-family"] || DEFAULTS["font-family"],
+          "font-weight" => title_attrs["font-weight"],
+          "padding" => title_attrs["padding"],
+          "padding-bottom" => title_attrs["padding-bottom"],
+          "padding-left" => title_attrs["padding-left"],
+          "padding-right" => title_attrs["padding-right"],
+          "padding-top" => title_attrs["padding-top"]
+        )
+        td2_style = style_join(
+          "padding" => "16px",
+          "background" => title_attrs["background-color"],
+          "vertical-align" => title_attrs["icon-align"] || "middle"
+        )
+        icon_style = style_join(
+          "display" => "none",
+          "width" => title_attrs["icon-width"] || DEFAULTS["icon-width"],
+          "height" => title_attrs["icon-height"] || DEFAULTS["icon-height"]
+        )
+        table_style = style_join(
+          "width" => "100%",
+          "border-bottom" => title_attrs["border"] || DEFAULTS["border"]
+        )
+        title_content = node ? raw_inner(node) : ""
+        title_cell = %(<td style="#{td_style}">#{title_content}</td>)
+        icon_cell = %(<td class="mj-accordion-ico" style="#{td2_style}"><img src="#{escape_attr(title_attrs["icon-wrapped-url"] || DEFAULTS["icon-wrapped-url"])}" alt="#{escape_attr(title_attrs["icon-wrapped-alt"] || DEFAULTS["icon-wrapped-alt"])}" class="mj-accordion-more" style="#{icon_style}" /><img src="#{escape_attr(title_attrs["icon-unwrapped-url"] || DEFAULTS["icon-unwrapped-url"])}" alt="#{escape_attr(title_attrs["icon-unwrapped-alt"] || DEFAULTS["icon-unwrapped-alt"])}" class="mj-accordion-less" style="#{icon_style}" /></td>)
+        cells = title_attrs["icon-position"] == "left" ? "#{icon_cell}#{title_cell}" : "#{title_cell}#{icon_cell}"
+
+        %(<div class="mj-accordion-title"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="#{table_style}"><tbody><tr>#{cells}</tr></tbody></table></div>)
+      end
+
+      def render_accordion_text(node, attrs)
+        text_attrs = TEXT_DEFAULTS.merge(attrs)
+        td_style = style_join(
+          "background" => text_attrs["background-color"],
+          "font-size" => text_attrs["font-size"],
+          "font-family" => text_attrs["font-family"] || DEFAULTS["font-family"],
+          "font-weight" => text_attrs["font-weight"],
+          "letter-spacing" => text_attrs["letter-spacing"],
+          "line-height" => text_attrs["line-height"],
+          "color" => text_attrs["color"],
+          "padding" => text_attrs["padding"],
+          "padding-bottom" => text_attrs["padding-bottom"],
+          "padding-left" => text_attrs["padding-left"],
+          "padding-right" => text_attrs["padding-right"],
+          "padding-top" => text_attrs["padding-top"]
+        )
+        table_style = style_join(
+          "width" => "100%",
+          "border-bottom" => text_attrs["border"] || DEFAULTS["border"]
+        )
+        content = node ? raw_inner(node) : ""
+        css_class = text_attrs["css-class"] ? %( class="#{escape_attr(text_attrs["css-class"])}") : ""
+
+        %(<div class="mj-accordion-content"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="#{table_style}"><tbody><tr><td#{css_class} style="#{td_style}">#{content}</td></tr></tbody></table></div>)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+module MjmlRb
+  module Components
+    class Base
+      class << self
+        def tags
+          const_defined?(:TAGS) ? const_get(:TAGS) : []
+        end
+
+        def allowed_attributes
+          const_defined?(:ALLOWED_ATTRIBUTES) ? const_get(:ALLOWED_ATTRIBUTES) : {}
+        end
+
+        def default_attributes
+          if const_defined?(:DEFAULT_ATTRIBUTES)
+            const_get(:DEFAULT_ATTRIBUTES)
+          elsif const_defined?(:DEFAULTS)
+            const_get(:DEFAULTS)
+          else
+            {}
+          end
+        end
+      end
+
+      def initialize(renderer)
+        @renderer = renderer
+      end
+
+      def tags
+        self.class.tags
+      end
+
+      private
+
+      attr_reader :renderer
+
+      def render_node(node, context, parent:)
+        renderer.send(:render_node, node, context, parent: parent)
+      end
+
+      def render_children(node, context, parent:)
+        renderer.send(:render_children, node, context, parent: parent)
+      end
+
+      def resolved_attributes(node, context)
+        renderer.send(:resolved_attributes, node, context)
+      end
+
+      def raw_inner(node)
+        renderer.send(:raw_inner, node)
+      end
+
+      # Like raw_inner but HTML-escapes text nodes. Use for components such as
+      # mj-text where the inner content is treated as HTML but bare text must
+      # be properly encoded (e.g. & -> &amp;).
+      def html_inner(node)
+        renderer.send(:html_inner, node)
+      end
+
+      def escape_html(value)
+        renderer.send(:escape_html, value)
+      end
+
+      def style_join(hash)
+        renderer.send(:style_join, hash)
+      end
+
+      def escape_attr(value)
+        renderer.send(:escape_attr, value)
+      end
+
+      def html_attrs(hash)
+        renderer.send(:html_attrs, hash)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Body < Base
+      TAGS = ["mj-body"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "width" => "unit(px)",
+        "background-color" => "color"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "width" => "600px"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        return render_children(node, context, parent: parent) unless tag_name == "mj-body"
+
+        body_attrs = self.class.default_attributes.merge(attrs)
+        background_color = body_attrs["background-color"]
+        container_width = body_attrs["width"]
+
+        context[:background_color] = background_color
+        context[:container_width] = container_width
+
+        div_attributes = {
+          "aria-label" => context[:title].to_s.empty? ? nil : context[:title],
+          "aria-roledescription" => "email",
+          "class" => body_attrs["css-class"],
+          "role" => "article",
+          "lang" => context[:lang],
+          "dir" => context[:dir],
+          "style" => style_join("background-color" => background_color)
+        }
+        children = render_children(node, context, parent: "mj-body")
+
+        %(<div#{html_attrs(div_attributes)}>#{children}</div>)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Breakpoint < Base
+      TAGS = ["mj-breakpoint"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "width" => "unit(px)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "width" => "480px"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,157 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Button < Base
+      TAGS = ["mj-button"].freeze
+
+      DEFAULTS = {
+        "align" => "center",
+        "background-color" => "#414141",
+        "border" => "none",
+        "border-radius" => "3px",
+        "color" => "#ffffff",
+        "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+        "font-size" => "13px",
+        "font-weight" => "normal",
+        "inner-padding" => "10px 25px",
+        "line-height" => "120%",
+        "padding" => "10px 25px",
+        "target" => "_blank",
+        "text-decoration" => "none",
+        "text-transform" => "none",
+        "vertical-align" => "middle"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULTS.merge(attrs)
+
+        bg_color = a["background-color"]
+        inner_padding = a["inner-padding"]
+        vertical_align = a["vertical-align"]
+        href = a["href"]
+        tag = href ? "a" : "p"
+
+        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"],
+          "vertical-align" => vertical_align,
+          "class" => a["css-class"],
+          "style" => outer_td_style
+        }
+
+        table_style = style_join(
+          "border-collapse" => "separate",
+          "width" => a["width"],
+          "line-height" => "100%"
+        )
+
+        td_style = style_join(
+          "border" => a["border"],
+          "border-bottom" => a["border-bottom"],
+          "border-left" => a["border-left"],
+          "border-radius" => a["border-radius"],
+          "border-right" => a["border-right"],
+          "border-top" => a["border-top"],
+          "cursor" => "auto",
+          "font-style" => a["font-style"],
+          "height" => a["height"],
+          "mso-padding-alt" => inner_padding,
+          "text-align" => a["text-align"],
+          "background" => bg_color == "none" ? nil : bg_color
+        )
+        td_attrs = {
+          "align" => "center",
+          "bgcolor" => bg_color == "none" ? nil : bg_color,
+          "role" => "presentation",
+          "style" => td_style,
+          "valign" => vertical_align
+        }
+
+        link_style = style_join(
+          "display" => "inline-block",
+          "width" => calculate_a_width(a),
+          "background" => bg_color == "none" ? nil : bg_color,
+          "color" => a["color"],
+          "font-family" => a["font-family"],
+          "font-size" => a["font-size"],
+          "font-style" => a["font-style"],
+          "font-weight" => a["font-weight"],
+          "line-height" => a["line-height"],
+          "letter-spacing" => a["letter-spacing"],
+          "margin" => "0",
+          "text-decoration" => a["text-decoration"],
+          "text-transform" => a["text-transform"],
+          "padding" => inner_padding,
+          "mso-padding-alt" => "0px",
+          "border-radius" => a["border-radius"]
+        )
+        link_attrs = { "style" => link_style }
+        if tag == "a"
+          link_attrs["href"] = escape_attr(href)
+          link_attrs["name"] = a["name"]
+          link_attrs["rel"] = a["rel"]
+          link_attrs["title"] = a["title"]
+          link_attrs["target"] = a["target"]
+        else
+          link_attrs["name"] = a["name"]
+          link_attrs["title"] = a["title"]
+        end
+
+        content = raw_inner(node)
+        inner_tag = %(<#{tag}#{html_attrs(link_attrs)}>#{content}</#{tag}>)
+        table = %(<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="#{table_style}"><tbody><tr><td#{html_attrs(td_attrs)}>#{inner_tag}</td></tr></tbody></table>)
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{table}</td></tr>)
+      end
+
+      private
+
+      def calculate_a_width(attrs)
+        width = attrs["width"]
+        return nil unless width
+        return nil unless width =~ /^(\d+(?:\.\d+)?)\s*px$/
+
+        parsed_width = ::Regexp.last_match(1).to_f
+        inner_padding = attrs["inner-padding"] || "10px 25px"
+        parts = inner_padding.split(/\s+/)
+        left_pad  = shorthand_value(parts, :left).to_f
+        right_pad = shorthand_value(parts, :right).to_f
+        border_left  = parse_border_width(attrs["border-left"]  || attrs["border"] || "none")
+        border_right = parse_border_width(attrs["border-right"] || attrs["border"] || "none")
+
+        result = parsed_width - left_pad - right_pad - border_left - border_right
+        "#{result.to_i}px"
+      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 parse_border_width(border_str)
+        return 0 if border_str.nil? || border_str.strip == "none"
+
+        m = border_str.match(/(\d+(?:\.\d+)?)\s*px/)
+        m ? m[1].to_f : 0
+      end
+    end
+  end
+end