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
Solved! Go to 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");
}
});
});
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");
}
});
});
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
So the widget not the dom node is different from your tool var?
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/
Doh - Of course, sorry, re-read your last post, plus my code - I was comparing wrong variable "widget" is the one I needed.
Cheers
So did that work? If so be sure to mark this question as answered.
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.
Changing the checked attribute does not work?
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.