9:22 a.m.
Author: pyaschenko
Date: 2010-06-10 10:22:51 -0400 (Thu, 10 Jun 2010)
New Revision: 17595
Added:
root/ui-sandbox/inputs/
root/ui-sandbox/inputs/branches/
root/ui-sandbox/inputs/tags/
root/ui-sandbox/inputs/trunk/
root/ui-sandbox/inputs/trunk/autocomplete/
root/ui-sandbox/inputs/trunk/autocomplete/src/
root/ui-sandbox/inputs/trunk/autocomplete/src/main/
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/
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
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/richfaces-selection.js
Log:
autocomplete prototype draft
Added:
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
(rev 0)
+++
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/1.html 2010-06-10
14:22:51 UTC (rev 17595)
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
+
+<html>
+<head>
+ <title>Untitled</title>
+ <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
+ <title>Test Page</title>
+ <script type="text/javascript"
src="..\..\..\..\..\..\..\..\..\..\core\trunk\impl\src\main\resources\META-INF\resources\jquery.js
"></script>
+ <script type="text/javascript"
src="..\..\..\..\..\..\..\..\..\..\core\trunk\impl\src\main\resources\META-INF\resources\richfaces.js
"></script>
+ <script type="text/javascript"
src="..\..\..\..\..\..\..\..\..\..\core\trunk\impl\src\main\resources\META-INF\resources\richfaces-event.js
"></script>
+ <script type="text/javascript"
src="..\..\..\..\..\..\..\..\..\..\core\trunk\impl\src\main\resources\META-INF\resources\richfaces-base-component.js
"></script>
+ <script type="text/javascript"
src="richfaces-selection.js"></script>
+ <script type="text/javascript"
src="autocomplete.js"></script>
+ <style>
+ * {font-size : 11px; font-family : verdana; color : #000000}
+
+ .cb_field_width{ width : 150px;}
+ .cb_list_width{ width : 250px;}
+ .cb_list_height{ height : 100px;}
+
+ .cb_font{color : #000000/*generalTextColor*/}
+ .cb_input {border : 0px; background : none; width : 100%;}
+
+ .cb_field{ position : inline-block; border : 1px solid #A6A6A6/*panelBorderColor*/;
display : inline-block; background : url(images/bg_field.png) top left repeat-x/*gradient
- from additionalBackgroundColor to controlBackgroundColor, background-color -
controlBackgroundColor*/; }
+
+ .cb_button{ background : url(images/bg_btn.png) top left repeat-x #C0D1E7/*gradient -
from headerGradientColor to headerBackgroundColor, background-color -
headerBackgroundColor*/; text-align : center; border-left : 1px solid
#A6A6A6/*panelBorderColor*/; width : 15px; position : absolute; top : 0px; right : 0px;
height : 200px; padding-top : 1px }
+ .cb_button_arrow{ background : url(images/down.gif) center no-repeat; cursor :
pointer;}
+
+ .cb_list_cord{ position : relative; font-size : 0px;display : none}/*DDL is
hidden!!!!!*/
+ .cb_list_position{ position : absolute; top: 0px; left: -1px; }
+ .cb_list_decoration{ border : 1px solid #A6A6A6 /*panelBorderColor*/; padding : 0px;
background : #FFFFFF; /*tableBackgroundColor*/}
+ .cb_list_scroll{ overflow : auto; overflow-x : hidden;}
+ .cb_option{ padding : 2px; white-space : nowrap; cursor : default;}
+ .cb_select{ padding : 1px; width : 100%; background-color: #DFE8F6; border : 1px dotted
#a3bae9;/*generalTextColor*/}
+
+ .cb_list_shadow{ position : absolute; width : 260px; height : 109px; margin-left : -4px;
margin-top : -2px;}
+
+ </style>
+</head>
+
+<body style="margin : 30px">
+
+
+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">
+ <div id='myComboButton' class="cb_button">
+ <img src="images/down.gif" width="15" height="15"
alt="" border="0">
+ </div>
+ </div>
+
+ <div id="myComboList" class="cb_list_cord">
+ <img src="images/bg_shadow.png" class="cb_list_shadow">
+ <div class="cb_list_position cb_list_width">
+ <div class="cb_list_decoration">
+ <div class="cb_list_scroll cb_list_height">
+ <div class="cb_option cb_font">Option 1</div>
+ <div class="cb_option cb_font">Option 2</div>
+ <div class="cb_option cb_font">Option 3</div>
+ <div class="cb_option cb_font">Option 4</div>
+ <div class="cb_option cb_font cb_select">Option 6</div>
+ <div class="cb_option cb_font">Option 7</div>
+ <div class="cb_option cb_font">Option 8</div>
+ <div class="cb_option cb_font">Option 9</div>
+ <div class="cb_option cb_font">Option 0</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script type="text/javascript">
+ new RichFaces.ui.AutoComplete("myComboList", "myComboInput",
{buttonId:'myComboButton'});
+ </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
+
+
+</body>
+</html>
Added:
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
(rev 0)
+++
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/autocomplete.js 2010-06-10
14:22:51 UTC (rev 17595)
@@ -0,0 +1,75 @@
+(function ($, rf) {
+
+ rf.ui = rf.ui || {};
+ // Constructor definition
+ rf.ui.AutoComplete = function(componentId, fieldId, options) {
+ // call constructor of parent class
+ $super.constructor.call(this, componentId);
+ $p.attachToDom(componentId);
+ this.componentId = componentId;
+ this.fieldId = fieldId;
+ this.options = $.extend({}, defaultOptions, options);
+ this.hasFocus = 0;
+ this.namespace = rf.Event.createNamespace(this.name, this.componentId);
+ bindEventHandlers.call(this);
+ };
+
+ var $p ={};
+
+ // Extend component class and add protected methods from parent class to our container
+ $p = rf.BaseComponent.extend(rf.BaseComponent, rf.ui.AutoComplete, $p);
+
+ // define super class link
+ var $super = rf.ui.AutoComplete.$super;
+
+ var defaultOptions = {
+ };
+
+ var KEYS = {
+ };
+
+ 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);
+ }
+ }
+
+ var onButtonShow = function (event) {
+ if (this.isVisible) {
+ this.hide(event);
+ } else {
+ this.show(event);
+ }
+ }
+
+ var onHide = function (event) {
+ $(rf.getDomElement(this.componentId)).hide();
+ this.isVisible = false;
+ }
+
+ var onFocus = function (event) {
+ alert("aaa");
+ this.destroy();
+ this.hasFocus ++;
+ }
+
+ // Add new properties and methods
+ $.extend(rf.ui.AutoComplete.prototype, (function () {
+ return {
+ name:"AutoComplete",
+ show: function (event) {
+ $(rf.getDomElement(this.componentId)).show();
+ this.isVisible = true;
+ },
+ hide: onHide,
+ destroy: function () {
+ rf.Event.unbindById(this.options.buttonId, "."+this.namespace);
+ rf.Event.unbindById(this.fieldId, "."+this.namespace);
+ $super.destroy.call(this);
+ }
+ };
+ })());
+})(jQuery, RichFaces);
\ No newline at end of file
Added:
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/richfaces-selection.js
===================================================================
---
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/richfaces-selection.js
(rev 0)
+++
root/ui-sandbox/inputs/trunk/autocomplete/src/main/resources/META-INF/resources/script/richfaces-selection.js 2010-06-10
14:22:51 UTC (rev 17595)
@@ -0,0 +1,45 @@
+(function (richfaces) {
+
+ richfaces.Selection = richfaces.Selection || {};
+
+ richfaces.Selection.set = function (field, start, end) {
+ if(field.setSelectionRange) {
+ field.focus();
+ field.setSelectionRange(start, end);
+ } else if (field.createTextRange){
+ var range = field.createTextRange();
+ range.collapse(true);
+ range.moveEnd('character', pos);
+ range.moveStart('character', pos);
+ range.select();
+ }
+ }
+
+ richfaces.Selection.getStart = function(field)
+ {
+ if (field.setSelectionRange) {
+ return field.selectionStart;
+ } else if (document.selection && document.selection.createRange) {
+ var r = document.selection.createRange().duplicate();
+ r.moveEnd('character', field.value.length);
+ if (r.text == '') return field.value.length;
+ return field.value.lastIndexOf(r.text);
+ }
+ }
+
+ richfaces.Selection.getEnd = function(field)
+ {
+ if (field.setSelectionRange) {
+ return field.selectionEnd;
+ } else if (document.selection && document.selection.createRange) {
+ var r = document.selection.createRange().duplicate();
+ r.moveStart('character', -field.value.length);
+ return r.text.length;
+ }
+ }
+
+ richfaces.Selection.setCaretTo = function (field, pos)
+ {
+ richfaces.Selection.set(field, pos, pos);
+ }
+})(window.RichFaces || (window.RichFaces={}));
\ No newline at end of file