Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Disabling controls from a sheet worker

My skills with javascript are sadly lacking, but I want to have a control that, when checked locks certain other controls on the sheet. I have a checkbox controlling an attribute on the character sheet: Locked <label>     <input type="checkbox"  name="attr_locked" value="0">     <span data-i18n="sheet-locked">Sheet Locked</span> </label> When the checkbox is checked, I want to disable a bunch of controls on the sheet: I don't think I can do it by css class, but handling it by name will be acceptable enough, I think. For reference, the controls I want to disable are the just the radio buttons (for the "dots" on the sheet), and they're all of the same general form: <div class="sheet-trait"> <label>     <input type="checkbox" name="attr_meleefav" value="1"><span></span>     <span data-i18n="melee">Melee</span> </label> <div class="sheet-roller"><button type="roll" class="sheet-roll-tiny" name="roll_MeleeCast" value= "!exr skillCheck @{character_id}|Melee|?{Attribute|Strength|Dexterity|Stamina|Charisma|Manipulation|Appearance|Perception|Intelligence|Wits}|?{Modifier|0}">Roll</button></div> <div class="sheet-dots">     <input type="radio" class="sheet-dots0" name="attr_melee" value="0" checked="checked"><span></span>     <input type="radio" class="sheet-dots1" name="attr_melee" value="1"><span></span>     <input type="radio" class="sheet-dots2" name="attr_melee" value="2"><span></span>     <input type="radio" class="sheet-dots3" name="attr_melee" value="3"><span></span>     <input type="radio" class="sheet-dots4" name="attr_melee" value="4"><span></span>     <input type="radio" class="sheet-dots5" name="attr_melee" value="5"><span></span>     <input type="radio" class="sheet-dots6" name="attr_melee" value="6"><span></span>     <input type="radio" class="sheet-dots7" name="attr_melee" value="7"><span></span>     <input type="radio" class="sheet-dots8" name="attr_melee" value="8"><span></span>     <input type="radio" class="sheet-dots9" name="attr_melee" value="9"><span></span>     <input type="radio" class="sheet-dots10" name="attr_melee" value="10"><span></span> </div> </div><!-- /sheet-trait melee --> <div class="sheet-trait"> <label>     <input type="checkbox" name="attr_occultfav" value="1"><span></span>     <span data-i18n="occult">Occult</span> </label> <div class="sheet-roller"><button type="roll" class="sheet-roll-tiny" name="roll_OccultCast" value= "!exr skillCheck @{character_id}|Occult|?{Attribute|Strength|Dexterity|Stamina|Charisma|Manipulation|Appearance|Perception|Intelligence|Wits}|?{Modifier|0}">Roll</button></div> <div class="sheet-dots">     <input type="radio" class="sheet-dots0" name="attr_occult" value="0" checked="checked"><span></span>     <input type="radio" class="sheet-dots1" name="attr_occult" value="1"><span></span>     <input type="radio" class="sheet-dots2" name="attr_occult" value="2"><span></span>     <input type="radio" class="sheet-dots3" name="attr_occult" value="3"><span></span>     <input type="radio" class="sheet-dots4" name="attr_occult" value="4"><span></span>     <input type="radio" class="sheet-dots5" name="attr_occult" value="5"><span></span>     <input type="radio" class="sheet-dots6" name="attr_occult" value="6"><span></span>     <input type="radio" class="sheet-dots7" name="attr_occult" value="7"><span></span>     <input type="radio" class="sheet-dots8" name="attr_occult" value="8"><span></span>     <input type="radio" class="sheet-dots9" name="attr_occult" value="9"><span></span>     <input type="radio" class="sheet-dots10" name="attr_occult" value="10"><span></span> </div> </div><!-- /sheet-trait occult --> ... and so on, for abilities and attributes, in the region of 40 or so of them. I've gotten so far as knowing I need to use a sheet worker, and it needs to listen for the 'change:locked' event, and here's where my knowledge is lacking: I'm guessing I need to do something like:     on('change:locked'), TAS_fn(function setEnabled(e) { var controls = document.getElementsByName('attr_occult') for (var iIndex = 0;iIndex<controls.length;iIndex++) { controls[iIndex].disabled = e.locked; }     }     ).execute(); But it doesn't seem to do anything at all, so it's hard to know what to try next. Is this kind of thing even possible in a sheet worker?
1568641449
GiGs
Pro
Sheet Author
API Scripter
You cant directly affect the DOM through sheet workers, so getElementsByName does nothing in roll20.  The only think sheet workers can do is change attribute values. I can think of a couple of ways to do this. You could do it by css. Have two identical copies of the radio button group. One has all the controls disabled, the otehr doesnt. Then have CSS switch which one is displayed, and which one has display:none,  based on an attribute value (your locked attribute) The second would be to have a sheet worker linked to change:occult,  which gets the value of locked and uses eventInfo (see wiki). When the user clicks the radio button, you get the value of locked, and if it is locked, use setAttrs to restore occult to eventInfo.previousValue. That means whenever they try to change a value, while locked, it gets undone. Cant give code for any of these right now, in a bit of a hurry.
Thanks again, Gigs! The second option seems like it's the one that has the least rewriting of the sheet do to (and I'm not confident duplicated copies of all the skills is going to make life easy for me :) From your suggestion, would something like this be heading in the right direction? on('change:archery change:athletics change:occult', function setEnabled(e) { getAttrs(["locked"], function(values) { if (values.locked==true) setAttrs(e.sourceAttribute, e.previousValue) }); });
1568647945

Edited 1568650269
GiGs
Pro
Sheet Author
API Scripter
Duplicating the attributes wont have any negative effects.  For the sheet worker version, note that there won't be any visual feedback that the section is locked unless you also use a css rule to shade the section or add some other formatting. You sheet worker doesn't look quite right. I dont know what your locked checkbox looks like, but I strongly recommend giving it value=" 1", and not using true. Then it would be something like if (values.locked==="1") setAttrs({                     [e.sourceAttribute]: e.previousValue                 }); I'd probably do it this way to be more secure: if (values.locked==="1") { const reset = {}; reset[e.sourceAttribute] = e.previousValue; setAttrs(reset); } If you have issues, it's easier to do error checking if you capture the details in an explicitly declared variable first.
1568650387

Edited 1568650537
GiGs
Pro
Sheet Author
API Scripter
Also change this on('change:archery change:athletics change:occult', function setEnabled(e) { to on('change:archery change:athletics change:occult', function(e) { You shouldnt have a function name there.  So, the full thing (untested), for clarity: on('change:archery change:athletics change:occult', function(e) { getAttrs(["locked"], function(values) { if (values.locked==="1") {                 const reset = {};                 reset[e.sourceAttribute]: e.previousValue; setAttrs(reset); } }); });