domelemjs 1.1.1 → 1.1.4

package/index.js

@@ -26,25 +26,28 @@ const createDOMElem = ({
    *  add all the attributes they want
    */
 
+  const noSpecChAttrs = ["class", "id"];
+
   attrs &&
-    Object.keys(attrs).forEach((attr) => {
-      if (attr === "checked") {
-        elem.checked = attrs[attr];
-      } else if (attr === "dataset") {
-        makeThatArray(attrs[attr]).map((data) =>
-          Object.keys(data).forEach((d) => (elem.dataset[d] = data[d]))
-        );
-      } else if (attr === "class" || attr === "id") {
-        elem.setAttribute(
-          attr,
-          makeThatArray(attrs[attr])
-            .map((a) => noSpecChars(a))
-            .join(" ")
-        );
-      } else {
-        elem.setAttribute(attr, makeThatArray(attrs[attr]).join(" "));
-      }
-    });
+    makeThatArray(attrs).forEach((atts) =>
+      Object.keys(atts).forEach((attr) => {
+        if (attr === "checked") {
+          elem.checked = atts[attr];
+        } else if (attr === "dataset") {
+          makeThatArray(atts[attr]).map((data) =>
+            Object.keys(data).forEach((d) => (elem.dataset[d] = data[d]))
+          );
+        } else {
+          elem.setAttribute(
+            attr,
+            (noSpecChAttrs.includes(attr)
+              ? makeThatArray(atts[attr]).map((a) => noSpecChars(a))
+              : makeThatArray(atts[attr])
+            ).join(" ")
+          );
+        }
+      })
+    );
 
   /*
    * Adding stye is possible as:
@@ -75,9 +78,9 @@ const createDOMElem = ({
 
   children &&
     makeThatArray(children).map((child) => {
-      let childElem = child;
-      if (typeof child === "object") childElem = createDOMElem(child);
-      elem.appendChild(childElem);
+      elem.appendChild(
+        typeof child === "object" ? createDOMElem(child) : child
+      );
     });
 
   /*
@@ -155,24 +158,24 @@ const noSpecChars = (text, lowercase = false) => {
     Ű: "U",
     Í: "I",
     " ": "-",
-    "/": "-",
-    ":": "-",
-    ";": "-",
-    "=": "-",
+    "/": "",
+    ":": "",
+    ";": "",
+    "=": "",
+    "*": "",
+    "?": "",
   };
-  for (let char in specialChars) {
-    text = replaceAll(text, char, specialChars[char]);
-  }
+
+  Object.keys(specialChars).forEach(
+    (char) => (text = replaceAll(text, char, specialChars[char]))
+  );
+
   return lowercase ? text.toLowerCase() : text;
 };
 
-/* check is it is array do nothing, if not maki it array */
+/* check is it is array do nothing, if not make it array */
 const makeThatArray = (arr) => {
-  if (Array.isArray(arr)) {
-    return arr;
-  } else {
-    return [arr];
-  }
+  return Array.isArray(arr) ? arr : [arr];
 };
 
 /* removing the "-" symbol form the string adn makind the afterward word to uppercase, that is named as camelCase */

package/index.min.js

@@ -1,2 +1,2 @@
-const createDOMElem=({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent})=>{let elem=document.createElement(tag);return content&&(elem.innerHTML=content),text&&(elem.textContent=text),attrs&&Object.keys(attrs).forEach(attr=>{"checked"===attr?elem.checked=attrs[attr]:"dataset"===attr?makeThatArray(attrs[attr]).map(data=>Object.keys(data).forEach(d=>elem.dataset[d]=data[d])):"class"===attr||"id"===attr?elem.setAttribute(attr,makeThatArray(attrs[attr]).map(a=>noSpecChars(a)).join(" ")):elem.setAttribute(attr,makeThatArray(attrs[attr]).join(" "))}),style&&makeThatArray(style).map(styleElem=>"object"==typeof styleElem?Object.keys(styleElem).map(styleTxt=>`${styleTxt}: ${styleElem[styleTxt]}`).join("; "):makeThatArray(styleElem).join("; ")).join("; ").split(";").forEach(styleTxts=>{let[styleTxt,val]=styleTxts.split(":").map(c=>c.trim());elem.style[makeCamelCase(styleTxt)]=val}),children&&makeThatArray(children).map(child=>{let childElem=child;"object"==typeof child&&(childElem=createDOMElem(child)),elem.appendChild(childElem)}),handleEvent&&makeThatArray(handleEvent).forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)}),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem},DOMElem={Create:createDOMElem},noSpecChars=(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},makeThatArray=arr=>Array.isArray(arr)?arr:[arr];function makeCamelCase(s){return s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join("")}
+const createDOMElem=({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent})=>{let elem=document.createElement(tag);content&&(elem.innerHTML=content),text&&(elem.textContent=text);const noSpecChAttrs=["class","id"];return attrs&&makeThatArray(attrs).forEach(atts=>Object.keys(atts).forEach(attr=>{"checked"===attr?elem.checked=atts[attr]:"dataset"===attr?makeThatArray(atts[attr]).map(data=>Object.keys(data).forEach(d=>elem.dataset[d]=data[d])):elem.setAttribute(attr,(noSpecChAttrs.includes(attr)?makeThatArray(atts[attr]).map(a=>noSpecChars(a)):makeThatArray(atts[attr])).join(" "))})),style&&makeThatArray(style).map(styleElem=>"object"==typeof styleElem?Object.keys(styleElem).map(styleTxt=>`${styleTxt}: ${styleElem[styleTxt]}`).join("; "):makeThatArray(styleElem).join("; ")).join("; ").split(";").forEach(styleTxts=>{let[styleTxt,val]=styleTxts.split(":").map(c=>c.trim());elem.style[makeCamelCase(styleTxt)]=val}),children&&makeThatArray(children).map(child=>{elem.appendChild("object"==typeof child?createDOMElem(child):child)}),handleEvent&&makeThatArray(handleEvent).forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)}),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem},DOMElem={Create:createDOMElem},noSpecChars=(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"," ":"-","/":"",":":"",";":"","=":"","*":"","?":""};return Object.keys(specialChars).forEach(char=>text=replaceAll(text,char,specialChars[char])),lowercase?text.toLowerCase():text},makeThatArray=arr=>Array.isArray(arr)?arr:[arr];function makeCamelCase(s){return s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join("")}
 //# sourceMappingURL=index.min.js.map

package/index.min.js.map

@@ -18,17 +18,20 @@
         "createElement",
         "innerHTML",
         "textContent",
+        "noSpecChAttrs",
+        "makeThatArray",
+        "forEach",
+        "atts",
         "Object",
         "keys",
-        "forEach",
         "attr",
         "checked",
-        "makeThatArray",
         "map",
         "data",
         "d",
         "dataset",
         "setAttribute",
+        "includes",
         "a",
         "noSpecChars",
         "join",
@@ -41,7 +44,6 @@
         "trim",
         "makeCamelCase",
         "child",
-        "childElem",
         "appendChild",
         "newEvent",
         "addEventListener",
@@ -82,6 +84,8 @@
         ":",
         ";",
         "=",
+        "*",
+        "?",
         "char",
         "toLowerCase",
         "arr",
@@ -94,6 +98,6 @@
         "toUpperCase",
         "slice"
     ],
-    "mappings": "AAAA,MAAMA,cAAgB,EACpBC,IAAAA,IACAC,QAAAA,QACAC,KAAAA,KACAC,MAAAA,MACAC,MAAAA,MACAC,SAAAA,SACAC,OAAAA,OACAC,YAAAA,gBAKA,IAAIC,KAAOC,SAASC,cAAcV,KA0GlC,OArGAC,UAAYO,KAAKG,UAAYV,SAI7BC,OAASM,KAAKI,YAAcV,MAM5BC,OACEU,OAAOC,KAAKX,OAAOY,QAASC,OACb,YAATA,KACFR,KAAKS,QAAUd,MAAMa,MACH,YAATA,KACTE,cAAcf,MAAMa,OAAOG,IAAKC,MAC9BP,OAAOC,KAAKM,MAAML,QAASM,GAAOb,KAAKc,QAAQD,GAAKD,KAAKC,KAEzC,UAATL,MAA6B,OAATA,KAC7BR,KAAKe,aACHP,KACAE,cAAcf,MAAMa,OACjBG,IAAKK,GAAMC,YAAYD,IACvBE,KAAK,MAGVlB,KAAKe,aAAaP,KAAME,cAAcf,MAAMa,OAAOU,KAAK,QAa9DtB,OACEc,cAAcd,OACXe,IAAKQ,WACqB,iBAAdA,UACFd,OAAOC,KAAKa,WAChBR,IAAKS,UAAa,GAAGA,aAAaD,UAAUC,aAC5CF,KAAK,MAEDR,cAAcS,WAAWD,KAAK,OAGxCA,KAAK,MACLG,MAAM,KACNd,QAASe,YACR,IAAKF,SAAUG,KAAOD,UAAUD,MAAM,KAAKV,IAAKa,GAAMA,EAAEC,QACxDzB,KAAKJ,MAAM8B,cAAcN,WAAaG,MAG5C1B,UACEa,cAAcb,UAAUc,IAAKgB,QAC3B,IAAIC,UAAYD,MACK,iBAAVA,QAAoBC,UAAYrC,cAAcoC,QACzD3B,KAAK6B,YAAYD,aASrB7B,aACEW,cAAcX,aAAaQ,QAASuB,WAClC9B,KAAK+B,iBAAiBD,SAASE,MAAOF,SAASG,MAY/CnC,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZa,IAAKuB,MACGjC,SAASkC,cAAcD,KAAOpC,SAEtCsC,OAAQC,IACO,OAAPA,IACN,IAEFvC,OAASG,SAASkC,cAAc,QAEvCrC,OAAO+B,YAAY7B,MAKZA,MAIHsC,QAAU,CACdC,OAAQhD,eAQJ0B,YAAc,CAACvB,KAAM8C,WAAY,KACrC,SAASC,WAAWC,OAAQC,OAAQC,SAClC,OAAOF,OAAOrB,MAAMsB,QAAQzB,KAAK0B,SAGnC,IAAIC,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,aACfnD,KAAO+C,WAAW/C,KAAM2E,KAAMxB,aAAawB,OAE7C,OAAO7B,UAAY9C,KAAK4E,cAAgB5E,MAIpCgB,cAAiB6D,KACjBC,MAAMC,QAAQF,KACTA,IAEA,CAACA,KAKZ,SAAS7C,cAAcgD,GACrB,OAAOA,EACJrD,MAAM,KACNV,IAAI,CAACgE,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DzD,KAAK",
+    "mappings": "AAAA,MAAMA,cAAgB,EACpBC,IAAAA,IACAC,QAAAA,QACAC,KAAAA,KACAC,MAAAA,MACAC,MAAAA,MACAC,SAAAA,SACAC,OAAAA,OACAC,YAAAA,gBAKA,IAAIC,KAAOC,SAASC,cAAcV,KAKlCC,UAAYO,KAAKG,UAAYV,SAI7BC,OAASM,KAAKI,YAAcV,MAM5B,MAAMW,cAAgB,CAAC,QAAS,MA8FhC,OA5FAV,OACEW,cAAcX,OAAOY,QAASC,MAC5BC,OAAOC,KAAKF,MAAMD,QAASI,OACZ,YAATA,KACFX,KAAKY,QAAUJ,KAAKG,MACF,YAATA,KACTL,cAAcE,KAAKG,OAAOE,IAAKC,MAC7BL,OAAOC,KAAKI,MAAMP,QAASQ,GAAOf,KAAKgB,QAAQD,GAAKD,KAAKC,KAG3Df,KAAKiB,aACHN,MACCN,cAAca,SAASP,MACpBL,cAAcE,KAAKG,OAAOE,IAAKM,GAAMC,YAAYD,IACjDb,cAAcE,KAAKG,QACrBU,KAAK,SAejBzB,OACEU,cAAcV,OACXiB,IAAKS,WACqB,iBAAdA,UACFb,OAAOC,KAAKY,WAChBT,IAAKU,UAAa,GAAGA,aAAaD,UAAUC,aAC5CF,KAAK,MAEDf,cAAcgB,WAAWD,KAAK,OAGxCA,KAAK,MACLG,MAAM,KACNjB,QAASkB,YACR,IAAKF,SAAUG,KAAOD,UAAUD,MAAM,KAAKX,IAAKc,GAAMA,EAAEC,QACxD5B,KAAKJ,MAAMiC,cAAcN,WAAaG,MAG5C7B,UACES,cAAcT,UAAUgB,IAAKiB,QAC3B9B,KAAK+B,YACc,iBAAVD,MAAqBvC,cAAcuC,OAASA,SAUzD/B,aACEO,cAAcP,aAAaQ,QAASyB,WAClChC,KAAKiC,iBAAiBD,SAASE,MAAOF,SAASG,MAY/CrC,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZe,IAAKuB,MACGnC,SAASoC,cAAcD,KAAOtC,SAEtCwC,OAAQC,IACO,OAAPA,IACN,IAEFzC,OAASG,SAASoC,cAAc,QAEvCvC,OAAOiC,YAAY/B,MAKZA,MAIHwC,QAAU,CACdC,OAAQlD,eAQJ6B,YAAc,CAAC1B,KAAMgD,WAAY,KACrC,SAASC,WAAWC,OAAQC,OAAQC,SAClC,OAAOF,OAAOpB,MAAMqB,QAAQxB,KAAKyB,SAGnC,IAAIC,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,GACLC,IAAK,GACLC,IAAK,GACLC,IAAK,GACLC,IAAK,GACLC,IAAK,IAOP,OAJA/D,OAAOC,KAAKqC,cAAcxC,QACvBkE,MAAU/E,KAAOiD,WAAWjD,KAAM+E,KAAM1B,aAAa0B,QAGjD/B,UAAYhD,KAAKgF,cAAgBhF,MAIpCY,cAAiBqE,KACdC,MAAMC,QAAQF,KAAOA,IAAM,CAACA,KAIrC,SAAS9C,cAAciD,GACrB,OAAOA,EACJtD,MAAM,KACNX,IAAI,CAACkE,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3D1D,KAAK",
     "file": "index.js"
 }

package/package.json

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

package/test/createDOMElem.html

@@ -20,17 +20,25 @@
         text: "Hello World!",
         parent: app,
         style: "color: red; background-color: green",
-        attrs: { id: "title1", dataset: { text: "redText" } },
+        attrs: {
+          id: "title1",
+          class: "áéőúóüűöí/*-",
+          dataset: { text: "redText" },
+        },
       });
       createDOMElem({
         tag: "h2",
         text: "It's amazing",
         parent: app,
         style: { color: "red", backgroundColor: "pink" },
-        attrs: {
-          id: "title2",
-          dataset: [{ text: "redText" }, { bg: "greenBG" }],
-        },
+        attrs: [
+          {
+            id: "title2",
+          },
+          {
+            dataset: [{ text: "redText" }, { bg: "greenBG" }],
+          },
+        ],
       });
       createDOMElem({
         tag: "h3",