Modal dialog in Calcite Maps template

LukePaine2 · ‎12-17-2018

I am attempting to add a modal dialog into the Calcite Maps template, as per the About box in the style explorer example found Calcite Maps - Style Explorer. Following the steps outlined below, I am able to get a modal dialog to display, but when I do, the panels cannot be closed - the x buttons do nothing.

Steps:

Download the calcite maps project from Github (GitHub - Esri/calcite-maps: A Bootstrap theme for designing, styling and creating modern map apps. )
Modify the samples/arcgis-3.x/arcgis-3.x.html reference Bootstrap 3.3 javascript library (as per instructions here Calcite Bootstrap)
Add a modal dialog and link to the nav bar to open it (based on sample at the Calcite Bootstrap link)

Running the sample, the modal opens fine but the panels (e.g. Info panel) can no longer be closed. Removing the Bootstrap reference means the panels can be closed, but the modal no longer works.

Any ideas? Full page code is below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="Calcite Maps Demo - ArcGIS">
  <meta name="author" content="">
  <link rel="icon" href="https://www.esri.com/favicon.ico">
  <title>Calcite Maps - ArcGIS Sample</title>

  <!-- Calcite Maps Bootstrap -->
  <link rel="stylesheet" href="../../dist/css/calcite-maps-bootstrap.min-v0.9.css">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="../../dist/css/calcite-maps-arcgis-3.x.min-v0.9.css"-->

  <!-- ArcGIS JS 3.x -->
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css">
          
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>

<body class="calcite calcite-maps calcite-nav-top calcite-margin-all calcite-zoom-top-left calcite-layout-inline-left">

  <!-- Navbar -->

  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-dark-purple">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
      <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Info</a></li>
        <li><a class="visible-xs" role="button" data-target="#panelSearch" aria-haspopup="true"><span class="glyphicon glyphicon-search"></span> Search</a></li>
        <li><a role="menuitem" tabindex="0" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li>
        <li><a role="menuitem" tabindex="0" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li>
        <li data-toggle="modal" data-target="#myModal"><a role="menuitem" tabindex="0" ><span class="glyphicon glyphicon-alert"></span> Modal</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Calcite Maps</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">Starter app for the ArcGIS API for JS 3.x (dojo)</span> 
    </div>
     <!-- Nav -->
    <ul class="calcite-nav nav navbar-nav">                    
      <li><div class="calcite-navbar-search hidden-xs"><div id="searchNavDiv"></div></div></li>
    </ul>
 
  </nav><!--/.navbar -->

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Map Container  -->

  <div class="calcite-map">
    <div id="mapViewDiv" class="calcite-map-absolute"></div>
  </div><!-- /.container -->

  <!-- Panel -->

  <div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">
          
    <!-- Info Panel -->
  
    <div id="panelInfo" class="panel collapse">
      <div id="headingInfo" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo"  aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Info</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>  
        </div>
      </div>
      <div id="collapseInfo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingInfo">
        <div class="panel-body">
          <p>The main styles used in this app are:</p>
          Body
          <li>calcite-nav-top</li>
          <li>calcite-layout-inline-left</li>
          <br>
          Nav
          <li>calcite-bgcolor-dark-purple</li>
          <li>calcite-text-light</li>
          <br>
          Panels
          <li>calcite-panels-right</li>
        </div>
      </div>
    </div>
  
    <!-- Search Panel -->

    <div id="panelSearch" class="panel collapse hidden-sm hidden-md hidden-lg">
      <div id="headingSearch" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSearch"  aria-expanded="false" aria-controls="collapseSearch"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="panel-label">Search</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelSearch"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>        
        </div>
      </div>
      <div id="collapseSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSearch">
        <div class="panel-body calcite-body-expander"> 
          <div id="searchPanelDiv"></div>
        </div>
      </div>
    </div>

    <!-- Basemaps Panel -->
    
    <div id="panelBasemaps" class="panel collapse"> 
      <div id="headingBasemaps" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps" aria-expanded="false"   aria-controls="collapseBasemaps"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Basemaps</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelBasemaps"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>  
        </div>
      </div>
      <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
        <div class="panel-body">
          <select id="selectBasemapPanel" class="form-control">
            <option value="streets" data-vector="vector-streets">Streets</option>
            <option value="satellite" data-vector="satellite">Satellite</option>
            <option value="hybrid" data-vector="hybrid">Hybrid</option>
            <option value="national-geographic" data-vector="national-geographic">National Geographic</option>
            <option value="topo" data-vector="vector-streets-relief">Topographic</option>
            <option value="gray" data-vector="vector-canvas-light">Gray</option>
            <option value="dark-gray" data-vector="vector-canvas-dark">Dark Gray</option>
            <option value="osm" data-vector="osm">Open Street Map</option>
            <option value="dark-gray" data-vector="vector-streets-night">Streets Night</option>
            <option value="streets" data-vector="vector-streets-mobile">Streets Mobile</option>
          </select>
        </div>
      </div>
    </div>

  </div> <!-- /.calcite-panels -->

  

    <script type="text/javascript">
      var dojoConfig = {
        packages: [{
          name: "bootstrap",
          //location: "https://esri.github.io/calcite-maps/dist/js/dojo-bootstrap"
          location: location.pathname.replace(/\/[^/]+$/, "") + "./../../dist/vendor/dojo-bootstrap"
        },
        {
          name: "calcite-maps",
          //location: "https://esri.github.io/calcite-maps/dist/js/dojo"
          location: location.pathname.replace(/\/[^/]+$/, "") + "./../../dist/js/dojo"
        }]
      };
    </script>

    <!-- ArcGIS JS 3.x -->
    <script src="https://js.arcgis.com/3.25/"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>

        var app;

        require([
          // ArcGIS
          "esri/map",
          "esri/dijit/Search",
          "dojo/query",

          // Calcite Maps
          "calcite-maps/calcitemaps-v0.9",
          
          // Bootstrap
          "bootstrap/Collapse", 
          "bootstrap/Dropdown",
          "bootstrap/Tab",

          "dojo/domReady!"
        ], function(Map, Search, query, CalciteMaps) {
             
          // App 
          app = {
            map: null,
            basemap: "dark-gray",
            center: [-40, 40], // lon, lat
            zoom: 3,
            initialExtent: null,
            searchWidgetNav: null,
            searchWidgetPanel: null
          }

          // Map 
          app.map = new Map("mapViewDiv", {
            basemap: app.basemap,
            center: app.center,
            zoom: app.zoom
          });

          app.map.on("load", function(){
            app.initialExtent = app.map.extent;
          })
    
          // Search
          app.searchDivNav = createSearchWidget("searchNavDiv");
          app.searchWidgetPanel = createSearchWidget("searchPanelDiv");

          function createSearchWidget(parentId) {
            var search = new Search({
              map: app.map,
              enableHighlight: false
              }, parentId);
            search.startup();
            return search;
          }

          // Basemaps
          query("#selectBasemapPanel").on("change", function(e){
            app.map.setBasemap(e.target.options[e.target.selectedIndex].value);
          });

          // Home
          query(".calcite-navbar .navbar-brand").on("click", function(e) {
            app.map.setExtent(app.initialExtent);
          })

        });
    </script>

</body>
</html>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎12-19-2018

Luke,

Here is my implementation of a modal dialog in a calcite map app:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="Calcite Maps Demo - ArcGIS">
  <meta name="author" content="">
  <link rel="icon" href="https://www.esri.com/favicon.ico">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <title>Calcite Maps - ArcGIS Sample</title>

  <!-- Calcite Maps Bootstrap -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.4.css">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-3.x.min-v0.4.css" -->

  <!-- ArcGIS JS 3.x -->
  <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/themes/calcite/esri/esri.css">

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .btn-info {
      position: absolute;
      z-index: 3002;
      top: 100px;
    }
  </style>
</head>

<body class="calcite calcite-maps calcite-nav-top calcite-margin-all calcite-zoom-top-left calcite-layout-inline-left">
  <!-- Bootstrap -->

  <div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Navbar -->
  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-dark-purple">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
      <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Info</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Calcite Maps</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">Starter app for the ArcGIS API for JS 3.x (dojo)</span>
    </div>
    <!-- Nav -->
    <ul class="calcite-nav nav navbar-nav">
      <li>
        <div class="calcite-navbar-search hidden-xs">
          <div id="searchNavDiv"></div>
        </div>
      </li>
    </ul>
  </nav>
  <!--/.navbar -->
  <!-- Map Container  -->
  <div class="calcite-map">
    <div id="mapViewDiv" class="calcite-map-absolute"></div>
  </div>
  <!-- /.container -->
  <!-- Panel -->
  <div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">
    <!-- Info Panel -->
    <div id="panelInfo" class="panel collapse">
      <div id="headingInfo" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Info</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
        </div>
      </div>
      <div id="collapseInfo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingInfo">
        <div class="panel-body">
          <p>Modal window:</p>
          <a href="" data-toggle="modal" data-target="#myModal">Open</a>
        </div>
      </div>
    </div>
  </div>
  <!-- /.calcite-panels -->
  <script type="text/javascript">
    var dojoConfig = {
      packages: [{
          name: "bootstrap",
          location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
        },
        {
          name: "calcite-maps",
          location: "https://esri.github.io/calcite-maps/dist/js/dojo"
        }
      ]
    };
  </script>
  <!-- ArcGIS JS 3.x -->
  <script src="https://js.arcgis.com/3.18/"></script>
  <script>
    var app;
    require([
      "esri/map",
      "esri/dijit/Search",
      "dojo/query",
      "calcite-maps/calcitemaps-v0.4",
      "bootstrap/Collapse",
      "bootstrap/Dropdown",
      "bootstrap/Tab",
      "dojo/domReady!"
    ], function(Map, Search, query, CalciteMaps) {
      // App
      app = {
        map: null,
        basemap: "dark-gray",
        center: [-40, 40], // lon, lat
        zoom: 3,
        initialExtent: null,
        searchWidgetNav: null,
        searchWidgetPanel: null
      }
      // Map
      app.map = new Map("mapViewDiv", {
        basemap: app.basemap,
        center: app.center,
        zoom: app.zoom
      });
      app.map.on("load", function() {
        app.initialExtent = app.map.extent;
      })
    });
  </script>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LukePaine2 · ‎01-02-2019

Thanks for replying Robert.

Same behaviour is still present though - you can't close the info dialog via the 'x' close button, which is exactly what I was seeing.

LukePaine2 · ‎01-02-2019

Tested in Chrome, IE, Firefox and Edge

RobertScheitlin__GISP · ‎01-03-2019

Luke,

I just tested my sample I provided in Chrome Version 71.0.3578.98 (Official Build) (64-bit) and in Firefox Qunatum 64.0 (64-bit) and IE 11 Version 11.0.9600.18282 and the close button and the X in the upper right works in all of them...

LukePaine2 · ‎01-03-2019

Interesting... I am using:

Chrome: Version 71.0.3578.98 (Official Build) (64-bit)
Firefox: 62.0.2 (64-bit)
IE: Version 11.2665.14393.0
Edge: 38.14393.2068.0

In each browser, the modal displays fine and can be closed via the cross. The issue is with the info panel - the cross on this does not work.

I published your page on our server using IIS - url is Calcite Maps - ArcGIS Sample. Does the same happen from your browser with this page?

RobertScheitlin__GISP · ‎01-03-2019

Luke,

OK now I see where the communication was breaking down. I did not do anything to the info panel the addition of the model popup is what I added and have working properly. I am not sure why the info panel close is failing. I just forgot to remove that from my sample.

KennethLindhardt1 · ‎05-22-2019

Did you guys ever found a solution to this? I got the exact same issue. I came as far as, it seems to be this blocking the X:

If you take a basic calcite and ad it to the code, it will brake the X function. I haven’t figured out in what order, when and why it brakes the X.

If you remove the: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

It will work again, but then the modal breaks

LukePaine2 · ‎05-22-2019

Best solution / workaround i have come up with is to register a click event on the .panel-close class through jquery.

<script type="text/javascript">
 $(document).ready(()=>{
    $(".panel-close").click(e => {
       $(e.currentTarget).closest(".panel").collapse("hide");
       e.stopPropagation();
    });
 })
</script>‍‍‍‍‍‍‍‍

This closes the panel and allows it to be re-opened, and the modal still works. The e.stopPropagation() line is important as it stops it from being re-opened (which I think was the issue).

It does cause some issues with the collapsing of the panels, but I disabled that functionality, which we can live with.