PageRenderTime 206ms CodeModel.GetById 173ms app.highlight 24ms RepoModel.GetById 6ms app.codeStats 0ms

/django/contrib/admin/media/js/admin/DateTimeShortcuts.js

https://code.google.com/p/mango-py/
JavaScript | 274 lines | 193 code | 20 blank | 61 comment | 21 complexity | e0b92808aa9470f93719a2ee71d1b55f MD5 | raw file
  1// Inserts shortcut buttons after all of the following:
  2//     <input type="text" class="vDateField">
  3//     <input type="text" class="vTimeField">
  4
  5var DateTimeShortcuts = {
  6    calendars: [],
  7    calendarInputs: [],
  8    clockInputs: [],
  9    calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
 10    calendarDivName2: 'calendarin',  // name of <div> that contains calendar
 11    calendarLinkName: 'calendarlink',// name of the link that is used to toggle
 12    clockDivName: 'clockbox',        // name of clock <div> that gets toggled
 13    clockLinkName: 'clocklink',      // name of the link that is used to toggle
 14    shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts
 15    admin_media_prefix: '',
 16    init: function() {
 17        // Get admin_media_prefix by grabbing it off the window object. It's
 18        // set in the admin/base.html template, so if it's not there, someone's
 19        // overridden the template. In that case, we'll set a clearly-invalid
 20        // value in the hopes that someone will examine HTTP requests and see it.
 21        if (window.__admin_media_prefix__ != undefined) {
 22            DateTimeShortcuts.admin_media_prefix = window.__admin_media_prefix__;
 23        } else {
 24            DateTimeShortcuts.admin_media_prefix = '/missing-admin-media-prefix/';
 25        }
 26
 27        var inputs = document.getElementsByTagName('input');
 28        for (i=0; i<inputs.length; i++) {
 29            var inp = inputs[i];
 30            if (inp.getAttribute('type') == 'text' && inp.className.match(/vTimeField/)) {
 31                DateTimeShortcuts.addClock(inp);
 32            }
 33            else if (inp.getAttribute('type') == 'text' && inp.className.match(/vDateField/)) {
 34                DateTimeShortcuts.addCalendar(inp);
 35            }
 36        }
 37    },
 38    // Add clock widget to a given field
 39    addClock: function(inp) {
 40        var num = DateTimeShortcuts.clockInputs.length;
 41        DateTimeShortcuts.clockInputs[num] = inp;
 42
 43        // Shortcut links (clock icon and "Now" link)
 44        var shortcuts_span = document.createElement('span');
 45        shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
 46        inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
 47        var now_link = document.createElement('a');
 48        now_link.setAttribute('href', "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + get_format('TIME_INPUT_FORMATS')[0] + "'));");
 49        now_link.appendChild(document.createTextNode(gettext('Now')));
 50        var clock_link = document.createElement('a');
 51        clock_link.setAttribute('href', 'javascript:DateTimeShortcuts.openClock(' + num + ');');
 52        clock_link.id = DateTimeShortcuts.clockLinkName + num;
 53        quickElement('img', clock_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/admin/icon_clock.gif', 'alt', gettext('Clock'));
 54        shortcuts_span.appendChild(document.createTextNode('\240'));
 55        shortcuts_span.appendChild(now_link);
 56        shortcuts_span.appendChild(document.createTextNode('\240|\240'));
 57        shortcuts_span.appendChild(clock_link);
 58
 59        // Create clock link div
 60        //
 61        // Markup looks like:
 62        // <div id="clockbox1" class="clockbox module">
 63        //     <h2>Choose a time</h2>
 64        //     <ul class="timelist">
 65        //         <li><a href="#">Now</a></li>
 66        //         <li><a href="#">Midnight</a></li>
 67        //         <li><a href="#">6 a.m.</a></li>
 68        //         <li><a href="#">Noon</a></li>
 69        //     </ul>
 70        //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
 71        // </div>
 72
 73        var clock_box = document.createElement('div');
 74        clock_box.style.display = 'none';
 75        clock_box.style.position = 'absolute';
 76        clock_box.className = 'clockbox module';
 77        clock_box.setAttribute('id', DateTimeShortcuts.clockDivName + num);
 78        document.body.appendChild(clock_box);
 79        addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation);
 80
 81        quickElement('h2', clock_box, gettext('Choose a time'));
 82        time_list = quickElement('ul', clock_box, '');
 83        time_list.className = 'timelist';
 84        time_format = get_format('TIME_INPUT_FORMATS')[0];
 85        quickElement("a", quickElement("li", time_list, ""), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + time_format + "'));");
 86        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 + "'));");
 87        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 + "'));");
 88        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 + "'));");
 89
 90        cancel_p = quickElement('p', clock_box, '');
 91        cancel_p.className = 'calendar-cancel';
 92        quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
 93    },
 94    openClock: function(num) {
 95        var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
 96        var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName+num)
 97
 98        // Recalculate the clockbox position
 99        // is it left-to-right or right-to-left layout ?
100        if (getStyle(document.body,'direction')!='rtl') {
101            clock_box.style.left = findPosX(clock_link) + 17 + 'px';
102        }
103        else {
104            // since style's width is in em, it'd be tough to calculate
105            // px value of it. let's use an estimated px for now
106            // TODO: IE returns wrong value for findPosX when in rtl mode
107            //       (it returns as it was left aligned), needs to be fixed.
108            clock_box.style.left = findPosX(clock_link) - 110 + 'px';
109        }
110        clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px';
111
112        // Show the clock box
113        clock_box.style.display = 'block';
114        addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissClock(num); return true; });
115    },
116    dismissClock: function(num) {
117       document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
118       window.document.onclick = null;
119    },
120    handleClockQuicklink: function(num, val) {
121       DateTimeShortcuts.clockInputs[num].value = val;
122       DateTimeShortcuts.clockInputs[num].focus();
123       DateTimeShortcuts.dismissClock(num);
124    },
125    // Add calendar widget to a given field.
126    addCalendar: function(inp) {
127        var num = DateTimeShortcuts.calendars.length;
128
129        DateTimeShortcuts.calendarInputs[num] = inp;
130
131        // Shortcut links (calendar icon and "Today" link)
132        var shortcuts_span = document.createElement('span');
133        shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
134        inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
135        var today_link = document.createElement('a');
136        today_link.setAttribute('href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
137        today_link.appendChild(document.createTextNode(gettext('Today')));
138        var cal_link = document.createElement('a');
139        cal_link.setAttribute('href', 'javascript:DateTimeShortcuts.openCalendar(' + num + ');');
140        cal_link.id = DateTimeShortcuts.calendarLinkName + num;
141        quickElement('img', cal_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/admin/icon_calendar.gif', 'alt', gettext('Calendar'));
142        shortcuts_span.appendChild(document.createTextNode('\240'));
143        shortcuts_span.appendChild(today_link);
144        shortcuts_span.appendChild(document.createTextNode('\240|\240'));
145        shortcuts_span.appendChild(cal_link);
146
147        // Create calendarbox div.
148        //
149        // Markup looks like:
150        //
151        // <div id="calendarbox3" class="calendarbox module">
152        //     <h2>
153        //           <a href="#" class="link-previous">&lsaquo;</a>
154        //           <a href="#" class="link-next">&rsaquo;</a> February 2003
155        //     </h2>
156        //     <div class="calendar" id="calendarin3">
157        //         <!-- (cal) -->
158        //     </div>
159        //     <div class="calendar-shortcuts">
160        //          <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
161        //     </div>
162        //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
163        // </div>
164        var cal_box = document.createElement('div');
165        cal_box.style.display = 'none';
166        cal_box.style.position = 'absolute';
167        cal_box.className = 'calendarbox module';
168        cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
169        document.body.appendChild(cal_box);
170        addEvent(cal_box, 'click', DateTimeShortcuts.cancelEventPropagation);
171
172        // next-prev links
173        var cal_nav = quickElement('div', cal_box, '');
174        var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', 'javascript:DateTimeShortcuts.drawPrev('+num+');');
175        cal_nav_prev.className = 'calendarnav-previous';
176        var cal_nav_next = quickElement('a', cal_nav, '>', 'href', 'javascript:DateTimeShortcuts.drawNext('+num+');');
177        cal_nav_next.className = 'calendarnav-next';
178
179        // main box
180        var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
181        cal_main.className = 'calendar';
182        DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
183        DateTimeShortcuts.calendars[num].drawCurrent();
184
185        // calendar shortcuts
186        var shortcuts = quickElement('div', cal_box, '');
187        shortcuts.className = 'calendar-shortcuts';
188        quickElement('a', shortcuts, gettext('Yesterday'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', -1);');
189        shortcuts.appendChild(document.createTextNode('\240|\240'));
190        quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
191        shortcuts.appendChild(document.createTextNode('\240|\240'));
192        quickElement('a', shortcuts, gettext('Tomorrow'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', +1);');
193
194        // cancel bar
195        var cancel_p = quickElement('p', cal_box, '');
196        cancel_p.className = 'calendar-cancel';
197        quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');');
198    },
199    openCalendar: function(num) {
200        var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
201        var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
202        var inp = DateTimeShortcuts.calendarInputs[num];
203
204        // Determine if the current value in the input has a valid date.
205        // If so, draw the calendar with that date's year and month.
206        if (inp.value) {
207            var date_parts = inp.value.split('-');
208            var year = date_parts[0];
209            var month = parseFloat(date_parts[1]);
210            if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) {
211                DateTimeShortcuts.calendars[num].drawDate(month, year);
212            }
213        }
214
215        // Recalculate the clockbox position
216        // is it left-to-right or right-to-left layout ?
217        if (getStyle(document.body,'direction')!='rtl') {
218            cal_box.style.left = findPosX(cal_link) + 17 + 'px';
219        }
220        else {
221            // since style's width is in em, it'd be tough to calculate
222            // px value of it. let's use an estimated px for now
223            // TODO: IE returns wrong value for findPosX when in rtl mode
224            //       (it returns as it was left aligned), needs to be fixed.
225            cal_box.style.left = findPosX(cal_link) - 180 + 'px';
226        }
227        cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px';
228
229        cal_box.style.display = 'block';
230        addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissCalendar(num); return true; });
231    },
232    dismissCalendar: function(num) {
233        document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
234        window.document.onclick = null;
235    },
236    drawPrev: function(num) {
237        DateTimeShortcuts.calendars[num].drawPreviousMonth();
238    },
239    drawNext: function(num) {
240        DateTimeShortcuts.calendars[num].drawNextMonth();
241    },
242    handleCalendarCallback: function(num) {
243        format = get_format('DATE_INPUT_FORMATS')[0];
244        // the format needs to be escaped a little
245        format = format.replace('\\', '\\\\');
246        format = format.replace('\r', '\\r');
247        format = format.replace('\n', '\\n');
248        format = format.replace('\t', '\\t');
249        format = format.replace("'", "\\'");
250        return ["function(y, m, d) { DateTimeShortcuts.calendarInputs[",
251               num,
252               "].value = new Date(y, m-1, d).strftime('",
253               format,
254               "');DateTimeShortcuts.calendarInputs[",
255               num,
256               "].focus();document.getElementById(DateTimeShortcuts.calendarDivName1+",
257               num,
258               ").style.display='none';}"].join('');
259    },
260    handleCalendarQuickLink: function(num, offset) {
261       var d = new Date();
262       d.setDate(d.getDate() + offset)
263       DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
264       DateTimeShortcuts.calendarInputs[num].focus();
265       DateTimeShortcuts.dismissCalendar(num);
266    },
267    cancelEventPropagation: function(e) {
268        if (!e) e = window.event;
269        e.cancelBubble = true;
270        if (e.stopPropagation) e.stopPropagation();
271    }
272}
273
274addEvent(window, 'load', DateTimeShortcuts.init);