← Back to branch summary

~pexego/openobject-addons/6.1-pexego-sale_commission

« back to all changes in this revision

Viewing changes to django_pos/static/admin/js/admin/DateTimeShortcuts.js

  • Committer: Santi Argueso (Pexego)
  • Date: 2013-02-06 17:03:36 UTC
  • mfrom: (10.1.6 pexego-addons_6.1)
  • Revision ID: santiago@pexego.es-20130206170336-ml430s6p9jknun0j
[MERGE]

Show diffs side-by-side

added added

removed removed

Lines of Context:
django_pos/static/admin/js/admin/DateTimeShortcuts.js
 
1
// Inserts shortcut buttons after all of the following:
 
2
//     <input type="text" class="vDateField">
 
3
//     <input type="text" class="vTimeField">
 
4
 
 
5
var 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/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
        var time_list = quickElement('ul', clock_box, '');
 
83
        time_list.className = 'timelist';
 
84
        var 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
        var 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
        django.jQuery(document).bind('keyup', function(event) {
 
94
            if (event.which == 27) {
 
95
                // ESC key closes popup
 
96
                DateTimeShortcuts.dismissClock(num);
 
97
                event.preventDefault();
 
98
            }
 
99
        });
 
100
    },
 
101
    openClock: function(num) {
 
102
        var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
 
103
        var clock_link = document.getElementById(DateTimeShortcuts.clockLinkName+num)
 
104
 
 
105
        // Recalculate the clockbox position
 
106
        // is it left-to-right or right-to-left layout ?
 
107
        if (getStyle(document.body,'direction')!='rtl') {
 
108
            clock_box.style.left = findPosX(clock_link) + 17 + 'px';
 
109
        }
 
110
        else {
 
111
            // since style's width is in em, it'd be tough to calculate
 
112
            // px value of it. let's use an estimated px for now
 
113
            // TODO: IE returns wrong value for findPosX when in rtl mode
 
114
            //       (it returns as it was left aligned), needs to be fixed.
 
115
            clock_box.style.left = findPosX(clock_link) - 110 + 'px';
 
116
        }
 
117
        clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px';
 
118
 
 
119
        // Show the clock box
 
120
        clock_box.style.display = 'block';
 
121
        addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissClock(num); return true; });
 
122
    },
 
123
    dismissClock: function(num) {
 
124
       document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
 
125
       window.document.onclick = null;
 
126
    },
 
127
    handleClockQuicklink: function(num, val) {
 
128
       DateTimeShortcuts.clockInputs[num].value = val;
 
129
       DateTimeShortcuts.clockInputs[num].focus();
 
130
       DateTimeShortcuts.dismissClock(num);
 
131
    },
 
132
    // Add calendar widget to a given field.
 
133
    addCalendar: function(inp) {
 
134
        var num = DateTimeShortcuts.calendars.length;
 
135
 
 
136
        DateTimeShortcuts.calendarInputs[num] = inp;
 
137
 
 
138
        // Shortcut links (calendar icon and "Today" link)
 
139
        var shortcuts_span = document.createElement('span');
 
140
        shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
 
141
        inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
 
142
        var today_link = document.createElement('a');
 
143
        today_link.setAttribute('href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
 
144
        today_link.appendChild(document.createTextNode(gettext('Today')));
 
145
        var cal_link = document.createElement('a');
 
146
        cal_link.setAttribute('href', 'javascript:DateTimeShortcuts.openCalendar(' + num + ');');
 
147
        cal_link.id = DateTimeShortcuts.calendarLinkName + num;
 
148
        quickElement('img', cal_link, '', 'src', DateTimeShortcuts.admin_media_prefix + 'img/icon_calendar.gif', 'alt', gettext('Calendar'));
 
149
        shortcuts_span.appendChild(document.createTextNode('\240'));
 
150
        shortcuts_span.appendChild(today_link);
 
151
        shortcuts_span.appendChild(document.createTextNode('\240|\240'));
 
152
        shortcuts_span.appendChild(cal_link);
 
153
 
 
154
        // Create calendarbox div.
 
155
        //
 
156
        // Markup looks like:
 
157
        //
 
158
        // <div id="calendarbox3" class="calendarbox module">
 
159
        //     <h2>
 
160
        //           <a href="#" class="link-previous">&lsaquo;</a>
 
161
        //           <a href="#" class="link-next">&rsaquo;</a> February 2003
 
162
        //     </h2>
 
163
        //     <div class="calendar" id="calendarin3">
 
164
        //         <!-- (cal) -->
 
165
        //     </div>
 
166
        //     <div class="calendar-shortcuts">
 
167
        //          <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
 
168
        //     </div>
 
169
        //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
 
170
        // </div>
 
171
        var cal_box = document.createElement('div');
 
172
        cal_box.style.display = 'none';
 
173
        cal_box.style.position = 'absolute';
 
174
        cal_box.className = 'calendarbox module';
 
175
        cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
 
176
        document.body.appendChild(cal_box);
 
177
        addEvent(cal_box, 'click', DateTimeShortcuts.cancelEventPropagation);
 
178
 
 
179
        // next-prev links
 
180
        var cal_nav = quickElement('div', cal_box, '');
 
181
        var cal_nav_prev = quickElement('a', cal_nav, '<', 'href', 'javascript:DateTimeShortcuts.drawPrev('+num+');');
 
182
        cal_nav_prev.className = 'calendarnav-previous';
 
183
        var cal_nav_next = quickElement('a', cal_nav, '>', 'href', 'javascript:DateTimeShortcuts.drawNext('+num+');');
 
184
        cal_nav_next.className = 'calendarnav-next';
 
185
 
 
186
        // main box
 
187
        var cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
 
188
        cal_main.className = 'calendar';
 
189
        DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
 
190
        DateTimeShortcuts.calendars[num].drawCurrent();
 
191
 
 
192
        // calendar shortcuts
 
193
        var shortcuts = quickElement('div', cal_box, '');
 
194
        shortcuts.className = 'calendar-shortcuts';
 
195
        quickElement('a', shortcuts, gettext('Yesterday'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', -1);');
 
196
        shortcuts.appendChild(document.createTextNode('\240|\240'));
 
197
        quickElement('a', shortcuts, gettext('Today'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', 0);');
 
198
        shortcuts.appendChild(document.createTextNode('\240|\240'));
 
199
        quickElement('a', shortcuts, gettext('Tomorrow'), 'href', 'javascript:DateTimeShortcuts.handleCalendarQuickLink(' + num + ', +1);');
 
200
 
 
201
        // cancel bar
 
202
        var cancel_p = quickElement('p', cal_box, '');
 
203
        cancel_p.className = 'calendar-cancel';
 
204
        quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');');
 
205
        django.jQuery(document).bind('keyup', function(event) {
 
206
            if (event.which == 27) {
 
207
                // ESC key closes popup
 
208
                DateTimeShortcuts.dismissCalendar(num);
 
209
                event.preventDefault();
 
210
            }
 
211
        });
 
212
    },
 
213
    openCalendar: function(num) {
 
214
        var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
 
215
        var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
 
216
        var inp = DateTimeShortcuts.calendarInputs[num];
 
217
 
 
218
        // Determine if the current value in the input has a valid date.
 
219
        // If so, draw the calendar with that date's year and month.
 
220
        if (inp.value) {
 
221
            var date_parts = inp.value.split('-');
 
222
            var year = date_parts[0];
 
223
            var month = parseFloat(date_parts[1]);
 
224
            if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) {
 
225
                DateTimeShortcuts.calendars[num].drawDate(month, year);
 
226
            }
 
227
        }
 
228
 
 
229
        // Recalculate the clockbox position
 
230
        // is it left-to-right or right-to-left layout ?
 
231
        if (getStyle(document.body,'direction')!='rtl') {
 
232
            cal_box.style.left = findPosX(cal_link) + 17 + 'px';
 
233
        }
 
234
        else {
 
235
            // since style's width is in em, it'd be tough to calculate
 
236
            // px value of it. let's use an estimated px for now
 
237
            // TODO: IE returns wrong value for findPosX when in rtl mode
 
238
            //       (it returns as it was left aligned), needs to be fixed.
 
239
            cal_box.style.left = findPosX(cal_link) - 180 + 'px';
 
240
        }
 
241
        cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px';
 
242
 
 
243
        cal_box.style.display = 'block';
 
244
        addEvent(window.document, 'click', function() { DateTimeShortcuts.dismissCalendar(num); return true; });
 
245
    },
 
246
    dismissCalendar: function(num) {
 
247
        document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
 
248
        window.document.onclick = null;
 
249
    },
 
250
    drawPrev: function(num) {
 
251
        DateTimeShortcuts.calendars[num].drawPreviousMonth();
 
252
    },
 
253
    drawNext: function(num) {
 
254
        DateTimeShortcuts.calendars[num].drawNextMonth();
 
255
    },
 
256
    handleCalendarCallback: function(num) {
 
257
        format = get_format('DATE_INPUT_FORMATS')[0];
 
258
        // the format needs to be escaped a little
 
259
        format = format.replace('\\', '\\\\');
 
260
        format = format.replace('\r', '\\r');
 
261
        format = format.replace('\n', '\\n');
 
262
        format = format.replace('\t', '\\t');
 
263
        format = format.replace("'", "\\'");
 
264
        return ["function(y, m, d) { DateTimeShortcuts.calendarInputs[",
 
265
               num,
 
266
               "].value = new Date(y, m-1, d).strftime('",
 
267
               format,
 
268
               "');DateTimeShortcuts.calendarInputs[",
 
269
               num,
 
270
               "].focus();document.getElementById(DateTimeShortcuts.calendarDivName1+",
 
271
               num,
 
272
               ").style.display='none';}"].join('');
 
273
    },
 
274
    handleCalendarQuickLink: function(num, offset) {
 
275
       var d = new Date();
 
276
       d.setDate(d.getDate() + offset)
 
277
       DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
 
278
       DateTimeShortcuts.calendarInputs[num].focus();
 
279
       DateTimeShortcuts.dismissCalendar(num);
 
280
    },
 
281
    cancelEventPropagation: function(e) {
 
282
        if (!e) e = window.event;
 
283
        e.cancelBubble = true;
 
284
        if (e.stopPropagation) e.stopPropagation();
 
285
    }
 
286
}
 
287
 
 
288
addEvent(window, 'load', DateTimeShortcuts.init);