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>
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;
}
};
})());