From 1f8a1f7381b76c4c2b43437ebc7e30100a4bb36d Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Wed, 20 Nov 2013 21:32:35 +0100 Subject: Fixed DefaultButton --- .../Web/Javascripts/source/prado/controls/controls.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/source/prado/controls/controls.js b/framework/Web/Javascripts/source/prado/controls/controls.js index 619e924b..b4d5653e 100644 --- a/framework/Web/Javascripts/source/prado/controls/controls.js +++ b/framework/Web/Javascripts/source/prado/controls/controls.js @@ -413,24 +413,24 @@ Prado.WebUI.DefaultButton = jQuery.klass(Prado.WebUI.Control, onInit : function(options) { this.options = options; - this.observe(options['Panel'], "keydown", jQuery.proxy(this.triggerEvent,this)); + this.observe(jQuery('#'+options['Panel']), "keydown", jQuery.proxy(this.triggerEvent,this)); }, - triggerEvent : function(ev, target) + triggerEvent : function(ev) { - var enterPressed = Event.keyCode(ev) == Event.KEY_RETURN; - var isTextArea = Event.element(ev).tagName.toLowerCase() == "textarea"; - var isHyperLink = Event.element(ev).tagName.toLowerCase() == "a" && Event.element(ev).hasAttribute("href"); - var isValidButton = Event.element(ev).tagName.toLowerCase() == "input" && Event.element(ev).type.toLowerCase() == "submit"; + var enterPressed = ev.keyCode == 13; + var isTextArea = ev.target.tagName.toLowerCase() == "textarea"; + var isHyperLink = ev.target.tagName.toLowerCase() == "a" && ev.target.hasAttribute("href"); + var isValidButton = ev.target.tagName.toLowerCase() == "input" && ev.target.type.toLowerCase() == "submit"; if(enterPressed && !isTextArea && !isValidButton && !isHyperLink) { - var defaultButton = $(this.options['Target']); + var defaultButton = $('#'+this.options['Target']); if(defaultButton) { this.triggered = true; - Event.fireEvent(defaultButton, this.options['Event']); - Event.stop(ev); + defaultButton.trigger(this.options['Event']); + ev.preventDefault(); } } } -- cgit v1.2.3 From 9342b70444cec0db1d281fd2a03fe5d06f1ef646 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Wed, 20 Nov 2013 21:32:47 +0100 Subject: Fixed TControl::focus() --- framework/Web/UI/TClientScriptManager.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'framework') diff --git a/framework/Web/UI/TClientScriptManager.php b/framework/Web/UI/TClientScriptManager.php index 80a71ea0..a9f6c5b4 100644 --- a/framework/Web/UI/TClientScriptManager.php +++ b/framework/Web/UI/TClientScriptManager.php @@ -340,11 +340,10 @@ class TClientScriptManager extends TApplicationComponent */ public function registerFocusControl($target) { - $this->registerPradoScriptInternal('effects'); + $this->registerPradoScriptInternal('jquery'); if($target instanceof TControl) $target=$target->getClientID(); - $id = TJavaScript::quoteString($target); - $this->_endScripts['prado:focus'] = 'new Effect.ScrollTo('.$id.'); Prado.Element.focus('.$id.');'; + $this->_endScripts['prado:focus'] = 'new Prado.Element.scrollTo(\''.$target.'\'); jQuery(\'#'.$target.'\').focus();'; $params=func_get_args(); $this->_page->registerCachingAction('Page.ClientScript','registerFocusControl',$params); -- cgit v1.2.3 From 029b35c3ec0d175ac59ad88155f852ba6a30cfdf Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 12:27:58 +0100 Subject: Fixed Prado's stopObserving --- framework/Web/Javascripts/source/prado/controls/controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/source/prado/controls/controls.js b/framework/Web/Javascripts/source/prado/controls/controls.js index b4d5653e..d576c3eb 100644 --- a/framework/Web/Javascripts/source/prado/controls/controls.js +++ b/framework/Web/Javascripts/source/prado/controls/controls.js @@ -121,7 +121,7 @@ Prado.WebUI.Control = jQuery.klass({ { var idx = this.findObserver(element,eventName,handler); if (idx!=-1) - this.observers = this.observers.without(this.observers[idx]); + this.observers.splice(idx, 1); else debugger; // shouldn't happen -- cgit v1.2.3 From f99d3e3596241af120d49ac91605948010e282fe 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') 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 From fb6aa11d389705e7cfcf2c472c0528e4677c38be Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 13:42:08 +0100 Subject: Fixed TTextBox's AutoPostBack=true --- framework/Web/Javascripts/source/prado/controls/controls.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/source/prado/controls/controls.js b/framework/Web/Javascripts/source/prado/controls/controls.js index d576c3eb..69632cfb 100644 --- a/framework/Web/Javascripts/source/prado/controls/controls.js +++ b/framework/Web/Javascripts/source/prado/controls/controls.js @@ -369,7 +369,12 @@ Prado.WebUI.TTextBox = jQuery.klass(Prado.WebUI.PostBackControl, if(this.options['TextMode'] != 'MultiLine') this.observe(this.element, "keydown", this.handleReturnKey.bind(this)); if(this.options['AutoPostBack']==true) - this.observe(this.element, "change", jQuery.proxy(Prado.PostBack,this,options)); + this.observe(this.element, "change", jQuery.proxy(this.doPostback,this,options)); + }, + + doPostback : function(options, event) + { + new Prado.PostBack(options, event); }, handleReturnKey : function(e) -- cgit v1.2.3 From 07672dbafb0dd907c40e854a2d1023d211b807b5 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 13:43:12 +0100 Subject: Fixed a bug in TDatePicker rendering an unused TTextBox --- framework/Web/UI/ActiveControls/TActiveDatePicker.php | 2 +- framework/Web/UI/WebControls/TDatePicker.php | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'framework') diff --git a/framework/Web/UI/ActiveControls/TActiveDatePicker.php b/framework/Web/UI/ActiveControls/TActiveDatePicker.php index bfac83a0..279739a8 100755 --- a/framework/Web/UI/ActiveControls/TActiveDatePicker.php +++ b/framework/Web/UI/ActiveControls/TActiveDatePicker.php @@ -139,7 +139,7 @@ class TActiveDatePicker extends TDatePicker implements ICallbackEventHandler, I $cs->registerPradoScript("activedatepicker"); } - protected function registerCalendarClientScriptPost() + protected function renderClientControlScript($writer) { $cs = $this->getPage()->getClientScript(); if(!$cs->isEndScriptRegistered('TDatePicker.spacer')) diff --git a/framework/Web/UI/WebControls/TDatePicker.php b/framework/Web/UI/WebControls/TDatePicker.php index b5ed8a86..275fc557 100644 --- a/framework/Web/UI/WebControls/TDatePicker.php +++ b/framework/Web/UI/WebControls/TDatePicker.php @@ -428,7 +428,7 @@ class TDatePicker extends TTextBox $this->renderDropDownListCalendar($writer); if($this->hasDayPattern()) { - $this->registerCalendarClientScriptPost(); + $this->renderClientControlScript($writer); $this->renderDatePickerButtons($writer); } } @@ -850,10 +850,8 @@ class TDatePicker extends TTextBox { parent::addAttributesToRender($writer); $writer->addAttribute('id',$this->getClientID()); - $this->registerCalendarClientScriptPost(); } - /** * Registers the javascript code to initialize the date picker. */ @@ -866,7 +864,7 @@ class TDatePicker extends TTextBox } } - protected function registerCalendarClientScriptPost() + protected function renderClientControlScript($writer) { if($this->getShowCalendar()) { -- cgit v1.2.3 From 3a7583cea435712a9018edfed3b6614261018d28 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 13:43:25 +0100 Subject: Ported TActiveDatePicker --- framework/Web/Javascripts/packages.php | 2 +- .../Web/Javascripts/source/prado/activecontrols/activedatepicker.js | 6 +++--- framework/Web/Javascripts/source/prado/datepicker/datepicker.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index 65887c02..4743a000 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -116,12 +116,12 @@ $dependencies = array( 'activefileupload' => array('jquery', 'prado', 'ajax', 'activefileupload'), 'effects' => array('jquery', 'jqueryui'), 'datepicker' => array('jquery', 'prado', 'datepicker'), + 'activedatepicker' => array('jquery', 'prado', 'datepicker', 'ajax', 'activedatepicker'), /* 'colorpicker' => array('prototype', 'prado', 'colorpicker'), 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), 'keyboard' => array('prototype', 'prado', 'keyboard'), - 'activedatepicker' => array('prototype', 'prado', 'datepicker', 'ajax', 'activedatepicker'), 'dragdropextra' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop','dragdropextra'), 'accordion' => array('prototype', 'prado', 'effects', 'accordion'), 'htmlarea' => array('prototype', 'prado', 'htmlarea'), diff --git a/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js b/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js index b6d94b0b..c0268077 100755 --- a/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js +++ b/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js @@ -6,7 +6,7 @@ Prado.WebUI.TActiveDatePicker = jQuery.klass(Prado.WebUI.TDatePicker, 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; @@ -17,7 +17,7 @@ Prado.WebUI.TActiveDatePicker = jQuery.klass(Prado.WebUI.TDatePicker, //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 @@ -32,7 +32,7 @@ Prado.WebUI.TActiveDatePicker = jQuery.klass(Prado.WebUI.TDatePicker, this.positionMode = this.options.PositionMode; } - Object.extend(this,options); + jQuery.extend(this,options); if (this.options.ShowCalendar) this.observe(this.trigger, triggerEvent, jQuery.proxy(this.show,this)); diff --git a/framework/Web/Javascripts/source/prado/datepicker/datepicker.js b/framework/Web/Javascripts/source/prado/datepicker/datepicker.js index ccb32c85..e74f586a 100644 --- a/framework/Web/Javascripts/source/prado/datepicker/datepicker.js +++ b/framework/Web/Javascripts/source/prado/datepicker/datepicker.js @@ -431,7 +431,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control, obj.changeeventtimer = null; } obj.changeeventtimer = setTimeout( - function() { obj.changeeventtimer = null; element.trigger("change"); }, + function() { obj.changeeventtimer = null; jQuery(element).trigger("change"); }, 1500 ); } -- cgit v1.2.3 From 9af4b9fe390576fc0b978a9f4a6677185bc8f11f Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 16:04:52 +0100 Subject: Ported colorpicker --- framework/Web/Javascripts/packages.php | 2 +- .../source/prado/colorpicker/colorpicker.js | 419 ++++++++++++--------- 2 files changed, 235 insertions(+), 186 deletions(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index 4743a000..edd250f1 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -117,8 +117,8 @@ $dependencies = array( 'effects' => array('jquery', 'jqueryui'), 'datepicker' => array('jquery', 'prado', 'datepicker'), 'activedatepicker' => array('jquery', 'prado', 'datepicker', 'ajax', 'activedatepicker'), + 'colorpicker' => array('jquery', 'prado', 'colorpicker'), /* - 'colorpicker' => array('prototype', 'prado', 'colorpicker'), 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), 'keyboard' => array('prototype', 'prado', 'keyboard'), diff --git a/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js b/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js index 14195090..54680922 100644 --- a/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js +++ b/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js @@ -79,7 +79,7 @@ Rico.Color.prototype = { }, asHex: function() { - return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart(); + return "#" + this.toColorPart(this.rgb.r) + this.toColorPart(this.rgb.g) + this.toColorPart(this.rgb.b); }, asHSB: function() { @@ -88,8 +88,13 @@ Rico.Color.prototype = { toString: function() { return this.asHex(); - } + }, + toColorPart: function(number) { + number = (number > 255 ? 255 : (number < 0 ? 0 : number)); + var hex = number.toString(16); + return hex.length < 2 ? "0" + hex : hex; + } }; Rico.Color.createFromHex = function(hexCode) { @@ -122,7 +127,7 @@ Rico.Color.createFromHex = function(hexCode) { */ Rico.Color.createColorFromBackground = function(elem) { - var actualColor = Element.getStyle($(elem), "background-color"); + var actualColor = jQuery(elem).css("background-color"); if ( actualColor == "transparent" && elem.parent ) return Rico.Color.createColorFromBackground(elem.parent); @@ -241,40 +246,9 @@ Rico.Color.RGBtoHSB = function(r, g, b) { return { h : hue, s : saturation, b : brightness }; }; +Prado.WebUI.TColorPicker = jQuery.klass(Prado.WebUI.Control, { -Prado.WebUI.TColorPicker = jQuery.klass(); - -Object.extend(Prado.WebUI.TColorPicker, -{ - palettes: - { - Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], - ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], - ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"], - ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"], - ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"], - ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"], - ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]], - - Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/], - ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/], - ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] - }, - - UIImages : - { - 'button.gif' : 'button.gif', -// 'target_black.gif' : 'target_black.gif', -// 'target_white.gif' : 'target_white.gif', - 'background.png' : 'background.png' -// 'slider.gif' : 'slider.gif', -// 'hue.gif' : 'hue.gif' - } -}); - -Object.extend(Prado.WebUI.TColorPicker.prototype, -{ - initialize : function(options) + onInit : function(options) { var basics = { @@ -289,16 +263,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.element = null; this.showing = false; - options = Object.extend(basics, options); + options = jQuery.extend(basics, options); this.options = options; - this.input = $(options['ID']); - this.button = $(options['ID']+'_button'); - this._buttonOnClick = this.buttonOnClick.bind(this); + this.input = $('#'+options['ID']).get(0); + this.button = $('#'+options['ID']+'_button').get(0); + this._buttonOnClick = jQuery.proxy(this.buttonOnClick, this); if(options['ShowColorPicker']) - Event.observe(this.button, "click", this._buttonOnClick); - Event.observe(this.input, "change", this.updatePicker.bind(this)); + this.observe(this.button, "click", this._buttonOnClick); + this.observe(this.input, "change", jQuery.proxy(this.updatePicker, this)); - Prado.Registry.set(options.ID, this); + Prado.Registry[options.ID] = this; }, updatePicker : function(e) @@ -317,15 +291,6 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.input.parentNode.appendChild(this.element); this.element.style.display = "none"; - if(Prado.Browser().ie) - { - this.iePopUp = document.createElement('iframe'); - this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif']; - this.iePopUp.style.position = "absolute" - this.iePopUp.scrolling="no" - this.iePopUp.frameBorder="0" - this.input.parentNode.appendChild(this.iePopUp); - } if(mode == "Full") this.initializeFullPicker(); } @@ -336,20 +301,18 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { if(!this.showing) { - var pos = this.input.positionedOffset(); - pos[1] += this.input.offsetHeight; + var pos = jQuery(this.input).position(); + pos['top'] += this.input.offsetHeight; - this.element.style.top = (pos[1]-1) + "px"; - this.element.style.left = pos[0] + "px"; + this.element.style.top = (pos['top']-1) + "px"; + this.element.style.left = pos['left'] + "px"; this.element.style.display = "block"; - this.ieHack(type); - //observe for clicks on the document body - this._documentClickEvent = this.hideOnClick.bindEvent(this, type); - this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type); - Event.observe(document.body, "click", this._documentClickEvent); - Event.observe(document,"keydown", this._documentKeyDownEvent); + this._documentClickEvent = jQuery.bind(this.hideOnClick, this, type); + this._documentKeyDownEvent = jQuery.bind(this.keyPressed, this, type); + this.observe(document.body, "click", this._documentClickEvent); + this.observe(document,"keydown", this._documentKeyDownEvent); this.showing = true; if(type == "Full") @@ -366,17 +329,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { if(this.showing) { - if(this.iePopUp) - this.iePopUp.style.display = "none"; - this.element.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); if(this._observingMouseMove) { - Event.stopObserving(document.body, "mousemove", this._onMouseMove); + this.stopObserving(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = false; } } @@ -384,14 +344,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, keyPressed : function(event,type) { - if(Event.keyCode(event) == Event.KEY_ESC) + // esc + if(event.keyCode == 27) this.hide(event,type); }, hideOnClick : function(ev) { if(!this.showing) return; - var el = Event.element(ev); + var el = ev.target; var within = false; do { within = within || String(el.className).indexOf('FullColorPicker') > -1 @@ -404,53 +365,60 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, if(!within) this.hide(ev); }, - ieHack : function() - { - // IE hack - if(this.iePopUp) - { - this.iePopUp.style.display = "block"; - this.iePopUp.style.top = (this.element.offsetTop) + "px"; - this.iePopUp.style.left = (this.element.offsetLeft)+ "px"; - this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px"; - this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px"; - } - }, - getBasicPickerContainer : function(pickerID, palette) { - var table = TABLE({className:'basic_colors palette_'+palette},TBODY()); + var div; + var table; + var tbody; + var tr; + var td; + + // main div + div = document.createElement("div"); + div.className = this.options['ClassName']+" BasicColorPicker"; + div.id = pickerID+"_picker"; + + table = document.createElement("table"); + table.className = 'basic_colors palette_'+palette; + div.appendChild(table); + + tbody = document.createElement("tbody"); + table.appendChild(tbody); + var colors = Prado.WebUI.TColorPicker.palettes[palette]; var pickerOnClick = this.cellOnClick.bind(this); - colors.each(function(color) + var obj=this; + jQuery.each(colors, function(idx, color) { var row = document.createElement("tr"); - color.each(function(c) + jQuery.each(color, function(idx, c) { var td = document.createElement("td"); - var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16}); + var img = document.createElement("img"); + img.src=Prado.WebUI.TColorPicker.UIImages['button.gif']; + img.width=16; + img.height=16; img.style.backgroundColor = "#"+c; - Event.observe(img,"click", pickerOnClick); - Event.observe(img,"mouseover", function(e) + obj.observe(img,"click", pickerOnClick); + obj.observe(img,"mouseover", function(e) { - Element.addClassName(Event.element(e), "pickerhover"); + jQuery(e.target).addClass("pickerhover"); }); - Event.observe(img,"mouseout", function(e) + obj.observe(img,"mouseout", function(e) { - Element.removeClassName(Event.element(e), "pickerhover"); + jQuery(e.target).removeClass("pickerhover"); }); td.appendChild(img); row.appendChild(td); }); table.childNodes[0].appendChild(row); }); - return DIV({className:this.options['ClassName']+" BasicColorPicker", - id:pickerID+"_picker"}, table); + return div; }, cellOnClick : function(e) { - var el = Event.element(e); + var el = e.target; if(el.tagName.toLowerCase() != "img") return; var color = Rico.Color.createColorFromBackground(el); @@ -469,98 +437,148 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, getFullPickerContainer : function(pickerID) { - //create the 3 buttons + //create the buttons + var okBtn = document.createElement("input"); + okBtn.className = 'button'; + okBtn.type = 'button'; + okBtn.value = this.options.OKButtonText; + + var cancelBtn = document.createElement("input"); + cancelBtn.className = 'button'; + cancelBtn.type = 'button'; + cancelBtn.value = this.options.CancelButtonText; + this.buttons = { - //Less : INPUT({value:'Less Colors', className:'button', type:'button'}), - OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}), - Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'}) + OK : okBtn, + Cancel : cancelBtn }; //create the 6 inputs var inputs = {}; - ['H','S','V','R','G','B'].each(function(type) + jQuery.each(['H','S','V','R','G','B'], function(idx, type) { - inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'}); + inputs[type] = document.createElement("input"); + inputs[type].type='text'; + inputs[type].size='3'; + inputs[type].maxlength='3'; }); //create the HEX input - inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'}); + inputs['HEX'] = document.createElement("input"); + inputs['HEX'].className = 'hex'; + inputs['HEX'].type='text'; + inputs['HEX'].size='6'; + inputs['HEX'].maxlength='6'; + this.inputs = inputs; var images = Prado.WebUI.TColorPicker.UIImages; - this.inputs['currentColor'] = SPAN({className:'currentColor'}); - this.inputs['oldColor'] = SPAN({className:'oldColor'}); - - var inputsTable = - TABLE({className:'inputs'}, TBODY(null, - TR(null, - TD({className:'currentcolor',colSpan:2}, - this.inputs['currentColor'], this.inputs['oldColor'])), - - TR(null, - TD(null,'H:'), - TD(null,this.inputs['H'], '??')), + this.inputs['currentColor'] = document.createElement("span"); + this.inputs['currentColor'].className='currentColor'; + this.inputs['oldColor'] = document.createElement("span"); + this.inputs['oldColor'].className='oldColor'; - TR(null, - TD(null,'S:'), - TD(null,this.inputs['S'], '%')), + var inputsTable = document.createElement("table"); + inputsTable.className='inputs'; - TR(null, - TD(null,'V:'), - TD(null,this.inputs['V'], '%')), + var tbody = document.createElement("tbody"); + inputsTable.appendChild(tbody); - TR(null, - TD({className:'gap'},'R:'), - TD({className:'gap'},this.inputs['R'])), + var tr = document.createElement("tr"); + tbody.appendChild(tr); - TR(null, - TD(null,'G:'), - TD(null, this.inputs['G'])), + var td= document.createElement("td"); + tr.appendChild(td); + td.className='currentcolor'; + td.colSpan=2; + td.appendChild(this.inputs['currentColor']); + td.appendChild(this.inputs['oldColor']); - TR(null, - TD(null,'B:'), - TD(null, this.inputs['B'])), - - TR(null, - TD({className:'gap'},'#'), - TD({className:'gap'},this.inputs['HEX'])) - )); + this.internalAddRow(tbody, 'H:', this.inputs['H'], '°'); + this.internalAddRow(tbody, 'S:', this.inputs['S'], '%'); + this.internalAddRow(tbody, 'V:', this.inputs['V'], '%'); + this.internalAddRow(tbody, 'R:', this.inputs['R'], null, 'gap'); + this.internalAddRow(tbody, 'G:', this.inputs['G']); + this.internalAddRow(tbody, 'B:', this.inputs['B']); + this.internalAddRow(tbody, '#', this.inputs['HEX'], null, 'gap'); var UIimages = { - selector : SPAN({className:'selector'}), - background : SPAN({className:'colorpanel'}), - slider : SPAN({className:'slider'}), - hue : SPAN({className:'strip'}) + selector : document.createElement("span"), + background : document.createElement("span"), + slider : document.createElement("span"), + hue : document.createElement("span") } - //png alpha channels for IE - if(Prado.Browser().ie) - { - var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"; - UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"}) - } + UIimages['selector'].className='selector'; + UIimages['background'].className='colorpanel'; + UIimages['slider'].className='slider'; + UIimages['hue'].className='strip'; + + this.inputs = jQuery.extend(this.inputs, UIimages); + + var pickerTable = document.createElement("table"); + tbody=document.createElement("tbody"); + pickerTable.appendChild(tbody); + + var tr = document.createElement("tr"); + tr.className='selection'; + tbody.appendChild(tr); + + var td= document.createElement("td"); + tr.appendChild(td); + td.className='colors'; + td.appendChild(UIimages['selector']); + td.appendChild(UIimages['background']); + + var td= document.createElement("td"); + tr.appendChild(td); + td.className='hue'; + td.appendChild(UIimages['slider']); + td.appendChild(UIimages['hue']); + + var td= document.createElement("td"); + tr.appendChild(td); + td.className='inputs'; + td.appendChild(inputsTable); + + var tr = document.createElement("tr"); + tr.className='options'; + tbody.appendChild(tr); + + var td= document.createElement("td"); + tr.appendChild(td); + td.colSpan=3; + td.appendChild(this.buttons['OK']); + td.appendChild(this.buttons['Cancel']); + + var div = document.createElement('div'); + div.className=this.options['ClassName']+" FullColorPicker"; + div.id=pickerID+"_picker"; + div.appendChild(pickerTable); + return div; + }, - this.inputs = Object.extend(this.inputs, UIimages); - - var pickerTable = - TABLE(null,TBODY(null, - TR({className:'selection'}, - TD({className:'colors'},UIimages['selector'],UIimages['background']), - TD({className:'hue'},UIimages['slider'],UIimages['hue']), - TD({className:'inputs'}, inputsTable) - ), - TR({className:'options'}, - TD({colSpan:3}, - this.buttons['OK'], - this.buttons['Cancel']) - ) - )); - - return DIV({className:this.options['ClassName']+" FullColorPicker", - id:pickerID+"_picker"},pickerTable); + internalAddRow : function(tbody, label1, object2, label2, className) + { + var tr = document.createElement("tr"); + tbody.appendChild(tr); + + var td= document.createElement("td"); + if(className!==undefined && className!==null) + td.className=className; + tr.appendChild(td); + td.appendChild(document.createTextNode(label1)); + + var td= document.createElement("td"); + if(className!==undefined && className!==null) + td.className=className; + tr.appendChild(td); + td.appendChild(object2); + if(label2!==undefined && label2!==null) + td.appendChild(document.createTextNode(label2)); }, initializeFullPicker : function() @@ -572,7 +590,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, var i = 0; for(var type in this.inputs) { - Event.observe(this.inputs[type], "change", + this.observe(this.inputs[type], "change", jQuery.proxy(this.onInputChanged,this,type)); i++; @@ -587,24 +605,24 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this._onMouseUp = this.onMouseUp.bind(this); this._onMouseMove = this.onMouseMove.bind(this); - Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown); - Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown); - Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); - Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown); + this.observe(this.inputs.background, "mousedown", this._onColorMouseDown); + this.observe(this.inputs.selector, "mousedown", this._onColorMouseDown); + this.observe(this.inputs.hue, "mousedown", this._onHueMouseDown); + this.observe(this.inputs.slider, "mousedown", this._onHueMouseDown); - Event.observe(document.body, "mouseup", this._onMouseUp); + this.observe(document.body, "mouseup", this._onMouseUp); this.observeMouseMovement(); - Event.observe(this.buttons.Cancel, "click", jQuery.proxy(this.hide,this,this.options['Mode'])); - Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this)); + this.observe(this.buttons.Cancel, "click", jQuery.proxy(this.hide,this,this.options['Mode'])); + this.observe(this.buttons.OK, "click", this.onOKClicked.bind(this)); }, observeMouseMovement : function() { if(!this._observingMouseMove) { - Event.observe(document.body, "mousemove", this._onMouseMove); + this.observe(document.body, "mousemove", this._onMouseMove); this._observingMouseMove = true; } }, @@ -613,21 +631,21 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, { this.isMouseDownOnColor = true; this.onMouseMove(ev); - Event.stop(ev); + ev.stopPropagation(); }, onHueMouseDown : function(ev) { this.isMouseDownOnHue = true; this.onMouseMove(ev); - Event.stop(ev); + ev.stopPropagation(); }, onMouseUp : function(ev) { this.isMouseDownOnColor = false; this.isMouseDownOnHue = false; - Event.stop(ev); + ev.stopPropagation(); }, onMouseMove : function(ev) @@ -636,17 +654,17 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, this.changeSV(ev); if(this.isMouseDownOnHue) this.changeH(ev); - Event.stop(ev); + ev.stopPropagation(); }, changeSV : function(ev) { - var px = Event.pointerX(ev); - var py = Event.pointerY(ev); - var pos = this.inputs.background.cumulativeOffset(); + var px = ev.pageX; + var py = ev.pageY; + var pos = jQuery(this.inputs.background).offset(); - var x = this.truncate(px - pos[0],0,255); - var y = this.truncate(py - pos[1],0,255); + var x = this.truncate(px - pos['left'],0,255); + var y = this.truncate(py - pos['top'],0,255); var s = x/255; @@ -673,9 +691,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, changeH : function(ev) { - var py = Event.pointerY(ev); - var pos = this.inputs.background.cumulativeOffset(); - var y = this.truncate(py - pos[1],0,255); + var py = ev.pageY; + var pos = jQuery(this.inputs.background).offset(); + var y = this.truncate(py - pos['top'],0,255); var h = (255-y)/255; var current_h = this.truncate(this.inputs.H.value,0,360); @@ -750,8 +768,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, var images = Prado.WebUI.TColorPicker.UIImages; - var changeCss = color.isBright() ? 'removeClassName' : 'addClassName'; - Element[changeCss](this.inputs.selector, 'target_white'); + if(color.isBright()) + jQuery(this.inputs.selector).removeClass('target_white'); + else + jQuery(this.inputs.selector).addClass('target_white'); if(update) this.updateSelectors(color); @@ -778,3 +798,32 @@ Object.extend(Prado.WebUI.TColorPicker.prototype, return value < min ? min : value > max ? max : value; } }); + +jQuery.extend(Prado.WebUI.TColorPicker, +{ + palettes: + { + Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"], + ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"], + ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"], + ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"], + ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"], + ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"], + ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]], + + Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/], + ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/], + ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]] + }, + + UIImages : + { + 'button.gif' : 'button.gif', +// 'target_black.gif' : 'target_black.gif', +// 'target_white.gif' : 'target_white.gif', +// 'background.png' : 'background.png' +// 'slider.gif' : 'slider.gif', +// 'hue.gif' : 'hue.gif' + } +}); + -- cgit v1.2.3 From bf6654074ee1d4ed2464b625684496aac479f4d4 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 16:16:22 +0100 Subject: Ported THtmlArea --- framework/Web/Javascripts/packages.php | 2 +- .../Javascripts/source/prado/controls/htmlarea.js | 32 ++++++++++------------ 2 files changed, 15 insertions(+), 19 deletions(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index edd250f1..cc851b15 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -118,13 +118,13 @@ $dependencies = array( 'datepicker' => array('jquery', 'prado', 'datepicker'), 'activedatepicker' => array('jquery', 'prado', 'datepicker', 'ajax', 'activedatepicker'), 'colorpicker' => array('jquery', 'prado', 'colorpicker'), + 'htmlarea' => array('jquery', 'prado', 'htmlarea'), /* 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), 'keyboard' => array('prototype', 'prado', 'keyboard'), 'dragdropextra' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop','dragdropextra'), 'accordion' => array('prototype', 'prado', 'effects', 'accordion'), - 'htmlarea' => array('prototype', 'prado', 'htmlarea'), 'htmlarea4' => array('prototype', 'prado', 'htmlarea4'), 'ratings' => array('prototype', 'prado', 'effects', 'ajax', 'ratings'), 'inlineeditor' => array('prototype', 'prado', 'effects', 'ajax', 'inlineeditor'), diff --git a/framework/Web/Javascripts/source/prado/controls/htmlarea.js b/framework/Web/Javascripts/source/prado/controls/htmlarea.js index a425e697..819e853c 100644 --- a/framework/Web/Javascripts/source/prado/controls/htmlarea.js +++ b/framework/Web/Javascripts/source/prado/controls/htmlarea.js @@ -20,19 +20,13 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control, { this.options = options; - var obj = this; - this.ajaxresponder = { - onComplete : function(request) - { - if(request && (request instanceof Prado.AjaxRequest)) - obj.checkInstance(); - } - }; this.registerAjaxHook(); this.registerInstance(); }, + + registerInstance: function() { if (typeof tinyMCE_GZ == 'undefined') @@ -74,7 +68,7 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control, Prado.WebUI.THtmlArea.tinyMCELoadState = 255; var wrapper; while(Prado.WebUI.THtmlArea.pendingRegistrations.length>0) - if (wrapper = Prado.Registry.get(Prado.WebUI.THtmlArea.pendingRegistrations.pop())) + if (wrapper = Prado.Registry[Prado.WebUI.THtmlArea.pendingRegistrations.pop()]) wrapper.initInstance(); }, @@ -103,17 +97,19 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control, registerAjaxHook: function() { - if (typeof(Ajax)!="undefined") - if (typeof(Ajax.Responders)!="undefined") - Ajax.Responders.register(this.ajaxresponder); + jQuery(document).on('ajaxComplete', this.ajaxresponder.bind(this)); }, deRegisterAjaxHook: function() { - if (typeof(Ajax)!="undefined") - if (typeof(Ajax.Responders)!="undefined") - Ajax.Responders.unregister(this.ajaxresponder); + jQuery(document).off('ajaxComplete', this.ajaxresponder.bind(this)); + }, + + ajaxresponder: function(request) + { + if(request && (request instanceof Prado.AjaxRequest)) + obj.checkInstance(); }, onDone: function() @@ -126,9 +122,9 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control, tinyMCE.execCommand('mceFocus', false, this.ID); // when removed, tinyMCE restores its content to the textarea. If the textarea content has been // updated in this same callback, it will be overwritten with the old content. Workaround this. - var curtext = $(this.ID).value; + var curtext = $('#'+this.ID).get(0).value; tinyMCE.execCommand('mceRemoveControl', false, this.ID); - $(this.ID).value = curtext; + $('#'+this.ID).get(0).value = curtext; } catch (e) { @@ -143,7 +139,7 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control, } }); -Object.extend(Prado.WebUI.THtmlArea, +jQuery.extend(Prado.WebUI.THtmlArea, { pendingRegistrations : [], tinyMCELoadState : 0 -- cgit v1.2.3 From 61fa078e7e2663876a0384cb61b1ee5a990b2d24 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 16:17:37 +0100 Subject: Ported THtmlArea4 --- framework/Web/Javascripts/packages.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index cc851b15..6c4ba271 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -119,13 +119,13 @@ $dependencies = array( 'activedatepicker' => array('jquery', 'prado', 'datepicker', 'ajax', 'activedatepicker'), 'colorpicker' => array('jquery', 'prado', 'colorpicker'), 'htmlarea' => array('jquery', 'prado', 'htmlarea'), + 'htmlarea4' => array('jquery', 'prado', 'htmlarea4'), /* 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), 'keyboard' => array('prototype', 'prado', 'keyboard'), 'dragdropextra' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop','dragdropextra'), 'accordion' => array('prototype', 'prado', 'effects', 'accordion'), - 'htmlarea4' => array('prototype', 'prado', 'htmlarea4'), 'ratings' => array('prototype', 'prado', 'effects', 'ajax', 'ratings'), 'inlineeditor' => array('prototype', 'prado', 'effects', 'ajax', 'inlineeditor'), */ -- cgit v1.2.3 From a9db70bc79a192bba2d3e680af8d8e216b92668d Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 16:18:53 +0100 Subject: Ported TKeyboard --- framework/Web/Javascripts/packages.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index 6c4ba271..bebb9394 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -120,10 +120,10 @@ $dependencies = array( 'colorpicker' => array('jquery', 'prado', 'colorpicker'), 'htmlarea' => array('jquery', 'prado', 'htmlarea'), 'htmlarea4' => array('jquery', 'prado', 'htmlarea4'), + 'keyboard' => array('jquery', 'prado', 'keyboard'), /* 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), 'slider' => array('prototype', 'prado', 'slider'), - 'keyboard' => array('prototype', 'prado', 'keyboard'), 'dragdropextra' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop','dragdropextra'), 'accordion' => array('prototype', 'prado', 'effects', 'accordion'), 'ratings' => array('prototype', 'prado', 'effects', 'ajax', 'ratings'), -- cgit v1.2.3 From 0dfd57339fe3c92103767b556c9b20002323df56 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Thu, 21 Nov 2013 17:18:23 +0100 Subject: Ported TSlider --- .../pages/Controls/Samples/TSlider/Home.page | 8 +- framework/Web/Javascripts/packages.php | 2 +- .../Javascripts/source/prado/controls/slider.js | 106 ++++++++++----------- framework/Web/UI/WebControls/TSlider.php | 2 +- 4 files changed, 58 insertions(+), 60 deletions(-) (limited to 'framework') diff --git a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page index bfbbe8e3..6c79fae4 100755 --- a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page +++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page @@ -16,7 +16,7 @@ Horizontal slider from -50 to 50, Javascript 'onSlide' handler, ServerSide 'onS - $('slider2value').innerHTML = value; + $('#slider2value').get(0).innerHTML = value; Value : <%=$this->slider2->value%> @@ -28,14 +28,14 @@ Vertical slider from 0 to 1, Javascript 'onSlide' handler, ServerSide 'onSliderC - $('slider3value').innerHTML = value; + $('#slider3value').get(0).innerHTML = value; Value : <%=$this->slider3->value%> - - + + \ No newline at end of file diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php index bebb9394..bc3bae1e 100644 --- a/framework/Web/Javascripts/packages.php +++ b/framework/Web/Javascripts/packages.php @@ -121,9 +121,9 @@ $dependencies = array( 'htmlarea' => array('jquery', 'prado', 'htmlarea'), 'htmlarea4' => array('jquery', 'prado', 'htmlarea4'), 'keyboard' => array('jquery', 'prado', 'keyboard'), + 'slider' => array('jquery', 'prado', 'slider'), /* 'dragdrop' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'), - 'slider' => array('prototype', 'prado', 'slider'), 'dragdropextra' => array('prototype', 'prado', 'effects', 'ajax', 'dragdrop','dragdropextra'), 'accordion' => array('prototype', 'prado', 'effects', 'accordion'), 'ratings' => array('prototype', 'prado', 'effects', 'ajax', 'ratings'), diff --git a/framework/Web/Javascripts/source/prado/controls/slider.js b/framework/Web/Javascripts/source/prado/controls/slider.js index 2e26ee51..28d7d4ac 100644 --- a/framework/Web/Javascripts/source/prado/controls/slider.js +++ b/framework/Web/Javascripts/source/prado/controls/slider.js @@ -3,21 +3,21 @@ * This clas is mainly based on Scriptaculous Slider control (http://script.aculo.us) */ -Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, +Prado.WebUI.TSlider = jQuery.klass(Prado.WebUI.PostBackControl, { onInit : function (options) { var slider = this; this.options=options || {}; - this.track = $(options.ID+'_track'); - this.handle =$(options.ID+'_handle'); - this.progress = $(options.ID+'_progress'); + this.track = $('#'+options.ID+'_track').get(0); + this.handle =$('#'+options.ID+'_handle').get(0); + this.progress = $('#'+options.ID+'_progress').get(0); this.axis = this.options.axis || 'horizontal'; - this.range = this.options.range || $R(0,1); + this.range = this.options.range || [0, 1]; this.value = 0; - this.maximum = this.options.maximum || this.range.end; - this.minimum = this.options.minimum || this.range.start; - this.hiddenField=$(this.options.ID+'_1'); + this.maximum = this.options.maximum || this.range[1]; + this.minimum = this.options.minimum || this.range[0]; + this.hiddenField=$('#'+this.options.ID+'_1').get(0); // Will be used to align the handle onto the track, if necessary this.alignX = parseInt(this.options.alignX || - this.track.offsetLeft); @@ -37,19 +37,18 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, if(this.options.disabled) this.setDisabled(); // Allowed values array - this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false; + this.allowedValues = this.options.values ? this.options.values.sort() : false; if(this.allowedValues) { - this.minimum = this.allowedValues.min(); - this.maximum = this.allowedValues.max(); + this.minimum = Math.min.apply( Math, this.allowedValues ); + this.maximum = Math.max.apply( Math, this.allowedValues ); } - this.eventMouseDown = this.startDrag.bindAsEventListener(this); - this.eventMouseUp = this.endDrag.bindAsEventListener(this); - this.eventMouseMove = this.update.bindAsEventListener(this); + this.eventMouseDown = this.startDrag.bind(this); + this.eventMouseUp = this.endDrag.bind(this); + this.eventMouseMove = this.update.bind(this); // Initialize handle this.setValue(parseFloat(slider.options.sliderValue)); - Element.makePositioned(this.handle); // fix IE this.observe (this.handle, "mousedown", this.eventMouseDown); this.observe (this.track, "mousedown", this.eventMouseDown); @@ -60,10 +59,13 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, this.initialized=true; - if(this.options['AutoPostBack']==true) - this.observe(this.hiddenField, "change", Prado.PostBack.bindEvent(this,options)); - + this.observe(this.hiddenField, "change", jQuery.proxy(this.doPostback,this,options)); + }, + + doPostback : function(options, event) + { + new Prado.PostBack(options, event); }, setDisabled: function(){ @@ -74,12 +76,14 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, }, getNearestValue: function(value){ if(this.allowedValues){ - if(value >= this.allowedValues.max()) return(this.allowedValues.max()); - if(value <= this.allowedValues.min()) return(this.allowedValues.min()); + var max = Math.max.apply( Math, this.allowedValues ); + var min = Math.min.apply( Math, this.allowedValues ); + if(value >= max) return(max); + if(value <= min) return(min); var offset = Math.abs(this.allowedValues[0] - value); var newValue = this.allowedValues[0]; - this.allowedValues.each( function(v) { + jQuery.each(this.allowedValues, function(idx, v) { var currentOffset = Math.abs(v - value); if(currentOffset <= offset){ newValue = v; @@ -88,8 +92,8 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, }); return newValue; } - if(value > this.range.end) return this.range.end; - if(value < this.range.start) return this.range.start; + if(value > this.range[1]) return this.range[1]; + if(value < this.range[0]) return this.range[0]; return value; }, @@ -113,19 +117,13 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, translateToPx: function(value) { return Math.round( - ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * (value - this.range.start)) + "px"; + ((this.trackLength-this.handleLength)/(this.range[1]-this.range[0])) * (value - this.range[0])) + "px"; }, translateToValue: function(offset) { - return ((offset/(this.trackLength-this.handleLength) * (this.range.end-this.range.start)) + this.range.start); + return ((offset/(this.trackLength-this.handleLength) * (this.range[1]-this.range[0])) + this.range[0]); }, - - getRange: function(range) { - var v = this.values.sortBy(Prototype.K); - range = range || 0; - return $R(v[range],v[range+1]); - }, - + minimumOffset: function(){ return(this.isVertical() ? this.alignY : this.alignX); }, @@ -144,35 +142,36 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, updateStyles: function() { if (this.active) - Element.addClassName(this.handle, 'selected'); + jQuery(this.handle).addClass('selected'); else - Element.removeClassName(this.handle, 'selected'); + jQuery(this.handle).removeClass('selected'); }, startDrag: function(event) { - if(Event.isLeftClick(event)) { + if (event.which === 1) { + // left click if(!this.disabled){ this.active = true; - var handle = Event.element(event); - var pointer = [Event.pointerX(event), Event.pointerY(event)]; + var handle = event.target; + var pointer = [event.pageX, event.pageY]; var track = handle; if(track==this.track) { - var offsets = this.track.cumulativeOffset(); + var offsets = jQuery(this.track).offset(); this.event = event; this.setValue(this.translateToValue( - (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2) + (this.isVertical() ? pointer[1]-offsets['top'] : pointer[0]-offsets['left'])-(this.handleLength/2) )); - var offsets = this.handle.cumulativeOffset(); - this.offsetX = (pointer[0] - offsets[0]); - this.offsetY = (pointer[1] - offsets[1]); + var offsets = jQuery(this.handle).offset(); + this.offsetX = (pointer[0] - offsets['left']); + this.offsetY = (pointer[1] - offsets['top']); } else { this.updateStyles(); - var offsets = this.handle.cumulativeOffset(); - this.offsetX = (pointer[0] - offsets[0]); - this.offsetY = (pointer[1] - offsets[1]); + var offsets = jQuery(this.handle).offset(); + this.offsetX = (pointer[0] - offsets['left']); + this.offsetY = (pointer[1] - offsets['top']); } } - Event.stop(event); + event.stopPropagation(); } }, @@ -180,16 +179,15 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, if(this.active) { if(!this.dragging) this.dragging = true; this.draw(event); - if(Prototype.Browser.WebKit) window.scrollBy(0,0); - Event.stop(event); + event.stopPropagation(); } }, draw: function(event) { - var pointer = [Event.pointerX(event), Event.pointerY(event)]; - var offsets = this.track.cumulativeOffset(); - pointer[0] -= this.offsetX + offsets[0]; - pointer[1] -= this.offsetY + offsets[1]; + var pointer = [event.pageX, event.pageY]; + var offsets = jQuery(this.track).offset(); + pointer[0] -= this.offsetX + offsets['left']; + pointer[1] -= this.offsetY + offsets['top']; this.event = event; this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] )); if(this.initialized && this.options.onSlide) @@ -199,7 +197,7 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, endDrag: function(event) { if(this.active && this.dragging) { this.finishDrag(event, true); - Event.stop(event); + event.stopPropagation(); } this.active = false; this.dragging = false; @@ -219,7 +217,7 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl, this.event = null; if (this.options['AutoPostBack']==true) { - Event.fireEvent(this.hiddenField,"change"); + jQuery(this.hiddenField).trigger("change"); } } diff --git a/framework/Web/UI/WebControls/TSlider.php b/framework/Web/UI/WebControls/TSlider.php index dcf34bfc..a07c995f 100644 --- a/framework/Web/UI/WebControls/TSlider.php +++ b/framework/Web/UI/WebControls/TSlider.php @@ -457,7 +457,7 @@ class TSlider extends TWebControl implements IPostBackDataHandler, IDataRenderer $options['axis'] = strtolower($this->getDirection()); $options['maximum'] = $maxValue; $options['minimum'] = $minValue; - $options['range'] = TJavascript::quoteJsLiteral('$R('.$minValue.",".$maxValue.")"); + $options['range'] = array($minValue, $maxValue); $options['sliderValue'] = $this->getValue(); $options['disabled'] = !$this->getEnabled(); $values=$this->getValues(); -- cgit v1.2.3