Factor out timer and delay management

darcs-hash:20091201115019-e4919-fe83e3d69eb997d0c04064b46117690824fe4daf.gz

lib/exe/js.php

@@ -41,6 +41,7 @@ function js_out(){
     $files = array(
                 DOKU_INC.'lib/scripts/helpers.js',
                 DOKU_INC.'lib/scripts/events.js',
+                DOKU_INC.'lib/scripts/delay.js',
                 DOKU_INC.'lib/scripts/cookie.js',
                 DOKU_INC.'lib/scripts/script.js',
                 DOKU_INC.'lib/scripts/tw-sack.js',
@@ -106,7 +107,6 @@ function js_out(){
 
 
     // init stuff
-    js_runonstart("ajax_qsearch.init('qsearch__in','qsearch__out')");
     js_runonstart("addEvent(document,'click',closePopups)");
     js_runonstart('addTocToggle()');
     js_runonstart("initSizeCtl('size__ctl','wiki__text')");

lib/scripts/ajax.js

 /**
  * AJAX functions for the pagename quicksearch
  *
- * We're using a global object with self referencing methods
- * here to make callbacks work
- *
  * @license  GPL2 (http://www.gnu.org/licenses/gpl.html)
  * @author   Andreas Gohr <andi@splitbrain.org>
+ * @author   Adrian Lang <lang@cosmocode.de>
  */
-
-//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 + 'lib/exe/ajax.php');
-ajax_qsearch.sack.AjaxFailedAlert = '';
-ajax_qsearch.sack.encodeURIString = false;
-
-ajax_qsearch.init = function(inID,outID){
-  ajax_qsearch.inObj  = document.getElementById(inID);
-  ajax_qsearch.outObj = document.getElementById(outID);
-
-  // objects found?
-  if(ajax_qsearch.inObj === null){ return; }
-  if(ajax_qsearch.outObj === null){ return; }
-
-  // attach eventhandler to search field
-  addEvent(ajax_qsearch.inObj,'keyup',ajax_qsearch.call);
-
-  // attach eventhandler to output field
-  addEvent(ajax_qsearch.outObj,'click',function(){ ajax_qsearch.outObj.style.display='none'; });
-};
-
-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(){
-  ajax_qsearch.clear();
-  ajax_qsearch.timer = window.setTimeout("ajax_qsearch.exec()",500);
-};
-
+addInitEvent(function () {
+
+    var inID  = 'qsearch__in';
+    var outID = 'qsearch__out';
+
+    var inObj  = document.getElementById(inID);
+    var outObj = document.getElementById(outID);
+
+    // objects found?
+    if (inObj === null){ return; }
+    if (outObj === null){ return; }
+
+    function clear_results(){
+        outObj.style.display = 'none';
+        outObj.innerHTML = '';
+    }
+
+    var sack_obj = new sack(DOKU_BASE + 'lib/exe/ajax.php');
+    sack_obj.AjaxFailedAlert = '';
+    sack_obj.encodeURIString = false;
+    sack_obj.onCompletion = function () {
+        var data = sack_obj.response;
+        if (data === '') { return; }
+
+        outObj.innerHTML = data;
+        outObj.style.display = 'block';
+    };
+
+    // attach eventhandler to search field
+    var delay = new Delay(function () {
+        clear_results();
+        var value = inObj.value;
+        if(value === ''){ return; }
+        sack_obj.runAJAX('call=qsearch&q=' + encodeURI(value));
+    });
+
+    addEvent(inObj, 'keyup', function () {clear_results(); delay.start(); });
+
+    // attach eventhandler to output field
+    addEvent(outObj, 'click', function () {outObj.style.display = 'none'; });
+});

lib/scripts/delay.js

+/**
+ * Manage delayed and timed actions
+ *
+ * @license GPL2 (http://www.gnu.org/licenses/gpl.html)
+ * @author  Adrian Lang <lang@cosmocode.de>
+ */
+
+/**
+ * Provide a global callback for window.setTimeout
+ *
+ * To get a timeout for non-global functions, just call
+ * delay.add(func, timeout).
+ */
+var timer = {
+    _cur_id: 0,
+    _handlers: {},
+
+    execDispatch: function (id) {
+        timer._handlers[id]();
+    },
+
+    add: function (func, timeout) {
+        var id = ++timer._cur_id;
+        timer._handlers[id] = func;
+        return window.setTimeout('timer.execDispatch(' + id + ')', timeout);
+    }
+};
+
+/**
+ * Provide a delayed start
+ *
+ * To call a function with a delay, just create a new Delay(func, timeout) and
+ * call that object’s method “start”.
+ */
+function Delay (func, timeout) {
+    this.func = func;
+    if (timeout) {
+        this.timeout = timeout;
+    }
+}
+
+Delay.prototype = {
+    func: null,
+    timeout: 500,
+
+    delTimer: function () {
+        if (this.timer !== null) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+    },
+
+    start: function () {
+        this.delTimer();
+        var _this = this;
+        this.timer = timer.add(function () { _this.exec.call(_this); },
+                               this.timeout);
+
+        this._data = {
+            _this: arguments[0],
+            _params: Array.prototype.slice.call(arguments, 2)
+        };
+    },
+
+    exec: function () {
+        this.delTimer();
+        this.func.call(this._data._this, this._data._params);
+    }
+};