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

4
ascii_elements/mouse_4.html
View File

@@ -1,5 +1,6 @@
<div class="load_html" data-path="ascii_elements/mouse_container.html" data-path_target="mouse_frame"> <load-html data-path="ascii_elements/mouse_container.html">
<div slot>
<pre class="mouse f1"> <pre class="mouse f1">
• •
@@ -158,6 +159,7 @@
</pre> </pre>
</div> </div>
</load-html>
<!-- <!--
• - • -

2
ascii_elements/mouse_container.html
View File

@@ -1,6 +1,6 @@
<div class="mouse_container"> <div class="mouse_container">
<div class="content_html" data-path_target="mouse_frame"></div> <slot class="content_html"></slot>
</div> </div>
<style> <style>

25
index.html
View File

@@ -3,21 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <!-- create "fake" favicon : https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests -->
create "fake" favicon to avoid browser complaining about not getting it
https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests
replace will real favicon if you want one
<link rel="icon" href="data:;base64,=">
<link rel="icon" href="data:,">
-->
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>hugulumu.fr</title> <title>hugulumu.fr</title>
<meta name="description" content="site web de hugo lamy, developpeur"> <meta name="description" content="site web de hugo lamy, developpeur">
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
<!-- <!--
<meta name="keywords" content="truc, bidule, chouette">
<link href="./style.css" type="text/css" rel="stylesheet"> <link href="./style.css" type="text/css" rel="stylesheet">
--> -->
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
<style> <style>
body { body {
overflow-x: hidden; overflow-x: hidden;
@@ -41,13 +34,13 @@
</head> </head>
<body> <body>
<div class="load_html" data-path="ascii_elements/name.html"></div> <load-html data-path="ascii_elements/name.html"></load-html>
<div class="load_html" data-path="ascii_elements/mouse_1.html"></div> <load-html data-path="ascii_elements/mouse_1.html"></load-html>
<div class="load_html" data-path="ascii_elements/mouse_2.html"></div> <load-html data-path="ascii_elements/mouse_2.html"></load-html>
<div class="load_html" data-path="ascii_elements/mouse_3.html"></div> <load-html data-path="ascii_elements/mouse_3.html"></load-html>
<div class="load_html" data-path="ascii_elements/mouse_4.html"></div> <load-html data-path="ascii_elements/mouse_4.html"></load-html>
<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div> <load-html data-path="ascii_elements/banner_1.html"></load-html>
<pre class="banner reverse t1_0"> <pre class="banner reverse t1_0">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
@@ -63,7 +56,7 @@
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre> </pre>
<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div> <div class="insert_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
<pre class="banner t0_5"> <pre class="banner t0_5">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

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 // https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
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) { customElements.define(
let elements_with_class = find_elements_by_class(new_content, "content_html"); "load-html",
let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target"); class extends HTMLElement {
elements_to_fill.forEach(el => el.outerHTML = old_content); constructor() {
}
function find_elements_by_class(html_collection, class_to_find) { super();
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) { let path = this.dataset.path;
let matching_elements = []; let templateContent = document.createDocumentFragment();
if (!data_to_compare)
return matching_elements;
for (element of html_collection) {
let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)]; let load_content = (content_to_load) => {
//let data = element.dataset[dataset_name]; 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) fetch(path)
matching_elements.push(...data); .then(response => response.text())
} .then(load_content)
// if (data_to_compare === "banner") .catch(error => console.log('Error:', error));
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);

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);

185
test_template_slots/index.html Normal file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html>
<head>
<title>Slot Example</title>
</head>
<body>
<!-- Template 1 -->
<template id="template1">
<h1><slot name="heading">default</slot></h1>
<slot name="tel"></slot>
<p><slot name="paragraph">default</slot></p>
<div class="insert_html" data-template="template2">
<!--
<span slot="second_paragraph">paragraph 3</span>
-->
</div>
<style>
h1 {
font-size: 2em;
font-family: monospace;
color: darkorange;
}
p {
border-left: 3px solid darkorange;
padding-left: 1em;
}
</style>
</template>
<template id="template2">
<p><slot name="second_paragraph">default template 2</slot></p>
<style>
h1 {
font-size: 2em;
font-family: monospace;
color: blue;
}
p {
border-left: 3px solid blue;
padding-left: 1em;
}
</style>
</template>
<template id="template_3">
<p><slot></slot></p>
<load-html data-path="template_4"></load-html>
<style>
h1 {
font-size: 2em;
font-family: monospace;
color: blue;
}
p {
border-left: 3px solid blue;
padding-left: 1em;
}
</style>
</template>
<template id="template_4">
<p>template 4 !</p>
<style>
h1 {
font-size: 2em;
font-family: monospace;
color: green;
}
p {
border-left: 3px solid green;
padding-left: 1em;
}
</style>
</template>
<!-- Content -->
<div id="">
<p>titre 0</p>
<p>paragraph 0</p>
</div>
<load-html data-path="template_3">
<span>test default 3</span>
</load-html>
<load-html-2 data-path="./test_3.html">
<span slot>first slot</span>
<p slot="slot2">test default 3 . 2</p>
</load-html-2>
<div class="insert_html" data-template="template1">
<span slot="heading">titre 1</span>
<span slot="paragraph">paragraph 1</span>
</div>
<div class="insert_html" data-template="template1">
<span slot="heading">titre 2</span>
<span slot="paragraph">paragraph 2</span>
</div>
<div class="insert_html" data-template="template1">
<p slot="tel">07</p>
</div>
<!-- Script
-->
<script>
var inserts = document.querySelectorAll('.insert_html');
console.log("inserts: ", inserts);
inserts.forEach(function(insert) {
let target_template = insert.dataset.template;
let template = document.querySelector(`#${target_template}`).content;
insert
.attachShadow({mode:'open'})
.appendChild(template.cloneNode(true));
});
customElements.define(
"load-html",
class extends HTMLElement {
constructor() {
super();
let path = this.dataset.path;
let template = document.getElementById(path);
console.log("template1: ", template);
let templateContent = template.content;
console.log("templateContent 1: ", templateContent);
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true));
}
},
);
customElements.define(
"load-html-2",
class extends HTMLElement {
constructor() {
super();
let path = this.dataset.path;
let templateContent = document.createDocumentFragment();
fetch(path)
.then(response => response.text())
.then(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));
})
.catch(error => console.log('Error:', error));
}
},
);
// 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);
//
// function load_html() {
// let elements = document.getElementsByClassName("insert_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));
// };
// }
</script>
</body>
</html>

18
test_template_slots/test.html Normal file
View File

@@ -0,0 +1,18 @@
<template id="template1">
<h1><slot name="heading">default</slot></h1>
<slot name="tel"></slot>
<p><slot name="paragraph">default</slot></p>
<span class="insert_html" data-template="template2" slot="second_paragraph">paragraph 3</span>
<style>
h1 {
font-size: 2em;
font-family: monospace;
color: darkorange;
}
p {
border-left: 3px solid darkorange;
padding-left: 1em;
}
</style>
</template>

18
test_template_slots/test_2.html Normal file
View File

@@ -0,0 +1,18 @@
<p part="title"><slot name="second_paragraph">default test_2.html</slot></p>
<style>
h1 {
font-size: 2em;
font-family: monospace;
color: blue;
}
p {
border-left: 3px solid blue;
padding-left: 1em;
}
p {
/*
background-color: lightblue;
*/
}
</style>

38
test_template_slots/test_3.html Normal file
View File

@@ -0,0 +1,38 @@
<p>hello from the other side</p>
<p><slot class="border_red"></slot></p>
<p>the end</p>
<slot name="slot2" class="border_blue"></slot>
<div class="border_red">
<load-html-2 data-path="./test_2.html"></load-html>
</div>
<!--
-->
<style>
/*
:host {
background-color: lightgreen;
}
::slotted(span) {
background-color: lightblue;
}
load_html::part(title) {
background-color: lightblue;
}
*/
h1 {
font-size: 2em;
font-family: monospace;
color: blue;
}
p {
border-left: 3px solid blue;
padding-left: 1em;
background-color: lightblue;
}
.border_red {
border: 1px solid red;
}
.border_blue {
border: 1px solid blue;
}
</style>