public inbox for [email protected]  

help / color / mirror / Atom feed

From: Pradip Parkale <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility).
Date: Sat, 7 Mar 2020 18:59:46 +0530
Message-ID: <CAJ9T6SsfnVFvZaY+ysBi+WQ3Ofr=Rw58AApzVXb6T1q1h7c4cA@mail.gmail.com> (raw)

Hi Hackers,

Attached is a patch to change the Datetime picker value using a keyboard.


-- 
Thanks & Regards,
Pradip Parkale
QMG, EnterpriseDB Corporation


Attachments:

  [application/octet-stream] RM4237.patch (4.3K, 3-RM4237.patch)
  download | inline diff:
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 06b2159d5..3090fd254 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -2821,6 +2821,7 @@ define([
         'focusout input': 'closePicker',
         'change.datetimepicker': 'onChange',
         'click .input-group': 'togglePicker',
+        'keydown .datetimepicker-input': 'keyboardEvent',
       },
       togglePicker: function() {
         if (this.has_datepicker) {
@@ -2846,6 +2847,109 @@ define([
         '</div>',
         '<% } %>',
       ].join('\n')),
+
+      keyboardEvent: function(event) {
+        let stopBubble = false;
+        if (!event.altKey && event.keyCode == 38) {
+          this.up();
+        }
+        if (!event.altKey && event.keyCode == 40) {
+          this.down();
+        }
+        if (event.keyCode == 37) {
+          this.left();
+        }
+        if (event.keyCode == 39) {
+          this.right();
+        }
+        if (event.keyCode == 27){
+          this.$el.find('input').datetimepicker('hide');
+          stopBubble = true;
+        }
+        if (event.keyCode == 13){
+          if ((this.$el.find('.datepicker').is(':visible')) || (this.$el.find('.timepicker').is(':visible'))){
+            this.$el.find('input').datetimepicker('hide');
+          }else{
+            this.$el.find('input').datetimepicker('show');
+          }
+        }
+        if (event.altKey && event.keyCode == 84) {
+          this.timePicker();
+        }
+        if(event.altKey && event.keyCode == 38){
+          this.controlUp();
+        }
+        if(event.altKey && event.keyCode == 40){
+          this.controlDown();
+        }
+
+        if(stopBubble) {
+          event.stopImmediatePropagation();
+        }
+      },
+
+      down: function() {
+        if (this.$el.find('.datepicker').is(':visible')) {
+          let $el = this.$el.find('.datetimepicker-input');
+          let currdate = $el.data('datetimepicker').date().clone();
+          $el.datetimepicker('date', currdate.add(7, 'd'));
+        } else {
+          let $el = this.$el.find('.datetimepicker-input');
+          let currdate = $el.data('datetimepicker').date().clone();
+          $el.datetimepicker('date', currdate.subtract(1, 'm'));
+        }
+      },
+
+      up: function() {
+        if (this.$el.find('.datepicker').is(':visible')) {
+          let $el = this.$el.find('.datetimepicker-input');
+          let currdate = $el.data('datetimepicker').date().clone();
+          $el.datetimepicker('date', currdate.subtract(7, 'd'));
+        } else {
+          let $el = this.$el.find('.datetimepicker-input');
+          let currdate = $el.data('datetimepicker').date().clone();
+          $el.datetimepicker('date', currdate.add(1, 'm'));
+        }
+      },
+
+      left: function() {
+        if (this.$el.find('.datepicker').is(':visible')) {
+          let $el = this.$el.find('.datetimepicker-input');
+          let currdate = $el.data('datetimepicker').date().clone();
+          $el.datetimepicker('date', currdate.subtract(1, 'd'));
+        }
+      },
+
+      right: function() {
+        if (this.$el.find('.datepicker').is(':visible')) {
+          let $el = this.$el.find('.datetimepicker-input');
+          let currdate = $el.data('datetimepicker').date().clone();
+          $el.datetimepicker('date', currdate.add(1, 'd'));
+        }
+      },
+
+      timePicker:function() {
+        if (this.$el.find('.timepicker').is(':visible')){
+          this.$el.find('.fa-calendar').click();
+        }else{
+          this.$el.find('.fa-clock-o').click();
+        }
+      },
+
+      controlUp:function() {
+        this.$el.find('.fa-clock-o').click();
+        let $el = this.$el.find('.datetimepicker-input');
+        let currdate = $el.data('datetimepicker').date().clone();
+        $el.datetimepicker('date', currdate.add(1, 'h'));
+      },
+
+      controlDown:function() {
+        this.$el.find('.fa-clock-o').click();
+        let $el = this.$el.find('.datetimepicker-input');
+        let currdate = $el.data('datetimepicker').date().clone();
+        $el.datetimepicker('date', currdate.subtract(1, 'h'));
+      },
+
       render: function() {
         var field = _.defaults(this.field.toJSON(), this.defaults),
           attributes = this.model.toJSON(),

view thread (5+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility).
  In-Reply-To: <CAJ9T6SsfnVFvZaY+ysBi+WQ3Ofr=Rw58AApzVXb6T1q1h7c4cA@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox