170 lines
9.2 KiB
JavaScript
170 lines
9.2 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 fill_content(new_content, old_content, target_name) {
|
|
// new_content :
|
|
// <div class="banner_container">
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// </div>
|
|
// old_content :
|
|
// <pre class="banner" data-class_target="banner">
|
|
// </pre>
|
|
// target_name :
|
|
// banner
|
|
if (!old_content)
|
|
return;
|
|
let elements_with_class = find_elements_by_class(new_content, "content_html");
|
|
// elements_with_class :
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
|
|
// elements_to_fill :
|
|
elements_to_fill.forEach(el => el.outerHTML = old_content);
|
|
}
|
|
|
|
function find_elements_by_class(html_collection, class_to_find) {
|
|
// html_collection :
|
|
// <div class="banner_container">
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// </div>
|
|
// class_to_find :
|
|
// content_html
|
|
for (element of html_collection) {
|
|
if (element.nodeName === "STYLE")
|
|
continue;
|
|
if (element.nodeName === "SCRIPT")
|
|
continue;
|
|
return element.getElementsByClassName(class_to_find);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
|
|
// html_collection :
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// data_to_compare :
|
|
// banner
|
|
// dataset_name :
|
|
// path_target
|
|
let matching_elements = [];
|
|
if (!data_to_compare)
|
|
return matching_elements;
|
|
for (element of html_collection) {
|
|
|
|
let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)];
|
|
//let data = element.dataset[dataset_name];
|
|
|
|
//if (data_to_compare === data)
|
|
matching_elements.push(...data);
|
|
}
|
|
// if (data_to_compare === "banner")
|
|
return matching_elements;
|
|
}
|
|
|
|
function transfert_class(element, new_content) {
|
|
// element :
|
|
// <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
|
// <pre class="banner" data-class_target="banner">
|
|
// </pre>
|
|
// </div>
|
|
// new_content :
|
|
// <div class="banner_container">
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// </div>
|
|
let class_target = element.dataset.class_target;
|
|
// --
|
|
let new_class = element.dataset.new_class;
|
|
// --
|
|
if (!class_target)
|
|
return;
|
|
if (!new_class)
|
|
return;
|
|
let elements_with_class = find_elements_by_data(new_content, class_target, "class_target");
|
|
elements_with_class.forEach(el => el.classList.add(new_class));
|
|
}
|
|
|
|
// element_to_replace : <div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div>
|
|
// content_to_load : <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
|
// <pre class="banner" data-class_target="banner">
|
|
// </pre>
|
|
// </div>
|
|
//
|
|
//
|
|
// element_to_replace : <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
|
// <pre class="banner" data-class_target="banner">
|
|
// </pre>
|
|
// </div>
|
|
// content_to_load : <div class="banner_container">
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// </div>
|
|
//
|
|
//
|
|
function replace_html(element_to_replace, content_to_load) {
|
|
let old_content = element_to_replace.innerHTML;
|
|
// old_content :
|
|
// <pre class="banner" data-class_target="banner">
|
|
// </pre>
|
|
let new_content = deserialize_html(content_to_load);
|
|
// new_content :
|
|
// <div class="banner_container">
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// </div>
|
|
let target_name = element_to_replace.dataset.path_target;
|
|
// target_name :
|
|
// banner
|
|
transfert_class(element_to_replace, new_content);
|
|
// element_to_replace :
|
|
// <div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
|
// <pre class="banner" data-class_target="banner">
|
|
// </pre>
|
|
// </div>
|
|
// new_content :
|
|
// <div class="banner_container">
|
|
// <div class="content_html" data-path_target="banner"></div>
|
|
// </div>
|
|
// </div>
|
|
// console.log("new_content: ", new_content);
|
|
fill_content(new_content, old_content, target_name);
|
|
// new_content :
|
|
// old_content :
|
|
// target_name :
|
|
element_to_replace.replaceWith(...new_content);
|
|
};
|
|
|
|
function load_html() {
|
|
let elements = document.getElementsByClassName("load_html");
|
|
for (let element_to_replace of elements) {
|
|
let path = (element_to_replace.dataset.path);
|
|
if (!path)
|
|
continue;
|
|
fetch(path)
|
|
.then(response => response.text())
|
|
.then(content_to_load => replace_html(element_to_replace, content_to_load))
|
|
.catch(error => console.log('Error:', error));
|
|
};
|
|
}
|
|
|
|
// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
|
|
const callback = (mutation_list, observer) => load_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);
|
|
|
|
|