Skip to content

Commit a8da325

Browse files
tjvantolltjvantoll
committed
Datepicker: Remove jQuery templating library and templates entirely. Move reasoning for only refreshing the grid into the main picker file.
1 parent 552cb01 commit a8da325

File tree

3 files changed

+5
-656
lines changed

3 files changed

+5
-656
lines changed

‎datepicker-rewrite/index.html

Lines changed: 0 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<script src="../ui/jquery.ui.widget.js"></script>
88
<script src="../ui/jquery.ui.button.js"></script>
99
<script src="../ui/jquery.ui.position.js"></script>
10-
<script src="jquery.tmpl.js"></script>
1110
<script src="../external/globalize.js"></script>
1211
<script src="../external/globalize.culture.de-DE.js"></script>
1312
<script src="../external/globalize.culture.ja-JP.js"></script>
@@ -112,172 +111,5 @@ <h2>Older Templates:</h2>
112111
});
113112
});
114113
</script>
115-
<!--
116-
Reason for separating templates: Refreshing the entire datepicker during interaction confuses screen readers, specfically because
117-
the grid heading is marked up as a live region and will often not update if it's destroyed and recreated instead of just having its
118-
text change. Additionally, interacting with the prev and next links would cause loss of focus issues because the links being interacted
119-
with will disappear while focused. With this approach there are 3 templates: the outer template (#ui-datepicker-tmpl), The grid template
120-
(#ui-datepicker-grid-tmpl) and the title template (#ui-datepicker-title-tmpl). This gets rid of the accessibility problems mentioned, and
121-
also allows developers to modify parts of the datepicker without having to duplicate the entire template.
122-
-->
123-
<script id="ui-datepicker-grid-tmpl" type="text/x-jquery-tmpl">
124-
<table class="ui-datepicker-calendar" role="grid" aria-readonly="true" aria-labelledby="${instance.id}-month-lbl" tabindex="0" aria-activedescendant="${instance.id}-${instance.focusedDay}">
125-
<thead role="presentation">
126-
<tr role="row">
127-
{{each(index, day) date.weekdays()}}
128-
<th class="" role="columnheader" abbr="${day.fullname}" aria-label="${day.fullname}"><span title="${day.fullname}">${day.shortname}</span></th>
129-
{{/each}}
130-
</tr>
131-
</thead>
132-
<tbody role="presentation">
133-
{{each(weekIndex, week) date.days()}}
134-
<tr role="row">
135-
{{each(dayIndex, day) week.days}}
136-
<td {{if day.render}}id="${instance.id}-${day.date}"{{/if}} role="gridcell" aria-selected="{{if day.current}}true{{else}}false{{/if}}" {{if !day.selectable}}aria-disabled="true"{{/if}}>
137-
{{if day.render}}
138-
{{if day.selectable}}
139-
<a class="{{if day.date == instance.focusedDay}}ui-state-focus {{/if}}ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#" tabindex="-1" data-timestamp=${day.timestamp}>
140-
${day.date}
141-
{{if day.today}} <span class="ui-helper-hidden-accessible">, ${labels.currentText}</span>{{/if}}
142-
</a>
143-
{{/if}}
144-
{{if !day.selectable}}
145-
<span class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
146-
${day.date}
147-
</span>
148-
{{/if}}
149-
{{/if}}
150-
</td>
151-
{{/each}}
152-
</tr>
153-
{{/each}}
154-
</tbody>
155-
</table>
156-
</script>
157-
158-
<script id="ui-datepicker-title-tmpl" type="text/x-jquery-tmpl">
159-
<span class="ui-datepicker-month">${date.monthName()}</span> <span class="ui-datepicker-year">${date.year()}</span>
160-
</script>
161-
162-
<script id="ui-datepicker-tmpl" type="text/x-jquery-tmpl">
163-
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" role="region" aria-labelledby="${instance.id}-title">
164-
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
165-
<a href="#" class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
166-
<a href="#" class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
167-
<div role="header" id="${instance.id}-title">
168-
<div id="${instance.id}-month-lbl" class="ui-datepicker-title">
169-
{{tmpl({date : date}) "#ui-datepicker-title-tmpl"}}
170-
</div>
171-
<span class="ui-helper-hidden-accessible">, ${labels.datePickerRole}</span>
172-
</div>
173-
</div>
174-
{{tmpl({date : date, labels : labels, instance : instance}) "#ui-datepicker-grid-tmpl"}}
175-
<div class="ui-datepicker-buttonpane ui-widget-content">
176-
<button class="ui-datepicker-current">${labels.currentText}</button>
177-
<button class="ui-datepicker-close">${labels.closeText}</button>
178-
</div>
179-
</div>
180-
</script>
181-
182-
<script id="ui-datepicker-weeks-tmpl" type="text/x-jquery-tmpl">
183-
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
184-
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
185-
<a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
186-
<a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
187-
<div class="ui-datepicker-title">
188-
<span class="ui-datepicker-month">${date.monthName()}</span> <span class="ui-datepicker-year">${date.year()}</span>
189-
</div>
190-
</div>
191-
<table class="ui-datepicker-calendar">
192-
<thead>
193-
<tr>
194-
<th>${labels.weekHeader}</th>
195-
{{each(index, day) date.weekdays()}}
196-
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
197-
{{/each}}
198-
</tr>
199-
</thead>
200-
<tbody>
201-
{{each(index, week) date.days()}}
202-
<tr>
203-
<td>${week.number}</td>
204-
{{each(index, day) week.days}}
205-
<td>
206-
{{if day.render}}
207-
{{if day.selectable}}
208-
<a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
209-
${day.date}
210-
</a>
211-
{{/if}}
212-
{{if !day.selectable}}
213-
<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
214-
${day.date}
215-
</span>
216-
{{/if}}
217-
{{/if}}
218-
</td>
219-
{{/each}}
220-
</tr>
221-
{{/each}}
222-
</tbody>
223-
</table>
224-
</div>
225-
</script>
226-
227-
<script id="ui-datepicker-multi-tmpl" type="text/x-jquery-tmpl">
228-
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-3 ui-datepicker-multi">
229-
{{each(index, monthObj) date.months(2)}}
230-
<div class="ui-datepicker-group">
231-
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix {{if monthObj.first}}ui-corner-left{{/if}}{{if monthObj.last}}ui-corner-right{{/if}}">
232-
{{if monthObj.first}}
233-
<a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
234-
{{/if}}
235-
{{if monthObj.last}}
236-
<a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
237-
{{/if}}
238-
<div class="ui-datepicker-title">
239-
<span class="ui-datepicker-month">${monthObj.monthName()}</span> <span class="ui-datepicker-year">${monthObj.year()}</span>
240-
</div>
241-
</div>
242-
<table class="ui-datepicker-calendar">
243-
<thead>
244-
<tr>
245-
{{each(index, day) monthObj.weekdays()}}
246-
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
247-
{{/each}}
248-
</tr>
249-
</thead>
250-
<tbody>
251-
{{each(index, week) monthObj.days()}}
252-
<tr>
253-
{{each(index, day) week.days}}
254-
<td>
255-
{{if day.render}}
256-
{{if day.selectable}}
257-
<a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
258-
${day.date}
259-
</a>
260-
{{/if}}
261-
{{if !day.selectable}}
262-
<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
263-
${day.date}
264-
</span>
265-
{{/if}}
266-
{{/if}}
267-
</td>
268-
{{/each}}
269-
</tr>
270-
{{/each}}
271-
</tbody>
272-
</table>
273-
</div>
274-
{{/each}}
275-
<div class="ui-datepicker-row-break"></div>
276-
<div class="ui-datepicker-buttonpane ui-widget-content">
277-
<button class="ui-datepicker-current">${labels.currentText}</button>
278-
<button class="ui-datepicker-close">${labels.closeText}</button>
279-
</div>
280-
</div>
281-
</script>
282114
</body>
283115
</html>

0 commit comments

Comments
 (0)