emjay 0.1.0

data/lib/emjay/components/body/mj_navbar.rb

@@ -0,0 +1,187 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+require_relative "../../helpers/conditional_tag"
+require_relative "../../helpers/make_lower_breakpoint"
+require_relative "../../helpers/gen_random_hex_string"
+
+module Emjay
+  module Components
+    class MjNavbar < BodyComponent
+      def self.component_name
+        "mj-navbar"
+      end
+
+      def self.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"
+        }
+      end
+
+      def self.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,%,)"
+        }
+      end
+
+      def head_style(breakpoint)
+        "\n      noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }\n\n      @media only screen and (max-width:#{MakeLowerBreakpoint.call(breakpoint)}) {\n        .mj-menu-checkbox[type=\"checkbox\"] ~ .mj-inline-links { display:none!important; }\n        .mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-inline-links,\n        .mj-menu-checkbox[type=\"checkbox\"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }\n        .mj-menu-checkbox[type=\"checkbox\"] ~ .mj-inline-links > a { display:block!important; }\n        .mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }\n        .mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }\n      }\n    "
+      end
+
+      def get_styles
+        {
+          div: {},
+          label: {
+            "display" => "block",
+            "cursor" => "pointer",
+            "mso-hide" => "all",
+            "-moz-user-select" => "none",
+            "user-select" => "none",
+            "color" => get_attribute("ico-color"),
+            "font-size" => get_attribute("ico-font-size"),
+            "font-family" => get_attribute("ico-font-family"),
+            "text-transform" => get_attribute("ico-text-transform"),
+            "text-decoration" => get_attribute("ico-text-decoration"),
+            "line-height" => get_attribute("ico-line-height"),
+            "padding" => get_attribute("ico-padding"),
+            "padding-top" => get_attribute("ico-padding-top"),
+            "padding-right" => get_attribute("ico-padding-right"),
+            "padding-bottom" => get_attribute("ico-padding-bottom"),
+            "padding-left" => get_attribute("ico-padding-left")
+          },
+          trigger: {
+            "display" => "none",
+            "max-height" => "0px",
+            "max-width" => "0px",
+            "font-size" => "0px",
+            "overflow" => "hidden"
+          },
+          icoOpen: {
+            "mso-hide" => "all"
+          },
+          icoClose: {
+            "display" => "none",
+            "mso-hide" => "all"
+          }
+        }
+      end
+
+      def render
+        hamburger_html = (get_attribute("hamburger") == "hamburger") ? render_hamburger : ""
+
+        div_attrs = html_attributes(
+          class: "mj-inline-links",
+          style: :div
+        )
+
+        children = @props[:children] || []
+        children_html = render_children(children,
+          attributes: {"navbarBaseUrl" => get_attribute("base-url")})
+
+        align = get_attribute("align")
+
+        <<~HTML
+          #{hamburger_html}
+            <div
+              #{div_attrs}
+            >
+            #{ConditionalTag.conditional_tag("<table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"#{align}\"><tr>")}
+              #{children_html}
+              #{ConditionalTag.conditional_tag("</tr></table>")}
+            </div>
+        HTML
+      end
+
+      private
+
+      def render_hamburger
+        label_key = GenRandomHexString.call(16)
+
+        input_html = ConditionalTag.mso_conditional_tag(
+          "<input type=\"checkbox\" id=\"#{label_key}\" class=\"mj-menu-checkbox\" style=\"display:none !important; max-height:0; visibility:hidden;\" />",
+          negation: true
+        )
+
+        trigger_attrs = html_attributes(
+          class: "mj-menu-trigger",
+          style: :trigger
+        )
+
+        label_attrs = html_attributes(
+          for: label_key,
+          class: "mj-menu-label",
+          style: :label,
+          align: get_attribute("ico-align")
+        )
+
+        ico_open_attrs = html_attributes(
+          class: "mj-menu-icon-open",
+          style: :icoOpen
+        )
+
+        ico_close_attrs = html_attributes(
+          class: "mj-menu-icon-close",
+          style: :icoClose
+        )
+
+        <<~HTML
+          #{input_html}
+          <div
+            #{trigger_attrs}
+          >
+            <label
+              #{label_attrs}
+            >
+              <span
+                #{ico_open_attrs}
+              >
+                #{get_attribute("ico-open")}
+              </span>
+              <span
+                #{ico_close_attrs}
+              >
+                #{get_attribute("ico-close")}
+              </span>
+            </label>
+          </div>
+        HTML
+      end
+    end
+  end
+
+  Registry.register(Components::MjNavbar)
+end

data/lib/emjay/components/body/mj_navbar_link.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+require_relative "../../helpers/conditional_tag"
+require_relative "../../helpers/suffix_css_classes"
+
+module Emjay
+  module Components
+    class MjNavbarLink < BodyComponent
+      def self.component_name
+        "mj-navbar-link"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.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"
+        }
+      end
+
+      def self.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" => "unitWithNegative(px,em)",
+          "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"
+        }
+      end
+
+      def get_styles
+        {
+          a: {
+            "display" => "inline-block",
+            "color" => get_attribute("color"),
+            "font-family" => get_attribute("font-family"),
+            "font-size" => get_attribute("font-size"),
+            "font-style" => get_attribute("font-style"),
+            "font-weight" => get_attribute("font-weight"),
+            "letter-spacing" => get_attribute("letter-spacing"),
+            "line-height" => get_attribute("line-height"),
+            "text-decoration" => get_attribute("text-decoration"),
+            "text-transform" => get_attribute("text-transform"),
+            "padding" => get_attribute("padding"),
+            "padding-top" => get_attribute("padding-top"),
+            "padding-left" => get_attribute("padding-left"),
+            "padding-right" => get_attribute("padding-right"),
+            "padding-bottom" => get_attribute("padding-bottom")
+          },
+          td: {
+            "padding" => get_attribute("padding"),
+            "padding-top" => get_attribute("padding-top"),
+            "padding-left" => get_attribute("padding-left"),
+            "padding-right" => get_attribute("padding-right"),
+            "padding-bottom" => get_attribute("padding-bottom")
+          }
+        }
+      end
+
+      def render
+        td_attrs = html_attributes(
+          style: :td,
+          class: SuffixCssClasses.call(get_attribute("css-class"), "outlook")
+        )
+
+        <<~HTML
+          #{ConditionalTag.conditional_tag("<td#{td_attrs}>")}
+            #{render_content}
+            #{ConditionalTag.conditional_tag("</td>")}
+        HTML
+      end
+
+      private
+
+      def render_content
+        href = get_attribute("href")
+        navbar_base_url = get_attribute("navbarBaseUrl")
+        link = navbar_base_url ? "#{navbar_base_url}#{href}" : href
+
+        css_class = get_attribute("css-class")
+        css_suffix = css_class ? " #{css_class}" : ""
+
+        a_attrs = html_attributes(
+          class: "mj-link#{css_suffix}",
+          href: link,
+          rel: get_attribute("rel"),
+          target: get_attribute("target"),
+          name: get_attribute("name"),
+          style: :a
+        )
+
+        <<~HTML
+          <a
+            #{a_attrs}
+          >
+            #{get_content}
+          </a>
+        HTML
+      end
+    end
+  end
+
+  Registry.register(Components::MjNavbarLink)
+end

data/lib/emjay/components/body/mj_raw.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjRaw < BodyComponent
+      def self.component_name
+        "mj-raw"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.raw_element?
+        true
+      end
+
+      def self.allowed_attributes
+        {
+          "position" => "enum(file-start)"
+        }
+      end
+
+      def render
+        get_content
+      end
+    end
+  end
+
+  Registry.register(Components::MjRaw)
+end