mjml-rb 0.2.13 → 0.2.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c54cb0ddf9071b81422853dfcca7e3748ed404b7ea1afba2a99ce9a42229d01
-  data.tar.gz: 7d2469230fa62b2dd52df43e3e8858f1a38aeb5964469af5ec8669182664e9f8
+  metadata.gz: 2d1dc49d39635e3f4530f642a8699646f3bff8e545213387f91d95bb461ea67d
+  data.tar.gz: 15139737ec96a78601bd7d0e0a992b8743060d4923664eea05462a76e70dc7d3
 SHA512:
-  metadata.gz: 8e349fdbec211923111e8ce2f7a593f46f18308aef3461c531dc3fa6ccfdf97d024c8b181e0289c0b8819db272d49fd3c45c2130298373a8867f6f8f19f14916
-  data.tar.gz: 9603224d7e49fc263441767a0d3a289bd5bbba4cdf93afebc07b1dd7dd0416f8cd5e0161843d50d31e2f21b6390be8a946569027c52f19ab4d6605442544507b
+  metadata.gz: 486e95fb106f03ebb1ae929ec548996f9d53868b360fcff23cfd0aa28d9e4240e3a3181f611b3270837c9012e523c32f3089c0ebe3a82e9bd6e067735a955bec
+  data.tar.gz: 5bf0eb72f669aed9eb59dc1b8fbe16563082392bbc8d05e2f8d4ce4098a492606303cea65692757fdf5b8eed2c0fc2be7080daeac73f6f242b0a1dfc1c0d5551

data/README.md

@@ -44,7 +44,7 @@ The table below tracks current JS-to-Ruby migration status for MJML components i
 | `mj-section` | migrated | Implemented in `section.rb`. |
 | `mj-wrapper` | migrated | Implemented via `section.rb`. |
 | `mj-column` | migrated | Implemented in `column.rb`. |
-| `mj-group` | migrated | Rendered directly by the renderer. |
+| `mj-group` | migrated | Implemented in `group.rb`, including width-aware child rendering and Outlook table wrappers. |
 | `mj-text` | migrated | Implemented in `text.rb`. |
 | `mj-image` | migrated | Implemented in `image.rb`. |
 | `mj-button` | migrated | Implemented in `button.rb`. |

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

@@ -0,0 +1,134 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Group < Base
+      TAGS = ["mj-group"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "background-color" => "color",
+        "direction" => "enum(ltr,rtl)",
+        "vertical-align" => "enum(top,bottom,middle)",
+        "width" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "direction" => "ltr"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        width_pct = context.delete(:_column_width_pct) || 100.0
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        css_class = a["css-class"]
+
+        pct_str = width_pct.to_f.to_s.sub(/\.?0+$/, "")
+        class_suffix = pct_str.gsub(".", "-")
+        context[:column_widths][class_suffix] = pct_str if context[:column_widths]
+
+        group_class = "mj-column-per-#{class_suffix} mj-outlook-group-fix"
+        group_class = "#{group_class} #{css_class}" if css_class && !css_class.empty?
+
+        group_width = group_container_width(context, a, width_pct)
+        div_style = style_join(
+          "font-size" => "0",
+          "line-height" => "0",
+          "text-align" => "left",
+          "display" => "inline-block",
+          "width" => "100%",
+          "direction" => a["direction"],
+          "vertical-align" => a["vertical-align"],
+          "background-color" => a["background-color"]
+        )
+
+        inner = with_group_container_width(context, group_width) do
+          render_group_children(node, context, a, group_width)
+        end
+
+        %(<div class="#{escape_attr(group_class)}" style="#{div_style}">#{inner}</div>)
+      end
+
+      private
+
+      def render_group_children(node, context, attrs, group_width)
+        columns = node.element_children.select { |child| child.tag_name == "mj-column" }
+        widths = renderer.send(:compute_column_widths, columns, context)
+        group_width_px = parse_pixel_value(group_width)
+        group_bg = attrs["background-color"]
+        table_attrs = {
+          "bgcolor" => (group_bg == "none" ? nil : group_bg),
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation"
+        }
+
+        open_table = %(<!--[if mso | IE]><table#{html_attrs(table_attrs)}><tr><![endif]-->)
+        close_table = %(<!--[if mso | IE]></tr></table><![endif]-->)
+        column_index = 0
+
+        body = with_inherited_mj_class(context, node) do
+          node.children.map do |child|
+            case child.tag_name
+            when "mj-column"
+              width_pct = widths[column_index] || 100.0
+              column_index += 1
+              context[:_column_width_pct] = width_pct
+              td_style = style_join(
+                "vertical-align" => resolved_attributes(child, context)["vertical-align"] || "top",
+                "width" => "#{(group_width_px * width_pct / 100.0).round}px"
+              )
+              td_open = %(<!--[if mso | IE]><td#{html_attrs("style" => td_style)}><![endif]-->)
+              td_close = %(<!--[if mso | IE]></td><![endif]-->)
+              "#{td_open}#{render_node(child, context, parent: "mj-group")}#{td_close}"
+            when "mj-raw"
+              render_node(child, context, parent: "mj-group")
+            else
+              render_node(child, context, parent: "mj-group")
+            end
+          end.join("\n")
+        end
+
+        "#{open_table}#{body}#{close_table}"
+      end
+
+      def with_group_container_width(context, width)
+        previous = context[:container_width]
+        context[:container_width] = width
+        yield
+      ensure
+        context[:container_width] = previous
+      end
+
+      def group_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
+
+        "#{[raw_width, 0].max}px"
+      end
+
+      def present_attr?(value)
+        value && !value.empty?
+      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/section.rb

@@ -233,12 +233,8 @@ module MjmlRb
             td_open  = %(<!--[if mso | IE]><td class="" style="vertical-align:#{v_align};width:#{col_px}px;" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td><![endif]-->)
 
-            col_html = if col.tag_name == "mj-group"
-                         renderer.send(:render_group, col, context, widths[i])
-                       else
-                         context[:_column_width_pct] = widths[i]
-                         render_node(col, context, parent: "mj-section")
-                       end
+            context[:_column_width_pct] = widths[i]
+            col_html = render_node(col, context, parent: "mj-section")
 
             "#{td_open}\n#{col_html}\n#{td_close}"
           end

data/lib/mjml-rb/renderer.rb

@@ -7,6 +7,7 @@ require_relative "components/breakpoint"
 require_relative "components/button"
 require_relative "components/carousel"
 require_relative "components/carousel_image"
+require_relative "components/group"
 require_relative "components/head"
 require_relative "components/hero"
 require_relative "components/image"
@@ -163,24 +164,7 @@ module MjmlRb
       if (component = component_for(node.tag_name))
         return component.render(tag_name: node.tag_name, node: node, context: context, attrs: attrs, parent: parent)
       end
-
-      case node.tag_name
-      when "mj-group"
-        render_group(node, context)
-      else
-        render_children(node, context, parent: node.tag_name)
-      end
-    end
-
-    def render_group(node, context, width_pct = 100)
-      items = node.element_children.select { |e| e.tag_name == "mj-column" }
-      widths = compute_column_widths(items, context)
-      with_inherited_mj_class(context, node) do
-        items.each_with_index.map do |item, i|
-          context[:_column_width_pct] = widths[i]
-          render_node(item, context, parent: "mj-group")
-        end.join("\n")
-      end
+      render_children(node, context, parent: node.tag_name)
     end
 
     def compute_column_widths(columns, context)
@@ -444,6 +428,7 @@ module MjmlRb
         register_component(registry, Components::Button.new(self))
         register_component(registry, Components::Carousel.new(self))
         register_component(registry, Components::CarouselImage.new(self))
+        register_component(registry, Components::Group.new(self))
         register_component(registry, Components::Hero.new(self))
         register_component(registry, Components::Image.new(self))
         register_component(registry, Components::Navbar.new(self))

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.13".freeze
+  VERSION = "0.2.14".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.2.13
+  version: 0.2.14
 platform: ruby
 authors:
 - Andrei Andriichuk
@@ -63,6 +63,7 @@ files:
 - lib/mjml-rb/components/carousel_image.rb
 - lib/mjml-rb/components/column.rb
 - lib/mjml-rb/components/divider.rb
+- lib/mjml-rb/components/group.rb
 - lib/mjml-rb/components/head.rb
 - lib/mjml-rb/components/hero.rb
 - lib/mjml-rb/components/html_attributes.rb