mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

Revert "MDL-32917 YUI2 to YUI3 Calendar port: only display the date from the matching selector and display the month/year matching the selector value"

Browse Source 
There are numerous bugs with this new module to do with showing the currently selected date,
random changes in the selected dates, showing multiple selected dates and css errors.

This reverts commit 1d128663f69be8b60fc28b6b7732acd24d800a98.
This reverts commit 4a521e6596918279fd0cdeb47d06e7906bc004cc.
This commit is contained in:
Damyon Wiese 2014-03-06 13:37:52 +08:00
parent 81b4ec4fc3
commit 052b8c81c6
10 changed files with 304 additions and 1064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

348
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js vendored
View File

@ -1,348 +0,0 @@
YUI.add('moodle-form-dateselector', function (Y, NAME) {
/**
* Add some custom methods to the node class to make our lives a little
* easier within this module.
*/
Y.mix(Y.Node.prototype, {
/**
* Gets the value of the first option in the select box
*/
firstOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.one('option').get('value');
},
/**
* Gets the value of the last option in the select box
*/
lastOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.all('option').item(this.optionSize()-1).get('value');
},
/**
* Gets the number of options in the select box
*/
optionSize : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return parseInt(this.all('option').size(), 10);
},
/**
* Gets the value of the selected option in the select box
*/
selectedOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.all('option').item(this.get('selectedIndex')).get('value');
}
});
M.form = M.form || {};
M.form.dateselector = {
panel : null,
calendar : null,
currentowner : null,
hidetimeout : null,
repositiontimeout : null,
init_date_selectors : function(config) {
if (this.panel === null) {
this.initPanel(config);
}
Y.all('.fdate_time_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
Y.all('.fdate_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
},
initPanel : function(config) {
this.panel = new Y.Overlay({
visible : false,
bodyContent : Y.Node.create('<div id="dateselector-calendar-content"></div>'),
id : 'dateselector-calendar-panel'
});
this.panel.render(document.body);
// zIndex is added by panel.render() and is set to 0.
// Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but
// ie8 fails and there is know issue for it.
Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
this.panel.on('heightChange', this.fix_position, this);
Y.one('#dateselector-calendar-panel').on('click', function(e){e.halt();});
Y.one(document.body).on('click', this.document_click, this);
this.calendar = new MOODLECALENDAR({
contentBox: "#dateselector-calendar-content",
width: "300px",
showPrevMonth: true,
showNextMonth: true,
firstdayofweek: config.firstdayofweek,
WEEKDAYS_MEDIUM: [
config.sun,
config.mon,
config.tue,
config.wed,
config.thu,
config.fri,
config.sat ]
});
},
cancel_any_timeout : function() {
if (this.hidetimeout) {
clearTimeout(this.hidetimeout);
this.hidetimeout = null;
}
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
},
delayed_reposition : function() {
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
this.repositiontimeout = setTimeout(this.fix_position, 500);
},
fix_position : function() {
if (this.currentowner) {
this.panel.set('align', {
node:this.currentowner.get('node').one('select'),
points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
});
}
},
document_click : function(e) {
if (this.currentowner) {
if (this.currentowner.get('node').ancestor('div').contains(e.target)) {
setTimeout(function() {
M.form.dateselector.cancel_any_timeout();
}, 100);
} else {
this.currentowner.release_calendar(e);
}
}
}
};
/**
* Provides the Moodle Calendar class.
*
* @module moodle-form-dateselector
*/
/**
* A class to overwrite the YUI3 Calendar in order to change the strings..
*
* @class M.form.dateselector
* @constructor
* @extends Calendar
*/
var MOODLECALENDAR = function() {
MOODLECALENDAR.superclass.constructor.apply(this, arguments);
};
Y.extend(MOODLECALENDAR, Y.Calendar,
{
initializer: function(cfg) {
this.set("strings.very_short_weekdays", cfg.WEEKDAYS_MEDIUM);
this.set("strings.first_weekday ", cfg.firstdayofweek);
}
},
{
NAME : 'Calendar',
ATTRS : {}
}
);
M.form_moodlecalendar = M.form_moodlecalendar || {};
M.form_moodlecalendar.initializer = function(params) {
return new MOODLECALENDAR(params);
};
/**
* Provides the Calendar class.
*
* @module moodle-form-dateselector
*/
/**
* Calendar class
*/
var CALENDAR = function() {
CALENDAR.superclass.constructor.apply(this, arguments);
};
CALENDAR.prototype = {
panel : null,
yearselect : null,
monthselect : null,
dayselect : null,
calendarimage : null,
enablecheckbox : null,
closepopup : true,
initializer : function() {
var controls = this.get('node').all('select');
controls.each(function(node){
if (node.get('name').match(/\[year\]/)) {
this.yearselect = node;
} else if (node.get('name').match(/\[month\]/)) {
this.monthselect = node;
} else if (node.get('name').match(/\[day\]/)) {
this.dayselect = node;
}
node.after('change', this.handle_select_change, this);
}, this);
// Loop through the input fields.
var inputs = this.get('node').all('input, a');
inputs.each(function(node) {
// Check if the current node is a calendar image field.
if (node.get('name').match(/\[calendar\]/)) {
// Set it so that when the image is clicked the pop-up displays.
node.on('click', this.focus_event, this);
// Set the node to the calendarimage variable.
this.calendarimage = node;
} else { // Must be the enabled checkbox field.
// If the enable checkbox is clicked we want to either disable/enable the calendar image.
node.on('click', this.toggle_calendar_image, this);
// Set the node to the enablecheckbox variable.
this.enablecheckbox = node;
}
// Ensure that the calendarimage and enablecheckbox values have been set.
if (this.calendarimage && this.enablecheckbox) {
// Set the calendar icon status depending on the value of the checkbox.
this.toggle_calendar_image();
}
}, this);
},
focus_event : function(e) {
M.form.dateselector.cancel_any_timeout();
// If the current owner is set, then the pop-up is currently being displayed, so hide it.
if (M.form.dateselector.currentowner === this) {
this.release_calendar();
} else if ((this.enablecheckbox === null)
|| (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
this.claim_calendar();
}
// Stop the input image field from submitting the form.
e.preventDefault();
},
handle_select_change : function() {
// It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
// call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
// the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
this.closepopup = false;
this.set_date_from_selects();
this.closepopup = true;
},
claim_calendar : function() {
M.form.dateselector.cancel_any_timeout();
if (M.form.dateselector.currentowner === this) {
return;
}
if (M.form.dateselector.currentowner) {
M.form.dateselector.currentowner.release_calendar();
}
if (M.form.dateselector.currentowner !== this) {
this.connect_handlers();
this.set_date_from_selects();
}
M.form.dateselector.currentowner = this;
M.form.dateselector.calendar.set('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
M.form.dateselector.calendar.set('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
M.form.dateselector.panel.show();
M.form.dateselector.calendar.show();
M.form.dateselector.fix_position();
setTimeout(function() {
M.form.dateselector.cancel_any_timeout();
}, 100);
// Focus on the calendar.
M.form.dateselector.calendar.focus();
// When the user tab out the calendar, close it.
Y.one(document.body).on('keyup', function(e) {
// hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
// Focus back on the calendar button.
this.calendarimage.focus();
this.release_calendar();
}
}, this);
},
set_date_from_selects : function() {
var year = parseInt(this.yearselect.get('value'), 10);
var month = parseInt(this.monthselect.get('value'), 10) - 1;
var day = parseInt(this.dayselect.get('value'), 10);
var date = new Date(year, month, day);
M.form.dateselector.calendar.deselectDates();
M.form.dateselector.calendar.selectDates([date]);
M.form.dateselector.calendar.set("date", date);
M.form.dateselector.calendar.render();
if (date.getDate() !== day) {
// Must've selected the 29 to 31st of a month that doesn't have such dates.
this.dayselect.set('value', date.getDate());
this.monthselect.set('value', date.getMonth() + 1);
}
},
set_selects_from_date : function(ev) {
var date = ev.newSelection[0];
var newyear = Y.DataType.Date.format(date, {format: "%Y"});
var newindex = newyear - this.yearselect.firstOptionValue();
this.yearselect.set('selectedIndex', newindex);
this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
if (M.form.dateselector.currentowner && this.closepopup) {
this.release_calendar();
}
},
connect_handlers : function() {
M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
},
release_calendar : function(e) {
M.form.dateselector.panel.hide();
M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
M.form.dateselector.calendar.hide();
M.form.dateselector.currentowner = null;
// Put the focus back to the image calendar that we clicked.
if (e === null || typeof e === "undefined" || e.type !== "click") {
this.calendarimage.focus();
}
},
toggle_calendar_image : function() {
// If the enable checkbox is det checked, disable the image.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.set('disabled', 'disabled');
this.calendarimage.setStyle('cursor', 'default');
this.release_calendar();
} else {
this.calendarimage.set('disabled', false);
this.calendarimage.setStyle('cursor', null);
}
}
};
Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
NAME : 'Date Selector',
ATTRS : {
firstdayofweek : {
validator : Y.Lang.isString
},
node : {
setter : function(node) {
return Y.one(node);
}
}
}
});
}, '@VERSION@', {"requires": ["base", "node", "overlay", "calendar"]});

2
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-min.js vendored
View File

File diff suppressed because one or more lines are too long

348
lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js vendored
View File

@ -1,348 +0,0 @@
YUI.add('moodle-form-dateselector', function (Y, NAME) {
/**
* Add some custom methods to the node class to make our lives a little
* easier within this module.
*/
Y.mix(Y.Node.prototype, {
/**
* Gets the value of the first option in the select box
*/
firstOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.one('option').get('value');
},
/**
* Gets the value of the last option in the select box
*/
lastOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.all('option').item(this.optionSize()-1).get('value');
},
/**
* Gets the number of options in the select box
*/
optionSize : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return parseInt(this.all('option').size(), 10);
},
/**
* Gets the value of the selected option in the select box
*/
selectedOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.all('option').item(this.get('selectedIndex')).get('value');
}
});
M.form = M.form || {};
M.form.dateselector = {
panel : null,
calendar : null,
currentowner : null,
hidetimeout : null,
repositiontimeout : null,
init_date_selectors : function(config) {
if (this.panel === null) {
this.initPanel(config);
}
Y.all('.fdate_time_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
Y.all('.fdate_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
},
initPanel : function(config) {
this.panel = new Y.Overlay({
visible : false,
bodyContent : Y.Node.create('<div id="dateselector-calendar-content"></div>'),
id : 'dateselector-calendar-panel'
});
this.panel.render(document.body);
// zIndex is added by panel.render() and is set to 0.
// Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but
// ie8 fails and there is know issue for it.
Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
this.panel.on('heightChange', this.fix_position, this);
Y.one('#dateselector-calendar-panel').on('click', function(e){e.halt();});
Y.one(document.body).on('click', this.document_click, this);
this.calendar = new MOODLECALENDAR({
contentBox: "#dateselector-calendar-content",
width: "300px",
showPrevMonth: true,
showNextMonth: true,
firstdayofweek: config.firstdayofweek,
WEEKDAYS_MEDIUM: [
config.sun,
config.mon,
config.tue,
config.wed,
config.thu,
config.fri,
config.sat ]
});
},
cancel_any_timeout : function() {
if (this.hidetimeout) {
clearTimeout(this.hidetimeout);
this.hidetimeout = null;
}
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
},
delayed_reposition : function() {
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
this.repositiontimeout = setTimeout(this.fix_position, 500);
},
fix_position : function() {
if (this.currentowner) {
this.panel.set('align', {
node:this.currentowner.get('node').one('select'),
points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
});
}
},
document_click : function(e) {
if (this.currentowner) {
if (this.currentowner.get('node').ancestor('div').contains(e.target)) {
setTimeout(function() {
M.form.dateselector.cancel_any_timeout();
}, 100);
} else {
this.currentowner.release_calendar(e);
}
}
}
};
/**
* Provides the Moodle Calendar class.
*
* @module moodle-form-dateselector
*/
/**
* A class to overwrite the YUI3 Calendar in order to change the strings..
*
* @class M.form.dateselector
* @constructor
* @extends Calendar
*/
var MOODLECALENDAR = function() {
MOODLECALENDAR.superclass.constructor.apply(this, arguments);
};
Y.extend(MOODLECALENDAR, Y.Calendar,
{
initializer: function(cfg) {
this.set("strings.very_short_weekdays", cfg.WEEKDAYS_MEDIUM);
this.set("strings.first_weekday ", cfg.firstdayofweek);
}
},
{
NAME : 'Calendar',
ATTRS : {}
}
);
M.form_moodlecalendar = M.form_moodlecalendar || {};
M.form_moodlecalendar.initializer = function(params) {
return new MOODLECALENDAR(params);
};
/**
* Provides the Calendar class.
*
* @module moodle-form-dateselector
*/
/**
* Calendar class
*/
var CALENDAR = function() {
CALENDAR.superclass.constructor.apply(this, arguments);
};
CALENDAR.prototype = {
panel : null,
yearselect : null,
monthselect : null,
dayselect : null,
calendarimage : null,
enablecheckbox : null,
closepopup : true,
initializer : function() {
var controls = this.get('node').all('select');
controls.each(function(node){
if (node.get('name').match(/\[year\]/)) {
this.yearselect = node;
} else if (node.get('name').match(/\[month\]/)) {
this.monthselect = node;
} else if (node.get('name').match(/\[day\]/)) {
this.dayselect = node;
}
node.after('change', this.handle_select_change, this);
}, this);
// Loop through the input fields.
var inputs = this.get('node').all('input, a');
inputs.each(function(node) {
// Check if the current node is a calendar image field.
if (node.get('name').match(/\[calendar\]/)) {
// Set it so that when the image is clicked the pop-up displays.
node.on('click', this.focus_event, this);
// Set the node to the calendarimage variable.
this.calendarimage = node;
} else { // Must be the enabled checkbox field.
// If the enable checkbox is clicked we want to either disable/enable the calendar image.
node.on('click', this.toggle_calendar_image, this);
// Set the node to the enablecheckbox variable.
this.enablecheckbox = node;
}
// Ensure that the calendarimage and enablecheckbox values have been set.
if (this.calendarimage && this.enablecheckbox) {
// Set the calendar icon status depending on the value of the checkbox.
this.toggle_calendar_image();
}
}, this);
},
focus_event : function(e) {
M.form.dateselector.cancel_any_timeout();
// If the current owner is set, then the pop-up is currently being displayed, so hide it.
if (M.form.dateselector.currentowner === this) {
this.release_calendar();
} else if ((this.enablecheckbox === null)
|| (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
this.claim_calendar();
}
// Stop the input image field from submitting the form.
e.preventDefault();
},
handle_select_change : function() {
// It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
// call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
// the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
this.closepopup = false;
this.set_date_from_selects();
this.closepopup = true;
},
claim_calendar : function() {
M.form.dateselector.cancel_any_timeout();
if (M.form.dateselector.currentowner === this) {
return;
}
if (M.form.dateselector.currentowner) {
M.form.dateselector.currentowner.release_calendar();
}
if (M.form.dateselector.currentowner !== this) {
this.connect_handlers();
this.set_date_from_selects();
}
M.form.dateselector.currentowner = this;
M.form.dateselector.calendar.set('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
M.form.dateselector.calendar.set('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
M.form.dateselector.panel.show();
M.form.dateselector.calendar.show();
M.form.dateselector.fix_position();
setTimeout(function() {
M.form.dateselector.cancel_any_timeout();
}, 100);
// Focus on the calendar.
M.form.dateselector.calendar.focus();
// When the user tab out the calendar, close it.
Y.one(document.body).on('keyup', function(e) {
// hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
// Focus back on the calendar button.
this.calendarimage.focus();
this.release_calendar();
}
}, this);
},
set_date_from_selects : function() {
var year = parseInt(this.yearselect.get('value'), 10);
var month = parseInt(this.monthselect.get('value'), 10) - 1;
var day = parseInt(this.dayselect.get('value'), 10);
var date = new Date(year, month, day);
M.form.dateselector.calendar.deselectDates();
M.form.dateselector.calendar.selectDates([date]);
M.form.dateselector.calendar.set("date", date);
M.form.dateselector.calendar.render();
if (date.getDate() !== day) {
// Must've selected the 29 to 31st of a month that doesn't have such dates.
this.dayselect.set('value', date.getDate());
this.monthselect.set('value', date.getMonth() + 1);
}
},
set_selects_from_date : function(ev) {
var date = ev.newSelection[0];
var newyear = Y.DataType.Date.format(date, {format: "%Y"});
var newindex = newyear - this.yearselect.firstOptionValue();
this.yearselect.set('selectedIndex', newindex);
this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
if (M.form.dateselector.currentowner && this.closepopup) {
this.release_calendar();
}
},
connect_handlers : function() {
M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
},
release_calendar : function(e) {
M.form.dateselector.panel.hide();
M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
M.form.dateselector.calendar.hide();
M.form.dateselector.currentowner = null;
// Put the focus back to the image calendar that we clicked.
if (e === null || typeof e === "undefined" || e.type !== "click") {
this.calendarimage.focus();
}
},
toggle_calendar_image : function() {
// If the enable checkbox is det checked, disable the image.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.set('disabled', 'disabled');
this.calendarimage.setStyle('cursor', 'default');
this.release_calendar();
} else {
this.calendarimage.set('disabled', false);
this.calendarimage.setStyle('cursor', null);
}
}
};
Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
NAME : 'Date Selector',
ATTRS : {
firstdayofweek : {
validator : Y.Lang.isString
},
node : {
setter : function(node) {
return Y.one(node);
}
}
}
});
}, '@VERSION@', {"requires": ["base", "node", "overlay", "calendar"]});

4
lib/form/yui/dateselector/assets/skins/sam/dateselector.css Normal file
View File

@ -0,0 +1,4 @@
#dateselector-calendar-panel {background-color:#999;border-bottom:3px solid #999;border-right:3px solid #999;}
#dateselector-calendar-content {border:1px solid #666;margin-top:-3px;margin-left:-3px;}
#dateselector-calendar-content_t th.calweekdaycell {padding-left:3px; padding-right:3px;}
body.ie #dateselector-calendar-panel.yui3-overlay-hidden table {display:none;}

300
lib/form/yui/dateselector/dateselector.js vendored Normal file
View File

@ -0,0 +1,300 @@
YUI.add('moodle-form-dateselector', function(Y) {
/**
* Add some custom methods to the node class to make our lives a little
* easier within this module.
*/
Y.mix(Y.Node.prototype, {
/**
* Gets the value of the first option in the select box
*/
firstOptionValue : function() {
if (this.get('nodeName').toLowerCase() != 'select') {
return false;
}
return this.one('option').get('value');
},
/**
* Gets the value of the last option in the select box
*/
lastOptionValue : function() {
if (this.get('nodeName').toLowerCase() != 'select') {
return false;
}
return this.all('option').item(this.optionSize()-1).get('value');
},
/**
* Gets the number of options in the select box
*/
optionSize : function() {
if (this.get('nodeName').toLowerCase() != 'select') {
return false;
}
return parseInt(this.all('option').size());
},
/**
* Gets the value of the selected option in the select box
*/
selectedOptionValue : function() {
if (this.get('nodeName').toLowerCase() != 'select') {
return false;
}
return this.all('option').item(this.get('selectedIndex')).get('value');
}
});
/**
* Calendar class
*
* This is our main class
*/
var CALENDAR = function(config) {
CALENDAR.superclass.constructor.apply(this, arguments);
};
CALENDAR.prototype = {
panel : null,
yearselect : null,
monthselect : null,
dayselect : null,
calendarimage : null,
enablecheckbox : null,
closepopup : true,
initializer : function(config) {
var controls = this.get('node').all('select');
controls.each(function(node){
if (node.get('name').match(/\[year]/)) {
this.yearselect = node;
} else if (node.get('name').match(/\[month\]/)) {
this.monthselect = node;
} else if (node.get('name').match(/\[day]/)) {
this.dayselect = node;
}
node.after('change', this.handle_select_change, this);
}, this);
// Loop through the input fields.
var inputs = this.get('node').all('input, a');
inputs.each(function(node) {
// Check if the current node is a calendar image field.
if (node.get('name').match(/\[calendar]/)) {
// Set it so that when the image is clicked the pop-up displays.
node.on('click', this.focus_event, this);
// Set the node to the calendarimage variable.
this.calendarimage = node;
} else { // Must be the enabled checkbox field.
// If the enable checkbox is clicked we want to either disable/enable the calendar image.
node.on('click', this.toggle_calendar_image, this);
// Set the node to the enablecheckbox variable.
this.enablecheckbox = node;
}
// Ensure that the calendarimage and enablecheckbox values have been set.
if (this.calendarimage && this.enablecheckbox) {
// Set the calendar icon status depending on the value of the checkbox.
this.toggle_calendar_image();
}
}, this);
},
focus_event : function(e) {
M.form.dateselector.cancel_any_timeout();
// If the current owner is set, then the pop-up is currently being displayed, so hide it.
if (M.form.dateselector.currentowner == this) {
this.release_calendar();
} else if ((this.enablecheckbox == null)
|| (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
this.claim_calendar();
}
// Stop the input image field from submitting the form.
e.preventDefault();
},
handle_select_change : function(e) {
// It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
// call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
// the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
this.closepopup = false;
this.set_date_from_selects();
this.closepopup = true;
},
claim_calendar : function() {
M.form.dateselector.cancel_any_timeout();
if (M.form.dateselector.currentowner == this) {
return;
}
if (M.form.dateselector.currentowner) {
M.form.dateselector.currentowner.release_calendar();
}
if (M.form.dateselector.currentowner != this) {
this.connect_handlers();
this.set_date_from_selects();
}
M.form.dateselector.currentowner = this;
M.form.dateselector.calendar.cfg.setProperty('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
M.form.dateselector.calendar.cfg.setProperty('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
M.form.dateselector.panel.show();
M.form.dateselector.fix_position();
setTimeout(function(){M.form.dateselector.cancel_any_timeout()}, 100);
},
set_date_from_selects : function() {
var year = parseInt(this.yearselect.get('value'));
var month = parseInt(this.monthselect.get('value')) - 1;
var day = parseInt(this.dayselect.get('value'));
var date = new Date(year, month, day);
M.form.dateselector.calendar.select(date);
M.form.dateselector.calendar.setMonth(month);
M.form.dateselector.calendar.setYear(year);
M.form.dateselector.calendar.render();
if (date.getDate() != day) {
// Must've selected the 29 to 31st of a month that doesn't have such dates.
this.dayselect.set('value', date.getDate());
this.monthselect.set('value', date.getMonth() + 1);
}
},
set_selects_from_date : function(eventtype, args) {
var date = args[0][0];
var newyear = date[0];
var newindex = newyear - this.yearselect.firstOptionValue();
this.yearselect.set('selectedIndex', newindex);
this.monthselect.set('selectedIndex', date[1] - this.monthselect.firstOptionValue());
this.dayselect.set('selectedIndex', date[2] - this.dayselect.firstOptionValue());
if (M.form.dateselector.currentowner && this.closepopup) {
this.release_calendar();
}
},
connect_handlers : function() {
M.form.dateselector.calendar.selectEvent.subscribe(this.set_selects_from_date, this, true);
},
release_calendar : function() {
M.form.dateselector.panel.hide();
M.form.dateselector.currentowner = null;
M.form.dateselector.calendar.selectEvent.unsubscribe(this.set_selects_from_date, this);
},
toggle_calendar_image : function() {
// If the enable checkbox is not checked, disable the image.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.set('disabled', 'disabled');
this.calendarimage.setStyle('cursor', 'default');
this.release_calendar();
} else {
this.calendarimage.set('disabled', false);
this.calendarimage.setStyle('cursor', null);
}
}
};
Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
NAME : 'Date Selector',
ATTRS : {
firstdayofweek : {
validator : Y.Lang.isString
},
node : {
setter : function(node) {
return Y.one(node);
}
}
}
});
M.form = M.form || {};
M.form.dateselector = {
panel : null,
calendar : null,
currentowner : null,
hidetimeout : null,
repositiontimeout : null,
init_date_selectors : function(config) {
if (this.panel === null) {
this.initPanel(config);
}
Y.all('.fdate_time_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
Y.all('.fdate_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
},
initPanel : function(config) {
this.panel = new Y.Overlay({
visible : false,
bodyContent : Y.Node.create('<div id="dateselector-calendar-content"></div>'),
id : 'dateselector-calendar-panel'
});
this.panel.render(document.body);
// zIndex is added by panel.render() and is set to 0.
// Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but
// ie8 fails and there is know issue for it.
Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
this.panel.on('heightChange', this.fix_position, this);
Y.one('#dateselector-calendar-panel').on('click', function(e){e.halt();});
Y.one(document.body).on('click', this.document_click, this);
this.calendar = new Y.YUI2.widget.Calendar(document.getElementById('dateselector-calendar-content'), {
iframe: false,
hide_blank_weeks: true,
start_weekday: config.firstdayofweek,
locale_weekdays: 'medium',
locale_months: 'long',
WEEKDAYS_MEDIUM: [
config.sun,
config.mon,
config.tue,
config.wed,
config.thu,
config.fri,
config.sat ],
MONTHS_LONG: [
config.january,
config.february,
config.march,
config.april,
config.may,
config.june,
config.july,
config.august,
config.september,
config.october,
config.november,
config.december ]
});
this.calendar.changePageEvent.subscribe(function(){
this.fix_position();
}, this);
},
cancel_any_timeout : function() {
if (this.hidetimeout) {
clearTimeout(this.hidetimeout);
this.hidetimeout = null;
}
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
},
delayed_reposition : function() {
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
this.repositiontimeout = setTimeout(this.fix_position, 500);
},
fix_position : function() {
if (this.currentowner) {
this.panel.set('align', {
node:this.currentowner.get('node').one('select'),
points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
});
}
},
document_click : function(e) {
if (this.currentowner) {
if (this.currentowner.get('node').ancestor('div').contains(e.target)) {
setTimeout(function() {M.form.dateselector.cancel_any_timeout()}, 100);
} else {
this.currentowner.release_calendar();
}
}
}
}
}, '@VERSION@', {requires:['base','node','overlay', 'yui2-calendar', 'moodle-form-dateselector-skin']});

12
lib/form/yui/src/dateselector/build.json
View File

@ -1,12 +0,0 @@
{
"name": "moodle-form-dateselector",
"builds": {
"moodle-form-dateselector": {
"jsfiles": [
"dateselector.js",
"moodlecalendar.js",
"calendar.js"
]
}
}
}

177
lib/form/yui/src/dateselector/js/calendar.js vendored
View File

@ -1,177 +0,0 @@
/**
* Provides the Calendar class.
*
* @module moodle-form-dateselector
*/
/**
* Calendar class
*/
var CALENDAR = function() {
CALENDAR.superclass.constructor.apply(this, arguments);
};
CALENDAR.prototype = {
panel : null,
yearselect : null,
monthselect : null,
dayselect : null,
calendarimage : null,
enablecheckbox : null,
closepopup : true,
initializer : function() {
var controls = this.get('node').all('select');
controls.each(function(node){
if (node.get('name').match(/\[year\]/)) {
this.yearselect = node;
} else if (node.get('name').match(/\[month\]/)) {
this.monthselect = node;
} else if (node.get('name').match(/\[day\]/)) {
this.dayselect = node;
}
node.after('change', this.handle_select_change, this);
}, this);
// Loop through the input fields.
var inputs = this.get('node').all('input, a');
inputs.each(function(node) {
// Check if the current node is a calendar image field.
if (node.get('name').match(/\[calendar\]/)) {
// Set it so that when the image is clicked the pop-up displays.
node.on('click', this.focus_event, this);
// Set the node to the calendarimage variable.
this.calendarimage = node;
} else { // Must be the enabled checkbox field.
// If the enable checkbox is clicked we want to either disable/enable the calendar image.
node.on('click', this.toggle_calendar_image, this);
// Set the node to the enablecheckbox variable.
this.enablecheckbox = node;
}
// Ensure that the calendarimage and enablecheckbox values have been set.
if (this.calendarimage && this.enablecheckbox) {
// Set the calendar icon status depending on the value of the checkbox.
this.toggle_calendar_image();
}
}, this);
},
focus_event : function(e) {
M.form.dateselector.cancel_any_timeout();
// If the current owner is set, then the pop-up is currently being displayed, so hide it.
if (M.form.dateselector.currentowner === this) {
this.release_calendar();
} else if ((this.enablecheckbox === null)
|| (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
this.claim_calendar();
}
// Stop the input image field from submitting the form.
e.preventDefault();
},
handle_select_change : function() {
// It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
// call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
// the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
this.closepopup = false;
this.set_date_from_selects();
this.closepopup = true;
},
claim_calendar : function() {
M.form.dateselector.cancel_any_timeout();
if (M.form.dateselector.currentowner === this) {
return;
}
if (M.form.dateselector.currentowner) {
M.form.dateselector.currentowner.release_calendar();
}
if (M.form.dateselector.currentowner !== this) {
this.connect_handlers();
this.set_date_from_selects();
}
M.form.dateselector.currentowner = this;
M.form.dateselector.calendar.set('mindate', new Date(this.yearselect.firstOptionValue(), 0, 1));
M.form.dateselector.calendar.set('maxdate', new Date(this.yearselect.lastOptionValue(), 11, 31));
M.form.dateselector.panel.show();
M.form.dateselector.calendar.show();
M.form.dateselector.fix_position();
setTimeout(function() {
M.form.dateselector.cancel_any_timeout();
}, 100);
// Focus on the calendar.
M.form.dateselector.calendar.focus();
// When the user tab out the calendar, close it.
Y.one(document.body).on('keyup', function(e) {
// hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
// Focus back on the calendar button.
this.calendarimage.focus();
this.release_calendar();
}
}, this);
},
set_date_from_selects : function() {
var year = parseInt(this.yearselect.get('value'), 10);
var month = parseInt(this.monthselect.get('value'), 10) - 1;
var day = parseInt(this.dayselect.get('value'), 10);
var date = new Date(year, month, day);
M.form.dateselector.calendar.deselectDates();
M.form.dateselector.calendar.selectDates([date]);
M.form.dateselector.calendar.set("date", date);
M.form.dateselector.calendar.render();
if (date.getDate() !== day) {
// Must've selected the 29 to 31st of a month that doesn't have such dates.
this.dayselect.set('value', date.getDate());
this.monthselect.set('value', date.getMonth() + 1);
}
},
set_selects_from_date : function(ev) {
var date = ev.newSelection[0];
var newyear = Y.DataType.Date.format(date, {format: "%Y"});
var newindex = newyear - this.yearselect.firstOptionValue();
this.yearselect.set('selectedIndex', newindex);
this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
if (M.form.dateselector.currentowner && this.closepopup) {
this.release_calendar();
}
},
connect_handlers : function() {
M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
},
release_calendar : function(e) {
M.form.dateselector.panel.hide();
M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
M.form.dateselector.calendar.hide();
M.form.dateselector.currentowner = null;
// Put the focus back to the image calendar that we clicked.
if (e === null || typeof e === "undefined" || e.type !== "click") {
this.calendarimage.focus();
}
},
toggle_calendar_image : function() {
// If the enable checkbox is det checked, disable the image.
if (!this.enablecheckbox.get('checked')) {
this.calendarimage.set('disabled', 'disabled');
this.calendarimage.setStyle('cursor', 'default');
this.release_calendar();
} else {
this.calendarimage.set('disabled', false);
this.calendarimage.setStyle('cursor', null);
}
}
};
Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
NAME : 'Date Selector',
ATTRS : {
firstdayofweek : {
validator : Y.Lang.isString
},
node : {
setter : function(node) {
return Y.one(node);
}
}
}
});

133
lib/form/yui/src/dateselector/js/dateselector.js vendored
View File

@ -1,133 +0,0 @@
/**
* Add some custom methods to the node class to make our lives a little
* easier within this module.
*/
Y.mix(Y.Node.prototype, {
/**
* Gets the value of the first option in the select box
*/
firstOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.one('option').get('value');
},
/**
* Gets the value of the last option in the select box
*/
lastOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.all('option').item(this.optionSize()-1).get('value');
},
/**
* Gets the number of options in the select box
*/
optionSize : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return parseInt(this.all('option').size(), 10);
},
/**
* Gets the value of the selected option in the select box
*/
selectedOptionValue : function() {
if (this.get('nodeName').toLowerCase() !== 'select') {
return false;
}
return this.all('option').item(this.get('selectedIndex')).get('value');
}
});
M.form = M.form || {};
M.form.dateselector = {
panel : null,
calendar : null,
currentowner : null,
hidetimeout : null,
repositiontimeout : null,
init_date_selectors : function(config) {
if (this.panel === null) {
this.initPanel(config);
}
Y.all('.fdate_time_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
Y.all('.fdate_selector').each(function() {
config.node = this;
new CALENDAR(config);
});
},
initPanel : function(config) {
this.panel = new Y.Overlay({
visible : false,
bodyContent : Y.Node.create('<div id="dateselector-calendar-content"></div>'),
id : 'dateselector-calendar-panel'
});
this.panel.render(document.body);
// zIndex is added by panel.render() and is set to 0.
// Remove zIndex from panel, as this should be set by CSS. This can be done by removeAttr but
// ie8 fails and there is know issue for it.
Y.one('#dateselector-calendar-panel').setStyle('zIndex', null);
this.panel.on('heightChange', this.fix_position, this);
Y.one('#dateselector-calendar-panel').on('click', function(e){e.halt();});
Y.one(document.body).on('click', this.document_click, this);
this.calendar = new MOODLECALENDAR({
contentBox: "#dateselector-calendar-content",
width: "300px",
showPrevMonth: true,
showNextMonth: true,
firstdayofweek: config.firstdayofweek,
WEEKDAYS_MEDIUM: [
config.sun,
config.mon,
config.tue,
config.wed,
config.thu,
config.fri,
config.sat ]
});
},
cancel_any_timeout : function() {
if (this.hidetimeout) {
clearTimeout(this.hidetimeout);
this.hidetimeout = null;
}
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
},
delayed_reposition : function() {
if (this.repositiontimeout) {
clearTimeout(this.repositiontimeout);
this.repositiontimeout = null;
}
this.repositiontimeout = setTimeout(this.fix_position, 500);
},
fix_position : function() {
if (this.currentowner) {
this.panel.set('align', {
node:this.currentowner.get('node').one('select'),
points:[Y.WidgetPositionAlign.BL, Y.WidgetPositionAlign.TL]
});
}
},
document_click : function(e) {
if (this.currentowner) {
if (this.currentowner.get('node').ancestor('div').contains(e.target)) {
setTimeout(function() {
M.form.dateselector.cancel_any_timeout();
}, 100);
} else {
this.currentowner.release_calendar(e);
}
}
}
};

34
lib/form/yui/src/dateselector/js/moodlecalendar.js vendored
View File

@ -1,34 +0,0 @@
/**
* Provides the Moodle Calendar class.
*
* @module moodle-form-dateselector
*/
/**
* A class to overwrite the YUI3 Calendar in order to change the strings..
*
* @class M.form.dateselector
* @constructor
* @extends Calendar
*/
var MOODLECALENDAR = function() {
MOODLECALENDAR.superclass.constructor.apply(this, arguments);
};
Y.extend(MOODLECALENDAR, Y.Calendar,
{
initializer: function(cfg) {
this.set("strings.very_short_weekdays", cfg.WEEKDAYS_MEDIUM);
this.set("strings.first_weekday ", cfg.firstdayofweek);
}
},
{
NAME : 'Calendar',
ATTRS : {}
}
);
M.form_moodlecalendar = M.form_moodlecalendar || {};
M.form_moodlecalendar.initializer = function(params) {
return new MOODLECALENDAR(params);
};

10
lib/form/yui/src/dateselector/meta/dateselector.json
View File

@ -1,10 +0,0 @@
{
"moodle-form-dateselector": {
"requires": [
"base",
"node",
"overlay",
"calendar"
]
}
}