Author: | mitridates |
---|---|
Views Total: | 34 views |
Official Page: | Go to website |
Last Update: | March 30, 2023 |
License: | MIT |
Preview:

Description:
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"}]'));