mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
41 lines
2.1 KiB
Plaintext
41 lines
2.1 KiB
Plaintext
//- @pugdoc
|
|
name: fillLeft
|
|
description: A mixin that creates an html construction ready to be styled for use as a [fill-to-left section](https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left).
|
|
arguments:
|
|
- {object} radioObj - The object containing the details of the radio input to create. Similar to the {@link radio}, but the value property passed is used as the default checked value.
|
|
- {object} [divObj] - Optional object containing any details of the div to be applied such as class, id, or other properties. Class and ID can also be supplied by attaching them to the mixin invocation just like with a regular div.
|
|
- {array} valueArray - Array containing the values to be used for the fill to left construction. These should be in the order that they should be displayed left to right.
|
|
- {boolean} [noClear] - Optional argument that tells the mixin whether or not to apply the `fill-left__radio--clearer` class to the first radio button value. If falsy (or not passed), the class is applied. If truthy, the class is not applied.
|
|
example: |
|
|
include _htmlelements.pug
|
|
+fillLeft({
|
|
radioObj:{name:'my radio'},
|
|
divObj:{class:'some-custom-class'},
|
|
valueArray:[1,2,3,4,5]
|
|
})
|
|
mixin fillLeft({radioObj,divObj,valueArray,noClear,displayValues})
|
|
- divObj = divObj || {};
|
|
.fill-left&attributes(divObj)&attributes(attributes)
|
|
if !noClear
|
|
- const clearObj = {...radioObj,value:0};
|
|
-
|
|
clearObj.class = clearObj.class ?
|
|
`${clearObj.class} fill-left__radio fill-left__radio--clearer` :
|
|
`fill-left__radio fill-left__radio--clearer`;
|
|
if value === 0
|
|
- clearObj.checked = '';
|
|
+hidden(clearObj)
|
|
each value,index in valueArray
|
|
- const usedObj = {...radioObj,value};
|
|
-
|
|
usedObj.class = usedObj.class ?
|
|
`${usedObj.class} fill-left__radio` :
|
|
`fill-left__radio`;
|
|
if displayValues
|
|
- usedObj['data-value'] = displayValues[index];
|
|
if value === radioObj.value
|
|
- usedObj.checked = '';
|
|
|
|
+#{noClear ? 'radio' : 'checkbox'}(usedObj)
|
|
//- End Mixin
|