EVOLUTION-MANAGER
Edit File: DateTimeShortcuts.js
// 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 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/'; } 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); } else if (inp.getAttribute('type') == 'text' && inp.className.match(/vDateField/)) { DateTimeShortcuts.addCalendar(inp); } } }, // 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 + ", new Date().strftime('" + get_format('TIME_INPUT_FORMATS')[0] + "'));"); 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'; var time_format = get_format('TIME_INPUT_FORMATS')[0]; quickElement("a", quickElement("li", time_list, ""), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + time_format + "'));"); 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 + "'));"); 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 + "'));"); 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 + "'));"); 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) { DateTimeShortcuts.clockInputs[num].value = val; 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]); if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) { DateTimeShortcuts.calendars[num].drawDate(month, year); } } // 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) { 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 = new Date(); 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);