| /*! Taken from django release 1.8.5 |
| |
| Copyright (c) Django Software Foundation and individual contributors. |
| All rights reserved. |
| |
| Redistribution and use in source and binary forms, with or without modification, |
| are permitted provided that the following conditions are met: |
| |
| 1. Redistributions of source code must retain the above copyright notice, |
| this list of conditions and the following disclaimer. |
| |
| 2. Redistributions in binary form must reproduce the above copyright |
| notice, this list of conditions and the following disclaimer in the |
| documentation and/or other materials provided with the distribution. |
| |
| 3. Neither the name of Django nor the names of its contributors may be used |
| to endorse or promote products derived from this software without |
| specific prior written permission. |
| |
| THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND |
| ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
| WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
| DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR |
| ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES |
| (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
| LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON |
| ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS |
| SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| // 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 format = get_format('DATE_INPUT_FORMATS')[0]; |
| var selected = inp.value.strptime(format); |
| var year = selected.getFullYear(); |
| var month = selected.getMonth() + 1; |
| var re = /\d{4}/ |
| if (re.test(year.toString()) && 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); |