Refactor Control to allow multiple handler types (move, hover, click)

lib/OpenLayers/Control/UTFGrid.js

@@ -5,6 +5,8 @@
 
 /**
  * @requires OpenLayers/Control.js
+ * @requires OpenLayers/Handler/Hover.js
+ * @requires OpenLayers/Handler/Click.js
  */
 
 /**
@@ -31,122 +33,70 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
     element: null,
     debugElement: null,
     
-    /** 
-     * APIProperty: prefix
-     * {String}
-     */
-    prefix: '',
-    
-    /** 
-     * APIProperty: separator
-     * {String}
-     */
-    separator: ', ',
-    
-    /** 
-     * APIProperty: suffix
-     * {String}
-     */
-    suffix: '',
-    
-    /** 
-     * APIProperty: numDigits
-     * {Integer}
-     */
-    numDigits: 5,
-    
-    /** 
-     * APIProperty: granularity
-     * {Integer} 
-     */
-    granularity: 10,
-
-    /**
-     * APIProperty: emptyString 
-     * {String} Set this to some value to set when the mouse is outside the
-     *     map.
-     */
-    emptyString: null,
-    
     /** 
      * Property: lastXy
      * {<OpenLayers.Pixel>}
      */
     lastXy: null,
 
-    /**
-     * APIProperty: displayProjection
-     * {<OpenLayers.Projection>} The projection in which the 
-     * mouse position is displayed
-     */
-    displayProjection: null, 
-    
     /**
      * Constructor: OpenLayers.Control.UTFGrid
-     * 
      * Parameters:
      * options - {Object} Options for control.
      */
-
+    defaultHandlerOptions: {
-    /**
+        'delay': 500,
-     * Method: destroy
+        'pixelTolerance': null,
-     */
+        'stopMove': false,
-     destroy: function() {
+        'single': true,
-         this.deactivate();
+        'double': false,
-         OpenLayers.Control.prototype.destroy.apply(this, arguments);
+        'pixelTolerance': 0,
-     },
+        'stopSingle': false,
-
+        'stopDouble': false
-    /**
-     * APIMethod: activate
-     */
-    activate: function() {
-        if (OpenLayers.Control.prototype.activate.apply(this, arguments)) {
-            this.map.events.register('mousemove', this, this.redraw);
-            this.map.events.register('mouseout', this, this.reset);
-            //this.map.events.register('click', this, this.redraw);
-            this.redraw();
-            return true;
-        } else {
-            return false;
-        }
     },
-    
+
-    /**
+    handlerMode: 'move',
-     * APIMethod: deactivate
+
-     */
+    setHandler: function() {
-    deactivate: function() {
+        this.handler = null;
-        if (OpenLayers.Control.prototype.deactivate.apply(this, arguments)) {
+        if (this.handlerMode == 'hover') {
-            //this.map.events.unregister('click', this, this.redraw);
+            // Handle this event on hover
-            this.map.events.unregister('mousemove', this, this.redraw);
+            this.handler = new OpenLayers.Handler.Hover(
-            this.map.events.unregister('mouseout', this, this.reset);
+                this,
-            this.element.innerHTML = "";
+                {'pause': this.handleEvent, 'move': this.reset},
-            return true;
+                this.handlerOptions
-        } else {
+            );
-            return false;
+        } else if (this.handlerMode == 'click') {
+            // Handle this event on click
+            this.handler = new OpenLayers.Handler.Click(
+                this, {
+                    'click': this.handleEvent
+                }, this.handlerOptions
+            );
+        } else if (this.handlerMode == 'move') {
+            this.handler = new OpenLayers.Handler.Hover(
+                this,
+                // Handle this event while hovering OR moving
+                {'pause': this.handleEvent, 'move': this.handleEvent},
+                this.handlerOptions
+            );
         }
     },
 
-    /**
+    initialize: function(options) {
-     * Method: draw
+        this.handlerOptions = OpenLayers.Util.extend(
-     * {DOMElement}
+            {}, this.defaultHandlerOptions
-     */    
+        );
-    draw: function() {
+        OpenLayers.Control.prototype.initialize.apply(
-        OpenLayers.Control.prototype.draw.apply(this, arguments);
+            this, arguments
+        ); 
+        this.setHandler();
+    }, 
 
-        if (!this.element) {
-            this.div.left = "";
-            this.div.top = "";
-            this.element = this.div;
-        }
-        
-        return this.div;
-    },
-   
     /**
-     * Method: redraw  
+     * Method: handleEvent
      */
-    redraw: function(evt) {
+    handleEvent: function(evt) {
-
         var lonLat;
 
         if (evt == null) {
@@ -163,7 +113,7 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
 
             lonLat = this.map.getLonLatFromPixel(evt.xy);
             if (!lonLat) { 
-                // map has not yet been properly initialized
+                // map may not have been properly initialized
                 return;
             }    
             this.lastXy = evt.xy;
@@ -174,33 +124,15 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
             var layer;
             for (var i=0, len=layers.length; i<len; i++) {
                 layer = layers[i];
+
                 var info = layer.getTileInfo( lonLat );
-                //MP TODO make function
+                this.writeDebugInfo(info);
-                if (this.debugElement) {
-                    var debug = "<ul>";
-                    debug += "<li>i :" + info.i + "</li>";
-                    debug += "<li>j :" + info.j + "</li>";
-                    debug += "<li>globalrow :" + info.globalRow + "</li>";
-                    debug += "<li>globalcol :" + info.globalCol + "</li>";
-                    debug += "<li>gridrow :" + info.gridRow + "</li>";
-                    debug += "<li>gridcol :" + info.gridCol + "</li>";
-                    debug += "<li>gridrow offset :" + info.gridRowOffset + "</li>";
-                    debug += "<li>gridcol offset :" + info.gridColOffset + "</li>";
-                    debug += "</ul>";
-                    this.debugElement.innerHTML = debug;
-                }
                 var tile = info.tile;
-                /*
-                MP TODO Sanity checks
-                if ((Math.floor(info.i) >= tileSize) ||
-                    (Math.floor(info.j) >= tileSize)) alert("TOO BIG");
-                */
                 var attrs = null;
-                var resolution = 4;
+                var resolution = 4; //TODO autodetect? 
                 if (tile !== null && typeof(tile) !== 'undefined') {
                     var data = tile.json
                     if (data !== null) {
-                        //val = data;
                         var code = this.resolveCode(data.grid[ 
                                 Math.floor((info.j) / resolution) 
                             ].charCodeAt(
@@ -214,6 +146,25 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
         }
     },
 
+    /** Method: 
+     *
+     */
+    writeDebugInfo: function(info) {
+        var debug = "<ul>";
+        debug += "<li>i :" + info.i + "</li>";
+        debug += "<li>j :" + info.j + "</li>";
+        debug += "<li>globalrow :" + info.globalRow + "</li>";
+        debug += "<li>globalcol :" + info.globalCol + "</li>";
+        debug += "<li>gridrow :" + info.gridRow + "</li>";
+        debug += "<li>gridcol :" + info.gridCol + "</li>";
+        debug += "<li>gridrow offset :" + info.gridRowOffset + "</li>";
+        debug += "<li>gridcol offset :" + info.gridColOffset + "</li>";
+        debug += "</ul>";
+        if (this.debugElement) {
+            this.debugElement.innerHTML = debug;
+        } 
+    },
+
     /**
      * Method: callback
      * MP TODO
@@ -254,9 +205,9 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
      * Method: reset
      */
     reset: function(evt) {
-        if (this.emptyString != null) {
+        this.callback(null);
+        if (this.element)
             this.element.innerHTML = this.emptyString;
-        }
     },
 
     /**