Multiple toggle buttons - disable toggle function for active button

Community Usage questions
1

I have a group of buttons: btnA, btnB, btnC, btnD, btnE
And using this little snippet on a script element (in combination with the linkId-functionality):

if (value == 0) return
for (var i=1;i<16;i++) {
var wid = 'color_button_'+i
if (wid != id) set(wid, 0)
}

...i get a button toggle group (only one button can be toggled at a time in the group).

Now, I want to make sure that the toggled button stays toggled (make sure that one button is toggled in each toggle group, at all times) - even if I click the toggled button, it should not de-activate.

How do I achieve this?

2

Try replacing the first line with this :

if (value == 0) {
  set(id, 1)
  return
}

Alternatively, you can add this to the matrix’ css (or to the panel that contain these buttons:

.button-container.on {
  pointer-events: none;
}

This will disable user interaction on active buttons in the container.

3

The JS-option wont work, because the ON-value is not always 1 (the value goes from 1 to 16 in each group). So i tried this instead, but it doesnt work (the id's in the first group are named: "color_button_1, color_button_2" e.t.c:

if (value == 0) {
v = id.split('_')
v = parseInt(v[2])
set(id, v)
return
}

How can I dump variables to console / log for debugging?

( I've tried adding the .css both on the specific buttons, and on the tab containing the whole layout, but neither works (1.0.0 beta9) )

4

You can write set(id, getProp(id, 'on')) to use the proper on value.

How can I dump variables to console / log for debugging?

console.log("the value is: ", value)

( I’ve tried adding the .css both on the specific buttons, and on the tab containing the whole layout, but neither works (1.0.0 beta9) )

The css will not work if set on the buttons directly (you'd have to write ":host.on" instead of ".widget-container.on"). I forgot to mention user interaction are not disabled while the editor is enabled.

5

Great, thanks!

6

@autonic please share with the community when you manage to solve a problem :slight_smile:
I am sure open stage control would be more used if we get more examples so please put the code that allows you to get the result.
so 4 buttons etc.
Hope i have convinced you !
Cheers

7

Sure… but the problem here is solved given jean emannuels answer…? or what do you mean?