Generate Input Groups From Templates – Input Group Collection

Input Group Collection is a JavaScript plugin that enables you to generate input groups from templates dynamically.

This can help developers easily replicate and customize form elements to simplify the form-building process.

How to use it:

1. Download and import the Input Group Collection.

import InputGroupCollection from "./src/js/modules/InputGroupCollection.mod.1.0.0.js";

<!-- OR -->
<script src="./src/js/iife/InputGroupCollection.iife.1.0.0.js"></script>

2. Create a wrapper for the input groups. Available HTML data attributes:

• data-mode: “prefix” mode generate fields like “prefix[index][inputName]=value”; “json” & “jform” mode generate a hidden field to send all data in one input as json array.
• data-prefix: input prefix.
• data-template: custom template to clone
• data-navbar: selector for navbar template (if not included in input group template).
• data-container: container for new nodes (if not exists, generated dynamically)
• data-buttons: selector for buttons (or use .fic-button class in button)

<div class="example"
     data-mode="json"
     data-prefix="myPrefix"
     data-navbar="#template-nav">
    <!--add .fic-container as first node dynamically <div class="fic-container"></div>-->
    <!--Buttons to add new collection to container -->
    <div class="buttons">
      <!--buttons have a data-template selector, the script will load this-->
      <!--.fic-button is the default fallback, else, define data-buttons selector in wrapper -->
      <!--Each button has his own dataset __type & template.-->
      <button type="button"
              data-template="#template-person"
              data-__type="person"
              class="fic-button ">Add person
      </button>
      <button type="button"
              data-template="#template-org"
              data-__type="org"
              class="fic-button">Add organisation
      </button>
    </div>
</div>

3. Create templates as follows:

<!--Navbar outside template -->
<template id="template-nav">
  <div class="fic-navbar">
    <button type="button" class="fic-navbar_trash">Trash</div>
    <div data-arrow="down">
      <button type="button" class="fic-navbar_down">Move Down
    </div>
    <div data-arrow="up">
      <button type="button" class="fic-navbar_up">Move Up</button>
    </div>
    <button type="button" class="fic-navbar_toggle">Toggle</button></div>
  </div>
</template>

<!--Person template.  ID is defined in button dataset -->
<template id="template-person">
  <div class="border border-grey">
    <!--Form wrapper -->
    <div class="fic-group">
      <div  class="row m-2" >
        <div class="col-md-3">
          <div class="fw-bold">Title</div>
        </div>
        <div class="col-md"><input data-name="title" class="form-control" value=""></div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3 d-flex flex-column" style="line-height: 1em">
          <span class="fw-bold">Initials</span> <small style="font-size: 0.7em" class="small text-muted">Recommended</small>
        </div>
        <div class="col-md"><input data-recommended="true" data-name="initials" class="form-control" value=""></div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3">
          <div class="fw-bold">First name(s)</div>
        </div>
        <div class="col-md">
          <input data-name="firstname" class="form-control" value="">
        </div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3">
          <div class="fw-bold">Infix</div>
        </div>
        <div class="col-md">
          <input data-name="infix" class="form-control" value="">
        </div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3 d-flex flex-column" style="line-height: 1em">
          <div class="fw-bold p-0">Last name</div>
          <small style="font-size: 0.7em" class="small text-muted">Recommended</small>
        </div>
        <div class="col-md">
          <input data-name="lastname" data-recommended="true" class="form-control" value="">
        </div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3">
          <div class="fw-bold">Suffix</div>
        </div>
        <div class="col-md">
          <input data-name="suffix" class="form-control" value="">
        </div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3">
          <div class="fw-bold">Screen name</div>
        </div>
        <div class="col-md">
          <input data-name="screenname" class="form-control" value="">
        </div>
      </div>
      <div  class="row m-2">
        <div class="col-md-3">
          <div class="fw-bold">Role</div>
        </div>
        <div class="col-md">
          <select data-name="role" tabindex="-1" class="form-control">
            <option value="author">Author</option>
            <option value="editor">Editor</option>
            <option value="translator">Translator</option>
            <option disabled style="color: grey;">other</option>
            <option value="container-author">Author of container </option>
            <option value="director">Director</option>
            <option value="illustrator">Illustrator</option>
            <option value="interviewer">Interviewer</option>
            <option value="uploader">Uploader</option>
          </select>
        </div>
        <input data-name="__type" hidden class="form-control" value="person">
      </div>
    </div>
    <!--End form wrapper -->
  </div>
</template>

4. Initialize the plugin.

let contributor= new InputGroupCollection('.example',  {
    /**
     * Fill with a string the current Control bar on 'input' events.
     * The fallback join all fields with spaces
     * @param {Object} json Form to json
     * @param {HTMLElement} elm Current wrapper for this form
     */
    jsonToNavbar: function(json, elm){
        let
            fields= {
                person: 'title firstname initials infix lastname suffix screenname role'.split(' '),
                org: 'name screenname role'.split(' ')
            },
            out=[],
            navTxt= elm.querySelector('.fic-navbar_txt');
        fields[json['__type']].forEach(el=>{
            if (json[el])
            {
                if(['initials', 'screenname'].includes(el)){
                    out.push(` (${json[el]}) `);
                }
                else if(['role'].includes(el)){
                    out.push(` [${json[el]}]`);
                }
                else{
                    out.push(` ${json[el]} `);
                }
            }
        });
        if(out.length) navTxt.title= navTxt.innerHTML=out.join('');
    }
});
contributor.populate(JSON.parse('[{"role":"editor","__type":"person","initials":"J","lastname":"Doe","firstname":"John","screenname":"mitridates"},{"name":"Some Local Library ","role":"editor","__type":"org","screenname":"SLL"}]'));