topic Re: Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons in ArcGIS JavaScript Maps SDK Questions

Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

Den-GIS — Mon, 10 Jun 2019 13:06:03 GMT

I would like to customize Dojos class ".dijtDialogTitleBar". My wish is to add a new Esri-Calcite icon (esri-icon-arrow-right-circled \ ue636), for example in the lower right corner, and an event handler on this new Calcite Icon. For example, if I click on the icon in the Basemap Gallery, the Layer List widget will open as a new Dojo dialog.

I have added my code with built-in Basemap Gallery and Layer List Widget to dojo dialog.
I tried to solve this with the method addClass () from dojo, unfortunately not much further.

I appreciate any help!

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DijitDialogTitleBar</title>
<style>
html,
body,
#viewDiv {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.dijitOffScreen {
display: none;
}

.dijitReset.dijitToggleButtonIconChar {
display: none;
}

#basemapButton {
position: absolute;
padding: 5px;
padding-left: 10px!important;
left: 70px;
top: 40px;
width: 26px;
height: 28px;
color: #242415;
line-height: 28px;
background-color: #fffff2;
font-size: 18px;
cursor: pointer;
}

#basemapButton:hover {
background-color: #aaaaaa;
}

#layerListButton {
position: absolute;
padding: 5px;
padding-left: 10px!important;
left: 130px;
top: 40px;
width: 26px;
height: 28px;
line-height: 28px;
color: #242415;
background-color: #fffff2;
font-size: 18px;
cursor: pointer;
}

#layerListButton:hover {
background-color: #aaaaaa;
}

.dijitDialogTitleBar {
position: relative!important;
top: -130px!important;
right: 190px!important;
width: 310px !important;
height: 70px !important;
border: 1px solid #cccccc!important;
background-color: #2d00b3!important;
background-image: none !important;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-size: 15px;
font-weight: bold;
text-align: center;
color: #fff!important;
z-index: -50;
cursor: default;
}

.dijitDialogPaneContent {
position: relative!important;
top: -130px!important;
right: 190px!important;
width: 310px !important;
height: 500px !important;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-size: 9px;
font-weight: normal;
overflow: auto;
}

.dijitDialogTitle {
position: relative!important;
top: 13px!important;
padding: 0 1px;
font-size: 1.091em;
color: #fff!important;
}

.dijitDialogCloseIcon {
position: absolute!important;
top: 5px!important;
right: 10px!important;
display: inline-block;
text-decoration: none;
background: #7373ff;
color: #FFF;
width: 20px;
height: 20px;
line-height: 18px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
transition: .4s;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
</head>

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/Dialog",
"dijit/form/Button",
"dijit/Toolbar",

"dojo/on",
"dojo/dom",
"dojo/query",
"dojo/mouse",
"dojo/dom-class",
"dojo/dom-style",
"dojo/dom-construct",
"dojo/fx/Toggler",
"dojo/domReady!"
], function(Map, MapView, Search, BasemapGallery, LayerList, Expand, BorderContainer, ContentPane, TitlePane, Dialog, Button, Toolbar, on, dom, query, mouse, domClass, domStyle, domConstruct, Toggler) {

// Map View
/**************************************/
var map = new Map({
basemap: "osm",
});

var view = new MapView({
id: "view",
container: "viewDiv",
zoom: 4,
center: [-95, 45],
map: map
});

// Seearch Widget
/**************************************/
var searchWidget = new Search({
view: view,
container: "searchWidget",
locationEnabled: false
});

view.ui.add(searchWidget, "top-left");

// Basemap Gallery Widget > Dojo Dialog
/**************************************/
var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});

var basemapDialog = new Dialog({
title: "Basemaps",
style: "width: 300px"
});

var basemapButton = new Button({
iconClass: "esri-icon-basemap",
showLabel: true,
onClick: function() {
basemapDialog.set("content", basemapGallery);
basemapDialog.show();
}
}, "basemapButton").startup();

// Layer List Widget > Dojo Dialog
/**************************************/
var layerList = new LayerList({
view: view,
container: document.createElement("div")
});

var layerListDialog = new Dialog({
title: "Layer",
style: "width: 300px"
});

var layerListButton = new Button({
// label: "Layers",
iconClass: "esri-icon-layers",
showLabel: true,
onClick: function() {
layerListDialog.set("content", layerList);
layerListDialog.show();
}
}, "layerListButton").startup();

var domNodes= query('.dijitDialogTitleBar', this.domNode);
var addClass = domClass.add(".dijitDialogTitleBar", "esri-icon-arrow-right-circled");

});
</script>
<div id="viewDiv">
<button id="basemapButton" </button>
<button id="layerListButton" </button>
</div>
</body>

</html>

Re: Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:21:38 GMT

Denis,

Here is what I believe you are wanting:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DijitDialogTitleBar</title>
  <style>
    html,
    body,
    #viewDiv {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }

    .dijitOffScreen {
      display: none;
    }

    .dijitReset.dijitToggleButtonIconChar {
      display: none;
    }

    #basemapButton {
      position: absolute;
      padding: 8px 8px 4px 8px;
      left: 70px;
      top: 40px;
      color: #242415;
      background-color: #fffff2;
      font-size: 18px;
      cursor: pointer;
    }

    #basemapButton:hover {
      background-color: #aaaaaa;
    }

    #layerListButton {
      position: absolute;
      padding: 8px 8px 4px 8px;
      left: 130px;
      top: 40px;
      color: #242415;
      background-color: #fffff2;
      font-size: 18px;
      cursor: pointer;
    }

    #layerListButton:hover {
      background-color: #aaaaaa;
    }

    .dijitDialogTitleBar {
      position: relative !important;
      top: -110px !important;
      right: 190px !important;
      width: 310px !important;
      height: 50px !important;
      border: 1px solid #cccccc !important;
      background-color: #2d00b3 !important;
      background-image: none !important;
      font-family: "Helvetica Neue", "Arial", sans-serif;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      color: #fff !important;
      z-index: -50;
      cursor: default;
    }

    .dijitDialogPaneContent {
      position: relative !important;
      top: -110px !important;
      right: 190px !important;
      width: 310px !important;
      height: 500px !important;
      font-family: "Helvetica Neue", "Arial", sans-serif;
      font-size: 9px;
      font-weight: normal;
      overflow: auto;
    }

    .dijitDialogTitle {
      position: relative !important;
      top: 13px !important;
      padding: 0 1px;
      font-size: 1.091em;
      color: #fff !important;
    }

    .dijitDialogCloseIcon {
      position: absolute !important;
      top: 5px !important;
      right: 10px !important;
      display: inline-block;
      text-decoration: none;
      background: #7373ff;
      color: #FFF;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
      transition: .4s;
    }
    
    .myBtn {
      position: relative;
      top: 30px;
      right: -91px;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
  <script src="https://js.arcgis.com/4.11/"></script>
</head>

<body class="claro">

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Search",
      "esri/widgets/BasemapGallery",
      "esri/widgets/LayerList",
      "esri/widgets/Expand",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/Dialog",
      "dijit/form/Button",
      "dijit/Toolbar",

      "dojo/on",
      "dojo/dom",
      "dojo/query",
      "dojo/mouse",
      "dojo/dom-class",
      "dojo/dom-style",
      "dojo/dom-construct",
      "dojo/fx/Toggler",
      "dojo/domReady!"
    ], function (Map, MapView, Search, BasemapGallery, LayerList, Expand, BorderContainer, ContentPane, TitlePane,
      Dialog, Button, Toolbar, on, dom, query, mouse, domClass, domStyle, domConstruct, Toggler) {

      // Map View
      /**************************************/
      var map = new Map({
        basemap: "osm",
      });

      var view = new MapView({
        id: "view",
        container: "viewDiv",
        zoom: 4,
        center: [-95, 45],
        map: map
      });

      // Seearch Widget
      /**************************************/
      var searchWidget = new Search({
        view: view,
        container: "searchWidget",
        locationEnabled: false
      });

      view.ui.add(searchWidget, "top-left");


      // Basemap Gallery Widget > Dojo Dialog
      /**************************************/
      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      var basemapDialog = new Dialog({
        title: "Basemaps",
        style: "width: 300px"
      });

      var basemapButton = new Button({
        iconClass: "esri-icon-basemap",
        showLabel: true,
        onClick: function () {
          basemapDialog.set("content", basemapGallery);
          basemapDialog.show();
        }
      }, "basemapButton").startup();


      // Layer List Widget > Dojo Dialog
      /**************************************/
      var layerList = new LayerList({
        view: view,
        container: document.createElement("div")
      });

      var layerListDialog = new Dialog({
        title: "Layer",
        style: "width: 300px"
      });

      var layerListButton = new Button({
        // label: "Layers",
        iconClass: "esri-icon-layers",
        showLabel: true,
        onClick: function () {
          layerListDialog.set("content", layerList);
          layerListDialog.show();
        }
      }, "layerListButton").startup();


      var domNodes = query('.dijitDialogTitleBar', this.domNode);
      var llBtn = domConstruct.create('div', {"title":"Open LayerList", style:{"cursor":"pointer"}});
      domConstruct.place(llBtn, domNodes[0]);
      domClass.add(llBtn, "esri-icon-arrow-right-circled");
      domClass.add(llBtn, "myBtn");
      on(llBtn,'click', function(){
        basemapDialog.hide();
        layerListDialog.set("content", layerList);
        layerListDialog.show();
      });


    });
  </script>
  <div id="viewDiv">
    <div id="basemapButton"></div>
    <div id="layerListButton"></div>
  </div>
</body>

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

Re: Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

Den-GIS — Mon, 10 Jun 2019 15:23:16 GMT

Robert,

Great, that's what I was looking for.
Many Thanks.

Re: Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

Den-GIS — Tue, 11 Jun 2019 09:31:12 GMT

Robert,

I tested this little app on the Internet Explorer. Unfortunately there are problems, that the dojo dialog is only opened once. If you try several times the .dojoContentPane does not respond. I do not get it. In all other browsers it works well.
An idea why in IE does not work?

thanks

Re: Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:21:41 GMT

Denis,

This is the fix for all browsers:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DijitDialogTitleBar</title>
  <style>
    html,
    body,
    #viewDiv {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dijitOffScreen {
      display: none;
    }

    .dijitReset.dijitToggleButtonIconChar {
      display: none;
    }

    #basemapButton {
      position: absolute;
      padding: 8px 8px 4px 8px;
      left: 70px;
      top: 40px;
      color: #242415;
      background-color: #fffff2;
      font-size: 18px;
      cursor: pointer;
    }

    #basemapButton:hover {
      background-color: #aaaaaa;
    }

    #layerListButton {
      position: absolute;
      padding: 8px 8px 4px 8px;
      left: 130px;
      top: 40px;
      color: #242415;
      background-color: #fffff2;
      font-size: 18px;
      cursor: pointer;
    }

    #layerListButton:hover {
      background-color: #aaaaaa;
    }

    .dijitDialogTitleBar {
      position: relative !important;
      top: -110px !important;
      right: 190px !important;
      width: 310px !important;
      height: 50px !important;
      border: 1px solid #cccccc !important;
      background-color: #2d00b3 !important;
      background-image: none !important;
      font-family: "Helvetica Neue", "Arial", sans-serif;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      color: #fff !important;
      z-index: -50;
      cursor: default;
    }

    .dijitDialogPaneContent {
      position: relative !important;
      top: -110px !important;
      right: 190px !important;
      width: 310px !important;
      height: 500px !important;
      font-family: "Helvetica Neue", "Arial", sans-serif;
      font-size: 9px;
      font-weight: normal;
      overflow: auto;
    }

    .dijitDialogTitle {
      position: relative !important;
      top: 13px !important;
      padding: 0 1px;
      font-size: 1.091em;
      color: #fff !important;
    }

    .dijitDialogCloseIcon {
      position: absolute !important;
      top: 5px !important;
      right: 10px !important;
      display: inline-block;
      text-decoration: none;
      background: #7373ff;
      color: #FFF;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
      transition: .4s;
    }
    
    .myBtn {
      position: relative;
      top: 30px;
      right: -91px;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
  <script src="https://js.arcgis.com/4.11/"></script>
</head>

<body class="claro">

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Search",
      "esri/widgets/BasemapGallery",
      "esri/widgets/LayerList",
      "esri/widgets/Expand",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/Dialog",
      "dijit/form/Button",
      "dijit/Toolbar",

      "dojo/on",
      "dojo/dom",
      "dojo/query",
      "dojo/mouse",
      "dojo/dom-class",
      "dojo/dom-style",
      "dojo/dom-construct",
      "dojo/fx/Toggler",
      "dojo/domReady!"
    ], function (Map, MapView, Search, BasemapGallery, LayerList, Expand, BorderContainer, ContentPane, TitlePane,
      Dialog, Button, Toolbar, on, dom, query, mouse, domClass, domStyle, domConstruct, Toggler) {

      // Map View
      /**************************************/
      var map = new Map({
        basemap: "osm",
      });

      var view = new MapView({
        id: "view",
        container: "viewDiv",
        zoom: 4,
        center: [-95, 45],
        map: map
      });

      // Seearch Widget
      /**************************************/
      var searchWidget = new Search({
        view: view,
        container: "searchWidget",
        locationEnabled: false
      });

      view.ui.add(searchWidget, "top-left");


      // Basemap Gallery Widget > Dojo Dialog
      /**************************************/
      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      var basemapDialog = new Dialog({
        title: "Basemaps",
        style: "width: 300px",
        content: basemapGallery
      });

      var basemapButton = new Button({
        iconClass: "esri-icon-basemap",
        showLabel: true,
        onClick: function () {
          basemapDialog.show();
        }
      }, "basemapButton").startup();


      // Layer List Widget > Dojo Dialog
      /**************************************/
      var layerList = new LayerList({
        view: view,
        container: document.createElement("div")
      });

      var layerListDialog = new Dialog({
        title: "Layer",
        style: "width: 300px",
        content: layerList
      });

      var layerListButton = new Button({
        iconClass: "esri-icon-layers",
        showLabel: true,
        onClick: function () {
          layerListDialog.show();
        }
      }, "layerListButton").startup();


      var domNodes = query('.dijitDialogTitleBar', this.domNode);
      var llBtn = domConstruct.create('div', {"title":"Open LayerList", style:{"cursor":"pointer"}});
      domConstruct.place(llBtn, domNodes[0]);
      domClass.add(llBtn, "esri-icon-arrow-right-circled");
      domClass.add(llBtn, "myBtn");
      on(llBtn,'click', function(){
        basemapDialog.hide();
        layerListDialog.show();
      });


    });
  </script>
  <div id="viewDiv">
    <div id="basemapButton"></div>
    <div id="layerListButton"></div>
  </div>
</body>

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

Re: Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

Den-GIS — Tue, 11 Jun 2019 19:46:30 GMT

super,

man, you have to set up an account for the tip ; )

thank you again