comparison plugins/jqueryui/js/jquery-ui-accessible-datepicker.js @ 0:1e000243b222

vanilla 1.3.3 distro, I hope
author Charlie Root
date Thu, 04 Jan 2018 15:50:29 -0500
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1e000243b222
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 // fix https://bugs.jqueryui.com/ticket/8593
132 .click(function (event) { that._showDatepicker(event); })
133 .attr('autocomplete', 'off');
134 },
135
136 /* Handle keyboard event on datepicker widget */
137 _cursorKeydown: function(event, inst) {
138 inst._keyEvent = true;
139
140 var isRTL = inst.dpDiv.hasClass('ui-datepicker-rtl');
141
142 switch (event.keyCode) {
143 case $.ui.keyCode.LEFT:
144 this._adjustDate(inst.input, (isRTL ? +1 : -1), 'D');
145 break;
146 case $.ui.keyCode.RIGHT:
147 this._adjustDate(inst.input, (isRTL ? -1 : +1), 'D');
148 break;
149 case $.ui.keyCode.UP:
150 this._adjustDate(inst.input, -7, 'D');
151 break;
152 case $.ui.keyCode.DOWN:
153 this._adjustDate(inst.input, +7, 'D');
154 break;
155 case $.ui.keyCode.HOME:
156 // TODO: jump to first of month
157 break;
158 case $.ui.keyCode.END:
159 // TODO: jump to end of month
160 break;
161 }
162
163 return true;
164 },
165
166 /* Pop-up the date picker for a given input field */
167 _showDatepicker: function(input) {
168 input = input.target || input;
169 __showDatepicker.call(this, input);
170
171 var inst = $.datepicker._getInst(input);
172 if (inst && $.datepicker._datepickerShowing) {
173 inst.dpDiv.attr('aria-hidden', 'false');
174 $(input).attr('aria-expanded', 'true');
175 }
176 },
177
178 /* Hide the date picker from view */
179 _hideDatepicker: function(input) {
180 __hideDatepicker.call(this, input);
181
182 var inst = this._curInst;
183 if (inst && !$.datepicker._datepickerShowing) {
184 inst.dpDiv.attr('aria-hidden', 'true');
185 $(inst.input).attr('aria-expanded', 'false');
186 }
187 },
188
189 /* Render the date picker content */
190 _updateDatepicker: function(inst) {
191 __updateDatepicker.call(this, inst);
192
193 var activeCell = $('.' + this._dayOverClass, inst.dpDiv).get(0) || $('.' + this._currentClass, inst.dpDiv).get(0);
194 if (activeCell) {
195 activeCell = $(activeCell);
196 activeCell.attr('id', inst.id + '-day-' + activeCell.text());
197 }
198
199 // allow focus on main container only
200 inst.dpDiv.find('.ui-datepicker-calendar')
201 .attr('tabindex', inst.inline ? '0' : '-1')
202 .attr('role', 'grid')
203 .attr('aria-readonly', 'true')
204 .attr('aria-activedescendant', activeCell ? activeCell.attr('id') : '')
205 .find('td').attr('role', 'gridcell').attr('aria-selected', 'false')
206 .find('a').attr('tabindex', '-1');
207
208 $('.ui-datepicker-current-day', inst.dpDiv).attr('aria-selected', 'true');
209
210 inst.dpDiv.find('.ui-datepicker-title')
211 .attr('id', inst.id + '-dp-title')
212
213 // set focus again after update
214 if (inst._hasfocus) {
215 inst.dpDiv.find('.ui-datepicker-calendar').focus();
216 inst._hasfocus = false;
217 }
218 },
219
220 _selectDateRC: function(id, dateStr) {
221 var target = $(id), inst = this._getInst(target[0]);
222
223 dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
224 if (inst.input) {
225 inst.input.val(dateStr);
226 }
227 this._updateAlternate(inst);
228 if (inst.input) {
229 inst.input.trigger("change"); // fire the change event
230 }
231 if (inst.inline) {
232 this._updateDatepicker(inst);
233 }
234 }
235 });
236
237 }(jQuery));