357 lines
17 KiB
JavaScript
357 lines
17 KiB
JavaScript
// Inserts shortcut buttons after all of the following:
|
|
// <input type="text" class="vDateField">
|
|
// <input type="text" class="vTimeField">
|
|
|
|
var DateTimeShortcuts = {
|
|
calendars: [],
|
|
calendarInputs: [],
|
|
clockInputs: [],
|
|
dismissClockFunc: [],
|
|
dismissCalendarFunc: [],
|
|
calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
|
|
calendarDivName2: 'calendarin', // name of <div> that contains calendar
|
|
calendarLinkName: 'calendarlink',// name of the link that is used to toggle
|
|
clockDivName: 'clockbox', // name of clock <div> that gets toggled
|
|
clockLinkName: 'clocklink', // name of the link that is used to toggle
|
|
shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts
|
|
timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
|
|
timezoneOffset: 0,
|
|
admin_media_prefix: '',
|
|
init: function() {
|
|
// Get admin_media_prefix by grabbing it off the window object. It's
|
|
// set in the admin/base.html template, so if it's not there, someone's
|
|
// overridden the template. In that case, we'll set a clearly-invalid
|
|
// value in the hopes that someone will examine HTTP requests and see it.
|
|
if (window.__admin_media_prefix__ != undefined) {
|
|
DateTimeShortcuts.admin_media_prefix = window.__admin_media_prefix__;
|
|
} else {
|
|
DateTimeShortcuts.admin_media_prefix = '/missing-admin-media-prefix/';
|
|
}
|
|
|
|
if (window.__admin_utc_offset__ != undefined) {
|
|
var serverOffset = window.__admin_utc_offset__;
|
|
var localOffset = new Date().getTimezoneOffset() * -60;
|
|
DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
|
|
}
|
|
|
|
var inputs = document.getElementsByTagName('input');
|
|
for (i=0; i<inputs.length; i++) {
|
|
var inp = inputs[i];
|
|
if (inp.getAttribute('type') == 'text' && inp.className.match(/vTimeField/)) {
|
|
DateTimeShortcuts.addClock(inp);
|
|
DateTimeShortcuts.addTimezoneWarning(inp);
|
|
}
|
|
else if (inp.getAttribute('type') == 'text' && inp.className.match(/vDateField/)) {
|
|
DateTimeShortcuts.addCalendar(inp);
|
|
DateTimeShortcuts.addTimezoneWarning(inp);
|
|
}
|
|
}
|
|
},
|
|
// Return the current time while accounting for the server timezone.
|
|
now: function() {
|
|
if (window.__admin_utc_offset__ != undefined) {
|
|
var serverOffset = window.__admin_utc_offset__;
|
|
var localNow = new Date();
|
|
var localOffset = localNow.getTimezoneOffset() * -60;
|
|
localNow.setTime(localNow.getTime() + 1000 * (serverOffset - localOffset));
|
|
return localNow;
|
|
} else {
|
|
return new Date();
|
|
}
|
|
},
|
|
// Add a warning when the time zone in the browser and backend do not match.
|
|
addTimezoneWarning: function(inp) {
|
|
var $ = django.jQuery;
|
|
var warningClass = DateTimeShortcuts.timezoneWarningClass;
|
|
var timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;
|
|
|
|
// Only warn if there is a time zone mismatch.
|
|
if (!timezoneOffset)
|
|
return;
|
|
|
|
// Check if warning is already there.
|
|
if ($(inp).siblings('.' + warningClass).length)
|
|
return;
|
|
|
|
var message;
|
|
if (timezoneOffset > 0) {
|
|
message = ngettext(
|
|
'Note: You are %s hour ahead of server time.',
|
|
'Note: You are %s hours ahead of server time.',
|
|
timezoneOffset
|
|
);
|
|
}
|
|
else {
|
|
timezoneOffset *= -1
|
|
message = ngettext(
|
|
'Note: You are %s hour behind server time.',
|
|
'Note: You are %s hours behind server time.',
|
|
timezoneOffset
|
|
);
|
|
}
|
|
message = interpolate(message, [timezoneOffset]);
|
|
|
|
var $warning = $('<span>');
|
|
$warning.attr('class', warningClass);
|
|
$warning.text(message);
|
|
|
|
$(inp).parent()
|
|
.append($('<br>'))
|
|
.append($warning)
|
|
},
|
|
// Add clock widget to a given field
|
|
addClock: function(inp) {
|
|
var num = DateTimeShortcuts.clockInputs.length;
|
|
DateTimeShortcuts.clockInputs[num] = inp;
|
|
DateTimeShortcuts.dismissClockFunc[num] = function() { DateTimeShortcuts.dismissClock(num); return true; };
|
|
|
|
// Shortcut links (clock icon and "Now" link)
|
|
var shortcuts_span = document.createElement('span');
|
|
shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
|
|
inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
|
|
var now_link = document.createElement('a');
|
|
now_link.setAttribute('href', "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", -1);");
|
|
now_link.appendChild(document.createTextNode(gettext('Now')));
|
|
var clock_link = document.createElement('a');
|
|
clock_link.setAttribute('href', 'javascript:DateTimeShortcuts.openClock(' + num + ');');
|
|
clock_link.id = DateTimeShortcuts.clockLinkName + num;
|
|
quickElement('img', clock_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/icon_clock.gif', 'alt', gettext('Clock'));
|
|
shortcuts_span.appendChild(document.createTextNode('\240'));
|
|
shortcuts_span.appendChild(now_link);
|
|
shortcuts_span.appendChild(document.createTextNode('\240|\240'));
|
|
shortcuts_span.appendChild(clock_link);
|
|
|
|
// Create clock link div
|
|
//
|
|
// Markup looks like:
|
|
// <div id="clockbox1" class="clockbox module">
|
|
// <h2>Choose a time</h2>
|
|
// <ul class="timelist">
|
|
// <li><a href="#">Now</a></li>
|
|
// <li><a href="#">Midnight</a></li>
|
|
// <li><a href="#">6 a.m.</a></li>
|
|
// <li><a href="#">Noon</a></li>
|
|
// </ul>
|
|
// <p class="calendar-cancel"><a href="#">Cancel</a></p>
|
|
// </div>
|
|
|
|
var clock_box = document.createElement('div');
|
|
clock_box.style.display = 'none';
|
|
clock_box.style.position = 'absolute';
|
|
clock_box.className = 'clockbox module';
|
|
clock_box.setAttribute('id', DateTimeShortcuts.clockDivName + num);
|
|
document.body.appendChild(clock_box);
|
|
addEvent(clock_box, 'click', cancelEventPropagation);
|
|
|
|
quickElement('h2', clock_box, gettext('Choose a time'));
|
|
var time_list = quickElement('ul', clock_box);
|
|
time_list.className = 'timelist';
|
|
quickElement("a", quickElement("li", time_list), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", -1);");
|
|
quickElement("a", quickElement("li", time_list), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 0);");
|
|
quickElement("a", quickElement("li", time_list), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 6);");
|
|
quickElement("a", quickElement("li", time_list), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", 12);");
|
|
|
|
var cancel_p = quickElement('p', clock_box);
|
|
cancel_p.className = 'calendar-cancel';
|
|
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
|
|
django.jQuery(document).bind('keyup', function(event) {
|
|
if (event.which == 27) {
|
|
// ESC key closes popup
|
|
DateTimeShortcuts.dismissClock(num);
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
},
|
|
openClock: function(num) {
|
|
var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
|
|
var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName+num)
|
|
|
|
// Recalculate the clockbox position
|
|
// is it left-to-right or right-to-left layout ?
|
|
if (getStyle(document.body,'direction')!='rtl') {
|
|
clock_box.style.left = findPosX(clock_link) + 17 + 'px';
|
|
}
|
|
else {
|
|
// since style's width is in em, it'd be tough to calculate
|
|
// px value of it. let's use an estimated px for now
|
|
// TODO: IE returns wrong value for findPosX when in rtl mode
|
|
// (it returns as it was left aligned), needs to be fixed.
|
|
clock_box.style.left = findPosX(clock_link) - 110 + 'px';
|
|
}
|
|
clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px';
|
|
|
|
// Show the clock box
|
|
clock_box.style.display = 'block';
|
|
addEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
|
|
},
|
|
dismissClock: function(num) {
|
|
document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
|
|
removeEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
|
|
},
|
|
handleClockQuicklink: function(num, val) {
|
|
var d;
|
|
if (val == -1) {
|
|
d = DateTimeShortcuts.now();
|
|
}
|
|
else {
|
|
d = new Date(1970, 1, 1, val, 0, 0, 0)
|
|
}
|
|
DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
|
|
DateTimeShortcuts.clockInputs[num].focus();
|
|
DateTimeShortcuts.dismissClock(num);
|
|
},
|
|
// Add calendar widget to a given field.
|
|
addCalendar: function(inp) {
|
|
var num = DateTimeShortcuts.calendars.length;
|
|
|
|
DateTimeShortcuts.calendarInputs[num] = inp;
|
|
DateTimeShortcuts.dismissCalendarFunc[num] = function() { DateTimeShortcuts.dismissCalendar(num); return true; };
|
|
|
|
// Shortcut links (calendar icon and "Today" link)
|
|
var shortcuts_span = document.createElement('span');
|
|
shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
|
|
inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
|
|
var today_link = document.createElement('a');
|
|
today_link.setAttribute('href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
|
|
today_link.appendChild(document.createTextNode(gettext('Today')));
|
|
var cal_link = document.createElement('a');
|
|
cal_link.setAttribute('href', 'javascript:DateTimeShortcuts.openCalendar(' + num + ');');
|
|
cal_link.id = DateTimeShortcuts.calendarLinkName + num;
|
|
quickElement('img', cal_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/icon_calendar.gif', 'alt', gettext('Calendar'));
|
|
shortcuts_span.appendChild(document.createTextNode('\240'));
|
|
shortcuts_span.appendChild(today_link);
|
|
shortcuts_span.appendChild(document.createTextNode('\240|\240'));
|
|
shortcuts_span.appendChild(cal_link);
|
|
|
|
// Create calendarbox div.
|
|
//
|
|
// Markup looks like:
|
|
//
|
|
// <div id="calendarbox3" class="calendarbox module">
|
|
// <h2>
|
|
// <a href="#" class="link-previous">‹</a>
|
|
// <a href="#" class="link-next">›</a> February 2003
|
|
// </h2>
|
|
// <div class="calendar" id="calendarin3">
|
|
// <!-- (cal) -->
|
|
// </div>
|
|
// <div class="calendar-shortcuts">
|
|
// <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
|
|
// </div>
|
|
// <p class="calendar-cancel"><a href="#">Cancel</a></p>
|
|
// </div>
|
|
var cal_box = document.createElement('div');
|
|
cal_box.style.display = 'none';
|
|
cal_box.style.position = 'absolute';
|
|
cal_box.className = 'calendarbox module';
|
|
cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
|
|
document.body.appendChild(cal_box);
|
|
addEvent(cal_box, 'click', cancelEventPropagation);
|
|
|
|
// next-prev links
|
|
var cal_nav = quickElement('div', cal_box);
|
|
var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', 'javascript:DateTimeShortcuts.drawPrev('+num+');');
|
|
cal_nav_prev.className = 'calendarnav-previous';
|
|
var cal_nav_next = quickElement('a', cal_nav, '>', 'href', 'javascript:DateTimeShortcuts.drawNext('+num+');');
|
|
cal_nav_next.className = 'calendarnav-next';
|
|
|
|
// main box
|
|
var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
|
|
cal_main.className = 'calendar';
|
|
DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
|
|
DateTimeShortcuts.calendars[num].drawCurrent();
|
|
|
|
// calendar shortcuts
|
|
var shortcuts = quickElement('div', cal_box);
|
|
shortcuts.className = 'calendar-shortcuts';
|
|
quickElement('a', shortcuts, gettext('Yesterday'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', -1);');
|
|
shortcuts.appendChild(document.createTextNode('\240|\240'));
|
|
quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
|
|
shortcuts.appendChild(document.createTextNode('\240|\240'));
|
|
quickElement('a', shortcuts, gettext('Tomorrow'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', +1);');
|
|
|
|
// cancel bar
|
|
var cancel_p = quickElement('p', cal_box);
|
|
cancel_p.className = 'calendar-cancel';
|
|
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');');
|
|
django.jQuery(document).bind('keyup', function(event) {
|
|
if (event.which == 27) {
|
|
// ESC key closes popup
|
|
DateTimeShortcuts.dismissCalendar(num);
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
},
|
|
openCalendar: function(num) {
|
|
var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
|
|
var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
|
|
var inp = DateTimeShortcuts.calendarInputs[num];
|
|
|
|
// Determine if the current value in the input has a valid date.
|
|
// If so, draw the calendar with that date's year and month.
|
|
if (inp.value) {
|
|
var date_parts = inp.value.split('-');
|
|
var year = date_parts[0];
|
|
var month = parseFloat(date_parts[1]);
|
|
var selected = new Date(inp.value);
|
|
if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) {
|
|
DateTimeShortcuts.calendars[num].drawDate(month, year, selected);
|
|
}
|
|
}
|
|
|
|
// Recalculate the clockbox position
|
|
// is it left-to-right or right-to-left layout ?
|
|
if (getStyle(document.body,'direction')!='rtl') {
|
|
cal_box.style.left = findPosX(cal_link) + 17 + 'px';
|
|
}
|
|
else {
|
|
// since style's width is in em, it'd be tough to calculate
|
|
// px value of it. let's use an estimated px for now
|
|
// TODO: IE returns wrong value for findPosX when in rtl mode
|
|
// (it returns as it was left aligned), needs to be fixed.
|
|
cal_box.style.left = findPosX(cal_link) - 180 + 'px';
|
|
}
|
|
cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px';
|
|
|
|
cal_box.style.display = 'block';
|
|
addEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
|
|
},
|
|
dismissCalendar: function(num) {
|
|
document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
|
|
removeEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
|
|
},
|
|
drawPrev: function(num) {
|
|
DateTimeShortcuts.calendars[num].drawPreviousMonth();
|
|
},
|
|
drawNext: function(num) {
|
|
DateTimeShortcuts.calendars[num].drawNextMonth();
|
|
},
|
|
handleCalendarCallback: function(num) {
|
|
var format = get_format('DATE_INPUT_FORMATS')[0];
|
|
// the format needs to be escaped a little
|
|
format = format.replace('\\', '\\\\');
|
|
format = format.replace('\r', '\\r');
|
|
format = format.replace('\n', '\\n');
|
|
format = format.replace('\t', '\\t');
|
|
format = format.replace("'", "\\'");
|
|
return ["function(y, m, d) { DateTimeShortcuts.calendarInputs[",
|
|
num,
|
|
"].value = new Date(y, m-1, d).strftime('",
|
|
format,
|
|
"');DateTimeShortcuts.calendarInputs[",
|
|
num,
|
|
"].focus();document.getElementById(DateTimeShortcuts.calendarDivName1+",
|
|
num,
|
|
").style.display='none';}"].join('');
|
|
},
|
|
handleCalendarQuickLink: function(num, offset) {
|
|
var d = DateTimeShortcuts.now();
|
|
d.setDate(d.getDate() + offset)
|
|
DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
|
|
DateTimeShortcuts.calendarInputs[num].focus();
|
|
DateTimeShortcuts.dismissCalendar(num);
|
|
}
|
|
}
|
|
|
|
addEvent(window, 'load', DateTimeShortcuts.init);
|