From 51be60524190bc2de337d9e91b4c2ec7478963b1 Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Thu, 6 Jul 2023 08:59:11 +0200
Subject: [PATCH] [BUGFIX] Provide shortcut button for "Today" in date picker
flatpickr doesn't provide an easy possibility to set the today's date.
To solve this issue, the plugin `shortcut-buttons-flatpickr` is added
with a configuration for the today's date.
Resolves: #100635
Releases: main, 12.4
Change-Id: I882f05ab4486d1b3073008cadb1d0275dd77c8ce
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/79867
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: core-ci <typo3@b13.com>
---
Build/Gruntfile.js | 1 +
.../Sass/component/_datetimepicker.scss | 42 +++++++++++++++++++
.../TypeScript/backend/date-time-picker.ts | 14 +++++++
Build/package-lock.json | 6 +++
Build/package.json | 1 +
Build/types/TYPO3/index.d.ts | 1 +
.../backend/Resources/Public/Css/backend.css | 6 +++
.../Public/JavaScript/date-time-picker.js | 2 +-
.../Private/Language/locallang_core.xlf | 3 ++
.../flatpickr/plugins/shortcut-buttons.min.js | 6 +++
10 files changed, 81 insertions(+), 1 deletion(-)
create mode 100644 typo3/sysext/core/Resources/Public/JavaScript/Contrib/flatpickr/plugins/shortcut-buttons.min.js
diff --git a/Build/Gruntfile.js b/Build/Gruntfile.js
index b730896ee422..31d5588382c0 100644
--- a/Build/Gruntfile.js
+++ b/Build/Gruntfile.js
@@ -669,6 +669,7 @@ module.exports = function (grunt) {
'broadcastchannel.js': 'broadcastchannel-polyfill/index.js',
'flatpickr/flatpickr.min.js': 'flatpickr/dist/flatpickr.js',
'flatpickr/locales.js': 'flatpickr/dist/l10n/index.js',
+ 'flatpickr/plugins/shortcut-buttons.min.js': 'shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr.min.js',
'interact.js': 'interactjs/dist/interact.min.js',
'jquery.js': 'jquery/dist/jquery.js',
'jquery/minicolors.js': '../node_modules/@claviska/jquery-minicolors/jquery.minicolors.min.js',
diff --git a/Build/Sources/Sass/component/_datetimepicker.scss b/Build/Sources/Sass/component/_datetimepicker.scss
index f99ced108773..20c891e35f63 100644
--- a/Build/Sources/Sass/component/_datetimepicker.scss
+++ b/Build/Sources/Sass/component/_datetimepicker.scss
@@ -619,3 +619,45 @@
transform: translate3d(0, 0, 0);
}
}
+
+.shortcut-buttons-flatpickr-wrapper {
+ display: flex;
+ justify-content: center;
+ padding: calc(var(--typo3-component-padding-y) / 2) var(--typo3-component-padding-x);
+ border-top: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
+ background-color: var(--typo3-component-bg);
+ color: var(--typo3-component-color);
+}
+
+.shortcut-buttons-flatpickr-label {
+ align-content: center;
+ display: flex;
+ flex-direction: column;
+ padding: var(--typo3-component-padding-y) var(--typo3-component-padding-x);
+}
+
+.shortcut-buttons-flatpickr-buttons {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+.shortcut-buttons-flatpickr-button {
+ background-color: transparent;
+ color: inherit;
+ border: none;
+ padding: .5em .75em;
+
+ &:hover {
+ color: var(--typo3-component-hover-color);
+ background: var(--typo3-component-hover-bg);
+ outline: 1px solid var(--typo3-component-hover-border-color);
+ outline-offset: -1px;
+ }
+
+ &:focus {
+ color: var(--typo3-component-focus-color);
+ background: var(--typo3-component-focus-bg);
+ outline: 1px solid var(--typo3-component-focus-border-color);
+ outline-offset: -1px;
+ }
+}
diff --git a/Build/Sources/TypeScript/backend/date-time-picker.ts b/Build/Sources/TypeScript/backend/date-time-picker.ts
index 88ae858b41a6..69ad5a72d4b5 100644
--- a/Build/Sources/TypeScript/backend/date-time-picker.ts
+++ b/Build/Sources/TypeScript/backend/date-time-picker.ts
@@ -12,6 +12,7 @@
*/
import flatpickr from 'flatpickr/flatpickr.min';
+import ShortcutButtonsPlugin from 'flatpickr/plugins/shortcut-buttons.min';
import { DateTime } from 'luxon';
import ThrottleEvent from '@typo3/core/event/throttle-event';
@@ -197,6 +198,19 @@ class DateTimePicker {
minuteIncrement: 1,
noCalendar: false,
weekNumbers: true,
+ plugins: [
+ ShortcutButtonsPlugin({
+ theme: 'typo3',
+ button: [
+ {
+ label: top.TYPO3.lang['labels.datepicker.today'] || 'Today'
+ },
+ ],
+ onClick: (index: number, fp: any) => {
+ fp.setDate(new Date());
+ }
+ })
+ ],
};
// set options based on type
diff --git a/Build/package-lock.json b/Build/package-lock.json
index d3088cd5861d..47fef4c7505f 100644
--- a/Build/package-lock.json
+++ b/Build/package-lock.json
@@ -85,6 +85,7 @@
"muuri": "^0.9.5",
"nprogress": "^0.2.0",
"requirejs": "^2.3.6",
+ "shortcut-buttons-flatpickr": "^0.4.0",
"sortablejs": "^1.15.0",
"source-sans": "^3.46.0",
"tablesort": "^5.3.0",
@@ -10582,6 +10583,11 @@
"node": ">= 0.10"
}
},
+ "node_modules/shortcut-buttons-flatpickr": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/shortcut-buttons-flatpickr/-/shortcut-buttons-flatpickr-0.4.0.tgz",
+ "integrity": "sha512-JKmT4my3Hm1e18OvG4Q6RcFhN4WRqqpTMkHrvZ7fup/dp6aTIWGVCHdRYtASkp/FCzDlJh6iCLQ/VcwwNpAMoQ=="
+ },
"node_modules/side-channel": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
diff --git a/Build/package.json b/Build/package.json
index 276c574a91af..fd11e19ee249 100644
--- a/Build/package.json
+++ b/Build/package.json
@@ -164,6 +164,7 @@
"muuri": "^0.9.5",
"nprogress": "^0.2.0",
"requirejs": "^2.3.6",
+ "shortcut-buttons-flatpickr": "^0.4.0",
"sortablejs": "^1.15.0",
"source-sans": "^3.46.0",
"tablesort": "^5.3.0",
diff --git a/Build/types/TYPO3/index.d.ts b/Build/types/TYPO3/index.d.ts
index 8b611cdef064..5e7a12a9ecef 100644
--- a/Build/types/TYPO3/index.d.ts
+++ b/Build/types/TYPO3/index.d.ts
@@ -81,6 +81,7 @@ declare module 'muuri';
declare module 'codemirror';
declare module 'flatpickr/flatpickr.min';
declare module 'flatpickr/locales';
+declare module 'flatpickr/plugins/shortcut-buttons.min';
declare module '@typo3/backend/legacy-tree';
declare module '@typo3/install/chosen.jquery.min';
declare module '@typo3/dashboard/contrib/chartjs';
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index f86e71c0afe0..9ab9e18d1653 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3390,6 +3390,12 @@ th[aria-sort]:not([data-sort-method=none]):after{visibility:visible;opacity:.4}
from{opacity:0;transform:translate3d(0,-20px,0)}
to{opacity:1;transform:translate3d(0,0,0)}
}
+.shortcut-buttons-flatpickr-wrapper{display:flex;justify-content:center;padding:calc(var(--typo3-component-padding-y)/ 2) var(--typo3-component-padding-x);border-top:var(--typo3-component-border-width) solid var(--typo3-component-border-color);background-color:var(--typo3-component-bg);color:var(--typo3-component-color)}
+.shortcut-buttons-flatpickr-label{align-content:center;display:flex;flex-direction:column;padding:var(--typo3-component-padding-y) var(--typo3-component-padding-x)}
+.shortcut-buttons-flatpickr-buttons{display:flex;flex-flow:row wrap}
+.shortcut-buttons-flatpickr-button{background-color:transparent;color:inherit;border:none;padding:.5em .75em}
+.shortcut-buttons-flatpickr-button:hover{color:var(--typo3-component-hover-color);background:var(--typo3-component-hover-bg);outline:1px solid var(--typo3-component-hover-border-color);outline-offset:-1px}
+.shortcut-buttons-flatpickr-button:focus{color:var(--typo3-component-focus-color);background:var(--typo3-component-focus-bg);outline:1px solid var(--typo3-component-focus-border-color);outline-offset:-1px}
:root{--svgtree-drag-info-bg:#fff;--svgtree-drag-info-color:#000;--svgtree-drag-info-icon-size:16px;--svgtree-drag-info-border-radius:2px;--svgtree-drag-info-padding-y:.5rem;--svgtree-drag-info-padding-x:.75rem;--svgtree-drag-dropindicator-color:#3393eb;--svgtree-structure-line-color:#ddd;--svgtree-node-color:#000;--svgtree-node-bg:transparent;--svgtree-node-border-color:transparent;--svgtree-node-version-bg:rgba(247, 200, 152, 0.5);--svgtree-node-version-border-color:#c6a07a;--svgtree-node-focus-bg:rgba(230, 242, 253, 0.5);--svgtree-node-focus-border-color:#3393eb;--svgtree-node-hover-bg:rgba(250, 250, 250, 0.5);--svgtree-node-hover-border-color:#d7d7d7;--svgtree-node-selected-bg:rgba(255, 255, 255, 0.5);--svgtree-node-selected-border-color:#d7d7d7;--svgtree-highlight-color:#0078e6;--svgtree-info-bg:#c5ddf3;--svgtree-info-color:#000}
.svg-tree{position:relative}
.svg-tree-loader{display:none;position:absolute;width:100%;height:calc(100% - var(--module-docheader-height));top:var(--module-docheader-height);left:0;text-align:center;background:rgba(0,0,0,.3);z-index:3000;-webkit-user-select:none;-moz-user-select:none;user-select:none}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/date-time-picker.js b/typo3/sysext/backend/Resources/Public/JavaScript/date-time-picker.js
index 60daeefa3e2e..20918103d534 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/date-time-picker.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/date-time-picker.js
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-import flatpickr from"flatpickr/flatpickr.min.js";import{DateTime}from"luxon";import ThrottleEvent from"@typo3/core/event/throttle-event.js";class DateTimePicker{constructor(){this.format=(void 0!==opener?.top?.TYPO3?opener.top:top).TYPO3.settings.DateTimePicker.DateFormat}static formatDateForHiddenField(e,t){return"time"!==t&&"timesec"!==t||(e=e.set({year:1970,month:1,day:1})),e.toISO({suppressMilliseconds:!0})}initialize(e){if(!(e instanceof HTMLInputElement)||void 0!==e.dataset.datepickerInitialized)return;let t=document.documentElement.lang;t&&"en"!==t?"ch"===t&&(t="zh"):t="default",e.dataset.datepickerInitialized="1",import("flatpickr/locales.js").then((()=>{this.initializeField(e,t)}))}initializeField(e,t){const a=this.getScrollEvent(),n=this.getDateOptions(e);n.locale=t,n.onOpen=[()=>{a.bindTo(document.querySelector(".t3js-module-body"))}],n.onClose=()=>{a.release()};const i=flatpickr(e,n);e.addEventListener("input",(()=>{const e=i._input.value,t=i.parseDate(e);e===i.formatDate(t,i.config.dateFormat)&&i.setDate(e)})),e.addEventListener("keyup",(e=>{"Escape"===e.key&&i.close()})),e.addEventListener("change",(t=>{t.stopImmediatePropagation();const a=t.target,n=e.parentElement.parentElement.querySelector('input[type="hidden"]');if(""!==a.value){const e=a.dataset.dateType,t=DateTime.fromFormat(a.value,a._flatpickr.config.dateFormat,{zone:"utc"});t.isValid?n.value=DateTimePicker.formatDateForHiddenField(t,e):a.value=DateTimePicker.formatDateForHiddenField(DateTime.fromISO(n.value,{zone:"utc"}),e)}else n.value="";a.dispatchEvent(new Event("formengine.dp.change"))}))}getScrollEvent(){return new ThrottleEvent("scroll",(()=>{const e=document.querySelector(".flatpickr-input.active");if(null===e)return;const t=e.getBoundingClientRect(),a=e._flatpickr.calendarContainer.offsetHeight;let n,i;window.innerHeight-t.bottom<a&&t.top>a?(n=t.y-a-2,i="arrowBottom"):(n=t.y+t.height+2,i="arrowTop"),e._flatpickr.calendarContainer.style.top=n+"px",e._flatpickr.calendarContainer.classList.remove("arrowBottom","arrowTop"),e._flatpickr.calendarContainer.classList.add(i)}),15)}getDateOptions(e){const t=this.format,a=e.dataset.dateType,n=new Date,i={allowInput:!0,dateFormat:"",defaultDate:e.value,defaultHour:n.getHours(),defaultMinute:n.getMinutes(),enableSeconds:!1,enableTime:!1,formatDate:(e,t)=>DateTime.fromJSDate(e).toFormat(t),parseDate:(e,t)=>DateTime.fromFormat(e,t).toJSDate(),maxDate:"",minDate:"",minuteIncrement:1,noCalendar:!1,weekNumbers:!0};switch(a){case"datetime":i.dateFormat=t[1],i.enableTime=!0;break;case"date":i.dateFormat=t[0];break;case"time":i.dateFormat="HH:mm",i.enableTime=!0,i.noCalendar=!0;break;case"timesec":i.dateFormat="HH:mm:ss",i.enableSeconds=!0,i.enableTime=!0,i.noCalendar=!0;break;case"year":i.dateFormat="yyyy"}return"undefined"!==e.dataset.dateMindate&&(i.minDate=e.dataset.dateMindate),"undefined"!==e.dataset.dateMaxdate&&(i.maxDate=e.dataset.dateMaxdate),i}}export default new DateTimePicker;
\ No newline at end of file
+import flatpickr from"flatpickr/flatpickr.min.js";import ShortcutButtonsPlugin from"flatpickr/plugins/shortcut-buttons.min.js";import{DateTime}from"luxon";import ThrottleEvent from"@typo3/core/event/throttle-event.js";class DateTimePicker{constructor(){this.format=(void 0!==opener?.top?.TYPO3?opener.top:top).TYPO3.settings.DateTimePicker.DateFormat}static formatDateForHiddenField(e,t){return"time"!==t&&"timesec"!==t||(e=e.set({year:1970,month:1,day:1})),e.toISO({suppressMilliseconds:!0})}initialize(e){if(!(e instanceof HTMLInputElement)||void 0!==e.dataset.datepickerInitialized)return;let t=document.documentElement.lang;t&&"en"!==t?"ch"===t&&(t="zh"):t="default",e.dataset.datepickerInitialized="1",import("flatpickr/locales.js").then((()=>{this.initializeField(e,t)}))}initializeField(e,t){const a=this.getScrollEvent(),n=this.getDateOptions(e);n.locale=t,n.onOpen=[()=>{a.bindTo(document.querySelector(".t3js-module-body"))}],n.onClose=()=>{a.release()};const o=flatpickr(e,n);e.addEventListener("input",(()=>{const e=o._input.value,t=o.parseDate(e);e===o.formatDate(t,o.config.dateFormat)&&o.setDate(e)})),e.addEventListener("keyup",(e=>{"Escape"===e.key&&o.close()})),e.addEventListener("change",(t=>{t.stopImmediatePropagation();const a=t.target,n=e.parentElement.parentElement.querySelector('input[type="hidden"]');if(""!==a.value){const e=a.dataset.dateType,t=DateTime.fromFormat(a.value,a._flatpickr.config.dateFormat,{zone:"utc"});t.isValid?n.value=DateTimePicker.formatDateForHiddenField(t,e):a.value=DateTimePicker.formatDateForHiddenField(DateTime.fromISO(n.value,{zone:"utc"}),e)}else n.value="";a.dispatchEvent(new Event("formengine.dp.change"))}))}getScrollEvent(){return new ThrottleEvent("scroll",(()=>{const e=document.querySelector(".flatpickr-input.active");if(null===e)return;const t=e.getBoundingClientRect(),a=e._flatpickr.calendarContainer.offsetHeight;let n,o;window.innerHeight-t.bottom<a&&t.top>a?(n=t.y-a-2,o="arrowBottom"):(n=t.y+t.height+2,o="arrowTop"),e._flatpickr.calendarContainer.style.top=n+"px",e._flatpickr.calendarContainer.classList.remove("arrowBottom","arrowTop"),e._flatpickr.calendarContainer.classList.add(o)}),15)}getDateOptions(e){const t=this.format,a=e.dataset.dateType,n=new Date,o={allowInput:!0,dateFormat:"",defaultDate:e.value,defaultHour:n.getHours(),defaultMinute:n.getMinutes(),enableSeconds:!1,enableTime:!1,formatDate:(e,t)=>DateTime.fromJSDate(e).toFormat(t),parseDate:(e,t)=>DateTime.fromFormat(e,t).toJSDate(),maxDate:"",minDate:"",minuteIncrement:1,noCalendar:!1,weekNumbers:!0,plugins:[ShortcutButtonsPlugin({theme:"typo3",button:[{label:top.TYPO3.lang["labels.datepicker.today"]||"Today"}],onClick:(e,t)=>{t.setDate(new Date)}})]};switch(a){case"datetime":o.dateFormat=t[1],o.enableTime=!0;break;case"date":o.dateFormat=t[0];break;case"time":o.dateFormat="HH:mm",o.enableTime=!0,o.noCalendar=!0;break;case"timesec":o.dateFormat="HH:mm:ss",o.enableSeconds=!0,o.enableTime=!0,o.noCalendar=!0;break;case"year":o.dateFormat="yyyy"}return"undefined"!==e.dataset.dateMindate&&(o.minDate=e.dataset.dateMindate),"undefined"!==e.dataset.dateMaxdate&&(o.maxDate=e.dataset.dateMaxdate),o}}export default new DateTimePicker;
\ No newline at end of file
diff --git a/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf b/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
index eed4d633fb8e..e16c504b34e5 100644
--- a/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
+++ b/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
@@ -1503,6 +1503,9 @@ Do you want to refresh it now?</source>
<trans-unit id="message.confirmation" resname="message.confirmation">
<source>Are you sure?</source>
</trans-unit>
+ <trans-unit id="labels.datepicker.today" resname="labels.datepicker.today">
+ <source>Today</source>
+ </trans-unit>
</body>
</file>
</xliff>
diff --git a/typo3/sysext/core/Resources/Public/JavaScript/Contrib/flatpickr/plugins/shortcut-buttons.min.js b/typo3/sysext/core/Resources/Public/JavaScript/Contrib/flatpickr/plugins/shortcut-buttons.min.js
new file mode 100644
index 000000000000..38dcac484cdb
--- /dev/null
+++ b/typo3/sysext/core/Resources/Public/JavaScript/Contrib/flatpickr/plugins/shortcut-buttons.min.js
@@ -0,0 +1,6 @@
+export default (new function() {
+ const module = { exports: {} }, exports = module.exports, define = null;
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ShortcutButtonsPlugin=e():t.ShortcutButtonsPlugin=e()}(window,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};Object.defineProperty(e,"__esModule",{value:!0}),e.ShortcutButtonsPlugin=void 0;var o={theme:"light"},i=new Set(["accesskey","aria-label","class","tabindex"]);e.ShortcutButtonsPlugin=function(t){var e=r(r({},o),t);return function(t){var n;function r(n){n.stopPropagation(),n.preventDefault();var r=n.target;if("button"===r.tagName.toLowerCase()&&void 0!==e.onClick)for(var o=parseInt(r.dataset.index,10),i=0,a=Array.isArray(e.onClick)?e.onClick:[e.onClick];i<a.length;i++){var u=a[i];"function"==typeof u&&u(o,t)}}function o(e){var n=e.target;"Tab"===e.key&&"button"===n.tagName.toLowerCase()&&(e.shiftKey&&!n.previousSibling||!e.shiftKey&&!n.nextSibling)&&(e.preventDefault(),t.element.focus())}return{onReady:function(){if((n=document.createElement("div")).classList.add("shortcut-buttons-flatpickr-wrapper",e.theme),void 0!==e.label&&e.label.length){var a=document.createElement("div");a.classList.add("shortcut-buttons-flatpickr-label"),a.textContent=e.label,n.appendChild(a)}var u=document.createElement("div");u.classList.add("shortcut-buttons-flatpickr-buttons"),(Array.isArray(e.button)?e.button:[e.button]).forEach((function(e,n){var r=document.createElement("button");r.type="button",r.classList.add("shortcut-buttons-flatpickr-button"),r.textContent=e.label,r.dataset.index=String(n),void 0!==e.attributes&&function(t,e){Object.keys(e).filter((function(t){return i.has(t)})).forEach((function(n){var r;"class"!==n?t.setAttribute(n,e[n]):(r=t.classList).add.apply(r,e[n].split(" "))}))}(r,e.attributes),u.appendChild(r),t.pluginElements.push(r)})),n.appendChild(u),t.calendarContainer.appendChild(n),n.addEventListener("click",r),n.addEventListener("keydown",o)},onDestroy:function(){n.removeEventListener("keydown",o),n.removeEventListener("click",r),n=void 0}}}}}]).ShortcutButtonsPlugin}));
+
+ this.__default_export = module.exports;
+}).__default_export;
\ No newline at end of file
--
GitLab