[TASK] add hero image option to unicard-left-right module

Resultify · Aug 5, 2024 · 22df81a · 22df81a
1 parent 7fb4697
commit 22df81a
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 4 deletions.
diff --git a/theme/css/macros.css b/theme/css/macros.css
@@ -71,3 +71,37 @@
     {{data.background_image.css}}
   {% endif %}
 {%- endmacro -%}
+
+
+{%- macro css_image_hero_background_macro(data) -%}
+  {%- if data.background_image.background_position == 'TOP_LEFT' -%}
+    {%- set background_position = 'left top' -%}
+  {%- elif data.background_image.background_position == 'TOP_CENTER' -%}
+    {%- set background_position = 'center top' -%}
+  {%- elif data.background_image.background_position == 'TOP_RIGHT' -%}
+    {%- set background_position = 'right top' -%}
+  {%- elif data.background_image.background_position == 'MIDDLE_LEFT' -%}
+    {%- set background_position = 'left center' -%}
+  {%- elif data.background_image.background_position == 'MIDDLE_CENTER' -%}
+    {%- set background_position = 'center center' -%}
+  {%- elif data.background_image.background_position == 'MIDDLE_RIGHT' -%}
+    {%- set background_position = 'right center' -%}
+  {%- elif data.background_image.background_position == 'BOTTOM_LEFT' -%}
+    {%- set background_position = 'left bottom' -%}
+  {%- elif data.background_image.background_position == 'BOTTOM_CENTER' -%}
+    {%- set background_position = 'center bottom' -%}
+  {%- elif data.background_image.background_position == 'BOTTOM_RIGHT' -%}
+    {%- set background_position = 'right bottom' -%}
+  {%- endif -%}
+  {% if data.background_image_overlay.css and data.background_image_overlay_type == 'color' %}
+    background: linear-gradient({{data.background_image_overlay.css}}, {{data.background_image_overlay.css}}), url({{resize_image_url(data.background_image.src, 0, 0, 1600)}});
+    background-size: {{data.background_image.background_size}};
+    background-position: {{background_position}};
+  {% elif data.background_image_overlay_gradient.css and data.background_image_overlay_type == 'gradient' %}
+    background: {{data.background_image_overlay_gradient.css}}, url({{resize_image_url(data.background_image.src, 0, 0, 1600)}});
+    background-size: {{data.background_image.background_size}};
+    background-position: {{background_position}};
+  {% else %}
+    {{data.background_image.css}}
+  {% endif %}
+{%- endmacro -%}
diff --git a/theme/modules/unicard-left-right.module/fields.js b/theme/modules/unicard-left-right.module/fields.js
@@ -220,6 +220,17 @@ init(
         }
       }
     }),
+    fi.spacing('', 'mobile_spacing', {
+      inline_help_text: 'Spacing on <span style="color:#007a8c;font-weight:700;font-size:14px;">Mobile</span>',
+      visibility: {
+        controlling_field_path: 'style.hero_image_mode',
+        operator: 'EQUAL',
+        controlling_value_regex: 'true',
+        hidden_subfields: {
+          margin: true
+        }
+      }
+    }),
     fi.border('Border', 'border'),
     fi.number('Border radius', 'border_radius', {
       min: 0,
@@ -247,6 +258,103 @@ init(
         showMobileAlignment: true,
         showVerticalAlignment: true
       })
+    ),
+    fi.boolean('Hero Image mode', 'hero_image_mode', {
+      inline_help_text: 'Enable hero image mode',
+      help_text: 'Hero image mode will add an optimized background image to the module wrapper',
+      display: 'toggle',
+      default: false
+    }),
+    group('Hero Image', 'hero_image_group',
+      {
+        visibility: {
+          controlling_field_path: 'style.hero_image_mode',
+          operator: 'EQUAL',
+          controlling_value_regex: 'true'
+        }
+      },
+      fi.choice('Background type', 'background_type', {
+        placeholder: 'No background',
+        choices: [
+          ['background_color', 'Background color'],
+          ['background_image', 'Background image'],
+          ['background_gradient', 'Background gradient']
+        ]
+      }),
+      fi.color('Background color', 'background_color', {
+        visibility: {
+          controlling_field_path: 'style.hero_image_group.background_type',
+          operator: 'EQUAL',
+          controlling_value_regex: 'background_color'
+        }
+      }),
+      fi.backgroundimage('Background image', 'background_image', {
+        visibility: {
+          controlling_field_path: 'style.hero_image_group.background_type',
+          operator: 'EQUAL',
+          controlling_value_regex: 'background_image'
+        }
+      }),
+      fi.choice('Background image overlay type', 'background_image_overlay_type', {
+        visibility: {
+          controlling_field_path: 'style.hero_image_group.background_type',
+          operator: 'EQUAL',
+          controlling_value_regex: 'background_image'
+        },
+        placeholder: 'No overlay',
+        choices: [
+          ['color', 'Color'],
+          ['gradient', 'Gradient']
+        ]
+      }),
+      fi.color('Background image overlay', 'background_image_overlay', {
+        visibility_rules: 'ADVANCED',
+        advanced_visibility: {
+          boolean_operator: 'AND',
+          criteria: [
+            {
+              controlling_field_path: 'style.hero_image_group.background_type',
+              operator: 'EQUAL',
+              controlling_value_regex: 'background_image'
+            },
+            {
+              controlling_field_path: 'style.hero_image_group.background_image_overlay_type',
+              operator: 'EQUAL',
+              controlling_value_regex: 'color'
+            }
+          ]
+        }
+      }),
+      fi.gradient('Background image overlay gradient', 'background_image_overlay_gradient', {
+        visibility_rules: 'ADVANCED',
+        advanced_visibility: {
+          boolean_operator: 'AND',
+          criteria: [
+            {
+              controlling_field_path: 'style.hero_image_group.background_type',
+              operator: 'EQUAL',
+              controlling_value_regex: 'background_image'
+            },
+            {
+              controlling_field_path: 'style.hero_image_group.background_image_overlay_type',
+              operator: 'EQUAL',
+              controlling_value_regex: 'gradient'
+            }
+          ]
+        }
+      }),
+      fi.gradient('Background gradient', 'background_gradient', {
+        visibility: {
+          controlling_field_path: 'style.hero_image_group.background_type',
+          operator: 'EQUAL',
+          controlling_value_regex: 'background_gradient'
+        }
+      }),
+      fi.number('Container width', 'container_width', {
+        min: 0,
+        suffix: 'px',
+        display_width: 'half_width'
+      })
     )
   )
 )
diff --git a/theme/modules/unicard-left-right.module/module.css b/theme/modules/unicard-left-right.module/module.css
@@ -1,4 +1,7 @@
-/* css */
+.unicard-left-right-hero-wrp {
+  background-color: var(--unicard-l-r-hero-background);
+}
+
 .unicard-left-right {
   display: flex;
   min-height: 100%;
@@ -12,6 +15,11 @@
   padding-bottom: var(--unicard-l-r-padding-bottom);
 }
 
+.unicard-left-right-hero-wrp > .unicard-left-right {
+  max-width: var(--custom-max-width, var(--max-width));
+  margin: 0 auto;
+}
+
 .unicard-left-right > .unicard {
   flex: 1 1 0;
 }
@@ -20,6 +28,10 @@
   .unicard-left-right {
     gap: var(--mobile-gap);
     flex-direction: var(--mobile-direction);
+    padding-left: var(--unicard-l-r-mobile-padding-left);
+    padding-right: var(--unicard-l-r-mobile-padding-right);
+    padding-top: var(--unicard-l-r-mobile-padding-top);
+    padding-bottom: var(--unicard-l-r-mobile-padding-bottom);
   }
   .unicard-left-right > .unicard {
     flex-basis: 100%;
@@ -36,3 +48,36 @@
     flex-basis: var(--right-column-width);
   }
 }
+
+/* ========================================= */
+/* ========================================= */
+/* flex grid system v2 modifications */
+/* theme/css/flex-system-v2/ */
+/* unicard heroimage section spacing on mobile */
+.dnd-section:is([class*="force-full-width-section"]) .unicard-left-right-hero-wrp {
+  padding-left: var(--section-horizontal-spacing-mobile);
+  padding-right: var(--section-horizontal-spacing-mobile);
+}
+
+
+/* unicard heroimage section spacing on tablet (vertical position) */
+@media (min-width: 540px) {
+  .dnd-section:is([class*="force-full-width-section"]) .unicard-left-right-hero-wrp {
+    padding-left: calc(var(--section-horizontal-spacing));
+    padding-right: calc(var(--section-horizontal-spacing));
+  }
+}
+@media (min-width: 640px) {
+  .dnd-section:is([class*="force-full-width-section"]) .unicard-left-right-hero-wrp {
+    padding-left: calc(var(--section-horizontal-spacing)/2);
+    padding-right: calc(var(--section-horizontal-spacing)/2);
+  }
+}
+
+/* unicard heroimage section spacing on desktop */
+@media (min-width: 1024px) {
+  .dnd-section:is([class*="force-full-width-section"]) .unicard-left-right-hero-wrp {
+    padding-left: var(--section-horizontal-spacing);
+    padding-right: var(--section-horizontal-spacing);
+  }
+}
diff --git a/theme/modules/unicard-left-right.module/module.html b/theme/modules/unicard-left-right.module/module.html
@@ -34,11 +34,32 @@
       --unicard-l-r-padding-left: {{module.style.spacing.padding.left.value is truthy ? module.style.spacing.padding.left.value ~ module.style.spacing.padding.left.units : 0 }};
       --unicard-l-r-padding-right: {{module.style.spacing.padding.right.value is truthy ? module.style.spacing.padding.right.value ~ module.style.spacing.padding.right.units : 0 }};
       --unicard-l-r-padding: {{module.style.spacing.padding.top.value ~ module.style.spacing.padding.top.units if module.style.spacing.css|length <= 17 }};
+      {% if module.style.hero_image_mode %}
+        --unicard-l-r-mobile-padding-top: {{module.style.mobile_spacing.padding.top.value is truthy ? module.style.mobile_spacing.padding.top.value ~ module.style.mobile_spacing.padding.top.units : 'var(--unicard-l-r-padding-top)' }};
+        --unicard-l-r-mobile-padding-bottom: {{module.style.mobile_spacing.padding.bottom.value is truthy ? module.style.mobile_spacing.padding.bottom.value ~ module.style.mobile_spacing.padding.bottom.units : 'var(--unicard-l-r-padding-bottom)' }};
+        --unicard-l-r-mobile-padding-left: {{module.style.mobile_spacing.padding.left.value is truthy ? module.style.mobile_spacing.padding.left.value ~ module.style.mobile_spacing.padding.left.units : 'var(--unicard-l-r-padding-left)' }};
+        --unicard-l-r-mobile-padding-right: {{module.style.mobile_spacing.padding.right.value is truthy ? module.style.mobile_spacing.padding.right.value ~ module.style.mobile_spacing.padding.right.units : 'var(--unicard-l-r-padding-right)' }};
+      {% endif %}
       {% if module.style.card_style_group1.content_gap > 30 or module.style.card_style_group2.content_gap > 30 %}
         --custom-button-group-gap: 20px;
       {% endif %}
     }
 
+    {% if module.style.hero_image_mode %}
+      .unicard-left-right-hero-wrp {
+        {% if module.style.hero_image_group.background_type == 'background_color' and module.style.hero_image_group.background_color.css %}
+          --unicard-l-r-hero-background: {{module.style.hero_image_group.background_color.css}};
+        {% elif module.style.hero_image_group.background_type == 'background_gradient' and module.style.hero_image_group.background_gradient.css %}
+          background: {{module.style.hero_image_group.background_gradient.css}};
+        {% elif module.style.hero_image_group.background_type == 'background_image' and module.style.hero_image_group.background_image.css %}
+          {{css_image_hero_background_macro(module.style.hero_image_group)}}
+        {% endif %}
+        {%- if module.style.hero_image_group.container_width is integer -%}
+          --custom-max-width: {{module.style.hero_image_group.container_width ~ 'px'}};
+        {%- endif -%}
+      }
+    {% endif %}
+
     {%- for card in module.card_group -%}
       {%- if loop.index == 1 && card.media_type == 'full_width_image' -%}
         @media (min-width: 768px) {
@@ -98,12 +119,26 @@
   {% end_scope_css %}
 </style>
 
+
+{% if module.style.hero_image_mode %}
+  {% if module.style.hero_image_group.background_image.src %}
+    {% require_head %}
+      <link rel="preload" as="image" href="{{resize_image_url(module.style.hero_image_group.background_image.src, 0, 0, 1600)}}" fetchpriority="high">
+    {% end_require_head %}
+  {% endif %}
+  <div class="unicard-left-right-hero-wrp">
+{% endif %}
+
 <div class="unicard-left-right">
-  {% for card in module.card_group %}
+  {%- for card in module.card_group -%}
     {%- if loop.index == 1 -%}
       {{unicard_macro(card, module.style.card_style_group1)}}
     {%- elif loop.index == 2 -%}
       {{unicard_macro(card, module.style.card_style_group2)}}
     {%- endif -%}
-  {% endfor %}
+  {%- endfor -%}
 </div>
+
+{% if module.style.hero_image_mode %}
+  </div>
+{% endif %}
diff --git a/theme/partials/modules/unicard.html b/theme/partials/modules/unicard.html
@@ -141,7 +141,7 @@
           {{media_group_macro(data)}}
 
         {% elif component == 'categories' %}
-          {{categories_macro(data)}}
+          {{category_group_macro(data)}}
 
         {% elif component == 'main_heading' %}
           {{heading_macro(data.heading)}}