Permalink
Browse files

Revert "MDL-32917 YUI2 to YUI3 Calendar port: only display the date f…

…rom the matching selector and display the month/year matching the selector value"

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

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

0 comments on commit 052b8c8

Please sign in to comment.