Flatpickr localisation + options overrides. WIP #3445 @3

diff --git a/wp-content/mu-plugins/cube/src/Forms/Base.php b/wp-content/mu-plugins/cube/src/Forms/Base.php
index 9f758123400c6ae83e07a0aea8630a1d6c473ac6..be60094a62ea41354e22af7d796414127f27364c 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Forms/Base.php
+++ b/wp-content/mu-plugins/cube/src/Forms/Base.php
@@ -26,9 +26,29 @@ class Base
 
     public function register_scripts() {
 
+        // Elementor has an older, incompatible version of Flatpickr so we need to replace it with our version
+        if (wp_script_is('flatpickr', 'registered')) {
+            wp_deregister_script('flatpickr');
+        }
+
         // These will only be enqueued if there is a date field
-        wp_register_script('cube-flatpickr', asset('scripts/flatpickr.js'), [], null, true);
+        wp_register_script('flatpickr', asset('scripts/flatpickr/flatpickr.min.js'), [], null, true);
         wp_register_style('cube-flatpickr-css', asset('styles/flatpickr.css'));
+
+        // Make localisations available for flatpickr (English is default so not needed)
+        $flatpickr_languages = ['fr', 'ru', 'ar']; // These should be available in dist/scripts/flatpickr/locale
+
+        foreach ($flatpickr_languages as $flatpickr_language) {
+            wp_register_script("flatpickr-locale-{$flatpickr_language}",
+                               asset("scripts/flatpickr/locale/{$flatpickr_language}.js"),
+                               ['flatpickr'], // Dependencies
+                               null, // Version
+                               true // In footer?
+            );
+        }
+
+        wp_register_script('cube-flatpickr', asset('scripts/flatpickr/trigger.js'), ['flatpickr'], null, true);
+
     }
 
     public function register_fields() {
@@ -155,16 +175,33 @@ class Base
      * @return string
      */
     public function date($name, $settings = []) {
-        wp_enqueue_script('cube-flatpickr');
         wp_enqueue_style('cube-flatpickr-css');
+        wp_enqueue_script('flatpickr');
 
-        $flatpickr = isset($settings['flatpickr']) ? $settings['flatpickr'] : [
+        $flatpickr_defaults = [
             'wrap' => true,
             'altInput' => true,
             'altFormat' => 'd/m/Y', // Format shown to user (https://flatpickr.js.org/formatting/)
             'dateFormat' => 'Y-m-d', // Format returned to the input field
         ];
 
+        if (!isset($settings['flatpickr'])) $settings['flatpickr'] = [];
+        $flatpickr = array_merge($flatpickr_defaults, $settings['flatpickr']);
+
+        // Load localisation if available
+        if (function_exists('pll_current_language')) {
+            $locale = pll_current_language();
+            $locale_handle = "flatpickr-locale-$locale";
+
+            if (wp_script_is($locale_handle, 'registered')) {
+                wp_enqueue_script($locale_handle);
+                $flatpickr['locale'] = $locale;
+            }
+        }
+
+        // Finally, enqueue the trigger
+        wp_enqueue_script('cube-flatpickr');
+
         $res  = '<div data-flatpickr="'. esc_attr(json_encode($flatpickr)) .'" class="flex">';
         $res .= '<input type="date" placeholder="'. __('JJ/MM/AAAA') .'" name="'. $name .'" data-input>';
         $res .= '<img src="'. asset('images/calendar.svg') .'" class="ml-2 mr-6 cursor-pointer" data-toggle>';

diff --git a/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js b/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js
index b005c43808760fc28bb0c69f61aaffbd9fe0c0a3..e91a51dae6d8bb55f43f3126bce8be9d41753f8b 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js
+++ b/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js
@@ -1,4 +1,6 @@
-import flatpickr from 'flatpickr'
+// This script depends on flatpickr, which is loaded separately instead of being included here
+// because we also need to load locale files sometimes and they must load after flatpickr.min.js
+// but before this trigger fires...
 
 // Auto-trigger for any elements carrying the data-flatpickr attribute
 // Settings come from JSON in the data attribute of the element to make this more flexible

diff --git a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php
index 02c91cac3dc0afea0ef29c801f103278eeeb572b..f352b43be6a757700b967895a910625aab65c706 100644 (file)
--- a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php
+++ b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php
@@ -22,8 +22,8 @@ https://github.com/flatpickr/flatpickr
 
     <ul class="spaced-lg">
       <li>{!! $form->field('main-problem') !!}</li>
-      <li>{!! $form->field('date-first-symptoms', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
-      <li>{!! $form->field('date-pain-since', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
+      <li>{!! $form->field('date-first-symptoms', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0', 'flatpickr' => ['maxDate' => 'today']]) !!}</li>
+      <li>{!! $form->field('date-pain-since', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0', 'flatpickr' => ['maxDate' => 'today']]) !!}</li>
       <li>
         {!! $form->field('pain-arms-legs') !!}
 
@@ -49,9 +49,9 @@ https://github.com/flatpickr/flatpickr
     <ul class="spaced-lg">
       <li>{!! $form->field('main-pain') !!}</li>
       <li>{!! $form->field('tingling-numbness') !!}</li>
-      <li>{!! $form->field('tingling-numbness-date', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
+      <li>{!! $form->field('tingling-numbness-date', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0', 'flatpickr' => ['maxDate' => 'today']]) !!}</li>
       <li>{!! $form->field('strength-loss') !!}</li>
-      <li>{!! $form->field('strength-loss-date', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0']) !!}</li>
+      <li>{!! $form->field('strength-loss-date', ['class' => 'flex items-center spaced-horizontal', 'title_class' => 'mb-0', 'flatpickr' => ['maxDate' => 'today']]) !!}</li>
     </ul>
 
   </div>

diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js
index 4beb98b4a41ef065e68aa24bc8997dcddaf45b61..06dec8512b912300033ef75b486d52dc9fa32394 100644 (file)
--- a/wp-content/themes/CCV/webpack.mix.js
+++ b/wp-content/themes/CCV/webpack.mix.js
@@ -43,8 +43,13 @@ mix.stylus(src`styles/app.styl`, 'styles', {
   })
   .tailwind();
 
-// Separate stylesheet for Flatpickr since it is only needed on specific pages
+// Separate resources for Flatpickr since it is only needed on specific pages
 mix.stylus(src`styles/flatpickr.styl`, 'styles');
+mix.js(src`scripts/flatpickr.js`, 'scripts/flatpickr/trigger.js'); // Trigger function (separated so locales can load first)
+mix.copy('node_modules/flatpickr/dist/flatpickr.min.js', publicPath`scripts/flatpickr`);
+// Set which locales to copy
+['ar', 'fr', 'ru']
+  .forEach(locale => mix.copy(`node_modules/flatpickr/dist/l10n/${locale}.js`, publicPath`scripts/flatpickr/locale`));
 
 // JavaScript
 mix.js(src`scripts/app.js`, 'scripts')
@@ -52,9 +57,8 @@ mix.js(src`scripts/app.js`, 'scripts')
    .js(src`scripts/header-slideshow.js`, 'scripts')
    .js(src`scripts/link-carousel.js`, 'scripts')
    .js(src`scripts/testimonial-carousel.js`, 'scripts')
-   .js(src`scripts/flatpickr.js`, 'scripts')
    .js(src`scripts/customizer.js`, 'scripts')
-   .extract();
+   .extract(['mmenu-light']); // Extract any libraries that will rarely change to a vendor.js file
 
 // Assets
 mix.copyDirectory(src`images`, publicPath`images`)