[TASK] update lottie animations settings, add width, height and scale…

… factor
Resultify · Aug 6, 2024 · f2ef4cf · f2ef4cf
1 parent 22df81a
commit f2ef4cf
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 14 deletions.
diff --git a/theme/modules/unicard-left-right.module/fields.js b/theme/modules/unicard-left-right.module/fields.js
@@ -106,6 +106,7 @@ init(
       'card_group.',
       {
         mediaGroup: {
+          showLottieScaleProp: true,
           hideForceFullWidthImageProp: true,
           hideForceFullWidthVideoProp: true
         },

diff --git a/theme/modules/unicard-left-right.module/module.css b/theme/modules/unicard-left-right.module/module.css
@@ -1,4 +1,5 @@
 .unicard-left-right-hero-wrp {
+  overflow: hidden;
   background-color: var(--unicard-l-r-hero-background);
 }
 

diff --git a/theme/partials/components/lottie.html b/theme/partials/components/lottie.html
@@ -3,6 +3,18 @@
   templateType: "none"
   isAvailableForNewContent: false
 -->
+{%- macro lottie_dimensions(data) -%}
+  {%- if data.lottie_width is integer -%}
+    width="{{data.lottie_width}}"
+  {%- endif -%}
+  {%- if data.lottie_height is integer -%}
+    height="{{data.lottie_height}}"
+  {%- endif -%}
+  {%- if data.lottie_scale is float -%}
+    style="--lottie-custom-scale: scale({{data.lottie_scale}});"
+  {%- endif -%}
+{%- endmacro -%}
+
 {%- macro lottie_macro(data) -%}
   {%- if data.lottie_file -%}
     {{require_js(get_asset_url('../../assets/js/dotlottie.js'), {defer: true})}}
@@ -66,12 +78,15 @@
     {% require_css %}
       <style data-component="lottie">
         .lottie {
-          max-width: 100%;
-          height: auto;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          transform: var(--lottie-custom-scale, scale(1));
         }
       </style>
     {% end_require_css %}
     <canvas data-component="lottie" class="lottie dotlottie-canvas"
+      {{lottie_dimensions(data)}}
       data-lottie-src="{{data.lottie_file}}"
       data-speed="{{data.lottie_speed}}"
       data-mode="{{data.lottie_mode}}"

diff --git a/theme/partials/components/lottie.js b/theme/partials/components/lottie.js
@@ -2,29 +2,61 @@ import {
   moduleFields as fi
 } from '@resultify/hubspot-fields-js'
 
-const lottie = (parent = '') => {
+/**
+ * #### fullWidthImage fields
+ * @param {string} [parent] - parent path
+ * @param {object} [opt] - options
+ * @param {boolean} [opt.showLottieScaleProp] - show lottie scale prop
+ */
+const lottie = (parent = '', opt) => {
   if (typeof parent === 'string' && parent !== '') {
     parent = `${parent}`
   }
   return [
     fi.file('Lottie file', 'lottie_file'),
+    fi.boolean('', 'lottie_prop_visibility', {
+      inline_help_text: '<span style="color:#33475b;">Show/hide</span> additional <span style="color:#007a8c;font-weight:700;font-size:14px;">Lottie</span> properties.',
+      display: 'toggle'
+    }),
     fi.number('Speed', 'lottie_speed', {
       min: 0,
       step: 0.1,
       display_width: 'half_width',
       default: 1,
-      visibility: {
-        controlling_field_path: `${parent}lottie_file`,
-        operator: 'NOT_EMPTY'
+      visibility_rules: 'ADVANCED',
+      advanced_visibility: {
+        boolean_operator: 'AND',
+        criteria: [
+          {
+            controlling_field_path: `${parent}lottie_file`,
+            operator: 'NOT_EMPTY'
+          },
+          {
+            controlling_field_path: `${parent}lottie_prop_visibility`,
+            operator: 'EQUAL',
+            controlling_value_regex: 'true'
+          }
+        ]
       }
     }),
     fi.choice('Mode', 'lottie_mode', {
       display_width: 'half_width',
       required: true,
       default: 'forward',
-      visibility: {
-        controlling_field_path: `${parent}lottie_file`,
-        operator: 'NOT_EMPTY'
+      visibility_rules: 'ADVANCED',
+      advanced_visibility: {
+        boolean_operator: 'AND',
+        criteria: [
+          {
+            controlling_field_path: `${parent}lottie_file`,
+            operator: 'NOT_EMPTY'
+          },
+          {
+            controlling_field_path: `${parent}lottie_prop_visibility`,
+            operator: 'EQUAL',
+            controlling_value_regex: 'true'
+          }
+        ]
       },
       choices: [
         ['forward', 'Forward'],
@@ -34,11 +66,83 @@ const lottie = (parent = '') => {
       ]
     }),
     fi.boolean('Loop', 'lottie_loop', {
-      display_width: 'half_width',
       default: true,
-      visibility: {
-        controlling_field_path: `${parent}lottie_file`,
-        operator: 'NOT_EMPTY'
+      visibility_rules: 'ADVANCED',
+      advanced_visibility: {
+        boolean_operator: 'AND',
+        criteria: [
+          {
+            controlling_field_path: `${parent}lottie_file`,
+            operator: 'NOT_EMPTY'
+          },
+          {
+            controlling_field_path: `${parent}lottie_prop_visibility`,
+            operator: 'EQUAL',
+            controlling_value_regex: 'true'
+          }
+        ]
+      }
+    }),
+    fi.number('Width', 'lottie_width', {
+      min: 0,
+      display_width: 'half_width',
+      suffix: 'px',
+      visibility_rules: 'ADVANCED',
+      advanced_visibility: {
+        boolean_operator: 'AND',
+        criteria: [
+          {
+            controlling_field_path: `${parent}lottie_file`,
+            operator: 'NOT_EMPTY'
+          },
+          {
+            controlling_field_path: `${parent}lottie_prop_visibility`,
+            operator: 'EQUAL',
+            controlling_value_regex: 'true'
+          }
+        ]
+      }
+    }),
+    fi.number('Height', 'lottie_height', {
+      min: 0,
+      display_width: 'half_width',
+      suffix: 'px',
+      visibility_rules: 'ADVANCED',
+      advanced_visibility: {
+        boolean_operator: 'AND',
+        criteria: [
+          {
+            controlling_field_path: `${parent}lottie_file`,
+            operator: 'NOT_EMPTY'
+          },
+          {
+            controlling_field_path: `${parent}lottie_prop_visibility`,
+            operator: 'EQUAL',
+            controlling_value_regex: 'true'
+          }
+        ]
+      }
+    }),
+    fi.number('Scale', 'lottie_scale', {
+      min: 0,
+      step: 0.1,
+      max: 10,
+      locked: !(opt?.showLottieScaleProp),
+      display_width: 'half_width',
+      visibility_rules: 'ADVANCED',
+      advanced_visibility: {
+        boolean_operator: 'AND',
+        criteria: [
+          {
+            controlling_field_path: `${parent}lottie_file`,
+            operator: 'NOT_EMPTY'
+          },
+          {
+            controlling_field_path: `${parent}lottie_prop_visibility`,
+            operator: 'EQUAL',
+            controlling_value_regex: 'true'
+          }
+        ]
       }
     })
   ]

diff --git a/theme/partials/components/media-group.js b/theme/partials/components/media-group.js
@@ -17,6 +17,7 @@ import { video } from './video.js'
  * @param {boolean} [opt.hideForceFullWidthImageProp] - hide force_full_width_image property for fullWidthImage component
  * @param {boolean} [opt.hideAlignmentProp] - hide alignment property for simpleImage component
  * @param {boolean} [opt.hideForceFullWidthVideoProp] - hide force_full_width_video property for video component
+ * @param {boolean} [opt.showLottieScaleProp] - show lottie scale property
  * @param {Array<Array<string, string>>} [opt.additional_media_types] - additional media types
  */
 const mediaGroup = (parent = '', opt) => {
@@ -130,7 +131,7 @@ const mediaGroup = (parent = '', opt) => {
           ]
         }
       },
-      lottie(`${parent}lottie_group.`)
+      lottie(`${parent}lottie_group.`, opt)
     ),
     group('Video', 'video_group',
       {

diff --git a/theme/partials/modules/unicard.js b/theme/partials/modules/unicard.js
@@ -29,6 +29,7 @@ import { shadowList } from '../data/shadow-list.js'
  * @param {boolean} [opt.mediaGroup.hideForceFullWidthImageProp] - hide force_full_width_image property for fullWidthImage component
  * @param {boolean} [opt.mediaGroup.hideAlignmentProp] - hide alignment property for simpleImage component
  * @param {boolean} [opt.mediaGroup.hideForceFullWidthVideoProp] - hide force_full_width_video property for video component
+ * @param {boolean} [opt.mediaGroup.showLottieScaleProp] - show lottie scale property
  * @param {boolean} [opt.hideWholeAreaLinkProp] - hide whole area link property
  */
 const unicardFields = (components, parent = '', opt) => {