Permalink
Browse files

MDL-26649 forms: added a calendar icon that will display the calendar…

… pop-up when clicked rather than the select boxes triggering the event
  • Loading branch information...
1 parent 422f68f commit f40df210ab1d41402ba77677663ca3eabd6b98ae @markn86 markn86 committed Apr 4, 2013
Showing with 57 additions and 39 deletions.
  1. +5 −1 lib/form/dateselector.php
  2. +4 −0 lib/form/datetimeselector.php
  3. +48 −38 lib/form/yui/dateselector/dateselector.js
@@ -94,6 +94,8 @@ function MoodleQuickForm_date_selector($elementName = null, $elementLabel = null
*/
function _createElements()
{
+ global $OUTPUT;
+
$this->_elements = array();
for ($i=1; $i<=31; $i++) {
$days[$i] = $i;
@@ -110,8 +112,10 @@ function _createElements()
$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);
@@ -95,6 +95,8 @@ function MoodleQuickForm_date_time_selector($elementName = null, $elementLabel =
*/
function _createElements()
{
+ global $OUTPUT;
+
$this->_elements = array();
for ($i=1; $i<=31; $i++) {
$days[$i] = $i;
@@ -122,6 +124,8 @@ function _createElements()
$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);
@@ -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)) {

0 comments on commit f40df21

Please sign in to comment.