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/05 13:22:11 UTC

[myfaces-tobago] branch tobago-4.x updated: 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 tobago-4.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/tobago-4.x by this push:
     new b9cd1c6  TOBAGO-1996 Delete and arrow keys doesn't work properly on tc:date
b9cd1c6 is described below

commit b9cd1c63edca8d138a076fad644f1c897be5f554
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Jul 5 15:02:26 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
---
 .../_version/js/tobago-calendar.js                 | 80 ++++++++++++++++++++--
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-calendar.js b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-calendar.js
index f6a1d2a..bfddbd9 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-calendar.js
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-calendar.js
@@ -41,16 +41,83 @@ Tobago.DateTime.init = function (elements) {
             close: 'fa fa-times'
           },
           keyBinds: {
-            enter: function () {
-              $date.trigger(jQuery.Event("keypress", {
-                which: 13,
-                target: $date[0]
-              }));
+            left: function (widget) {
+              if (!widget) {
+                var $input = $date[0];
+                if ($input.selectionStart === $input.selectionEnd) {
+                  if ($input.selectionStart > 0 || $input.selectionStart > 0) {
+                    $input.selectionStart--;
+                    $input.selectionEnd--;
+                  }
+                } else {
+                  $input.selectionEnd = $input.selectionStart;
+                }
+              } else if (widget.find('.datepicker').is(':visible')) {
+                this.date(this.date().clone().subtract(1, 'd'));
+              }
+            },
+            right: function (widget) {
+              if (!widget) {
+                var $input = $date[0];
+                if ($input.selectionStart === $input.selectionEnd) {
+                  if ($input.selectionStart > 0 || $input.selectionStart < $input.value.length) {
+                    $input.selectionEnd++;
+                    $input.selectionStart++;
+                  }
+                } else {
+                  $input.selectionStart = $input.selectionEnd;
+                }
+              } else if (widget.find('.datepicker').is(':visible')) {
+                this.date(this.date().clone().add(1, 'd'));
+              }
+            },
+            enter: function (widget) {
+              if (widget && widget.find('.datepicker').is(':visible')) {
+                this.hide();
+                fixKey(13);
+              } else {
+                $date.trigger(jQuery.Event("keypress", {
+                  which: 13,
+                  target: $date[0]
+                }));
+              }
+            },
+            escape: function (widget) {
+              if (widget && widget.find('.datepicker').is(':visible')) {
+                this.hide();
+                fixKey(27);
+              }
+            },
+            'delete': function () {
+              var $input = $date[0];
+              if ($input.selectionStart < $input.value.length) {
+                var selectionStart = $input.selectionStart;
+                var selectionEnd = $input.selectionEnd;
+
+                if (selectionStart === selectionEnd && selectionStart < $input.value.length) {
+                  selectionEnd++;
+                }
+                $input.value = $input.value.substr(0, selectionStart)
+                    + $input.value.substr(selectionEnd, $input.value.length);
+
+                $input.selectionEnd = selectionStart;
+                $input.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) {
+          var keyupEvent = jQuery.Event("keyup");
+          keyupEvent.which = keyCode;
+          $date.trigger(keyupEvent);
+        }
+
         var i18n = $date.data("tobago-date-time-i18n");
         if (i18n) {
           var monthNames = i18n.monthNames;
@@ -116,8 +183,7 @@ Tobago.DateTime.init = function (elements) {
               'bottom': 'auto',
               'left': left + 'px'
             });
-          }
-          else if (datepicker.hasClass('top')) {
+          } else if (datepicker.hasClass('top')) {
             top = $div.offset().top - datepicker.outerHeight();
             left = $div.offset().left;
             datepicker.css({