first commit

lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector-debug.js

@@ -0,0 +1,406 @@
+YUI.add('moodle-form-dateselector', function (Y, NAME) {
+
+var CALENDAR;
+var MOODLECALENDAR;
+var DIALOGUE_SELECTOR = ' [role=dialog]',
+    MENUBAR_SELECTOR = '[role=menubar]',
+    DOT = '.',
+    HAS_ZINDEX = 'moodle-has-zindex';
+
+/**
+ * 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',
+            constrain: true // constrain panel to viewport.
+        });
+        this.panel.render(document.body);
+
+        // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
+        this.panel.on('focus', function() {
+            var highestzindex = 0;
+            Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) {
+                var zindex = this.findZIndex(node);
+                if (zindex > highestzindex) {
+                    highestzindex = zindex;
+                }
+            }, this);
+            // Only set the zindex if we found a wrapper.
+            var zindexvalue = (highestzindex + 1).toString();
+            Y.one('#dateselector-calendar-panel').setStyle('zIndex', zindexvalue);
+        }, this);
+
+        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: parseInt(config.firstdayofweek, 10),
+            WEEKDAYS_MEDIUM: [
+                config.sun,
+                config.mon,
+                config.tue,
+                config.wed,
+                config.thu,
+                config.fri,
+                config.sat]
+        });
+    },
+    findZIndex: function(node) {
+        // In most cases the zindex is set on the parent of the dialog.
+        var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');
+        if (zindex) {
+            return parseInt(zindex, 10);
+        }
+        return 0;
+    },
+    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) {
+            var alignpoints = [
+                Y.WidgetPositionAlign.BL,
+                Y.WidgetPositionAlign.TL
+            ];
+
+            // Change the alignment if this is an RTL language.
+            if (window.right_to_left()) {
+                alignpoints = [
+                    Y.WidgetPositionAlign.BR,
+                    Y.WidgetPositionAlign.TR
+                ];
+            }
+
+            this.panel.set('align', {
+                node: this.currentowner.get('node').one('select'),
+                points: alignpoints
+            });
+        }
+    },
+    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_moodlecalendar
+ * @constructor
+ * @extends Calendar
+ */
+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
+ */
+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);
+
+        // Get the calendarimage element by its ID and check if any of its parents have the modal-dialog class to
+        // know if the link is inside a modal, if so, set the aria-hidden and tabindex properties to the indicated values.
+        var calendarimageelement = document.getElementById(this.calendarimage.get('id'));
+        if (calendarimageelement.closest('.modal-dialog')) {
+            this.calendarimage.set('aria-hidden', true);
+            this.calendarimage.set('tabIndex', '-1');
+        }
+    },
+    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('minimumDate', new Date(this.yearselect.firstOptionValue(), 0, 1));
+        M.form.dateselector.calendar.set('maximumDate', 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) {
+            // If the calendar is open and we try to access it by pressing tab, we check if it is inside a Bootstrap dropdown-menu,
+            // if so, we keep the dropdown open while navigation takes place in the calendar.
+            if (M.form.dateselector.currentowner && e.keyCode === 9) {
+                e.stopPropagation();
+                var calendarimageelement = document.getElementById(M.form.dateselector.currentowner.calendarimage.get('id'));
+                if (M.form.dateselector.calendar.get('focused') && calendarimageelement.closest('.dropdown-menu') &&
+                    !calendarimageelement.closest('.dropdown-menu').classList.contains("show")) {
+                    calendarimageelement.closest('.dropdown-menu').classList.add('show');
+                }
+            }
+
+            // 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) {
+        var wasOwner = M.form.dateselector.currentowner === this;
+        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, only if it was visible.
+        if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
+            this.calendarimage.focus();
+        }
+    },
+    toggle_calendar_image: function() {
+        // If the enable checkbox is not checked, disable the calendar image and prevent focus.
+        if (!this.enablecheckbox.get('checked')) {
+            this.calendarimage.addClass('disabled');
+            this.release_calendar();
+        } else {
+            this.calendarimage.removeClass('disabled');
+        }
+    }
+};
+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"]});

lib/form/yui/build/moodle-form-dateselector/moodle-form-dateselector.js

@@ -0,0 +1,406 @@
+YUI.add('moodle-form-dateselector', function (Y, NAME) {
+
+var CALENDAR;
+var MOODLECALENDAR;
+var DIALOGUE_SELECTOR = ' [role=dialog]',
+    MENUBAR_SELECTOR = '[role=menubar]',
+    DOT = '.',
+    HAS_ZINDEX = 'moodle-has-zindex';
+
+/**
+ * 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',
+            constrain: true // constrain panel to viewport.
+        });
+        this.panel.render(document.body);
+
+        // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
+        this.panel.on('focus', function() {
+            var highestzindex = 0;
+            Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) {
+                var zindex = this.findZIndex(node);
+                if (zindex > highestzindex) {
+                    highestzindex = zindex;
+                }
+            }, this);
+            // Only set the zindex if we found a wrapper.
+            var zindexvalue = (highestzindex + 1).toString();
+            Y.one('#dateselector-calendar-panel').setStyle('zIndex', zindexvalue);
+        }, this);
+
+        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: parseInt(config.firstdayofweek, 10),
+            WEEKDAYS_MEDIUM: [
+                config.sun,
+                config.mon,
+                config.tue,
+                config.wed,
+                config.thu,
+                config.fri,
+                config.sat]
+        });
+    },
+    findZIndex: function(node) {
+        // In most cases the zindex is set on the parent of the dialog.
+        var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');
+        if (zindex) {
+            return parseInt(zindex, 10);
+        }
+        return 0;
+    },
+    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) {
+            var alignpoints = [
+                Y.WidgetPositionAlign.BL,
+                Y.WidgetPositionAlign.TL
+            ];
+
+            // Change the alignment if this is an RTL language.
+            if (window.right_to_left()) {
+                alignpoints = [
+                    Y.WidgetPositionAlign.BR,
+                    Y.WidgetPositionAlign.TR
+                ];
+            }
+
+            this.panel.set('align', {
+                node: this.currentowner.get('node').one('select'),
+                points: alignpoints
+            });
+        }
+    },
+    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_moodlecalendar
+ * @constructor
+ * @extends Calendar
+ */
+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
+ */
+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);
+
+        // Get the calendarimage element by its ID and check if any of its parents have the modal-dialog class to
+        // know if the link is inside a modal, if so, set the aria-hidden and tabindex properties to the indicated values.
+        var calendarimageelement = document.getElementById(this.calendarimage.get('id'));
+        if (calendarimageelement.closest('.modal-dialog')) {
+            this.calendarimage.set('aria-hidden', true);
+            this.calendarimage.set('tabIndex', '-1');
+        }
+    },
+    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('minimumDate', new Date(this.yearselect.firstOptionValue(), 0, 1));
+        M.form.dateselector.calendar.set('maximumDate', 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) {
+            // If the calendar is open and we try to access it by pressing tab, we check if it is inside a Bootstrap dropdown-menu,
+            // if so, we keep the dropdown open while navigation takes place in the calendar.
+            if (M.form.dateselector.currentowner && e.keyCode === 9) {
+                e.stopPropagation();
+                var calendarimageelement = document.getElementById(M.form.dateselector.currentowner.calendarimage.get('id'));
+                if (M.form.dateselector.calendar.get('focused') && calendarimageelement.closest('.dropdown-menu') &&
+                    !calendarimageelement.closest('.dropdown-menu').classList.contains("show")) {
+                    calendarimageelement.closest('.dropdown-menu').classList.add('show');
+                }
+            }
+
+            // 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) {
+        var wasOwner = M.form.dateselector.currentowner === this;
+        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, only if it was visible.
+        if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
+            this.calendarimage.focus();
+        }
+    },
+    toggle_calendar_image: function() {
+        // If the enable checkbox is not checked, disable the calendar image and prevent focus.
+        if (!this.enablecheckbox.get('checked')) {
+            this.calendarimage.addClass('disabled');
+            this.release_calendar();
+        } else {
+            this.calendarimage.removeClass('disabled');
+        }
+    }
+};
+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"]});

lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-debug.js

@@ -0,0 +1,151 @@
+YUI.add('moodle-form-shortforms', function (Y, NAME) {
+
+/**
+ * Provides the form shortforms class.
+ *
+ * @module moodle-form-shortforms
+ */
+
+/**
+ * A class for a shortforms.
+ *
+ * @class M.form.shortforms
+ * @constructor
+ * @extends Base
+ */
+function SHORTFORMS() {
+    SHORTFORMS.superclass.constructor.apply(this, arguments);
+}
+
+var SELECTORS = {
+        COLLAPSED: '.collapsed',
+        FIELDSETCOLLAPSIBLE: 'fieldset.collapsible',
+        FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader',
+        FHEADER: '.fheader',
+        LEGENDFTOGGLER: 'legend.ftoggler'
+    },
+    CSS = {
+        COLLAPSEALL: 'collapse-all',
+        COLLAPSED: 'collapsed',
+        FHEADER: 'fheader'
+    },
+    ATTRS = {};
+
+/**
+ * The form ID attribute definition.
+ *
+ * @attribute formid
+ * @type String
+ * @default ''
+ * @writeOnce
+ */
+ATTRS.formid = {
+    value: null
+};
+
+Y.extend(SHORTFORMS, Y.Base, {
+    /**
+     * A reference to the form.
+     *
+     * @property form
+     * @protected
+     * @type Node
+     * @default null
+     */
+    form: null,
+
+    /**
+     * The initializer for the shortforms instance.
+     *
+     * @method initializer
+     * @protected
+     */
+    initializer: function() {
+        var form = Y.one('#' + this.get('formid'));
+        if (!form) {
+            Y.log('Could not locate the form', 'warn', 'moodle-form-shortforms');
+            return;
+        }
+        // Stores the form in the object.
+        this.form = form;
+
+        // Subscribe collapsible fieldsets and buttons to click events.
+        form.delegate('click', this.switch_state, SELECTORS.FIELDSETLEGENDLINK, this);
+
+        // Handle event, when there's an error in collapsed section.
+        Y.Global.on(M.core.globalEvents.FORM_ERROR, this.expand_fieldset, this);
+    },
+
+    /**
+     * Set the collapsed state for the specified fieldset.
+     *
+     * @method set_state
+     * @param {Node} fieldset The Node relating to the fieldset to set state on.
+     * @param {Boolean} [collapsed] Whether the fieldset is collapsed.
+     * @chainable
+     */
+    set_state: function(fieldset, collapsed) {
+        var headerlink = fieldset.one(SELECTORS.FHEADER);
+        if (collapsed) {
+            fieldset.addClass(CSS.COLLAPSED);
+            if (headerlink) {
+                headerlink.setAttribute('aria-expanded', 'false');
+            }
+        } else {
+            fieldset.removeClass(CSS.COLLAPSED);
+            if (headerlink) {
+                headerlink.setAttribute('aria-expanded', 'true');
+            }
+        }
+        var statuselement = this.form.one('input[name=mform_isexpanded_' + fieldset.get('id') + ']');
+        if (!statuselement) {
+            Y.log("M.form.shortforms::switch_state was called on an fieldset without a status field: '" +
+                fieldset.get('id') + "'", 'debug', 'moodle-form-shortforms');
+            return this;
+        }
+        statuselement.set('value', collapsed ? 0 : 1);
+
+        return this;
+    },
+
+    /**
+     * Toggle the state for the fieldset that was clicked.
+     *
+     * @method switch_state
+     * @param {EventFacade} e
+     */
+    switch_state: function(e) {
+        e.preventDefault();
+        var fieldset = e.target.ancestor(SELECTORS.FIELDSETCOLLAPSIBLE);
+        this.set_state(fieldset, !fieldset.hasClass(CSS.COLLAPSED));
+    },
+
+    /**
+     * Expand the fieldset, which contains an error.
+     *
+     * @method expand_fieldset
+     * @param {EventFacade} e
+     */
+    expand_fieldset: function(e) {
+        e.stopPropagation();
+        var formid = e.formid;
+        if (formid === this.form.getAttribute('id')) {
+            var errorfieldset = Y.one('#' + e.elementid).ancestor('fieldset');
+            if (errorfieldset) {
+                this.set_state(errorfieldset, false);
+            }
+
+        }
+   }
+}, {
+    NAME: 'moodle-form-shortforms',
+    ATTRS: ATTRS
+});
+
+M.form = M.form || {};
+M.form.shortforms = M.form.shortforms || function(params) {
+    return new SHORTFORMS(params);
+};
+
+
+}, '@VERSION@', {"requires": ["node", "base", "selector-css3", "moodle-core-event"]});

lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms-min.js

@@ -0,0 +1 @@
+YUI.add("moodle-form-shortforms",function(s,e){function t(){t.superclass.constructor.apply(this,arguments)}var o="fieldset.collapsible",r="fieldset.collapsible .fheader",i=".fheader",a="collapsed",n={formid:{value:null}};s.extend(t,s.Base,{form:null,initializer:function(){var e=s.one("#"+this.get("formid"));e&&((this.form=e).delegate("click",this.switch_state,r,this),s.Global.on(M.core.globalEvents.FORM_ERROR,this.expand_fieldset,this))},set_state:function(e,t){var s=e.one(i);return t?(e.addClass(a),s&&s.setAttribute("aria-expanded","false")):(e.removeClass(a),s&&s.setAttribute("aria-expanded","true")),(s=this.form.one("input[name=mform_isexpanded_"+e.get("id")+"]"))&&s.set("value",t?0:1),this},switch_state:function(e){e.preventDefault();e=e.target.ancestor(o);this.set_state(e,!e.hasClass(a))},expand_fieldset:function(e){var t;e.stopPropagation(),e.formid===this.form.getAttribute("id")&&(t=s.one("#"+e.elementid).ancestor("fieldset"))&&this.set_state(t,!1)}},{NAME:"moodle-form-shortforms",ATTRS:n}),M.form=M.form||{},M.form.shortforms=M.form.shortforms||function(e){return new t(e)}},"@VERSION@",{requires:["node","base","selector-css3","moodle-core-event"]});

lib/form/yui/build/moodle-form-shortforms/moodle-form-shortforms.js

@@ -0,0 +1,148 @@
+YUI.add('moodle-form-shortforms', function (Y, NAME) {
+
+/**
+ * Provides the form shortforms class.
+ *
+ * @module moodle-form-shortforms
+ */
+
+/**
+ * A class for a shortforms.
+ *
+ * @class M.form.shortforms
+ * @constructor
+ * @extends Base
+ */
+function SHORTFORMS() {
+    SHORTFORMS.superclass.constructor.apply(this, arguments);
+}
+
+var SELECTORS = {
+        COLLAPSED: '.collapsed',
+        FIELDSETCOLLAPSIBLE: 'fieldset.collapsible',
+        FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader',
+        FHEADER: '.fheader',
+        LEGENDFTOGGLER: 'legend.ftoggler'
+    },
+    CSS = {
+        COLLAPSEALL: 'collapse-all',
+        COLLAPSED: 'collapsed',
+        FHEADER: 'fheader'
+    },
+    ATTRS = {};
+
+/**
+ * The form ID attribute definition.
+ *
+ * @attribute formid
+ * @type String
+ * @default ''
+ * @writeOnce
+ */
+ATTRS.formid = {
+    value: null
+};
+
+Y.extend(SHORTFORMS, Y.Base, {
+    /**
+     * A reference to the form.
+     *
+     * @property form
+     * @protected
+     * @type Node
+     * @default null
+     */
+    form: null,
+
+    /**
+     * The initializer for the shortforms instance.
+     *
+     * @method initializer
+     * @protected
+     */
+    initializer: function() {
+        var form = Y.one('#' + this.get('formid'));
+        if (!form) {
+            return;
+        }
+        // Stores the form in the object.
+        this.form = form;
+
+        // Subscribe collapsible fieldsets and buttons to click events.
+        form.delegate('click', this.switch_state, SELECTORS.FIELDSETLEGENDLINK, this);
+
+        // Handle event, when there's an error in collapsed section.
+        Y.Global.on(M.core.globalEvents.FORM_ERROR, this.expand_fieldset, this);
+    },
+
+    /**
+     * Set the collapsed state for the specified fieldset.
+     *
+     * @method set_state
+     * @param {Node} fieldset The Node relating to the fieldset to set state on.
+     * @param {Boolean} [collapsed] Whether the fieldset is collapsed.
+     * @chainable
+     */
+    set_state: function(fieldset, collapsed) {
+        var headerlink = fieldset.one(SELECTORS.FHEADER);
+        if (collapsed) {
+            fieldset.addClass(CSS.COLLAPSED);
+            if (headerlink) {
+                headerlink.setAttribute('aria-expanded', 'false');
+            }
+        } else {
+            fieldset.removeClass(CSS.COLLAPSED);
+            if (headerlink) {
+                headerlink.setAttribute('aria-expanded', 'true');
+            }
+        }
+        var statuselement = this.form.one('input[name=mform_isexpanded_' + fieldset.get('id') + ']');
+        if (!statuselement) {
+            return this;
+        }
+        statuselement.set('value', collapsed ? 0 : 1);
+
+        return this;
+    },
+
+    /**
+     * Toggle the state for the fieldset that was clicked.
+     *
+     * @method switch_state
+     * @param {EventFacade} e
+     */
+    switch_state: function(e) {
+        e.preventDefault();
+        var fieldset = e.target.ancestor(SELECTORS.FIELDSETCOLLAPSIBLE);
+        this.set_state(fieldset, !fieldset.hasClass(CSS.COLLAPSED));
+    },
+
+    /**
+     * Expand the fieldset, which contains an error.
+     *
+     * @method expand_fieldset
+     * @param {EventFacade} e
+     */
+    expand_fieldset: function(e) {
+        e.stopPropagation();
+        var formid = e.formid;
+        if (formid === this.form.getAttribute('id')) {
+            var errorfieldset = Y.one('#' + e.elementid).ancestor('fieldset');
+            if (errorfieldset) {
+                this.set_state(errorfieldset, false);
+            }
+
+        }
+   }
+}, {
+    NAME: 'moodle-form-shortforms',
+    ATTRS: ATTRS
+});
+
+M.form = M.form || {};
+M.form.shortforms = M.form.shortforms || function(params) {
+    return new SHORTFORMS(params);
+};
+
+
+}, '@VERSION@', {"requires": ["node", "base", "selector-css3", "moodle-core-event"]});

lib/form/yui/checkboxcontroller/checkboxcontroller.js

@@ -0,0 +1,117 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+
+/**
+ * Group of date and time input element
+ *
+ * Contains class for a group of elements used to input a date and time.
+ *
+ * @package   core_form
+ * @copyright 2012 Rajesh Taneja <rajesh@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+YUI.add('moodle-form-checkboxcontroller', function(Y) {
+    var checkboxcontroller = function() {
+        checkboxcontroller.superclass.constructor.apply(this, arguments);
+    }
+
+    Y.extend(checkboxcontroller, Y.Base, {
+        _controllervaluenode : null,
+        _checkboxclass : null,
+
+        /*
+         * Initialize script if all params passed.
+         *
+         * @param object params values passed while initalizing script
+         */
+        initializer : function(params) {
+            if (params && params.checkboxcontroller &&
+                params.controllerbutton &&
+                params.checkboxclass) {
+               // Id of controller node which keeps value in html.
+               this._controllervaluenode = '#id_'+params.checkboxcontroller;
+
+               // Checkboxes class name by which checkboxes will be selected
+               this._checkboxclass = '.'+params.checkboxclass;
+
+               // Replace submit button with link.
+               this.replaceButton('#id_'+params.controllerbutton);
+            }
+        },
+
+        /**
+         * Replace controller button with link and add event.
+         *
+         * @param string controllerbutton id of the controller button which needs to be replaced
+         */
+        replaceButton : function(controllerbutton) {
+            var controllerbutton = Y.one(controllerbutton);
+            var linkname = controllerbutton.get('value');
+            // Link node which will replace controller button
+            var link = Y.Node.create('<a href="#">'+linkname+'</a>');
+
+            // Attach onclick event to link
+            link.on('click', this.onClick, this);
+            // Hide controller button
+            controllerbutton.hide();
+            // Insert link node
+            controllerbutton.get('parentNode').insert(link, controllerbutton.get('lastNode'));
+        },
+
+        /**
+         * Onclick event will be handled.
+         *
+         * @param Event e
+         */
+        onClick : function(e) {
+            e.preventDefault();
+            this.switchGroupState();
+        },
+
+        /**
+         * Toggles checkboxes status belong to a group
+         */
+        switchGroupState : function() {
+            if (this._checkboxclass) {
+                // Value which should be set on checkboxes
+                var newvalue = '';
+                // Get controller node which keeps value
+                var controllervaluenode = Y.one(this._controllervaluenode);
+                // Get all checkboxes with
+                var checkboxes = Y.all(this._checkboxclass);
+
+                // Toggle checkboxes in group, depending on conroller value
+                if (controllervaluenode.get('value') == 1) {
+                    controllervaluenode.set('value', '0');
+                } else {
+                    controllervaluenode.set('value', '1');
+                    newvalue = 'checked';
+                }
+                checkboxes.each(function(checkbox){
+                    if (!checkbox.get('disabled')) {
+                        checkbox.set('checked', newvalue);
+                    }
+                });
+            }
+        }
+    });
+
+    M.form = M.form || {};
+
+    M.form.checkboxcontroller = function(params) {
+        return new checkboxcontroller(params);
+    }
+}, '@VERSION@', {requires:['base', 'node']});

lib/form/yui/listing/listing.js

@@ -0,0 +1,93 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Form listing Javascript.
+ *
+ * It mainly handles loading the main content div when cliking on a tab/row.
+ * @copyright 2012 Jerome Mouneyrac
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+M.form_listing = {};
+M.form_listing.Y = null;
+M.form_listing.instances = [];
+
+/**
+ * This function is called for each listing form on page.
+ *
+ * @param {Array} params :  {int} hiddeninputid - the id of the hidden input element
+ *                          {int} elementid - the id of the full form element
+ *                          {Array} items - items has for key the value return by the form, and for content an array with two attributs: mainhtml and rowhtml.
+ *                          {string} hideall - button label to hide all tabs(rows).
+ *                          {string} showall - button label to show all tabs(rows).
+ *                          {string} inputname - the name of the input element
+ *                          {string} currentvalue - the currently selected tab(row)
+ */
+M.form_listing.init = function(Y, params) {
+    if (params && params.hiddeninputid && params.elementid) {
+
+        // Replace the radio buttons by a hidden input.
+        Y.one('#formlistinginputcontainer_' + params.inputname).setHTML('<input name='+params.inputname+' type=hidden id='+params.hiddeninputid+' value='+params.currentvalue+' />');
+
+        var caption = Y.one('#'+params.elementid+'_caption');
+        var allitems = Y.one('#'+params.elementid+'_all');
+        var selecteditem = Y.one('#'+params.elementid+'_main');
+        var hiddeninput = Y.one('#'+params.hiddeninputid);
+
+        // Do not display the listing by default.
+        var show = 0;
+        allitems.hide();
+
+        // Refresh the main item + set the hidden input to its value.
+        var selectitem = function(e) {
+            var index = this.get('id').replace(params.elementid+'_all_',"");
+            hiddeninput.set('value', items[index]);
+            selecteditem.setHTML(params.items[items[index]].mainhtml);
+        }
+
+        // Caption Onlick event to display/hide the listing.
+        var onclick = function(e) {
+            if (!show) {
+                allitems.show(true);
+                show = 1;
+                caption.setHTML(params.hideall);
+            } else {
+                allitems.hide(true);
+                show = 0;
+                caption.setHTML(params.showall);
+            }
+        };
+
+        caption.on('click', onclick);
+
+        // Fill the item rows with html + add event.
+        // PS: we need to save the items into a temporary "items[]" array because params.items keys could be url.
+        // This temporary items[] avoid not working calls like Y.one('#myitems_http:www.google.com').
+        var items = [];
+        var itemindex = 0;
+        for (itemid in params.items) {
+            items[itemindex] = itemid;
+
+            // Add the row.
+            allitems.append("<div id="+params.elementid+'_all_'+itemindex+" class='formlistingrow'>" + params.items[itemid].rowhtml + "</div>");
+
+            // Add click event to the row.
+            Y.one('#'+params.elementid+'_all_'+itemindex).on('click', selectitem);
+
+            itemindex = itemindex + 1;
+        }
+    }
+};

lib/form/yui/src/dateselector/build.json

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

lib/form/yui/src/dateselector/js/calendar.js

@@ -0,0 +1,195 @@
+/**
+ * Provides the Calendar class.
+ *
+ * @module moodle-form-dateselector
+ */
+
+/**
+ * Calendar class
+ */
+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);
+
+        // Get the calendarimage element by its ID and check if any of its parents have the modal-dialog class to
+        // know if the link is inside a modal, if so, set the aria-hidden and tabindex properties to the indicated values.
+        var calendarimageelement = document.getElementById(this.calendarimage.get('id'));
+        if (calendarimageelement.closest('.modal-dialog')) {
+            this.calendarimage.set('aria-hidden', true);
+            this.calendarimage.set('tabIndex', '-1');
+        }
+    },
+    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('minimumDate', new Date(this.yearselect.firstOptionValue(), 0, 1));
+        M.form.dateselector.calendar.set('maximumDate', 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) {
+            // If the calendar is open and we try to access it by pressing tab, we check if it is inside a Bootstrap dropdown-menu,
+            // if so, we keep the dropdown open while navigation takes place in the calendar.
+            if (M.form.dateselector.currentowner && e.keyCode === 9) {
+                e.stopPropagation();
+                var calendarimageelement = document.getElementById(M.form.dateselector.currentowner.calendarimage.get('id'));
+                if (M.form.dateselector.calendar.get('focused') && calendarimageelement.closest('.dropdown-menu') &&
+                    !calendarimageelement.closest('.dropdown-menu').classList.contains("show")) {
+                    calendarimageelement.closest('.dropdown-menu').classList.add('show');
+                }
+            }
+
+            // 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) {
+        var wasOwner = M.form.dateselector.currentowner === this;
+        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, only if it was visible.
+        if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
+            this.calendarimage.focus();
+        }
+    },
+    toggle_calendar_image: function() {
+        // If the enable checkbox is not checked, disable the calendar image and prevent focus.
+        if (!this.enablecheckbox.get('checked')) {
+            this.calendarimage.addClass('disabled');
+            this.release_calendar();
+        } else {
+            this.calendarimage.removeClass('disabled');
+        }
+    }
+};
+Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
+    NAME: 'Date Selector',
+    ATTRS: {
+        firstdayofweek: {
+            validator: Y.Lang.isString
+        },
+        node: {
+            setter: function(node) {
+                return Y.one(node);
+            }
+        }
+    }
+});

lib/form/yui/src/dateselector/js/dateselector.js

@@ -0,0 +1,172 @@
+var DIALOGUE_SELECTOR = ' [role=dialog]',
+    MENUBAR_SELECTOR = '[role=menubar]',
+    DOT = '.',
+    HAS_ZINDEX = 'moodle-has-zindex';
+
+/**
+ * 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',
+            constrain: true // constrain panel to viewport.
+        });
+        this.panel.render(document.body);
+
+        // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
+        this.panel.on('focus', function() {
+            var highestzindex = 0;
+            Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) {
+                var zindex = this.findZIndex(node);
+                if (zindex > highestzindex) {
+                    highestzindex = zindex;
+                }
+            }, this);
+            // Only set the zindex if we found a wrapper.
+            var zindexvalue = (highestzindex + 1).toString();
+            Y.one('#dateselector-calendar-panel').setStyle('zIndex', zindexvalue);
+        }, this);
+
+        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: parseInt(config.firstdayofweek, 10),
+            WEEKDAYS_MEDIUM: [
+                config.sun,
+                config.mon,
+                config.tue,
+                config.wed,
+                config.thu,
+                config.fri,
+                config.sat]
+        });
+    },
+    findZIndex: function(node) {
+        // In most cases the zindex is set on the parent of the dialog.
+        var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');
+        if (zindex) {
+            return parseInt(zindex, 10);
+        }
+        return 0;
+    },
+    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) {
+            var alignpoints = [
+                Y.WidgetPositionAlign.BL,
+                Y.WidgetPositionAlign.TL
+            ];
+
+            // Change the alignment if this is an RTL language.
+            if (window.right_to_left()) {
+                alignpoints = [
+                    Y.WidgetPositionAlign.BR,
+                    Y.WidgetPositionAlign.TR
+                ];
+            }
+
+            this.panel.set('align', {
+                node: this.currentowner.get('node').one('select'),
+                points: alignpoints
+            });
+        }
+    },
+    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);
+            }
+        }
+    }
+};

lib/form/yui/src/dateselector/js/moodlecalendar.js

@@ -0,0 +1,32 @@
+/**
+ * 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_moodlecalendar
+ * @constructor
+ * @extends Calendar
+ */
+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);
+};

lib/form/yui/src/dateselector/js/shared.js

@@ -0,0 +1,2 @@
+var CALENDAR;
+var MOODLECALENDAR;

lib/form/yui/src/dateselector/meta/dateselector.json

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

lib/form/yui/src/shortforms/build.json

@@ -0,0 +1,10 @@
+{
+    "name": "moodle-form-shortforms",
+    "builds": {
+        "moodle-form-shortforms": {
+            "jsfiles": [
+                "shortforms.js"
+            ]
+        }
+    }
+}

lib/form/yui/src/shortforms/js/shortforms.js

@@ -0,0 +1,146 @@
+/**
+ * Provides the form shortforms class.
+ *
+ * @module moodle-form-shortforms
+ */
+
+/**
+ * A class for a shortforms.
+ *
+ * @class M.form.shortforms
+ * @constructor
+ * @extends Base
+ */
+function SHORTFORMS() {
+    SHORTFORMS.superclass.constructor.apply(this, arguments);
+}
+
+var SELECTORS = {
+        COLLAPSED: '.collapsed',
+        FIELDSETCOLLAPSIBLE: 'fieldset.collapsible',
+        FIELDSETLEGENDLINK: 'fieldset.collapsible .fheader',
+        FHEADER: '.fheader',
+        LEGENDFTOGGLER: 'legend.ftoggler'
+    },
+    CSS = {
+        COLLAPSEALL: 'collapse-all',
+        COLLAPSED: 'collapsed',
+        FHEADER: 'fheader'
+    },
+    ATTRS = {};
+
+/**
+ * The form ID attribute definition.
+ *
+ * @attribute formid
+ * @type String
+ * @default ''
+ * @writeOnce
+ */
+ATTRS.formid = {
+    value: null
+};
+
+Y.extend(SHORTFORMS, Y.Base, {
+    /**
+     * A reference to the form.
+     *
+     * @property form
+     * @protected
+     * @type Node
+     * @default null
+     */
+    form: null,
+
+    /**
+     * The initializer for the shortforms instance.
+     *
+     * @method initializer
+     * @protected
+     */
+    initializer: function() {
+        var form = Y.one('#' + this.get('formid'));
+        if (!form) {
+            Y.log('Could not locate the form', 'warn', 'moodle-form-shortforms');
+            return;
+        }
+        // Stores the form in the object.
+        this.form = form;
+
+        // Subscribe collapsible fieldsets and buttons to click events.
+        form.delegate('click', this.switch_state, SELECTORS.FIELDSETLEGENDLINK, this);
+
+        // Handle event, when there's an error in collapsed section.
+        Y.Global.on(M.core.globalEvents.FORM_ERROR, this.expand_fieldset, this);
+    },
+
+    /**
+     * Set the collapsed state for the specified fieldset.
+     *
+     * @method set_state
+     * @param {Node} fieldset The Node relating to the fieldset to set state on.
+     * @param {Boolean} [collapsed] Whether the fieldset is collapsed.
+     * @chainable
+     */
+    set_state: function(fieldset, collapsed) {
+        var headerlink = fieldset.one(SELECTORS.FHEADER);
+        if (collapsed) {
+            fieldset.addClass(CSS.COLLAPSED);
+            if (headerlink) {
+                headerlink.setAttribute('aria-expanded', 'false');
+            }
+        } else {
+            fieldset.removeClass(CSS.COLLAPSED);
+            if (headerlink) {
+                headerlink.setAttribute('aria-expanded', 'true');
+            }
+        }
+        var statuselement = this.form.one('input[name=mform_isexpanded_' + fieldset.get('id') + ']');
+        if (!statuselement) {
+            Y.log("M.form.shortforms::switch_state was called on an fieldset without a status field: '" +
+                fieldset.get('id') + "'", 'debug', 'moodle-form-shortforms');
+            return this;
+        }
+        statuselement.set('value', collapsed ? 0 : 1);
+
+        return this;
+    },
+
+    /**
+     * Toggle the state for the fieldset that was clicked.
+     *
+     * @method switch_state
+     * @param {EventFacade} e
+     */
+    switch_state: function(e) {
+        e.preventDefault();
+        var fieldset = e.target.ancestor(SELECTORS.FIELDSETCOLLAPSIBLE);
+        this.set_state(fieldset, !fieldset.hasClass(CSS.COLLAPSED));
+    },
+
+    /**
+     * Expand the fieldset, which contains an error.
+     *
+     * @method expand_fieldset
+     * @param {EventFacade} e
+     */
+    expand_fieldset: function(e) {
+        e.stopPropagation();
+        var formid = e.formid;
+        if (formid === this.form.getAttribute('id')) {
+            var errorfieldset = Y.one('#' + e.elementid).ancestor('fieldset');
+            if (errorfieldset) {
+                this.set_state(errorfieldset, false);
+            }
+
+        }
+   }
+}, {
+    NAME: 'moodle-form-shortforms',
+    ATTRS: ATTRS
+});
+
+M.form = M.form || {};
+M.form.shortforms = M.form.shortforms || function(params) {
+    return new SHORTFORMS(params);
+};

lib/form/yui/src/shortforms/meta/shortforms.json

@@ -0,0 +1,10 @@
+{
+    "moodle-form-shortforms": {
+        "requires": [
+            "node",
+            "base",
+            "selector-css3",
+            "moodle-core-event"
+        ]
+    }
+}