L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-26649 forms: added a calendar icon that will display the calendar pop-up when clicked rather than the select boxes triggering the event

Browse Source
This commit is contained in:
Mark Nelson
2013-04-09 14:52:57 +08:00
parent 422f68fb86
commit f40df210ab
3 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/form/dateselector.php
+5 -1
View File
@@ -94,6 +94,8 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group
*/
function _createElements()
{
global $OUTPUT;
$this->_elements = array();
for ($i=1; $i<=31; $i++) {
$days[$i] = $i;
@@ -110,8 +112,10 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group
$this->_elements[] = @MoodleQuickForm::createElement('select', 'year', get_string('year', 'form'), $years, $this->getAttributes(), true);
// If optional we add a checkbox which the user can use to turn if on
if($this->_options['optional']) {
$this->_elements[] =@MoodleQuickForm::createElement('checkbox', 'enabled', null, get_string('enable'), $this->getAttributes(), true);
$this->_elements[] = @MoodleQuickForm::createElement('checkbox', 'enabled', null, get_string('enable'), $this->getAttributes(), true);
}
$this->_elements[] = @MoodleQuickForm::createElement('image', 'calendar', $OUTPUT->pix_url('i/calendar', 'moodle'),
array('title' => get_string('calendar', 'calendar'), 'class' => 'visibleifjs'));
foreach ($this->_elements as $element){
if (method_exists($element, 'setHiddenLabel')){
$element->setHiddenLabel(true);
lib/form/datetimeselector.php
+4
View File
@@ -95,6 +95,8 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group{
*/
function _createElements()
{
global $OUTPUT;
$this->_elements = array();
for ($i=1; $i<=31; $i++) {
$days[$i] = $i;
@@ -122,6 +124,8 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group{
$this->_elements[] = @MoodleQuickForm::createElement('select', 'hour', get_string('hour', 'form'), $hours, $this->getAttributes(), true);
$this->_elements[] = @MoodleQuickForm::createElement('select', 'minute', get_string('minute', 'form'), $minutes, $this->getAttributes(), true);
}
$this->_elements[] = @MoodleQuickForm::createElement('image', 'calendar', $OUTPUT->pix_url('i/calendar', 'moodle'),
array('title' => get_string('calendar', 'calendar'), 'class' => 'visibleifjs'));
// If optional we add a checkbox which the user can use to turn if on
if($this->_options['optional']) {
$this->_elements[] = @MoodleQuickForm::createElement('checkbox', 'enabled', null, get_string('enable'), $this->getAttributes(), true);
lib/form/yui/dateselector/dateselector.js
Vendored
+48 -38
View File
@@ -54,12 +54,11 @@ YUI.add('moodle-form-dateselector', function(Y) {
CALENDAR.prototype = {
panel : null,
yearselect : null,
yearselectchange : null,
monthselect : null,
monthselectchange : null,
dayselect : null,
dayselectchange : null,
calendarimage : null,
enablecheckbox : null,
closepopup : true,
initializer : function(config) {
var controls = this.get('node').all('select');
controls.each(function(node){
@@ -69,49 +68,53 @@ YUI.add('moodle-form-dateselector', function(Y) {
this.monthselect = node;
} else if (node.get('name').match(/\[day]/)) {
this.dayselect = node;
} else {
node.on('focus', M.form.dateselector.cancel_any_timeout, M.form.dateselector);
node.on('blur', this.blur_event, this);
return;
}
node.on('focus', this.focus_event, this);
node.on('click', this.focus_event, this);
node.after('change', this.set_date_from_selects, this);
node.after('change', this.handle_select_change, this);
}, this);
if (this.yearselect && this.monthselect && this.dayselect) {
this.enablecheckbox = this.get('node').one('input');
}
// Loop through the input fields.
var inputs = this.get('node').all('input');
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;
// 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 (this.enablecheckbox == null || this.enablecheckbox.get('checked')) {
// If the current owner is set, then the pop-up is currently being displayed, so hide it.
if (M.form.dateselector.currentowner) {
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();
} else {
if (M.form.dateselector.currentowner) {
M.form.dateselector.currentowner.release_calendar();
}
}
},
blur_event : function(e) {
M.form.dateselector.hidetimeout = setTimeout(M.form.dateselector.release_current, 300);
// 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();
}
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));
@@ -135,7 +138,9 @@ YUI.add('moodle-form-dateselector', function(Y) {
this.yearselect.set('selectedIndex', newindex);
this.monthselect.set('selectedIndex', date[1] - this.monthselect.firstOptionValue());
this.dayselect.set('selectedIndex', date[2] - this.dayselect.firstOptionValue());
M.form.dateselector.release_current();
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);
@@ -144,6 +149,16 @@ YUI.add('moodle-form-dateselector', function(Y) {
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');
} else {
this.calendarimage.set('disabled', false);
this.calendarimage.setStyle('cursor', 'auto');
}
}
};
Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
@@ -249,11 +264,6 @@ YUI.add('moodle-form-dateselector', function(Y) {
});
}
},
release_current : function() {
if (this.currentowner) {
this.currentowner.release_calendar();
}
},
document_click : function(e) {
if (this.currentowner) {
if (this.currentowner.get('node').ancestor('div').contains(e.target)) {