mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 04:02:29 +00:00
192 lines
9.3 KiB
Plaintext
192 lines
9.3 KiB
Plaintext
|
|
//- @pugdoc
|
|
name: button-label
|
|
description: A mixin to create a combined button and input that are within the same container. Similar to {@link input-label}, but does not use a label.
|
|
arguments:
|
|
- {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
|
|
- {object} buttonObj - An object describing the button to be paired with the input. This is the same object that you would pass to {@link button}.
|
|
- {object} divObj - An object describing the container div. Similar to the first two objects, but will most likely only have a `class` property if it is passed at all.
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+button-label({
|
|
inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
|
|
buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
|
|
divObj:{class:'strength'}
|
|
})
|
|
mixin button-label({inputObj,buttonObj,divObj})
|
|
if divObj
|
|
- divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
|
|
- inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
|
|
- buttonObj.class = buttonObj.class ? replaceProblems(buttonObj.class) : undefined;
|
|
- inputObj.name = inputObj.name.replace(/\s+/g,'_');
|
|
- buttonObj.name = (buttonObj.name || inputObj.name).replace(/\s+/g,'_');
|
|
.input-label.input-label--button&attributes(divObj)
|
|
- inputObj.class = inputObj.class ? `${inputObj.class} input-label__input` : 'input-label__input';
|
|
if spanObj
|
|
- buttonObj.class = buttonObj.class ? `${buttonObj.class} input-label__text` : 'input-label__text';
|
|
+button(buttonObj)
|
|
+input(inputObj)
|
|
//-End Mixin
|
|
|
|
|
|
|
|
|
|
//- @pugdoc
|
|
name: roller-label
|
|
description: Similar to the construction created by {@link button-label}, except that it creates a {@link roller} construction instead of just a straight button.
|
|
arguments:
|
|
- {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
|
|
- {object} buttonObj - An object describing the button to be paired with the input. This is the same object that you would pass to {@link button}.
|
|
- {object} divObj - An object describing the container div. Similar to the first two objects, but will most likely only have a `class` property if it is passed at all.
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+roller-label({
|
|
inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
|
|
buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
|
|
divObj:{class:'strength'}
|
|
})
|
|
mixin roller-label({inputObj,buttonObj,divObj})
|
|
+rollerExtras(buttonObj)
|
|
+button-label({inputObj,buttonObj,divObj})
|
|
//-End Mixin
|
|
|
|
|
|
|
|
|
|
//- @pugdoc
|
|
name: action-label
|
|
description: Similar to the construction created by {@link button-label}, except that it specifcally creates an [action button](https://wiki.roll20.net/Button#Action_Button) as per {@link action}.
|
|
arguments:
|
|
- {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
|
|
- {object} buttonObj - An object describing the button to be paired with the input. This is the same object that you would pass to {@link button}.
|
|
- {object} divObj - An object describing the container div. Similar to the first two objects, but will most likely only have a `class` property if it is passed at all.
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+roller-label({
|
|
inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
|
|
buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
|
|
divObj:{class:'strength'}
|
|
})
|
|
mixin action-label({inputObj,buttonObj,divObj})
|
|
- buttonObj.type = 'action';
|
|
+button-label(inputObj,buttonObj,divObj)
|
|
//-End Mixin
|
|
|
|
|
|
|
|
|
|
//- @pugdoc
|
|
name: select-label
|
|
description: Similar to the construction created by {@link input-label}, except that the input is replaced with a select.
|
|
arguments:
|
|
- {string} label - The translation key to use for the span. If not passed, then the spanObj must be passed with a translation key
|
|
- {object} inputObj - An object describing the select to be paired with the button. This is the same object that you would pass to {@link select}.
|
|
- {object} [divObj] - An object describing the container label. Similar to the inputObj, but will most likely only have a `class` property if it is passed at all.
|
|
- {object} [spanObj] - An object describing the span to be paired with the input. This is the same object that you would pass to {@link span}.
|
|
- {block} block - The mixin uses the pug block as the content of the select.
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+select-label({
|
|
label:'Whisper to GM',
|
|
inputObj:{name:'whisper'},
|
|
divObj:{class:'div-class'},
|
|
spanObj:{class:'span-class'}
|
|
})
|
|
+option({value:'','data-i18n':'never',selected:''})
|
|
+option({value:'/w gm ','data-i18n':'always'})
|
|
mixin select-label({label,inputObj,divObj,spanObj})
|
|
if divObj
|
|
- divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
|
|
if inputObj
|
|
- inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
|
|
if spanObj
|
|
- spanObj.class = spanObj.class ? replaceProblems(spanObj.class) : undefined;
|
|
label.input-label&attributes(divObj)
|
|
- inputObj.name = inputObj.name.replace(/\s+/g,'_');
|
|
- inputObj.class = inputObj.class ? `${inputObj.class} input-label__input` : 'input-label__input';
|
|
if spanObj
|
|
- spanObj.class = spanObj.class ? `${spanObj.class} input-label__text` : 'input-label__text';
|
|
span(data-i18n=label)&attributes(spanObj)
|
|
+select(inputObj)
|
|
block
|
|
//-End Mixin
|
|
|
|
|
|
|
|
|
|
//- @pugdoc
|
|
name: input-label
|
|
description:
|
|
arguments:
|
|
- {string} label - The translation key to use for the span. If not passed, then the spanObj must be passed with a translation key
|
|
- {object} inputObj - An object describing the input to be paired with the button. This is the same object that you would pass to {@link input}.
|
|
- {object} [divObj] - An object describing the container label. Similar to the inputObj, but will most likely only have a `class` property if it is passed at all.
|
|
- {object} [spanObj] - An object describing the span to be paired with the input. This is the same object that you would pass to {@link span}.
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+input-label({
|
|
label:'strength',
|
|
inputObj:{name:'strength',type:'number'},
|
|
divObj:{class:'div-class'},
|
|
spanObj:{class:'span-class'}
|
|
})
|
|
mixin input-label({label,inputObj,divObj,spanObj})
|
|
if divObj
|
|
- divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
|
|
if inputObj
|
|
- inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
|
|
if spanObj
|
|
- spanObj.class = spanObj.class ? replaceProblems(spanObj.class) : undefined;
|
|
label.input-label&attributes(divObj)
|
|
- inputObj.name = inputObj.name.replace(/\s+/g,'_');
|
|
- inputObj.class = inputObj.class ? `${inputObj.class} input-label__input` : 'input-label__input';
|
|
if spanObj
|
|
- spanObj.class = spanObj.class ? `${spanObj.class} input-label__text` : 'input-label__text';
|
|
span(data-i18n=label)&attributes(spanObj)
|
|
+input(inputObj)
|
|
//-End Mixin
|
|
|
|
|
|
|
|
|
|
mixin dual-input-label({label,inputArr,divObj,spanObj,separatorObj={content:'/'}})
|
|
if divObj
|
|
- divObj.class = divObj.class ? replaceProblems(divObj.class) : undefined;
|
|
if spanObj
|
|
- spanObj.class = spanObj.class ? replaceProblems(spanObj.class) : undefined;
|
|
- const separator = separatorObj.content || '';
|
|
- delete separatorObj.content;
|
|
.input-label.input-label--dual&attributes(divObj)
|
|
span(data-i18n=label)&attributes(spanObj)
|
|
each inputObj,i in inputArr
|
|
if inputObj
|
|
- inputObj.class = inputObj.class ? replaceProblems(inputObj.class) : undefined;
|
|
- inputObj.name = inputObj.name.replace(/\s+/g,'_');
|
|
+input(inputObj)
|
|
if i<1
|
|
|<!-- separatorObj:#{JSON.stringify(separatorObj)} -->
|
|
span(class='slash h2')&attributes(separatorObj) #{separator}
|
|
|
|
//- @pugdoc
|
|
name: headedTextarea
|
|
description: Creates a construction for pairing a header with a textarea. Currently is locked to creating an `h3`. This mixin also accepts classes and IDs appended directly to it (see the second example)
|
|
arguments:
|
|
- {object} textObj - The object describing the textarea as per {@link textarea}
|
|
- {string} header - The `data-i18n` translation key to use for the header
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'})
|
|
//With class appended to the mixin itself
|
|
+headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'}).character-description
|
|
mixin headedTextarea({textObj,header})
|
|
.headed-textarea&attributes(attributes)
|
|
- textObj.class = textObj.class ? `${textObj.class} headed-textarea__textarea` : 'headed-textarea__textarea';
|
|
+h3({'data-i18n':header,class:'headed-textarea__header'})
|
|
+textarea(textObj)
|
|
//-End Mixin |