Customizing Dojo Dijit Dialog with Esri Widget Calcite Icons

600
5
Jump to solution
06-10-2019 06:06 AM
DenisGlibanovic
New Contributor III

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>

<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 addClass = domClass.add(".dijitDialogTitleBar", "esri-icon-arrow-right-circled");

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

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

DenisGlibanovic
New Contributor III

Robert,

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

0 Kudos
DenisGlibanovic
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
DenisGlibanovic
New Contributor III

super,

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

thank you again

0 Kudos