perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed the loading function by a custom html element

Browse Source
This commit is contained in:
asus
2023-10-31 19:05:24 +01:00
parent 2d1a84eff6
commit ebb7279644
9 changed files with 463 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
scripts/load_html.js
View File

@@ -1,86 +1,29 @@
// 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;
}
// https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
function fill_content(new_content, old_content, target_name) {
let elements_with_class = find_elements_by_class(new_content, "content_html");
let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
elements_to_fill.forEach(el => el.outerHTML = old_content);
}
customElements.define(
"load-html",
class extends HTMLElement {
constructor() {
function find_elements_by_class(html_collection, class_to_find) {
for (element of html_collection) {
if (element.nodeName === "STYLE")
continue;
if (element.nodeName === "SCRIPT")
continue;
return element.getElementsByClassName(class_to_find);
}
return null;
}
super();
function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
let matching_elements = [];
if (!data_to_compare)
return matching_elements;
for (element of html_collection) {
let path = this.dataset.path;
let templateContent = document.createDocumentFragment();
let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)];
//let data = element.dataset[dataset_name];
let load_content = (content_to_load) => {
let template = document.createElement('template');
template.innerHTML = content_to_load;
templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true));
}
//if (data_to_compare === data)
matching_elements.push(...data);
}
// if (data_to_compare === "banner")
return matching_elements;
}
function transfert_class(element, new_content) {
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));
}
function replace_html(element_to_replace, content_to_load) {
let old_content = element_to_replace.innerHTML;
let new_content = deserialize_html(content_to_load);
let target_name = element_to_replace.dataset.path_target;
transfert_class(element_to_replace, new_content);
console.log("new_content: ", new_content);
// fill_content(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);
fetch(path)
.then(response => response.text())
.then(load_content)
.catch(error => console.log('Error:', error));
}
},
);

169
scripts/old_load_html.js Normal file
View File

@@ -0,0 +1,169 @@
// 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);