You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2020/12/10 13:32:34 UTC
[myfaces-tobago] branch master updated: TOBAGO-2036: Replace
date-picker implementation with vanillajs-datepicker
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new 0fa0da3 TOBAGO-2036: Replace date-picker implementation with vanillajs-datepicker
0fa0da3 is described below
commit 0fa0da3d7b48d8948c62bbe00c24c1a134e0b5bc
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Thu Dec 10 13:39:29 2020 +0100
TOBAGO-2036: Replace date-picker implementation with vanillajs-datepicker
* fixing "change" event behaviour
---
.../npm/dist/js/tobago-date.js | 32 ++++++++++++------
.../npm/dist/js/tobago-date.js.map | 2 +-
.../tobago-theme-standard/npm/dist/js/tobago.js | 32 ++++++++++++------
.../npm/dist/js/tobago.js.map | 2 +-
.../tobago-theme-standard/npm/ts/tobago-date.ts | 39 ++++++++++++++++------
5 files changed, 75 insertions(+), 32 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js
index 82ce4bc..08849ba 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js
+++ b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js
@@ -42,7 +42,7 @@ class DatePicker extends HTMLElement {
format: pattern,
weekstart: i18n.firstDay
};
- new Datepicker(input, {
+ const datepicker = new Datepicker(input, {
buttonClass: "btn",
orientation: "bottom top auto",
autohide: true,
@@ -50,27 +50,39 @@ class DatePicker extends HTMLElement {
// todo readonly
// todo show week numbers
});
- // XXX these two listeners are needed befor we have a solution for:
+ // XXX these listeners are needed as long as we have a solution for:
// XXX https://github.com/mymth/vanillajs-datepicker/issues/13
+ // XXX the 2nd point is missing the "normal" change event on the input element
input.addEventListener("keyup", (event) => {
- if (event.ctrlKey || event.metaKey
- || event.key.length > 1 && event.key !== "Backspace" && event.key !== "Delete") {
+ // console.info("event -----> ", event.type);
+ if (event.metaKey || event.key.length > 1 && event.key !== "Backspace" && event.key !== "Delete") {
return;
}
// back up user's input when user types printable character or backspace/delete
const target = event.target;
target._oldValue = target.value;
});
+ input.addEventListener("focus", (event) => {
+ // console.info("event -----> ", event.type);
+ this.lastValue = input.value;
+ });
input.addEventListener("blur", (event) => {
+ // console.info("event -----> ", event.type);
const target = event.target;
- if (!document.hasFocus() || target._oldValue === undefined) {
- // no-op when user goes to another window or the input field has no backed-up value
- return;
+ // no-op when user goes to another window or the input field has no backed-up value
+ if (document.hasFocus() && target._oldValue !== undefined) {
+ if (target._oldValue !== target.value) {
+ target.datepicker.setDate(target._oldValue || { clear: true });
+ }
+ delete target._oldValue;
}
- if (target._oldValue !== target.value) {
- target.datepicker.setDate(target._oldValue);
+ if (this.lastValue !== input.value) {
+ input.dispatchEvent(new Event("change"));
}
- delete target._oldValue;
+ });
+ datepicker.element.addEventListener("changeDate", (event) => {
+ // console.info("event -----> ", event.type);
+ input.dispatchEvent(new Event("change"));
});
// simple solution for the picker: currently only open, not close is implemented
(_a = this.querySelector(".tobago-date-picker")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", (event) => {
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js.map b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js.map
index 7c9b901..a43e850 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js.map
+++ b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-date.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago-date.js","sourceRoot":"","sources":["../../ts/tobago-date.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AAEnC,MAAM,UAAW,SAAQ,WAAW;IAElC;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAED,iBAAiB;;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAEhC,6DAA6D;QAC7D,qDAAqD;QACrD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO [...]
\ No newline at end of file
+{"version":3,"file":"tobago-date.js","sourceRoot":"","sources":["../../ts/tobago-date.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AAEnC,MAAM,UAAW,SAAQ,WAAW;IAIlC;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAED,iBAAiB;;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAEhC,6DAA6D;QAC7D,qDAAqD;QACrD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js
index 5860dde..c58b707 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js
+++ b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js
@@ -6896,7 +6896,7 @@
format: pattern,
weekstart: i18n.firstDay
};
- new Datepicker(input, {
+ const datepicker = new Datepicker(input, {
buttonClass: "btn",
orientation: "bottom top auto",
autohide: true,
@@ -6904,27 +6904,39 @@
// todo readonly
// todo show week numbers
});
- // XXX these two listeners are needed befor we have a solution for:
+ // XXX these listeners are needed as long as we have a solution for:
// XXX https://github.com/mymth/vanillajs-datepicker/issues/13
+ // XXX the 2nd point is missing the "normal" change event on the input element
input.addEventListener("keyup", (event) => {
- if (event.ctrlKey || event.metaKey
- || event.key.length > 1 && event.key !== "Backspace" && event.key !== "Delete") {
+ // console.info("event -----> ", event.type);
+ if (event.metaKey || event.key.length > 1 && event.key !== "Backspace" && event.key !== "Delete") {
return;
}
// back up user's input when user types printable character or backspace/delete
const target = event.target;
target._oldValue = target.value;
});
+ input.addEventListener("focus", (event) => {
+ // console.info("event -----> ", event.type);
+ this.lastValue = input.value;
+ });
input.addEventListener("blur", (event) => {
+ // console.info("event -----> ", event.type);
const target = event.target;
- if (!document.hasFocus() || target._oldValue === undefined) {
- // no-op when user goes to another window or the input field has no backed-up value
- return;
+ // no-op when user goes to another window or the input field has no backed-up value
+ if (document.hasFocus() && target._oldValue !== undefined) {
+ if (target._oldValue !== target.value) {
+ target.datepicker.setDate(target._oldValue || { clear: true });
+ }
+ delete target._oldValue;
}
- if (target._oldValue !== target.value) {
- target.datepicker.setDate(target._oldValue);
+ if (this.lastValue !== input.value) {
+ input.dispatchEvent(new Event("change"));
}
- delete target._oldValue;
+ });
+ datepicker.element.addEventListener("changeDate", (event) => {
+ // console.info("event -----> ", event.type);
+ input.dispatchEvent(new Event("change"));
});
// simple solution for the picker: currently only open, not close is implemented
(_a = this.querySelector(".tobago-date-picker")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", (event) => {
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js.map b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js.map
index f092af2..2597620 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js.map
+++ b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago.js","sources":["tobago-listener.js","tobago-utils.js","tobago-bar.js","../../node_modules/popper.js/dist/esm/popper.js","tobago-dropdown.js","../../node_modules/vanillajs-datepicker/js/lib/utils.js","../../node_modules/vanillajs-datepicker/js/lib/date.js","../../node_modules/vanillajs-datepicker/js/lib/date-format.js","../../node_modules/vanillajs-datepicker/js/lib/event.js","../../node_modules/vanillajs-datepicker/js/i18n/base-locales.js","../../node_modules/ [...]
\ No newline at end of file
+{"version":3,"file":"tobago.js","sources":["tobago-listener.js","tobago-utils.js","tobago-bar.js","../../node_modules/popper.js/dist/esm/popper.js","tobago-dropdown.js","../../node_modules/vanillajs-datepicker/js/lib/utils.js","../../node_modules/vanillajs-datepicker/js/lib/date.js","../../node_modules/vanillajs-datepicker/js/lib/date-format.js","../../node_modules/vanillajs-datepicker/js/lib/event.js","../../node_modules/vanillajs-datepicker/js/i18n/base-locales.js","../../node_modules/ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/ts/tobago-date.ts b/tobago-theme/tobago-theme-standard/npm/ts/tobago-date.ts
index 7ff7d27..c87cd70 100644
--- a/tobago-theme/tobago-theme-standard/npm/ts/tobago-date.ts
+++ b/tobago-theme/tobago-theme-standard/npm/ts/tobago-date.ts
@@ -21,6 +21,8 @@ import {Page} from "./tobago-page";
class DatePicker extends HTMLElement {
+ lastValue: string;
+
constructor() {
super();
}
@@ -47,7 +49,7 @@ class DatePicker extends HTMLElement {
weekstart: i18n.firstDay
};
- new Datepicker(input, {
+ const datepicker = new Datepicker(input, {
buttonClass: "btn",
orientation: "bottom top auto",
autohide: true,
@@ -56,27 +58,44 @@ class DatePicker extends HTMLElement {
// todo show week numbers
});
- // XXX these two listeners are needed befor we have a solution for:
+ // XXX these listeners are needed as long as we have a solution for:
// XXX https://github.com/mymth/vanillajs-datepicker/issues/13
+ // XXX the 2nd point is missing the "normal" change event on the input element
input.addEventListener("keyup", (event) => {
- if (event.ctrlKey || event.metaKey
- || event.key.length > 1 && event.key !== "Backspace" && event.key !== "Delete") {
+ // console.info("event -----> ", event.type);
+ if (event.metaKey || event.key.length > 1 && event.key !== "Backspace" && event.key !== "Delete") {
return;
}
// back up user's input when user types printable character or backspace/delete
const target = event.target as any;
target._oldValue = target.value;
});
+
+ input.addEventListener("focus", (event) => {
+ // console.info("event -----> ", event.type);
+ this.lastValue = input.value;
+ });
+
input.addEventListener("blur", (event) => {
+ // console.info("event -----> ", event.type);
const target = event.target as any;
- if (!document.hasFocus() || target._oldValue === undefined) {
- // no-op when user goes to another window or the input field has no backed-up value
- return;
+
+ // no-op when user goes to another window or the input field has no backed-up value
+ if (document.hasFocus() && target._oldValue !== undefined) {
+ if (target._oldValue !== target.value) {
+ target.datepicker.setDate(target._oldValue || {clear: true});
+ }
+ delete target._oldValue;
}
- if (target._oldValue !== target.value) {
- target.datepicker.setDate(target._oldValue);
+
+ if (this.lastValue !== input.value) {
+ input.dispatchEvent(new Event("change"));
}
- delete target._oldValue;
+ });
+
+ datepicker.element.addEventListener("changeDate", (event) => {
+ // console.info("event -----> ", event.type);
+ input.dispatchEvent(new Event("change"));
});
// simple solution for the picker: currently only open, not close is implemented