topic Re: Content Pane Functionality is overrode when moveable (dnd) function is added in ArcGIS JavaScript Maps SDK Questions

Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Tue, 16 Jan 2018 16:47:15 GMT

I have to separate functions. The first function gets overrode by the second. What can I do to prevent this?

app.utilitySelector = new utilitySelectorModule();
app.utilitySelector.init();
var utilitySelectorToolBtn = dom.byId("PMSelect");
on(utilitySelectorToolBtn, "click", function (event) {
if (app.utilitySelector.isVisible === true) {
app.utilitySelector.hide();
} else { // not open
app.utilitySelector.show();
}
});

on(dom.byId("Pane"), "click", function(){
var dnd = new Moveable(dom.byId("Pane"));
});

The first functions opens a dojo content pane from a button onlick. The second function makes the content pane moveable. The functionality of the content pane is suspended as soon as the content pane is moved.

Any suggestions?

https://community.esri.com/community/developers/gis-developers?sr=search&searchId=bcfa4c7a-04aa-4d71-98cd-84fc66219180&searchIndex=5‌

https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=a21eafc1-98af-476d-acfc-4ad58b383120&searchIndex=0‌

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Tue, 16 Jan 2018 17:23:06 GMT

Brandon,

Why are you waiting for someone to click on the panel before making it movable? You should just make it movable when the dom is ready.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Tue, 16 Jan 2018 21:28:11 GMT

I was trying to use this: Esri JS API Draggable Popups - JSFiddle that was in this thread: Move the popup widow in WAB

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Tue, 16 Jan 2018 21:31:26 GMT

So is this a JS api app or a WAB app?

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Tue, 16 Jan 2018 22:54:28 GMT

JS api

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Wed, 17 Jan 2018 14:04:08 GMT

Brandon,

OK, so like in that sample code you are referring to the popup gets set as the dnd target before it is even shown.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 15:35:38 GMT

Yes. The drag function of the content pane works, but the functionality of the content pane itself is shut off (which is a bunch of drop down menus) once I drag it.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Wed, 17 Jan 2018 15:40:06 GMT

Can you provide a simplified sample app that demos your issue?

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 18:30:29 GMT

Hi Robert,

I am going to work on this with my tutor this afternoon.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 19:40:53 GMT

Off topic from this thread, but do you know how to add a close button to a content pane by chance?

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Wed, 17 Jan 2018 19:50:43 GMT

Brandon,

Switch to a TitlePane.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 19:59:00 GMT

Thanks Robert. This is what I have:

Or is it more complicated than this?

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Wed, 17 Jan 2018 20:16:59 GMT

At first glace it looks good.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 20:39:22 GMT

Hi Robert,

My pane still looks like the below. I also tried putting data-dojo-attach-point="closeButtonNode" in the title pane div instead of data-dojo-props="closable:true".

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Wed, 17 Jan 2018 21:36:29 GMT

Brandon,

From the looks of that image you are not parsing the layout dijits in your code or you do not have the right css files or class referenced in your project.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 23:13:28 GMT

Hi Robert,

I am using claro, but customized the title panel to not show the arrow node and resized the title pane. I would rather have a close "x" button like the tab container.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 23:13:49 GMT

This is what I have: <div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Postmile Selector', open:'true', closable:'true'" data-dojo-attach-point="closeButtonNode" class="PaneContent">

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 17 Jan 2018 23:24:28 GMT

My method doesn't work with the basemap gallery's title pane either in the sandbox.

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:53:27 GMT

Sounds like what you really need to use is the dojox floating pane as it is a pane that is already movable:

Note: you will see that the floating pane has a close button but that button destroys the pane and it contents so you do not use that, instead you use the dock button.

link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/dojox/layout/resources/FloatingPane.css" />‍

//require
"dojox/layout/FloatingPane",

//here is an snippet of how I use it.
fp = new FloatingPane({
        title: "Measure",
        closable: false,
        resizable: true,
        dockable: true,
        style: "position:absolute;top:250px;left:350px;width:260px;height:120px;visibility:hidden;",
        id: "wfp"
      }, dom.byId("divFloatingPane"));
      fp.startup();
      on(fp.dockNode, "click", function(evt) {
        measure.deactivate();
        removeCurrentSelTool();
        navToolbar.activate(Navigation.PAN);
        domClass.add(dom.byId("panmap"), "selected");
      });

//In my css I replace the dock arrow with a close button
.dojoxFloatingMinimizeIcon {
  background: url('../images/w_close.png') no-repeat center center;
  width: 21px;
  margin: 0px 4px;
  overflow: hidden;
  float: right;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

//to open the fp just call
fp.show();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can see this in action on my old Parcel Viewer site here (just click the measure button):

Calhoun County Parcel Viewer

Re: Content Pane Functionality is overrode when moveable (dnd) function is added

BrandonPrice — Wed, 24 Jan 2018 15:23:46 GMT

Thanks Robert. Thanks for this. Sorry for getting back to you so late on this. Out of curiosity, to make the title pane movable in an esri popup, you would use: (".title", map.infoWindow.domNode)[0];, what would be the syntax if you wanted to do the same thing for a dojo content pane? I would assume ".title" would be the same, but I am not sure about map.infoWindow.domNode.