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

2
ascii_elements/mouse_4.html
View File

@@ -1,6 +1,6 @@
<load-html data-path="ascii_elements/mouse_container.html"> <load-html data-path="ascii_elements/mouse_container.html">
<div slot> <div slot part="mouse_div">
<pre class="mouse f1"> <pre class="mouse f1">
• •

1
ascii_elements/mouse_container.html
View File

@@ -7,6 +7,7 @@
.mouse_container { .mouse_container {
position: relative; position: relative;
margin-left: 0px; margin-left: 0px;
display: contents;
/* /*
border: 1px solid red; border: 1px solid red;
margin-right: auto; margin-right: auto;

28
scripts/load_html.js
View File

@@ -9,12 +9,36 @@ customElements.define(
super(); super();
let path = this.dataset.path; let path = this.dataset.path;
let templateContent = document.createDocumentFragment();
let load_content = (content_to_load) => { let load_content = (content_to_load) => {
let template = document.createElement('template'); let template = document.createElement('template');
template.innerHTML = content_to_load; 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" }); const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(templateContent.cloneNode(true)); 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) { 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) if (!old_content)
return; return;
let elements_with_class = find_elements_by_class(new_content, "content_html"); 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"); 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); elements_to_fill.forEach(el => el.outerHTML = old_content);
} }
function find_elements_by_class(html_collection, class_to_find) { 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) { for (element of html_collection) {
if (element.nodeName === "STYLE") if (element.nodeName === "STYLE")
continue; 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) { 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 = []; let matching_elements = [];
if (!data_to_compare) if (!data_to_compare)
return matching_elements; 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) { 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 class_target = element.dataset.class_target;
// --
let new_class = element.dataset.new_class; let new_class = element.dataset.new_class;
// --
if (!class_target) if (!class_target)
return; return;
if (!new_class) if (!new_class)
@@ -95,53 +55,13 @@ function transfert_class(element, new_content) {
elements_with_class.forEach(el => el.classList.add(new_class)); 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) { function replace_html(element_to_replace, content_to_load) {
let old_content = element_to_replace.innerHTML; 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); 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; let target_name = element_to_replace.dataset.path_target;
// target_name :
// banner
transfert_class(element_to_replace, new_content); 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); // console.log("new_content: ", new_content);
fill_content(new_content, old_content, target_name); fill_content(new_content, old_content, target_name);
// new_content :
// old_content :
// target_name :
element_to_replace.replaceWith(...new_content); element_to_replace.replaceWith(...new_content);
}; };

185
test_template_slots/index.html
View File

@@ -1,185 +0,0 @@
<!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
View File

@@ -1,18 +0,0 @@
<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
View File

@@ -1,18 +0,0 @@
<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
View File

@@ -1,38 +0,0 @@
<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>