feature #1412 Rebase and flatpickr (bechir, atierant)

This PR was merged into the main branch.

Discussion
----------

Rebase and flatpickr

Rebase `@bechir` work to comply with 6.2 branch

Resolve #1183

Fix flatpickr as mandated by `@bechir` in #1183 (comment)

Commits
-------

e7525e6 style: #1183 Fix form field icon and flat picker l10n (atierant)
4dc4256 style: #1183 Conform new Bootstrap 4 design to the previous Bootstrap 3 one (atierant)
46ee773 feature #1183 Fix language selection in flatpicker.js (atierant)
4a1d48b feature #1183 Add flatpickr as a datepicker (atierant)
5633a63 Use button instead of span
4bac0ac Localize flatpickr globally
8879baf Fix & integrate flatpickr
779ed96 Fix typos & remove commented code
4c04860 Remove horizontal scroller in source code modal
9758c24 Upgraded to bootswatch 4.5.3

Author: javiereguiluz

assets/admin.js

@@ -1,26 +1,9 @@
 import './styles/admin.scss';
-import 'eonasdan-bootstrap-datetimepicker';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
 import 'bootstrap-tagsinput';
 
 $(function() {
-    // Datetime picker initialization.
-    // See https://eonasdan.github.io/bootstrap-datetimepicker/
-    $('[data-toggle="datetimepicker"]').datetimepicker({
-        icons: {
-            time: 'fa fa-clock-o',
-            date: 'fa fa-calendar',
-            up: 'fa fa-chevron-up',
-            down: 'fa fa-chevron-down',
-            previous: 'fa fa-chevron-left',
-            next: 'fa fa-chevron-right',
-            today: 'fa fa-check-circle-o',
-            clear: 'fa fa-trash',
-            close: 'fa fa-remove'
-        }
-    });
-
     // Bootstrap-tagsinput initialization
     // https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
     var $input = $('input[data-toggle="tagsinput"]');
@@ -57,7 +40,7 @@ $(document).on('submit', 'form[data-confirmation]', function (event) {
             .on('click', '#btnYes', function () {
                 $confirm.data('result', 'yes');
                 $form.find('input[type="submit"]').attr('disabled', 'disabled');
-                $form.submit();
+                $form.trigger('submit');
             })
             .modal('show');
     }

assets/app.js

@@ -1,11 +1,10 @@
 import './styles/app.scss';
 
 // loads the Bootstrap jQuery plugins
-import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/alert.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/collapse.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js';
+import 'bootstrap/js/dist/alert';
+import 'bootstrap/js/dist/collapse';
+import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/modal';
 import 'jquery'
 
 // loads the code syntax highlighting library
@@ -16,3 +15,5 @@ import './js/doclinks.js';
 
 // start the Stimulus application
 import './bootstrap';
+
+import './js/flatpicker';

assets/js/flatpicker.js

@@ -0,0 +1,33 @@
+import 'flatpickr';
+import 'flatpickr/dist/flatpickr.css';
+import l10n from "flatpickr/dist/l10n";
+
+flatpickr.defaultConfig.animate = window.navigator.userAgent.indexOf('MSIE') === -1;
+let lang = document.documentElement.getAttribute('lang') || 'en';
+const Locale = l10n[`${lang}`] || l10n.default;
+flatpickr.localize(Locale);
+const configs = {
+    standard: {
+        enableTime: true,
+        dateFormat: "Y-m-d H:i",
+        allowInput: true,
+        time_24hr: true,
+        defaultHour: 24,
+        parseDate: (datestr, format) => {
+            return flatpickr.parseDate(datestr, format);
+        },
+        formatDate: (date, format, locale) => {
+            return flatpickr.formatDate(date, format);
+        }
+    }
+};
+
+const flatpickrs = document.querySelectorAll(".flatpickr");
+for (let i = 0; i < flatpickrs.length; i++) {
+    let element = flatpickrs[i];
+    let configValue = configs[element.getAttribute("data-flatpickr-class")] || {};
+    // Overrides the default format with the one sent by data attribute
+    configValue.dateFormat = element.getAttribute("data-date-format") || 'Y-m-d H:i';
+    // ...and then initialize the flatpickr
+    flatpickr(element, configValue);
+}

assets/styles/_variables.scss

@@ -0,0 +1,30 @@
+// setting the value of this variable to an empty data URL is the only working solution
+// to load the Bootswatch web fonts locally and avoid loading them from Google servers
+// see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
+$web-font-path: 'data:text/css;base64,';
+
+// Make sure the bootstrap-sass and lato fonts are resolved correctly
+//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
+$lato-font-path: '~lato-font/fonts';
+
+$font-default: 19px;
+
+$font-heading: 2.5rem;
+$font-title: 2rem;
+$font-subtitle: 1.5rem;
+
+$secondary-color: #ecf0f1;
+$gray-7500: #e9ecec;
+
+$navbar-margin-bottom: 21px;
+
+$table-cell-padding: 0.5rem;
+
+$btn-padding-y-lg: 21px;
+$btn-padding-x-lg: 14px;
+$btn-padding-y: 15px;
+$btn-padding-x: 10px;
+$btn-padding-y-sm: 9px;
+$btn-padding-x-sm: 6px;
+
+@import "~bootswatch/dist/flatly/variables";

assets/styles/admin.scss

@@ -1,5 +1,5 @@
-@import "~bootswatch/flatly/variables";
-@import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
+@import "variables";
+// @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
 @import "bootstrap-tagsinput.scss";
 
 /* Page: 'Backend post index'
@@ -24,3 +24,12 @@ body#admin_post_show .post-tags .label-default {
 body#admin_post_show .post-tags .label-default i {
   color: #95A6A7;
 }
+
+.form-control {
+  border-width: .125rem;
+
+  &:focus {
+    color: $blue;
+    box-shadow: none;
+  }
+}