MDL-55244 js: fix various lint warnings in yui
[moodle.git] / lib / form / yui / build / moodle-form-dateselector / moodle-form-dateselector-debug.js
CommitLineData
5cba1029
JM
1YUI.add('moodle-form-dateselector', function (Y, NAME) {
2
ad3f8cd1
DP
3/* global CALENDAR, MOODLECALENDAR */
4
5cba1029
JM
5/**
6 * Add some custom methods to the node class to make our lives a little
7 * easier within this module.
8 */
9Y.mix(Y.Node.prototype, {
10 /**
11 * Gets the value of the first option in the select box
12 */
13 firstOptionValue: function() {
14 if (this.get('nodeName').toLowerCase() !== 'select') {
15 return false;
16 }
17 return this.one('option').get('value');
18 },
19 /**
20 * Gets the value of the last option in the select box
21 */
22 lastOptionValue: function() {
23 if (this.get('nodeName').toLowerCase() !== 'select') {
24 return false;
25 }
26 return this.all('option').item(this.optionSize()-1).get('value');
27 },
28 /**
29 * Gets the number of options in the select box
30 */
31 optionSize: function() {
32 if (this.get('nodeName').toLowerCase() !== 'select') {
33 return false;
34 }
35 return parseInt(this.all('option').size(), 10);
36 },
37 /**
38 * Gets the value of the selected option in the select box
39 */
40 selectedOptionValue: function() {
41 if (this.get('nodeName').toLowerCase() !== 'select') {
42 return false;
43 }
44 return this.all('option').item(this.get('selectedIndex')).get('value');
45 }
46});
47
48M.form = M.form || {};
49M.form.dateselector = {
50 panel: null,
51 calendar: null,
52 currentowner: null,
53 hidetimeout: null,
54 repositiontimeout: null,
55 init_date_selectors: function(config) {
56 if (this.panel === null) {
57 this.initPanel(config);
58 }
59 Y.all('.fdate_time_selector').each(function() {
60 config.node = this;
61 new CALENDAR(config);
62 });
63 Y.all('.fdate_selector').each(function() {
64 config.node = this;
65 new CALENDAR(config);
66 });
67 },
68 initPanel: function(config) {
69 this.panel = new Y.Overlay({
70 visible: false,
71 bodyContent: Y.Node.create('<div id="dateselector-calendar-content"></div>'),
72 id: 'dateselector-calendar-panel'
73 });
74 this.panel.render(document.body);
75 // zIndex is added by panel.render() and is set to 0.
76 // Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but
77 // ie8 fails and there is know issue for it.
78 Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
79 this.panel.on('heightChange', this.fix_position, this);
80
81 Y.one('#dateselector-calendar-panel').on('click', function(e){e.halt();});
82 Y.one(document.body).on('click', this.document_click, this);
83
84 this.calendar = new MOODLECALENDAR({
85 contentBox: "#dateselector-calendar-content",
86 width: "300px",
87 showPrevMonth: true,
88 showNextMonth: true,
6d4088b7 89 firstdayofweek: parseInt(config.firstdayofweek, 10),
5cba1029
JM
90 WEEKDAYS_MEDIUM: [
91 config.sun,
92 config.mon,
93 config.tue,
94 config.wed,
95 config.thu,
96 config.fri,
97 config.sat ]
98 });
99 },
100 cancel_any_timeout: function() {
101 if (this.hidetimeout) {
102 clearTimeout(this.hidetimeout);
103 this.hidetimeout = null;
104 }
105 if (this.repositiontimeout) {
106 clearTimeout(this.repositiontimeout);
107 this.repositiontimeout = null;
108 }
109 },
110 delayed_reposition: function() {
111 if (this.repositiontimeout) {
112 clearTimeout(this.repositiontimeout);
113 this.repositiontimeout = null;
114 }
115 this.repositiontimeout = setTimeout(this.fix_position, 500);
116 },
117 fix_position: function() {
118 if (this.currentowner) {
119 var alignpoints = [
120 Y.WidgetPositionAlign.BL,
121 Y.WidgetPositionAlign.TL
122 ];
123
124 // Change the alignment if this is an RTL language.
557f44d9 125 if (window.right_to_left()) {
5cba1029
JM
126 alignpoints = [
127 Y.WidgetPositionAlign.BR,
128 Y.WidgetPositionAlign.TR
129 ];
130 }
131
132
133 this.panel.set('align', {
134 node: this.currentowner.get('node').one('select'),
135 points: alignpoints
136 });
137 }
138 },
139 document_click: function(e) {
140 if (this.currentowner) {
141 if (this.currentowner.get('node').ancestor('div').contains(e.target)) {
142 setTimeout(function() {
143 M.form.dateselector.cancel_any_timeout();
144 }, 100);
145 } else {
146 this.currentowner.release_calendar(e);
147 }
148 }
149 }
150};
151/**
152 * Provides the Moodle Calendar class.
153 *
154 * @module moodle-form-dateselector
155 */
156
157/**
158 * A class to overwrite the YUI3 Calendar in order to change the strings..
159 *
160 * @class M.form_moodlecalendar
161 * @constructor
162 * @extends Calendar
163 */
164var MOODLECALENDAR = function() {
165 MOODLECALENDAR.superclass.constructor.apply(this, arguments);
166};
167
168Y.extend(MOODLECALENDAR, Y.Calendar, {
169 initializer: function(cfg) {
170 this.set("strings.very_short_weekdays", cfg.WEEKDAYS_MEDIUM);
171 this.set("strings.first_weekday", cfg.firstdayofweek);
172 }
173 }, {
174 NAME: 'Calendar',
175 ATTRS: {}
176 }
177);
178
179M.form_moodlecalendar = M.form_moodlecalendar || {};
180M.form_moodlecalendar.initializer = function(params) {
181 return new MOODLECALENDAR(params);
182};
183/**
184 * Provides the Calendar class.
185 *
186 * @module moodle-form-dateselector
187 */
188
189/**
190 * Calendar class
191 */
192var CALENDAR = function() {
193 CALENDAR.superclass.constructor.apply(this, arguments);
194};
195CALENDAR.prototype = {
196 panel: null,
197 yearselect: null,
198 monthselect: null,
199 dayselect: null,
200 calendarimage: null,
201 enablecheckbox: null,
202 closepopup: true,
203 initializer: function() {
204 var controls = this.get('node').all('select');
205 controls.each(function(node){
206 if (node.get('name').match(/\[year\]/)) {
207 this.yearselect = node;
208 } else if (node.get('name').match(/\[month\]/)) {
209 this.monthselect = node;
210 } else if (node.get('name').match(/\[day\]/)) {
211 this.dayselect = node;
212 }
213 node.after('change', this.handle_select_change, this);
214 }, this);
215
216 // Loop through the input fields.
217 var inputs = this.get('node').all('input, a');
218 inputs.each(function(node) {
219 // Check if the current node is a calendar image field.
220 if (node.get('name').match(/\[calendar\]/)) {
221 // Set it so that when the image is clicked the pop-up displays.
222 node.on('click', this.focus_event, this);
223 // Set the node to the calendarimage variable.
224 this.calendarimage = node;
225 } else { // Must be the enabled checkbox field.
226 // If the enable checkbox is clicked we want to either disable/enable the calendar image.
227 node.on('click', this.toggle_calendar_image, this);
228 // Set the node to the enablecheckbox variable.
229 this.enablecheckbox = node;
230 }
231 // Ensure that the calendarimage and enablecheckbox values have been set.
232 if (this.calendarimage && this.enablecheckbox) {
233 // Set the calendar icon status depending on the value of the checkbox.
234 this.toggle_calendar_image();
235 }
236 }, this);
237 },
238 focus_event: function(e) {
239 M.form.dateselector.cancel_any_timeout();
240 // If the current owner is set, then the pop-up is currently being displayed, so hide it.
241 if (M.form.dateselector.currentowner === this) {
242 this.release_calendar();
243 } else if ((this.enablecheckbox === null)
244 || (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
245 this.claim_calendar();
246 }
247 // Stop the input image field from submitting the form.
248 e.preventDefault();
249 },
250 handle_select_change: function() {
251 // It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
252 // call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
253 // the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
254 this.closepopup = false;
255 this.set_date_from_selects();
256 this.closepopup = true;
257 },
258 claim_calendar: function() {
259 M.form.dateselector.cancel_any_timeout();
260 if (M.form.dateselector.currentowner === this) {
261 return;
262 }
263 if (M.form.dateselector.currentowner) {
264 M.form.dateselector.currentowner.release_calendar();
265 }
266 if (M.form.dateselector.currentowner !== this) {
267 this.connect_handlers();
268 this.set_date_from_selects();
269 }
270 M.form.dateselector.currentowner = this;
271 M.form.dateselector.calendar.set('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
272 M.form.dateselector.calendar.set('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
273 M.form.dateselector.panel.show();
274 M.form.dateselector.calendar.show();
275 M.form.dateselector.fix_position();
276 setTimeout(function() {
277 M.form.dateselector.cancel_any_timeout();
278 }, 100);
279
280 // Focus on the calendar.
281 M.form.dateselector.calendar.focus();
282
283 // When the user tab out the calendar, close it.
284 Y.one(document.body).on('keyup', function(e) {
285 // hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
286 if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
287 ((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
288 // Focus back on the calendar button.
289 this.calendarimage.focus();
290 this.release_calendar();
291 }
292 }, this);
293
294 },
295 set_date_from_selects: function() {
296 var year = parseInt(this.yearselect.get('value'), 10);
297 var month = parseInt(this.monthselect.get('value'), 10) - 1;
298 var day = parseInt(this.dayselect.get('value'), 10);
299 var date = new Date(year, month, day);
300 M.form.dateselector.calendar.deselectDates();
301 M.form.dateselector.calendar.selectDates([date]);
302 M.form.dateselector.calendar.set("date", date);
303 M.form.dateselector.calendar.render();
304 if (date.getDate() !== day) {
305 // Must've selected the 29 to 31st of a month that doesn't have such dates.
306 this.dayselect.set('value', date.getDate());
307 this.monthselect.set('value', date.getMonth() + 1);
308 }
309 },
310 set_selects_from_date: function(ev) {
311 var date = ev.newSelection[0];
312 var newyear = Y.DataType.Date.format(date, {format: "%Y"});
313 var newindex = newyear - this.yearselect.firstOptionValue();
314 this.yearselect.set('selectedIndex', newindex);
315 this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
316 this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
317 if (M.form.dateselector.currentowner && this.closepopup) {
318 this.release_calendar();
319 }
320 },
321 connect_handlers: function() {
322 M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
323 },
324 release_calendar: function(e) {
74d0ca15 325 var wasOwner = M.form.dateselector.currentowner === this;
5cba1029
JM
326 M.form.dateselector.panel.hide();
327 M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
328 M.form.dateselector.calendar.hide();
329 M.form.dateselector.currentowner = null;
330
74d0ca15
FM
331 // Put the focus back to the image calendar that we clicked, only if it was visible.
332 if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
5cba1029
JM
333 this.calendarimage.focus();
334 }
335 },
336 toggle_calendar_image: function() {
337 // If the enable checkbox is det checked, disable the image.
338 if (!this.enablecheckbox.get('checked')) {
339 this.calendarimage.set('disabled', 'disabled');
340 this.calendarimage.setStyle('cursor', 'default');
341 this.release_calendar();
342 } else {
343 this.calendarimage.set('disabled', false);
344 this.calendarimage.setStyle('cursor', null);
345 }
346 }
347};
348Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
349 NAME: 'Date Selector',
350 ATTRS: {
351 firstdayofweek : {
352 validator: Y.Lang.isString
353 },
354 node: {
355 setter: function(node) {
356 return Y.one(node);
357 }
358 }
359 }
360});
361
362
363}, '@VERSION@', {"requires": ["base", "node", "overlay", "calendar"]});