Community Forums: Modify class="tokenaction" with JS

Modify class="tokenaction" with JS

April 09 (2 years ago)

Pro

Sheet Author

Hello, I wanted to do a checkbox for turn on/off Actions Tokens.
What I want is relativly simple, I just don't know the way.
When tickbox is 0, I want to change the name of "tokenaction" so it don't display on top left corner.
When tickbox is 1, it display.
There it is the html and my JS
My JS is working good, but tokenaction seem to be work in a strange way, I don't understand well :/

<div class="sheet-hidden">
    <button id="token1" type="roll" class='tokenaction' name='attr_actiontoken_fortitude' value="@{roll_fortitude}"></button>  
</div>

<select class="sheet-checkbox" name="attr_fortitude_tickbox">
    <option class="sheet-no" selected value="0">✗</option>
    <option class="sheet-yes" value="1">✓</option>
</select>

<script type="text/worker">
        on('change:fortitude_tickbox', function() {
            console.log("ChangeFortitude");
            getAttrs(["fortitude_tickbox"], function(values) {
                var fortitudeTickbox = parseInt(values["fortitude_tickbox"]) || 0;
                console.log(fortitudeTickbox);
                console.log(values);
                if (fortitudeTickbox == '1') {
                    console.log("Tickbox = 1");
                    console.log($20(".token"));
                    $20("#token1").addClass('tokenaction');
                    $20("#token1").removeClass('token');
                } else {
                    console.log("Tickbox = 0");
                    $20("#token1").removeClass('tokenaction');
                    $20("#token1").addClass('token');
                }
            });
          });
 </script>

April 10 (2 years ago)

Edited April 10 (2 years ago)

vÍnce

Pro

Sheet Author

Permalink Quote

For fun I tried this;

    on('change:fortitude_tickbox', function (eventInfo) {
      console.log(eventInfo);
      getAttrs(['fortitude_tickbox'], function (values) {
        const fortitudeTickbox = parseInt(values['fortitude_tickbox']) || 0;
        let button = $20('#token1');
        if (fortitudeTickbox === 1) {
          button.addClass('tokenaction');
          button.removeClass('token');
        } else {
          button.addClass('token');    
          button.removeClass('tokenaction');
        }
      });
    });

Which toggles the tokenaction class fine, but it doesn't seem to affect whether the action is displayed or not. ;-( Not sure if "tokenaction" works like other css classes in this situation since it's given special handling by roll20. My guess is that although you can add/remove the tokenaction class with jQuery, the vtt only parses it when you first open the sheet, but then the class state remains regardless if tokenaction is included/removed.

April 10 (2 years ago)

GiGs

Pro

Sheet Author

API Scripter

Permalink Quote

The input with class="tokenaction" still exists in the sheet, whether it is visible or not. Showing or hiding it doesnt affect how it works.

It's best to avoid class="tokenaction" because it gives users no control over whether it is displayed or not.

The best way to handle this would be to add an ability to characters hich contains the macro you want to run, and is set to token action (or disabled), and you could do this manually or with a Mod script. But this isn't a feature of a character sheet.

Cookie Preferences

Modify class="tokenaction" with JS