[richfaces-svn-commits] JBoss Rich Faces SVN: r17635 - in root: ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script and 1 other directory.

Thursday, 17 June 2010


Author: pyaschenko
Date: 2010-06-17 06:59:10 -0400 (Thu, 17 Jun 2010)
New Revision: 17635

Modified:
   root/core/trunk/impl/src/main/resources/META-INF/resources/richfaces-base-component.js
  
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html
  
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js
Log:
autocomplete prototype

Modified:
root/core/trunk/impl/src/main/resources/META-INF/resources/richfaces-base-component.js
===================================================================
---
root/core/trunk/impl/src/main/resources/META-INF/resources/richfaces-base-component.js	2010-06-17
10:39:26 UTC (rev 17634)
+++
root/core/trunk/impl/src/main/resources/META-INF/resources/richfaces-base-component.js	2010-06-17
10:59:10 UTC (rev 17635)
@@ -151,7 +151,6 @@
              * @name RichFaces.BaseComponent#destroy
              *
              * */
-			// TODO: add to article
 			destroy: function() {
 			}
 		};

Modified:
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html
===================================================================
---
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html	2010-06-17
10:39:26 UTC (rev 17634)
+++
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html	2010-06-17
10:59:10 UTC (rev 17635)
@@ -39,9 +39,10 @@
 </head>
 
 <body style="margin : 30px">
+<form>
+<div style="height:300px; width:300px; overflow:auto;">
+Text block text block text block text block text block text block text block text block 
 
-
-Text block text block text block text block text block text block text block text block 
 <div id="myCombo" class=" cb_field_width cb_field">
 	<div style=" position : relative; overflow : hidden; text-align : left;
padding-right : 21px;">
 		<input id="myComboInput" type="Text" class="cb_font
cb_input">
@@ -73,7 +74,9 @@
 	</script>
 </div>
 &nbsp;text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block 
+text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block text block text block text block
text block text block text block text block text block 
+</div>
+</form>
 
-
 </body>
 </html>

Modified:
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js
===================================================================
---
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js	2010-06-17
10:39:26 UTC (rev 17634)
+++
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js	2010-06-17
10:59:10 UTC (rev 17635)
@@ -1,3 +1,25 @@
+// TODO: move this extend to RichFaces.Event for exapmle
+$.extend(RichFaces.Event, {
+	bindScrollEventHandlers: function(element, handler, component) {
+		var elements = [];
+		element = RichFaces.getDomElement(element).parentNode;
+		while (element && element!=window.document.body)
+		{
+			if (element.offsetWidth!=element.scrollWidth ||
element.offsetHeight!=element.scrollHeight)
+			{
+				elements.push(element);
+				RichFaces.Event.bind(element, "scroll"+component.getNamespace(), handler,
component);
+			}
+			element = element.parentNode;
+		}
+		return elements;
+	},
+	unbindScrollEventHandlers: function(elements, component) {
+		RichFaces.Event.unbind(elements, component.getNamespace());
+		elements = null;
+	}
+});
+
 (function ($, rf) {
 
 	rf.ui = rf.ui || {}; 
@@ -9,8 +31,7 @@
 		this.componentId = componentId;
 		this.fieldId = fieldId;
 		this.options = $.extend({}, defaultOptions, options);
-		this.hasFocus = 0;
-		this.namespace = rf.Event.createNamespace(this.name, this.componentId);
+		this.namespace = "."+rf.Event.createNamespace(this.name, this.componentId);
 		bindEventHandlers.call(this);
 	};
 	
@@ -26,34 +47,151 @@
 	};
 	
 	var KEYS = {
+			BACKSPACE: 8,	
+			TAB: 9,
+			RETURN: 13,
+			ESC: 27,
+			PAGEUP: 33,
+			PAGEDOWN: 34,
+			UP: 38,
+			DOWN: 40,
+			DEL: 46			
 	};
 	
 	var bindEventHandlers = function() {
 		if (this.options.buttonId) {
-			rf.Event.bindById(this.options.buttonId, "click."+this.namespace,
onButtonShow, this);
-			var inputEventHandlers = {};
-			inputEventHandlers["focus."+this.namespace] = onFocus;
-			rf.Event.bindById(this.fieldId, inputEventHandlers, this);
+			rf.Event.bindById(this.options.buttonId, "click"+this.namespace,
onButtonShow, this);
 		}
+		
+		var inputEventHandlers = {};
+		inputEventHandlers["focus"+this.namespace] = onFocus;
+		inputEventHandlers["blur"+this.namespace] = onBlur;
+		inputEventHandlers["click"+this.namespace] = onClick;
+		inputEventHandlers[($.browser.opera ? "keypress" :
"keydown")+this.namespace] = onKeyDown;
+		rf.Event.bindById(this.fieldId, inputEventHandlers, this);
+		
+		inputEventHandlers = {};
+		inputEventHandlers["click"+this.namespace] = onSelectClick;
+		inputEventHandlers["mousedown"+this.namespace] = onSelectMouseDown;
+		inputEventHandlers["mouseup"+this.namespace] = onSelectMouseUp;
+		rf.Event.bindById(this.componentId, inputEventHandlers, this);
 	}
 	
+	var onSelectClick = function () {
+	};
+	var onSelectMouseDown = function () {
+		this.isMouseDown = true;
+		console.log("onMouseDown");
+	};
+	var onSelectMouseUp = function () {
+		this.isMouseDown = false;
+		console.log("onMouseUp");
+	};
+	
 	var onButtonShow = function (event) {
+		console.log("onButtonShow - "+this.timeoutId);
+		if (this.timeoutId) {
+			window.clearTimeout(this.timeoutId);
+			this.timeoutId = null;
+			rf.getDomElement(this.fieldId).focus();
+		}
+		
 		if (this.isVisible) {
 			this.hide(event);
 		} else {
 			this.show(event);
+			rf.getDomElement(this.fieldId).focus();
 		}
-	}
+	};
 	
-	var onHide = function (event) {
-		$(rf.getDomElement(this.componentId)).hide();
-		this.isVisible = false;
+	var onFocus = function (event) {
+	};
+	
+	var onBlur = function (event) {
+		console.log("onBlur");
+		if (this.isMouseDown) {
+			rf.getDomElement(this.fieldId).focus();
+			console.log("onBlur and focus");
+		} else if (this.isVisible/*&& checkOnBlur.call(this, event)*/) {
+			var _this = this;
+			this.timeoutId = window.setTimeout(function(){_this.hide();}, 200);
+		}
+	};
+	
+	var onClick = function (event) {
+	};
+	
+	var onChange = function () {
+		if (!this.isVisible) {
+			this.show();
+		}
 	}
 	
-	var onFocus = function (event) {
-		alert("aaa");
-		this.destroy();
-		this.hasFocus ++;
+	/*var checkOnBlur = function (event) {
+		var e = $(rf.getDomElement(this.options.buttonId));
+		return (e == event.target) || $(event.target).closest(e); 
+	};*/
+	
+	var selectPrevItem = function () {
+	};
+	var selectNextItem = function () {
+	};
+	var selectPageUp = function () {
+	};
+	var selectPageDown = function () {
+	};
+	
+	var onKeyDown = function (event) {
+		switch(event.which) {
+			case KEYS.UP:
+				event.preventDefault();
+				if (this.isVisible) {
+					selectPrevItem();
+				}
+				break;
+			case KEYS.DOWN:
+				event.preventDefault();
+				if (this.isVisible) {
+					selectNextItem();
+				}
+				break;
+			case KEYS.PAGEUP:
+				event.preventDefault();
+				if (this.isVisible) {
+					selectPageUp();
+				}
+				break;
+			case KEYS.PAGEDOWN:
+				event.preventDefault();
+				if (this.isVisible) {
+					selectPageDown();
+				}
+				break;
+			case KEYS.TAB:
+			case KEYS.RETURN:
+				event.preventDefault();
+				/*if( selectCurrent() ) {
+					event.preventDefault();
+					//TODO: bind form submit event handler to cancel form submit under the opera
+					cancelSubmit = true;
+					return false;
+				}*/
+				this.hide();
+				break;
+			case KEYS.ESC:
+				this.hide();
+				break;	
+			default:
+				if (!this.options.selectOnly) {
+					if (this.options.changeDelay) {
+						var _this = this;
+						this.changeTimerId = window.setTimeout(function(){onChange.call(_this);},
this.options.changeDelay)
+					} else {
+						onChange.call(this);
+					}
+				}
+				break;
+		}
 	}
 
 	// Add new properties and methods
@@ -63,12 +201,20 @@
  			show: function (event) {
 				$(rf.getDomElement(this.componentId)).show();
 				this.isVisible = true;
+			    this.scrollElements = rf.Event.bindScrollEventHandlers(this.componentId,
this.hide, this);
 			},
- 			hide: onHide,
+ 			hide: function (event) {
+				rf.Event.unbindScrollEventHandlers(this.scrollElements, this);
+ 				$(rf.getDomElement(this.componentId)).hide();
+ 				this.isVisible = false;
+ 			},
  			destroy: function () {
- 				rf.Event.unbindById(this.options.buttonId, "."+this.namespace);
- 				rf.Event.unbindById(this.fieldId, "."+this.namespace);
+ 				rf.Event.unbindById(this.options.buttonId, this.namespace);
+ 				rf.Event.unbindById(this.fieldId, this.namespace);
  				$super.destroy.call(this);
+ 			},
+ 			getNamespace: function () {
+ 				return this.namespace;
  			}
 		};
 	})());


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

2009

2008

2007

[richfaces-svn-commits] JBoss Rich Faces SVN: r17635 - in root: ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script and 1 other directory.