roll20-character-sheets/backbone/source/scaffold/fieldsets/_fieldsets.pug

//- @pugdoc
  name: fieldset
  description: 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.
  arguments:
    - {string} name - The name of the repeating section. Will be prefixed with `repeating_` and spaces will be replaced with dashes (`-`).
    - {object} [trigger] - Trigger that defines how to handle the removal of a row from the fieldset. `Optional`
    - {string} addClass - 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`.
  attributes:
  example: |
    include _htmlelements.pug
    //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'})
mixin fieldset({name,trigger,addClass})
  -
    name = repeatsIgnoreSystemPrefix || !getSystemPrefix() ?
      name :
      `${getSystemPrefix()} ${name}`;
  - name = name.replace(/\s+/g,'-');
  - let section = `repeating_${name}`;
  - repeatingPrefix = `${section}_$X_`;
  - createFieldsetObj(section)
  if trigger
    - storeTrigger({name:section,type:'fieldset',trigger})
  if addClass
    span(hidden="" class=addClass)
  fieldset(class=`${section}`)
    block
  - repeatingPrefix = '';
//-End Mixin




//- @pugdoc
  name: customControlFieldset
  description: Alias for {@link 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.
  arguments:
    - {string} name - The name of the repeating section. Will be prefixed with `repeating_` and spaces will be replaced with dashes (`-`).
    - {object} [trigger] - Trigger that defines how to handle the removal of a row from the fieldset. `Optional`
    - {string} addClass - 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`.
  attributes:
  example: |
    include _htmlelements.pug
    //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'
    })
mixin customControlFieldset({name,trigger,addClass})
  - const prefixHolder = setSystemPrefix();
  -
    buttonName = prefixHolder ?
      `${prefixHolder} ${name}`:
      name;
  +action({name:`add ${buttonName}`,class:'repcontrol-button repcontrol-button--add',trigger:{listenerFunc:'addItem'}})
  - setSystemPrefix(prefixHolder);
  +fieldset({name,trigger,addClass})
    block
//- End Mixin




//- @pugdoc
  name: repeating_section
  description: A mixin that creates a section element with an h2, a space for column headers, and a {@link customcontrolfieldset} which can be styled to fit those column headers. The h2 labels the section via `aria-labelledby`.
  arguments:
    - {string} name - The name of the section as per {@link 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.
    - {string} header - The translation key for the h2 element in the section
    - {array} columnArr - Array of translation keys to use as column headers. These are added as h5's.
    - {string} id - An id to use for the section element.
  attributes:
  example: |
    include _htmlelements.pug
    +repeating_section('attacks','weapons',['name','bonus','damage','property'],'atk')
      +text({name:'name'})
      +number({name:'bonus'})
      +text({name:'damage'})
      +text({name:'properties'})
mixin repeating_section(name,header,columnArr,id)
  section(class=`repeating-container--${name} repeating-container section` id=`${(id||name).replace(/\s+/g,'-')}`)
    if header
      h2(data-i18n=header)
    if columnArr
      .repeat-columns
        each head in columnArr
          h5(data-i18n=head)
    +customControlFieldset(name)
      block
//- End Mixin




//- @pugdoc
  name: inlineFieldset
  description: An alias for {@link fieldset} that creates a fieldset with an added class that can be easily hooked into via CSS to style the fieldset for inline display.
  arguments:
    - {string} name - The name of the repeating section. Will be prefixed with `repeating_` and spaces will be replaced with dashes (`-`).
    - {object} [trigger] - Trigger that defines how to handle the removal of a row from the fieldset. `Optional`
    - {string} addClass - 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`.
  attributes:
  example: |
    include _htmlelements.pug
    +inlineFieldset({
      name:'fieldset',
      trigger:{triggeredFuncs:['doWhenRemoved']},
      addClass:'some-class'
    })
mixin inlineFieldset({name,trigger,addClass})
  - addClass = addClass ? `${addClass} inline-fieldset` : 'inline-fieldset';
  - varObjects.inlineFieldsets = varObjects.inlineFieldsets || [];
  - varObjects.inlineFieldsets.push(name);
  +fieldset({name,trigger,addClass})
    +radio({name:'display state',class:'display-control',value:'short-display',hidden:''})
    .inline-fieldset__summary.display-target
      label.pointer
        +checkbox({name:'collapse',value:1,hidden:'',trigger:{triggeredFuncs:['collapseSection']}})
        +span({name:'name',class:'inline-fieldset__summary__text'})
    +radio({name:'display state',class:'display-control',value:'display',checked:'',hidden:''})
    .inline-fieldset__detail.display-target
      +collapse
      block
  
  +action({name:`add ${name}`,class:'repcontrol-button repcontrol-button--add repcontrol-button--inline',trigger:{listenerFunc:'sectionInteract'}})
  +action({name:`edit ${name}`,class:'repcontrol-button repcontrol-button--edit repcontrol-button--inline',trigger:{listenerFunc:'sectionInteract'}})
//- End Mixin