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

[AdrianMarsden]

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.

[RobertScheitlin__GISP]

Adrian,

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

[AdrianMarsden]

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