GiGs said:
Okay, so a giant wall of repetitive code it is :)
We can help get it sorted, layout wise. But you'll have to post the html and css you are trying for the banes and boons (just one bane or boon will be enough, but the complete code for that section), and then we can show you ow to get it working.
Thank you!!
I actually ended up scrapping it all when I was seeing it was a losing battle, so let me take a minute here and try to more or less reassemble what I was doing.
I was pretty much exclusively taking code from this thread. I tried piecing them together something like this;
HTML;
<input type="hidden" class="direction" name="attr_direction" value="down" />
<button type="action" name="act_direction_toggle" class="direction">
<span class="down">▼</span>
<span class="right">►</span>
</button>
<div class="radios">
<input type="hidden" class="radio" name="attr_level" value="1" />
<button type="action" name="act_level_1" class="radio radio-1">
<span class="checked"></span>
</button>
<button type="action" name="act_level_2" class="radio radio-2">
<span class="checked"></span>
</button>
<button type="action" name="act_level_3" class="radio radio-3">
<span class="checked"></span>
</button>
<button type="action" name="act_level_4" class="radio radio-4">
<span class="checked"></span>
</button>
<button type="action" name="act_level_5" class="radio radio-5">
<span class="checked"></span>
</button>
</div>
<input type="hidden" class="direction" name="attr_direction" value="down" />
<button type="action" name="act_direction_toggle" class="direction">
<span class="down">▼</span>
<span class="right">►</span>
</button>
HTML script;
<script type="text/worker">
on("clicked:direction_toggle", function() {
// Check the current value of the hidden attribute.
getAttrs(["direction"], function(v) {
// Toggle the hidden attribute value between "down" and "right"
setAttrs({
"direction": v["direction"] !== "down" ? "down" : "right"
});
});
});
const levelRadioValues = ["1","2","3","4","5"];
levelRadioValues.forEach(function(value) {
on(`clicked:level_${value}`, function() {
setAttrs({
["level"]: value
});
});
});
</script>CSS;
/* Clear default button styling */
button.sheet-direction {
margin: 0;
overflow: visible;
text-transform: none;
border-style: none;
padding: 0;
background: transparent;
cursor: pointer;
}
/* Hide the section(s) that do not match the attribute value */
input.sheet-direction:not([value="down"]) + button.sheet-direction > span.sheet-down {
display: none;
}
input.sheet-direction:not([value="right"]) + button.sheet-direction > span.sheet-right {
display: none;
}
/* Configure a container for the radio buttons. */
.sheet-radios {
display: flex;
align-items: center;
}
/* Configure the button styling. This example makes it look like a radio. */
button.sheet-radio {
padding: 0;
border: solid 1px #a8a8a8;
cursor: pointer;
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
button.sheet-radio > span.sheet-checked {
width: 6px;
height: 6px;
border-radius: 50%;
background: buttontext;
}
/* Hide the "checked" section of the radio if the attribute value does not match the radio */
input.sheet-radio:not([value="1"]) ~ button.sheet-radio-1 > span.sheet-checked,
input.sheet-radio:not([value="2"]) ~ button.sheet-radio-2 > span.sheet-checked,
input.sheet-radio:not([value="3"]) ~ button.sheet-radio-3 > span.sheet-checked,
input.sheet-radio:not([value="4"]) ~ button.sheet-radio-4 > span.sheet-checked,
input.sheet-radio:not([value="5"]) ~ button.sheet-radio-5 > span.sheet-checked {
display: none;
}
Messing with the formatting and all, I have this screenshot of what I sssssort of accomplished;
(In case the image doesn't work again, direct link is here)
But the issue I was having was that even though it kind of looked how I wanted (that top left one notwithstanding, I forget what I was trying to tweak there but it clearly wasn't working lmao), the functionality wasn't happening. Sometimes the radio buttons didn't work, sometimes the "check boxes" (which I replaced with a little image) didn't work, but mostly, I couldn't figure out where to assign attributes to them so they were all independent. So I'd toggle something on one of them, and all of them would echo the exact same input, which obviously won't do.
But if I could get it looking like those three normal panels, and actually functioning, that's really all I'm after.
Thanks again!
(If image doesn't work >