topic Re: Navigation Buttons - Active Marker - AMD version in ArcGIS JavaScript Maps SDK Questions

Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Sat, 11 Dec 2021 10:05:07 GMT

I'm slowly refactoring my legacy app into AMD style. I have code to change the style of the navigation buttons

function toggleButtonIcon(tool) { //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
 registry.byId.byClass("dijit.form.ToggleButton").forEach(function (togbtn) {
 
 if (togbtn == tool) {
 togbtn.attr("checked", true);
 } else {
 togbtn.attr("checked", false);
 }
 });
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and am having difficulty working out the AMD alternative form ByClass, as it seems to have changed -

dijit/registry — The Dojo Toolkit - Reference Guide

Note that for backwards compatibility, the dijit.registry global variable (as opposed to the dijit/registry module) includes array iterator methods (forEach, filter, byClass, map, every, and some). However, AMD code should not expect these functions to be available in the Object returned from require([“dijit/registry”]).

My ideal is that my code will need not much, if any, change for the v4 API when all the features I use are in it, so I don't really want to have anything that will break later.

Any help gratefully received!

Cheers

ACM

edit I have now got as far as

function toggleButtonIcon(tool) { 
 var domNodes= query('.dijitToggleButton', this.domNode);
 domNodes.forEach(function(domNode){
 var widget= registry.getEnclosingWidget(domNode);
 console.log(domNode)
 console.log(tool)
 if (domNode == tool.innerHTML) {
 console.log("yay")
 } else {
 console.log("nay")
 }
 })‍‍‍‍‍‍‍‍‍‍‍‍

But the Dojo query is returning the node whilst I am getting the full object passed into the function. My brain is tired and I can't work out how to compare the two ? I'll investigate getting the id out of the node

Re: Navigation Buttons - Active Marker - AMD version

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:05:10 GMT

ACM,

You should just compare the tool to the widget in your code.

function toggleButtonIcon(tool) { 
  var domNodes = query('.dijitToggleButton', this.domNode);
  domNodes.forEach(function(domNode){
    var widget= registry.getEnclosingWidget(domNode);
    console.log(domNode);
    console.log(tool);
    if (widget == tool) {
      console.log("yay");
    } else {
      console.log("nay");
    }
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Mon, 19 Feb 2018 16:59:49 GMT

Sorry, I should have said - I tried that first.

The two things aren't the same - this is doimnode

<span class="dijit dijitReset dijitInline dijitToggleButton dijitToggleButtonChecked dijitChecked" role="presentation" widgetid="pan"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation"><span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="pan_label" tabindex="0" id="pan" style="user-select: none;" aria-pressed="true"><span class="dijitReset dijitInline dijitIcon dijitCheckBoxIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText" id="pan_label" data-dojo-attach-point="containerNode">Pan</span></span></span><input type="button" value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" aria-hidden="true" data-dojo-attach-point="valueNode"></span>‍‍

Whilst "tool" is a full object - image as easier to show.

In the Chrome Console

Cheers

ACM

Re: Navigation Buttons - Active Marker - AMD version

RobertScheitlin__GISP — Mon, 19 Feb 2018 17:03:50 GMT

So the widget not the dom node is different from your tool var?

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Sat, 11 Dec 2021 10:05:13 GMT

What is returned by the click event of the button :

registry.byId("pan").on("click", function () {
 navToolbar.activate(Navigation.PAN);
 toggleButtonIcon(this)
 });‍‍‍‍

Is the full object., whilst what gets returned from a dojo query is the node

Now, I can return the id of the object - that's easy, but can't seem to find a way of returning the id of the node.

Many thanks for your time. Sorry if I am getting terminology a bit wrong/

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Mon, 19 Feb 2018 17:14:33 GMT

Doh - Of course, sorry, re-read your last post, plus my code - I was comparing wrong variable "widget" is the one I needed.

Cheers

Re: Navigation Buttons - Active Marker - AMD version

RobertScheitlin__GISP — Mon, 19 Feb 2018 17:17:43 GMT

So did that work? If so be sure to mark this question as answered.

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Mon, 19 Feb 2018 17:21:15 GMT

Yes, I'll do that, and add the final code when done - the logic is workimng, just can't get the old button to uncheck, but I'll work that out (hopefully) - odd the button gets the attribute changed, but the tick I use to show active is still there until I move the mouse over it.

Re: Navigation Buttons - Active Marker - AMD version

RobertScheitlin__GISP — Mon, 19 Feb 2018 17:27:44 GMT

Changing the checked attribute does not work?

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Sat, 11 Dec 2021 10:05:16 GMT

Sorry, missed your reply - I had edited earlier post.

yes setting checked "works" so code is now

function toggleButtonIcon(tool) { 
 var domNodes= query('.dijitToggleButton', this.domNode);
 domNodes.forEach(function(domNode){
 var widget= registry.getEnclosingWidget(domNode);
if (widget == tool) {
 dojo.attr(widget, "checked", true); 
 } else {
 dojo.attr(widget, "checked", false); 
 
 
 }
})
}‍‍‍‍‍‍‍‍‍‍‍‍‍

But the tick (the style I have to indicate the checked status" stays put until I mouse over the button - then it goes as the button gets the mouse over effect.

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Sat, 11 Dec 2021 10:05:19 GMT

OK - in case anyone wants the full answer this is the AMD version of the function

        function toggleButtonIcon(tool) { 
            var domNodes= query('.dijitToggleButton', this.domNode);
            domNodes.forEach(function(domNode){
                var widget= registry.getEnclosingWidget(domNode);

                if (widget == tool) {
                    dojo.attr(widget, "checked", true);   
                     
               
             } else {
                    dojo.attr(widget, "checked", false); 
                                
                                                  
             }
             widget.focus()
              
            })
tool.focus()
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Not only does it now use the dojo query, but it also needed a focus() to make only one appear active - the hack way I've done it is to set the focus to each of the results ond then at the end set it back to the one clicked - there maybe a better way, but this works.

Re: Navigation Buttons - Active Marker - AMD version

RobertScheitlin__GISP — Mon, 19 Feb 2018 21:59:25 GMT

Adrian,

Have you tried without the widget.focus(); and just the tool.focus();?

Re: Navigation Buttons - Active Marker - AMD version

AdrianMarsden — Tue, 20 Feb 2018 07:56:49 GMT

Yep. And with widget.blur(). Odd. Changing the actual text in the non-active buttons is instant, but I guess as the Tick marker is CSS controlled it needs some event to trigger the refresh. I guessing. Anyway, all working - I never claimed any of my "code" is elegant!

Many thanks