Attributes
checkbox
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+checkbox({name:'my checkbox',value:1})
include k-scaffold
+checkbox({name:'my checkbox',value:1})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input name="attr_my_checkbox" value="1" type="checkbox" title="@{my_checkbox}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input name="attr_my_checkbox" value="1" type="checkbox" title="@{my_checkbox}"/>
collapse
Alias for checkbox that creates a checkbox for us in collapse/expanding a section. Sets the checkbox to unchecked with a checked value of 1
and a class of collapse
. Additional classes/ids can be applied by applying them inline to the mixin call.
- name -
string
-The name to use for the collapse element. Defaults to
collapse
Example
include k-scaffold
+collapse()
include k-scaffold
+collapse()
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="collapse" name="attr_collapse" value="1" type="checkbox" title="@{collapse}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="collapse" name="attr_collapse" value="1" type="checkbox" title="@{collapse}"/>
div
Creates a div element and will properly format the name attribute of the div if it is provided
- divObj -
object
-The object describing the div
- block -
block
-The contents of the div
Example
include k-scaffold
+div({name:'background image'})
include k-scaffold
+div({name:'background image'})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<div name="attr_background_image" title="@{background_image}"></div>
<button name="act_k-network-call" hidden="" type="action"></button>
<div name="attr_background_image" title="@{background_image}"></div>
hidden
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+hidden({name:'my hidden attribute',class:'some-class',trigger:{triggeredFuncs:['someFunction']}})
include k-scaffold
+hidden({name:'my hidden attribute',class:'some-class',trigger:{triggeredFuncs:['someFunction']}})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_hidden_attribute" type="hidden" title="@{my_hidden_attribute}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_hidden_attribute" type="hidden" title="@{my_hidden_attribute}"/>
img
A mixin to create a sheet image element. Particularly useful when using the image attribute syntax.
- imgObj -
object
-An object describing the properties of the img just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property.
Example
include k-scaffold
+img({name:'my image',class:'some-class'})
include k-scaffold
+img({name:'my image',class:'some-class'})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<img class="some-class" name="attr_my_image" data-i18n-alt="my image" title="@{my_image}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<img class="some-class" name="attr_my_image" data-i18n-alt="my image" title="@{my_image}"/>
input
A generic mixin to create an input. The mixin will replace spaces in the attribute name with underscores and will add a title property if one isn't supplied that will inform the user what the attribute call for the attribute is.
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+input({name:'my attribute',type:'text',class:'some-class',trigger:{affects:['other_attribute']}})
include k-scaffold
+input({name:'my attribute',type:'text',class:'some-class',trigger:{affects:['other_attribute']}})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_attribute" type="text" title="@{my_attribute}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_attribute" type="text" title="@{my_attribute}"/>
number
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+number({name:'my number',class:'some-class',trigger:{affects:['other_attribute']}})
include k-scaffold
+number({name:'my number',class:'some-class',trigger:{affects:['other_attribute']}})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_number" type="number" title="@{my_number}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_number" type="number" title="@{my_number}"/>
radio
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+radio({name:'my radio',value:1,checked:''})
+radio({name:'my radio',value:2})
+radio({name:'my radio',value:3})
include k-scaffold
+radio({name:'my radio',value:1,checked:''})
+radio({name:'my radio',value:2})
+radio({name:'my radio',value:3})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input name="attr_my_radio" value="1" checked="" type="radio" title="@{my_radio}"/>
<input name="attr_my_radio" value="2" type="radio" title="@{my_radio}"/>
<input name="attr_my_radio" value="3" type="radio" title="@{my_radio}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input name="attr_my_radio" value="1" checked="" type="radio" title="@{my_radio}"/>
<input name="attr_my_radio" value="2" type="radio" title="@{my_radio}"/>
<input name="attr_my_radio" value="3" type="radio" title="@{my_radio}"/>
range
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+range({name:'my range',class:'some-class'})
include k-scaffold
+range({name:'my range',class:'some-class'})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_range" type="range" title="@{my_range}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_range" type="range" title="@{my_range}"/>
select
A mixin to create a select element. Also provides an option mixin that is restricted to only work within the select. Trigger objects can be passed as arguments on the select call itself or on the default selected option. Uses K-scaffold global variables to control how option mixins within the select's block behave.
- selectObj -
object
-The object describing the select
- block -
block
-The content within the select
Example
include k-scaffold
+select({name:'my select'})
+option({value:'a value','data-i18n':'a translation key',trigger:{affects:['some_attribute']}})
+option({value:'value 2','data-i18n':'translation 2'})
+option({value:'value 3'})
|Some Text we include via the option's block
|
|
+select({
name:'my select',
trigger:{
affects:['some_attribute']
}
})
+option({value:'a value','data-i18n':'a translation key'})
+option({value:'value 2','data-i18n':'translation 2'})
+option({value:'value 3'})
|Some Text we include via the option's block
include k-scaffold
+select({name:'my select'})
+option({value:'a value','data-i18n':'a translation key',trigger:{affects:['some_attribute']}})
+option({value:'value 2','data-i18n':'translation 2'})
+option({value:'value 3'})
|Some Text we include via the option's block
|
|
+select({
name:'my select',
trigger:{
affects:['some_attribute']
}
})
+option({value:'a value','data-i18n':'a translation key'})
+option({value:'value 2','data-i18n':'translation 2'})
+option({value:'value 3'})
|Some Text we include via the option's block
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<select name="attr_my_select" title="@{my_select}">
<option value="a value" data-i18n="a translation key"></option>
<option value="value 2" data-i18n="translation 2"></option>
<option value="value 3">
Some Text we include via the option's block
</option>
</select>
<select name="attr_my_select" title="@{my_select}">
<option value="a value" data-i18n="a translation key"></option>
<option value="value 2" data-i18n="translation 2"></option>
<option value="value 3">
Some Text we include via the option's block
</option>
</select>
<button name="act_k-network-call" hidden="" type="action"></button>
<select name="attr_my_select" title="@{my_select}">
<option value="a value" data-i18n="a translation key"></option>
<option value="value 2" data-i18n="translation 2"></option>
<option value="value 3">
Some Text we include via the option's block
</option>
</select>
<select name="attr_my_select" title="@{my_select}">
<option value="a value" data-i18n="a translation key"></option>
<option value="value 2" data-i18n="translation 2"></option>
<option value="value 3">
Some Text we include via the option's block
</option>
</select>
span
Creates a span element and formats the name of the span for compatibility with the Roll20 attribute system.
- attrObj -
object
-The object describing the span itself.
- block -
block
-What is contained within the span
Example
include k-scaffold
+span({name:'attribute backed span',trigger:{calculation:'calculateAttribute'}})
include k-scaffold
+span({name:'attribute backed span',trigger:{calculation:'calculateAttribute'}})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<span name="attr_attribute_backed_span" title="@{attribute_backed_span}"></span>
<button name="act_k-network-call" hidden="" type="action"></button>
<span name="attr_attribute_backed_span" title="@{attribute_backed_span}"></span>
text
- inputObj -
object
-An object describing the properties of the input just like they would be in a PUG or HTML element declaration, but in JS Object syntax. May also include a trigger property
Example
include k-scaffold
+text({name:'my attribute',class:'some-class',trigger:{affects:['other_attribute']}})
include k-scaffold
+text({name:'my attribute',class:'some-class',trigger:{affects:['other_attribute']}})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_attribute" type="text" title="@{my_attribute}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<input class="some-class" name="attr_my_attribute" type="text" title="@{my_attribute}"/>
textarea
A mixin to create K-scaffold compatible textareas.
Example
include k-scaffold
+textarea({name:'my textarea',class:'some-class',trigger:{affects:['an_attribute']}})
include k-scaffold
+textarea({name:'my textarea',class:'some-class',trigger:{affects:['an_attribute']}})
Output
<button name="act_k-network-call" hidden="" type="action"></button>
<textarea class="some-class" name="attr_my_textarea" title="@{my_textarea}"></textarea>
<button name="act_k-network-call" hidden="" type="action"></button>
<textarea class="some-class" name="attr_my_textarea" title="@{my_textarea}"></textarea>