I am attempting my first custom widget - a fairly simple coordinate tool - using the new javscript/html/css. I started with the custom GoToXY tool and was playing around adding a bit a functionality and styling it up but I have an issue with buttons. I have tried to override the default button style by adding in baseClass:myButton and creating my own style in the style.css but I'm getting the changes I've asked for (the red line border around the Copy EN button in the image below) and I'm also getting a grey outline around the Copy EN button label too and I cannot seem to find where it is coming from. I've search for an answer and I'm thinking it is because the style is being overriding by something but I've used the developer tools on IE to try and find what it and still cannot find where the outline is from - can anyone enlighten me?
Here is the full code for the custom widget...
HTML
<div>
<div>
<div class="identify-tab-node" data-dojo-attach-point="tabNode3">
<div class="outerBox">
<div class="leader">Enter coordinates:</div>
<div class="wrapper">
E: <input
class="xyinput"
id="ProjXBox"
data-dojo-type="dijit/form/TextBox"
placeHolder="203331.090"
data-dojo-attach-point="ProjXBox"
data-dojo-props="intermediateChanges:true, placeHolder:'-80.7352016'">
</input>
N: <input
class="xyinput"
id="ProjYBox"
data-dojo-type="dijit/form/TextBox"
placeHolder="546315.655"
data-dojo-attach-point="ProjYBox"
data-dojo-props="intermediateChanges:true, placeHolder:'-80.7352016'">
</input>
</div>
<div id="GoTo_btn" data-dojo-attach-point="createPointIdNode"></div>
<div id="GoTo_btn1" data-dojo-attach-point="removePointIdNode"></div>
</div>
</div>
</div>
<br>
<div class="outerBox">
<div class="leader">Get coordinates:</div>
<div class="wrapper">
E: <div class="xyresult" id="CurrentX">Click Map</div>
N: <div class="xyresult" id="CurrentY">Click Map</div>
</div>
<div data-dojo-attach-point="copyToClipboardNode"></div>
</div>
CSS
.jimu-widget-panel .jimu-foldable-dijit .jimu-foldable-panel {
position:relative;
width:360px;
height:150px;
min-width:150px;
min-height:150px;
}
.jimu-widget-GoToXY {
position:relative;
width:100%;
height:20%;
min-width:150px;
min-height:150px;
}
.jimu-widget-GoToXY:hover {
}
path[data-uniquevalue="GoToXY"] {
fill: none;
stroke: #009900;
stroke-width: 3;
stroke-opacity: 0.85;
stroke-linecap: round;
stroke-linejoin: round;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: pulse2;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-moz-animation-name: pulse2;
}
@-webkit-keyframes pulse2 {
0% {
opacity: 0.55;
stroke-width: 25k;
stroke: #339966;
}
45% {
opacity: 0.7;
stroke-width: 15;
stroke: #00cc66;
}
100% {
opacity: 0.8;
stroke-width: 2;
stroke: #009933;
}
}
@-moz-keyframes pulse2 {
0% {
opacity: 0.55;
stroke-width: 25;
stroke: #339966;
}
45% {
opacity: 0.7;
stroke-width: 15;
stroke: #00cc66;
}
100% {
opacity: 0.85;
stroke-width: 2;
stroke: #009933;
}
}
#GoTo_btn {
display: inline-block;
}
#GoTo_btn1 {
display: inline-block;
}
.leader {
text-align: left;
font-size: 18;
font-weight: bold;
padding: inherit;
}
.outerBox {
border: 1px solid #d0d0e2;
border-radius: 5px;
background-color: #efeff5;
padding: 5px 10px;
text-align: right;
}
.wrapper{
text-align: center;
padding: 5px 10px;
}
.xyinput{
margin: auto;
width: 37%;
display:inline-block;
border: 1px solid black;
border-radius: 5px;
padding: 2px 15px;
background-color: #ffffff;
color: #888;
}
.xyresult{
margin: auto;
width: 37%;
display:inline-block;
border: 1px solid black;
border-radius: 5px;
padding: 2px 15px;
background-color: #ffffff;
color: #888;
}
.myButton{
border-radius:6px;
border:1px solid red;
cursor:pointer;
color:#777777;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:5px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
and the javascript
define([
'dojo/_base/declare',
'jimu/BaseWidget',
'jimu/utils',
'dijit/form/Button',
'esri/symbols/SimpleMarkerSymbol',
'esri/geometry/Point',
'esri/graphic',
'esri/layers/GraphicsLayer',
'esri/Color',
'dojo/on',
'dojo/_base/lang',
'dojo/query',
'esri/map',
"esri/geometry/webMercatorUtils",
"dojo/dom"
],
function(
declare,
BaseWidget,
utils,
Button,
SimpleMarkerSymbol,
Point,
Graphic,
GraphicsLayer,
Color,
on,
lang,
query,
Map,
webMercatorUtils,
dom
)
{
return declare([BaseWidget],
{
name: 'GoToXY', baseClass: 'jimu-widget-GoToXY',
postCreate: function()
{
console.log("postCreate!");
var mapFrame = this;
this.inherited(arguments);
this.addPointsButton = new Button({label: "Go to"}).placeAt(this.createPointIdNode);
this.clearPointsButton = new Button({label: "Clear"}).placeAt(this.removePointIdNode);
this.copyToClipboardButton = new Button({label:"Copy EN", baseClass: "myButton"}).placeAt(this.copyToClipboardNode);
this.addPointsButton.startup();
},
startup: function()
{
console.log("startup!");
this.layer = new GraphicsLayer({dataAttributes:["id"]});
if (this.layer.surfaceType === "svg")
{
on(this.layer, "graphic-draw", function (evt)
{
console.log("graphic-draw");
var renderercategory;
renderercategory = "GoToXY";
evt.node.setAttribute("data-uniquevalue", renderercategory);
});
}
this.map.addLayer(this.layer);
on(this.addPointsButton, "click", lang.hitch(this, "createPoint"));
on(this.clearPointsButton, "click", lang.hitch(this, "clearPoint"));
on(this.copyToClipboardButton, "click", lang.hitch(this, "copyXY"));
on(this.map, "click", lang.hitch(this, "getXY"));
console.log("this.map: ", this.map);
},
getXY: function(evt)
{
var mp = evt.mapPoint;
dom.byId("CurrentX").innerHTML = mp.x.toFixed(3);
dom.byId("CurrentY").innerHTML = mp.y.toFixed(3);
},
copyXY: function()
{
var curX = dom.byId("CurrentX").innerHTML;
var curY = dom.byId("CurrentY").innerHTML;
query(".xyresult").style("border", "2px solid #ff4d4d");
setTimeout(function()
{
query(".xyresult").style("border", "1px solid black");
},300);
var xy = curX + ", "+ curY;
var aux = dojo.create("input");
aux.setAttribute("value", xy);
dojo.doc.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
},
createPoint: function()
{
var xx=Number(dom.byId("ProjXBox").value);
var yy=Number(dom.byId("ProjYBox").value);
console.log("createPoint!");
var ZoomIt = Number(3);
var sympath = "M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16.125c-3.383 0-6.125-2.742-6.125-6.125s2.742-6.125 6.125-6.125 6.125 2.742 6.125 6.125-2.742 6.125-6.125 6.125zM12.125 10c0-2.14 1.735-3.875 3.875-3.875s3.875 1.735 3.875 3.875c0 2.14-1.735 3.875-3.875 3.875s-3.875-1.735-3.875-3.875z";
var symcolor = "#ff0000";
var sym = new SimpleMarkerSymbol();
sym.setPath(sympath);
sym.setColor(new Color(symcolor));
sym.setOutline(null);
sym.setSize("30");
var randx = document.getElementById("ProjXBox").value;
var randy = document.getElementById("ProjYBox").value;
var attr = {"id":"rand"};
var zoomPoint = new esri.geometry.Point(Number(randx),Number(randy), this.map.spatialReference);
this.map.centerAndZoom(zoomPoint,10);
var pt = new Point(randx, randy, this.map.spatialReference);
pntd=new Graphic(pt, sym, attr);
this.layer.add(pntd);
},
clearPoint: function()
{
this.layer.clear();
}
});
});
Many thanks for any pointers in advance.