1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-14 02:26:20 +02:00

script.js: Make compileNodes() recursive to compile imported HTMLs also. fixes #239

This commit is contained in:
Kushagra Gour
2017-12-12 10:27:48 +05:30
parent 949008f9ce
commit 29e7b2f94a
2 changed files with 19 additions and 5 deletions

View File

@ -26,7 +26,7 @@
"eol-last": "off", "eol-last": "off",
"eqeqeq": "error", "eqeqeq": "error",
"func-names": "off", "func-names": "off",
"func-style": ["error", "declaration"], "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
"generator-star-spacing": "error", "generator-star-spacing": "error",
"global-require": "error", "global-require": "error",
"guard-for-in": "error", "guard-for-in": "error",

View File

@ -1883,9 +1883,21 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
/* eslint-enable no-param-reassign */ /* eslint-enable no-param-reassign */
}; };
function compileNodes() { /**
* Compiles directives on the given node
* @param {Node} root The element on which compilation is required
*/
function compileNodes(root) {
if (!(root instanceof Node)) {
/* eslint-disable no-param-reassign */
root = document;
/* eslint-enable no-param-reassign */
}
// Create a querySelectorAll function bound to the passed `root` Node
const query = selector => [...root.querySelectorAll(selector)];
function attachListenerForEvent(eventName) { function attachListenerForEvent(eventName) {
const nodes = $all(`[d-${eventName}]`); const nodes = query(`[d-${eventName}]`);
nodes.forEach(function(el) { nodes.forEach(function(el) {
el.addEventListener(eventName, function(e) { el.addEventListener(eventName, function(e) {
scope[el.getAttribute(`d-${eventName}`)].call(window, e); scope[el.getAttribute(`d-${eventName}`)].call(window, e);
@ -1898,7 +1910,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
attachListenerForEvent('keyup'); attachListenerForEvent('keyup');
// Compile d-open-modal directive // Compile d-open-modal directive
const modalTriggers = $all(`[d-open-modal]`); const modalTriggers = query(`[d-open-modal]`);
modalTriggers.forEach(function(el) { modalTriggers.forEach(function(el) {
utils.onButtonClick(el, function() { utils.onButtonClick(el, function() {
scope.toggleModal(window[el.getAttribute('d-open-modal')]); scope.toggleModal(window[el.getAttribute('d-open-modal')]);
@ -1910,7 +1922,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
}); });
// Compile d-html directive // Compile d-html directive
const dHtmlNodes = $all(`[d-html]`); const dHtmlNodes = query(`[d-html]`);
dHtmlNodes.forEach(function(el) { dHtmlNodes.forEach(function(el) {
fetch(el.getAttribute('d-html')).then(response => { fetch(el.getAttribute('d-html')).then(response => {
// Stop further compilation because of future recursion by removing attribute. // Stop further compilation because of future recursion by removing attribute.
@ -1918,6 +1930,8 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
response.text().then(html => { response.text().then(html => {
requestIdleCallback(() => { requestIdleCallback(() => {
el.innerHTML = html; el.innerHTML = html;
// Now compile this newly inserted HTML also.
compileNodes(el);
}); });
}); });
}); });