jpc-like-websites/src/builder.js

/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * @copyright by its creator Christian Martin 
 */

/**
 * Method Collection with predefined HTMLElements
 */
const builder = {
     components: {
          parent: {},
          current: {},
          previous: {},
          next: {},
          openedChain: {}
     },

     componentFromHTML: function (htmlText) {
          let compel = new Component(new DOMParser().parseFromString(htmlText, "text/html"));
          return compel;
     },

     /**
      * 
      * @param {string} tag 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     anchor: function (attr = {}) { return builder.genTag("a", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     label: function (attr = {}) { return builder.genTag("label", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     button: function (attr = {}) { return builder.genTag("button", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     input: function (type, attr = {}) {
          return new InputComponent(
               document.createElement("input"),
               Object.assign({ "type": type }, attr)
          )
               .addStyleClass(`el-input`);
     },


     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Function<Component>}
      */
     inputTags: Object.freeze({
          button: function (attr = {}) { return builder.input("button", attr) },
          checkbox: function (attr = {}) { return builder.input("checkbox", attr) },
          color: function (attr = {}) { return builder.input("color", attr) },
          date: function (attr = {}) { return builder.input("date", attr) },
          datetime: function (attr = {}) { return builder.input("datetime", attr) },
          datetime_local: function (attr = {}) { return builder.input("datetime-local", attr) },
          email: function (attr = {}) { return builder.input("email", attr) },
          file: function (attr = {}) { return builder.input("file", attr) },
          image: function (attr = {}) { return builder.input("image", attr) },
          month: function (attr = {}) { return builder.input("month", attr) },
          number: function (attr = {}) { return builder.input("number", attr) },
          password: function (attr = {}) { return builder.input("password", attr) },
          radio: function (attr = {}) { return builder.input("radio", attr) },
          range: function (attr = {}) { return builder.input("range", attr) },
          reset: function (attr = {}) { return builder.input("reset", attr) },
          search: function (attr = {}) { return builder.input("search", attr) },
          submit: function (attr = {}) { return builder.input("submit", attr) },
          tel: function (attr = {}) { return builder.input("tel", attr) },
          text: function (attr = {}) { return builder.input("text", attr) },
          time: function (attr = {}) { return builder.input("time", attr) },
          url: function (attr = {}) { return builder.input("url", attr) },
          week: function (attr = {}) { return builder.input("week", attr) }
     }),

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     div: function (attr = {}) { return builder.genTag("div", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     span: function (attr = {}) { return builder.genTag("span", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     paragraph: function (attr = {}) { return builder.genTag("p", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     select: function (attr = {}) { return builder.genTag("select", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     option: function (attr = {}) { return builder.genTag("option", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     icon: function (attr = {}) { return builder.genTag("icon", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     img: function (attr = {}) { return builder.genTag("img", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     textarea: function (attr = {}) {
          return new InputComponent(
               document.createElement("textarea"),
               attr
          )
               .addStyleClass(`el-textarea`);
     },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     table: function (attr = {}) {
          return builder.genTag("table", attr)
               .chainModifier()
               .removeStyleRule("display")
               .toComponent();
     },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableRow: function (attr = {}) { return builder.genTag("tr", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableCell: function (attr = {}) { return builder.genTag("td", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableCaption: function (attr = {}) { return builder.genTag("caption", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableBody: function (attr = {}) {
          return builder.genTag("tbody", attr)
               .chainModifier()
               .removeStyleRule("display")
               .toComponent();
     },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableHead: function (attr = {}) {
          return builder.genTag("thead", attr)
               .chainModifier()
               .removeStyleRule("display")
               .toComponent();
     },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableFooter: function (attr = {}) {
          return builder.genTag("tfoot", attr)
               .chainModifier()
               .removeStyleRule("display")
               .toComponent();
     },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     iframe: function (attr = {}) { return builder.genTag("iframe", attr) },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     form: function (attr = {}) {
          return builder.genTag("form", attr)
               .addStyleClass("flex-container-component")
               .chainModifier()
               .setStyleRule("flex-direction", "column")
               .ensureModifier()
               .toComponent()
     },

     /**
      * 
      * @param {*} attr 
      * @returns {Row}
      */
     row: function (attr = {}) { return new Row(attr) },

     /**
      * 
      * @param {*} attr 
      * @returns {Column}
      */
     column: function (attr = {}) { return new Column(attr) },

     /**
      * 
      * @todo upwards bubbling of js or css is not dealt with yet.
      * 
      * 
      * @param {Component} innerComponents 
      */
     page: function (innerComponents) {
          let main = document.querySelector('main');

          main.parentElement.insertAdjacentElement(
               "afterbegin",
               builder.genTag("main")
                    .alignment(Alignment.CENTER)
                    .arrangement(Arrangement.CENTER)
                    .childContext(innerComponents)
                    .generate()
                    .html
          );
          Page.generate();
          main.remove();
     }
}