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

trying to make it work for all subchilds

Browse Source
This commit is contained in:
asus
2023-10-28 20:52:21 +02:00
parent 205ba8acd8
commit 2d1a84eff6
7 changed files with 291 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
scripts/load_html.js
View File

@@ -9,40 +9,69 @@ function deserialize_html(html) {
//return template.content.childNodes;
}
function find_class_in_htmlcollection(elements, target_name) {
for (element of elements) {
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);
}
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;
let results = element.getElementsByClassName("content_html");
for (result of results) {
let data_name = result.dataset.name;
if (target_name === data_name)
return result;
}
return element.getElementsByClassName(class_to_find);
}
return null;
}
function replace_html(element, content) {
let old_content = element.innerHTML;
let new_elements = deserialize_html(content);
let target_name = element.dataset.target;
let content_elements = find_class_in_htmlcollection(new_elements, target_name);
if (content_elements)
content_elements.outerHTML = old_content;
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) {
element.replaceWith(...new_elements);
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) {
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 of elements) {
let path = (element.dataset.path);
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 => replace_html(element, content))
.then(content_to_load => replace_html(element_to_replace, content_to_load))
.catch(error => console.log('Error:', error));
};
}