yet-another-js-utils 1.1.5 → 1.2.1
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.
- package/README.md +6 -1
- package/dist/yaju.min.js +1 -1
- package/js-utils.js +20 -13
- package/out.js +17 -11
- package/out.js.map +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,11 +10,16 @@ npm install yet-another-js-utils
|
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
const yaju = require('yet-another-js-utils');
|
|
13
|
-
|
|
13
|
+
let dom = yaju.qs('#contents'),
|
|
14
|
+
previousRender = document.createElement('div'),
|
|
15
|
+
newRender = document.createElement('div'),
|
|
16
|
+
style = 'italic';
|
|
17
|
+
newRender.innerHTML = yaju.html`<span style="${italic}">Hello, world!</span>`;
|
|
14
18
|
yaju.diffVDomAndUpdate(previousRender, newRender, dom);
|
|
15
19
|
this.previousRender = newRender;
|
|
16
20
|
yaju.resetDataState(dom);
|
|
17
21
|
yaju.addDataState(dom, 'updated');
|
|
22
|
+
// Plus a few utility functions...
|
|
18
23
|
```
|
|
19
24
|
|
|
20
25
|
## Dependencies
|
package/dist/yaju.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var h=g((T,
|
|
1
|
+
"use strict";(()=>{var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var h=g((T,p)=>{"use strict";p.exports={qs(e){return document.querySelector(e)},qsa(e){return Array.from(document.querySelector(e))},nil(e){return e===null||typeof e>"u"},hack(e,t,a){return e.slice(t,a+1)},pick(e,t){return e.filter(t)},prune(e,t){return e.filter(function(a){return!t(a)})},check(e,t){return e.every(t)},pipe(e,...t){return t.reduce((a,n)=>n(a),e)},escape(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")},html(e){let t=e[0],a=Math.max(e.length,arguments.length-1);for(let n=1;n<a;n++)t+=arguments[n],t+=e[n];return t},diffVDomAndUpdate(e,t,a){let n=this;n.changedNodes=[];let s=e.childNodes,i=t.childNodes,d=a.childNodes;if(d.length>i.length){let r=d.length-i.length;for(let u=0,o=r;u<o;u++)a.lastChild.remove()}for(let r=0,u=i.length;r<u;r++)if(s[r]){if(s[r].outerHTML!==i[r].outerHTML){let o=["AREA","BASE","BR","COL","EMBED","HR","IMG","INPUT","LINK","META","PARAM","SOURCE","TRACK","WBR"],f=0;if(o.indexOf(i[r].tagName)===-1&&(f=3+i[r].tagName.length),s[r].tagName!==i[r].tagName||s[r].innerHTML===i[r].innerHTML||s[r].outerHTML.slice(-1*s.innerHTML.length-f)!==i[r].outerHTML.slice(-1*i.innerHTML.length-f)){let l=i[r].cloneNode(!0);n.changedNodes.push(l),d[r].replaceWith(l)}else this.diffVDomAndUpdate(s[r],i[r],d[r])}}else{let o=i[r].cloneNode(!0);n.changedNodes.push(o),a.appendChild(o)}},addDataState(e,t){let a=[];e.dataset.state&&e.dataset.state.indexOf(" ")>-1?a=e.dataset.state.split(" "):a=[e.dataset.state],a.indexOf(t)===-1&&(a.push(t),e.dataset.state=a.join(" "))},removeDataState(e,t){let a=[];e.dataset.state&&e.dataset.state.indexOf(" ")>-1?a=e.dataset.state.split(" "):a=[e.dataset.state],e.dataset.state=a.filter(n=>n!==t).join(" ")},replaceDataState(e,t,a){this.removeDataState(e,t),this.addDataState(e,a)},toggleDataState(e,t){e.dataset.state.split(" ").indexOf(t)==-1?this.addDataState(e,t):this.removeDataState(e,t)},resetDataState(e){e.dataset.state=""},ajaxGet(e,t,a,n){var s=new XMLHttpRequest;s.open("GET",e),s.addEventListener("load",function(){if(s.status>=200&&s.status<400)if(a){var i={};try{i=JSON.parse(s.responseText)}catch{console.error("Get request returned invalid JSON.")}n===void 0?t(i):t.apply(n,[i])}else n===void 0?t(s.responseText):t.apply(n,[s.responseText]);else console.error(s.status+" "+s.statusText+" "+e)}),s.addEventListener("error",function(){console.error("Network error trying to access: "+e)}),s.send(null)},ajaxPost(e,t,a,n,s,i,d){var r=new XMLHttpRequest;r.open("POST",e),r.addEventListener("load",function(){r.status>=200&&r.status<400?i===void 0?a(r):a.apply(i,[r]):(d===void 0?n(r):n.apply(d,[r]),console.error(r.status+" "+r.statusText+" "+e))}),r.addEventListener("error",function(){console.error("Network error trying to access: "+e)}),s&&(r.setRequestHeader("Content-Type","application/json"),t=JSON.stringify(t)),r.send(t)}}});(function(){window.yaju=h()})();})();
|
package/js-utils.js
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
module.exports = {
|
|
2
|
-
|
|
2
|
+
qs(cssSelector) {
|
|
3
|
+
return document.querySelector(cssSelector);
|
|
4
|
+
},
|
|
5
|
+
|
|
6
|
+
qsa(cssSelector) {
|
|
7
|
+
return Array.from(document.querySelector(cssSelector));
|
|
8
|
+
},
|
|
3
9
|
|
|
10
|
+
// # Nil
|
|
4
11
|
// I like the NOT operator
|
|
5
12
|
// I like strict type checking
|
|
6
13
|
// Hence a strictly typed equivalent:
|
|
@@ -80,6 +87,17 @@ module.exports = {
|
|
|
80
87
|
return array.every(checkingFunction);
|
|
81
88
|
},
|
|
82
89
|
|
|
90
|
+
/**
|
|
91
|
+
* Pipe
|
|
92
|
+
* Function piping with initial input
|
|
93
|
+
* @param {*} functions
|
|
94
|
+
* @param {*} input
|
|
95
|
+
* @returns {*}
|
|
96
|
+
*/
|
|
97
|
+
pipe(input, ...functions) {
|
|
98
|
+
return functions.reduce((res, fun) => fun(res), input);
|
|
99
|
+
},
|
|
100
|
+
|
|
83
101
|
/**
|
|
84
102
|
* Escape
|
|
85
103
|
* @param { string } string
|
|
@@ -97,7 +115,7 @@ module.exports = {
|
|
|
97
115
|
/**
|
|
98
116
|
* DOM-rendering template tag
|
|
99
117
|
* @param {Array} strings
|
|
100
|
-
* @returns {
|
|
118
|
+
* @returns {String}
|
|
101
119
|
*/
|
|
102
120
|
html(strings) {
|
|
103
121
|
let output = strings[0], // assumes empty string start?
|
|
@@ -314,16 +332,5 @@ module.exports = {
|
|
|
314
332
|
data = JSON.stringify(data);
|
|
315
333
|
}
|
|
316
334
|
req.send(data);
|
|
317
|
-
},
|
|
318
|
-
|
|
319
|
-
/**
|
|
320
|
-
* Pipe
|
|
321
|
-
* Function piping with initial input
|
|
322
|
-
* @param {*} functions
|
|
323
|
-
* @param {*} input
|
|
324
|
-
* @returns {*}
|
|
325
|
-
*/
|
|
326
|
-
pipe(input, ...functions) {
|
|
327
|
-
return functions.reduce((res, fun) => fun(res), input);
|
|
328
335
|
}
|
|
329
336
|
}
|
package/out.js
CHANGED
|
@@ -10,6 +10,12 @@
|
|
|
10
10
|
"js-utils.js"(exports, module) {
|
|
11
11
|
"use strict";
|
|
12
12
|
module.exports = {
|
|
13
|
+
qs(cssSelector) {
|
|
14
|
+
return document.querySelector(cssSelector);
|
|
15
|
+
},
|
|
16
|
+
qsa(cssSelector) {
|
|
17
|
+
return Array.from(document.querySelector(cssSelector));
|
|
18
|
+
},
|
|
13
19
|
// # Nil
|
|
14
20
|
// I like the NOT operator
|
|
15
21
|
// I like strict type checking
|
|
@@ -76,6 +82,16 @@
|
|
|
76
82
|
check(array, checkingFunction) {
|
|
77
83
|
return array.every(checkingFunction);
|
|
78
84
|
},
|
|
85
|
+
/**
|
|
86
|
+
* Pipe
|
|
87
|
+
* Function piping with initial input
|
|
88
|
+
* @param {*} functions
|
|
89
|
+
* @param {*} input
|
|
90
|
+
* @returns {*}
|
|
91
|
+
*/
|
|
92
|
+
pipe(input, ...functions) {
|
|
93
|
+
return functions.reduce((res, fun) => fun(res), input);
|
|
94
|
+
},
|
|
79
95
|
/**
|
|
80
96
|
* Escape
|
|
81
97
|
* @param { string } string
|
|
@@ -87,7 +103,7 @@
|
|
|
87
103
|
/**
|
|
88
104
|
* DOM-rendering template tag
|
|
89
105
|
* @param {Array} strings
|
|
90
|
-
* @returns {
|
|
106
|
+
* @returns {String}
|
|
91
107
|
*/
|
|
92
108
|
html(strings) {
|
|
93
109
|
let output = strings[0], max = Math.max(strings.length, arguments.length - 1);
|
|
@@ -283,16 +299,6 @@
|
|
|
283
299
|
data = JSON.stringify(data);
|
|
284
300
|
}
|
|
285
301
|
req.send(data);
|
|
286
|
-
},
|
|
287
|
-
/**
|
|
288
|
-
* Pipe
|
|
289
|
-
* Function piping with initial input
|
|
290
|
-
* @param {*} functions
|
|
291
|
-
* @param {*} input
|
|
292
|
-
* @returns {*}
|
|
293
|
-
*/
|
|
294
|
-
pipe(input, ...functions) {
|
|
295
|
-
return functions.reduce((res, fun) => fun(res), input);
|
|
296
302
|
}
|
|
297
303
|
};
|
|
298
304
|
}
|
package/out.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["js-utils.js", "main.js"],
|
|
4
|
-
"sourcesContent": ["module.exports = {\r\n // # Nil\r\n\r\n // I like the NOT operator\r\n // I like strict type checking\r\n // Hence a strictly typed equivalent:\r\n // - 3-letters name n\r\n // - single argument\r\n\r\n /**\r\n * Nil\r\n * Either null or undefined\r\n * @param { boolean } exp\r\n * @returns { boolean }\r\n */\r\n nil(exp) { // values implicitly considered functions\r\n if (\r\n exp === null\r\n || typeof exp === 'undefined'\r\n ) {\r\n return true;\r\n }\r\n return false;\r\n },\r\n\r\n // # Hack\r\n\r\n // .slice() uses a closed-open interval\r\n // the mathematical convention goes closed-closed\r\n\r\n /**\r\n * Hack\r\n * @param { number } start\r\n * @param { number } end\r\n * @returns\r\n */\r\n hack(array, start, end) {\r\n return array.slice(start, end + 1);\r\n },\r\n\r\n // # Prune/Pick\r\n\r\n // Javascript inherited spreadsheet-like .filter()\r\n // It felt confusing there\r\n // It feels confusing here too\r\n\r\n /**\r\n * Pick\r\n * @param {*} array\r\n * @param {*} pruningFunction\r\n * @returns\r\n */\r\n pick(array, pruningFunction) {\r\n return array.filter(pruningFunction);\r\n },\r\n\r\n /**\r\n * Prune\r\n * The inverse of filter()\r\n * @param {*} array\r\n * @param {*} filteringFunction\r\n * @returns\r\n */\r\n prune(array, filteringFunction) {\r\n return array.filter(function (x) {\r\n return !filteringFunction(x);\r\n });\r\n },\r\n\r\n // # Check\r\n\r\n // .every() just sounds weird\r\n /**\r\n * Check\r\n * @param {*} array\r\n * @param {*} checkingFunction\r\n * @returns\r\n */\r\n check(array, checkingFunction) {\r\n return array.every(checkingFunction);\r\n },\r\n\r\n /**\r\n * Escape\r\n * @param { string } string\r\n * @returns\r\n */\r\n escape(string) {\r\n return string\r\n .replace(/&/g, '&')\r\n .replace(/</g, '<')\r\n .replace(/>/g, '>')\r\n .replace(/\"/g, '"')\r\n .replace(/'/g, ''');\r\n },\r\n\r\n /**\r\n * DOM-rendering template tag\r\n * @param {Array} strings\r\n * @returns {object} a DocumentFragment\r\n */\r\n html(strings) {\r\n let output = strings[0], // assumes empty string start?\r\n max = Math.max(strings.length, arguments.length - 1);\r\n for (let i = 1; i < max; i++) {\r\n output += arguments[i];\r\n output += strings[i];\r\n }\r\n return output;\r\n },\r\n\r\n /**\r\n * Basic contents updater\r\n * Assuming:\r\n * - Rendering applied event-listeners already\r\n * - You can apply state afterwards\r\n * - You can store newRender afterwards\r\n * @param {object} previousRender\r\n * @param {object} newRender\r\n * @param {object} dom\r\n */\r\n diffVDomAndUpdate(previousRender, newRender, dom) {\r\n // Assuming overwrite or insertion\r\n let $ = this;\r\n $.changedNodes = [];\r\n let leftItems = previousRender.childNodes,\r\n rightItems = newRender.childNodes,\r\n domItems = dom.childNodes;\r\n if (domItems.length > rightItems.length) {\r\n let diffLength = domItems.length - rightItems.length;\r\n for (let i = 0, c = diffLength; i < c; i++) {\r\n dom.lastChild.remove();\r\n }\r\n }\r\n for (let i = 0, c = rightItems.length; i < c; i++) {\r\n if (!leftItems[i]) {\r\n let node = rightItems[i].cloneNode(true);\r\n $.changedNodes.push(node);\r\n dom.appendChild(node);\r\n } else if (leftItems[i].outerHTML !== rightItems[i].outerHTML) {\r\n let voidElementsList = [\r\n 'AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'LINK', 'META', 'PARAM', 'SOURCE',\r\n 'TRACK', 'WBR'\r\n ],\r\n closingTagLength = 0;\r\n if (voidElementsList.indexOf(rightItems[i].tagName) === -1) {\r\n closingTagLength = 3 + rightItems[i].tagName.length;\r\n }\r\n if (\r\n leftItems[i].tagName !== rightItems[i].tagName\r\n || leftItems[i].innerHTML === rightItems[i].innerHTML\r\n || (\r\n leftItems[i].outerHTML.slice((-1 * leftItems.innerHTML.length) - closingTagLength)\r\n !== rightItems[i].outerHTML.slice((-1 * rightItems.innerHTML.length) - closingTagLength)\r\n )\r\n ) {\r\n let node = rightItems[i].cloneNode(true);\r\n $.changedNodes.push(node);\r\n domItems[i].replaceWith(node);\r\n } else {\r\n // Same container, different contents\r\n this.diffVDomAndUpdate(leftItems[i], rightItems[i], domItems[i]);\r\n }\r\n }\r\n }\r\n },\r\n\r\n // # DATA-STATE\r\n\r\n // Alternative CSS state management\r\n // - using data-attributes instead of classes\r\n // - easier to match model and vue\r\n // - dataset over classlist allows specialization\r\n // - classes work as booleans (\".walked\")\r\n // - you need to notice abscence\r\n // - data-state work as a string type you can dedicate to store state only, and more than one state\r\n\r\n /**\r\n * Add\r\n * @param { object } element\r\n * @param { string } state\r\n */\r\n addDataState(element, state) {\r\n let stateArray = [];\r\n if (\r\n element.dataset.state\r\n && element.dataset.state.indexOf(' ') > -1\r\n ) {\r\n stateArray = element.dataset.state.split(' ');\r\n } else {\r\n stateArray = [element.dataset.state];\r\n }\r\n if (stateArray.indexOf(state) === -1) {\r\n stateArray.push(state);\r\n element.dataset.state = stateArray.join(' ');\r\n }\r\n },\r\n\r\n /**\r\n * Remove\r\n * @param { object } element\r\n * @param { string } state\r\n */\r\n removeDataState(element, state) {\r\n let stateArray = [];\r\n if (\r\n element.dataset.state\r\n && element.dataset.state.indexOf(' ') > -1\r\n ) {\r\n stateArray = element.dataset.state.split(' ');\r\n } else {\r\n stateArray = [element.dataset.state];\r\n }\r\n element.dataset.state =\r\n stateArray\r\n .filter(element => (element !== state))\r\n .join(' ');\r\n },\r\n\r\n /**\r\n * Replace\r\n * @param { object } element\r\n * @param { string } stateToRemove\r\n * @param { string } stateToAdd\r\n */\r\n replaceDataState(element, stateToRemove, stateToAdd) {\r\n this.removeDataState(element, stateToRemove);\r\n this.addDataState(element, stateToAdd);\r\n },\r\n\r\n /**\r\n * Toggle\r\n * @param { object } element\r\n * @param { string } state\r\n */\r\n toggleDataState(element, state) {\r\n let stateArray = element.dataset.state.split(' ');\r\n if (stateArray.indexOf(state) == -1) {\r\n this.addDataState(element, state);\r\n } else {\r\n this.removeDataState(element, state);\r\n }\r\n },\r\n\r\n /**\r\n * Reset\r\n * @param { object } element\r\n */\r\n resetDataState(element) {\r\n element.dataset.state = '';\r\n },\r\n\r\n //# AJAX Functions\r\n\r\n /**\r\n * AJAX GET\r\n * @param {string} url The target url\r\n * @param {function} callback\r\n * @param {boolean} isJson Response contains json\r\n * @param {object} callbackContext\r\n */\r\n ajaxGet(url, callback, isJson, callbackContext) {\r\n var req = new XMLHttpRequest();\r\n req.open(\"GET\", url);\r\n req.addEventListener(\"load\", function () {\r\n if (req.status >= 200 && req.status < 400) {\r\n if (isJson) {\r\n var json = {};\r\n try {\r\n json = JSON.parse(req.responseText);\r\n } catch (error) {\r\n console.error(\"Get request returned invalid JSON.\")\r\n }\r\n callbackContext === undefined ? callback(json) : callback.apply(callbackContext, [json]);\r\n } else {\r\n callbackContext === undefined ? callback(req.responseText) : callback.apply(callbackContext, [req.responseText]);\r\n }\r\n } else {\r\n console.error(req.status + \" \" + req.statusText + \" \" + url);\r\n }\r\n });\r\n req.addEventListener(\"error\", function () {\r\n console.error(\"Network error trying to access: \" + url);\r\n });\r\n req.send(null);\r\n },\r\n\r\n /**\r\n * AJAX POST\r\n * @param {string} url\r\n * @param {string} data\r\n * @param {function} successCallback\r\n * @param {function} failureCallback\r\n * @param {boolean} isJson\r\n * @param {object} successCallbackContext\r\n * @param {object} failureCallbackContext\r\n */\r\n ajaxPost(url, data, successCallback, failureCallback, isJson, successCallbackContext, failureCallbackContext) {\r\n var req = new XMLHttpRequest();\r\n req.open(\"POST\", url);\r\n req.addEventListener(\"load\", function () {\r\n if (req.status >= 200 && req.status < 400) {\r\n successCallbackContext === undefined ? successCallback(req) : successCallback.apply(successCallbackContext, [req]);\r\n } else {\r\n failureCallbackContext === undefined ? failureCallback(req) : failureCallback.apply(failureCallbackContext, [req]);\r\n console.error(req.status + \" \" + req.statusText + \" \" + url);\r\n }\r\n });\r\n req.addEventListener(\"error\", function () {\r\n console.error(\"Network error trying to access: \" + url);\r\n });\r\n if (isJson) {\r\n req.setRequestHeader(\"Content-Type\", \"application/json\");\r\n data = JSON.stringify(data);\r\n }\r\n req.send(data);\r\n },\r\n\r\n /**\r\n * Pipe\r\n * Function piping with initial input\r\n * @param {*} functions\r\n * @param {*} input\r\n * @returns {*}\r\n */\r\n pipe(input, ...functions) {\r\n return functions.reduce((res, fun) => fun(res), input);\r\n }\r\n}\r\n", "(function () {\r\n window.yaju = require('./js-utils.js');\r\n})();\r\n"],
|
|
5
|
-
"mappings": ";;;;;;;;AAAA;AAAA;AAAA;AAAA,aAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["module.exports = {\r\n qs(cssSelector) {\r\n return document.querySelector(cssSelector);\r\n },\r\n\r\n qsa(cssSelector) {\r\n return Array.from(document.querySelector(cssSelector));\r\n },\r\n\r\n // # Nil\r\n // I like the NOT operator\r\n // I like strict type checking\r\n // Hence a strictly typed equivalent:\r\n // - 3-letters name n\r\n // - single argument\r\n\r\n /**\r\n * Nil\r\n * Either null or undefined\r\n * @param { boolean } exp\r\n * @returns { boolean }\r\n */\r\n nil(exp) { // values implicitly considered functions\r\n if (\r\n exp === null\r\n || typeof exp === 'undefined'\r\n ) {\r\n return true;\r\n }\r\n return false;\r\n },\r\n\r\n // # Hack\r\n\r\n // .slice() uses a closed-open interval\r\n // the mathematical convention goes closed-closed\r\n\r\n /**\r\n * Hack\r\n * @param { number } start\r\n * @param { number } end\r\n * @returns\r\n */\r\n hack(array, start, end) {\r\n return array.slice(start, end + 1);\r\n },\r\n\r\n // # Prune/Pick\r\n\r\n // Javascript inherited spreadsheet-like .filter()\r\n // It felt confusing there\r\n // It feels confusing here too\r\n\r\n /**\r\n * Pick\r\n * @param {*} array\r\n * @param {*} pruningFunction\r\n * @returns\r\n */\r\n pick(array, pruningFunction) {\r\n return array.filter(pruningFunction);\r\n },\r\n\r\n /**\r\n * Prune\r\n * The inverse of filter()\r\n * @param {*} array\r\n * @param {*} filteringFunction\r\n * @returns\r\n */\r\n prune(array, filteringFunction) {\r\n return array.filter(function (x) {\r\n return !filteringFunction(x);\r\n });\r\n },\r\n\r\n // # Check\r\n\r\n // .every() just sounds weird\r\n /**\r\n * Check\r\n * @param {*} array\r\n * @param {*} checkingFunction\r\n * @returns\r\n */\r\n check(array, checkingFunction) {\r\n return array.every(checkingFunction);\r\n },\r\n\r\n /**\r\n * Pipe\r\n * Function piping with initial input\r\n * @param {*} functions\r\n * @param {*} input\r\n * @returns {*}\r\n */\r\n pipe(input, ...functions) {\r\n return functions.reduce((res, fun) => fun(res), input);\r\n },\r\n\r\n /**\r\n * Escape\r\n * @param { string } string\r\n * @returns\r\n */\r\n escape(string) {\r\n return string\r\n .replace(/&/g, '&')\r\n .replace(/</g, '<')\r\n .replace(/>/g, '>')\r\n .replace(/\"/g, '"')\r\n .replace(/'/g, ''');\r\n },\r\n\r\n /**\r\n * DOM-rendering template tag\r\n * @param {Array} strings\r\n * @returns {String}\r\n */\r\n html(strings) {\r\n let output = strings[0], // assumes empty string start?\r\n max = Math.max(strings.length, arguments.length - 1);\r\n for (let i = 1; i < max; i++) {\r\n output += arguments[i];\r\n output += strings[i];\r\n }\r\n return output;\r\n },\r\n\r\n /**\r\n * Basic contents updater\r\n * Assuming:\r\n * - Rendering applied event-listeners already\r\n * - You can apply state afterwards\r\n * - You can store newRender afterwards\r\n * @param {object} previousRender\r\n * @param {object} newRender\r\n * @param {object} dom\r\n */\r\n diffVDomAndUpdate(previousRender, newRender, dom) {\r\n // Assuming overwrite or insertion\r\n let $ = this;\r\n $.changedNodes = [];\r\n let leftItems = previousRender.childNodes,\r\n rightItems = newRender.childNodes,\r\n domItems = dom.childNodes;\r\n if (domItems.length > rightItems.length) {\r\n let diffLength = domItems.length - rightItems.length;\r\n for (let i = 0, c = diffLength; i < c; i++) {\r\n dom.lastChild.remove();\r\n }\r\n }\r\n for (let i = 0, c = rightItems.length; i < c; i++) {\r\n if (!leftItems[i]) {\r\n let node = rightItems[i].cloneNode(true);\r\n $.changedNodes.push(node);\r\n dom.appendChild(node);\r\n } else if (leftItems[i].outerHTML !== rightItems[i].outerHTML) {\r\n let voidElementsList = [\r\n 'AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'LINK', 'META', 'PARAM', 'SOURCE',\r\n 'TRACK', 'WBR'\r\n ],\r\n closingTagLength = 0;\r\n if (voidElementsList.indexOf(rightItems[i].tagName) === -1) {\r\n closingTagLength = 3 + rightItems[i].tagName.length;\r\n }\r\n if (\r\n leftItems[i].tagName !== rightItems[i].tagName\r\n || leftItems[i].innerHTML === rightItems[i].innerHTML\r\n || (\r\n leftItems[i].outerHTML.slice((-1 * leftItems.innerHTML.length) - closingTagLength)\r\n !== rightItems[i].outerHTML.slice((-1 * rightItems.innerHTML.length) - closingTagLength)\r\n )\r\n ) {\r\n let node = rightItems[i].cloneNode(true);\r\n $.changedNodes.push(node);\r\n domItems[i].replaceWith(node);\r\n } else {\r\n // Same container, different contents\r\n this.diffVDomAndUpdate(leftItems[i], rightItems[i], domItems[i]);\r\n }\r\n }\r\n }\r\n },\r\n\r\n // # DATA-STATE\r\n\r\n // Alternative CSS state management\r\n // - using data-attributes instead of classes\r\n // - easier to match model and vue\r\n // - dataset over classlist allows specialization\r\n // - classes work as booleans (\".walked\")\r\n // - you need to notice abscence\r\n // - data-state work as a string type you can dedicate to store state only, and more than one state\r\n\r\n /**\r\n * Add\r\n * @param { object } element\r\n * @param { string } state\r\n */\r\n addDataState(element, state) {\r\n let stateArray = [];\r\n if (\r\n element.dataset.state\r\n && element.dataset.state.indexOf(' ') > -1\r\n ) {\r\n stateArray = element.dataset.state.split(' ');\r\n } else {\r\n stateArray = [element.dataset.state];\r\n }\r\n if (stateArray.indexOf(state) === -1) {\r\n stateArray.push(state);\r\n element.dataset.state = stateArray.join(' ');\r\n }\r\n },\r\n\r\n /**\r\n * Remove\r\n * @param { object } element\r\n * @param { string } state\r\n */\r\n removeDataState(element, state) {\r\n let stateArray = [];\r\n if (\r\n element.dataset.state\r\n && element.dataset.state.indexOf(' ') > -1\r\n ) {\r\n stateArray = element.dataset.state.split(' ');\r\n } else {\r\n stateArray = [element.dataset.state];\r\n }\r\n element.dataset.state =\r\n stateArray\r\n .filter(element => (element !== state))\r\n .join(' ');\r\n },\r\n\r\n /**\r\n * Replace\r\n * @param { object } element\r\n * @param { string } stateToRemove\r\n * @param { string } stateToAdd\r\n */\r\n replaceDataState(element, stateToRemove, stateToAdd) {\r\n this.removeDataState(element, stateToRemove);\r\n this.addDataState(element, stateToAdd);\r\n },\r\n\r\n /**\r\n * Toggle\r\n * @param { object } element\r\n * @param { string } state\r\n */\r\n toggleDataState(element, state) {\r\n let stateArray = element.dataset.state.split(' ');\r\n if (stateArray.indexOf(state) == -1) {\r\n this.addDataState(element, state);\r\n } else {\r\n this.removeDataState(element, state);\r\n }\r\n },\r\n\r\n /**\r\n * Reset\r\n * @param { object } element\r\n */\r\n resetDataState(element) {\r\n element.dataset.state = '';\r\n },\r\n\r\n //# AJAX Functions\r\n\r\n /**\r\n * AJAX GET\r\n * @param {string} url The target url\r\n * @param {function} callback\r\n * @param {boolean} isJson Response contains json\r\n * @param {object} callbackContext\r\n */\r\n ajaxGet(url, callback, isJson, callbackContext) {\r\n var req = new XMLHttpRequest();\r\n req.open(\"GET\", url);\r\n req.addEventListener(\"load\", function () {\r\n if (req.status >= 200 && req.status < 400) {\r\n if (isJson) {\r\n var json = {};\r\n try {\r\n json = JSON.parse(req.responseText);\r\n } catch (error) {\r\n console.error(\"Get request returned invalid JSON.\")\r\n }\r\n callbackContext === undefined ? callback(json) : callback.apply(callbackContext, [json]);\r\n } else {\r\n callbackContext === undefined ? callback(req.responseText) : callback.apply(callbackContext, [req.responseText]);\r\n }\r\n } else {\r\n console.error(req.status + \" \" + req.statusText + \" \" + url);\r\n }\r\n });\r\n req.addEventListener(\"error\", function () {\r\n console.error(\"Network error trying to access: \" + url);\r\n });\r\n req.send(null);\r\n },\r\n\r\n /**\r\n * AJAX POST\r\n * @param {string} url\r\n * @param {string} data\r\n * @param {function} successCallback\r\n * @param {function} failureCallback\r\n * @param {boolean} isJson\r\n * @param {object} successCallbackContext\r\n * @param {object} failureCallbackContext\r\n */\r\n ajaxPost(url, data, successCallback, failureCallback, isJson, successCallbackContext, failureCallbackContext) {\r\n var req = new XMLHttpRequest();\r\n req.open(\"POST\", url);\r\n req.addEventListener(\"load\", function () {\r\n if (req.status >= 200 && req.status < 400) {\r\n successCallbackContext === undefined ? successCallback(req) : successCallback.apply(successCallbackContext, [req]);\r\n } else {\r\n failureCallbackContext === undefined ? failureCallback(req) : failureCallback.apply(failureCallbackContext, [req]);\r\n console.error(req.status + \" \" + req.statusText + \" \" + url);\r\n }\r\n });\r\n req.addEventListener(\"error\", function () {\r\n console.error(\"Network error trying to access: \" + url);\r\n });\r\n if (isJson) {\r\n req.setRequestHeader(\"Content-Type\", \"application/json\");\r\n data = JSON.stringify(data);\r\n }\r\n req.send(data);\r\n }\r\n}\r\n", "(function () {\r\n window.yaju = require('./js-utils.js');\r\n})();\r\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["element"]
|
|
7
7
|
}
|
package/package.json
CHANGED