Mercurial > public > madeira

annotate media/django/js/admin/DateTimeShortcuts.js @ 1:0dcfcdf50c62

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial import of Madeira project from the private repository.
author Brian Neal <bgneal@gmail.com>
date Mon, 06 Apr 2009 03:10:59 +0000
parents
children
rev   line source
bgneal@1 1 // Inserts shortcut buttons after all of the following:
bgneal@1 2 // <input type="text" class="vDateField">
bgneal@1 3 // <input type="text" class="vTimeField">
bgneal@1 4
bgneal@1 5 var DateTimeShortcuts = {
bgneal@1 6 calendars: [],
bgneal@1 7 calendarInputs: [],
bgneal@1 8 clockInputs: [],
bgneal@1 9 calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
bgneal@1 10 calendarDivName2: 'calendarin', // name of <div> that contains calendar
bgneal@1 11 calendarLinkName: 'calendarlink',// name of the link that is used to toggle
bgneal@1 12 clockDivName: 'clockbox', // name of clock <div> that gets toggled
bgneal@1 13 clockLinkName: 'clocklink', // name of the link that is used to toggle
bgneal@1 14 admin_media_prefix: '',
bgneal@1 15 init: function() {
bgneal@1 16 // Deduce admin_media_prefix by looking at the <script>s in the
bgneal@1 17 // current document and finding the URL of *this* module.
bgneal@1 18 var scripts = document.getElementsByTagName('script');
bgneal@1 19 for (var i=0; i<scripts.length; i++) {
bgneal@1 20 if (scripts[i].src.match(/DateTimeShortcuts/)) {
bgneal@1 21 var idx = scripts[i].src.indexOf('js/admin/DateTimeShortcuts');
bgneal@1 22 DateTimeShortcuts.admin_media_prefix = scripts[i].src.substring(0, idx);
bgneal@1 23 break;
bgneal@1 24 }
bgneal@1 25 }
bgneal@1 26
bgneal@1 27 var inputs = document.getElementsByTagName('input');
bgneal@1 28 for (i=0; i<inputs.length; i++) {
bgneal@1 29 var inp = inputs[i];
bgneal@1 30 if (inp.getAttribute('type') == 'text' && inp.className.match(/vTimeField/)) {
bgneal@1 31 DateTimeShortcuts.addClock(inp);
bgneal@1 32 }
bgneal@1 33 else if (inp.getAttribute('type') == 'text' && inp.className.match(/vDateField/)) {
bgneal@1 34 DateTimeShortcuts.addCalendar(inp);
bgneal@1 35 }
bgneal@1 36 }
bgneal@1 37 },
bgneal@1 38 // Add clock widget to a given field
bgneal@1 39 addClock: function(inp) {
bgneal@1 40 var num = DateTimeShortcuts.clockInputs.length;
bgneal@1 41 DateTimeShortcuts.clockInputs[num] = inp;
bgneal@1 42
bgneal@1 43 // Shortcut links (clock icon and "Now" link)
bgneal@1 44 var shortcuts_span = document.createElement('span');
bgneal@1 45 inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
bgneal@1 46 var now_link = document.createElement('a');
bgneal@1 47 now_link.setAttribute('href', "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().getHourMinuteSecond());");
bgneal@1 48 now_link.appendChild(document.createTextNode(gettext('Now')));
bgneal@1 49 var clock_link = document.createElement('a');
bgneal@1 50 clock_link.setAttribute('href', 'javascript:DateTimeShortcuts.openClock(' + num + ');');
bgneal@1 51 clock_link.id = DateTimeShortcuts.clockLinkName + num;
bgneal@1 52 quickElement('img', clock_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/admin/icon_clock.gif', 'alt', gettext('Clock'));
bgneal@1 53 shortcuts_span.appendChild(document.createTextNode('\240'));
bgneal@1 54 shortcuts_span.appendChild(now_link);
bgneal@1 55 shortcuts_span.appendChild(document.createTextNode('\240|\240'));
bgneal@1 56 shortcuts_span.appendChild(clock_link);
bgneal@1 57
bgneal@1 58 // Create clock link div
bgneal@1 59 //
bgneal@1 60 // Markup looks like:
bgneal@1 61 // <div id="clockbox1" class="clockbox module">
bgneal@1 62 // <h2>Choose a time</h2>
bgneal@1 63 // <ul class="timelist">
bgneal@1 64 // <li><a href="#">Now</a></li>
bgneal@1 65 // <li><a href="#">Midnight</a></li>
bgneal@1 66 // <li><a href="#">6 a.m.</a></li>
bgneal@1 67 // <li><a href="#">Noon</a></li>
bgneal@1 68 // </ul>
bgneal@1 69 // <p class="calendar-cancel"><a href="#">Cancel</a></p>
bgneal@1 70 // </div>
bgneal@1 71
bgneal@1 72 var clock_box = document.createElement('div');
bgneal@1 73 clock_box.style.display = 'none';
bgneal@1 74 clock_box.style.position = 'absolute';
bgneal@1 75 clock_box.className = 'clockbox module';
bgneal@1 76 clock_box.setAttribute('id', DateTimeShortcuts.clockDivName + num);
bgneal@1 77 document.body.appendChild(clock_box);
bgneal@1 78 addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation);
bgneal@1 79
bgneal@1 80 quickElement('h2', clock_box, gettext('Choose a time'));
bgneal@1 81 time_list = quickElement('ul', clock_box, '');
bgneal@1 82 time_list.className = 'timelist';
bgneal@1 83 quickElement("a", quickElement("li", time_list, ""), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().getHourMinuteSecond());")
bgneal@1 84 quickElement("a", quickElement("li", time_list, ""), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", '00:00:00');")
bgneal@1 85 quickElement("a", quickElement("li", time_list, ""), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", '06:00:00');")
bgneal@1 86 quickElement("a", quickElement("li", time_list, ""), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", '12:00:00');")
bgneal@1 87
bgneal@1 88 cancel_p = quickElement('p', clock_box, '');
bgneal@1 89 cancel_p.className = 'calendar-cancel';
bgneal@1 90 quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
bgneal@1 91 },
bgneal@1 92 openClock: function(num) {
bgneal@1 93 var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
bgneal@1 94 var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName+num)
bgneal@1 95
bgneal@1 96 // Recalculate the clockbox position
bgneal@1 97 // is it left-to-right or right-to-left layout ?
bgneal@1 98 if (getStyle(document.body,'direction')!='rtl') {
bgneal@1 99 clock_box.style.left = findPosX(clock_link) + 17 + 'px';
bgneal@1 100 }
bgneal@1 101 else {
bgneal@1 102 // since style's width is in em, it'd be tough to calculate
bgneal@1 103 // px value of it. let's use an estimated px for now
bgneal@1 104 // TODO: IE returns wrong value for findPosX when in rtl mode
bgneal@1 105 // (it returns as it was left aligned), needs to be fixed.
bgneal@1 106 clock_box.style.left = findPosX(clock_link) - 110 + 'px';
bgneal@1 107 }
bgneal@1 108 clock_box.style.top = findPosY(clock_link) - 30 + 'px';
bgneal@1 109
bgneal@1 110 // Show the clock box
bgneal@1 111 clock_box.style.display = 'block';
bgneal@1 112 addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissClock(num); return true; });
bgneal@1 113 },
bgneal@1 114 dismissClock: function(num) {
bgneal@1 115 document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
bgneal@1 116 window.document.onclick = null;
bgneal@1 117 },
bgneal@1 118 handleClockQuicklink: function(num, val) {
bgneal@1 119 DateTimeShortcuts.clockInputs[num].value = val;
bgneal@1 120 DateTimeShortcuts.dismissClock(num);
bgneal@1 121 },
bgneal@1 122 // Add calendar widget to a given field.
bgneal@1 123 addCalendar: function(inp) {
bgneal@1 124 var num = DateTimeShortcuts.calendars.length;
bgneal@1 125
bgneal@1 126 DateTimeShortcuts.calendarInputs[num] = inp;
bgneal@1 127
bgneal@1 128 // Shortcut links (calendar icon and "Today" link)
bgneal@1 129 var shortcuts_span = document.createElement('span');
bgneal@1 130 inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
bgneal@1 131 var today_link = document.createElement('a');
bgneal@1 132 today_link.setAttribute('href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
bgneal@1 133 today_link.appendChild(document.createTextNode(gettext('Today')));
bgneal@1 134 var cal_link = document.createElement('a');
bgneal@1 135 cal_link.setAttribute('href', 'javascript:DateTimeShortcuts.openCalendar(' + num + ');');
bgneal@1 136 cal_link.id = DateTimeShortcuts.calendarLinkName + num;
bgneal@1 137 quickElement('img', cal_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/admin/icon_calendar.gif', 'alt', gettext('Calendar'));
bgneal@1 138 shortcuts_span.appendChild(document.createTextNode('\240'));
bgneal@1 139 shortcuts_span.appendChild(today_link);
bgneal@1 140 shortcuts_span.appendChild(document.createTextNode('\240|\240'));
bgneal@1 141 shortcuts_span.appendChild(cal_link);
bgneal@1 142
bgneal@1 143 // Create calendarbox div.
bgneal@1 144 //
bgneal@1 145 // Markup looks like:
bgneal@1 146 //
bgneal@1 147 // <div id="calendarbox3" class="calendarbox module">
bgneal@1 148 // <h2>
bgneal@1 149 // <a href="#" class="link-previous">&lsaquo;</a>
bgneal@1 150 // <a href="#" class="link-next">&rsaquo;</a> February 2003
bgneal@1 151 // </h2>
bgneal@1 152 // <div class="calendar" id="calendarin3">
bgneal@1 153 // <!-- (cal) -->
bgneal@1 154 // </div>
bgneal@1 155 // <div class="calendar-shortcuts">
bgneal@1 156 // <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
bgneal@1 157 // </div>
bgneal@1 158 // <p class="calendar-cancel"><a href="#">Cancel</a></p>
bgneal@1 159 // </div>
bgneal@1 160 var cal_box = document.createElement('div');
bgneal@1 161 cal_box.style.display = 'none';
bgneal@1 162 cal_box.style.position = 'absolute';
bgneal@1 163 cal_box.className = 'calendarbox module';
bgneal@1 164 cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
bgneal@1 165 document.body.appendChild(cal_box);
bgneal@1 166 addEvent(cal_box, 'click', DateTimeShortcuts.cancelEventPropagation);
bgneal@1 167
bgneal@1 168 // next-prev links
bgneal@1 169 var cal_nav = quickElement('div', cal_box, '');
bgneal@1 170 var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', 'javascript:DateTimeShortcuts.drawPrev('+num+');');
bgneal@1 171 cal_nav_prev.className = 'calendarnav-previous';
bgneal@1 172 var cal_nav_next = quickElement('a', cal_nav, '>', 'href', 'javascript:DateTimeShortcuts.drawNext('+num+');');
bgneal@1 173 cal_nav_next.className = 'calendarnav-next';
bgneal@1 174
bgneal@1 175 // main box
bgneal@1 176 var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
bgneal@1 177 cal_main.className = 'calendar';
bgneal@1 178 DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
bgneal@1 179 DateTimeShortcuts.calendars[num].drawCurrent();
bgneal@1 180
bgneal@1 181 // calendar shortcuts
bgneal@1 182 var shortcuts = quickElement('div', cal_box, '');
bgneal@1 183 shortcuts.className = 'calendar-shortcuts';
bgneal@1 184 quickElement('a', shortcuts, gettext('Yesterday'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', -1);');
bgneal@1 185 shortcuts.appendChild(document.createTextNode('\240|\240'));
bgneal@1 186 quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
bgneal@1 187 shortcuts.appendChild(document.createTextNode('\240|\240'));
bgneal@1 188 quickElement('a', shortcuts, gettext('Tomorrow'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', +1);');
bgneal@1 189
bgneal@1 190 // cancel bar
bgneal@1 191 var cancel_p = quickElement('p', cal_box, '');
bgneal@1 192 cancel_p.className = 'calendar-cancel';
bgneal@1 193 quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');');
bgneal@1 194 },
bgneal@1 195 openCalendar: function(num) {
bgneal@1 196 var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
bgneal@1 197 var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
bgneal@1 198 var inp = DateTimeShortcuts.calendarInputs[num];
bgneal@1 199
bgneal@1 200 // Determine if the current value in the input has a valid date.
bgneal@1 201 // If so, draw the calendar with that date's year and month.
bgneal@1 202 if (inp.value) {
bgneal@1 203 var date_parts = inp.value.split('-');
bgneal@1 204 var year = date_parts[0];
bgneal@1 205 var month = parseFloat(date_parts[1]);
bgneal@1 206 if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) {
bgneal@1 207 DateTimeShortcuts.calendars[num].drawDate(month, year);
bgneal@1 208 }
bgneal@1 209 }
bgneal@1 210
bgneal@1 211
bgneal@1 212 // Recalculate the clockbox position
bgneal@1 213 // is it left-to-right or right-to-left layout ?
bgneal@1 214 if (getStyle(document.body,'direction')!='rtl') {
bgneal@1 215 cal_box.style.left = findPosX(cal_link) + 17 + 'px';
bgneal@1 216 }
bgneal@1 217 else {
bgneal@1 218 // since style's width is in em, it'd be tough to calculate
bgneal@1 219 // px value of it. let's use an estimated px for now
bgneal@1 220 // TODO: IE returns wrong value for findPosX when in rtl mode
bgneal@1 221 // (it returns as it was left aligned), needs to be fixed.
bgneal@1 222 cal_box.style.left = findPosX(cal_link) - 180 + 'px';
bgneal@1 223 }
bgneal@1 224 cal_box.style.top = findPosY(cal_link) - 75 + 'px';
bgneal@1 225
bgneal@1 226 cal_box.style.display = 'block';
bgneal@1 227 addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissCalendar(num); return true; });
bgneal@1 228 },
bgneal@1 229 dismissCalendar: function(num) {
bgneal@1 230 document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
bgneal@1 231 window.document.onclick = null;
bgneal@1 232 },
bgneal@1 233 drawPrev: function(num) {
bgneal@1 234 DateTimeShortcuts.calendars[num].drawPreviousMonth();
bgneal@1 235 },
bgneal@1 236 drawNext: function(num) {
bgneal@1 237 DateTimeShortcuts.calendars[num].drawNextMonth();
bgneal@1 238 },
bgneal@1 239 handleCalendarCallback: function(num) {
bgneal@1 240 return "function(y, m, d) { DateTimeShortcuts.calendarInputs["+num+"].value = y+'-'+(m<10?'0':'')+m+'-'+(d<10?'0':'')+d; document.getElementById(DateTimeShortcuts.calendarDivName1+"+num+").style.display='none';}";
bgneal@1 241 },
bgneal@1 242 handleCalendarQuickLink: function(num, offset) {
bgneal@1 243 var d = new Date();
bgneal@1 244 d.setDate(d.getDate() + offset)
bgneal@1 245 DateTimeShortcuts.calendarInputs[num].value = d.getISODate();
bgneal@1 246 DateTimeShortcuts.dismissCalendar(num);
bgneal@1 247 },
bgneal@1 248 cancelEventPropagation: function(e) {
bgneal@1 249 if (!e) e = window.event;
bgneal@1 250 e.cancelBubble = true;
bgneal@1 251 if (e.stopPropagation) e.stopPropagation();
bgneal@1 252 }
bgneal@1 253 }
bgneal@1 254
bgneal@1 255 addEvent(window, 'load', DateTimeShortcuts.init);