K-Scaffold

Appearance

Attributes ​

checkbox

An alias for input that specifies the input type as checkbox. See input for arguments.

  • 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 ​

pug
include k-scaffold
+checkbox({name:'my checkbox',value:1})

include k-scaffold
+checkbox({name:'my checkbox',value:1})

Output ​

html
<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 ​

pug
include k-scaffold
+collapse()

include k-scaffold
+collapse()

Output ​

html
<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 ​

pug
include k-scaffold
+div({name:'background image'})

include k-scaffold
+div({name:'background image'})

Output ​

html
<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

Alias for input that makes a hidden input. See input for arguments.

  • 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 ​

pug
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 ​

html
<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 ​

pug
include k-scaffold
+img({name:'my image',class:'some-class'})

include k-scaffold
+img({name:'my image',class:'some-class'})

Output ​

html
<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 ​

pug
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 ​

html
<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

Alias for input that makes a number input. See input for arguments.

  • 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 ​

pug
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 ​

html
<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

Alias for input that specifies radio as the input type. See input for arguments.

  • 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 ​

pug
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 ​

html
<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

Alias for input that makes a range input. See input for arguments.

  • 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 ​

pug
include k-scaffold
+range({name:'my range',class:'some-class'})

include k-scaffold
+range({name:'my range',class:'some-class'})

Output ​

html
<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 ​

pug
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 ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
Some Text we include via the option's block<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"></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>
Some Text we include via the option's block<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"></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 ​

pug
include k-scaffold
+span({name:'attribute backed span',trigger:{calculation:'calculateAttribute'}})

include k-scaffold
+span({name:'attribute backed span',trigger:{calculation:'calculateAttribute'}})

Output ​

html
<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

An alias for input that specifies the input type as text. See input for arguments.

  • 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 ​

pug
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 ​

html
<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.

  • textObj - object -

    See input for information on valid properties of the textObj.

Example ​

pug
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 ​

html
<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>

Released under the MIT License

Copyright ©2023 Scott Casey