npm - domelemjs - Versions diffs - 1.0.1 → 1.0.5 - Mend

domelemjs 1.0.1 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/{elem.html → DOMElem.html} +1 -1
package/DOMElemJS.js +120 -0
package/DOMElemJS.min.js +2 -0
package/DOMElemJS.min.js.map +87 -0
package/README.md +165 -0
package/{createElem.html → createDOMElem.html} +6 -6
package/createDOMElem.js +1 -1
package/createDOMElem.min.js +1 -1
package/createDOMElem.min.js.map +1 -2
package/createDOMElemJS.js +138 -0
package/createDOMElemJS.min.js +2 -0
package/createDOMElemJS.min.js.map +59 -0
package/package.json +1 -1

package/{elem.html → DOMElem.html} RENAMED Viewed

@@ -7,7 +7,7 @@
     <title>Document</title>
   </head>
   <body>
-    <script src="elem-object.js"></script>
+    <script src="DOMElemJS.js"></script>
     <script>
       /* használata */

package/DOMElemJS.js ADDED Viewed

@@ -0,0 +1,120 @@
+const DOMElem = {
+  noSpecChars: function (text, lowercase = false) {
+    function replaceAll(string, search, replace) {
+      return string.split(search).join(replace);
+    }
+    let specialChars = {
+      é: "e",
+      á: "a",
+      ó: "o",
+      ö: "o",
+      ő: "o",
+      ú: "u",
+      ü: "u",
+      ű: "u",
+      í: "i",
+      É: "E",
+      Á: "A",
+      Ó: "O",
+      Ö: "O",
+      Ő: "O",
+      Ú: "U",
+      Ü: "U",
+      Ű: "U",
+      Í: "I",
+      " ": "-",
+      "/": "-",
+      ":": "-",
+      ";": "-",
+      "=": "-",
+    };
+    for (let char in specialChars) {
+      text = replaceAll(text, char, specialChars[char]);
+    }
+    return lowercase ? text.toLowerCase() : text;
+  },
+  Create: function (parameters) {
+    let tag = parameters.tag || "div";
+    let attributes = parameters.attributes || {};
+    let children = parameters.children || [];
+    let eventStarter = parameters.eventStarter || null;
+    let eventFunction = parameters.eventFunction || null;
+    let content = parameters.content || null;
+    let text = parameters.text || null;
+    let style = parameters.style || null;
+    let targetParent =
+      typeof parameters.targetParent == "string"
+        ? document.querySelector(parameters.targetParent) ||
+          document.getElementById(parameters.targetParent)
+        : typeof parameters.targetParent == "object"
+        ? parameters.targetParent
+        : null;
+    let elem = document.createElement(tag);
+    for (let attr in attributes) {
+      elem.setAttribute(
+        attr,
+        attr == "class" || attr == "id"
+          ? this.noSpecChars(attributes[attr])
+          : attributes[attr]
+      );
+    }
+    /*
+     * Adding stye is possible as:
+     * * a string, with a bunch of style properties, it can be:
+     * * * CCS style (e.g. background-color) or
+     * * * JS/camelCase (e.g. backgroundColor) style formatted version also.
+     * * or an object formatted (e.g. style: { backgroundColor: red })
+     * * or an array with multiple style strings with CSS or JS vesrion, or mixed
+     */
+    if (style) {
+      let styleText;
+      if (typeof style === "string") {
+        styleText = style;
+      } else if (Array.isArray(style)) {
+        styleText = style.join("; ");
+      } else if (typeof style === "object") {
+        styleText = [];
+        for (let s in style) {
+          styleText.push(`${s}: ${style[s]}`);
+        }
+        styleText = styleText.join("; ");
+        console.log(styleText);
+      }
+      styleText.split(";").forEach((styleText) => {
+        let [s, p] = styleText.split(":").map((c) => c.trim());
+        s = s
+          .split("-")
+          .map((ss, i) => {
+            return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
+          })
+          .join("");
+        elem.style[s] = p;
+      });
+    }
+    children.map((child) => {
+      typeof child != "object"
+        ? (child = document.createTextNode(child))
+        : null;
+      elem.appendChild(child);
+    });
+    if (content) elem.innerHTML = content;
+    if (text) elem.textContent = text;
+    if (eventStarter && eventFunction)
+      elem.addEventListener(eventStarter, eventFunction);
+    if (targetParent) targetParent.appendChild(elem);
+    return elem;
+  },
+};

package/DOMElemJS.min.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const DOMElem={noSpecChars:function(text,lowercase=!1){function replaceAll(string,search,replace){return string.split(search).join(replace)}let specialChars={"é":"e","á":"a","ó":"o","ö":"o","ő":"o","ú":"u","ü":"u","ű":"u","í":"i","É":"E","Á":"A","Ó":"O","Ö":"O","Ő":"O","Ú":"U","Ü":"U","Ű":"U","Í":"I"," ":"-","/":"-",":":"-",";":"-","=":"-"};for(let char in specialChars)text=replaceAll(text,char,specialChars[char]);return lowercase?text.toLowerCase():text},Create:function(parameters){let tag=parameters.tag\|\|"div",attributes=parameters.attributes\|\|{},children=parameters.children\|\|[],eventStarter=parameters.eventStarter\|\|null,eventFunction=parameters.eventFunction\|\|null,content=parameters.content\|\|null,text=parameters.text\|\|null,style=parameters.style\|\|null,targetParent="string"==typeof parameters.targetParent?document.querySelector(parameters.targetParent)\|\|document.getElementById(parameters.targetParent):"object"==typeof parameters.targetParent?parameters.targetParent:null,elem=document.createElement(tag);for(let attr in attributes)elem.setAttribute(attr,"class"==attr\|\|"id"==attr?this.noSpecChars(attributes[attr]):attributes[attr]);if(style){let styleText;if("string"==typeof style)styleText=style;else if(Array.isArray(style))styleText=style.join("; ");else if("object"==typeof style){styleText=[];for(let s in style)styleText.push(`${s}: ${style[s]}`);styleText=styleText.join("; "),console.log(styleText)}styleText.split(";").forEach(styleText=>{let[s,p]=styleText.split(":").map(c=>c.trim());s=s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join(""),elem.style[s]=p})}return children.map(child=>{"object"!=typeof child&&(child=document.createTextNode(child)),elem.appendChild(child)}),content&&(elem.innerHTML=content),text&&(elem.textContent=text),eventStarter&&eventFunction&&elem.addEventListener(eventStarter,eventFunction),targetParent&&targetParent.appendChild(elem),elem}};
2	+ //# sourceMappingURL=DOMElemJS.min.js.map

package/DOMElemJS.min.js.map ADDED Viewed

@@ -0,0 +1,87 @@
+{
+    "version": 3,
+    "sources": [
+        "DOMElemJS.js"
+    ],
+    "names": [
+        "DOMElem",
+        "noSpecChars",
+        "text",
+        "lowercase",
+        "replaceAll",
+        "string",
+        "search",
+        "replace",
+        "split",
+        "join",
+        "specialChars",
+        "é",
+        "á",
+        "ó",
+        "ö",
+        "ő",
+        "ú",
+        "ü",
+        "ű",
+        "í",
+        "É",
+        "Á",
+        "Ó",
+        "Ö",
+        "Ő",
+        "Ú",
+        "Ü",
+        "Ű",
+        "Í",
+        " ",
+        "/",
+        ":",
+        ";",
+        "=",
+        "char",
+        "toLowerCase",
+        "Create",
+        "parameters",
+        "tag",
+        "attributes",
+        "children",
+        "eventStarter",
+        "eventFunction",
+        "content",
+        "style",
+        "targetParent",
+        "document",
+        "querySelector",
+        "getElementById",
+        "elem",
+        "createElement",
+        "attr",
+        "setAttribute",
+        "this",
+        "styleText",
+        "Array",
+        "isArray",
+        "s",
+        "push",
+        "console",
+        "log",
+        "forEach",
+        "p",
+        "map",
+        "c",
+        "trim",
+        "ss",
+        "i",
+        "charAt",
+        "toUpperCase",
+        "slice",
+        "child",
+        "createTextNode",
+        "appendChild",
+        "innerHTML",
+        "textContent",
+        "addEventListener"
+    ],
+    "mappings": "AAAA,MAAMA,QAAU,CACdC,YAAa,SAAUC,KAAMC,WAAY,GACvC,SAASC,WAAWC,OAAQC,OAAQC,SAClC,OAAOF,OAAOG,MAAMF,QAAQG,KAAKF,SAGnC,IAAIG,aAAe,CACjBC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAK,IACLC,IAAK,IACLC,IAAK,IACLC,IAAK,IACLC,IAAK,KAEP,IAAK,IAAIC,QAAQxB,aACfR,KAAOE,WAAWF,KAAMgC,KAAMxB,aAAawB,OAE7C,OAAO/B,UAAYD,KAAKiC,cAAgBjC,MAG1CkC,OAAQ,SAAUC,YAChB,IAAIC,IAAMD,WAAWC,KAAO,MACxBC,WAAaF,WAAWE,YAAc,GACtCC,SAAWH,WAAWG,UAAY,GAClCC,aAAeJ,WAAWI,cAAgB,KAC1CC,cAAgBL,WAAWK,eAAiB,KAC5CC,QAAUN,WAAWM,SAAW,KAChCzC,KAAOmC,WAAWnC,MAAQ,KAC1B0C,MAAQP,WAAWO,OAAS,KAE5BC,aACgC,iBAA3BR,WAAWQ,aACdC,SAASC,cAAcV,WAAWQ,eAClCC,SAASE,eAAeX,WAAWQ,cACD,iBAA3BR,WAAWQ,aAClBR,WAAWQ,aACX,KAEFI,KAAOH,SAASI,cAAcZ,KAElC,IAAK,IAAIa,QAAQZ,WACfU,KAAKG,aACHD,KACQ,SAARA,MAA2B,MAARA,KACfE,KAAKpD,YAAYsC,WAAWY,OAC5BZ,WAAWY,OAanB,GAAIP,MAAO,CACT,IAAIU,UACJ,GAAqB,iBAAVV,MACTU,UAAYV,WACP,GAAIW,MAAMC,QAAQZ,OACvBU,UAAYV,MAAMnC,KAAK,WAClB,GAAqB,iBAAVmC,MAAoB,CACpCU,UAAY,GACZ,IAAK,IAAIG,KAAKb,MACZU,UAAUI,KAAK,GAAGD,MAAMb,MAAMa,MAEhCH,UAAYA,UAAU7C,KAAK,MAC3BkD,QAAQC,IAAIN,WAGdA,UAAU9C,MAAM,KAAKqD,QAASP,YAC5B,IAAKG,EAAGK,GAAKR,UAAU9C,MAAM,KAAKuD,IAAKC,GAAMA,EAAEC,QAC/CR,EAAIA,EACDjD,MAAM,KACNuD,IAAI,CAACG,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DzD,KAAK,IACRwC,KAAKL,MAAMa,GAAKK,IAmBpB,OAfAtB,SAASuB,IAAKQ,QACI,iBAATA,QACFA,MAAQzB,SAAS0B,eAAeD,QAErCtB,KAAKwB,YAAYF,SAGf5B,UAASM,KAAKyB,UAAY/B,SAC1BzC,OAAM+C,KAAK0B,YAAczE,MAEzBuC,cAAgBC,eAClBO,KAAK2B,iBAAiBnC,aAAcC,eAElCG,cAAcA,aAAa4B,YAAYxB,MAEpCA",
+    "file": "DOMElemJS.js"
+}

package/README.md ADDED Viewed

@@ -0,0 +1,165 @@
+# DOMelemJS
+This lightweight tool is allow you to render HTML elements dynamically form JavaScript!
+There is two approach and two to use it:
+1. is the Object approach:
+   This is a tiny object with name DOMElem!
+Whit this approach you can create HTML element as follows:
+```
+Elem.Create({
+      tag: "div",
+      attrs: { class: "app" },
+    });
+```
+that gives you a div with a class: app:
+```
+<div class="app"></div>
+```
+2 the second way is through a function that named: createDOMElem()
+With this approach you should use as follows:
+```
+const app = createDOMElem({
+  tag: "div",
+  attrs: { id: "app" },
+});
+```
+that gives you a div with a id: app:
+```
+<div id="app"></div>
+```
+With this renderer you will be able to add eventListeners and styles in the moment as the DOM is created!
+e.g.:
+```
+createDOMElem({
+  tag: "h2",
+  text: "It's amazing",
+  parent: app,
+  style: { color: "red", "background-color": "green" },
+  attrs: { id: "title" },
+  handleEvent: {
+    event: "click",
+    cb: (e) => console.log(e.target.id),
+  },
+});
+```
+Handle event is an object or an array of object, that should be conain:
+- event, what will fire the event?
+- and a cb, that is the callback function
+- you can ad as many events as you want easily in an array!
+You can add the children of the element same time as the element is created:
+```
+const select = createDOMElem({
+  tag: "select",
+  parent: app,
+  attrs: { id: "selector" },
+  children: [
+    {
+      tag: "option",
+      content: "foo",
+      attr: { value: "foo" },
+    },
+    {
+      tag: "option",
+      content: "bar",
+      attr: { value: "bar" },
+    },
+  ],
+  handleEvent: {
+    event: "change",
+    cb: (e) => console.log(e.target.value),
+  },
+});
+```
+Adding stye is also possible as:
+- a string, with a bunch of style properties, it can be:
+  - CCS style (e.g. background-color) or
+  - JS/camelCase (e.g. backgroundColor) style formatted version also.
+- or an object formatted (e.g. style: { backgroundColor: red })
+- or an array with multiple style strings with CSS or JS vesrion, or mixed
+And a complex structure semms like this here:
+```
+dateFilterContainer = document.body.appendChild(
+  Elem.Create({
+    tag: "div",
+    attrs: { class: "dateFilter-Container", id: "dateFilter-Container" },
+    children: [
+      Elem.Create({
+        tag: "div",
+        attrs: {
+          class: "beginDate-container",
+          id: "beginDate-container",
+        },
+        children: [
+          Elem.Create({
+            tag: "label",
+            attrs: {
+              class: "beginDate-lable",
+            },
+            content: "Kezdő dátum: ",
+          }),
+          Elem.Create({
+            tag: "input",
+            attrs: {
+              type: "date",
+              class: "beginDate",
+              id: "beginDate",
+            },
+            eventStarter: "change",
+            eventFunction: function (e) {
+              e.preventDefault();
+              console.log(this.value);
+            },
+          }),
+        ],
+      }),
+      Elem.Create({
+        tag: "div",
+        attrs: { class: "endDate-container", id: "endDate-container" },
+        children: [
+          Elem.Create({
+            tag: "label",
+            attrs: {
+              class: "endDate-lable",
+            },
+            content: "Befejező dátum: ",
+          }),
+          Elem.Create({
+            tag: "input",
+            attrs: {
+              type: "date",
+              class: "endDate",
+              id: "endDate",
+            },
+            eventStarter: "change",
+            eventFunction: function (e) {
+              e.preventDefault();
+              console.log(this.value);
+            },
+          }),
+        ],
+      }),
+    ],
+  })
+);
+```

package/{createElem.html → createDOMElem.html} RENAMED Viewed

@@ -7,29 +7,29 @@
     <title>Document</title>
   </head>
   <body>
-    <script src="elem-func.js"></script>
+    <script src="createDOMElemJS.js"></script>
     <script>
-      const app = createElem({
+      const app = createDOMElem({
         tag: "div",
         attrs: { id: "app" },
       });
       /* styling is easy */
-      createElem({
+      createDOMElem({
         tag: "h1",
         text: "Hello World!",
         parent: app,
         style: "color: red; background-color: green",
         attrs: { id: "title" },
       });
-      createElem({
+      createDOMElem({
         tag: "h2",
         text: "It's amazing",
         parent: app,
         style: { color: "red", "background-color": "green" },
         attrs: { id: "title" },
       });
-      createElem({
+      createDOMElem({
         tag: "h3",
         text: "I can write style as I want to",
         parent: app,
@@ -38,7 +38,7 @@
       });
       /* creating a select with 2 options and eventHandler */
-      const select = createElem({
+      const select = createDOMElem({
         tag: "select",
         parent: app,
         attrs: { id: "selector" },

package/createDOMElem.js CHANGED Viewed

@@ -75,7 +75,7 @@ export function createDOMElem({
     }
     childrenArray.forEach((child) => {
       child.parent = elem;
-      createElem(child);
+      createDOMElem(child);
     });
   }

package/createDOMElem.min.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export function createDOMElem({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent}){let elem=document.createElement(tag);for(let attr in attrs)if("dataset"===attr)for(let data in attrs[attr])elem.dataset[data]=attrs[attr][data];else Array.isArray(attrs[attr])?elem.setAttribute(attr,attrs[attr].join(" ")):elem.setAttribute(attr,attrs[attr]);if(style){let styleText;if("string"==typeof style)styleText=style;else if(Array.isArray(style))styleText=style.join("; ");else if("object"==typeof style){styleText=[];for(let s in style)styleText.push(`${s}: ${style[s]}`);styleText=styleText.join("; "),console.log(styleText)}styleText.split(";").forEach(styleText=>{let[s,p]=styleText.split(":").map(c=>c.trim());s=s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join(""),elem.style[s]=p})}if(children){let childrenArray=[];Array.isArray(children)?childrenArray=children:childrenArray.push(children),childrenArray.forEach(child=>{child.parent=elem,createElem(child)})}let eventsToAdd=[];return handleEvent&&(Array.isArray(handleEvent)?eventsToAdd=[...handleEvent]:eventsToAdd.push(handleEvent),eventsToAdd.forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)})),content&&(elem.innerHTML=content),text&&(elem.textContent=text),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem}
+export function createDOMElem({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent}){let elem=document.createElement(tag);for(let attr in attrs)if("dataset"===attr)for(let data in attrs[attr])elem.dataset[data]=attrs[attr][data];else Array.isArray(attrs[attr])?elem.setAttribute(attr,attrs[attr].join(" ")):elem.setAttribute(attr,attrs[attr]);if(style){let styleText;if("string"==typeof style)styleText=style;else if(Array.isArray(style))styleText=style.join("; ");else if("object"==typeof style){styleText=[];for(let s in style)styleText.push(`${s}: ${style[s]}`);styleText=styleText.join("; "),console.log(styleText)}styleText.split(";").forEach(styleText=>{let[s,p]=styleText.split(":").map(c=>c.trim());s=s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join(""),elem.style[s]=p})}if(children){let childrenArray=[];Array.isArray(children)?childrenArray=children:childrenArray.push(children),childrenArray.forEach(child=>{child.parent=elem,createDOMElem(child)})}let eventsToAdd=[];return handleEvent&&(Array.isArray(handleEvent)?eventsToAdd=[...handleEvent]:eventsToAdd.push(handleEvent),eventsToAdd.forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)})),content&&(elem.innerHTML=content),text&&(elem.textContent=text),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem}
 //# sourceMappingURL=createDOMElem.min.js.map

package/createDOMElem.min.js.map CHANGED Viewed

@@ -41,7 +41,6 @@
         "slice",
         "childrenArray",
         "child",
-        "createElem",
         "eventsToAdd",
         "newEvent",
         "addEventListener",
@@ -55,6 +54,6 @@
         "pe",
         "appendChild"
     ],
-    "mappings": "OAAO,SAASA,eAAcC,IAC5BA,IAAGC,QACHA,QAAOC,KACPA,KAAIC,MACJA,MAAKC,MACLA,MAAKC,SACLA,SAAQC,OACRA,OAAMC,YACNA,cAKA,IAAIC,KAAOC,SAASC,cAAcV,KAKlC,IAAK,IAAIW,QAAQR,MACf,GAAa,YAATQ,KACF,IAAK,IAAIC,QAAQT,MAAMQ,MACrBH,KAAKK,QAAQD,MAAQT,MAAMQ,MAAMC,WAG/BE,MAAMC,QAAQZ,MAAMQ,OACtBH,KAAKQ,aAAaL,KAAMR,MAAMQ,MAAMM,KAAK,MAEzCT,KAAKQ,aAAaL,KAAMR,MAAMQ,OAcpC,GAAIP,MAAO,CACT,IAAIc,UACJ,GAAqB,iBAAVd,MACTc,UAAYd,WACP,GAAIU,MAAMC,QAAQX,OACvBc,UAAYd,MAAMa,KAAK,WAClB,GAAqB,iBAAVb,MAAoB,CACpCc,UAAY,GACZ,IAAK,IAAIC,KAAKf,MACZc,UAAUE,KAAK,GAAGD,MAAMf,MAAMe,MAEhCD,UAAYA,UAAUD,KAAK,MAC3BI,QAAQC,IAAIJ,WAGdA,UAAUK,MAAM,KAAKC,QAASN,YAC5B,IAAKC,EAAGM,GAAKP,UAAUK,MAAM,KAAKG,IAAKC,GAAMA,EAAEC,QAC/CT,EAAIA,EACDI,MAAM,KACNG,IAAI,CAACG,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DZ,KAAK,IACRT,KAAKJ,MAAMe,GAAKM,IAIpB,GAAIpB,SAAU,CACZ,IAAI6B,cAAgB,GACfpB,MAAMC,QAAQV,UAGjB6B,cAAgB7B,SAFhB6B,cAAcd,KAAKf,UAIrB6B,cAAcV,QAASW,QACrBA,MAAM7B,OAASE,KACf4B,WAAWD,SAOf,IAAIE,YAAc,GAoDlB,OA9CI9B,cACEO,MAAMC,QAAQR,aAChB8B,YAAc,IAAI9B,aAElB8B,YAAYjB,KAAKb,aAEnB8B,YAAYb,QAASc,WACnB9B,KAAK+B,iBAAiBD,SAASE,MAAOF,SAASG,OAOnDxC,UAAYO,KAAKkC,UAAYzC,SAI7BC,OAASM,KAAKmC,YAAczC,MAWxBI,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZoB,IAAKkB,MACGnC,SAASoC,cAAcD,KAAOtC,SAEtCwC,OAAQC,IACO,OAAPA,IACN,IAEFzC,OAASG,SAASoC,cAAc,QAEvCvC,OAAO0C,YAAYxC,MAKZA",
+    "mappings": "OAAO,SAASA,eAAcC,IAC5BA,IAAGC,QACHA,QAAOC,KACPA,KAAIC,MACJA,MAAKC,MACLA,MAAKC,SACLA,SAAQC,OACRA,OAAMC,YACNA,cAKA,IAAIC,KAAOC,SAASC,cAAcV,KAKlC,IAAK,IAAIW,QAAQR,MACf,GAAa,YAATQ,KACF,IAAK,IAAIC,QAAQT,MAAMQ,MACrBH,KAAKK,QAAQD,MAAQT,MAAMQ,MAAMC,WAG/BE,MAAMC,QAAQZ,MAAMQ,OACtBH,KAAKQ,aAAaL,KAAMR,MAAMQ,MAAMM,KAAK,MAEzCT,KAAKQ,aAAaL,KAAMR,MAAMQ,OAcpC,GAAIP,MAAO,CACT,IAAIc,UACJ,GAAqB,iBAAVd,MACTc,UAAYd,WACP,GAAIU,MAAMC,QAAQX,OACvBc,UAAYd,MAAMa,KAAK,WAClB,GAAqB,iBAAVb,MAAoB,CACpCc,UAAY,GACZ,IAAK,IAAIC,KAAKf,MACZc,UAAUE,KAAK,GAAGD,MAAMf,MAAMe,MAEhCD,UAAYA,UAAUD,KAAK,MAC3BI,QAAQC,IAAIJ,WAGdA,UAAUK,MAAM,KAAKC,QAASN,YAC5B,IAAKC,EAAGM,GAAKP,UAAUK,MAAM,KAAKG,IAAKC,GAAMA,EAAEC,QAC/CT,EAAIA,EACDI,MAAM,KACNG,IAAI,CAACG,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DZ,KAAK,IACRT,KAAKJ,MAAMe,GAAKM,IAIpB,GAAIpB,SAAU,CACZ,IAAI6B,cAAgB,GACfpB,MAAMC,QAAQV,UAGjB6B,cAAgB7B,SAFhB6B,cAAcd,KAAKf,UAIrB6B,cAAcV,QAASW,QACrBA,MAAM7B,OAASE,KACfT,cAAcoC,SAOlB,IAAIC,YAAc,GAoDlB,OA9CI7B,cACEO,MAAMC,QAAQR,aAChB6B,YAAc,IAAI7B,aAElB6B,YAAYhB,KAAKb,aAEnB6B,YAAYZ,QAASa,WACnB7B,KAAK8B,iBAAiBD,SAASE,MAAOF,SAASG,OAOnDvC,UAAYO,KAAKiC,UAAYxC,SAI7BC,OAASM,KAAKkC,YAAcxC,MAWxBI,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZoB,IAAKiB,MACGlC,SAASmC,cAAcD,KAAOrC,SAEtCuC,OAAQC,IACO,OAAPA,IACN,IAEFxC,OAASG,SAASmC,cAAc,QAEvCtC,OAAOyC,YAAYvC,MAKZA",
     "file": "createDOMElem.js"
 }

package/createDOMElemJS.js ADDED Viewed

@@ -0,0 +1,138 @@
+function createDOMElem({
+  tag,
+  content,
+  text,
+  attrs,
+  style,
+  children,
+  parent,
+  handleEvent,
+}) {
+  /*
+   * create the DOM element with the given tag
+   */
+  let elem = document.createElement(tag);
+  /*
+   *  add all the attributes they want
+   */
+  for (let attr in attrs) {
+    if (attr === "dataset") {
+      for (let data in attrs[attr]) {
+        elem.dataset[data] = attrs[attr][data];
+      }
+    } else {
+      if (Array.isArray(attrs[attr])) {
+        elem.setAttribute(attr, attrs[attr].join(" "));
+      } else {
+        elem.setAttribute(attr, attrs[attr]);
+      }
+    }
+  }
+  /*
+   * Adding stye is possible as:
+   * * a string, with a bunch of style properties, it can be:
+   * * * CCS style (e.g. background-color) or
+   * * * JS/camelCase (e.g. backgroundColor) style formatted version also.
+   * * or an object formatted (e.g. style: { backgroundColor: red })
+   * * or an array with multiple style strings with CSS or JS vesrion, or mixed
+   */
+  if (style) {
+    let styleText;
+    if (typeof style === "string") {
+      styleText = style;
+    } else if (Array.isArray(style)) {
+      styleText = style.join("; ");
+    } else if (typeof style === "object") {
+      styleText = [];
+      for (let s in style) {
+        styleText.push(`${s}: ${style[s]}`);
+      }
+      styleText = styleText.join("; ");
+      console.log(styleText);
+    }
+    styleText.split(";").forEach((styleText) => {
+      let [s, p] = styleText.split(":").map((c) => c.trim());
+      s = s
+        .split("-")
+        .map((ss, i) => {
+          return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
+        })
+        .join("");
+      elem.style[s] = p;
+    });
+  }
+  if (children) {
+    let childrenArray = [];
+    if (!Array.isArray(children)) {
+      childrenArray.push(children);
+    } else {
+      childrenArray = children;
+    }
+    childrenArray.forEach((child) => {
+      child.parent = elem;
+      createDOMElem(child);
+    });
+  }
+  /*
+   * Add the eventListener or more eventListeners it hey comes in array
+   */
+  let eventsToAdd = [];
+  /*
+   * Handle event is an object or an array of object, that should be conain:
+   * event, what will fire the event?
+   * and a cb, that is the callback function
+   */
+  if (handleEvent) {
+    if (Array.isArray(handleEvent)) {
+      eventsToAdd = [...handleEvent];
+    } else {
+      eventsToAdd.push(handleEvent);
+    }
+    eventsToAdd.forEach((newEvent) => {
+      elem.addEventListener(newEvent.event, newEvent.cb);
+    });
+  }
+  /*
+   * add the content
+   */
+  content && (elem.innerHTML = content);
+  /*
+   * add the text
+   */
+  text && (elem.textContent = text);
+  /*
+  * Append the created elem to the parent what is given, or add to the body of the Document if not given.
+  * The parent:
+    * can be a DOM element, or
+    * a String of:
+        * ID or
+        * CLass
+  */
+  if (parent) {
+    if (typeof parent === "string") {
+      parent = [".", "#"]
+        .map((prep) => {
+          return document.querySelector(prep + parent);
+        })
+        .filter((pe) => {
+          return pe !== null;
+        })[0];
+    }
+  } else parent = document.querySelector("body");
+  parent.appendChild(elem);
+  /*
+   * and at the end give the elem back for later usage
+   */
+  return elem;
+}

package/createDOMElemJS.min.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function createDOMElem({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent}){let elem=document.createElement(tag);for(let attr in attrs)if("dataset"===attr)for(let data in attrs[attr])elem.dataset[data]=attrs[attr][data];else Array.isArray(attrs[attr])?elem.setAttribute(attr,attrs[attr].join(" ")):elem.setAttribute(attr,attrs[attr]);if(style){let styleText;if("string"==typeof style)styleText=style;else if(Array.isArray(style))styleText=style.join("; ");else if("object"==typeof style){styleText=[];for(let s in style)styleText.push(`${s}: ${style[s]}`);styleText=styleText.join("; "),console.log(styleText)}styleText.split(";").forEach(styleText=>{let[s,p]=styleText.split(":").map(c=>c.trim());s=s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join(""),elem.style[s]=p})}if(children){let childrenArray=[];Array.isArray(children)?childrenArray=children:childrenArray.push(children),childrenArray.forEach(child=>{child.parent=elem,createDOMElem(child)})}let eventsToAdd=[];return handleEvent&&(Array.isArray(handleEvent)?eventsToAdd=[...handleEvent]:eventsToAdd.push(handleEvent),eventsToAdd.forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)})),content&&(elem.innerHTML=content),text&&(elem.textContent=text),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem}
2	+ //# sourceMappingURL=createDOMElemJS.min.js.map

package/createDOMElemJS.min.js.map ADDED Viewed

@@ -0,0 +1,59 @@
+{
+    "version": 3,
+    "sources": [
+        "createDOMElemJS.js"
+    ],
+    "names": [
+        "createDOMElem",
+        "tag",
+        "content",
+        "text",
+        "attrs",
+        "style",
+        "children",
+        "parent",
+        "handleEvent",
+        "elem",
+        "document",
+        "createElement",
+        "attr",
+        "data",
+        "dataset",
+        "Array",
+        "isArray",
+        "setAttribute",
+        "join",
+        "styleText",
+        "s",
+        "push",
+        "console",
+        "log",
+        "split",
+        "forEach",
+        "p",
+        "map",
+        "c",
+        "trim",
+        "ss",
+        "i",
+        "charAt",
+        "toUpperCase",
+        "slice",
+        "childrenArray",
+        "child",
+        "eventsToAdd",
+        "newEvent",
+        "addEventListener",
+        "event",
+        "cb",
+        "innerHTML",
+        "textContent",
+        "prep",
+        "querySelector",
+        "filter",
+        "pe",
+        "appendChild"
+    ],
+    "mappings": "AAAA,SAASA,eAAcC,IACrBA,IAAGC,QACHA,QAAOC,KACPA,KAAIC,MACJA,MAAKC,MACLA,MAAKC,SACLA,SAAQC,OACRA,OAAMC,YACNA,cAKA,IAAIC,KAAOC,SAASC,cAAcV,KAKlC,IAAK,IAAIW,QAAQR,MACf,GAAa,YAATQ,KACF,IAAK,IAAIC,QAAQT,MAAMQ,MACrBH,KAAKK,QAAQD,MAAQT,MAAMQ,MAAMC,WAG/BE,MAAMC,QAAQZ,MAAMQ,OACtBH,KAAKQ,aAAaL,KAAMR,MAAMQ,MAAMM,KAAK,MAEzCT,KAAKQ,aAAaL,KAAMR,MAAMQ,OAcpC,GAAIP,MAAO,CACT,IAAIc,UACJ,GAAqB,iBAAVd,MACTc,UAAYd,WACP,GAAIU,MAAMC,QAAQX,OACvBc,UAAYd,MAAMa,KAAK,WAClB,GAAqB,iBAAVb,MAAoB,CACpCc,UAAY,GACZ,IAAK,IAAIC,KAAKf,MACZc,UAAUE,KAAK,GAAGD,MAAMf,MAAMe,MAEhCD,UAAYA,UAAUD,KAAK,MAC3BI,QAAQC,IAAIJ,WAGdA,UAAUK,MAAM,KAAKC,QAASN,YAC5B,IAAKC,EAAGM,GAAKP,UAAUK,MAAM,KAAKG,IAAKC,GAAMA,EAAEC,QAC/CT,EAAIA,EACDI,MAAM,KACNG,IAAI,CAACG,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DZ,KAAK,IACRT,KAAKJ,MAAMe,GAAKM,IAIpB,GAAIpB,SAAU,CACZ,IAAI6B,cAAgB,GACfpB,MAAMC,QAAQV,UAGjB6B,cAAgB7B,SAFhB6B,cAAcd,KAAKf,UAIrB6B,cAAcV,QAASW,QACrBA,MAAM7B,OAASE,KACfT,cAAcoC,SAOlB,IAAIC,YAAc,GAoDlB,OA9CI7B,cACEO,MAAMC,QAAQR,aAChB6B,YAAc,IAAI7B,aAElB6B,YAAYhB,KAAKb,aAEnB6B,YAAYZ,QAASa,WACnB7B,KAAK8B,iBAAiBD,SAASE,MAAOF,SAASG,OAOnDvC,UAAYO,KAAKiC,UAAYxC,SAI7BC,OAASM,KAAKkC,YAAcxC,MAWxBI,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZoB,IAAKiB,MACGlC,SAASmC,cAAcD,KAAOrC,SAEtCuC,OAAQC,IACO,OAAPA,IACN,IAEFxC,OAASG,SAASmC,cAAc,QAEvCtC,OAAOyC,YAAYvC,MAKZA",
+    "file": "createDOMElemJS.js"
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "domelemjs",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "description": "With the help of this package the rendering of HTML elements form JavaScript become a easy job.",
   "main": "index.js",
   "scripts": {