Skip to content

Commit 73ed100

Browse files
dotpipedotpipe
committed
Fixing modala to be better now.
1 parent 615be69 commit 73ed100

9 files changed

Lines changed: 242 additions & 193 deletions

File tree

‎API/dotpipe.js‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* -------------------------------------------------------------
66
* insert............= [Attr] return ajax call to this id
77
* ajax..............= [Attr] * calls and returns the value file's output ex: <pipe id="id1" ajax="foo.bar:insert1:countByEvent" query="key0:value0;" insert="someID">
8-
* ajax-limit........= [Attr] * limit the insertions to a element ex: <pipe id="id1" class="ajax-limit" ajax="foo.bar:insert1" boxes="countByEvent" query="key0:value0;">
98
* query.............= [Attr] default query string associated with url ex: <anyTag form-class="someClass" query="key0:value0;key1:value2;" ajax="page.foo"> (Req. form-class)
109
* turn..............= [Attr] * turns based element routine element ex: <anyTag turn="firstelem;secondelem;" class="decrIndex" index="1">
1110
* callback..........= [Attr] callback function ex: <pipe id="id1" callback="foo" class="class1 class2" value="submit" callback-class="class1 class2" ajax="page.foo;insert-id1">
@@ -541,6 +540,31 @@ function escapeHtml(html) {
541540
return p.innerHTML;
542541
}
543542

543+
const dotpipeStyleManager = {
544+
styleMap: new Map(),
545+
styleElem: null,
546+
ensureStyleElem: function() {
547+
if (!this.styleElem) {
548+
this.styleElem = document.createElement('style');
549+
if (typeof PAGE_NONCE !== 'undefined') this.styleElem.setAttribute('nonce', PAGE_NONCE);
550+
document.head.appendChild(this.styleElem);
551+
}
552+
},
553+
addStyle: function(cssText) {
554+
let className;
555+
if (this.styleMap.has(cssText)) {
556+
className = this.styleMap.get(cssText);
557+
} else {
558+
className = md5(cssText);
559+
this.ensureStyleElem();
560+
this.styleElem.textContent += `.${className} { ${cssText} }\n`;
561+
this.styleMap.set(cssText, className);
562+
}
563+
return className;
564+
}
565+
};
566+
567+
544568
/**
545569
*
546570
* @param {JSON Object} value
@@ -738,7 +762,13 @@ function modala(value, tempTag, root, id) {
738762
console.log(v);
739763
temp.setAttribute("boxes", v);
740764
}
741-
else if (!Number(k) && k.toLowerCase() != "tagname" && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
765+
else if (k.toLowerCase() == "style") {
766+
// Dedup style, assign class, no inline!
767+
const className = dotpipeStyleManager.addStyle(v);
768+
temp.classList.add(className);
769+
// Do NOT set temp.style.cssText!
770+
}
771+
else if (!Number(k) && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
742772
try {
743773
temp.setAttribute(k, v);
744774
}
@@ -750,9 +780,6 @@ function modala(value, tempTag, root, id) {
750780
const val = v.replace(/\r?\n/g, "<br>");
751781
(k.toLowerCase() == "textcontent") ? temp.textContent = val : (k.toLowerCase() == "innerhtml") ? temp.innerHTML = val : temp.innerText = val;
752782
}
753-
else if (k.toLowerCase() == "style") {
754-
temp.style.cssText = v;
755-
}
756783
});
757784
tempTag.appendChild(temp);
758785
domContentLoad();

‎activeMenu/dotpipe.js‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* -------------------------------------------------------------
66
* insert............= [Attr] return ajax call to this id
77
* ajax..............= [Attr] * calls and returns the value file's output ex: <pipe id="id1" ajax="foo.bar:insert1:countByEvent" query="key0:value0;" insert="someID">
8-
* ajax-limit........= [Attr] * limit the insertions to a element ex: <pipe id="id1" class="ajax-limit" ajax="foo.bar:insert1" boxes="countByEvent" query="key0:value0;">
98
* query.............= [Attr] default query string associated with url ex: <anyTag form-class="someClass" query="key0:value0;key1:value2;" ajax="page.foo"> (Req. form-class)
109
* turn..............= [Attr] * turns based element routine element ex: <anyTag turn="firstelem;secondelem;" class="decrIndex" index="1">
1110
* callback..........= [Attr] callback function ex: <pipe id="id1" callback="foo" class="class1 class2" value="submit" callback-class="class1 class2" ajax="page.foo;insert-id1">
@@ -541,6 +540,31 @@ function escapeHtml(html) {
541540
return p.innerHTML;
542541
}
543542

543+
const dotpipeStyleManager = {
544+
styleMap: new Map(),
545+
styleElem: null,
546+
ensureStyleElem: function() {
547+
if (!this.styleElem) {
548+
this.styleElem = document.createElement('style');
549+
if (typeof PAGE_NONCE !== 'undefined') this.styleElem.setAttribute('nonce', PAGE_NONCE);
550+
document.head.appendChild(this.styleElem);
551+
}
552+
},
553+
addStyle: function(cssText) {
554+
let className;
555+
if (this.styleMap.has(cssText)) {
556+
className = this.styleMap.get(cssText);
557+
} else {
558+
className = md5(cssText);
559+
this.ensureStyleElem();
560+
this.styleElem.textContent += `.${className} { ${cssText} }\n`;
561+
this.styleMap.set(cssText, className);
562+
}
563+
return className;
564+
}
565+
};
566+
567+
544568
/**
545569
*
546570
* @param {JSON Object} value
@@ -738,7 +762,13 @@ function modala(value, tempTag, root, id) {
738762
console.log(v);
739763
temp.setAttribute("boxes", v);
740764
}
741-
else if (!Number(k) && k.toLowerCase() != "tagname" && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
765+
else if (k.toLowerCase() == "style") {
766+
// Dedup style, assign class, no inline!
767+
const className = dotpipeStyleManager.addStyle(v);
768+
temp.classList.add(className);
769+
// Do NOT set temp.style.cssText!
770+
}
771+
else if (!Number(k) && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
742772
try {
743773
temp.setAttribute(k, v);
744774
}
@@ -750,9 +780,6 @@ function modala(value, tempTag, root, id) {
750780
const val = v.replace(/\r?\n/g, "<br>");
751781
(k.toLowerCase() == "textcontent") ? temp.textContent = val : (k.toLowerCase() == "innerhtml") ? temp.innerHTML = val : temp.innerText = val;
752782
}
753-
else if (k.toLowerCase() == "style") {
754-
temp.style.cssText = v;
755-
}
756783
});
757784
tempTag.appendChild(temp);
758785
domContentLoad();

‎carousel/dotpipe.js‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* -------------------------------------------------------------
66
* insert............= [Attr] return ajax call to this id
77
* ajax..............= [Attr] * calls and returns the value file's output ex: <pipe id="id1" ajax="foo.bar:insert1:countByEvent" query="key0:value0;" insert="someID">
8-
* ajax-limit........= [Attr] * limit the insertions to a element ex: <pipe id="id1" class="ajax-limit" ajax="foo.bar:insert1" boxes="countByEvent" query="key0:value0;">
98
* query.............= [Attr] default query string associated with url ex: <anyTag form-class="someClass" query="key0:value0;key1:value2;" ajax="page.foo"> (Req. form-class)
109
* turn..............= [Attr] * turns based element routine element ex: <anyTag turn="firstelem;secondelem;" class="decrIndex" index="1">
1110
* callback..........= [Attr] callback function ex: <pipe id="id1" callback="foo" class="class1 class2" value="submit" callback-class="class1 class2" ajax="page.foo;insert-id1">
@@ -541,6 +540,31 @@ function escapeHtml(html) {
541540
return p.innerHTML;
542541
}
543542

543+
const dotpipeStyleManager = {
544+
styleMap: new Map(),
545+
styleElem: null,
546+
ensureStyleElem: function() {
547+
if (!this.styleElem) {
548+
this.styleElem = document.createElement('style');
549+
if (typeof PAGE_NONCE !== 'undefined') this.styleElem.setAttribute('nonce', PAGE_NONCE);
550+
document.head.appendChild(this.styleElem);
551+
}
552+
},
553+
addStyle: function(cssText) {
554+
let className;
555+
if (this.styleMap.has(cssText)) {
556+
className = this.styleMap.get(cssText);
557+
} else {
558+
className = md5(cssText);
559+
this.ensureStyleElem();
560+
this.styleElem.textContent += `.${className} { ${cssText} }\n`;
561+
this.styleMap.set(cssText, className);
562+
}
563+
return className;
564+
}
565+
};
566+
567+
544568
/**
545569
*
546570
* @param {JSON Object} value
@@ -738,7 +762,13 @@ function modala(value, tempTag, root, id) {
738762
console.log(v);
739763
temp.setAttribute("boxes", v);
740764
}
741-
else if (!Number(k) && k.toLowerCase() != "tagname" && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
765+
else if (k.toLowerCase() == "style") {
766+
// Dedup style, assign class, no inline!
767+
const className = dotpipeStyleManager.addStyle(v);
768+
temp.classList.add(className);
769+
// Do NOT set temp.style.cssText!
770+
}
771+
else if (!Number(k) && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
742772
try {
743773
temp.setAttribute(k, v);
744774
}
@@ -750,9 +780,6 @@ function modala(value, tempTag, root, id) {
750780
const val = v.replace(/\r?\n/g, "<br>");
751781
(k.toLowerCase() == "textcontent") ? temp.textContent = val : (k.toLowerCase() == "innerhtml") ? temp.innerHTML = val : temp.innerText = val;
752782
}
753-
else if (k.toLowerCase() == "style") {
754-
temp.style.cssText = v;
755-
}
756783
});
757784
tempTag.appendChild(temp);
758785
domContentLoad();

‎dotpipe.js‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
* -------------------------------------------------------------
66
* insert............= [Attr] return ajax call to this id
77
* ajax..............= [Attr] * calls and returns the value file's output ex: <pipe id="id1" ajax="foo.bar:insert1:countByEvent" query="key0:value0;" insert="someID">
8-
* ajax-limit........= [Attr] * limit the insertions to a element ex: <pipe id="id1" class="ajax-limit" ajax="foo.bar:insert1" boxes="countByEvent" query="key0:value0;">
98
* query.............= [Attr] default query string associated with url ex: <anyTag form-class="someClass" query="key0:value0;key1:value2;" ajax="page.foo"> (Req. form-class)
109
* turn..............= [Attr] * turns based element routine element ex: <anyTag turn="firstelem;secondelem;" class="decrIndex" index="1">
1110
* callback..........= [Attr] callback function ex: <pipe id="id1" callback="foo" class="class1 class2" value="submit" callback-class="class1 class2" ajax="page.foo;insert-id1">
@@ -541,6 +540,31 @@ function escapeHtml(html) {
541540
return p.innerHTML;
542541
}
543542

543+
const dotpipeStyleManager = {
544+
styleMap: new Map(),
545+
styleElem: null,
546+
ensureStyleElem: function() {
547+
if (!this.styleElem) {
548+
this.styleElem = document.createElement('style');
549+
if (typeof PAGE_NONCE !== 'undefined') this.styleElem.setAttribute('nonce', PAGE_NONCE);
550+
document.head.appendChild(this.styleElem);
551+
}
552+
},
553+
addStyle: function(cssText) {
554+
let className;
555+
if (this.styleMap.has(cssText)) {
556+
className = this.styleMap.get(cssText);
557+
} else {
558+
className = md5(cssText);
559+
this.ensureStyleElem();
560+
this.styleElem.textContent += `.${className} { ${cssText} }\n`;
561+
this.styleMap.set(cssText, className);
562+
}
563+
return className;
564+
}
565+
};
566+
567+
544568
/**
545569
*
546570
* @param {JSON Object} value
@@ -738,7 +762,13 @@ function modala(value, tempTag, root, id) {
738762
console.log(v);
739763
temp.setAttribute("boxes", v);
740764
}
741-
else if (!Number(k) && k.toLowerCase() != "tagname" && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
765+
else if (k.toLowerCase() == "style") {
766+
// Dedup style, assign class, no inline!
767+
const className = dotpipeStyleManager.addStyle(v);
768+
temp.classList.add(className);
769+
// Do NOT set temp.style.cssText!
770+
}
771+
else if (!Number(k) && k.toLowerCase() != "textcontent" && k.toLowerCase() != "innerhtml" && k.toLowerCase() != "innertext") {
742772
try {
743773
temp.setAttribute(k, v);
744774
}
@@ -750,9 +780,6 @@ function modala(value, tempTag, root, id) {
750780
const val = v.replace(/\r?\n/g, "<br>");
751781
(k.toLowerCase() == "textcontent") ? temp.textContent = val : (k.toLowerCase() == "innerhtml") ? temp.innerHTML = val : temp.innerText = val;
752782
}
753-
else if (k.toLowerCase() == "style") {
754-
temp.style.cssText = v;
755-
}
756783
});
757784
tempTag.appendChild(temp);
758785
domContentLoad();

0 commit comments

Comments
 (0)