OpenLayers OpenLayers

Ticket #1484: cursors_revisited.patch

File cursors_revisited.patch, 21.5 kB (added by bartvde, 2 months ago)

New patch using addClass and removeClass

  • tests/Control/DragFeature.html

    old new  
    173173    function test_Control_DragFeature_up(t) { 
    174174        t.plan(7); 
    175175        var map = new OpenLayers.Map("map"); 
     176        var cls = map.div.className; 
    176177        var layer = new OpenLayers.Layer.Vector(); 
    177178        map.addLayer(layer); 
    178         var control = new OpenLayers.Control.DragFeature(layer); 
     179        var control = new OpenLayers.Control.DragFeature(layer, {handlerOptions: { cursorClasses: {'in': 'overFeature', 'out': 'outFeature'} } }); 
    179180        map.addControl(control); 
    180181 
    181182        control.activate(); 
    …… 
    189190        map.events.triggerEvent("mousemove", {type: "mousemove"}); 
    190191        t.eq(control.over, true, 
    191192            "mouseover on a feature sets the over property to true"); 
    192         t.eq(control.map.div.style.cursor, "move", 
    193             "mouseover on a feature sets the cursor to move"); 
     193        t.eq(control.map.div.className, cls+" overFeature", 
     194            "mouseover on a feature sets the cursorClass to overFeature"); 
    194195        t.eq(control.handlers.drag.active, true, 
    195196            "mouseover on a feature activates drag handler"); 
    196197 
    …… 
    198199        // over the dragged feature 
    199200        control.handlers.drag.started = true; 
    200201        map.events.triggerEvent("mouseup", {type: "mouseup"}); 
    201         t.eq(control.map.div.style.cursor, "move", 
    202             "mouseup while still over dragged feature does not reset cursor to default"); 
    203202        t.eq(control.handlers.drag.active, true, 
    204203            "mouseup while still over dragged feature does not deactivate drag handler"); 
    205204 
    …… 
    208207        control.handlers.drag.started = true; 
    209208        control.over = false; 
    210209        map.events.triggerEvent("mouseup", {type: "mouseup"}); 
    211         t.eq(control.map.div.style.cursor, "default", 
    212             "mouseup resets cursor to default"); 
    213210        t.eq(control.handlers.drag.active, false, 
    214211            "mouseup deactivates drag handler"); 
    215212 
     213        control.handlers.feature.triggerCallback("mousemove", 'in', [null]); 
     214        t.eq(control.map.div.className, cls + " overFeature", 
     215            "when getting in of the feature the cursorClass is set to overFeature"); 
     216 
     217        control.handlers.feature.triggerCallback("mousemove", 'out', [null]); 
     218        t.eq(control.map.div.className, cls + " outFeature", 
     219            "when getting out of the feature the cursorClass is set to outFeature"); 
     220 
    216221        control.deactivate(); 
    217222    } 
    218223     

  • lib/OpenLayers/Handler.js

    old new  
    4444    control: null, 
    4545 
    4646    /** 
     47     * APIProperty: cursorClasses 
     48     * {Array(String)} An array specifying the mouse cursors through css classes  
     49     *     to use on the map div. The key of the array is the function name. 
     50    */ 
     51    cursorClasses: null, 
     52     
     53    /** 
     54     * Property: previousFunctionName 
     55     * {String} The previous function name that was used to add a cursor class 
     56     *     to the map div. It needs to be removed prior to adding a new cursor  
     57     *     class. 
     58    */ 
     59    previousFunctionName: null, 
     60 
     61    /** 
    4762     * Property: map 
    4863     * {<OpenLayers.Map>} 
    4964     */ 
    …… 
    176191        if(!this.active) { 
    177192            return false; 
    178193        } 
     194        if (this.previousFunctionName) { 
     195            OpenLayers.Element.removeClass(this.map.div,  
     196                this.cursorClasses[this.previousFunctionName]); 
     197        } 
    179198        // unregister event handlers defined on this class. 
    180199        var events = OpenLayers.Events.prototype.BROWSER_EVENTS; 
    181200        for (var i=0, len=events.length; i<len; i++) { 
    …… 
    245264    }, 
    246265 
    247266    /** 
     267     * Method: setCursor 
     268     * Set the mouse cursor on the map div 
     269     * 
     270     * Parameters: 
     271     * functionName - {String} the name of the function (e.g. mousedown) 
     272    */ 
     273    setCursor: function(functionName) { 
     274        if (this.previousFunctionName) { 
     275            OpenLayers.Element.removeClass(this.map.div,  
     276                this.cursorClasses[this.previousFunctionName]); 
     277        } 
     278        if (this.cursorClasses && this.cursorClasses[functionName]) { 
     279            OpenLayers.Element.addClass(this.map.div, this.cursorClasses[functionName]); 
     280            this.previousFunctionName = functionName; 
     281        } 
     282    }, 
     283     
     284    /** 
    248285     * Method: destroy 
    249286     * Deconstruct the handler. 
    250287     */ 

  • lib/OpenLayers/Control.js

    old new  
    128128     *     events. 
    129129     */ 
    130130    events: null, 
     131     
     132    /** 
     133     * APIProperty: cursorClass 
     134     * {String} a css class which can contain a cursor and will be set on the 
     135     *     map div upon activation. 
     136    cursorClass: null, 
    131137 
    132138    /** 
    133139     * Constant: EVENT_TYPES 
    …… 
    299305        if (this.handler) { 
    300306            this.handler.activate(); 
    301307        } 
     308        if (this.cursorClass) { 
     309            OpenLayers.Element.addClass(this.map.div, this.cursorClass); 
     310        } 
    302311        this.active = true; 
    303312        this.events.triggerEvent("activate"); 
    304313        return true; 
    …… 
    318327            if (this.handler) { 
    319328                this.handler.deactivate(); 
    320329            } 
     330            if (this.cursorClass) { 
     331                OpenLayers.Element.removeClass(this.map.div, this.cursorClass); 
     332            } 
    321333            this.active = false; 
    322334            this.events.triggerEvent("deactivate"); 
    323335            return true; 

  • lib/OpenLayers/Control/DragPan.js

    old new  
    3535     *     Defaults to 25 milliseconds. 
    3636     */ 
    3737    interval: 25,  
     38 
     39    /** 
     40     * APIProperty: handlerOptions 
     41     * {Object} Used to set non-default properties on the control's handler 
     42     */ 
     43    handlerOptions: null, 
    3844     
    3945    /** 
    4046     * Method: draw 
    …… 
    4551        this.handler = new OpenLayers.Handler.Drag(this, { 
    4652                "move": this.panMap, 
    4753                "done": this.panMapDone 
    48             }, { 
    49                 interval: this.interval 
    50             } 
     54            }, OpenLayers.Util.extend({interval: this.interval},  
     55                this.handlerOptions) 
    5156        ); 
    5257    }, 
    5358 

  • lib/OpenLayers/Control/DragFeature.js

    old new  
    9595    lastPixel: null, 
    9696 
    9797    /** 
     98     * APIProperty: handlerOptions 
     99     * {Object} Used to set non-default properties on the control's handler 
     100     */ 
     101    handlerOptions: null, 
     102 
     103    /** 
    98104     * Constructor: OpenLayers.Control.DragFeature 
    99105     * Create a new control to drag features. 
    100106     * 
    …… 
    115121                    up: this.upFeature, 
    116122                    out: this.cancel, 
    117123                    done: this.doneDragging 
    118                 }, this.dragCallbacks) 
     124                }, this.dragCallbacks), this.handlerOptions 
    119125            ), 
    120126            feature: new OpenLayers.Handler.Feature( 
    121127                this, this.layer, OpenLayers.Util.extend({ 
    122128                    over: this.overFeature, 
    123129                    out: this.outFeature 
    124130                }, this.featureCallbacks), 
    125                 {geometryTypes: this.geometryTypes} 
     131                OpenLayers.Util.extend({geometryTypes: this.geometryTypes},  
     132                    this.handlerOptions) 
    126133            ) 
    127134        }; 
    128135    }, 
    129      
     136 
    130137    /** 
    131138     * APIMethod: destroy 
    132139     * Take care of things that are not handled in superclass 
    …… 
    178185            this.feature = feature; 
    179186            this.handlers.drag.activate(); 
    180187            this.over = true; 
    181             // TBD replace with CSS classes 
    182             this.map.div.style.cursor = "move"; 
    183188        } else { 
    184189            if(this.feature.id == feature.id) { 
    185190                this.over = true; 
    …… 
    230235        if(!this.over) { 
    231236            this.handlers.drag.deactivate(); 
    232237            this.feature = null; 
    233             // TBD replace with CSS classes 
    234             this.map.div.style.cursor = "default"; 
    235         } else { 
    236             // the drag handler itself resetted the cursor, so 
    237             // set it back to "move" here 
    238             this.map.div.style.cursor = "move"; 
    239238        } 
    240239    }, 
    241240 
    …… 
    262261        if(!this.handlers.drag.dragging) { 
    263262            this.over = false; 
    264263            this.handlers.drag.deactivate(); 
    265             // TBD replace with CSS classes 
    266             this.map.div.style.cursor = "default"; 
    267264            this.feature = null; 
    268265        } else { 
    269266            if(this.feature.id == feature.id) { 

  • lib/OpenLayers/Control/ZoomBox.js

    old new  
    2525     * {Boolean} Should the control be used for zooming out? 
    2626     */ 
    2727    out: false, 
     28     
     29    /** 
     30     * APIProperty: handlerOptions 
     31     * {Object} Used to set non-default properties on the control's handler 
     32     */ 
     33    handlerOptions: null, 
    2834 
    2935    /** 
    3036     * Method: draw 
    3137     */     
    3238    draw: function() { 
    3339        this.handler = new OpenLayers.Handler.Box( this, 
    34                             {done: this.zoomBox}, {keyMask: this.keyMask} ); 
     40                            {done: this.zoomBox},  
     41                            OpenLayers.Util.extend({keyMask: this.keyMask},  
     42                                this.handlerOptions) ); 
    3543    }, 
    3644 
    3745    /** 

  • lib/OpenLayers/Handler/Box.js

    old new  
    8383        this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1; 
    8484        this.map.viewPortDiv.appendChild(this.zoomBox); 
    8585 
    86         // TBD: use CSS classes instead 
    87         this.map.div.style.cursor = "crosshair"; 
     86        this.setCursor('startBox'); 
    8887    }, 
    8988 
    9089    /** 
    …… 
    133132        }  
    134133        this.removeBox(); 
    135134 
    136         // TBD: use CSS classes instead 
    137         this.map.div.style.cursor = ""; 
     135        this.setCursor('endBox'); 
    138136 
    139137        this.callback("done", [result]); 
    140138    }, 

  • lib/OpenLayers/Handler/Feature.js

    old new  
    268268     * type - {String} 
    269269     */ 
    270270    triggerCallback: function(type, mode, args) { 
     271        this.setCursor(mode); 
    271272        var key = this.EVENTMAP[type][mode]; 
    272273        if(key) { 
    273274            if(type == 'click' && mode == 'out' && this.up && this.down) { 

  • lib/OpenLayers/Handler/Drag.js

    old new  
    177177            this.started = true; 
    178178            this.start = evt.xy; 
    179179            this.last = evt.xy; 
    180             // TBD replace with CSS classes 
    181             this.map.div.style.cursor = "move"; 
     180            this.setCursor(evt.type); 
    182181            this.down(evt); 
    183182            this.callback("down", [evt.xy]); 
    184183            OpenLayers.Event.stop(evt); 
    …… 
    247246            var dragged = (this.start != this.last); 
    248247            this.started = false; 
    249248            this.dragging = false; 
    250             // TBD replace with CSS classes 
    251             this.map.div.style.cursor = ""; 
     249            this.setCursor(evt.type); 
    252250            this.up(evt); 
    253251            this.callback("up", [evt.xy]); 
    254252            if(dragged) { 
    …… 
    274272            var dragged = (this.start != this.last); 
    275273            this.started = false;  
    276274            this.dragging = false; 
    277             // TBD replace with CSS classes 
    278             this.map.div.style.cursor = ""; 
     275            this.setCursor(evt.type); 
    279276            this.out(evt); 
    280277            this.callback("out", []); 
    281278            if(dragged) { 

  • examples/cursor.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> 
     4    <style type="text/css"> 
     5        #map { 
     6            width: 800px; 
     7            height: 475px; 
     8            border: 1px solid black; 
     9        } 
     10 
     11        .olControlPanel { 
     12          cursor: pointer; 
     13        } 
     14 
     15        .olControlPanel div { 
     16          display:block; 
     17          width:  30px; 
     18          height: 30px; 
     19          margin: 5px; 
     20        } 
     21 
     22        .olControlZoomOutBoxCursor { 
     23          cursor: url(../theme/default/img/zoomout.cur) 9 9, url(../theme/default/img/zoomout.cur), auto; 
     24        } 
     25 
     26        .olControlDragPanCursor { 
     27          cursor: url(../theme/default/img/pan.cur) 16 16, url(../theme/default/img/pan.cur), auto; 
     28        } 
     29 
     30        .olControlZoomInBoxCursor { 
     31          cursor: url(../theme/default/img/zoomin.cur) 9 9, url(../theme/default/img/zoomin.cur), auto; 
     32        } 
     33 
     34        .dragMouseDown { 
     35          cursor: url(../theme/default/img/pandown.cur) 16 16, url(../theme/default/img/pandown.cur), auto; 
     36        } 
     37 
     38        .dragMouseUp { 
     39          cursor: url(../theme/default/img/pan.cur) 16 16, url(../theme/default/img/pan.cur), auto; 
     40        } 
     41 
     42        .crossHair { 
     43          cursor: crosshair; 
     44        } 
     45 
     46        .overFeature { 
     47          cursor: move; 
     48        } 
     49 
     50        .outFeature { 
     51          cursor: default; 
     52        } 
     53 
     54        .olControlPanel .olControlDrawPolygonItemActive { 
     55          border: 1px red solid; 
     56          background-color: #EEEEEE; 
     57          background-image: url("../theme/default/img/draw_polygon_on.png"); 
     58          background-repeat: no-repeat; 
     59          background-position: center; 
     60        } 
     61 
     62        .olControlPanel .olControlDrawPolygonItemInactive { 
     63          background-color: #EEEEEE; 
     64          background-image: url("../theme/default/img/draw_polygon_on.png"); 
     65          background-repeat: no-repeat; 
     66          background-position: center; 
     67        } 
     68 
     69        .olControlPanel .olControlDragFeatureItemActive { 
     70          border: 1px red solid; 
     71          background-color: #EEEEEE; 
     72          background-image: url("../theme/default/img/move_feature_on.png"); 
     73          background-repeat: no-repeat; 
     74          background-position: center; 
     75        } 
     76 
     77        .olControlPanel .olControlDragFeatureItemInactive { 
     78          background-color: #EEEEEE; 
     79          background-image: url("../theme/default/img/move_feature_on.png"); 
     80          background-repeat: no-repeat; 
     81          background-position: center; 
     82        } 
     83 
     84        .olControlPanel .olControlDragPanItemActive { 
     85          border: 1px red solid; 
     86          background-color: #EEEEEE; 
     87          background-image: url("../theme/default/img/pan_on.png"); 
     88          background-repeat: no-repeat; 
     89          background-position: center; 
     90        } 
     91 
     92        .olControlPanel .olControlDragPanItemInactive { 
     93          background-color: #EEEEEE; 
     94          background-image: url("../theme/default/img/pan_on.png"); 
     95          background-repeat: no-repeat; 
     96          background-position: center; 
     97        } 
     98 
     99        .olControlPanel .olControlZoomBoxItemInactive { 
     100          background-color: #EEEEEE; 
     101          background-image: url("../theme/default/img/icn-zoomin.png"); 
     102          background-repeat: no-repeat; 
     103          background-position: center; 
     104        } 
     105 
     106        .olControlPanel .olControlZoomBoxItemActive { 
     107          border: 1px red solid; 
     108          background-color: #EEEEEE; 
     109          background-image: url("../theme/default/img/icn-zoomin.png"); 
     110          background-repeat: no-repeat; 
     111          background-position: center; 
     112        } 
     113 
     114        .olControlPanel .olControlZoomOutBoxItemActive { 
     115          border: 1px red solid; 
     116          background-color: #EEEEEE; 
     117          background-image: url("../theme/default/img/icn-zoomout.png"); 
     118          background-repeat: no-repeat; 
     119          background-position: center; 
     120        } 
     121 
     122        .olControlPanel .olControlZoomOutBoxItemInactive { 
     123          background-color: #EEEEEE; 
     124          background-image: url("../theme/default/img/icn-zoomout.png"); 
     125          background-repeat: no-repeat; 
     126          background-position: center; 
     127        } 
     128 
     129    </style> 
     130    <script src="../lib/Firebug/firebug.js"></script> 
     131    <script src="../lib/OpenLayers.js"></script> 
     132    <script type="text/javascript"> 
     133        var lon = 5; 
     134        var lat = 40; 
     135        var zoom = 5; 
     136        var map, layer; 
     137 
     138        function init(){ 
     139            map = new OpenLayers.Map( 'map', { controls: [] } ); 
     140            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
     141                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); 
     142            map.addLayer(layer); 
     143 
     144            vlayer = new OpenLayers.Layer.Vector( "Editable" ); 
     145            map.addLayer(vlayer); 
     146 
     147            var zb = new OpenLayers.Control.ZoomBox( 
     148                {title:"Zoom in box", cursorClass: 'olControlZoomInBoxCursor'}); 
     149            var panel = new OpenLayers.Control.Panel({defaultControl: zb}); 
     150            panel.addControls([ 
     151                zb, 
     152                new OpenLayers.Control.ZoomBox({title:"Zoom out box", displayClass: 
     153                    'olControlZoomOutBox', out: true, cursorClass: 'olControlZoomOutBoxCursor', 
     154                    handlerOptions: {cursorClasses: {'startBox': 'crossHair', 'endBox': 'olControlZoomOutBoxCursor' } } }), 
     155                new OpenLayers.Control.DragPan({title:'Drag map', 
     156                    cursorClass: 'olControlDragPanCursor', 
     157                    handlerOptions: {cursorClasses: {'mousedown': 'dragMouseDown', 'mouseup': 'dragMouseUp' } } }), 
     158                new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {title: "Draw polygon", cursorClass: 'crossHair', displayClass: 'olControlDrawPolygon'}), 
     159                new OpenLayers.Control.DragFeature(vlayer, {title: "Drag polygon", displayClass: 'olControlDragFeature',  
     160                    handlerOptions: {cursorClasses: {'in': 'overFeature', 'out': 'outFeature'} } }) 
     161            ]); 
     162            map.addControl(panel); 
     163 
     164            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
     165        } 
     166    </script> 
     167  </head> 
     168  <body onload="init()"> 
     169    <h3 id="title">Custom cursors for controls</h3> 
     170    <p id="shortdesc"> 
     171       Use custom cursors for your controls. 
     172    </p> 
     173    <div id="map"></div> 
     174  </body> 
     175</html>