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

How to make 'edit mode' button for whole sheet, or sections of it

1698250989

Edited 1698251122
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
In the Call of Cthulhu 7th ed sheet by Roll20, there's a schnazzy 'edit mode' button, that allows you to edit parts of almost the entire sheet. It also opens up and collapses some things. <a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Call_of_Cthulhu_7th_Ed/coc_7th_ed.html" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Call_of_Cthulhu_7th_Ed/coc_7th_ed.html</a> I'm wondering if anyone knows how this is accomplished. I dug through the character sheet on GitHub, but couldn't find sheetworker code for the 'button tabs' option listed here&nbsp; <a href="https://wiki.roll20.net/Button" rel="nofollow">https://wiki.roll20.net/Button</a>, &nbsp;nor does it seem to use any of the other listed functionalities from the button link. Though I may have missed something. It would be a useful feature to emulate. In particular, I was hoping to have a collapsable table where this 'skills table' below can hide all the number columns to the right, so it would look like such... From starting like this... I'm going to attempt to use some of the 'show/hide' or 'swap visible areas' from the 'CSS Wizardry' page&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a>, &nbsp;but I'm wondering if there's some more advanced functionality I'm missing that the Call of Cthulhu sheet uses. In particular, what I'd like is to add a 'hide math'/'show math' button to this table, but when the 'hide math' button is selected, the repeating rows for each skill switch to a 3 column layout for easier use/reference. Maybe I'm overthinking and this can be done with the CSS Wizardry link above, and I just haven't figured out how. But I can't help but wonder if there's additional stuff going on with the Call of Cthulhu sheet. And if so, if anyone might have a simple demo of how they applied that to the whole sheet. Thanks for any help!
1698272847

Edited 1698272856
GiGs
Pro
Sheet Author
API Scripter
I don't know how it works in the GURPS sheet, but I know enough about roll20 character sheet architectur to make some educated guesses. This will not have anything to do with sheetworkers, because javascript in Roll20 doesn't have the ability to make changes like this (technically, you can probably do some of it with the recent jquery implementation, but that is new and has limitations that would have been noticed and stated). The most likely way you'd do something like this is throughCSS, using the show/hide trick. You'd have two sets of each element in HTML, and when you show one the other is hidden. Or like in the traveller sheet, you'd have some elements that are hidden most of the time, and only get showen when you decide to show them. Duplicating an entire sheet's editable elements to have edit and non-edit versions would be a pain to create, likely lead to a complex sheet, but can be done.
1698273238

Edited 1698273251
GiGs
Pro
Sheet Author
API Scripter
You cant edit an entire sheet automagically. You have to create duplicates of each element you wish to show in multiple forms (e.g. editable and readonly). Daniel S. said: In particular, what I'd like is to add a 'hide math'/'show math' button to this table, but when the 'hide math' button is selected, the repeating rows for each skill switch to a 3 column layout for easier use/reference. The easiest way to do this is probably: Create a single checkbox for hide/show match, outside the repeating section. Create a hidden input inside the repeating section with a value of 0 or 1. give that a class Create the different versions of the repeating section contents that you want to show, each inside their own div, and this diuvs have their won classes. Have a CSS rule that shows which div to show or hide, based on the hidden input's class value of 0 or 1 Have a sheet worker that detects when that fiurst checkbox changes, and goes through and changes all the hidden input values to match the checkbox valuue. At that point, you can show or hide what you want inside the repeating section based on that checkbox.
1698284784
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Thanks. I'll see if I can figure that out. I went through the html of the Call of Cthulhu 7th ed some more. Couldn't find the edit button or specifically where that might've been toggled. Found a few examples of checkbox's that toggle something. Still a bit hard to decipher for my newish coding brain. But did find a lot of ":checked" instances in the CSS. We'll see what I can cobble together.