Move the popup widow in WAB

19765
36
Jump to solution
06-30-2015 07:22 AM
GeorgeKatsambas
Occasional Contributor III

Is there a way to change the position of the popup window, or drag it with your mouse out of the way. As it is now the popup window open where you click and you cant move it at all. I know in Flex you could move it with the mouse.

Tags (2)
36 Replies
MichaelRobb
Occasional Contributor III

Hi Robert,

thanks for validating.

doh...I found my silly error.. must be a Friday.

0 Kudos
CharlesBailey
New Contributor III

Tyler, I still get 'Cannot read property 'domNode' of undefined' at the query line, and pretty sure the code is identical to yours - ideas?

0 Kudos
TylerDunn2
Occasional Contributor

Hey Charles

Can you post your code for me to take a look at?

0 Kudos
by Anonymous User
Not applicable

Tyler Dunn‌ & everyone - Thanks! This is awesome. Works beautifully.

Tyler, I added a block of code to yours from the original example.  To hide the anchor, while you move the window. If anyone wants to do this, use this snippet as below (approx. line 1139, after adding the lines for declare and require)

mo.createWebMap = function(portalUrl, itemId, mapDiv, /* optional */ options) {  
     
    portalUrl = portalUrlUtils.getStandardPortalUrl(portalUrl);  
    var itemUrl = portalUrlUtils.getBaseItemUrl(portalUrl);  
    arcgisUtils.arcgisUrl = itemUrl;  
    var def = arcgisUtils.createMap(itemId, mapDiv, options);  
    def.then(function (response){  
        var map = response.map;  
        var handle = query(".title", map.infoWindow.domNode)[0];  
        var dnd = new Moveable(map.infoWindow.domNode, {  
            handle: handle  
        });  
          
                 ////// when the infoWindow is moved, hide the anchor arrow //////
        on(dnd, 'FirstMove', function() {
            // hide pointer and outerpointer (used depending on where the pointer is shown)
            var arrowNode =  query(".outerPointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");
            
            var arrowNode =  query(".pointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");
        }.bind(this));
           ////////////
    });  
     return def;  
  };  ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

					
				
			
			
				
			
			
				
			
			
			
			
			
			
		
ZacharyOrdo__GISP
New Contributor III

Is there any way to modify common.css, esri.css, or any of the scripts to allow us to a) prevent the pop-up from being dragged off-screen, or b) prevent the pop-up from re-centering upon clicking the previous or next arrows?

ZacharyOrdo__GISP
New Contributor III

It seems the answer I'm looking for may lie within the Dojo Toolkit, more specifically in constrainedMoveable from dojo/dnd/move.  This is what I'm looking at on StackExchange:  javascript - How to disable/stop drag action when using dojo/dnd/Moveable? - Stack Overflow 

And here's the documentation for drag and drop (dnd) on the Dojo Toolkit Reference Guide:  dojo/dnd — The Dojo Toolkit - Reference Guide 

MarkEastwood
Occasional Contributor II

Tyler, this is great thank you for sharing your code. 

I'm curious, should your code allow the Editor widget popup to be moved or is that a separate issue from what you have resolved above? 

Thanks again.

0 Kudos