comparison plugins/jqueryui/js/jquery-ui-accessible-datepicker.js @ 0:4681f974d28b

vanilla 1.3.3 distro, I hope
author Charlie Root
date Thu, 04 Jan 2018 15:52:31 -0500
parents
children bf99236cc5cd
comparison
equal deleted inserted replaced
-1:000000000000 0:4681f974d28b
1 /*! jQuery UI Accessible Datepicker extension
2 * (to be appended to jquery-ui-*.custom.min.js)
3 *
4 * @licstart The following is the entire license notice for the
5 * JavaScript code in this page.
6 *
7 * Copyright 2014 Kolab Systems AG
8 *
9 * The JavaScript code in this page is free software: you can
10 * redistribute it and/or modify it under the terms of the GNU
11 * General Public License (GNU GPL) as published by the Free Software
12 * Foundation, either version 3 of the License, or (at your option)
13 * any later version. The code is distributed WITHOUT ANY WARRANTY;
14 * without even the implied warranty of MERCHANTABILITY or FITNESS
15 * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
16 *
17 * As additional permission under GNU GPL version 3 section 7, you
18 * may distribute non-source (e.g., minimized or compacted) forms of
19 * that code without the copy of the GNU GPL normally required by
20 * section 4, provided you include this license notice and a URL
21 * through which recipients can access the Corresponding Source.
22 *
23 * @licend The above is the entire license notice
24 * for the JavaScript code in this page.
25 */
26
27 (function($, undefined) {
28
29 // references to super class methods
30 var __newInst = $.datepicker._newInst;
31 var __updateDatepicker = $.datepicker._updateDatepicker;
32 var __connectDatepicker = $.datepicker._connectDatepicker;
33 var __showDatepicker = $.datepicker._showDatepicker;
34 var __hideDatepicker = $.datepicker._hideDatepicker;
35
36 // "extend" singleton instance methods
37 $.extend($.datepicker, {
38
39 /* Create a new instance object */
40 _newInst: function(target, inline) {
41 var that = this, inst = __newInst.call(this, target, inline);
42
43 if (inst.inline) {
44 // attach keyboard event handler
45 inst.dpDiv.on('keydown.datepicker', '.ui-datepicker-calendar', function(event) {
46 // we're only interested navigation keys
47 if ($.inArray(event.keyCode, [ 13, 33, 34, 35, 36, 37, 38, 39, 40]) == -1) {
48 return;
49 }
50 event.stopPropagation();
51 event.preventDefault();
52 inst._hasfocus = true;
53
54 var activeCell;
55 switch (event.keyCode) {
56 case $.ui.keyCode.ENTER:
57 if ((activeCell = $('.' + that._dayOverClass, inst.dpDiv).get(0) || $('.' + that._currentClass, inst.dpDiv).get(0))) {
58 that._selectDay(inst.input, inst.selectedMonth, inst.selectedYear, activeCell);
59 }
60 break;
61
62 case $.ui.keyCode.PAGE_UP:
63 that._adjustDate(inst.input, -that._get(inst, 'stepMonths'), 'M');
64 break;
65 case $.ui.keyCode.PAGE_DOWN:
66 that._adjustDate(inst.input, that._get(inst, 'stepMonths'), 'M');
67 break;
68
69 default:
70 return that._cursorKeydown(event, inst);
71 }
72 })
73 .attr('role', 'region')
74 .attr('aria-labelledby', inst.id + '-dp-title');
75 }
76 else {
77 var widgetId = inst.dpDiv.attr('id') || inst.id + '-dp-widget';
78 inst.dpDiv.attr('id', widgetId)
79 .attr('aria-hidden', 'true')
80 .attr('aria-labelledby', inst.id + '-dp-title');
81
82 $(inst.input).attr('aria-haspopup', 'true')
83 .attr('aria-expanded', 'false')
84 .attr('aria-owns', widgetId);
85 }
86
87 return inst;
88 },
89
90 /* Attach the date picker to an input field */
91 _connectDatepicker: function(target, inst) {
92 __connectDatepicker.call(this, target, inst);
93
94 var that = this;
95
96 // register additional keyboard events to control date selection with cursor keys
97 $(target).unbind('keydown.datepicker-extended').bind('keydown.datepicker-extended', function(event) {
98 var inc = 1;
99 switch (event.keyCode) {
100 case 109:
101 case 173:
102 case 189: // "minus"
103 inc = -1;
104 case 61:
105 case 107:
106 case 187: // "plus"
107 // do nothing if the input does not contain full date string
108 if (this.value.length < that._formatDate(inst, inst.selectedDay, inst.selectedMonth, inst.selectedYear).length) {
109 return true;
110 }
111 that._adjustInstDate(inst, inc, 'D');
112 that._selectDateRC(target, that._formatDate(inst, inst.selectedDay, inst.selectedMonth, inst.selectedYear));
113 return false;
114
115 case $.ui.keyCode.UP:
116 case $.ui.keyCode.DOWN:
117 // unfold datepicker if not visible
118 if ($.datepicker._lastInput !== target && !$.datepicker._isDisabledDatepicker(target)) {
119 that._showDatepicker(event);
120 event.stopPropagation();
121 event.preventDefault();
122 return false;
123 }
124
125 default:
126 if (!$.datepicker._isDisabledDatepicker(target) && !event.ctrlKey && !event.metaKey) {
127 return that._cursorKeydown(event, inst);
128 }
129 }
130 })
131 .attr('autocomplete', 'off');
132 },
133
134 /* Handle keyboard event on datepicker widget */
135 _cursorKeydown: function(event, inst) {
136 inst._keyEvent = true;
137
138 var isRTL = inst.dpDiv.hasClass('ui-datepicker-rtl');
139
140 switch (event.keyCode) {
141 case $.ui.keyCode.LEFT:
142 this._adjustDate(inst.input, (isRTL ? +1 : -1), 'D');
143 break;
144 case $.ui.keyCode.RIGHT:
145 this._adjustDate(inst.input, (isRTL ? -1 : +1), 'D');
146 break;
147 case $.ui.keyCode.UP:
148 this._adjustDate(inst.input, -7, 'D');
149 break;
150 case $.ui.keyCode.DOWN:
151 this._adjustDate(inst.input, +7, 'D');
152 break;
153 case $.ui.keyCode.HOME:
154 // TODO: jump to first of month
155 break;
156 case $.ui.keyCode.END:
157 // TODO: jump to end of month
158 break;
159 }
160
161 return true;
162 },
163
164 /* Pop-up the date picker for a given input field */
165 _showDatepicker: function(input) {
166 input = input.target || input;
167 __showDatepicker.call(this, input);
168
169 var inst = $.datepicker._getInst(input);
170 if (inst && $.datepicker._datepickerShowing) {
171 inst.dpDiv.attr('aria-hidden', 'false');
172 $(input).attr('aria-expanded', 'true');
173 }
174 },
175
176 /* Hide the date picker from view */
177 _hideDatepicker: function(input) {
178 __hideDatepicker.call(this, input);
179
180 var inst = this._curInst;;
181 if (inst && !$.datepicker._datepickerShowing) {
182 inst.dpDiv.attr('aria-hidden', 'true');
183 $(inst.input).attr('aria-expanded', 'false');
184 }
185 },
186
187 /* Render the date picker content */
188 _updateDatepicker: function(inst) {
189 __updateDatepicker.call(this, inst);
190
191 var activeCell = $('.' + this._dayOverClass, inst.dpDiv).get(0) || $('.' + this._currentClass, inst.dpDiv).get(0);
192 if (activeCell) {
193 activeCell = $(activeCell);
194 activeCell.attr('id', inst.id + '-day-' + activeCell.text());
195 }
196
197 // allow focus on main container only
198 inst.dpDiv.find('.ui-datepicker-calendar')
199 .attr('tabindex', inst.inline ? '0' : '-1')
200 .attr('role', 'grid')
201 .attr('aria-readonly', 'true')
202 .attr('aria-activedescendant', activeCell ? activeCell.attr('id') : '')
203 .find('td').attr('role', 'gridcell').attr('aria-selected', 'false')
204 .find('a').attr('tabindex', '-1');
205
206 $('.ui-datepicker-current-day', inst.dpDiv).attr('aria-selected', 'true');
207
208 inst.dpDiv.find('.ui-datepicker-title')
209 .attr('id', inst.id + '-dp-title')
210
211 // set focus again after update
212 if (inst._hasfocus) {
213 inst.dpDiv.find('.ui-datepicker-calendar').focus();
214 inst._hasfocus = false;
215 }
216 },
217
218 _selectDateRC: function(id, dateStr) {
219 var target = $(id), inst = this._getInst(target[0]);
220
221 dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
222 if (inst.input) {
223 inst.input.val(dateStr);
224 }
225 this._updateAlternate(inst);
226 if (inst.input) {
227 inst.input.trigger("change"); // fire the change event
228 }
229 if (inst.inline) {
230 this._updateDatepicker(inst);
231 }
232 }
233 });
234
235 }(jQuery));