emels/static/admin/js/admin/DateTimeShortcuts.js

   1 /*global addEvent, Calendar, cancelEventPropagation, findPosX, findPosY, getStyle, get_format, gettext, interpolate, ngettext, quickElement, removeEvent*/
   2 // Inserts shortcut buttons after all of the following:
   3 //     <input type="text" class="vDateField">
   4 //     <input type="text" class="vTimeField">
   5 (function() {
   6     'use strict';
   7     var DateTimeShortcuts = {
   8         calendars: [],
   9         calendarInputs: [],
  10         clockInputs: [],
  11         dismissClockFunc: [],
  12         dismissCalendarFunc: [],
  13         calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
  14         calendarDivName2: 'calendarin',  // name of <div> that contains calendar
  15         calendarLinkName: 'calendarlink',// name of the link that is used to toggle
  16         clockDivName: 'clockbox',        // name of clock <div> that gets toggled
  17         clockLinkName: 'clocklink',      // name of the link that is used to toggle
  18         shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts
  19         timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
  20         timezoneOffset: 0,
  21         init: function() {
  22             var body = document.getElementsByTagName('body')[0];
  23             var serverOffset = body.getAttribute('data-admin-utc-offset');
  24             if (serverOffset) {
  25                 var localOffset = new Date().getTimezoneOffset() * -60;
  26                 DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
  27             }
  28
  29             var inputs = document.getElementsByTagName('input');
  30             for (var i = 0; i < inputs.length; i++) {
  31                 var inp = inputs[i];
  32                 if (inp.getAttribute('type') === 'text' && inp.className.match(/vTimeField/)) {
  33                     DateTimeShortcuts.addClock(inp);
  34                     DateTimeShortcuts.addTimezoneWarning(inp);
  35                 }
  36                 else if (inp.getAttribute('type') === 'text' && inp.className.match(/vDateField/)) {
  37                     DateTimeShortcuts.addCalendar(inp);
  38                     DateTimeShortcuts.addTimezoneWarning(inp);
  39                 }
  40             }
  41         },
  42         // Return the current time while accounting for the server timezone.
  43         now: function() {
  44             var body = document.getElementsByTagName('body')[0];
  45             var serverOffset = body.getAttribute('data-admin-utc-offset');
  46             if (serverOffset) {
  47                 var localNow = new Date();
  48                 var localOffset = localNow.getTimezoneOffset() * -60;
  49                 localNow.setTime(localNow.getTime() + 1000 * (serverOffset - localOffset));
  50                 return localNow;
  51             } else {
  52                 return new Date();
  53             }
  54         },
  55         // Add a warning when the time zone in the browser and backend do not match.
  56         addTimezoneWarning: function(inp) {
  57             var $ = django.jQuery;
  58             var warningClass = DateTimeShortcuts.timezoneWarningClass;
  59             var timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;
  60
  61             // Only warn if there is a time zone mismatch.
  62             if (!timezoneOffset) {
  63                 return;
  64             }
  65
  66             // Check if warning is already there.
  67             if ($(inp).siblings('.' + warningClass).length) {
  68                 return;
  69             }
  70
  71             var message;
  72             if (timezoneOffset > 0) {
  73                 message = ngettext(
  74                     'Note: You are %s hour ahead of server time.',
  75                     'Note: You are %s hours ahead of server time.',
  76                     timezoneOffset
  77                 );
  78             }
  79             else {
  80                 timezoneOffset *= -1;
  81                 message = ngettext(
  82                     'Note: You are %s hour behind server time.',
  83                     'Note: You are %s hours behind server time.',
  84                     timezoneOffset
  85                 );
  86             }
  87             message = interpolate(message, [timezoneOffset]);
  88
  89             var $warning = $('<span>');
  90             $warning.attr('class', warningClass);
  91             $warning.text(message);
  92
  93             $(inp).parent()
  94                 .append($('<br>'))
  95                 .append($warning);
  96         },
  97         // Add clock widget to a given field
  98         addClock: function(inp) {
  99             var num = DateTimeShortcuts.clockInputs.length;
 100             DateTimeShortcuts.clockInputs[num] = inp;
 101             DateTimeShortcuts.dismissClockFunc[num] = function() { DateTimeShortcuts.dismissClock(num); return true; };
 102
 103             // Shortcut links (clock icon and "Now" link)
 104             var shortcuts_span = document.createElement('span');
 105             shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
 106             inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
 107             var now_link = document.createElement('a');
 108             now_link.setAttribute('href', "#");
 109             now_link.appendChild(document.createTextNode(gettext('Now')));
 110             addEvent(now_link, 'click', function(e) {
 111                 e.preventDefault();
 112                 DateTimeShortcuts.handleClockQuicklink(num, -1);
 113             });
 114             var clock_link = document.createElement('a');
 115             clock_link.setAttribute('href', '#');
 116             clock_link.id = DateTimeShortcuts.clockLinkName + num;
 117             addEvent(clock_link, 'click', function(e) {
 118                 e.preventDefault();
 119                 // avoid triggering the document click handler to dismiss the clock
 120                 e.stopPropagation();
 121                 DateTimeShortcuts.openClock(num);
 122             });
 123
 124             quickElement(
 125                 'span', clock_link, '',
 126                 'class', 'clock-icon',
 127                 'title', gettext('Choose a Time')
 128             );
 129             shortcuts_span.appendChild(document.createTextNode('\u00A0'));
 130             shortcuts_span.appendChild(now_link);
 131             shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
 132             shortcuts_span.appendChild(clock_link);
 133
 134             // Create clock link div
 135             //
 136             // Markup looks like:
 137             // <div id="clockbox1" class="clockbox module">
 138             //     <h2>Choose a time</h2>
 139             //     <ul class="timelist">
 140             //         <li><a href="#">Now</a></li>
 141             //         <li><a href="#">Midnight</a></li>
 142             //         <li><a href="#">6 a.m.</a></li>
 143             //         <li><a href="#">Noon</a></li>
 144             //         <li><a href="#">6 p.m.</a></li>
 145             //     </ul>
 146             //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
 147             // </div>
 148
 149             var clock_box = document.createElement('div');
 150             clock_box.style.display = 'none';
 151             clock_box.style.position = 'absolute';
 152             clock_box.className = 'clockbox module';
 153             clock_box.setAttribute('id', DateTimeShortcuts.clockDivName + num);
 154             document.body.appendChild(clock_box);
 155             addEvent(clock_box, 'click', cancelEventPropagation);
 156
 157             quickElement('h2', clock_box, gettext('Choose a time'));
 158             var time_list = quickElement('ul', clock_box);
 159             time_list.className = 'timelist';
 160             var time_link = quickElement("a", quickElement("li", time_list), gettext("Now"), "href", "#");
 161             addEvent(time_link, 'click', function(e) {
 162                 e.preventDefault();
 163                 DateTimeShortcuts.handleClockQuicklink(num, -1);
 164             });
 165             time_link = quickElement("a", quickElement("li", time_list), gettext("Midnight"), "href", "#");
 166             addEvent(time_link, 'click', function(e) {
 167                 e.preventDefault();
 168                 DateTimeShortcuts.handleClockQuicklink(num, 0);
 169             });
 170             time_link = quickElement("a", quickElement("li", time_list), gettext("6 a.m."), "href", "#");
 171             addEvent(time_link, 'click', function(e) {
 172                 e.preventDefault();
 173                 DateTimeShortcuts.handleClockQuicklink(num, 6);
 174             });
 175             time_link = quickElement("a", quickElement("li", time_list), gettext("Noon"), "href", "#");
 176             addEvent(time_link, 'click', function(e) {
 177                 e.preventDefault();
 178                 DateTimeShortcuts.handleClockQuicklink(num, 12);
 179             });
 180             time_link = quickElement("a", quickElement("li", time_list), gettext("6 p.m."), "href", "#");
 181             addEvent(time_link, 'click', function(e) {
 182                 e.preventDefault();
 183                 DateTimeShortcuts.handleClockQuicklink(num, 18);
 184             });
 185
 186             var cancel_p = quickElement('p', clock_box);
 187             cancel_p.className = 'calendar-cancel';
 188             var cancel_link = quickElement('a', cancel_p, gettext('Cancel'), 'href', '#');
 189             addEvent(cancel_link, 'click', function(e) {
 190                 e.preventDefault();
 191                 DateTimeShortcuts.dismissClock(num);
 192             });
 193
 194             django.jQuery(document).bind('keyup', function(event) {
 195                 if (event.which === 27) {
 196                     // ESC key closes popup
 197                     DateTimeShortcuts.dismissClock(num);
 198                     event.preventDefault();
 199                 }
 200             });
 201         },
 202         openClock: function(num) {
 203             var clock_box = document.getElementById(DateTimeShortcuts.clockDivName + num);
 204             var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName + num);
 205
 206             // Recalculate the clockbox position
 207             // is it left-to-right or right-to-left layout ?
 208             if (getStyle(document.body, 'direction') !== 'rtl') {
 209                 clock_box.style.left = findPosX(clock_link) + 17 + 'px';
 210             }
 211             else {
 212                 // since style's width is in em, it'd be tough to calculate
 213                 // px value of it. let's use an estimated px for now
 214                 // TODO: IE returns wrong value for findPosX when in rtl mode
 215                 //       (it returns as it was left aligned), needs to be fixed.
 216                 clock_box.style.left = findPosX(clock_link) - 110 + 'px';
 217             }
 218             clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px';
 219
 220             // Show the clock box
 221             clock_box.style.display = 'block';
 222             addEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
 223         },
 224         dismissClock: function(num) {
 225             document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
 226             removeEvent(document, 'click', DateTimeShortcuts.dismissClockFunc[num]);
 227         },
 228         handleClockQuicklink: function(num, val) {
 229             var d;
 230             if (val === -1) {
 231                 d = DateTimeShortcuts.now();
 232             }
 233             else {
 234                 d = new Date(1970, 1, 1, val, 0, 0, 0);
 235             }
 236             DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
 237             DateTimeShortcuts.clockInputs[num].focus();
 238             DateTimeShortcuts.dismissClock(num);
 239         },
 240         // Add calendar widget to a given field.
 241         addCalendar: function(inp) {
 242             var num = DateTimeShortcuts.calendars.length;
 243
 244             DateTimeShortcuts.calendarInputs[num] = inp;
 245             DateTimeShortcuts.dismissCalendarFunc[num] = function() { DateTimeShortcuts.dismissCalendar(num); return true; };
 246
 247             // Shortcut links (calendar icon and "Today" link)
 248             var shortcuts_span = document.createElement('span');
 249             shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
 250             inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
 251             var today_link = document.createElement('a');
 252             today_link.setAttribute('href', '#');
 253             today_link.appendChild(document.createTextNode(gettext('Today')));
 254             addEvent(today_link, 'click', function(e) {
 255                 e.preventDefault();
 256                 DateTimeShortcuts.handleCalendarQuickLink(num, 0);
 257             });
 258             var cal_link = document.createElement('a');
 259             cal_link.setAttribute('href', '#');
 260             cal_link.id = DateTimeShortcuts.calendarLinkName + num;
 261             addEvent(cal_link, 'click', function(e) {
 262                 e.preventDefault();
 263                 // avoid triggering the document click handler to dismiss the calendar
 264                 e.stopPropagation();
 265                 DateTimeShortcuts.openCalendar(num);
 266             });
 267             quickElement(
 268                 'span', cal_link, '',
 269                 'class', 'date-icon',
 270                 'title', gettext('Choose a Date')
 271             );
 272             shortcuts_span.appendChild(document.createTextNode('\u00A0'));
 273             shortcuts_span.appendChild(today_link);
 274             shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
 275             shortcuts_span.appendChild(cal_link);
 276
 277             // Create calendarbox div.
 278             //
 279             // Markup looks like:
 280             //
 281             // <div id="calendarbox3" class="calendarbox module">
 282             //     <h2>
 283             //           <a href="#" class="link-previous">&lsaquo;</a>
 284             //           <a href="#" class="link-next">&rsaquo;</a> February 2003
 285             //     </h2>
 286             //     <div class="calendar" id="calendarin3">
 287             //         <!-- (cal) -->
 288             //     </div>
 289             //     <div class="calendar-shortcuts">
 290             //          <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
 291             //     </div>
 292             //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
 293             // </div>
 294             var cal_box = document.createElement('div');
 295             cal_box.style.display = 'none';
 296             cal_box.style.position = 'absolute';
 297             cal_box.className = 'calendarbox module';
 298             cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
 299             document.body.appendChild(cal_box);
 300             addEvent(cal_box, 'click', cancelEventPropagation);
 301
 302             // next-prev links
 303             var cal_nav = quickElement('div', cal_box);
 304             var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', '#');
 305             cal_nav_prev.className = 'calendarnav-previous';
 306             addEvent(cal_nav_prev, 'click', function(e) {
 307                 e.preventDefault();
 308                 DateTimeShortcuts.drawPrev(num);
 309             });
 310
 311             var cal_nav_next = quickElement('a', cal_nav, '>', 'href', '#');
 312             cal_nav_next.className = 'calendarnav-next';
 313             addEvent(cal_nav_next, 'click', function(e) {
 314                 e.preventDefault();
 315                 DateTimeShortcuts.drawNext(num);
 316             });
 317
 318             // main box
 319             var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
 320             cal_main.className = 'calendar';
 321             DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
 322             DateTimeShortcuts.calendars[num].drawCurrent();
 323
 324             // calendar shortcuts
 325             var shortcuts = quickElement('div', cal_box);
 326             shortcuts.className = 'calendar-shortcuts';
 327             var day_link = quickElement('a', shortcuts, gettext('Yesterday'), 'href', '#');
 328             addEvent(day_link, 'click', function(e) {
 329                 e.preventDefault();
 330                 DateTimeShortcuts.handleCalendarQuickLink(num, -1);
 331             });
 332             shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
 333             day_link = quickElement('a', shortcuts, gettext('Today'), 'href', '#');
 334             addEvent(day_link, 'click', function(e) {
 335                 e.preventDefault();
 336                 DateTimeShortcuts.handleCalendarQuickLink(num, 0);
 337             });
 338             shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
 339             day_link = quickElement('a', shortcuts, gettext('Tomorrow'), 'href', '#');
 340             addEvent(day_link, 'click', function(e) {
 341                 e.preventDefault();
 342                 DateTimeShortcuts.handleCalendarQuickLink(num, +1);
 343             });
 344
 345             // cancel bar
 346             var cancel_p = quickElement('p', cal_box);
 347             cancel_p.className = 'calendar-cancel';
 348             var cancel_link = quickElement('a', cancel_p, gettext('Cancel'), 'href', '#');
 349             addEvent(cancel_link, 'click', function(e) {
 350                 e.preventDefault();
 351                 DateTimeShortcuts.dismissCalendar(num);
 352             });
 353             django.jQuery(document).bind('keyup', function(event) {
 354                 if (event.which === 27) {
 355                     // ESC key closes popup
 356                     DateTimeShortcuts.dismissCalendar(num);
 357                     event.preventDefault();
 358                 }
 359             });
 360         },
 361         openCalendar: function(num) {
 362             var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1 + num);
 363             var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName + num);
 364             var inp = DateTimeShortcuts.calendarInputs[num];
 365
 366             // Determine if the current value in the input has a valid date.
 367             // If so, draw the calendar with that date's year and month.
 368             if (inp.value) {
 369                 var format = get_format('DATE_INPUT_FORMATS')[0];
 370                 var selected = inp.value.strptime(format);
 371                 var year = selected.getUTCFullYear();
 372                 var month = selected.getUTCMonth() + 1;
 373                 var re = /\d{4}/;
 374                 if (re.test(year.toString()) && month >= 1 && month <= 12) {
 375                     DateTimeShortcuts.calendars[num].drawDate(month, year, selected);
 376                 }
 377             }
 378
 379             // Recalculate the clockbox position
 380             // is it left-to-right or right-to-left layout ?
 381             if (getStyle(document.body, 'direction') !== 'rtl') {
 382                 cal_box.style.left = findPosX(cal_link) + 17 + 'px';
 383             }
 384             else {
 385                 // since style's width is in em, it'd be tough to calculate
 386                 // px value of it. let's use an estimated px for now
 387                 // TODO: IE returns wrong value for findPosX when in rtl mode
 388                 //       (it returns as it was left aligned), needs to be fixed.
 389                 cal_box.style.left = findPosX(cal_link) - 180 + 'px';
 390             }
 391             cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px';
 392
 393             cal_box.style.display = 'block';
 394             addEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
 395         },
 396         dismissCalendar: function(num) {
 397             document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
 398             removeEvent(document, 'click', DateTimeShortcuts.dismissCalendarFunc[num]);
 399         },
 400         drawPrev: function(num) {
 401             DateTimeShortcuts.calendars[num].drawPreviousMonth();
 402         },
 403         drawNext: function(num) {
 404             DateTimeShortcuts.calendars[num].drawNextMonth();
 405         },
 406         handleCalendarCallback: function(num) {
 407             var format = get_format('DATE_INPUT_FORMATS')[0];
 408             // the format needs to be escaped a little
 409             format = format.replace('\\', '\\\\');
 410             format = format.replace('\r', '\\r');
 411             format = format.replace('\n', '\\n');
 412             format = format.replace('\t', '\\t');
 413             format = format.replace("'", "\\'");
 414             return function(y, m, d) {
 415                 DateTimeShortcuts.calendarInputs[num].value = new Date(y, m - 1, d).strftime(format);
 416                 DateTimeShortcuts.calendarInputs[num].focus();
 417                 document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
 418             };
 419         },
 420         handleCalendarQuickLink: function(num, offset) {
 421             var d = DateTimeShortcuts.now();
 422             d.setDate(d.getDate() + offset);
 423             DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
 424             DateTimeShortcuts.calendarInputs[num].focus();
 425             DateTimeShortcuts.dismissCalendar(num);
 426         }
 427     };
 428
 429     addEvent(window, 'load', DateTimeShortcuts.init);
 430     window.DateTimeShortcuts = DateTimeShortcuts;
 431 })();