b3ba4b171d2de8f953d4547df50e411c0b816609
[moodle.git] / lib / form / yui / src / dateselector / js / calendar.js
1 /**
2  * Provides the Calendar class.
3  *
4  * @module moodle-form-dateselector
5  */
7 /**
8  * Calendar class
9  */
10 CALENDAR = function() {
11     CALENDAR.superclass.constructor.apply(this, arguments);
12 };
13 CALENDAR.prototype = {
14     panel: null,
15     yearselect: null,
16     monthselect: null,
17     dayselect: null,
18     calendarimage: null,
19     enablecheckbox: null,
20     closepopup: true,
21     initializer: function() {
22         var controls = this.get('node').all('select');
23         controls.each(function(node) {
24             if (node.get('name').match(/\[year\]/)) {
25                 this.yearselect = node;
26             } else if (node.get('name').match(/\[month\]/)) {
27                 this.monthselect = node;
28             } else if (node.get('name').match(/\[day\]/)) {
29                 this.dayselect = node;
30             }
31             node.after('change', this.handle_select_change, this);
32         }, this);
34         // Loop through the input fields.
35         var inputs = this.get('node').all('input, a');
36         inputs.each(function(node) {
37             // Check if the current node is a calendar image field.
38             if (node.get('name').match(/\[calendar\]/)) {
39                 // Set it so that when the image is clicked the pop-up displays.
40                 node.on('click', this.focus_event, this);
41                 // Set the node to the calendarimage variable.
42                 this.calendarimage = node;
43             } else { // Must be the enabled checkbox field.
44                 // If the enable checkbox is clicked we want to either disable/enable the calendar image.
45                 node.on('click', this.toggle_calendar_image, this);
46                 // Set the node to the enablecheckbox variable.
47                 this.enablecheckbox = node;
48             }
49             // Ensure that the calendarimage and enablecheckbox values have been set.
50             if (this.calendarimage && this.enablecheckbox) {
51                 // Set the calendar icon status depending on the value of the checkbox.
52                 this.toggle_calendar_image();
53             }
54         }, this);
55     },
56     focus_event: function(e) {
57         M.form.dateselector.cancel_any_timeout();
58         // If the current owner is set, then the pop-up is currently being displayed, so hide it.
59         if (M.form.dateselector.currentowner === this) {
60             this.release_calendar();
61         } else if ((this.enablecheckbox === null)
62             || (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
63             this.claim_calendar();
64         }
65         // Stop the input image field from submitting the form.
66         e.preventDefault();
67     },
68     handle_select_change: function() {
69         // It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
70         // call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
71         // the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
72         this.closepopup = false;
73         this.set_date_from_selects();
74         this.closepopup = true;
75     },
76     claim_calendar: function() {
77         M.form.dateselector.cancel_any_timeout();
78         if (M.form.dateselector.currentowner === this) {
79             return;
80         }
81         if (M.form.dateselector.currentowner) {
82             M.form.dateselector.currentowner.release_calendar();
83         }
84         if (M.form.dateselector.currentowner !== this) {
85             this.connect_handlers();
86             this.set_date_from_selects();
87         }
88         M.form.dateselector.currentowner = this;
89         M.form.dateselector.calendar.set('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
90         M.form.dateselector.calendar.set('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
91         M.form.dateselector.panel.show();
92         M.form.dateselector.calendar.show();
93         M.form.dateselector.fix_position();
94         setTimeout(function() {
95             M.form.dateselector.cancel_any_timeout();
96         }, 100);
98         // Focus on the calendar.
99         M.form.dateselector.calendar.focus();
101         // When the user tab out the calendar, close it.
102         Y.one(document.body).on('keyup', function(e) {
103             // hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
104             if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
105                 ((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
106                 // Focus back on the calendar button.
107                 this.calendarimage.focus();
108                 this.release_calendar();
109             }
110         }, this);
112     },
113     set_date_from_selects: function() {
114         var year = parseInt(this.yearselect.get('value'), 10);
115         var month = parseInt(this.monthselect.get('value'), 10) - 1;
116         var day = parseInt(this.dayselect.get('value'), 10);
117         var date = new Date(year, month, day);
118         M.form.dateselector.calendar.deselectDates();
119         M.form.dateselector.calendar.selectDates([date]);
120         M.form.dateselector.calendar.set("date", date);
121         M.form.dateselector.calendar.render();
122         if (date.getDate() !== day) {
123             // Must've selected the 29 to 31st of a month that doesn't have such dates.
124             this.dayselect.set('value', date.getDate());
125             this.monthselect.set('value', date.getMonth() + 1);
126         }
127     },
128     set_selects_from_date: function(ev) {
129         var date = ev.newSelection[0];
130         var newyear = Y.DataType.Date.format(date, {format: "%Y"});
131         var newindex = newyear - this.yearselect.firstOptionValue();
132         this.yearselect.set('selectedIndex', newindex);
133         this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
134         this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
135         if (M.form.dateselector.currentowner && this.closepopup) {
136             this.release_calendar();
137         }
138     },
139     connect_handlers: function() {
140         M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
141     },
142     release_calendar: function(e) {
143         var wasOwner = M.form.dateselector.currentowner === this;
144         M.form.dateselector.panel.hide();
145         M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
146         M.form.dateselector.calendar.hide();
147         M.form.dateselector.currentowner = null;
149         // Put the focus back to the image calendar that we clicked, only if it was visible.
150         if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
151             this.calendarimage.focus();
152         }
153     },
154     toggle_calendar_image: function() {
155         // If the enable checkbox is det checked, disable the image.
156         if (!this.enablecheckbox.get('checked')) {
157             this.calendarimage.set('disabled', 'disabled');
158             this.calendarimage.setStyle('cursor', 'default');
159             this.release_calendar();
160         } else {
161             this.calendarimage.set('disabled', false);
162             this.calendarimage.setStyle('cursor', null);
163         }
164     }
165 };
166 Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
167     NAME: 'Date Selector',
168     ATTRS: {
169         firstdayofweek: {
170             validator: Y.Lang.isString
171         },
172         node: {
173             setter: function(node) {
174                 return Y.one(node);
175             }
176         }
177     }
178 });