From 4de6537af807014233615bda76f461784b8da258 Mon Sep 17 00:00:00 2001 From: lukemelia Date: Sun, 23 Apr 2006 06:23:03 +0000 Subject: [PATCH] Adds keyboard shortcuts to any field that has a calendar: 't' input today's date '+' or '=' increment the date in the field by one day '-' decrement the date in the field by one day When the calendar is visible, the shortcuts play nicely with it. If the calendar is not visible they still work properly, which makes them useful for keyboard-only next action input. Pressing '+' when no date is entered in the field will set the date to tomorrow, and likewise '-' with no date entered will set the date to yesterday. Closes #264 git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@231 a4c988fc-2ded-0310-b66e-134b36920a42 --- tracks/app/helpers/todo_helper.rb | 2 +- .../app/views/shared/_add_new_item_form.rhtml | 2 +- tracks/public/javascripts/calendar-setup.js | 94 +++++++++++++++++++ 3 files changed, 96 insertions(+), 2 deletions(-) diff --git a/tracks/app/helpers/todo_helper.rb b/tracks/app/helpers/todo_helper.rb index 25c60f53..535032e4 100644 --- a/tracks/app/helpers/todo_helper.rb +++ b/tracks/app/helpers/todo_helper.rb @@ -104,7 +104,7 @@ module TodoHelper week_starts = @user.preferences["week_starts"] str = "Calendar.setup({ ifFormat:\"#{date_format}\"" str << ",firstDay:#{week_starts},showOthers:true,range:[2004, 2010]" - str << ",step:1,inputField:\"" + input_field + "\",cache:true,align:\"TR\" })" + str << ",step:1,inputField:\"" + input_field + "\",cache:true,align:\"TR\" })\n" javascript_tag str end diff --git a/tracks/app/views/shared/_add_new_item_form.rhtml b/tracks/app/views/shared/_add_new_item_form.rhtml index 65043f9d..d099a881 100644 --- a/tracks/app/views/shared/_add_new_item_form.rhtml +++ b/tracks/app/views/shared/_add_new_item_form.rhtml @@ -44,7 +44,7 @@ <% end -%>
-<%= text_field("todo", "due", "size" => 10, "class" => "Date", "onFocus" => "Calendar.setup", "tabindex" => 5) %> +<%= text_field("todo", "due", "size" => 10, "class" => "Date", "onFocus" => "Calendar.setup", "tabindex" => 5, "autocomplete" => "off") %> <% if controller.controller_name == "project" -%> <%= hidden_field( "todo", "project_id", "value" => "#{@project.id}") %> diff --git a/tracks/public/javascripts/calendar-setup.js b/tracks/public/javascripts/calendar-setup.js index b8085132..81bcb34b 100644 --- a/tracks/public/javascripts/calendar-setup.js +++ b/tracks/public/javascripts/calendar-setup.js @@ -196,5 +196,99 @@ Calendar.setup = function (params) { return false; }; + if (params.inputField) { + new DateDueKeyboardShortcutSupport(params.inputField, params.ifFormat, cal); + } + return cal; }; + +/* Adds keyboard shortcuts to the passed in date field: + * + * 't' input today's date + * '+' or '=' increment the date in the field by one day + * '-' decrement the date in the field by one day + * + * If the calendar is visible, the shortcuts play nicely with it. If not, + * they still work properly. Pressing '+' when no date is entered in the + * field will set the date to tomorrow, and likewise '-' with no date + * entered will set the date to yesterday. + */ +DateDueKeyboardShortcutSupport = Class.create(); +DateDueKeyboardShortcutSupport.prototype = { + initialize: function(element, dateFormat) { + this.element = $(element); + this.dateFormat = dateFormat || "%Y/%m/%d"; + Event.observe(this.element,'keypress',this.onkeypress.bindAsEventListener(this)); + title = this.element.getAttributeNode("title"); + tooltip = 'Shortcuts: [t] today; [-] previous day; [+] next day; Click to show calendar'; + if (title && title.value) + { + this.element.setAttribute("title", title.value + ' (' + tooltip + ')'); + } + else + { + this.element.setAttribute("title", tooltip); + } + }, + onkeypress: function(event) { + handled = true; + switch (this.getCharFromKeyPressEvent(event)) { + case "t": + this.setTextBoxToTodaysDate(); + break; + case "+": + case "=": + this.setTextBoxToNextDay(); + break; + case "-": + this.setTextBoxToPreviousDay(); + break; + default: + handled = false; + break; + } + if (handled) { + this.cancel(event); + } + }, + setTextBoxToTodaysDate : function() { + today = new Date(); + this.setDate(today); + }, + + setTextBoxToNextDay : function() { + this.addDaysToTextBoxDate(1); + }, + + setTextBoxToPreviousDay : function() { + this.addDaysToTextBoxDate(-1); + }, + + addDaysToTextBoxDate : function(numDays) { + date = Date.parseDate(this.element.value, this.dateFormat); + date.setDate(date.getDate() + numDays); + this.setDate(date); + }, + + setDate : function(date) { + this.element.value = date.print(this.dateFormat); + if (window.calendar) { + window.calendar.setDate(date); + } + }, + + cancel : function(event) { + if (event.preventDefault) { + event.preventDefault(); + } + event.returnValue = false; + }, + + getCharFromKeyPressEvent : function(event) { + var charCode = (event.charCode) ? event.charCode : + ((event.keyCode) ? event.keyCode : + ((event.which) ? event.which : 0)); + return String.fromCharCode(charCode); + } +};