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

modif of the script to use html templates and slots with shadow DOM

Browse Source
This commit is contained in:
asus
2023-11-03 10:29:50 +01:00
parent ebb7279644
commit 138711c082
8 changed files with 28 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scripts/load_html.js
View File

@@ -9,12 +9,36 @@ customElements.define(
super();
let path = this.dataset.path;
let templateContent = document.createDocumentFragment();
let load_content = (content_to_load) => {
let template = document.createElement('template');
template.innerHTML = content_to_load;
templateContent = template.content;
let templateContent = template.content;
//this.appendChild(templateContent.cloneNode(true));
this.replaceWith(templateContent.cloneNode(true));
}
fetch(path)
.then(response => response.text())
.then(load_content)
.catch(error => console.log('Error:', error));
}
},
);
customElements.define(
"load-html-shadow",
class extends HTMLElement {
constructor() {
super();
let path = this.dataset.path;
let load_content = (content_to_load) => {
let template = document.createElement('template');
template.innerHTML = content_to_load;
let templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true));
}

80
scripts/old_load_html.js
View File

@@ -10,35 +10,14 @@ function deserialize_html(html) {
}
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;
@@ -50,13 +29,6 @@ function find_elements_by_class(html_collection, class_to_find) {
}
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;
@@ -73,20 +45,8 @@ function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
}
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)
@@ -95,53 +55,13 @@ function transfert_class(element, new_content) {
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);
};