Merge branch 'MDL-26649_master' of https://github.com/markn86/moodle
authorDamyon Wiese <damyon@moodle.com>
Tue, 9 Apr 2013 07:13:21 +0000 (15:13 +0800)
committerDamyon Wiese <damyon@moodle.com>
Tue, 9 Apr 2013 07:13:21 +0000 (15:13 +0800)
lib/form/dateselector.php
lib/form/datetimeselector.php
lib/form/yui/dateselector/dateselector.js

index 52c0201..d32677c 100644 (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);
index 578c624..510942f 100644 (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);
index 3a94c45..62d732c 100644 (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)) {