OpenLayers OpenLayers

Changeset 1438

Show
Ignore:
Timestamp:
09/13/06 03:20:02 (2 years ago)
Author:
euzuro
Message:

update default behaviour of popups. now you can click and drag inside a popup without the events dropping through to the map, yet if you are dragging a zoombox over a popup, it still responds. this is all thanks to a new function i am adding to Util.js which is called OpenLayers.Util.safeStopPropagaition(). Turns out the default Event.stop() from prototype.js is also calling a function called preventDefault() which disallows things like selecting text or clicking a hyperlink. all tests pass.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • trunk/openlayers/examples/BaseLayers.html

    r1424 r1438  
    55        #map { 
    66            width: 100%; 
    7             height: 512px
     7            height: 100%
    88            border: 1px solid black; 
    99            background-color: blue; 
  • trunk/openlayers/examples/popups.html

    r1424 r1438  
    44    <style type="text/css"> 
    55        #map { 
    6             width: 512px; 
    7             height: 512px; 
     6            width: 400px; 
     7            height: 400px; 
    88            border: 1px solid black; 
    99        } 
     
    2323            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    2424            map.zoomToMaxExtent(); 
     25             
     26        } 
     27         
     28        function bar(e) { 
     29            alert("body"); 
     30        } 
     31        function foo(e) { 
     32            alert("yo"); 
     33            return true; 
    2534        } 
    2635         
     
    7180            if (popup == null) { 
    7281                popup = feature.createPopup(); 
     82                popup.setContentHTML("<a href='http://www.somethingconstructive.net' target='_blank'>click me</a>"); 
    7383                popup.setBackgroundColor("yellow"); 
    7484                popup.setOpacity(0.7); 
    75                 popup.events.register("mousedown", popup, onPopupMouseDown); 
     85//                popup.events.register("mousedown", popup, onPopupMouseDown); 
    7686                markers.map.addPopup(popup); 
    7787            } else { 
     
    113123  <body onload="init()"> 
    114124    <div id="map"></div> 
    115     <div style="background-color:purple" onclick="add()"> click to add Popup to map</div> 
     125    <div id="foo" style="background-color:purple" onclick="add()"> click to add Popup to map</div> 
    116126    <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div> 
    117127    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div> 
    118128    <div style="background-color:red" onclick="remove()"> click to remove the popup from map</div> 
    119129    <div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div> 
    120     <div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div> 
    121     <div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div> 
     130    <div id="yar" style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div> 
     131    <div id="ar" style="background-color:yellow">  
     132        <a href='http://www.somethingconstructive.net' target='_blank'>click me</a> 
     133    </div> 
    122134  </body> 
    123135</html> 
  • trunk/openlayers/lib/OpenLayers/Popup.js

    r1424 r1438  
    7676                                             null, null, null, "hidden"); 
    7777 
    78         this.events = new OpenLayers.Events(this, this.div, null); 
     78        this.registerEvents(); 
    7979    }, 
    8080 
     
    232232    }, 
    233233 
     234     
     235    /** Do this in a separate function so that subclasses can  
     236     *   choose to override it if they wish to deal differently 
     237     *   with mouse events 
     238     *  
     239     *   Note in the following handler functions that some special 
     240     *    care is needed to deal correctly with mousing and popups.  
     241     *    
     242     *   Because the user might select the zoom-rectangle option and 
     243     *    then drag it over a popup, we need a safe way to allow the 
     244     *    mousemove and mouseup events to pass through the popup when 
     245     *    they are initiated from outside. 
     246     *  
     247     *   Otherwise, we want to essentially kill the event propagation 
     248     *    for all other events, though we have to do so carefully,  
     249     *    without disabling basic html functionality, like clicking on  
     250     *    hyperlinks or drag-selecting text. 
     251     */ 
     252     registerEvents:function() { 
     253        Event.observe(this.div, "mousedown",  
     254                      this.onmousedown.bindAsEventListener(this)); 
     255        Event.observe(this.div, "mousemove",  
     256                      this.onmousemove.bindAsEventListener(this)); 
     257        Event.observe(this.div, "mouseup",  
     258                      this.onmouseup.bindAsEventListener(this)); 
     259        Event.observe(this.div, "click",  
     260                      OpenLayers.Util.safeStopPropagation); 
     261        Event.observe(this.div, "mouseout",  
     262                      this.onmouseout.bindAsEventListener(this)); 
     263        Event.observe(this.div, "dblclick",  
     264                      OpenLayers.Util.safeStopPropagation); 
     265     }, 
     266 
     267    /** When mouse goes down within the popup, make a note of 
     268     *   it locally, and then do not propagate the mousedown  
     269     *   (but do so safely so that user can select text inside) 
     270     *  
     271     * @param {Event} evt 
     272     */ 
     273    onmousedown: function (evt) { 
     274        this.mousedown = true; 
     275        OpenLayers.Util.safeStopPropagation(evt); 
     276    }, 
     277 
     278    /** If the drag was started within the popup, then  
     279     *   do not propagate the mousemove (but do so safely 
     280     *   so that user can select text inside) 
     281     *  
     282     * @param {Event} evt 
     283     */ 
     284    onmousemove: function (evt) { 
     285        if (this.mousedown) { 
     286            OpenLayers.Util.safeStopPropagation(evt); 
     287        } 
     288    }, 
     289 
     290    /** When mouse comes up within the popup, after going down  
     291     *   in it, reset the flag, and then (once again) do not  
     292     *   propagate the event, but do so safely so that user can  
     293     *   select text inside 
     294     *  
     295     * @param {Event} evt 
     296     */ 
     297    onmouseup: function (evt) { 
     298        if (this.mousedown) { 
     299            this.mousedown = false; 
     300            OpenLayers.Util.safeStopPropagation(evt); 
     301        } 
     302    }, 
     303 
     304    /** When mouse goes out of the popup set the flag to false so that 
     305     *   if they let go and then drag back in, we won't be confused. 
     306     *  
     307     * @param {Event} evt 
     308     *  
     309     * @type Boolean 
     310     */ 
     311    onmouseout: function (evt) { 
     312        this.mousedown = false; 
     313    }, 
     314     
    234315    CLASS_NAME: "OpenLayers.Popup" 
    235316}; 
  • trunk/openlayers/lib/OpenLayers/Util.js

    r1433 r1438  
    517517    return resolution; 
    518518}; 
     519 
     520/** Safely stop the propagation of an event *without* preventing 
     521 *   the default browser action from occurring. 
     522 *  
     523 * @param {Event} evt 
     524 */ 
     525OpenLayers.Util.safeStopPropagation = function(evt) { 
     526    if (evt.stopPropagation) { 
     527        evt.stopPropagation(); 
     528    }  
     529    evt.returnValue = false; 
     530    evt.cancelBubble = true;     
     531};