docs/form_layouts.js.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: form/layouts.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: form/layouts.js</h1>

    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * Module for the creation and handling of the DOM representation for
 * {@link module:formElement~FormElement} objects.
 *
 * It relies on [Bootstrap](https://getbootstrap.com/) for styling and
 * positioning.
 *
 * @module layouts
 */
import JsonSchemaType from './json-schema/JsonSchemaType.js';
import pointerToId from '../utils/pointerToId.js';

/** Class that structures the DOM layout of the form element. */
class Layout {
  /**
   * Class constructor.
   *
   * @param {module:formElement~FormElement} fe The form element which the DOM
   * structure and styling will be created for.
   */
  constructor(fe) {
    /**
     * A header bar inlcuding form element annotations and metadata.
     *
     * @type {HTMLDivElement}
     */
    this.headerBar = createHeaderBar(fe);

    /**
     * The pane containing the content of the form element.
     *
     * @type {HTMLDivElement}
     */
    this.contentPane = createContentPane(fe);

    /**
     * The main pane that includes the header bar and the content pane.
     *
     * @type {HTMLDivElement}
     */
    this.mainPane = [this.headerBar, this.contentPane].reduce((acc, e) => {
      acc.appendChild(e);
      return acc;
    }, document.createElement('div'));

    /**
     * The root DOM element.
     *
     * @type {HTMLDivElement}
     */
    this.root = document.createElement('div');
    this.root.id = pointerToId(fe.pointer);
    this.root.appendChild(this.mainPane);

    this.root.classList.add('row', 'pt-4');
    this.mainPane.classList.add('col');
  }

  /**
   * Updates the content pane with the new content included in the form element
   * object.
   *
   * @param {module:formElement~FormElement} fe The form element to be updated.
   */
  updateContentPane(fe) {
    const newContentPane = createContentPane(fe);
    this.contentPane.replaceWith(newContentPane);
    this.contentPane = newContentPane;
  }
}

/**
 * Creates the header bar to represent a form element.
 *
 * @param {module:formElement~FormElement} fe The form element which the header
 * bar will be created for.
 *
 * @returns {HTMLDivElement} The header bar.
 */
function createHeaderBar(fe) {
  const icon = fe.titleIcon.domElement;
  const title = fe.title ? fe.title.domElement : null;
  const selectors = fe.selectors ? fe.selectors.domElement : null;

  const bar = [icon, title, selectors].reduce((acc, e) => {
    if (e) acc.appendChild(e);

    return acc;
  }, document.createElement('div'));

  const headerBar = document.createElement('div');
  headerBar.appendChild(bar);

  headerBar.classList.add('row');
  bar.classList.add('col', 'd-flex', 'align-items-center');
  icon.classList.add('icon');

  if (selectors) selectors.classList.add('pl-2', 'ml-auto');

  return headerBar;
}

/**
 * Creates the content pane to represent a form element according to its
 * associated JSON Schema.
 *
 * @param {module:formElement~FormElement} fe The form element which the content
 * pane will be created for.
 *
 * @returns {HTMLDivElement} The content pane.
 */
function createContentPane(fe) {
  if (fe.keywords.const || (fe.keywords.enum &amp;&amp; fe.keywords.enum.length === 1))
    return createConstLayout(fe);
  else if (fe.keywords.enum &amp;&amp; fe.keywords.enum.length > 1)
    return createEnumLayout(fe);
  else if (fe.keywords.type === JsonSchemaType.ARRAY)
    return createArrayLayout(fe);
  else if (fe.keywords.type === JsonSchemaType.OBJECT)
    return createObjectLayout(fe);
  else return createPrimitiveTypeLayout(fe);
}

/**
 * Creates the content pane to represent a form element with a `const` JSON
 * Schema.
 *
 * @param {module:formElement~FormElement} fe The form element which the content
 * pane will be created for.
 *
 * @returns {HTMLDivElement} The content pane conceived for a form element with
 * a `const` JSON Schema.
 */
function createConstLayout(fe) {
  return createPrimitiveTypeLayout(fe);
}

/**
 * Creates the content pane to represent a form element with an `enum` JSON
 * Schema.
 *
 * @param {module:formElement~FormElement} fe The form element which the content
 * pane will be created for.
 *
 * @returns {HTMLDivElement} The content pane conceived for a form element with
 * an `enum` JSON Schema.
 */
function createEnumLayout(fe) {
  const contentPane = fe.content.domElement;
  contentPane.classList.add('primitive', 'row', 'pt-2');

  return contentPane;
}

/**
 * Creates the content pane to represent a form element with an `array`-typed
 * JSON Schema.
 *
 * @param {module:formElement~FormElement} fe The form element which the content
 * pane will be created for.
 *
 * @returns {HTMLDivElement} The content pane conceived for a form element with
 * an `array`-typed JSON Schema.
 */
function createArrayLayout(fe) {
  const contentPane = fe.content.domElement;
  contentPane.classList.add('row', 'row-cols-1');

  return contentPane;
}

/**
 * Creates the content pane to represent a form element with an `object`-typed
 * JSON Schema.
 *
 * @param {module:formElement~FormElement} fe The form element which the content
 * pane will be created for.
 *
 * @returns {HTMLDivElement} The content pane conceived for a form element with
 * an `object`-typed JSON Schema.
 */
function createObjectLayout(fe) {
  const contentPane = fe.content.domElement;
  contentPane.classList.add('row', 'row-cols-1');

  return contentPane;
}

/**
 * Creates the content pane to represent a form element with any primitive JSON
 * Schema type (`boolean`, `integer`, `number` and `string`).
 *
 * @param {module:formElement~FormElement} fe The form element which the content
 * pane will be created for.
 *
 * @returns {HTMLDivElement} The content pane conceived for a form element with
 * an primitive-typed JSON Schema.
 */
function createPrimitiveTypeLayout(fe) {
  const contentPane = fe.content.domElement;
  contentPane.classList.add('primitive', 'pt-2');

  return contentPane;
}

/**
 * Creates an arranged HTML container (by including styling and structure) for
 * the part of a form element representing a `properties` JSON Schema child
 * applicator.
 *
 * @param {HTMLDivElement} childrenDiv The `&lt;div>` element containing the
 * children form elements representation.
 *
 * @returns {HTMLDivElement} The arranged HTML container.
 */
function arrangeProperties(childrenDiv) {
  childrenDiv.classList.add('col-sm-11', 'offset-sm-1', 'pl-sm-3', 'pl-4');
  return childrenDiv;
}

/**
 * Creates an arranged HTML container (by including styling and structure) for
 * the part of a form element representing an `additionalProperties` JSON Schema
 * child applicator.
 *
 * @param {HTMLDivElement} titleIconDiv The `&lt;div>` element containing the child
 * applicator's title icon representation.
 * @param {HTMLDivElement} titleDiv The `&lt;div>` element containing the child
 * applicator's title representation.
 * @param {HTMLDivElement} childrenDiv The `&lt;div>` element containing the
 * children form elements representation.
 * @param {HTMLDivElement} addButtonDiv The `&lt;div>` element containing the child
 * applicator's add button representation.
 *
 * @returns {HTMLDivElement} The arranged HTML container.
 */
function arrangeAdditionalProperties(
  titleIconDiv,
  titleDiv,
  childrenDiv,
  addButtonDiv
) {
  return arrangeAdditionalChildren(
    titleIconDiv,
    titleDiv,
    childrenDiv,
    addButtonDiv
  );
}

/**
 * Creates an arranged HTML container (by including styling and structure) for
 * the part of a form element representing an `items` JSON Schema child
 * applicator.
 *
 * @param {HTMLDivElement} childrenDiv The `&lt;div>` element containing the
 * children form elements representation.
 * @param {HTMLDivElement} addButtonDiv The `&lt;div>` element containing the child
 * applicator's add button representation.
 *
 * @returns {HTMLDivElement} The arranged HTML container.
 */
function arrangeItems(childrenDiv, addButtonDiv) {
  const domElement = [childrenDiv, addButtonDiv].reduce((acc, e) => {
    acc.appendChild(e);
    return acc;
  }, document.createElement('div'));

  childrenDiv.classList.add('col-sm-11', 'offset-sm-1', 'pl-sm-3', 'pl-4');
  addButtonDiv.classList.add(
    'col-sm-11',
    'offset-sm-1',
    'pl-sm-3',
    'pl-4',
    'pt-3'
  );
  return domElement;
}

/**
 * Creates an arranged HTML container (by including styling and structure) for
 * the part of a form element representing an `additionalItems` JSON Schema
 * child applicator.
 *
 * @param {HTMLDivElement} titleIconDiv The `&lt;div>` element containing the child
 * applicator's title icon representation.
 * @param {HTMLDivElement} titleDiv The `&lt;div>` element containing the child
 * applicator's title representation.
 * @param {HTMLDivElement} childrenDiv The `&lt;div>` element containing the
 * children form elements representation.
 * @param {HTMLDivElement} addButtonDiv The `&lt;div>` element containing the
 * child applicator's add button representation.
 *
 * @returns {HTMLDivElement} The arranged HTML container.
 */
function arrangeAdditionalItems(
  titleIconDiv,
  titleDiv,
  childrenDiv,
  addButtonDiv
) {
  return arrangeAdditionalChildren(
    titleIconDiv,
    titleDiv,
    childrenDiv,
    addButtonDiv
  );
}

/**
 * Creates an arranged HTML container (by including styling and structure) for
 * the part of a form element representing a JSON Schema child applicator that
 * allows for additional elements.
 *
 * @param {HTMLDivElement} titleIconDiv The `&lt;div>` element containing the child
 * applicator's title icon representation.
 * @param {HTMLDivElement} titleDiv The `&lt;div>` element containing the child
 * applicator's title representation.
 * @param {HTMLDivElement} childrenDiv The `&lt;div>` element containing the
 * children form elements representation.
 * @param {HTMLDivElement} addButtonDiv The `&lt;div>` element containing the child
 * applicator's add button representation.
 *
 * @returns {HTMLDivElement} The arranged HTML container.
 */
function arrangeAdditionalChildren(
  titleIconDiv,
  titleDiv,
  childrenDiv,
  addButtonDiv
) {
  const bar = [titleIconDiv, titleDiv].reduce((acc, e) => {
    acc.appendChild(e);

    return acc;
  }, document.createElement('div'));

  const colBar = document.createElement('div');
  colBar.appendChild(bar);
  const headerBar = document.createElement('div');
  headerBar.appendChild(colBar);

  const mainPane = [childrenDiv, addButtonDiv].reduce((acc, e) => {
    if (e) acc.appendChild(e);

    return acc;
  }, document.createElement('div'));

  const domElement = [headerBar, mainPane].reduce((acc, e) => {
    acc.appendChild(e);

    return acc;
  }, document.createElement('div'));

  domElement.classList.add('col');

  headerBar.classList.add('row', 'pt-3');
  colBar.classList.add('col', 'pl-sm-5');
  bar.classList.add('d-flex', 'align-items-center');
  titleIconDiv.classList.add('icon');

  mainPane.classList.add('row', 'row-cols-1');
  childrenDiv.classList.add('col-sm-11', 'offset-sm-1', 'pl-sm-3', 'pl-4');
  addButtonDiv.classList.add(
    'col-sm-11',
    'offset-sm-1',
    'pl-sm-3',
    'pl-4',
    'pt-3'
  );

  return domElement;
}

export default Layout;
export {
  arrangeProperties,
  arrangeAdditionalProperties,
  arrangeItems,
  arrangeAdditionalItems,
};
</code></pre>
        </article>
    </section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-childApplicators.html">childApplicators</a></li><li><a href="module-components.html">components</a></li><li><a href="module-formElement.html">formElement</a></li><li><a href="module-formElementDefinitions.html">formElementDefinitions</a></li><li><a href="module-inPlaceApplicators.html">inPlaceApplicators</a></li><li><a href="module-JsonSchemaForms.html">JsonSchemaForms</a></li><li><a href="module-JsonSchemaKeywords.html">JsonSchemaKeywords</a></li><li><a href="module-JsonSchemaType.html">JsonSchemaType</a></li><li><a href="module-layouts.html">layouts</a></li><li><a href="module-selectors.html">selectors</a></li></ul><h3>Classes</h3><ul><li><a href="module-childApplicators-AdditionalItems.html">AdditionalItems</a></li><li><a href="module-childApplicators-AdditionalProperties.html">AdditionalProperties</a></li><li><a href="module-childApplicators-ArrayHandler.html">ArrayHandler</a></li><li><a href="module-childApplicators-ChildrenHandler.html">ChildrenHandler</a></li><li><a href="module-childApplicators-Items.html">Items</a></li><li><a href="module-childApplicators-ObjectHandler.html">ObjectHandler</a></li><li><a href="module-childApplicators-Properties.html">Properties</a></li><li><a href="module-components-AddButton.html">AddButton</a></li><li><a href="module-components-BooleanInput.html">BooleanInput</a></li><li><a href="module-components-GeneratorIcon.html">GeneratorIcon</a></li><li><a href="module-components-InputTitle.html">InputTitle</a></li><li><a href="module-components-InstanceViewPanel.html">InstanceViewPanel</a></li><li><a href="module-components-LabelTitle.html">LabelTitle</a></li><li><a href="module-components-NumericInput.html">NumericInput</a></li><li><a href="module-components-PillsInstancePanel.html">PillsInstancePanel</a></li><li><a href="module-components-RemoveButton.html">RemoveButton</a></li><li><a href="module-components-RequiredIcon.html">RequiredIcon</a></li><li><a href="module-components-RootIcon.html">RootIcon</a></li><li><a href="module-components-Select.html">Select</a></li><li><a href="module-components-SelectInstancePanel.html">SelectInstancePanel</a></li><li><a href="module-components-TextInput.html">TextInput</a></li><li><a href="module-components-Toggler.html">Toggler</a></li><li><a href="module-formElementDefinitions-State.html">State</a></li><li><a href="module-formElement-FormElement.html">FormElement</a></li><li><a href="module-inPlaceApplicators-Aggregation.html">Aggregation</a></li><li><a href="module-inPlaceApplicators-InPlaceApplicator.html">InPlaceApplicator</a></li><li><a href="module-inPlaceApplicators-IPASchema.html">IPASchema</a></li><li><a href="module-layouts-Layout.html">Layout</a></li><li><a href="module-selectors-Selector.html">Selector</a></li><li><a href="module-selectors-SelectorsContainer.html">SelectorsContainer</a></li><li><a href="module-selectors-SelectorsToolbar.html">SelectorsToolbar</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-childApplicators-ChildApplicator.html">ChildApplicator</a></li><li><a href="module-components-Component.html">Component</a></li><li><a href="module-components-InputComponent.html">InputComponent</a></li></ul><h3>Global</h3><ul><li><a href="global.html#defaultFormOptions">defaultFormOptions</a></li><li><a href="global.html#formElementByDiv">formElementByDiv</a></li><li><a href="global.html#lcm">lcm</a></li><li><a href="global.html#pointerToId">pointerToId</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a>
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>