mjml-rb 0.2.1

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

@@ -0,0 +1,183 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Image < Base
+      TAGS = ["mj-image"].freeze
+
+      DEFAULTS = {
+        "alt" => "",
+        "align" => "center",
+        "border" => "0",
+        "height" => "auto",
+        "padding" => "10px 25px",
+        "target" => "_blank",
+        "font-size" => "13px"
+      }.freeze
+
+      HEAD_STYLE = <<~CSS.freeze
+        @media only screen and (max-width:480px) {
+          table.mj-full-width-mobile { width: 100% !important; }
+          td.mj-full-width-mobile { width: auto !important; }
+        }
+      CSS
+
+      def tags
+        TAGS
+      end
+
+      def head_style
+        HEAD_STYLE
+      end
+
+      def head_style_tags
+        ["mj-image"]
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULTS.merge(attrs)
+
+        fluid = a["fluid-on-mobile"] == "true"
+        full_width = a["full-width"] == "full-width"
+        content_width = get_content_width(a, context)
+
+        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
+        }
+
+        table_style = style_join(
+          "min-width" => full_width ? "100%" : nil,
+          "max-width" => full_width ? "100%" : nil,
+          "width" => full_width ? "#{content_width}px" : nil,
+          "border-collapse" => "collapse",
+          "border-spacing" => "0px"
+        )
+        table_attrs = {
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "style" => table_style,
+          "class" => fluid ? "mj-full-width-mobile" : nil
+        }
+
+        td_attrs = {
+          "style" => style_join("width" => full_width ? nil : "#{content_width}px"),
+          "class" => fluid ? "mj-full-width-mobile" : nil,
+          "width" => full_width ? nil : content_width.to_i.to_s,
+          "height" => height_attribute(a["height"]),
+          "align" => a["align"]
+        }
+
+        img_style = style_join(
+          "border" => a["border"],
+          "border-left" => a["border-left"],
+          "border-right" => a["border-right"],
+          "border-top" => a["border-top"],
+          "border-bottom" => a["border-bottom"],
+          "border-radius" => a["border-radius"],
+          "display" => "block",
+          "outline" => "none",
+          "text-decoration" => "none",
+          "height" => a["height"],
+          "max-height" => a["max-height"],
+          "min-width" => full_width ? "100%" : nil,
+          "width" => "100%",
+          "max-width" => full_width ? "100%" : nil,
+          "font-size" => a["font-size"]
+        )
+
+        img_attrs = {
+          "alt" => a["alt"],
+          "src" => a["src"],
+          "srcset" => a["srcset"],
+          "sizes" => a["sizes"],
+          "style" => img_style,
+          "title" => a["title"],
+          "width" => img_width_attribute(a, content_width),
+          "usemap" => a["usemap"],
+          "height" => height_attribute(a["height"])
+        }
+
+        img_tag = "<img#{html_attrs(img_attrs)} />"
+
+        inner = if a["href"]
+                  link_attrs = {
+                    "href" => a["href"],
+                    "target" => a["target"],
+                    "rel" => a["rel"],
+                    "name" => a["name"],
+                    "title" => a["title"]
+                  }
+                  "<a#{html_attrs(link_attrs)}>#{img_tag}</a>"
+                else
+                  img_tag
+                end
+
+        table = %(<table#{html_attrs(table_attrs)}><tbody><tr><td#{html_attrs(td_attrs)}>#{inner}</td></tr></tbody></table>)
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{table}</td></tr>)
+      end
+
+      private
+
+      def height_attribute(height)
+        return if height.nil? || height.empty?
+
+        height == "auto" ? "auto" : height.to_i.to_s
+      end
+
+      def img_width_attribute(attrs, content_width)
+        return "auto" if attrs["width"] && attrs["height"] && attrs["height"] != "auto"
+        return attrs["width"].to_i.to_s if attrs["width"] && attrs["width"] =~ /^(\d+(?:\.\d+)?)\s*px$/
+
+        content_width.to_i.to_s
+      end
+
+      def get_content_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
+
+        box = container_width - pad_left - pad_right
+
+        if attrs["width"] && attrs["width"] =~ /^(\d+(?:\.\d+)?)\s*px$/
+          [box, ::Regexp.last_match(1).to_f].min.to_i
+        else
+          box.to_i
+        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
+    end
+  end
+end

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

@@ -0,0 +1,279 @@
+require "securerandom"
+
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Navbar < Base
+      TAGS = %w[mj-navbar mj-navbar-link].freeze
+
+      NAVBAR_ALLOWED_ATTRIBUTES = {
+        "align" => "enum(left,center,right)",
+        "base-url" => "string",
+        "hamburger" => "string",
+        "ico-align" => "enum(left,center,right)",
+        "ico-open" => "string",
+        "ico-close" => "string",
+        "ico-color" => "color",
+        "ico-font-size" => "unit(px,%)",
+        "ico-font-family" => "string",
+        "ico-text-transform" => "string",
+        "ico-padding" => "unit(px,%){1,4}",
+        "ico-padding-left" => "unit(px,%)",
+        "ico-padding-top" => "unit(px,%)",
+        "ico-padding-right" => "unit(px,%)",
+        "ico-padding-bottom" => "unit(px,%)",
+        "padding" => "unit(px,%){1,4}",
+        "padding-left" => "unit(px,%)",
+        "padding-top" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-bottom" => "unit(px,%)",
+        "ico-text-decoration" => "string",
+        "ico-line-height" => "unit(px,%)"
+      }.freeze
+
+      NAVBAR_LINK_ALLOWED_ATTRIBUTES = {
+        "color" => "color",
+        "font-family" => "string",
+        "font-size" => "unit(px)",
+        "font-style" => "string",
+        "font-weight" => "string",
+        "href" => "string",
+        "name" => "string",
+        "target" => "string",
+        "rel" => "string",
+        "letter-spacing" => "string",
+        "line-height" => "unit(px,%)",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-top" => "unit(px,%)",
+        "padding" => "unit(px,%){1,4}",
+        "text-decoration" => "string",
+        "text-transform" => "string"
+      }.freeze
+
+      NAVBAR_DEFAULT_ATTRIBUTES = {
+        "align" => "center",
+        "base-url" => nil,
+        "hamburger" => nil,
+        "ico-align" => "center",
+        "ico-open" => "&#9776;",
+        "ico-close" => "&#8855;",
+        "ico-color" => "#000000",
+        "ico-font-size" => "30px",
+        "ico-font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+        "ico-text-transform" => "uppercase",
+        "ico-padding" => "10px",
+        "ico-text-decoration" => "none",
+        "ico-line-height" => "30px"
+      }.freeze
+
+      NAVBAR_LINK_DEFAULT_ATTRIBUTES = {
+        "color" => "#000000",
+        "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+        "font-size" => "13px",
+        "font-weight" => "normal",
+        "line-height" => "22px",
+        "padding" => "15px 10px",
+        "target" => "_blank",
+        "text-decoration" => "none",
+        "text-transform" => "uppercase"
+      }.freeze
+
+      class << self
+        def allowed_attributes_for(tag_name)
+          tag_name == "mj-navbar-link" ? NAVBAR_LINK_ALLOWED_ATTRIBUTES : NAVBAR_ALLOWED_ATTRIBUTES
+        end
+
+        def allowed_attributes
+          NAVBAR_ALLOWED_ATTRIBUTES
+        end
+      end
+
+      def tags
+        TAGS
+      end
+
+      def head_style(breakpoint)
+        lower_breakpoint = make_lower_breakpoint(breakpoint)
+
+        <<~CSS
+          noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }
+
+          @media only screen and (max-width:#{lower_breakpoint}) {
+            .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links { display:none!important; }
+            .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-inline-links,
+            .mj-menu-checkbox[type="checkbox"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }
+            .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links > a { display:block!important; }
+            .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }
+            .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }
+          }
+        CSS
+      end
+
+      def head_style_tags
+        ["mj-navbar"]
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        case tag_name
+        when "mj-navbar"
+          render_navbar(node, context, attrs)
+        when "mj-navbar-link"
+          render_navbar_link(node, context, attrs, parent: parent)
+        end
+      end
+
+      private
+
+      def render_navbar(node, context, attrs)
+        a = NAVBAR_DEFAULT_ATTRIBUTES.merge(attrs)
+        align = a["align"]
+
+        outer_td_style = style_join(
+          "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"],
+          "text-align" => align,
+          "word-break" => "break-word"
+        )
+        outer_td_attrs = {
+          "align" => align,
+          "class" => a["css-class"],
+          "style" => outer_td_style
+        }
+
+        previous_base_url = context[:navbar_base_url]
+        context[:navbar_base_url] = a["base-url"]
+
+        inner = +""
+        inner << render_hamburger(a) if a["hamburger"] == "hamburger"
+        inner << %(<div class="mj-inline-links" style="width:100%;text-align:#{escape_attr(align)};">)
+        inner << %(<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="#{escape_attr(align)}"><tr><![endif]-->)
+        inner << render_navbar_children(node, context)
+        inner << %(<!--[if mso | IE]></tr></table><![endif]-->)
+        inner << %(</div>)
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{inner}</td></tr>)
+      ensure
+        context[:navbar_base_url] = previous_base_url
+      end
+
+      def render_navbar_children(node, context)
+        node.element_children.map do |child|
+          case child.tag_name
+          when "mj-navbar-link", "mj-raw"
+            render_node(child, context, parent: "mj-navbar")
+          else
+            ""
+          end
+        end.join
+      end
+
+      def render_navbar_link(node, context, attrs, parent:)
+        a = NAVBAR_LINK_DEFAULT_ATTRIBUTES.merge(attrs)
+        href = joined_href(a["href"], context[:navbar_base_url])
+        css_class = a["css-class"]
+        anchor_class = ["mj-link", css_class].compact.join(" ")
+        td_class = suffix_css_classes(css_class, "outlook")
+
+        anchor_style = style_join(
+          "display" => "inline-block",
+          "color" => a["color"],
+          "font-family" => a["font-family"],
+          "font-size" => a["font-size"],
+          "font-style" => a["font-style"],
+          "font-weight" => a["font-weight"],
+          "letter-spacing" => a["letter-spacing"],
+          "line-height" => a["line-height"],
+          "text-decoration" => a["text-decoration"],
+          "text-transform" => a["text-transform"],
+          "padding" => a["padding"],
+          "padding-top" => a["padding-top"],
+          "padding-left" => a["padding-left"],
+          "padding-right" => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"]
+        )
+        link_attrs = {
+          "class" => anchor_class,
+          "href" => href,
+          "rel" => a["rel"],
+          "target" => a["target"],
+          "name" => a["name"],
+          "style" => anchor_style
+        }
+
+        content = raw_inner(node)
+        link = %(<a#{html_attrs(link_attrs)}>#{content}</a>)
+        return link unless parent == "mj-navbar"
+
+        td_style = style_join(
+          "padding" => a["padding"],
+          "padding-top" => a["padding-top"],
+          "padding-left" => a["padding-left"],
+          "padding-right" => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"]
+        )
+
+        %(<!--[if mso | IE]><td#{html_attrs("class" => td_class, "style" => td_style)}><![endif]-->#{link}<!--[if mso | IE]></td><![endif]-->)
+      end
+
+      def render_hamburger(attrs)
+        label_key = SecureRandom.hex(8)
+        trigger_style = style_join(
+          "display" => "none",
+          "max-height" => "0px",
+          "max-width" => "0px",
+          "font-size" => "0px",
+          "overflow" => "hidden"
+        )
+        label_style = style_join(
+          "display" => "block",
+          "cursor" => "pointer",
+          "mso-hide" => "all",
+          "-moz-user-select" => "none",
+          "user-select" => "none",
+          "color" => attrs["ico-color"],
+          "font-size" => attrs["ico-font-size"],
+          "font-family" => attrs["ico-font-family"],
+          "text-transform" => attrs["ico-text-transform"],
+          "text-decoration" => attrs["ico-text-decoration"],
+          "line-height" => attrs["ico-line-height"],
+          "padding" => attrs["ico-padding"],
+          "padding-top" => attrs["ico-padding-top"],
+          "padding-right" => attrs["ico-padding-right"],
+          "padding-bottom" => attrs["ico-padding-bottom"],
+          "padding-left" => attrs["ico-padding-left"]
+        )
+
+        checkbox = %(<!--[if !mso]><!--><input type="checkbox" id="#{escape_attr(label_key)}" class="mj-menu-checkbox" style="display:none !important; max-height:0; visibility:hidden;" /><!--<![endif]-->)
+        trigger = %(<div class="mj-menu-trigger" style="#{trigger_style}"><label for="#{escape_attr(label_key)}" class="mj-menu-label" align="#{escape_attr(attrs["ico-align"])}" style="#{label_style}"><span class="mj-menu-icon-open" style="mso-hide:all;">#{attrs["ico-open"]}</span><span class="mj-menu-icon-close" style="display:none;mso-hide:all;">#{attrs["ico-close"]}</span></label></div>)
+
+        "#{checkbox}#{trigger}"
+      end
+
+      def joined_href(href, base_url)
+        return href if href.nil? || href.empty? || base_url.nil? || base_url.empty?
+
+        "#{base_url}#{href}"
+      end
+
+      def suffix_css_classes(classes, suffix)
+        return nil if classes.nil? || classes.empty?
+
+        classes.split(/\s+/).map { |klass| "#{klass}-#{suffix}" }.join(" ")
+      end
+
+      def make_lower_breakpoint(breakpoint)
+        pixels = breakpoint.to_s[/\d+/]
+        return breakpoint if pixels.nil?
+
+        "#{pixels.to_i - 1}px"
+      end
+    end
+  end
+end