domelemjs 1.0.1 → 1.0.2

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 (12) hide show
  1. package/{elem.html → DOMElem.html} +1 -1
  2. package/DOMElemJS.js +120 -0
  3. package/DOMElemJS.min.js +2 -0
  4. package/DOMElemJS.min.js.map +87 -0
  5. package/{createElem.html → createDOMElem.html} +6 -6
  6. package/createDOMElem.js +1 -1
  7. package/createDOMElem.min.js +1 -1
  8. package/createDOMElem.min.js.map +1 -2
  9. package/createDOMElemJS.js +138 -0
  10. package/createDOMElemJS.min.js +2 -0
  11. package/createDOMElemJS.min.js.map +59 -0
  12. package/package.json +1 -1
package/{elem.html → DOMElem.html} RENAMED
@@ -7,7 +7,7 @@
7
7
  <title>Document</title>
8
8
  </head>
9
9
  <body>
10
- <script src="elem-object.js"></script>
10
+ <script src="DOMElemJS.js"></script>
11
11
  <script>
12
12
  /* használata */
13
13
 
package/DOMElemJS.js ADDED
@@ -0,0 +1,120 @@
1
+ const DOMElem = {
2
+ noSpecChars: function (text, lowercase = false) {
3
+ function replaceAll(string, search, replace) {
4
+ return string.split(search).join(replace);
5
+ }
6
+
7
+ let specialChars = {
8
+ é: "e",
9
+ á: "a",
10
+ ó: "o",
11
+ ö: "o",
12
+ ő: "o",
13
+ ú: "u",
14
+ ü: "u",
15
+ ű: "u",
16
+ í: "i",
17
+ É: "E",
18
+ Á: "A",
19
+ Ó: "O",
20
+ Ö: "O",
21
+ Ő: "O",
22
+ Ú: "U",
23
+ Ü: "U",
24
+ Ű: "U",
25
+ Í: "I",
26
+ " ": "-",
27
+ "/": "-",
28
+ ":": "-",
29
+ ";": "-",
30
+ "=": "-",
31
+ };
32
+ for (let char in specialChars) {
33
+ text = replaceAll(text, char, specialChars[char]);
34
+ }
35
+ return lowercase ? text.toLowerCase() : text;
36
+ },
37
+
38
+ Create: function (parameters) {
39
+ let tag = parameters.tag || "div";
40
+ let attributes = parameters.attributes || {};
41
+ let children = parameters.children || [];
42
+ let eventStarter = parameters.eventStarter || null;
43
+ let eventFunction = parameters.eventFunction || null;
44
+ let content = parameters.content || null;
45
+ let text = parameters.text || null;
46
+ let style = parameters.style || null;
47
+
48
+ let targetParent =
49
+ typeof parameters.targetParent == "string"
50
+ ? document.querySelector(parameters.targetParent) ||
51
+ document.getElementById(parameters.targetParent)
52
+ : typeof parameters.targetParent == "object"
53
+ ? parameters.targetParent
54
+ : null;
55
+
56
+ let elem = document.createElement(tag);
57
+
58
+ for (let attr in attributes) {
59
+ elem.setAttribute(
60
+ attr,
61
+ attr == "class" || attr == "id"
62
+ ? this.noSpecChars(attributes[attr])
63
+ : attributes[attr]
64
+ );
65
+ }
66
+
67
+ /*
68
+ * Adding stye is possible as:
69
+ * * a string, with a bunch of style properties, it can be:
70
+ * * * CCS style (e.g. background-color) or
71
+ * * * JS/camelCase (e.g. backgroundColor) style formatted version also.
72
+ * * or an object formatted (e.g. style: { backgroundColor: red })
73
+ * * or an array with multiple style strings with CSS or JS vesrion, or mixed
74
+ */
75
+
76
+ if (style) {
77
+ let styleText;
78
+ if (typeof style === "string") {
79
+ styleText = style;
80
+ } else if (Array.isArray(style)) {
81
+ styleText = style.join("; ");
82
+ } else if (typeof style === "object") {
83
+ styleText = [];
84
+ for (let s in style) {
85
+ styleText.push(`${s}: ${style[s]}`);
86
+ }
87
+ styleText = styleText.join("; ");
88
+ console.log(styleText);
89
+ }
90
+
91
+ styleText.split(";").forEach((styleText) => {
92
+ let [s, p] = styleText.split(":").map((c) => c.trim());
93
+ s = s
94
+ .split("-")
95
+ .map((ss, i) => {
96
+ return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
97
+ })
98
+ .join("");
99
+ elem.style[s] = p;
100
+ });
101
+ }
102
+
103
+ children.map((child) => {
104
+ typeof child != "object"
105
+ ? (child = document.createTextNode(child))
106
+ : null;
107
+ elem.appendChild(child);
108
+ });
109
+
110
+ if (content) elem.innerHTML = content;
111
+ if (text) elem.textContent = text;
112
+
113
+ if (eventStarter && eventFunction)
114
+ elem.addEventListener(eventStarter, eventFunction);
115
+
116
+ if (targetParent) targetParent.appendChild(elem);
117
+
118
+ return elem;
119
+ },
120
+ };
package/DOMElemJS.min.js ADDED
@@ -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
@@ -0,0 +1,87 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [
4
+ "DOMElemJS.js"
5
+ ],
6
+ "names": [
7
+ "DOMElem",
8
+ "noSpecChars",
9
+ "text",
10
+ "lowercase",
11
+ "replaceAll",
12
+ "string",
13
+ "search",
14
+ "replace",
15
+ "split",
16
+ "join",
17
+ "specialChars",
18
+ "é",
19
+ "á",
20
+ "ó",
21
+ "ö",
22
+ "ő",
23
+ "ú",
24
+ "ü",
25
+ "ű",
26
+ "í",
27
+ "É",
28
+ "Á",
29
+ "Ó",
30
+ "Ö",
31
+ "Ő",
32
+ "Ú",
33
+ "Ü",
34
+ "Ű",
35
+ "Í",
36
+ " ",
37
+ "/",
38
+ ":",
39
+ ";",
40
+ "=",
41
+ "char",
42
+ "toLowerCase",
43
+ "Create",
44
+ "parameters",
45
+ "tag",
46
+ "attributes",
47
+ "children",
48
+ "eventStarter",
49
+ "eventFunction",
50
+ "content",
51
+ "style",
52
+ "targetParent",
53
+ "document",
54
+ "querySelector",
55
+ "getElementById",
56
+ "elem",
57
+ "createElement",
58
+ "attr",
59
+ "setAttribute",
60
+ "this",
61
+ "styleText",
62
+ "Array",
63
+ "isArray",
64
+ "s",
65
+ "push",
66
+ "console",
67
+ "log",
68
+ "forEach",
69
+ "p",
70
+ "map",
71
+ "c",
72
+ "trim",
73
+ "ss",
74
+ "i",
75
+ "charAt",
76
+ "toUpperCase",
77
+ "slice",
78
+ "child",
79
+ "createTextNode",
80
+ "appendChild",
81
+ "innerHTML",
82
+ "textContent",
83
+ "addEventListener"
84
+ ],
85
+ "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",
86
+ "file": "DOMElemJS.js"
87
+ }
package/{createElem.html → createDOMElem.html} RENAMED
@@ -7,29 +7,29 @@
7
7
  <title>Document</title>
8
8
  </head>
9
9
  <body>
10
- <script src="elem-func.js"></script>
10
+ <script src="createDOMElemJS.js"></script>
11
11
  <script>
12
- const app = createElem({
12
+ const app = createDOMElem({
13
13
  tag: "div",
14
14
  attrs: { id: "app" },
15
15
  });
16
16
 
17
17
  /* styling is easy */
18
- createElem({
18
+ createDOMElem({
19
19
  tag: "h1",
20
20
  text: "Hello World!",
21
21
  parent: app,
22
22
  style: "color: red; background-color: green",
23
23
  attrs: { id: "title" },
24
24
  });
25
- createElem({
25
+ createDOMElem({
26
26
  tag: "h2",
27
27
  text: "It's amazing",
28
28
  parent: app,
29
29
  style: { color: "red", "background-color": "green" },
30
30
  attrs: { id: "title" },
31
31
  });
32
- createElem({
32
+ createDOMElem({
33
33
  tag: "h3",
34
34
  text: "I can write style as I want to",
35
35
  parent: app,
@@ -38,7 +38,7 @@
38
38
  });
39
39
 
40
40
  /* creating a select with 2 options and eventHandler */
41
- const select = createElem({
41
+ const select = createDOMElem({
42
42
  tag: "select",
43
43
  parent: app,
44
44
  attrs: { id: "selector" },
package/createDOMElem.js CHANGED
@@ -75,7 +75,7 @@ export function createDOMElem({
75
75
  }
76
76
  childrenArray.forEach((child) => {
77
77
  child.parent = elem;
78
- createElem(child);
78
+ createDOMElem(child);
79
79
  });
80
80
  }
81
81
 
package/createDOMElem.min.js CHANGED
@@ -1,2 +1,2 @@
1
- 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}
1
+ 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}
2
2
  //# sourceMappingURL=createDOMElem.min.js.map
package/createDOMElem.min.js.map CHANGED
@@ -41,7 +41,6 @@
41
41
  "slice",
42
42
  "childrenArray",
43
43
  "child",
44
- "createElem",
45
44
  "eventsToAdd",
46
45
  "newEvent",
47
46
  "addEventListener",
@@ -55,6 +54,6 @@
55
54
  "pe",
56
55
  "appendChild"
57
56
  ],
58
- "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",
57
+ "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",
59
58
  "file": "createDOMElem.js"
60
59
  }
package/createDOMElemJS.js ADDED
@@ -0,0 +1,138 @@
1
+ function createDOMElem({
2
+ tag,
3
+ content,
4
+ text,
5
+ attrs,
6
+ style,
7
+ children,
8
+ parent,
9
+ handleEvent,
10
+ }) {
11
+ /*
12
+ * create the DOM element with the given tag
13
+ */
14
+ let elem = document.createElement(tag);
15
+
16
+ /*
17
+ * add all the attributes they want
18
+ */
19
+ for (let attr in attrs) {
20
+ if (attr === "dataset") {
21
+ for (let data in attrs[attr]) {
22
+ elem.dataset[data] = attrs[attr][data];
23
+ }
24
+ } else {
25
+ if (Array.isArray(attrs[attr])) {
26
+ elem.setAttribute(attr, attrs[attr].join(" "));
27
+ } else {
28
+ elem.setAttribute(attr, attrs[attr]);
29
+ }
30
+ }
31
+ }
32
+
33
+ /*
34
+ * Adding stye is possible as:
35
+ * * a string, with a bunch of style properties, it can be:
36
+ * * * CCS style (e.g. background-color) or
37
+ * * * JS/camelCase (e.g. backgroundColor) style formatted version also.
38
+ * * or an object formatted (e.g. style: { backgroundColor: red })
39
+ * * or an array with multiple style strings with CSS or JS vesrion, or mixed
40
+ */
41
+
42
+ if (style) {
43
+ let styleText;
44
+ if (typeof style === "string") {
45
+ styleText = style;
46
+ } else if (Array.isArray(style)) {
47
+ styleText = style.join("; ");
48
+ } else if (typeof style === "object") {
49
+ styleText = [];
50
+ for (let s in style) {
51
+ styleText.push(`${s}: ${style[s]}`);
52
+ }
53
+ styleText = styleText.join("; ");
54
+ console.log(styleText);
55
+ }
56
+
57
+ styleText.split(";").forEach((styleText) => {
58
+ let [s, p] = styleText.split(":").map((c) => c.trim());
59
+ s = s
60
+ .split("-")
61
+ .map((ss, i) => {
62
+ return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
63
+ })
64
+ .join("");
65
+ elem.style[s] = p;
66
+ });
67
+ }
68
+
69
+ if (children) {
70
+ let childrenArray = [];
71
+ if (!Array.isArray(children)) {
72
+ childrenArray.push(children);
73
+ } else {
74
+ childrenArray = children;
75
+ }
76
+ childrenArray.forEach((child) => {
77
+ child.parent = elem;
78
+ createDOMElem(child);
79
+ });
80
+ }
81
+
82
+ /*
83
+ * Add the eventListener or more eventListeners it hey comes in array
84
+ */
85
+ let eventsToAdd = [];
86
+ /*
87
+ * Handle event is an object or an array of object, that should be conain:
88
+ * event, what will fire the event?
89
+ * and a cb, that is the callback function
90
+ */
91
+ if (handleEvent) {
92
+ if (Array.isArray(handleEvent)) {
93
+ eventsToAdd = [...handleEvent];
94
+ } else {
95
+ eventsToAdd.push(handleEvent);
96
+ }
97
+ eventsToAdd.forEach((newEvent) => {
98
+ elem.addEventListener(newEvent.event, newEvent.cb);
99
+ });
100
+ }
101
+
102
+ /*
103
+ * add the content
104
+ */
105
+ content && (elem.innerHTML = content);
106
+ /*
107
+ * add the text
108
+ */
109
+ text && (elem.textContent = text);
110
+
111
+ /*
112
+ * Append the created elem to the parent what is given, or add to the body of the Document if not given.
113
+
114
+ * The parent:
115
+ * can be a DOM element, or
116
+ * a String of:
117
+ * ID or
118
+ * CLass
119
+ */
120
+ if (parent) {
121
+ if (typeof parent === "string") {
122
+ parent = [".", "#"]
123
+ .map((prep) => {
124
+ return document.querySelector(prep + parent);
125
+ })
126
+ .filter((pe) => {
127
+ return pe !== null;
128
+ })[0];
129
+ }
130
+ } else parent = document.querySelector("body");
131
+
132
+ parent.appendChild(elem);
133
+
134
+ /*
135
+ * and at the end give the elem back for later usage
136
+ */
137
+ return elem;
138
+ }
package/createDOMElemJS.min.js ADDED
@@ -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
@@ -0,0 +1,59 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [
4
+ "createDOMElemJS.js"
5
+ ],
6
+ "names": [
7
+ "createDOMElem",
8
+ "tag",
9
+ "content",
10
+ "text",
11
+ "attrs",
12
+ "style",
13
+ "children",
14
+ "parent",
15
+ "handleEvent",
16
+ "elem",
17
+ "document",
18
+ "createElement",
19
+ "attr",
20
+ "data",
21
+ "dataset",
22
+ "Array",
23
+ "isArray",
24
+ "setAttribute",
25
+ "join",
26
+ "styleText",
27
+ "s",
28
+ "push",
29
+ "console",
30
+ "log",
31
+ "split",
32
+ "forEach",
33
+ "p",
34
+ "map",
35
+ "c",
36
+ "trim",
37
+ "ss",
38
+ "i",
39
+ "charAt",
40
+ "toUpperCase",
41
+ "slice",
42
+ "childrenArray",
43
+ "child",
44
+ "eventsToAdd",
45
+ "newEvent",
46
+ "addEventListener",
47
+ "event",
48
+ "cb",
49
+ "innerHTML",
50
+ "textContent",
51
+ "prep",
52
+ "querySelector",
53
+ "filter",
54
+ "pe",
55
+ "appendChild"
56
+ ],
57
+ "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",
58
+ "file": "createDOMElemJS.js"
59
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "domelemjs",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "With the help of this package the rendering of HTML elements form JavaScript become a easy job.",
5
5
  "main": "index.js",
6
6
  "scripts": {