mjml-rb 0.3.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfa6cc54a797f8b4323003dbcfd92fa4ef02b1e0b118e58acd14bb8e901e502d
-  data.tar.gz: 12d0fb1d71e03a23811caac5b0417b7f32823b95870e47296ea51fd8bd713018
+  metadata.gz: a5afc17046611848190458b50e1b7d0670011e8f1e32a6723b63c7e7ff76029c
+  data.tar.gz: ff832c4861cd1c28d76f47e0f66f257e8fa1c956dd6e0836826df83be3e4782d
 SHA512:
-  metadata.gz: 689a1974e1c6e7477e202c3fb070c63eadf3b66617e2ea177feb6b45ae9d58cf9c1472dd7ddbe4e141d6583e67f83c93f76ca91c5f787d4a706241523c313361
-  data.tar.gz: ad73e16bd469bdfd98ccff031aca1796f99c460c87ab6435ba272492ffeb4ffff2b1e77f1019c368324286942cc561239e20b4219e6010efcac7d2066a945bb6
+  metadata.gz: e43bae28df235a80ad028bc43e37401c45c59c8e0d486f09e8d22faa786c1e18e62e696bde4cce668fcee4ea1c7d3d037cec3ec93d890b0e8e33404f98b776fe
+  data.tar.gz: c35f403ee71148fa10f6e9d794a61695f35f74201e561fba1afecb4686c71388c01f13bf69c19b799214102ad142a6f86281d922b3ed5eed2ed1e348b446f737

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

@@ -39,6 +39,7 @@ module MjmlRb
 
       def render(tag_name:, node:, context:, attrs:, parent:)
         width_pct = context.delete(:_column_width_pct) || 100.0
+        mobile_width = context.delete(:_column_mobile_width)
         css_class = attrs["css-class"]
         a = self.class.default_attributes.merge(attrs)
 
@@ -63,7 +64,7 @@ module MjmlRb
           "direction" => a["direction"],
           "display" => "inline-block",
           "vertical-align" => vertical_align,
-          "width" => "100%"
+          "width" => (mobile_width ? mobile_width_value(a, width_pct, context[:container_width]) : "100%")
         )
 
         column_markup =
@@ -168,6 +169,22 @@ module MjmlRb
         value && !value.empty?
       end
 
+      def mobile_width_value(attrs, width_pct, parent_width)
+        width = attrs["width"]
+
+        if present_attr?(width) && width.end_with?("%")
+          width
+        elsif present_attr?(width) && width.end_with?("px")
+          parent_width_px = parse_pixel_value(parent_width || "600px")
+          return "100%" if parent_width_px.zero?
+
+          percentage = (parse_pixel_value(width) / parent_width_px) * 100
+          "#{percentage.to_s.sub(/\.?0+$/, "")}%"
+        else
+          "#{width_pct.to_f.to_s.sub(/\.?0+$/, "")}%"
+        end
+      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)

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

@@ -77,6 +77,7 @@ module MjmlRb
               width_pct = widths[column_index] || 100.0
               column_index += 1
               context[:_column_width_pct] = width_pct
+              context[:_column_mobile_width] = true
               td_style = style_join(
                 "vertical-align" => resolved_attributes(child, context)["vertical-align"] || "top",
                 "width" => "#{(group_width_px * width_pct / 100.0).round}px"

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

@@ -238,11 +238,11 @@ module MjmlRb
       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"
+        px_length([content_width, 0].max)
       end
 
       def normalize_container_width(value)
-        "#{parse_unit_value(value)}px"
+        px_length(parse_unit_value(value))
       end
 
       def padding_side(attrs, side)
@@ -280,6 +280,17 @@ module MjmlRb
       def blank?(value)
         value.nil? || value.to_s.empty?
       end
+
+      def px_length(value)
+        "#{format_number(value)}px"
+      end
+
+      def format_number(value)
+        number = value.to_f
+        return number.to_i.to_s if number == number.to_i
+
+        number.to_s.sub(/\.?0+$/, "")
+      end
     end
   end
 end

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

@@ -64,7 +64,7 @@ module MjmlRb
           render_wrapper(node, context, attrs)
         else
           a = self.class.default_attributes.merge(attrs)
-          if a["full-width"] == "full-width"
+          if a["full-width"] == "full-width" && !context[:_inside_full_width_wrapper]
             render_full_width_section(node, context, a)
           else
             render_section(node, context, a)
@@ -254,8 +254,8 @@ module MjmlRb
 
         # Build v:fill attributes
         fill_pairs = [
-          ["origin", "#{v_origin_x}, #{v_origin_y}"],
-          ["position", "#{v_pos_x}, #{v_pos_y}"],
+          ["origin", "#{format_vml_number(v_origin_x)}, #{format_vml_number(v_origin_y)}"],
+          ["position", "#{format_vml_number(v_pos_x)}, #{format_vml_number(v_pos_y)}"],
           ["src", bg_url],
           ["color", bg_color],
           ["type", vml_type]
@@ -287,6 +287,13 @@ module MjmlRb
         end
       end
 
+      def format_vml_number(value)
+        number = value.to_f
+        return number.to_i.to_s if number == number.to_i
+
+        number.to_s.sub(/\.?0+$/, "")
+      end
+
       def vml_size_attributes(bg_size)
         case bg_size
         when "cover"
@@ -639,7 +646,9 @@ module MjmlRb
         box_width    = container_px - pad_left - pad_right - border_left - border_right
 
         previous_container_width = context[:container_width]
+        previous_full_width_wrapper = context[:_inside_full_width_wrapper]
         context[:container_width] = "#{box_width}px"
+        context[:_inside_full_width_wrapper] = full_width
 
         div_attrs = {"class" => (full_width ? nil : css_class), "style" => div_style}
         inner = merge_outlook_conditionals(render_wrapped_children_wrapper(node, context, container_px, a["gap"]))
@@ -686,6 +695,7 @@ module MjmlRb
         end
       ensure
         context[:container_width] = previous_container_width if previous_container_width
+        context[:_inside_full_width_wrapper] = previous_full_width_wrapper
       end
 
       # Wrap each child mj-section/mj-wrapper in an Outlook conditional <tr><td>.
@@ -703,7 +713,7 @@ module MjmlRb
             child_attrs = resolved_attributes(child, context)
             child_css   = child_attrs["css-class"]
             outlook_class = suffix_css_classes(child_css)
-            td_open  = %(<!--[if mso | IE]><tr><td class="#{escape_attr(outlook_class)}" width="#{container_px}px" ><![endif]-->)
+            td_open  = %(<!--[if mso | IE]><tr><td class="#{escape_attr(outlook_class)}" width="#{container_px}" ><![endif]-->)
             td_close = %(<!--[if mso | IE]></td></tr><![endif]-->)
             child_html = with_wrapper_child_gap(context, index.zero? ? nil : gap) do
               render_node(child, context, parent: "mj-wrapper")

data/lib/mjml-rb/renderer.rb

@@ -113,6 +113,7 @@ module MjmlRb
 
     def build_html_document(content, context)
       content = minify_outlook_conditionals(content)
+      content = apply_html_attributes_to_content(content, context)
       title = context[:title].to_s
       preview = context[:preview]
       head_raw = Array(context[:head_raw]).join("\n")
@@ -165,7 +166,6 @@ module MjmlRb
         </html>
       HTML
 
-      html = apply_html_attributes(html, context)
       html = apply_inline_styles(html, context)
       html = merge_outlook_conditionals(html)
       before_doctype.empty? ? html : "#{before_doctype}\n#{html}"
@@ -307,23 +307,33 @@ module MjmlRb
       end
     end
 
-    def apply_html_attributes(html, context)
+    def apply_html_attributes_to_content(content, context)
       rules = context[:html_attributes] || {}
-      return html if rules.empty?
+      return content if rules.empty?
 
-      document = Nokogiri::HTML(html)
+      root = html_attributes_fragment_root(content, context)
 
       rules.each do |selector, attrs|
         next if selector.empty? || attrs.empty?
 
-        select_nodes(document, selector).each do |node|
+        select_nodes(root, selector).each do |node|
           attrs.each do |name, value|
             node[name] = value.to_s
           end
         end
       end
 
-      document.to_html
+      root.inner_html
+    end
+
+    def html_attributes_fragment_root(content, context)
+      wrapper_attrs = {
+        "data-mjml-body-root" => "true",
+        "lang" => context[:lang],
+        "dir" => context[:dir]
+      }
+      fragment = Nokogiri::HTML::DocumentFragment.parse("<div#{html_attrs(wrapper_attrs)}>#{content}</div>")
+      fragment.at_css("div[data-mjml-body-root='true']")
     end
 
     def apply_inline_styles(html, context)

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.3.0".freeze
+  VERSION = "0.3.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Andrei Andriichuk