Develop and Download Open Source Software

SimpleLightWeb

Browse Subversion Repository

/[simplelightweb]/js/input_assist.js

Annotation of /js/input_assist.js

Parent Directory Parent Directory | Revision Log Revision Log

Revision 41 - (hide annotations) (download) (as text)
Fri Jan 22 14:20:16 2010 UTC (14 years, 4 months ago) by berupon
File MIME type: application/x-javascript
File size: 7473 byte(s) 
ポップアップをプログラムで作成するのではなくCSS指定で最初から画面に隠して用意するように変更。
その方がプログラムが単純になる。

伝票編集画面から事務所やユーザーの一覧表示を開けるようにして、
そこで選択したら編集画面に選択したのが反映されるように機能追加。
併せて入力補助機能の修正。

HTMLのコードが横に長いと見難い場合があるのでインデント。
（縦に長くなってしまうけれど）
1 berupon 4
2 berupon 6 // Copyright (c) 2009 Katsuhisa Yuasa <berupon [at] gmail.com>
3     // License http://www.opensource.org/licenses/mit-license.html
4 berupon 4 //
5     // Inspired by suggest.js http://www.enjoyxstudy.com/javascript/suggest/
6     //
7    
8     InputAssist = function (elem) {
9     this.init.apply(this, arguments);
10     };
11    
12     InputAssist.prototype = {
13    
14     init : function (elem) {
15     this.elem = elem;
16     this.listElem = null;
17     this.oldValue = elem.value;
18     this.timer = null;
19     this.interval = 300;
20     this.listClassName = "assist_list";
21     this.listItemClassName = "item";
22     this.activeListItemClassName = "active";
23     this.listActiveIndex = -1;
24     this.dataList = new Array();
25     this.matchedDataList = new Array();
26    
27     elem.observe("focus", this.onFocus.bind(this));
28     elem.observe("blur", this.onBlur.bind(this));
29    
30     elem.observe("keydown", this.onKeyDown.bind(this));
31     var keyevent = (Prototype.Browser.Opera || Prototype.Browser.Gecko) ? 'keypress' : 'keyup';
32     elem.observe(keyevent, this.onKeyUp.bind(this));
33     document.observe('mousemove', this.onMouseMove.bind(this));
34     },
35    
36     onFocus : function (e) {
37     var elem = Event.element(e);
38     this.createListElem();
39     },
40    
41     onBlur : function (e) {
42 berupon 41 this.setList();
43 berupon 17 var matched = false;
44     if (this.matchedDataList.length) {
45     for (var i=0; i<this.matchedDataList.length; ++i) {
46     if (this.matchData(this.matchedDataList[i]) == 1) {
47     matched = true;
48     this.selectData(i);
49     break;
50     }
51     }
52     }
53     if (!matched) {
54     this.setData(null);
55     }
56 berupon 4 this.hideList();
57     if (this.timer) {
58     clearTimeout(this.timer);
59     this.timer = null;
60     }
61     },
62    
63     onKeyDown : function (e) {
64     switch (e.keyCode) {
65     case 9: // tab
66     if (1
67     && this.matchedDataList.length
68     && this.listActiveIndex >= 0
69     && this.listActiveIndex < this.matchedDataList.length
70     ) {
71     this.selectData(this.listActiveIndex);
72     break;
73     }
74     case 13: // enter
75     if (1
76     && this.matchedDataList.length
77     && this.listActiveIndex >= 0
78     && this.listActiveIndex < this.matchedDataList.length
79     ) {
80     this.selectData(this.listActiveIndex, true);
81     Event.stop(e);
82     break;
83     }
84     break;
85     }
86     },
87    
88     selectData : function (idx, bFocus) {
89     setTimeout(
90     function () {
91     this.hideList();
92     this.setData(this.matchedDataList[idx]);
93     this.oldValue = this.elem.value;
94     this.listActiveIndex = -1;
95     if (bFocus) {
96     this.elem.focus();
97     }
98     }.bind(this),
99     10
100     );
101     },
102    
103     onKeyUp : function (e) {
104     if (this.timer) {
105     switch (e.keyCode) {
106     case 16: // shift
107     case 17: // ctrl
108     case 18: // alt
109     break;
110     default:
111     clearTimeout(this.timer);
112     }
113     }
114     switch (e.keyCode) {
115     case 37: // left
116     break;
117     case 38: // up
118     this.shiftItemFocus(-1);
119     break;
120     case 39: // right
121     break;
122     case 40: // down
123     if (e.altKey) {
124     this.oldValue = "";
125     this.onTimer();
126     }else {
127     this.shiftItemFocus(1);
128     }
129     break;
130     case 27: // esc
131     this.hideList();
132     break;
133     case 13: // enter
134     case 9: // tab
135     case 16: // shift
136     case 17: // ctrl
137     case 18: // alt
138     break;
139     case 8: // backspace
140     case 46: // delete
141     if (this.elem.value == "") {
142     this.onTimer();
143     break;
144     }
145     default:
146     if (!e.altKey && !e.ctrlKey) {
147     if (this.oldValue == "") {
148     this.timer = setTimeout(this.onTimer.bind(this), this.interval/10);
149     }else {
150     this.timer = setTimeout(this.onTimer.bind(this), this.interval);
151     }
152     }
153     break;
154     }
155     },
156    
157     onMouseMove : function (e) {
158     if (!this.listElem) {
159     return;
160     }
161     var nodes = this.listElem.childNodes;
162     if (nodes.length == 0) {
163     return;
164     }
165     var x = Event.pointerX(e);
166     var y = Event.pointerY(e);
167     var listItems = this.listElem.childNodes;
168     for (var i=0; i<listItems.length; ++i) {
169     var elem = listItems[i];
170     if (Position.within(elem, x, y)) {
171     this.moveItemFocus(i);
172     break;
173     }
174     }
175    
176     },
177    
178     shiftItemFocus : function (shift) {
179     if (!Element.visible(this.listElem)) {
180     return;
181     }
182     var nodes = this.listElem.childNodes;
183     if (nodes.length == 0) {
184     return;
185     }
186     var newActiveIndex = -1;
187     if (this.listActiveIndex == -1) {
188     if (shift < 0) {
189     newActiveIndex = nodes.length - 1;
190     }else {
191     newActiveIndex = 0;
192     }
193     }else {
194     newActiveIndex = this.listActiveIndex + shift;
195     if (newActiveIndex >= nodes.length) {
196     newActiveIndex = -1;
197     }
198     }
199     this.moveItemFocus(newActiveIndex);
200     },
201    
202     moveItemFocus : function (newActiveIndex) {
203     if (this.listActiveIndex != newActiveIndex) {
204     var nodes = this.listElem.childNodes;
205     if (this.listActiveIndex != -1 && this.listActiveIndex < nodes.length) {
206     Element.removeClassName(nodes[this.listActiveIndex], this.activeListItemClassName);
207     }
208     if (newActiveIndex != -1) {
209     if (newActiveIndex < 0) {
210     alert(1);
211     }
212     Element.addClassName(nodes[newActiveIndex], this.activeListItemClassName);
213     }
214     this.listActiveIndex = newActiveIndex;
215     }
216     },
217    
218     onTimer : function () {
219     if (this.elem.value.length == 0) {
220     this.hideList();
221     return;
222     }
223     if (this.elem != document.activeElement) {
224     return;
225     }
226     if (this.elem.value == this.oldValue) {
227     return;
228     }
229     this.setList();
230     this.oldValue = this.elem.value;
231     this.timer = setTimeout(this.onTimer.bind(this), this.interval);
232     },
233    
234     onMouseDown : function(e) {
235     var x = Event.pointerX(e);
236     var y = Event.pointerY(e);
237     var listItems = this.listElem.childNodes;
238     for (var i=0; i<listItems.length; ++i) {
239     var elem = listItems[i];
240     if (Position.within(elem, x, y)) {
241     this.selectData(i, true);
242     break;
243     }
244     }
245     },
246    
247     createListElem : function () {
248     if (this.listElem) {
249     return;
250     }
251     var listElem = document.createElement('DIV');
252     listElem.className = this.listClassName;
253     Element.hide(listElem);
254     Event.observe(listElem, "mousedown", this.onMouseDown.bind(this));
255     this.listElem = listElem;
256     this.elem.parentNode.insertBefore(listElem, this.elem.nextSibling);
257     },
258    
259     addListElemItem : function (html) {
260     var listItem = document.createElement('DIV');
261     listItem.className = this.listItemClassName;
262     listItem.innerHTML = html;
263     this.listElem.appendChild(listItem);
264     },
265    
266     setList : function () {
267     if (!this.listElem) {
268     return;
269     }
270     if (this.listElem.childNodes) {
271     for (var i=this.listElem.childNodes.length-1; i>=0; --i) {
272     this.listElem.removeChild(this.listElem.childNodes[i]);
273     }
274     }
275     this.dataList = this.provideDataList();
276     this.matchedDataList = new Array();
277     var results = new Array();
278     for (var i=0; i<this.dataList.length; ++i) {
279     var data = this.dataList[i];
280 berupon 17 var ret = {html:''};
281     if (this.matchData(data, ret)) {
282 berupon 4 this.matchedDataList.push(data);
283 berupon 17 results.push(ret.html);
284 berupon 4 }
285     }
286     if (results.length != 0) {
287     for (var i=0; i<results.length; ++i) {
288     this.addListElemItem(results[i]);
289     }
290     var style = this.listElem.style;
291     var offset = Element.cumulativeOffset(this.elem);
292     style.left = offset[0] + "px";
293     style.top = (offset[1] + this.elem.offsetHeight) + "px";
294     style.minWidth = this.elem.offsetWidth + "px";
295     Element.show(this.listElem);
296     }else {
297     this.hideList();
298     }
299     },
300    
301     hideList : function () {
302     if (!this.listElem) {
303     return;
304     }
305     this.oldValue = this.elem.value;
306     this.listActiveIndex = -1;
307     Element.hide(this.listElem);
308     }
309    
310     };
311    
Back to OSDN">Back to OSDN
 ViewVC Help
Powered by ViewVC 1.1.26  
About OSDN
Find Software
Develop Software
Help