Repeating Section Coding

I have a website that is focussed on creating roll20 Character sheets, and I'm starting to put together a series on Repeating Sections. What do you think it should include? What question about repeating sections do you think should be answered.

Here is roughly what I plan to do so far:

• HTML: the coding in html of a repeating section layout, the three parts of a repeating section name, when you need to use them and the characetr name, how you access sections in macros.
• CSS: how to style a repeatiing section, change the layout (for example, put your section in columns without duplicating attributes), how to style the add/edit/modifiy buttons
• JavaScript: avoiding loops that contain getAttrs/setAttrs, the casing of row ids (as Scott recently pointed out)
• extras: doing clever things with duplicating a section across the sheet, filtering within a section

There's probably other things, these are just off the top of my head. What do you think I should cover?

Nice GiGs! Your site and blog are an amazing resource for all sheet authors! Things that come to mind for me would be:

• HTML Don't use underscores in action button names inside repeating sections
• HTML Make your attribute names simple. E.g. instead of attack_mod in your releating_attacks section, just use mod because when it's used in full, that'll be repeating_attacks_ID_mod.
• HTML Make sure you aren't using the same attribute name in a non repeating area. E.g. don't use level for character level and repeating_ability_ID_level. This will cause roll buttons in the repeating section referencing the repeating version to potentially behave differently depending on how the user activates them (clicking the sheet button vs calling in chat or using a token/quickbar button).
• JS Differences in the values of the clicked and change event properties between repeating and non repeating events
• JS The removal event object for when a row is deleted.
• JS How to setup a listener for repeating sections. And that while you can do a generic listener for just the attribute name without the repeating stuff, it'll cause unusual and unpredictable behavior.
• JS Personally I hate the setAttrs option that allows setting repeating attributes without the id if the event that triggered was from inside the section. But, covering all the different ways repeating section attributes can be gotten and set is probably a good idea. I'd recommend avoiding the no I'd method even though it seems easier, but this is just my personal preference. I think making reusable code is preferable to making code that only works in one instance.
• CSS Since it always seems to come up, might be worth reiterating how the hide/reveal elements based on a checkbox/radio/input works, and how that can be adapted to do collapsible sections.

These obviously range from full on topics to just nuggets of knowledge, and from hard and fast rules to personal preference.

Those are great suggestions, Scott, and definitely include a few things I hadn't considered.

When I first starting thinking about these series, I thought there wouldn't be much to go in the repeating section, ahem section and it would be pretty short. But the more I thought about it, I doubted that and posts like yours confirm those suspicions :)

Perhaps how to extract and display the ID of each row in the sheet for use in macros?

That is something that I haven't messed with yet, but probably should.

Oh, something else just occurred to me that would be good to do an article on GiGs. It's not repeating section related, but how to debug a sheetworker would be a good thing to teach folks how to do. Particularly with the magic of debugger.

CSS: how to style repeating child-elements.  Seems that there is often some confusion on how to access repeating elements for styling.
JS: how is getting and setting a repeating attribute different than a non-repeating attribute.
JS: example of when and how to use getSectionIDs to work with repeating attribute data.

Great suggestions.

Scott, that does sound like a good topic, but it's not something I've ever done so I'm not yet qualified. I've hunted for bugs in a sheet naturally, but don't yet know anything about debugger. I'll have to investigate that. Any pointers?

Somewhere in a function just put the line:

debugger;

Open your dev console and then do whatever is supposed to trigger the function. When that line is reached in the execution, everything will pause and you can investigate the script state at that precise moment. You can even step through line by line to see what happens at each line. Using it looks something like this:

There's lots more you can do than shown in this simple demo.

Intriguing. Is it chrome-specific, or javascript-general?

While fiddling with repeating sections, I realise there's something I don't know how to do. I'm trying to change the styling of the add/modify/edit buttons, and the background colour is hard to modify and none of the help pages I've looked at actually help.

For example, I tried to apply this CSS

and I got this:

When I hover the mouse over a button, half of the button adopts the colour. But in its resting state, it doesn't. What's going on?

I have tried to use data-groupname with no difference.

Aha, I figured it out. It doesnt accept background-color, but will accept background

It's because roll20 applies some default styling using background to give it that buttonish look. This is one of the many reasons I use a clear css styling at the start of my projects.

That was my assumption too, so I tried to override whatever styling they had assigned to background-colour there, but no matter how specific or deep I got, I couldnt change it. Even using !important. It really seems like the background-color just isn't recognised.

What CSS Reset do you use that affects the repeating section buttons?

Here's the reset that I do (SCSS syntax):

.ui-dialog .tab-content .charsheet{
    select,
    textarea,
    input,
    .uneditable-input,
    label,
    button {
        all: initial;
    }
}

It resets everything to what it would be in a basic browser with no styles applied. Note that doing this does pretty much mean that you have to prepend almost everything with .ui-dialog .tab-content .charsheet, but I just take advantage of that and make that my new specificity floor so that all of my styles for the sheet itself use that prepend. This also ensures that my styles are guaranteed to override whatever Roll20 does.

EDIT:
Also to clarify what's going on with the add/edit buttons, the reason the background-color doesn't fully cover the button is that Roll20 has used the background-image and background-position properties to create a gradient that gives the illusion of the raised button. The reason that the background property overrides these is that it's a shortcut property for all the background-* properties and sets anything that isn't explicitly defined in it to it's initial state. So when you do background: purple it removes the image and position properties and sets the background-color property. As a note, the background-position property that Roll20 applies is why the purple only covers part of the button. The gradient is only the size of the button, but is moved up a number of pixels, and the button then has a grey background color normally. So when you just change the color, you're just changing that bit of background that is visible where the gradient doesn't exist.

Thank you, Scott.

You've reminded me I discovered the background-position bit before but had forgotten it, back before I knew enough about CSS to understand your explanation :). That's very informative and makes sense, thanks.

I've never tried resetting all CSS to initial values. I will maybe build a sheet and see what that looks like.

Heh, shortform properties and the cascade are pieces of CSS that I'm still wrapping my brain around. I'll be pounding my head against something that JUST WON'T STYLE RIGHT, and then I'll realize it's because some shortform property has been set somewhere that is doing something beyond the specific property I used, or there's some random thing that has like 1 more class in its css declaration making it completely override my style.

hehe, I can sympathise. CSS can be so frustrating. I don't hate it as much as I used to, but it's still my least favourite part of building a sheet. Even when everything is going perfectly, it can be so fiddly.

vÍnce said:

CSS: how to style repeating child-elements.  Seems that there is often some confusion on how to access repeating elements for styling.

I didn't respond to this earlier (I think Scott also touched on it). It is definitely an area of confusion.

Kraynic said:

Perhaps how to extract and display the ID of each row in the sheet for use in macros?

That is something that I haven't messed with yet, but probably should.

Scott (naturally) also mentioned this, but that might have been the post I referenced in the first post. Storing the row id separately in an attribute is pretty useful. There's a lot of sheets you dopn't need to do it on, but it is sometimes essential (because of the lower case issue Scott mentioned), but even when not, it can make some tasks just a bit easier. Having easy and instant access to the rowid is handy.