Custom date picker + form improvements. WIP #3445 @4.5

diff --git a/wp-content/mu-plugins/cube/src/Forms/Base.php b/wp-content/mu-plugins/cube/src/Forms/Base.php
index 9216d00fed9c9644621f1a29939e53e1204aeeb7..9f758123400c6ae83e07a0aea8630a1d6c473ac6 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Forms/Base.php
+++ b/wp-content/mu-plugins/cube/src/Forms/Base.php
@@ -2,6 +2,8 @@
 
 namespace Cube\Forms;
 
+use function Roots\asset;
+
 class Base
 {
     private $fields = [];
@@ -10,6 +12,7 @@ class Base
     const BINARY = 'binary';
     const CHECKBOX = 'checkbox';
     const DATE = 'date';
+    const EMAIL = 'email';
     const RADIO = 'radio';
     const SELECT = 'select';
     const TEXT = 'text';
@@ -23,6 +26,9 @@ class Base
 
     public function register_scripts() {
 
+        // These will only be enqueued if there is a date field
+        wp_register_script('cube-flatpickr', asset('scripts/flatpickr.js'), [], null, true);
+        wp_register_style('cube-flatpickr-css', asset('styles/flatpickr.css'));
     }
 
     public function register_fields() {
@@ -149,7 +155,22 @@ class Base
      * @return string
      */
     public function date($name, $settings = []) {
-        return '<input type="date" placeholder="'. __('JJ/MM/AAAA') .'" name="'. $name .'">';
+        wp_enqueue_script('cube-flatpickr');
+        wp_enqueue_style('cube-flatpickr-css');
+
+        $flatpickr = isset($settings['flatpickr']) ? $settings['flatpickr'] : [
+            '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
+        ];
+
+        $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>';
+        $res .= '</div>';
+
+        return $res;
     }
 
     /**
@@ -188,6 +209,15 @@ class Base
         return '<input type="text" name="'. $name .'" placeholder="'. $settings['placeholder'] .'">';
     }
 
+    /**
+     * E-mail input field with placeholder
+     * @param $name
+     * @param $settings
+     * @return string
+     */
+    public function email($name, $settings = []) {
+        return '<input type="email" name="'. $name .'" placeholder="'. $settings['placeholder'] .'">';
+    }
 
     /**
      * Select box

diff --git a/wp-content/mu-plugins/cube/src/Forms/Consultation.php b/wp-content/mu-plugins/cube/src/Forms/Consultation.php
index 01243f98ae6450700cacdf840ab55a8f2ae3029e..d079510d9236029499d4c007be17694e64cfa3a4 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Forms/Consultation.php
+++ b/wp-content/mu-plugins/cube/src/Forms/Consultation.php
@@ -90,7 +90,7 @@ class Consultation extends Base
         $this->addField('city', __('Ville', 'ccv'), self::TEXT);
         $this->addField('country', __('Pays', 'ccv'), self::TEXT);
         $this->addField('phone', __('Tel', 'ccv'), self::TEXT);
-        $this->addField('email', __('Email', 'ccv'), self::TEXT);
+        $this->addField('email', __('Email', 'ccv'), self::EMAIL);
         $this->addField('sex', __('Sexe', 'ccv'), self::RADIO, [_x('M', 'Sexe (M)', 'ccv'), _x('F', 'Sexe (F)', 'ccv')]);
         $this->addField('age', __('Âge :', 'ccv'), self::TEXT);
         $this->addField('message', __('Avez vous un message (ou une demande) spécifique à nous formuler ?', 'ccv'), self::TEXTAREA);

diff --git a/wp-content/themes/CCV/package.json b/wp-content/themes/CCV/package.json
index d2caca6e14019bac2807b830891ae57412c6f5e4..915a58dd4cd3ff49c4fd5f448427bdae2217846d 100644 (file)
--- a/wp-content/themes/CCV/package.json
+++ b/wp-content/themes/CCV/package.json
@@ -23,6 +23,7 @@
     "cross-env": "^5.2",
     "eslint": "^5.11",
     "eslint-plugin-import": "^2.17",
+    "flatpickr": "^4.6.3",
     "laravel-mix": "^5.0.4",
     "laravel-mix-purgecss": "^4.2.0",
     "lodash.debounce": "^4.0.8",

diff --git a/wp-content/themes/CCV/resources/assets/images/calendar.svg b/wp-content/themes/CCV/resources/assets/images/calendar.svg
new file mode 100644 (file)
index 0000000..dbdbf42
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/images/calendar.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
+  <g fill="none" stroke="#FF078B" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 2.3H.5v24.2h26V2.3H22"/>
+    <path d="M5 .5h3.6V5H5V.5zM18.4.5H22V5h-3.6V.5zM8.6 2.3h9.9M.5 8.6h26M6.8 10.7v13.6M13.1 10.7v13.6M19.3 10.7v13.6M2.8 13.1h21.5M2.8 17.5h21.5M2.8 22h21.5"/>
+  </g>
+</svg>

diff --git a/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js b/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js
new file mode 100644 (file)
index 0000000..b005c43
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/scripts/flatpickr.js
@@ -0,0 +1,8 @@
+import flatpickr from 'flatpickr'
+
+// 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
+document.querySelectorAll('[data-flatpickr]')
+  .forEach(function(picker) {
+    flatpickr(picker, JSON.parse(picker.dataset.flatpickr));
+  });

diff --git a/wp-content/themes/CCV/resources/assets/styles/components/forms.styl b/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
index 7a932a99d673ffcea5a35c499e3b76ebade63a69..0ba0f1b7c2a1664d11ff69c25cb52774af12a35d 100644 (file)
--- a/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
@@ -111,6 +111,13 @@ input[type="submit"]
   label
     white-space: nowrap // Ensure text stays beside input control
 
+.form-field-date
+  input
+    width: 5.5em
+    text-align: center
+    padding: 0
+
+
 .form-cols-2, .form-cols-4
   display: flex
   flex-wrap: wrap

diff --git a/wp-content/themes/CCV/resources/assets/styles/flatpickr.styl b/wp-content/themes/CCV/resources/assets/styles/flatpickr.styl
new file mode 100644 (file)
index 0000000..f4f7d4a
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/flatpickr.styl
@@ -0,0 +1,33 @@
+// Flatpickr calendar control styles
+$arrow_hover_color = rgba(#fff, 0.8)
+$monthForeground = #fff
+$monthBackground = #FF078B
+$weekdaysBackground = $monthBackground
+$weekdaysForeground = rgba($monthForeground, 0.8)
+
+$dayForeground = #484848
+$dayHoverBackground = #e2e2e2
+
+$todayColor = #bbb
+
+$selectedDayBackground = #FF078B
+$selectedDayForeground = #fff
+
+$noCalendarBorder = true
+
+@import '~flatpickr/src/style/flatpickr.styl'
+
+// Fix CSS bug (see: https://github.com/flatpickr/flatpickr/issues/1300#issuecomment-385304463)
+.flatpickr-calendar, .flatpickr-days
+  width: auto !important
+
+.flatpickr-calendar
+  &.arrowTop
+    margin-top: 4px // Give a bit more space between the arrow and the field
+  &.arrowBottom
+    margin-top: -4px
+
+    // Arrow shouldn't be coloured when at the bottom
+    &:after
+      border-top-color: #fff
+      margin-top: -1px

diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js
index 0b21e98a964bf31863804226958462e15d040f03..4beb98b4a41ef065e68aa24bc8997dcddaf45b61 100644 (file)
--- a/wp-content/themes/CCV/webpack.mix.js
+++ b/wp-content/themes/CCV/webpack.mix.js
@@ -43,12 +43,16 @@ mix.stylus(src`styles/app.styl`, 'styles', {
   })
   .tailwind();
 
+// Separate stylesheet for Flatpickr since it is only needed on specific pages
+mix.stylus(src`styles/flatpickr.styl`, 'styles');
+
 // JavaScript
 mix.js(src`scripts/app.js`, 'scripts')
    .js(src`scripts/consultation.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();
 

diff --git a/wp-content/themes/CCV/yarn.lock b/wp-content/themes/CCV/yarn.lock
index 6e21d136fd85a0fcadf9667b5b12f1c5da0266b7..32e583dfb43d575cca5096dffe68413524724c1c 100644 (file)
--- a/wp-content/themes/CCV/yarn.lock
+++ b/wp-content/themes/CCV/yarn.lock
@@ -3437,6 +3437,11 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
+flatpickr@^4.6.3:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.3.tgz#15a8b76b6e34e3a072861250503a5995b9d3bc60"
+  integrity sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ==
+
 flatted@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"