K-Scaffold

Appearance

Fieldsets ​

customControlFieldset

Alias for fieldset that creates to custom action buttons to add/remove rows to the repeating section. Useful when you need to trigger a sheetworker when a row is added. This also prevents the occassional error of a new row disappearing immediately after the user has clicked the button to create one. Proper use of this will require css to hide the default buttons that fieldsets create automatically. Note that currently this assumes the existence of an addItem and editSection sheetworker function.

  • name - string -

    The name of the repeating section. Will be prefixed with repeating_ and spaces will be replaced with dashes (-).

  • trigger - object -

    Trigger that defines how to handle the removal of a row from the fieldset. Optional

  • addClass - string -

    Any additional classes that should be used for the repeating section. Note that these are not added to the fieldset itself as adding additional classes to the fieldset itself interferes with calling action buttons from chat, but are added to a span that precedes the fieldset. This allows styling of the repcontainer via a css declaration like .bonus-class + fieldset + .repcontainer.

Example ​

pug
include k-scaffold
//A basic customControlfieldset declaration with a trigger
+customControlFieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']}
})

//A customControlfieldset with an added class
+customControlFieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']},
  addClass:'some-class'
})

include k-scaffold
//A basic customControlfieldset declaration with a trigger
+customControlFieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']}
})

//A customControlfieldset with an added class
+customControlFieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']},
  addClass:'some-class'
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<!--A basic customControlfieldset declaration with a trigger-->
<button class="repcontrol-button repcontrol-button--add" name="act_add-fieldset" type="action"></button>
<fieldset class="repeating_fieldset"></fieldset>
<!--A customControlfieldset with an added class-->
<button class="repcontrol-button repcontrol-button--add" name="act_add-fieldset" type="action"></button>
<span class="some-class" hidden=""></span>
<fieldset class="repeating_fieldset"></fieldset>
<button name="act_k-network-call" hidden="" type="action"></button>
<!--A basic customControlfieldset declaration with a trigger-->
<button class="repcontrol-button repcontrol-button--add" name="act_add-fieldset" type="action"></button>
<fieldset class="repeating_fieldset"></fieldset>
<!--A customControlfieldset with an added class-->
<button class="repcontrol-button repcontrol-button--add" name="act_add-fieldset" type="action"></button>
<span class="some-class" hidden=""></span>
<fieldset class="repeating_fieldset"></fieldset>

fieldset

A mixin that creates a fieldset for the creation of a repeating section. The mixin prefixes the name with repeating_ and replaces problem characters (e.g. spaces are replaced with dashes). Additionally, the auto-generated title properties from the K-scaffold's mixins will include the proper repeating section information.

  • name - string -

    The name of the repeating section. Will be prefixed with repeating_ and spaces will be replaced with dashes (-).

  • trigger - object -

    Trigger that defines how to handle the removal of a row from the fieldset. Optional

  • addClass - string -

    Any additional classes that should be used for the repeating section. Note that these are not added to the fieldset itself as adding additional classes to the fieldset itself interferes with calling action buttons from chat, but are added to a span that precedes the fieldset. This allows styling of the repcontainer via a css declaration like .bonus-class + fieldset + .repcontainer.

Example ​

pug
include k-scaffold
//A basic fieldset declaration with a trigger
+fieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']}
})
  +text({name:'name'})

//A Fieldset with an added class
+fieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']},
  addClass:'some-class'
})
  +text({name:'name'})

include k-scaffold
//A basic fieldset declaration with a trigger
+fieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']}
})
  +text({name:'name'})

//A Fieldset with an added class
+fieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']},
  addClass:'some-class'
})
  +text({name:'name'})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<!--A basic fieldset declaration with a trigger-->
<fieldset class="repeating_fieldset">
  <input name="attr_name" type="text" title="@{repeating_fieldset_$X_name}"/>
</fieldset>
<!--A Fieldset with an added class-->
<span class="some-class" hidden=""></span>
<fieldset class="repeating_fieldset">
  <input name="attr_name" type="text" title="@{repeating_fieldset_$X_name}"/>
</fieldset>
<button name="act_k-network-call" hidden="" type="action"></button>
<!--A basic fieldset declaration with a trigger-->
<fieldset class="repeating_fieldset">
  <input name="attr_name" type="text" title="@{repeating_fieldset_$X_name}"/>
</fieldset>
<!--A Fieldset with an added class-->
<span class="some-class" hidden=""></span>
<fieldset class="repeating_fieldset">
  <input name="attr_name" type="text" title="@{repeating_fieldset_$X_name}"/>
</fieldset>

inlineFieldset

An alias for fieldset that creates a fieldset with an added class that can be easily hooked into via CSS to style the fieldset for inline display.

  • name - string -

    The name of the repeating section. Will be prefixed with repeating_ and spaces will be replaced with dashes (-).

  • trigger - object -

    Trigger that defines how to handle the removal of a row from the fieldset. Optional

  • addClass - string -

    Any additional classes that should be used for the repeating section. Note that these are not added to the fieldset itself as adding additional classes to the fieldset itself interferes with calling action buttons from chat, but are added to a span that precedes the fieldset. This allows styling of the repcontainer via a css declaration like .bonus-class + fieldset + .repcontainer.

Example ​

pug
include k-scaffold
+inlineFieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']},
  addClass:'some-class'
})

include k-scaffold
+inlineFieldset({
  name:'fieldset',
  trigger:{triggeredFuncs:['doWhenRemoved']},
  addClass:'some-class'
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<button class="repcontrol-button repcontrol-button--add repcontrol-button--inline" name="act_add-fieldset" type="action"></button>
<span class="some-class inline-fieldset" hidden=""></span>
<fieldset class="repeating_fieldset">
  <input class="display-control" name="attr_display_state" value="short-display" hidden="" type="radio" title="@{repeating_fieldset_$X_display_state}"/>
  <div class="inline-fieldset__summary display-target">
    <label class="pointer">
      <input name="attr_collapse" value="1" hidden="" type="checkbox" title="@{repeating_fieldset_$X_collapse}"/>
      <span class="inline-fieldset__summary__text" name="attr_name" title="@{repeating_fieldset_$X_name}"></span>
    </label>
  </div>
  <input class="display-control" name="attr_display_state" value="display" checked="" hidden="" type="radio" title="@{repeating_fieldset_$X_display_state}"/>
  <div class="inline-fieldset__detail display-target">
    <input class="collapse" name="attr_collapse" value="1" type="checkbox" title="@{repeating_fieldset_$X_collapse}"/>
  </div>
</fieldset>
<button name="act_k-network-call" hidden="" type="action"></button>
<button class="repcontrol-button repcontrol-button--add repcontrol-button--inline" name="act_add-fieldset" type="action"></button>
<span class="some-class inline-fieldset" hidden=""></span>
<fieldset class="repeating_fieldset">
  <input class="display-control" name="attr_display_state" value="short-display" hidden="" type="radio" title="@{repeating_fieldset_$X_display_state}"/>
  <div class="inline-fieldset__summary display-target">
    <label class="pointer">
      <input name="attr_collapse" value="1" hidden="" type="checkbox" title="@{repeating_fieldset_$X_collapse}"/>
      <span class="inline-fieldset__summary__text" name="attr_name" title="@{repeating_fieldset_$X_name}"></span>
    </label>
  </div>
  <input class="display-control" name="attr_display_state" value="display" checked="" hidden="" type="radio" title="@{repeating_fieldset_$X_display_state}"/>
  <div class="inline-fieldset__detail display-target">
    <input class="collapse" name="attr_collapse" value="1" type="checkbox" title="@{repeating_fieldset_$X_collapse}"/>
  </div>
</fieldset>

repeating_section

A mixin that creates a section element with an h2, a space for column headers, and a customcontrolfieldset which can be styled to fit those column headers. The h2 labels the section via aria-labelledby.

  • name - string -

    The name of the section as per fieldset. This name will also be added to the section's class list as repeating-container--NAME. If no id argument is passed, this is also used as the id of the section.

  • header - string -

    The translation key for the h2 element in the section

  • columnArr - array -

    Array of translation keys to use as column headers. These are added as h5's.

  • id - string -

    An id to use for the section element.

Example ​

pug
include k-scaffold
+repeating_section('attacks','weapons',['name','bonus','damage','property'],'atk')
  +text({name:'name'})
  +number({name:'bonus'})
  +text({name:'damage'})
  +text({name:'properties'})

include k-scaffold
+repeating_section('attacks','weapons',['name','bonus','damage','property'],'atk')
  +text({name:'name'})
  +number({name:'bonus'})
  +text({name:'damage'})
  +text({name:'properties'})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<section class="repeating-container--attacks repeating-container section" id="atk">
  <h2 data-i18n="weapons"></h2>
    <div class="repeat-columns">
      <h5 data-i18n="name"></h5>
        <h5 data-i18n="bonus"></h5>
          <h5 data-i18n="damage"></h5>
            <h5 data-i18n="property"></h5></div>
            <button class="repcontrol-button repcontrol-button--add" name="act_add-attacks" type="action"></button>
            <fieldset class="repeating_attacks">
              <input name="attr_name" type="text" title="@{repeating_attacks_$X_name}"/>
              <input name="attr_bonus" type="number" title="@{repeating_attacks_$X_bonus}"/>
              <input name="attr_damage" type="text" title="@{repeating_attacks_$X_damage}"/>
              <input name="attr_properties" type="text" title="@{repeating_attacks_$X_properties}"/>
            </fieldset>
          </section>
<button name="act_k-network-call" hidden="" type="action"></button>
<section class="repeating-container--attacks repeating-container section" id="atk">
  <h2 data-i18n="weapons"></h2>
    <div class="repeat-columns">
      <h5 data-i18n="name"></h5>
        <h5 data-i18n="bonus"></h5>
          <h5 data-i18n="damage"></h5>
            <h5 data-i18n="property"></h5></div>
            <button class="repcontrol-button repcontrol-button--add" name="act_add-attacks" type="action"></button>
            <fieldset class="repeating_attacks">
              <input name="attr_name" type="text" title="@{repeating_attacks_$X_name}"/>
              <input name="attr_bonus" type="number" title="@{repeating_attacks_$X_bonus}"/>
              <input name="attr_damage" type="text" title="@{repeating_attacks_$X_damage}"/>
              <input name="attr_properties" type="text" title="@{repeating_attacks_$X_properties}"/>
            </fieldset>
          </section>

Released under the MIT License

Copyright ©2023 Scott Casey