81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
|
|
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
|
|
function deserialize_html(html) {
|
|
let template = document.createElement('template');
|
|
template.innerHTML = html;
|
|
return template.content.children;
|
|
// use .children instead of childNodes to avoid #text elements :
|
|
// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
|
|
//return template.content.childNodes;
|
|
}
|
|
|
|
function find_class_in_htmlcollection(elements) {
|
|
let content_elements = [];
|
|
for (element of elements) {
|
|
if (element.nodeName === "STYLE")
|
|
continue;
|
|
if (element.nodeName === "SCRIPT")
|
|
continue;
|
|
let result = element.getElementsByClassName("content_html");
|
|
if (result.length > 0) {
|
|
// for the moment only deal with 1 :
|
|
return result[0];
|
|
content_elements = content_elements.concat(Array.from(result));
|
|
}
|
|
}
|
|
//return content_elements;
|
|
return "";
|
|
}
|
|
|
|
function replace_html(element, content) {
|
|
// console.log("element: ", element);
|
|
// console.log("element.childNodes: ", element.childNodes);
|
|
// console.log("element.getElementsByClassName('content'): ", element.getElementsByClassName('content'));
|
|
|
|
let old_content = element.innerHTML;
|
|
let new_elements = deserialize_html(content);
|
|
//console.log("new_elements: ", new_elements);
|
|
let content_elements = find_class_in_htmlcollection(new_elements);
|
|
if (content_elements) {
|
|
console.log("new_elements1: ", new_elements[0].outerHTML);
|
|
console.log("content_elements: ", content_elements);
|
|
console.log("old_content: ", old_content);
|
|
content_elements.outerHTML = old_content;
|
|
console.log("new_elements2: ", new_elements[0].outerHTML);
|
|
}
|
|
|
|
// let previous_content = element.innerHTML;
|
|
// console.log("previous_content: ", previous_content);
|
|
// console.log("element: ", element);
|
|
// element.outerHTML = content;
|
|
element.replaceWith(...new_elements);
|
|
|
|
// console.log("temp_element: ", temp_element);
|
|
// tmp_element.insertAdjacentText('beforeend', previous_content);
|
|
// console.log("temp_element: ", temp_element);
|
|
|
|
// element.insertAdjacentHTML('beforebegin', data)
|
|
// element.innerHTML = data
|
|
// element.outerHTML = data
|
|
};
|
|
|
|
function insert_html() {
|
|
let elements = document.getElementsByClassName("insert_html");
|
|
for (let element of elements) {
|
|
let path = (element.dataset.path);
|
|
fetch(path)
|
|
.then(response => response.text())
|
|
.then(data => replace_html(element, data))
|
|
.catch(error => console.log('Error:', error));
|
|
//element.classList.replace("insert_html", "inserted_html");
|
|
};
|
|
}
|
|
|
|
// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
|
|
const callback = (mutation_list, observer) => insert_html();
|
|
const observer = new MutationObserver(callback);
|
|
const targetNode = document.body;
|
|
const config = { attributes: true, childList: true, subtree: true };
|
|
// Start observing the target node for configured mutations
|
|
observer.observe(targetNode, config);
|