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

Variable name for select value?

July 03 (6 years ago)

Hey everyone! I'd like some input on having a variable as the selection name on a drop-down menu.


Essentially, I have a box that a player can fill in like "Fire magic" and when they create a new ability they will be able to choose what stat the ability will be rolling for using a drop-down box. Rather than having "Custom_Stat1" show up as an alternative I'd like the "Fire magic" to show up instead, so the players don't have to remember the order of their stats by heart. Is there any way to do this?

July 04 (6 years ago)
GiGs
Pro
Sheet Author
API Scripter

I dont believe this is possible.

July 04 (6 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Assuming that your custom skills aren't repeating items, you could do this as a pseudo select with some :hover detection and conditional display of elements. It'd be quite a bit of code, and not necessarily beautiful.


The other option is to use a text entry input and then sheet workers to parse that and match it to skill names.

July 04 (6 years ago)
GiGs
Pro
Sheet Author
API Scripter

Stellan is talking about user created names, that dont exist anywhere in the html of the code. 

I don't think you can process such entries to have them be displayed in a roll2o select dropdown. If I'm wrong, I'd love to be shown how to do it, because I want that on my sheet too.

July 04 (6 years ago)
Jakob
Sheet Author
API Scripter


Scott C. said:

Assuming that your custom skills aren't repeating items, you could do this as a pseudo select with some :hover detection and conditional display of elements. It'd be quite a bit of code, and not necessarily beautiful.


The other option is to use a text entry input and then sheet workers to parse that and match it to skill names.


You can even do this type of thing with repeating items! But yes, it's a lot of code and the behaviour can be a bit weird compared to normal selects.


July 04 (6 years ago)
GiGs
Pro
Sheet Author
API Scripter

Can you post some sample code that would achieve this effect?

July 04 (6 years ago)

Edited July 04 (6 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

GG,

That's why I called it a pseudo select. Here's what the technique looks like (with very little in the way of styling):

HTML
<div class='pseudo-select-test'>
    <span>Acrobatics</span> <input type='number' name='attr_acrobatics' value='0'>
    <span>Athletics</span> <input type='number' name='attr_athletics' value='0'>
    <input type='text' name='attr_custom_skill_1_name' value='Custom Skill 1'><input type='number' name='attr_custom_skill_1' value='0'>
    <input type='text' name='attr_custom_skill_2_name' value='Custom Skill 2'><input type='number' name='attr_custom_skill_2' value='0'>
    <input type='text' name='attr_custom_skill_3_name' value='Custom Skill 3'><input type='number' name='attr_custom_skill_3' value='0'>
    <div class='pseudo-select'>
        <input class='select-filter' type='hidden' name='attr_pseudo_select' value='@{acrobatics}'>
        <label class='acrobatics'><input type='radio' name='attr_pseudo_select' value='@{acrobatics}' checked><span>Acrobatics</span></label>
        <label class='athletics'><input type='radio' name='attr_pseudo_select' value='@{athletics}'><span>Athletics</span></label>
        <label class='custom_skill_1'><input type='radio' name='attr_pseudo_select' value='@{custom_skill_1}'><input type='text' name='attr_custom_skill_1_name' value='Custom Skill 1'></label>
        <label class='custom_skill_2'><input type='radio' name='attr_pseudo_select' value='@{custom_skill_2}'><input type='text' name='attr_custom_skill_2_name' value='Custom Skill 2'></label>
        <label class='custom_skill_3'><input type='radio' name='attr_pseudo_select' value='@{custom_skill_3}'><input type='text' name='attr_custom_skill_3_name' value='Custom Skill 3'></label>
    </div>
</div>
CSS
.sheet-pseudo-select-test{
    display:grid;
    grid-template-columns:[selection-start]auto[selection-end] 1fr;
    grid-template-rows:repeat(5,1fr) [selection-start]auto[selection-end];
    grid-gap:5px;
}
.sheet-pseudo-select{
    display:grid;
    grid-template-columns:1fr;
    grid-area:selection;
    min-height:20px;
    outline:1px solid black;
}
.sheet-pseudo-select label{
    position:relative;
    width:200px;
    display:none;
}
.sheet-pseudo-select:hover label,
.sheet-pseudo-select .sheet-select-filter[value*="acrobatics"] ~ .sheet-acrobatics,
.sheet-pseudo-select .sheet-select-filter[value*="athletics"] ~ .sheet-athletics,
.sheet-pseudo-select .sheet-select-filter[value*="custom_skill_1"] ~ .sheet-custom_skill_1,
.sheet-pseudo-select .sheet-select-filter[value*="custom_skill_2"] ~ .sheet-custom_skill_2,
.sheet-pseudo-select .sheet-select-filter[value*="custom_skill_3"] ~ .sheet-custom_skill_3{
    display:initial;
}
.sheet-pseudo-select label input[type=radio]{
    z-index:2;
    opacity:0;
    position:absolute;
}
.sheet-pseudo-select label *{
    width:100%;
    height:100%;
    display:block;
}
.sheet-pseudo-select input[type=text]{
    z-index:-1;
    background:none;
    box-shadow:none;
    border:0px solid transparent;
}
.sheet-pseudo-select label input[type=radio]:checked + input,
.sheet-pseudo-select label input[type=radio]:checked + span{
    background-color:green!important;
}
Final Product (gif)

Jakob, how would you do this with repeating items?

EDIT: Note that I'm sure Jakob has a more elegant way to do this.
July 04 (6 years ago)
GiGs
Pro
Sheet Author
API Scripter

Interesting! I'll have to explore this further.

July 05 (6 years ago)
Jakob
Sheet Author
API Scripter
Jakob, how would you do this with repeating items?

More or less the same as you, except that

  1. the radios become checkboxes, with radio-like behaviour enforced by sheet workers;
  2. showing/hiding needs to be handled per row, not with a global hidden input;
  3. I would use spans instead of text inputs within the labels (more than 1 input within a label is bad news anyway).
July 05 (6 years ago)

Edited July 05 (6 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Ah, clever. And, yeah, if I was redoing it, I'd probably swap those labels for divs.


I'm also unsure how to make this technique accessible for those using screen readers.