From: Stephen Cameron Date: Thu, 9 Apr 2020 11:01:04 +0000 (+0200) Subject: Custom date picker + form improvements. WIP #3445 @4.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=651717c69e0d71a225d1d25769599f044fbc4eaa;p=ccv-wordpress.git 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 9216d00..9f75812 100644 --- 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 ''; + 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 = '
'; + $res .= ''; + $res .= ''; + $res .= '
'; + + return $res; } /** @@ -188,6 +209,15 @@ class Base return ''; } + /** + * E-mail input field with placeholder + * @param $name + * @param $settings + * @return string + */ + public function email($name, $settings = []) { + return ''; + } /** * 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 01243f9..d079510 100644 --- 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 d2caca6..915a58d 100644 --- 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 index 0000000..dbdbf42 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/calendar.svg @@ -0,0 +1,6 @@ + + + + + + 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 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 7a932a9..0ba0f1b 100644 --- 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 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 0b21e98..4beb98b 100644 --- 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 6e21d13..32e583d 100644 --- 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"