You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2019/07/15 15:26:00 UTC
[myfaces-tobago] 02/02: TOBAGO-1996 Delete and arrow keys doesn't
work properly on tc:date
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit b37dba1d132896abcda26503458442b3e42b969f
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Jul 15 17:25:44 2019 +0200
TOBAGO-1996 Delete and arrow keys doesn't work properly on tc:date
* simulate right, left, DEL key behavior
* if escape or enter close the datetimepicker widget, a keyup event is
fired manually
---
.../src/main/npm/ts/tobago-calendar.ts | 80 ++++++++++++++++++++--
.../src/main/npm/ts/tobago-utils.ts | 4 ++
2 files changed, 78 insertions(+), 6 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-calendar.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-calendar.ts
index 2f2fdee..bb249ce 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-calendar.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-calendar.ts
@@ -40,17 +40,85 @@ class DateTime {
close: 'fa fa-times'
},
keyBinds: {
- enter: function () {
- //jQuery because used by datetimepicker
- jQuery(date).trigger(jQuery.Event("keypress", {
- which: 13,
- target: date
- }));
+ left: function ($widget) {
+ const widget: HTMLDivElement = <HTMLDivElement>$widget[0];
+ if (widget === undefined) {
+ if (date.selectionStart === date.selectionEnd) {
+ if (date.selectionStart > 0 || date.selectionStart > 0) {
+ date.selectionStart--;
+ date.selectionEnd--;
+ }
+ } else {
+ date.selectionEnd = date.selectionStart;
+ }
+ } else if (DomUtils.isVisible(widget.querySelector(".datepicker"))) {
+ this.date(this.date().clone().subtract(1, 'd'));
+ }
+ },
+ right: function ($widget) {
+ const widget: HTMLDivElement = <HTMLDivElement>$widget[0];
+ if (widget === undefined) {
+ if (date.selectionStart === date.selectionEnd) {
+ if (date.selectionStart > 0 || date.selectionStart < date.value.length) {
+ date.selectionEnd++;
+ date.selectionStart++;
+ }
+ } else {
+ date.selectionStart = date.selectionEnd;
+ }
+ } else if (DomUtils.isVisible(widget.querySelector(".datepicker"))) {
+ this.date(this.date().clone().add(1, 'd'));
+ }
+ },
+ enter: function ($widget) {
+ const widget: HTMLDivElement = <HTMLDivElement>$widget[0];
+ if (widget !== undefined && DomUtils.isVisible(widget.querySelector(".datepicker"))) {
+ this.hide();
+ fixKey(13);
+ } else {
+ //jQuery because used by datetimepicker
+ jQuery(date).trigger(jQuery.Event("keypress", {
+ which: 13,
+ target: date
+ }));
+ }
+ },
+ escape: function ($widget) {
+ const widget: HTMLDivElement = <HTMLDivElement>$widget[0];
+ if (widget !== undefined && DomUtils.isVisible(widget.querySelector(".datepicker"))) {
+ this.hide();
+ fixKey(27);
+ }
+ },
+ 'delete': function () {
+ if (date.selectionStart < date.value.length) {
+ const selectionStart = date.selectionStart;
+ let selectionEnd = date.selectionEnd;
+
+ if (selectionStart === selectionEnd && selectionStart < date.value.length) {
+ selectionEnd++;
+ }
+ date.value = date.value.substr(0, selectionStart)
+ + date.value.substr(selectionEnd, date.value.length);
+
+ date.selectionEnd = selectionStart;
+ date.selectionStart = selectionStart;
+ }
}
},
widgetParent: '.tobago-page-menuStore'
};
+ /**
+ * After ESC or ENTER is pressed we need to fire the keyup event manually.
+ * see: https://github.com/tempusdominus/bootstrap-4/issues/159
+ */
+ function fixKey(keyCode) {
+ let keyupEvent = jQuery.Event("keyup");
+ keyupEvent.which = keyCode;
+ jQuery(date).trigger(keyupEvent);
+ }
+
const i18n = date.dataset.tobagoDateTimeI18n ? JSON.parse(date.dataset.tobagoDateTimeI18n) : undefined;
if (i18n) {
const monthNames = i18n.monthNames;
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
index 1ff9eec..0605945 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
@@ -128,6 +128,10 @@ export class DomUtils {
return {top: top, left: left};
}
+ static isVisible(element: HTMLElement) {
+ return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
+ }
+
/**
*
* @param id A JSF client id, type=string. Example: escapeClientId("page:input") -> "#page\\:input"