Frontend: lazyload flatpickr

MahoCommerce · Nov 4, 2024 · 20da53a · 20da53a
1 parent 2600f5a
commit 20da53a
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 62 deletions.
diff --git a/app/design/frontend/base/default/layout/catalog.xml b/app/design/frontend/base/default/layout/catalog.xml
@@ -169,9 +169,6 @@ Product view
             <action method="addJs"><script>varien/product.js</script></action>
             <action method="addJs"><script>varien/product_options.js</script></action>
             <action method="addJs"><script>varien/configurable.js</script></action>
-
-            <action method="addItem"><type>js_css</type><name>flatpickr/flatpickr.min.css</name><params/></action>
-            <action method="addItem"><type>js</type><name>flatpickr/flatpickr.min.js</name></action>
         </reference>
         <reference name="content">
             <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

diff --git a/app/design/frontend/base/default/layout/catalogsearch.xml b/app/design/frontend/base/default/layout/catalogsearch.xml
@@ -67,8 +67,6 @@
         </reference>
         <reference name="head">
             <action method="setTitle" translate="title" module="catalogsearch"><title>Advanced Search</title></action>
-            <action method="addItem"><type>js_css</type><name>flatpickr/flatpickr.min.css</name><params/></action>
-            <action method="addItem"><type>js</type><name>flatpickr/flatpickr.min.js</name></action>
         </reference>
         <reference name="content">
             <block type="catalogsearch/advanced_form" name="catalogsearch_advanced_form" template="catalogsearch/advanced/form.phtml"/>

diff --git a/app/design/frontend/rwd/default/layout/catalog.xml b/app/design/frontend/rwd/default/layout/catalog.xml
@@ -165,8 +165,6 @@ Product view
             <action method="addJs"><script>varien/product.js</script></action>
             <action method="addJs"><script>varien/product_options.js</script></action>
             <action method="addJs"><script>varien/configurable.js</script></action>
-            <action method="addItem"><type>js_css</type><name>flatpickr/flatpickr.min.css</name><params/></action>
-            <action method="addItem"><type>js</type><name>flatpickr/flatpickr.min.js</name></action>
         </reference>
         <reference name="content">
             <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

diff --git a/app/design/frontend/rwd/default/layout/catalogsearch.xml b/app/design/frontend/rwd/default/layout/catalogsearch.xml
@@ -71,8 +71,6 @@
         </reference>
         <reference name="head">
             <action method="setTitle" translate="title" module="catalogsearch"><title>Advanced Search</title></action>
-            <action method="addItem"><type>js_css</type><name>flatpickr/flatpickr.min.css</name><params/></action>
-            <action method="addItem"><type>js</type><name>flatpickr/flatpickr.min.js</name></action>
         </reference>
         <reference name="content">
             <block type="catalogsearch/advanced_form" name="catalogsearch_advanced_form" template="catalogsearch/advanced/form.phtml"/>

diff --git a/public/js/varien/js.js b/public/js/varien/js.js
@@ -573,60 +573,90 @@ function buttonDisabler() {
 
 const Calendar = {};
 Calendar.setup = function(config) {
-    const {
-        inputField = '',
-        ifFormat = '',
-        showsTime = '',
-        range = ''
-    } = config;
-
-    const strftimeToDateConvertionMap = {
-        '%O': 'S',
-        '%d': 'd',
-        '%a': 'D',
-        '%e': 'j',
-        '%A': 'l',
-        '%u': 'N',
-        '%w': 'w',
-        '%j': 'z',
-        '%V': 'W',
-        '%B': 'F',
-        '%m': 'm',
-        '%b': 'M',
-        '%-m': 'n',
-        '%G': 'o',
-        '%Y': 'Y',
-        '%y': 'y',
-        '%P': 'a',
-        '%p': 'A',
-        '%l': 'g',
-        '%I': 'h',
-        '%H': 'H',
-        '%M': 'i',
-        '%S': 's',
-        '%z': 'O',
-        '%Z': 'T',
-        '%s': 'U'
-    };
-    const dateFormat = ifFormat.replace(/%[OdaeAuwjVBmbGYyPplIHMSzZs-]/g, match => strftimeToDateConvertionMap[match] || match);
-
-    let flatpickrOptions = {
-        allowInput: true,
-        dateFormat: dateFormat,
-        enableTime: showsTime
-    };
-
-    if (Array.isArray(range)) {
-        const [yearStart, yearEnd] = range;
-        if (yearStart) {
-            const minDate = new Date(yearStart, 0, 1);
-            flatpickrOptions.minDate = flatpickr.formatDate(minDate, dateFormat, {});
+    const { inputField = '' } = config;
+
+    // Store config on the input element itself
+    const input = document.getElementById(inputField);
+    if (input) {
+        input.dataset.calendarConfig = JSON.stringify(config);
+        const initHandler = (event) => Calendar.initialize(event);
+        input.addEventListener('focus', initHandler);
+        input.addEventListener('click', initHandler);
+    }
+};
+
+Calendar.initialize = async function(event) {
+    if (!event?.target) return;
+
+    try {
+        // Get config from the input element
+        const config = JSON.parse(event.target.dataset.calendarConfig || '{}');
+
+        if (typeof flatpickr === 'undefined') {
+            // Load flatpickr CSS
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = '/js/flatpickr/flatpickr.min.css';
+            document.head.appendChild(link);
+            await new Promise(resolve => link.onload = resolve);
+
+            // Load flatpickr JS
+            await new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = '/js/flatpickr/flatpickr.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.body.appendChild(script);
+            });
         }
-        if (yearEnd) {
-            const maxDate = new Date(yearEnd, 11, 31);
-            flatpickrOptions.maxDate = flatpickr.formatDate(maxDate, dateFormat, {});
+
+        const {
+            inputField = '',
+            ifFormat = '',
+            showsTime = '',
+            range = ''
+        } = config;
+
+        const strftimeToDateConvertionMap = {
+            '%O': 'S', '%d': 'd', '%a': 'D', '%e': 'j', '%A': 'l', '%u': 'N', '%w': 'w', '%j': 'z', '%V': 'W',
+            '%B': 'F', '%m': 'm', '%b': 'M', '%-m': 'n', '%G': 'o', '%Y': 'Y', '%y': 'y', '%P': 'a', '%p': 'A',
+            '%l': 'g', '%I': 'h', '%H': 'H', '%M': 'i', '%S': 's', '%z': 'O', '%Z': 'T', '%s': 'U'
+        };
+
+        const dateFormat = ifFormat.replace(/%[OdaeAuwjVBmbGYyPplIHMSzZs-]/g,
+            match => strftimeToDateConvertionMap[match] || match
+        );
+
+        let flatpickrOptions = {
+            allowInput: true,
+            dateFormat: dateFormat,
+            enableTime: showsTime
+        };
+
+        if (Array.isArray(range)) {
+            const [yearStart, yearEnd] = range;
+            if (yearStart) {
+                const minDate = new Date(yearStart, 0, 1);
+                flatpickrOptions.minDate = flatpickr.formatDate(minDate, dateFormat, {});
+            }
+            if (yearEnd) {
+                const maxDate = new Date(yearEnd, 11, 31);
+                flatpickrOptions.maxDate = flatpickr.formatDate(maxDate, dateFormat, {});
+            }
         }
-    }
 
-    flatpickr('#' + inputField, flatpickrOptions);
+        // Initialize flatpickr and trigger it
+        flatpickr('#' + inputField, flatpickrOptions);
+        document.getElementById(inputField).click();
+
+        // remove our event handlers
+        const input = event.target;
+        const initHandler = (event) => Calendar.initialize(event);
+        input.removeEventListener('focus', initHandler);
+        input.removeEventListener('click', initHandler);
+        input.removeEventListener('touchstart', initHandler);
+
+        // Clean up the stored config
+        delete input.dataset.calendarConfig;
+    } catch (error) {}
 };