From cf29a4c31d4d25e8cb8fe88a17cad2184baadcf6 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Thu, 9 Apr 2020 18:45:35 +0200 Subject: [PATCH] Flatpickr localisation + options overrides. WIP #3445 @3 --- wp-content/mu-plugins/cube/src/Forms/Base.php | 43 +++++++++++++++++-- .../CCV/resources/assets/scripts/flatpickr.js | 4 +- .../views/forms/consultation.blade.php | 8 ++-- wp-content/themes/CCV/webpack.mix.js | 10 +++-- 4 files changed, 54 insertions(+), 11 deletions(-) diff --git a/wp-content/mu-plugins/cube/src/Forms/Base.php b/wp-content/mu-plugins/cube/src/Forms/Base.php index 9f75812..be60094 100644 --- 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 = '
'; $res .= ''; $res .= ''; diff --git a/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js b/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js index b005c43..e91a51d 100644 --- 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 02c91ca..f352b43 100644 --- 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
diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js index 4beb98b..06dec85 100644 --- 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`) -- 2.39.5