root / env / lib / python2.7 / site-packages / django / contrib / admin / static / admin / js / admin / DateTimeShortcuts.js @ 1a305335
History | View | Annotate | Download (14.4 KB)
1 |
// Inserts shortcut buttons after all of the following:
|
---|---|
2 |
// <input type="text" class="vDateField">
|
3 |
// <input type="text" class="vTimeField">
|
4 |
|
5 |
var DateTimeShortcuts = {
|
6 |
calendars: [],
|
7 |
calendarInputs: [],
|
8 |
clockInputs: [],
|
9 |
calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled |
10 |
calendarDivName2: 'calendarin', // name of <div> that contains calendar |
11 |
calendarLinkName: 'calendarlink',// name of the link that is used to toggle |
12 |
clockDivName: 'clockbox', // name of clock <div> that gets toggled |
13 |
clockLinkName: 'clocklink', // name of the link that is used to toggle |
14 |
shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts |
15 |
admin_media_prefix: '', |
16 |
init: function() { |
17 |
// Get admin_media_prefix by grabbing it off the window object. It's
|
18 |
// set in the admin/base.html template, so if it's not there, someone's
|
19 |
// overridden the template. In that case, we'll set a clearly-invalid
|
20 |
// value in the hopes that someone will examine HTTP requests and see it.
|
21 |
if (window.__admin_media_prefix__ != undefined) { |
22 |
DateTimeShortcuts.admin_media_prefix = window.__admin_media_prefix__; |
23 |
} else {
|
24 |
DateTimeShortcuts.admin_media_prefix = '/missing-admin-media-prefix/';
|
25 |
} |
26 |
|
27 |
var inputs = document.getElementsByTagName('input'); |
28 |
for (i=0; i<inputs.length; i++) { |
29 |
var inp = inputs[i];
|
30 |
if (inp.getAttribute('type') == 'text' && inp.className.match(/vTimeField/)) { |
31 |
DateTimeShortcuts.addClock(inp); |
32 |
} |
33 |
else if (inp.getAttribute('type') == 'text' && inp.className.match(/vDateField/)) { |
34 |
DateTimeShortcuts.addCalendar(inp); |
35 |
} |
36 |
} |
37 |
}, |
38 |
// Add clock widget to a given field
|
39 |
addClock: function(inp) { |
40 |
var num = DateTimeShortcuts.clockInputs.length;
|
41 |
DateTimeShortcuts.clockInputs[num] = inp; |
42 |
|
43 |
// Shortcut links (clock icon and "Now" link)
|
44 |
var shortcuts_span = document.createElement('span'); |
45 |
shortcuts_span.className = DateTimeShortcuts.shortCutsClass; |
46 |
inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling); |
47 |
var now_link = document.createElement('a'); |
48 |
now_link.setAttribute('href', "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + get_format('TIME_INPUT_FORMATS')[0] + "'));"); |
49 |
now_link.appendChild(document.createTextNode(gettext('Now')));
|
50 |
var clock_link = document.createElement('a'); |
51 |
clock_link.setAttribute('href', 'javascript:DateTimeShortcuts.openClock(' + num + ');'); |
52 |
clock_link.id = DateTimeShortcuts.clockLinkName + num; |
53 |
quickElement('img', clock_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/icon_clock.gif', 'alt', gettext('Clock')); |
54 |
shortcuts_span.appendChild(document.createTextNode('\240'));
|
55 |
shortcuts_span.appendChild(now_link); |
56 |
shortcuts_span.appendChild(document.createTextNode('\240|\240'));
|
57 |
shortcuts_span.appendChild(clock_link); |
58 |
|
59 |
// Create clock link div
|
60 |
//
|
61 |
// Markup looks like:
|
62 |
// <div id="clockbox1" class="clockbox module">
|
63 |
// <h2>Choose a time</h2>
|
64 |
// <ul class="timelist">
|
65 |
// <li><a href="#">Now</a></li>
|
66 |
// <li><a href="#">Midnight</a></li>
|
67 |
// <li><a href="#">6 a.m.</a></li>
|
68 |
// <li><a href="#">Noon</a></li>
|
69 |
// </ul>
|
70 |
// <p class="calendar-cancel"><a href="#">Cancel</a></p>
|
71 |
// </div>
|
72 |
|
73 |
var clock_box = document.createElement('div'); |
74 |
clock_box.style.display = 'none';
|
75 |
clock_box.style.position = 'absolute';
|
76 |
clock_box.className = 'clockbox module';
|
77 |
clock_box.setAttribute('id', DateTimeShortcuts.clockDivName + num);
|
78 |
document.body.appendChild(clock_box); |
79 |
addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation);
|
80 |
|
81 |
quickElement('h2', clock_box, gettext('Choose a time')); |
82 |
var time_list = quickElement('ul', clock_box, ''); |
83 |
time_list.className = 'timelist';
|
84 |
var time_format = get_format('TIME_INPUT_FORMATS')[0]; |
85 |
quickElement("a", quickElement("li", time_list, ""), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + time_format + "'));"); |
86 |
quickElement("a", quickElement("li", time_list, ""), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,0,0,0,0).strftime('" + time_format + "'));"); |
87 |
quickElement("a", quickElement("li", time_list, ""), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,6,0,0,0).strftime('" + time_format + "'));"); |
88 |
quickElement("a", quickElement("li", time_list, ""), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,12,0,0,0).strftime('" + time_format + "'));"); |
89 |
|
90 |
var cancel_p = quickElement('p', clock_box, ''); |
91 |
cancel_p.className = 'calendar-cancel';
|
92 |
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');'); |
93 |
django.jQuery(document).bind('keyup', function(event) { |
94 |
if (event.which == 27) { |
95 |
// ESC key closes popup
|
96 |
DateTimeShortcuts.dismissClock(num); |
97 |
event.preventDefault(); |
98 |
} |
99 |
}); |
100 |
}, |
101 |
openClock: function(num) { |
102 |
var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
|
103 |
var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName+num)
|
104 |
|
105 |
// Recalculate the clockbox position
|
106 |
// is it left-to-right or right-to-left layout ?
|
107 |
if (getStyle(document.body,'direction')!='rtl') { |
108 |
clock_box.style.left = findPosX(clock_link) + 17 + 'px'; |
109 |
} |
110 |
else {
|
111 |
// since style's width is in em, it'd be tough to calculate
|
112 |
// px value of it. let's use an estimated px for now
|
113 |
// TODO: IE returns wrong value for findPosX when in rtl mode
|
114 |
// (it returns as it was left aligned), needs to be fixed.
|
115 |
clock_box.style.left = findPosX(clock_link) - 110 + 'px'; |
116 |
} |
117 |
clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px'; |
118 |
|
119 |
// Show the clock box
|
120 |
clock_box.style.display = 'block';
|
121 |
addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissClock(num); return true; }); |
122 |
}, |
123 |
dismissClock: function(num) { |
124 |
document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
|
125 |
window.document.onclick = null;
|
126 |
}, |
127 |
handleClockQuicklink: function(num, val) { |
128 |
DateTimeShortcuts.clockInputs[num].value = val; |
129 |
DateTimeShortcuts.clockInputs[num].focus(); |
130 |
DateTimeShortcuts.dismissClock(num); |
131 |
}, |
132 |
// Add calendar widget to a given field.
|
133 |
addCalendar: function(inp) { |
134 |
var num = DateTimeShortcuts.calendars.length;
|
135 |
|
136 |
DateTimeShortcuts.calendarInputs[num] = inp; |
137 |
|
138 |
// Shortcut links (calendar icon and "Today" link)
|
139 |
var shortcuts_span = document.createElement('span'); |
140 |
shortcuts_span.className = DateTimeShortcuts.shortCutsClass; |
141 |
inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling); |
142 |
var today_link = document.createElement('a'); |
143 |
today_link.setAttribute('href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);'); |
144 |
today_link.appendChild(document.createTextNode(gettext('Today')));
|
145 |
var cal_link = document.createElement('a'); |
146 |
cal_link.setAttribute('href', 'javascript:DateTimeShortcuts.openCalendar(' + num + ');'); |
147 |
cal_link.id = DateTimeShortcuts.calendarLinkName + num; |
148 |
quickElement('img', cal_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/icon_calendar.gif', 'alt', gettext('Calendar')); |
149 |
shortcuts_span.appendChild(document.createTextNode('\240'));
|
150 |
shortcuts_span.appendChild(today_link); |
151 |
shortcuts_span.appendChild(document.createTextNode('\240|\240'));
|
152 |
shortcuts_span.appendChild(cal_link); |
153 |
|
154 |
// Create calendarbox div.
|
155 |
//
|
156 |
// Markup looks like:
|
157 |
//
|
158 |
// <div id="calendarbox3" class="calendarbox module">
|
159 |
// <h2>
|
160 |
// <a href="#" class="link-previous">‹</a>
|
161 |
// <a href="#" class="link-next">›</a> February 2003
|
162 |
// </h2>
|
163 |
// <div class="calendar" id="calendarin3">
|
164 |
// <!-- (cal) -->
|
165 |
// </div>
|
166 |
// <div class="calendar-shortcuts">
|
167 |
// <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
|
168 |
// </div>
|
169 |
// <p class="calendar-cancel"><a href="#">Cancel</a></p>
|
170 |
// </div>
|
171 |
var cal_box = document.createElement('div'); |
172 |
cal_box.style.display = 'none';
|
173 |
cal_box.style.position = 'absolute';
|
174 |
cal_box.className = 'calendarbox module';
|
175 |
cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
|
176 |
document.body.appendChild(cal_box); |
177 |
addEvent(cal_box, 'click', DateTimeShortcuts.cancelEventPropagation);
|
178 |
|
179 |
// next-prev links
|
180 |
var cal_nav = quickElement('div', cal_box, ''); |
181 |
var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', 'javascript:DateTimeShortcuts.drawPrev('+num+');'); |
182 |
cal_nav_prev.className = 'calendarnav-previous';
|
183 |
var cal_nav_next = quickElement('a', cal_nav, '>', 'href', 'javascript:DateTimeShortcuts.drawNext('+num+');'); |
184 |
cal_nav_next.className = 'calendarnav-next';
|
185 |
|
186 |
// main box
|
187 |
var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num); |
188 |
cal_main.className = 'calendar';
|
189 |
DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
|
190 |
DateTimeShortcuts.calendars[num].drawCurrent(); |
191 |
|
192 |
// calendar shortcuts
|
193 |
var shortcuts = quickElement('div', cal_box, ''); |
194 |
shortcuts.className = 'calendar-shortcuts';
|
195 |
quickElement('a', shortcuts, gettext('Yesterday'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', -1);'); |
196 |
shortcuts.appendChild(document.createTextNode('\240|\240'));
|
197 |
quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);'); |
198 |
shortcuts.appendChild(document.createTextNode('\240|\240'));
|
199 |
quickElement('a', shortcuts, gettext('Tomorrow'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', +1);'); |
200 |
|
201 |
// cancel bar
|
202 |
var cancel_p = quickElement('p', cal_box, ''); |
203 |
cancel_p.className = 'calendar-cancel';
|
204 |
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');'); |
205 |
django.jQuery(document).bind('keyup', function(event) { |
206 |
if (event.which == 27) { |
207 |
// ESC key closes popup
|
208 |
DateTimeShortcuts.dismissCalendar(num); |
209 |
event.preventDefault(); |
210 |
} |
211 |
}); |
212 |
}, |
213 |
openCalendar: function(num) { |
214 |
var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
|
215 |
var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
|
216 |
var inp = DateTimeShortcuts.calendarInputs[num];
|
217 |
|
218 |
// Determine if the current value in the input has a valid date.
|
219 |
// If so, draw the calendar with that date's year and month.
|
220 |
if (inp.value) {
|
221 |
var date_parts = inp.value.split('-'); |
222 |
var year = date_parts[0]; |
223 |
var month = parseFloat(date_parts[1]); |
224 |
if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) { |
225 |
DateTimeShortcuts.calendars[num].drawDate(month, year); |
226 |
} |
227 |
} |
228 |
|
229 |
// Recalculate the clockbox position
|
230 |
// is it left-to-right or right-to-left layout ?
|
231 |
if (getStyle(document.body,'direction')!='rtl') { |
232 |
cal_box.style.left = findPosX(cal_link) + 17 + 'px'; |
233 |
} |
234 |
else {
|
235 |
// since style's width is in em, it'd be tough to calculate
|
236 |
// px value of it. let's use an estimated px for now
|
237 |
// TODO: IE returns wrong value for findPosX when in rtl mode
|
238 |
// (it returns as it was left aligned), needs to be fixed.
|
239 |
cal_box.style.left = findPosX(cal_link) - 180 + 'px'; |
240 |
} |
241 |
cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px'; |
242 |
|
243 |
cal_box.style.display = 'block';
|
244 |
addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissCalendar(num); return true; }); |
245 |
}, |
246 |
dismissCalendar: function(num) { |
247 |
document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
|
248 |
window.document.onclick = null;
|
249 |
}, |
250 |
drawPrev: function(num) { |
251 |
DateTimeShortcuts.calendars[num].drawPreviousMonth(); |
252 |
}, |
253 |
drawNext: function(num) { |
254 |
DateTimeShortcuts.calendars[num].drawNextMonth(); |
255 |
}, |
256 |
handleCalendarCallback: function(num) { |
257 |
format = get_format('DATE_INPUT_FORMATS')[0]; |
258 |
// the format needs to be escaped a little
|
259 |
format = format.replace('\\', '\\\\'); |
260 |
format = format.replace('\r', '\\r'); |
261 |
format = format.replace('\n', '\\n'); |
262 |
format = format.replace('\t', '\\t'); |
263 |
format = format.replace("'", "\\'"); |
264 |
return ["function(y, m, d) { DateTimeShortcuts.calendarInputs[", |
265 |
num, |
266 |
"].value = new Date(y, m-1, d).strftime('",
|
267 |
format, |
268 |
"');DateTimeShortcuts.calendarInputs[",
|
269 |
num, |
270 |
"].focus();document.getElementById(DateTimeShortcuts.calendarDivName1+",
|
271 |
num, |
272 |
").style.display='none';}"].join(''); |
273 |
}, |
274 |
handleCalendarQuickLink: function(num, offset) { |
275 |
var d = new Date(); |
276 |
d.setDate(d.getDate() + offset) |
277 |
DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]); |
278 |
DateTimeShortcuts.calendarInputs[num].focus(); |
279 |
DateTimeShortcuts.dismissCalendar(num); |
280 |
}, |
281 |
cancelEventPropagation: function(e) { |
282 |
if (!e) e = window.event;
|
283 |
e.cancelBubble = true;
|
284 |
if (e.stopPropagation) e.stopPropagation();
|
285 |
} |
286 |
} |
287 |
|
288 |
addEvent(window, 'load', DateTimeShortcuts.init);
|