From ab44dfc8467227f15751651a54c365e171e44a09 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 12:28:49 +0100 Subject: Ported datepicker --- framework/Web/Javascripts/packages.php | 7 +- .../source/prado/datepicker/datepicker.js | 148 ++++++++------------- 2 files changed, 62 insertions(+), 93 deletions(-) (limited to 'framework/Web/Javascripts') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index 6f962760..65887c02 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -114,9 +114,9 @@ $dependencies = array( 'ajax' => array('jquery', 'prado', 'ajax'), 'logger' => array('jquery', 'prado', 'logger'), 'activefileupload' => array('jquery', 'prado', 'ajax', 'activefileupload'), - - 'effects' => array('prototype', 'prado', 'effects'), - 'datepicker' => array('prototype', 'prado', 'datepicker'), + 'effects' => array('jquery', 'jqueryui'), + 'datepicker' => array('jquery', 'prado', 'datepicker'), +/* 'colorpicker' => array('prototype', 'prado', 'colorpicker'), 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), @@ -128,6 +128,7 @@ $dependencies = array( 'htmlarea4' => array('prototype', 'prado', 'htmlarea4'), 'ratings' => array('prototype', 'prado', 'effects', 'ajax', 'ratings'), 'inlineeditor' => array('prototype', 'prado', 'effects', 'ajax', 'inlineeditor'), + */ 'jqueryui' => array('jquery', 'jqueryui'), ); diff --git a/framework/Web/Javascripts/source/prado/datepicker/datepicker.js b/framework/Web/Javascripts/source/prado/datepicker/datepicker.js index bb581751..ccb32c85 100644 --- a/framework/Web/Javascripts/source/prado/datepicker/datepicker.js +++ b/framework/Web/Javascripts/source/prado/datepicker/datepicker.js @@ -22,18 +22,18 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, onInit : function(options) { this.options = options || []; - this.control = $(options.ID); + this.control = $('#'+options.ID).get(0); this.dateSlot = new Array(42); this.weekSlot = new Array(6); this.minimalDaysInFirstWeek = 4; this.positionMode = 'Bottom'; - Prado.Registry.set(options.ID, this); + Prado.Registry[options.ID] = this; //which element to trigger to show the calendar if(this.options.Trigger) { - this.trigger = $(this.options.Trigger) ; + this.trigger = $('#'+this.options.Trigger).get(0); var triggerEvent = this.options.TriggerEvent || "click"; } else @@ -48,27 +48,27 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, this.positionMode = this.options.PositionMode; } - Object.extend(this,options); + jQuery.extend(this,options); // generate default date _after_ extending options this.selectedDate = this.newDate(); - Event.observe(this.trigger, triggerEvent, jQuery.proxy(this.show,this)); + this.observe(this.trigger, triggerEvent, jQuery.proxy(this.show,this)); // Listen to change event if needed if (typeof(this.options.OnDateChanged) == "function") { if(this.options.InputMode == "TextBox") { - Event.observe(this.control, "change", jQuery.proxy(this.onDateChanged,this)); + this.observe(this.control, "change", jQuery.proxy(this.onDateChanged,this)); } else { var day = Prado.WebUI.TDatePicker.getDayListControl(this.control); var month = Prado.WebUI.TDatePicker.getMonthListControl(this.control); var year = Prado.WebUI.TDatePicker.getYearListControl(this.control); - Event.observe (day, "change", jQuery.proxy(this.onDateChanged,this)); - Event.observe (month, "change", jQuery.proxy(this.onDateChanged,this)); - Event.observe (year, "change", jQuery.proxy(this.onDateChanged,this)); + this.observe (day, "change", jQuery.proxy(this.onDateChanged,this)); + this.observe (month, "change", jQuery.proxy(this.onDateChanged,this)); + this.observe (year, "change", jQuery.proxy(this.onDateChanged,this)); } @@ -214,8 +214,8 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, tmp.data = text; this.dateSlot[(week*7)+day] = tmp; - Event.observe(td, "mouseover", jQuery.proxy(this.hover,this)); - Event.observe(td, "mouseout", jQuery.proxy(this.hover,this)); + this.observe(td, "mouseover", jQuery.proxy(this.hover,this)); + this.observe(td, "mouseout", jQuery.proxy(this.hover,this)); } } @@ -233,60 +233,28 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, todayButton.value = buttonText; div.appendChild(todayButton); - if(Prado.Browser().ie) - { - this.iePopUp = document.createElement('iframe'); - this.iePopUp.src = Prado.WebUI.TDatePicker.spacer; - this.iePopUp.style.position = "absolute" - this.iePopUp.scrolling="no" - this.iePopUp.frameBorder="0" - this.control.parentNode.appendChild(this.iePopUp); - } - this.control.parentNode.appendChild(this._calDiv); this.update(); this.updateHeader(); - this.ieHack(true); - - // IE55+ extension - previousMonth.hideFocus = true; - nextMonth.hideFocus = true; - todayButton.hideFocus = true; - // end IE55+ extension - // hook up events - Event.observe(previousMonth, "click", jQuery.proxy(this.prevMonth,this)); - Event.observe(nextMonth, "click", jQuery.proxy(this.nextMonth,this)); - Event.observe(todayButton, "click", jQuery.proxy(this.selectToday,this)); + this.observe(previousMonth, "click", jQuery.proxy(this.prevMonth,this)); + this.observe(nextMonth, "click", jQuery.proxy(this.nextMonth,this)); + this.observe(todayButton, "click", jQuery.proxy(this.selectToday,this)); //Event.observe(clearButton, "click", jQuery.proxy(this.clearSelection,this)); - Event.observe(this._monthSelect, "change", jQuery.proxy(this.monthSelect,this)); - Event.observe(this._yearSelect, "change", jQuery.proxy(this.yearSelect,this)); + this.observe(this._monthSelect, "change", jQuery.proxy(this.monthSelect,this)); + this.observe(this._yearSelect, "change", jQuery.proxy(this.yearSelect,this)); // ie, opera - Event.observe(this._calDiv, "mousewheel", jQuery.proxy(this.mouseWheelChange,this)); + this.observe(this._calDiv, "mousewheel", jQuery.proxy(this.mouseWheelChange,this)); // ff - Event.observe(this._calDiv, "DOMMouseScroll", jQuery.proxy(this.mouseWheelChange,this)); - - Event.observe(calendarBody, "click", jQuery.proxy(this.selectDate,this)); + this.observe(this._calDiv, "DOMMouseScroll", jQuery.proxy(this.mouseWheelChange,this)); - Prado.Element.focus(this.control); + this.observe(calendarBody, "click", jQuery.proxy(this.selectDate,this)); - }, + jQuery(this.control).focus(); - ieHack : function(cleanup) - { - // IE hack - if(this.iePopUp) - { - this.iePopUp.style.display = "block"; - this.iePopUp.style.left = (this._calDiv.offsetLeft -1)+ "px"; - this.iePopUp.style.top = (this._calDiv.offsetTop -1 ) + "px"; - this.iePopUp.style.width = Math.abs(this._calDiv.offsetWidth -2)+ "px"; - this.iePopUp.style.height = (this._calDiv.offsetHeight + 1)+ "px"; - if(cleanup) this.iePopUp.style.display = "none"; - } }, keyPressed : function(ev) @@ -295,15 +263,18 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, if (!ev) ev = document.parentWindow.event; var kc = ev.keyCode != null ? ev.keyCode : ev.charCode; - if(kc == Event.KEY_RETURN || kc == Event.KEY_SPACEBAR || kc == Event.KEY_TAB) + // return, space, tab + if(kc == 13 || kc == 32 || kc == 9) { this.setSelectedDate(this.selectedDate); - Event.stop(ev); + ev.preventDefault(); this.hide(); } - if(kc == Event.KEY_ESC) + // esc + if(kc == 27) { - Event.stop(ev); this.hide(); + ev.preventDefault(); + this.hide(); } var getDaysPerMonth = function (nMonth, nYear) @@ -320,7 +291,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, var current = this.selectedDate; var d = current.valueOf(); - if(kc == Event.KEY_LEFT) + if(kc == 37) // left { if(ev.ctrlKey || ev.shiftKey) // -1 month { @@ -330,7 +301,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, else d -= 86400000; //-1 day } - else if (kc == Event.KEY_RIGHT) + else if (kc == 39) // right { if(ev.ctrlKey || ev.shiftKey) // +1 month { @@ -340,7 +311,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, else d += 86400000; //+1 day } - else if (kc == Event.KEY_UP) + else if (kc == 38) // up { if(ev.ctrlKey || ev.shiftKey) //-1 year { @@ -350,7 +321,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, else d -= 604800000; // -7 days } - else if (kc == Event.KEY_DOWN) + else if (kc == 40) // down { if(ev.ctrlKey || ev.shiftKey) // +1 year { @@ -361,12 +332,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, d += 7 * 24 * 61 * 60 * 1000; // +7 days } this.setSelectedDate(d); - Event.stop(ev); + ev.preventDefault(); }, selectDate : function(ev) { - var el = Event.element(ev); + var el = ev.target; while (el.nodeType != 1) el = el.parentNode; @@ -403,12 +374,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, monthSelect : function(ev) { - this.setMonth(Form.Element.getValue(Event.element(ev))); + this.setMonth(ev.target.value); }, yearSelect : function(ev) { - this.setYear(Form.Element.getValue(Event.element(ev))); + this.setYear(ev.target.value); }, mouseWheelChange : function (event) @@ -460,12 +431,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, obj.changeeventtimer = null; } obj.changeeventtimer = setTimeout( - function() { obj.changeeventtimer = null; Event.fireEvent(element, "change"); }, + function() { obj.changeeventtimer = null; element.trigger("change"); }, 1500 ); } else - Event.fireEvent(element, "change"); + jQuery(element).trigger("change"); }, onChange : function(ref, date, capevents) @@ -598,39 +569,36 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, if(!this.showing) { - var pos = this.control.positionedOffset(); + var pos = jQuery(this.control).position(); pos[1] += this.getDatePickerOffsetHeight(); this._calDiv.style.top = (pos[1]-1) + "px"; this._calDiv.style.display = "block"; this._calDiv.style.left = pos[0] + "px"; - this.documentClickEvent = this.hideOnClick.bindEvent(this); - this.documentKeyDownEvent = this.keyPressed.bindEvent(this); - Event.observe(document.body, "click", this.documentClickEvent); + this.documentClickEvent = jQuery.bind(this.hideOnClick, this); + this.documentKeyDownEvent = jQuery.bind(this.keyPressed, this); + this.observe(document.body, "click", this.documentClickEvent); var date = this.getDateFromInput(); if(date) { this.selectedDate = date; this.setSelectedDate(date); } - Event.observe(document,"keydown", this.documentKeyDownEvent); + this.observe(document,"keydown", this.documentKeyDownEvent); this.showing = true; if(this.positionMode=='Top') { this._calDiv.style.top = ((pos[1]-1) - this.getDatePickerOffsetHeight() - this._calDiv.offsetHeight) + 'px'; - if(Prado.Browser().ie) - this.iePopup = this._calDiv.style.top; } - this.ieHack(false); } }, getDateFromInput : function() { if(this.options.InputMode == "TextBox") - return Date.SimpleParse($F(this.control), this.Format); + return Date.SimpleParse(this.control.value, this.Format); else return Prado.WebUI.TDatePicker.getDropDownDate(this.control); }, @@ -639,11 +607,11 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, hideOnClick : function(ev) { if(!this.showing) return; - var el = Event.element(ev); + var el = ev.target; var within = false; do { - within = within || (el.className && Element.hasClassName(el, "TDatePicker_"+this.CalendarStyle)); + within = within || (el.className && jQuery(el).hasClass("TDatePicker_"+this.CalendarStyle)); within = within || el == this.trigger; within = within || el == this.control; if(within) break; @@ -662,8 +630,8 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, if(this.iePopUp) this.iePopUp.style.display = "none"; this.showing = false; - Event.stopObserving(document.body, "click", this.documentClickEvent); - Event.stopObserving(document,"keydown", this.documentKeyDownEvent); + this.stopObserving(document.body, "click", this.documentClickEvent); + this.stopObserving(document,"keydown", this.documentKeyDownEvent); } }, @@ -721,12 +689,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, hover : function(ev) { - if(Event.element(ev).tagName) + if(ev.target.tagName) { if(ev.type == "mouseover") - Event.element(ev).addClassName("hover"); - else - Event.element(ev).removeClassName("hover"); + jQuery(ev.target).addClass("hover"); + else + jQuery(ev.target).removeClass("hover"); } }, @@ -753,7 +721,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, } }); -Object.extend(Prado.WebUI.TDatePicker, +jQuery.extend(Prado.WebUI.TDatePicker, { /** * @return Date the date from drop down list options. @@ -769,25 +737,25 @@ Object.extend(Prado.WebUI.TDatePicker, var day_list = Prado.WebUI.TDatePicker.getDayListControl(control); var year_list = Prado.WebUI.TDatePicker.getYearListControl(control); - var day = day_list ? $F(day_list) : 1; - var month = month_list ? $F(month_list) : now.getMonth(); - var year = year_list ? $F(year_list) : now.getFullYear(); + var day = day_list ? day_list.value : 1; + var month = month_list ? month_list.value : now.getMonth(); + var year = year_list ? year_list.value : now.getFullYear(); return new Date(year,month,day, 0, 0, 0); }, getYearListControl : function(control) { - return $(control.id+"_year"); + return $('#'+control.id+"_year").get(0); }, getMonthListControl : function(control) { - return $(control.id+"_month"); + return $('#'+control.id+"_month").get(0); }, getDayListControl : function(control) { - return $(control.id+"_day"); + return $('#'+control.id+"_day").get(0); } }); \ No newline at end of file -- cgit v1.2.3