some ajax quicksearch cleanups - now tested in IE

darcs-hash:20050520171400-9977f-9039c9e9ea00c428cbfe30999400331f57d2d31a.gz

3 files changed, 57 insertions, 40 deletions

diff --git a/ajax.js b/ajax.js
new file mode 100644
index 000000000..f4c36baba
--- /dev/null
+++ b/ajax.js
@@ -0,0 +1,51 @@
+//prepare class
+function ajax_qsearch_class(){
+  this.sack = null;
+  this.inObj = null;
+  this.outObj = null;
+  this.timer = null;
+}
+
+//create global object and add functions
+var ajax_qsearch = new ajax_qsearch_class();
+ajax_qsearch.sack = new sack(DOKU_BASE + 'ajax.php');
+ajax_qsearch.sack.AjaxFailedAlert = '';
+ajax_qsearch.sack.encodeURIString = false;
+
+ajax_qsearch.init = function(inID,outID){
+  if(ajax_qsearch.inObj == null)
+    ajax_qsearch.inObj  = document.getElementById(inID);
+  if(ajax_qsearch.outObj == null)
+    ajax_qsearch.outObj = document.getElementById(outID);
+}
+
+ajax_qsearch.clear = function(){
+  ajax_qsearch.outObj.style.display = 'none';
+  ajax_qsearch.outObj.innerHTML = '';
+  if(ajax_qsearch.timer != null){
+    window.clearTimeout(ajax_qsearch.timer);
+    ajax_qsearch.timer = null;
+  }
+}
+
+ajax_qsearch.exec = function(){
+	ajax_qsearch.clear();
+  var value = ajax_qsearch.inObj.value;
+  if(value == '') return;
+  ajax_qsearch.sack.runAJAX('call=qsearch&q='+encodeURI(value));
+}
+
+ajax_qsearch.sack.onCompletion = function(){
+	var data = ajax_qsearch.sack.response;
+  if(data == '') return;
+
+  ajax_qsearch.outObj.innerHTML = data;
+  ajax_qsearch.outObj.style.display = 'block';
+}
+
+ajax_qsearch.call = function(inID,outID){
+  ajax_qsearch.init(inID,outID);
+  ajax_qsearch.clear();
+  ajax_qsearch.timer = window.setTimeout("ajax_qsearch.exec()",500);
+}
+
diff --git a/inc/template.php b/inc/template.php
index 0826ba6f8..f76e48108 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -170,9 +170,10 @@ function tpl_metaheaders(){
   ptln("  var DOKU_BASE   = '".DOKU_BASE."'",$it);
   ptln('</script>',$it);
  
-  // load the default JavaScript file
+  // load the default JavaScript files
   ptln('<script language="JavaScript" type="text/javascript" src="'.DOKU_BASE.'script.js"></script>',$it);
-
+  ptln('<script language="JavaScript" type="text/javascript" src="'.DOKU_BASE.'tw-sack.js"></script>',$it);
+  ptln('<script language="JavaScript" type="text/javascript" src="'.DOKU_BASE.'ajax.js"></script>',$it);
 
   //FIXME include some default CSS ? IE FIX?
 }
@@ -332,46 +333,10 @@ function tpl_actionlink($type,$pre='',$suf=''){
 function tpl_searchform(){
   global $lang;
   print '<form action="'.wl().'" accept-charset="utf-8" class="search" name="search" onsubmit="return svchk()">';
-
-//FIXME this should be moved somewhere else
-?>
-<script type="text/javascript" src="<?=DOKU_BASE?>tw-sack.js"></script>
-<script type="text/javascript">
-  ajax = new sack('<?=DOKU_BASE?>ajax.php');
-  ajax.AjaxFailedAlert = '';
-
-  var qr = null;
-  function ajax_runqsearch(){
-    ajax_stopqsearch();
-    qr = window.setTimeout('ajax_qsearch()',500);
-  }
-
-  function ajax_stopqsearch(){
-    document.getElementById('ajax_qsearch').innerHTML = '';
-    if(qr != null){
-      window.clearTimeout(qr);
-      qr = null;
-    }
-  }
-
-  function ajax_qsearch(){
-    var value = document.search.id.value;
-    if(value=='') return;
-    ajax.element = 'ajax_qsearch';
-    ajax.encodeURIString = false;
-    var call = 'call=qsearch&q=';
-    call += encodeURI(value);
-    ajax.runAJAX(call);
-
-    ajax_stopqsearch()
-  }
-</script>
-<?php
   print '<input type="hidden" name="do" value="search" />';
-  #print '<input type="text" accesskey="f" name="id" class="edit" autocomplete="off" onkeyup="ajax_qsearch(this.value)" />';
-  print '<input type="text" accesskey="f" name="id" class="edit" onkeypress="ajax_runqsearch()" />';
+  print '<input type="text" id="qsearch_in" accesskey="f" name="id" class="edit" onkeyup="ajax_qsearch.call(\'qsearch_in\',\'qsearch_out\')" />';
   print '<input type="submit" value="'.$lang['btn_search'].'" class="button" />';
-  print '<div id="ajax_qsearch" class="ajax_qsearch"></div>';
+  print '<div id="qsearch_out" class="ajax_qsearch" onclick="this.style.display=\'none\'"></div>';
   print '</form>';
 }
 
diff --git a/tpl/default/design.css b/tpl/default/design.css
index 3e743f20e..75210ac18 100644
--- a/tpl/default/design.css
+++ b/tpl/default/design.css
@@ -601,4 +601,5 @@ div.ajax_qsearch {
   width: 200px;
   background-color: #ff9;
   opacity: 0.9;
+  display:none;
 }