diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js')
-rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js | 518 |
1 files changed, 0 insertions, 518 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js b/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js deleted file mode 100644 index fdfb2af65e..0000000000 --- a/webapps/qooxdoo-0.6.3-sdk/frontend/framework/source/class/qx/ui/component/DateChooser.js +++ /dev/null @@ -1,518 +0,0 @@ -/* ************************************************************************ - - qooxdoo - the new era of web development - - http://qooxdoo.org - - Copyright: - 2006 by STZ-IDA, Germany, http://www.stz-ida.de - - License: - LGPL 2.1: http://www.gnu.org/licenses/lgpl.html - - Authors: - * Til Schneider (til132) - -************************************************************************ */ - -/* ************************************************************************ - -#require(qx.util.format.DateFormat) - -************************************************************************ */ - -/** - * Shows calendar and allows choosing a date. - * - * @param date {Date ? null} The initial date to show. If <code>null</code> - * the current day (today) is shown. - * - * @event select {qx.event.type.DataEvent} Fired when a date was selected. The - * event holds the new selected date in its data property. - */ -qx.OO.defineClass("qx.ui.component.DateChooser", qx.ui.layout.BoxLayout, -function(date) { - qx.ui.layout.BoxLayout.call(this); - - this.setOrientation("vertical"); - - // Create the navigation bar - var navBar = new qx.ui.layout.BoxLayout; - navBar.set({ width:null, height:"auto", spacing:1 }); - - var lastYearBt = new qx.ui.toolbar.Button(null, "widget/datechooser/lastYear.png"); - var lastMonthBt = new qx.ui.toolbar.Button(null, "widget/datechooser/lastMonth.png"); - var monthYearLabel = new qx.ui.basic.Label; - var nextMonthBt = new qx.ui.toolbar.Button(null, "widget/datechooser/nextMonth.png"); - var nextYearBt = new qx.ui.toolbar.Button(null, "widget/datechooser/nextYear.png"); - - lastYearBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Last year"), spacing:0 }); - lastMonthBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Last month") }); - nextMonthBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Next month") }); - nextYearBt.set({ show:'icon', toolTip:new qx.ui.popup.ToolTip("Next year") }); - - lastYearBt.setAppearance("datechooser-toolbar-button"); - lastMonthBt.setAppearance("datechooser-toolbar-button"); - nextMonthBt.setAppearance("datechooser-toolbar-button"); - nextYearBt.setAppearance("datechooser-toolbar-button"); - - lastYearBt.addEventListener("click", this._onNavButtonClicked, this); - lastMonthBt.addEventListener("click", this._onNavButtonClicked, this); - nextMonthBt.addEventListener("click", this._onNavButtonClicked, this); - nextYearBt.addEventListener("click", this._onNavButtonClicked, this); - - this._lastYearBt = lastYearBt; - this._lastMonthBt = lastMonthBt; - this._nextMonthBt = nextMonthBt; - this._nextYearBt = nextYearBt; - - monthYearLabel.setAppearance("datechooser-monthyear"); - monthYearLabel.set({ width:"1*" }); - - navBar.add(lastYearBt, lastMonthBt, monthYearLabel, nextMonthBt, nextYearBt); - this._monthYearLabel = monthYearLabel; - navBar.setHtmlAttribute("id", "navBar"); - - // Calculate the cell width and height - var testLabel = new qx.ui.basic.Label; - var testParent = new qx.ui.layout.CanvasLayout; - testParent.add(testLabel); - testLabel.setHtml("Xx"); - testLabel.set({ paddingLeft : 5, paddingRight : 5 }); - testLabel.setAppearance("datechooser-weekday"); - var cellWidth = testLabel.getBoxWidth(); - var cellHeight = testLabel.getBoxHeight(); - testLabel.dispose(); - testParent.dispose(); - - // Create the date pane - var datePane = new qx.ui.layout.GridLayout; - datePane.setAppearance("datechooser-datepane"); - datePane.set({ width:"100%", height:"auto" }); - datePane.setColumnCount(8); - datePane.setRowCount(7); - for (var i = 0; i < datePane.getColumnCount(); i++) { - datePane.setColumnWidth(i, cellWidth); - } - for (var i = 0; i < datePane.getRowCount(); i++) { - datePane.setRowHeight(i, cellHeight); - } - - // Create the weekdays - // Add an empty label as spacer for the week numbers - var label = new qx.ui.basic.Label; - label.setAppearance("datechooser-week"); - label.set({ width:"100%", height:"100%" }); - label.addState("header"); - datePane.add(label, 0, 0); - - this._weekdayLabelArr = []; - for (var i = 0; i < 7; i++) { - var label = new qx.ui.basic.Label; - label.setAppearance("datechooser-weekday"); - label.set({ width:"100%", height:"100%" }); - datePane.add(label, i + 1, 0); - this._weekdayLabelArr.push(label); - } - - // Add the days - this._dayLabelArr = []; - this._weekLabelArr = []; - for (var y = 0; y < 6; y++) { - // Add the week label - var label = new qx.ui.basic.Label; - label.setAppearance("datechooser-week"); - label.set({ width:"100%", height:"100%" }); - datePane.add(label, 0, y + 1); - this._weekLabelArr.push(label); - - // Add the day labels - for (var x = 0; x < 7; x++) { - var label = new qx.ui.basic.Label; - label.setAppearance("datechooser-day"); - label.set({ width:"100%", height:"100%" }); - label.addEventListener("mousedown", this._onDayClicked, this); - label.addEventListener("dblclick", this._onDayDblClicked, this); - datePane.add(label, x + 1, y + 1); - this._dayLabelArr.push(label); - } - } - - // Make focusable - this.setTabIndex(1); - this.addEventListener("keypress", this._onkeypress); - - // Show the right date - var shownDate = (date != null) ? date : new Date(); - this.showMonth(shownDate.getMonth(), shownDate.getFullYear()); - - // Add the main widgets - this.add(navBar); - this.add(datePane); - -}); - - -// ***** Properties ***** - -/** The start of the week. 0 = sunday, 1 = monday, and so on. */ -qx.OO.addProperty({ name:"startOfWeek", type:"number", defaultValue:1 }); -/** The currently shown month. 0 = january, 1 = february, and so on. */ -qx.OO.addProperty({ name:"shownMonth", type:"number", defaultValue:null }); -/** The currently shown year. */ -qx.OO.addProperty({ name:"shownYear", type:"number", defaultValue:null }); -/** {Date} The currently selected date. */ -qx.OO.addProperty({ name:"date", type:"object", defaultValue:null }); - - -// property checker -qx.Proto._checkDate = function(propValue, propData) { - // Use a clone of the date internally since date instances may be changed - return (propValue == null) ? null : new Date(propValue.getTime()); -} - - -// property modifier -qx.Proto._modifyDate = function(propValue, propOldValue, propData) { - var DateChooser = qx.ui.component.DateChooser; - - if ((propValue != null) && (this.getShownMonth() != propValue.getMonth() - || this.getShownYear() != propValue.getFullYear())) - { - // The new date is in another month -> Show that month - this.showMonth(propValue.getMonth(), propValue.getFullYear()); - } else { - // The new date is in the current month -> Just change the states - var newDay = (propValue == null) ? -1 : propValue.getDate(); - for (var i = 0; i < 6 * 7; i++) { - var dayLabel = this._dayLabelArr[i]; - - if (dayLabel.hasState("otherMonth")) { - if (dayLabel.hasState("selected")) { - dayLabel.removeState("selected"); - } - } else { - var day = parseInt(dayLabel.getHtml()); - if (day == newDay) { - dayLabel.addState("selected"); - } else if (dayLabel.hasState("selected")) { - dayLabel.removeState("selected"); - } - } - } - } - - return true; -} - - -/** - * Event handler. Called when a navigation button has been clicked. - * - * @param evt {Map} the event. - */ -qx.Proto._onNavButtonClicked = function(evt) { - var year = this.getShownYear(); - var month = this.getShownMonth(); - - switch(evt.getCurrentTarget()) { - case this._lastYearBt: - year--; - break; - case this._lastMonthBt: - month--; - if (month < 0) { - month = 11; - year--; - } - break; - case this._nextMonthBt: - month++; - if (month >= 12) { - month = 0; - year++; - } - break; - case this._nextYearBt: - year++; - break; - } - - this.showMonth(month, year); -} - - -/** - * Event handler. Called when a day has been clicked. - * - * @param evt {Map} the event. - */ -qx.Proto._onDayClicked = function(evt) { - var time = evt.getCurrentTarget().dateTime; - this.setDate(new Date(time)); -} - -qx.Proto._onDayDblClicked = function() { - this.createDispatchDataEvent("select", this.getDate()); -} - -/** - * Event handler. Called when a key was pressed. - * - * @param evt {Map} the event. - */ -qx.Proto._onkeypress = function(evt) { - var dayIncrement = null; - var monthIncrement = null; - var yearIncrement = null; - if (evt.getModifiers() == 0) { - switch(evt.getKeyIdentifier()) { - case "Left": - dayIncrement = -1; - break; - case "Right": - dayIncrement = 1; - break; - case "Up": - dayIncrement = -7; - break; - case "Down": - dayIncrement = 7; - break; - case "PageUp": - monthIncrement = -1; - break; - case "PageDown": - monthIncrement = 1; - break; - case "Escape": - if (this.getDate() != null) { - this.setDate(null); - return true; - } - break; - case "Enter": - case "Space": - if (this.getDate() != null) { - this.createDispatchDataEvent("select", this.getDate()); - } - return; - } - } else if (evt.getShiftKey()) { - switch(evt.getKeyIdentifier()) { - case "PageUp": - yearIncrement = -1; - break; - case "PageDown": - yearIncrement = 1; - break; - } - } - - if (dayIncrement != null || monthIncrement != null || yearIncrement != null) { - var date = this.getDate(); - if (date != null) { - date = new Date(date.getTime()); // TODO: Do cloning in getter - } - if (date == null) { - date = new Date(); - } else { - if (dayIncrement != null) date.setDate(date.getDate() + dayIncrement); - if (monthIncrement != null) date.setMonth(date.getMonth() + monthIncrement); - if (yearIncrement != null) date.setFullYear(date.getFullYear() + yearIncrement); - } - this.setDate(date); - } -} - - -// ***** Methods ***** - - -/** - * Returns whether a certain day of week belongs to the week end. - * - * @param dayOfWeek {int} the day to check. (0 = sunday, 1 = monday, ..., - * 6 = saturday) - * @return {boolean} whether the day belongs to the week end. - */ -qx.Proto._isWeekend = function(dayOfWeek) { - return (dayOfWeek == 0) || (dayOfWeek == 6); -} - - -/** - * Shows a certain month. - * - * @param month {int ? null} the month to show (0 = january). If not set the month - * will remain the same. - * @param year {int ? null} the year to show. If not set the year will remain the - * same. - */ -qx.Proto.showMonth = function(month, year) { - if ((month != null && month != this.getShownMonth()) - || (year != null && year != this.getShownYear())) - { - if (month != null) { - this.setShownMonth(month); - } - if (year != null) { - this.setShownYear(year); - } - - this._updateDatePane(); - } -} - - -/** - * Updates the date pane. - */ -qx.Proto._updateDatePane = function() { - var DateChooser = qx.ui.component.DateChooser; - - var today = new Date(); - var todayYear = today.getFullYear(); - var todayMonth = today.getMonth(); - var todayDayOfMonth = today.getDate(); - - var selDate = this.getDate(); - var selYear = (selDate == null) ? -1 : selDate.getFullYear(); - var selMonth = (selDate == null) ? -1 : selDate.getMonth(); - var selDayOfMonth = (selDate == null) ? -1 : selDate.getDate(); - - var shownMonth = this.getShownMonth(); - var shownYear = this.getShownYear(); - - var startOfWeek = this.getStartOfWeek(); - - // Create a help date that points to the first of the current month - var helpDate = new Date(this.getShownYear(), this.getShownMonth(), 1); - - this._monthYearLabel.setHtml(DateChooser.MONTH_YEAR_FORMAT.format(helpDate)); - - // Show the day names - var firstDayOfWeek = helpDate.getDay(); - var firstSundayInMonth = (1 + 7 - firstDayOfWeek) % 7; - for (var i = 0; i < 7; i++) { - var day = (i + startOfWeek) % 7; - - var dayLabel = this._weekdayLabelArr[i]; - - helpDate.setDate(firstSundayInMonth + day); - dayLabel.setHtml(DateChooser.WEEKDAY_FORMAT.format(helpDate)); - - if (this._isWeekend(day)) { - dayLabel.addState("weekend"); - } else { - dayLabel.removeState("weekend"); - } - } - - // Show the days - helpDate = new Date(shownYear, shownMonth, 1); - var nrDaysOfLastMonth = (7 + firstDayOfWeek - startOfWeek) % 7; - helpDate.setDate(helpDate.getDate() - nrDaysOfLastMonth); - for (var week = 0; week < 6; week++) { - this._weekLabelArr[week].setHtml(DateChooser.WEEK_FORMAT.format(helpDate)); - - for (var i = 0; i < 7; i++) { - var dayLabel = this._dayLabelArr[week * 7 + i]; - - var year = helpDate.getFullYear(); - var month = helpDate.getMonth(); - var dayOfMonth = helpDate.getDate(); - - var isSelectedDate = (selYear == year && selMonth == month && selDayOfMonth == dayOfMonth); - if (isSelectedDate) { - dayLabel.addState("selected"); - } else { - dayLabel.removeState("selected"); - } - - if (month != shownMonth) { - dayLabel.addState("otherMonth"); - } else { - dayLabel.removeState("otherMonth"); - } - - var isToday = (year == todayYear && month == todayMonth && dayOfMonth == todayDayOfMonth); - if (isToday) { - dayLabel.addState("today"); - } else { - dayLabel.removeState("today"); - } - - dayLabel.setHtml("" + dayOfMonth); - dayLabel.dateTime = helpDate.getTime(); - - // Go to the next day - helpDate.setDate(helpDate.getDate() + 1); - } - } -} - - -/** - * {qx.util.format.DateFormat} The format for the date year - * label at the top center. - */ -qx.Class.MONTH_YEAR_FORMAT = new qx.util.format.DateFormat("MMMM yyyy"); - -/** - * {qx.util.format.DateFormat} The format for the weekday - * labels (the headers of the date table). - */ -qx.Class.WEEKDAY_FORMAT = new qx.util.format.DateFormat("EE"); - -/** - * {qx.util.format.DateFormat} The format for the week labels. - */ -qx.Class.WEEK_FORMAT = new qx.util.format.DateFormat("ww"); - - -// overridden -qx.Proto.dispose = function() { - if (this.getDisposed()) { - return true; - } - - this._lastYearBt.removeEventListener("click", this._onNavButtonClicked, this); - this._lastMonthBt.removeEventListener("click", this._onNavButtonClicked, this); - this._nextMonthBt.removeEventListener("click", this._onNavButtonClicked, this); - this._nextYearBt.removeEventListener("click", this._onNavButtonClicked, this); - - this._lastYearBt.dispose(); - this._lastMonthBt.dispose(); - this._nextMonthBt.dispose(); - this._nextYearBt.dispose(); - - this._lastYearBt = null; - this._lastMonthBt = null; - this._nextMonthBt = null; - this._nextYearBt = null; - - this._monthYearLabel.dispose(); - this._monthYearLabel = null; - - for (var i = 0; i < this._weekdayLabelArr.length; i++) { - this._weekdayLabelArr[i].dispose(); - } - this._weekdayLabelArr = null; - - for (var i = 0; i < this._dayLabelArr.length; i++) { - this._dayLabelArr[i].dispose(); - this._dayLabelArr[i].removeEventListener("mousedown", this._onDayClicked, this); - this._dayLabelArr[i].removeEventListener("dblclick", this._onDayDblClicked, this); - } - this._dayLabelArr = null; - - for (var i = 0; i < this._weekLabelArr.length; i++) { - this._weekLabelArr[i].dispose(); - } - this._weekLabelArr = null; - - this.removeEventListener("keypress", this._onkeypress); - - return qx.ui.layout.BoxLayout.prototype.dispose.call(this); -} |