From 2c8e84c1e59e0f45bab6fd7671949642bdb8a31d Mon Sep 17 00:00:00 2001 From: thomascube Date: Sun, 23 Nov 2008 12:38:44 +0000 Subject: Do serverside addressbook queries for autocompletion (#1485531) + make autocompletion list clickable --- program/js/app.js | 163 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 85 insertions(+), 78 deletions(-) (limited to 'program/js') diff --git a/program/js/app.js b/program/js/app.js index 06978f60b..82687da3a 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -458,20 +458,13 @@ function rcube_webmail() this.init_address_input_events = function(obj) { var handler = function(e){ return ref.ksearch_keypress(e,this); }; - var handler2 = function(e){ return ref.ksearch_blur(e,this); }; if (obj.addEventListener) - { obj.addEventListener(bw.safari ? 'keydown' : 'keypress', handler, false); - obj.addEventListener('blur', handler2, false); - } else - { obj.onkeydown = handler; - obj.onblur = handler2; - } - obj.setAttribute('autocomplete', 'off'); + obj.setAttribute('autocomplete', 'off'); }; @@ -1173,6 +1166,9 @@ function rcube_webmail() this.contact_list.blur(); model = this.env.address_sources; } + else if (this.ksearch_value) { + this.ksearch_blur(); + } // handle mouse release when dragging if (this.drag_active && model) { @@ -2313,15 +2309,15 @@ function rcube_webmail() } if (this.gui_objects.search_filter) - addurl = '&_filter=' + this.gui_objects.search_filter.value; + addurl = '&_filter=' + this.gui_objects.search_filter.value; // reset vars this.env.current_page = 1; this.set_busy(true, 'searching'); this.http_request('search', '_q='+urlencode(value) - +(this.env.mailbox ? '&_mbox='+urlencode(this.env.mailbox) : '') - +(this.env.source ? '&_source='+urlencode(this.env.source) : '') - +(addurl ? addurl : ''), true); + + (this.env.mailbox ? '&_mbox='+urlencode(this.env.mailbox) : '') + + (this.env.source ? '&_source='+urlencode(this.env.source) : '') + + (addurl ? addurl : ''), true); } return true; }; @@ -2349,10 +2345,7 @@ function rcube_webmail() // handler for keyboard events on address-fields this.ksearch_keypress = function(e, obj) - { - if (typeof(this.env.contacts)!='object' || !this.env.contacts.length) - return true; - + { if (this.ksearch_timer) clearTimeout(this.ksearch_timer); @@ -2368,24 +2361,13 @@ function rcube_webmail() break; var dir = key==38 ? 1 : 0; - var next; highlight = document.getElementById('rcmksearchSelected'); if (!highlight) highlight = this.ksearch_pane.ul.firstChild; - if (highlight && (next = dir ? highlight.previousSibling : highlight.nextSibling)) - { - highlight.removeAttribute('id'); - this.set_classname(highlight, 'selected', false); - } - - if (next) - { - next.setAttribute('id', 'rcmksearchSelected'); - this.set_classname(next, 'selected', true); - this.ksearch_selected = next._rcm_id; - } + if (highlight) + this.ksearch_select(dir ? highlight.previousSibling : highlight.nextSibling); return rcube_event.cancel(e); @@ -2393,7 +2375,7 @@ function rcube_webmail() if(mod == SHIFT_KEY) break; - case 13: // enter + case 13: // enter if (this.ksearch_selected===null || !this.ksearch_input || !this.ksearch_value) break; @@ -2414,7 +2396,22 @@ function rcube_webmail() this.ksearch_input = obj; return true; - }; + }; + + this.ksearch_select = function(node) + { + var current = document.getElementById('rcmksearchSelected'); + if (current && node) { + current.removeAttribute('id'); + this.set_classname(current, 'selected', false); + } + + if (node) { + node.setAttribute('id', 'rcmksearchSelected'); + this.set_classname(node, 'selected', true); + this.ksearch_selected = node._rcm_id; + } + }; this.insert_recipient = function(id) { @@ -2440,10 +2437,13 @@ function rcube_webmail() // address search processor this.ksearch_get_results = function() - { + { var inp_value = this.ksearch_input ? this.ksearch_input.value : null; - if (inp_value===null) + if (inp_value === null) return; + + if (this.ksearch_pane && this.ksearch_pane.visible) + this.ksearch_pane.show(0); // get string from current cursor pos to last comma var cpos = this.get_caret_pos(this.ksearch_input); @@ -2453,45 +2453,45 @@ function rcube_webmail() // trim query string q = q.replace(/(^\s+|\s+$)/g, '').toLowerCase(); - if (!q.length || q==this.ksearch_value) - { - if (!q.length && this.ksearch_pane && this.ksearch_pane.visible) - this.ksearch_pane.show(0); - - return; - } + // Don't (re-)search if string is empty or if the last results are still active + if (!q.length || q == this.ksearch_value) + return; this.ksearch_value = q; - // start searching the contact list - var a_results = new Array(); - var a_result_ids = new Array(); + this.display_message('searching', 'loading', true); + this.http_post('autocomplete', '_search='+q); + }; + + this.ksearch_query_results = function(results) + { + this.hide_message(); + this.env.contacts = results ? results : []; + + var result_ids = new Array(); var c=0; - for (var i=0; i=0) - { - a_results[c] = this.env.contacts[i]; - a_result_ids[c++] = i; - - if (c==15) // limit search results - break; - } - } + for (var i=0; i < this.env.contacts.length; i++) { + result_ids[c++] = i; + if (c == 15) // limit search results + break; + } + + this.ksearch_display_results(this.env.contacts, result_ids, c); + }; + this.ksearch_display_results = function (a_results, a_result_ids, c) + { // display search results - if (c && a_results.length) - { + if (c && a_results.length) { var p, ul, li; // create results pane if not present - if (!this.ksearch_pane) - { + if (!this.ksearch_pane) { ul = document.createElement('UL'); this.ksearch_pane = new rcube_layer('rcmKSearchpane', {vis:0, zindex:30000}); this.ksearch_pane.elm.appendChild(ul); this.ksearch_pane.ul = ul; - } + } else ul = this.ksearch_pane.ul; @@ -2499,51 +2499,58 @@ function rcube_webmail() ul.innerHTML = ''; // add each result line to list - for (i=0; i/, '>'); + li.innerHTML = a_results[i].replace(//, '>').replace(new RegExp('('+this.ksearch_value+')', 'ig'), '$1'); + li.onmouseover = function(){ ref.ksearch_select(this); }; + li.onclick = function(){ ref.ksearch_click(this) }; li._rcm_id = a_result_ids[i]; ul.appendChild(li); - } + } // check if last selected item is still in result list - if (this.ksearch_selected!==null) - { + if (this.ksearch_selected !== null) { p = find_in_array(this.ksearch_selected, a_result_ids); - if (p>=0 && ul.childNodes) - { + if (p >= 0 && ul.childNodes) { ul.childNodes[p].setAttribute('id', 'rcmksearchSelected'); this.set_classname(ul.childNodes[p], 'selected', true); - } + } else this.ksearch_selected = null; - } + } // if no item selected, select the first one - if (this.ksearch_selected===null) - { + if (this.ksearch_selected === null) { ul.firstChild.setAttribute('id', 'rcmksearchSelected'); this.set_classname(ul.firstChild, 'selected', true); this.ksearch_selected = a_result_ids[0]; - } + } // move the results pane right under the input box and make it visible var pos = rcube_get_object_pos(this.ksearch_input); this.ksearch_pane.move(pos.x, pos.y+this.ksearch_input.offsetHeight); - this.ksearch_pane.show(1); - } + this.ksearch_pane.show(1); + } // hide results pane else this.ksearch_hide(); - }; + }; + + this.ksearch_click = function(node) + { + this.insert_recipient(node._rcm_id); + this.ksearch_hide(); + + if (ref.ksearch_input) + this.ksearch_input.focus(); + }; - this.ksearch_blur = function(e, obj) + this.ksearch_blur = function() { if (this.ksearch_timer) clearTimeout(this.ksearch_timer); - this.ksearch_value = ''; + this.ksearch_value = ''; this.ksearch_input = null; this.ksearch_hide(); @@ -2555,7 +2562,7 @@ function rcube_webmail() this.ksearch_selected = null; if (this.ksearch_pane) - this.ksearch_pane.show(0); + this.ksearch_pane.show(0); }; -- cgit v1.2.3