Navigation Buttons - Active Marker - AMD version

[AdrianMarsden]

Hi

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

[RobertScheitlin__GISP · Accepted solution]

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");
    }
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AdrianMarsden]

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

[RobertScheitlin__GISP]

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

[AdrianMarsden]

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/

[AdrianMarsden]

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

Cheers

[RobertScheitlin__GISP]

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

[AdrianMarsden]

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.

[RobertScheitlin__GISP]

Changing the checked attribute does not work?

[AdrianMarsden]

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.