Hi Robert!
I'm 99 percent of the way there with the Navigation widget. It now deactivates onclose, and I added in the remaining navigation functions. The last thing I'm trying to accomplish is to have the buttons change color when selected. I figured that jQuery was the best approach. What I have below works in JSFiddle, but not in WAB Developer. If you have a second, do you see what I'm missing or doing wrong? Also, once this is done, I'd like to post this widget to the custom widget resource section of GeoNet if that's OK. Thanks again!!!
JS:
define([
'dojo/_base/declare',
'dojo/_base/lang',
'jimu/BaseWidget',
'dojo/on',
'esri/toolbars/navigation',
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js'
],
function(declare, lang, BaseWidget, on, Navigation, $) {
var clazz = declare([BaseWidget], {
name: 'Navigation',
baseClass: 'widget-Navigation',
navToolbar: null,
startup: function() {
this.navToolbar = new Navigation(this.map);
this.own(on(this.zoomIn, 'click', lang.hitch(this, function() {
this.navToolbar.activate(Navigation.ZOOM_IN);
})));
this.own(on(this.zoomOut, 'click', lang.hitch(this, function() {
this.navToolbar.activate(Navigation.ZOOM_OUT);
})));
this.own(on(this.zoomPrevious, 'click', lang.hitch(this, function() {
this.navToolbar.zoomToPrevExtent();
})));
this.own(on(this.zoomNext, 'click', lang.hitch(this, function() {
this.navToolbar.zoomToNextExtent();
})));
$('.main .btn').click(function (evt) {
$('.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
$(document).click(function () {
$('.main .btn').removeClass('selected');
});
},
onClose: function() {
this.navToolbar.deactivate();
}
});
return clazz;
});
HTML:
<div class='main'>
<label><b>${nls.selectNavigation}</b></label>
<br/><br/>
<div data-dojo-attach-point="zoomIn" class='btn'>
<img src='widgets/sNavigation/images/zoom-in.png' style='width:35px; height:35px; margin:5px;'> </img>
</div>
<br/>
<div data-dojo-attach-point="zoomOut" class='btn'>
<img src='widgets/sNavigation/images/zoom-out.png' style='width:35px; height:35px; margin:5px;'> </img>
</div>
<br/>
<div data-dojo-attach-point="zoomPrevious" class='btn'>
<img src='widgets/sNavigation/images/zoom-previous.png' style='width:35px; height:35px; margin:5px;'> </img>
</div>
<br/>
<div data-dojo-attach-point="zoomNext" class='btn'>
<img src='widgets/sNavigation/images/zoom-next.png' style='width:35px; height:35px; margin:5px;'> </img>
</div>
</div>
CSS:
.widget-Navigation .selected {
color: rgba(255, 255, 255);
background-color: #999;
background-color: rgba(0, 0, 0, 0.4);
width: 45px;
height: 45px;
}
.widget-Navigation {
font-size:medium;
}
.widget-Navigation .btn{
background-color: #ccc;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid #000000;
border: 1px solid rgba(0, 0, 0, 0.4);
width: 45px;
height: 45px;
}
.widget-Navigation .btn:hover{
color: rgba(255, 255, 255);
background-color: #999;
background-color: rgba(0, 0, 0, 0.4);
width: 45px;
height: 45px;
}
