From 138711c08296557c6afc0500e5fda7136f4711ee Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Fri, 3 Nov 2023 10:29:50 +0100
Subject: [PATCH] modif of the script to use html templates and slots with
 shadow DOM

---
 ascii_elements/mouse_4.html         |   2 +-
 ascii_elements/mouse_container.html |   1 +
 scripts/load_html.js                |  28 ++++-
 scripts/old_load_html.js            |  80 ------------
 test_template_slots/index.html      | 185 ----------------------------
 test_template_slots/test.html       |  18 ---
 test_template_slots/test_2.html     |  18 ---
 test_template_slots/test_3.html     |  38 ------
 8 files changed, 28 insertions(+), 342 deletions(-)
 delete mode 100644 test_template_slots/index.html
 delete mode 100644 test_template_slots/test.html
 delete mode 100644 test_template_slots/test_2.html
 delete mode 100644 test_template_slots/test_3.html

diff --git a/ascii_elements/mouse_4.html b/ascii_elements/mouse_4.html
index ed417f8..e0da065 100644
--- a/ascii_elements/mouse_4.html
+++ b/ascii_elements/mouse_4.html
@@ -1,6 +1,6 @@
 
 <load-html data-path="ascii_elements/mouse_container.html">
-<div slot>
+<div slot part="mouse_div">
 
 <pre class="mouse f1">
                  •      
diff --git a/ascii_elements/mouse_container.html b/ascii_elements/mouse_container.html
index 0441742..98eca13 100644
--- a/ascii_elements/mouse_container.html
+++ b/ascii_elements/mouse_container.html
@@ -7,6 +7,7 @@
 	.mouse_container {
 		position: relative;
 		margin-left: 0px;
+		display: contents;
 		/*
 		border: 1px solid red;
 		margin-right: auto;
diff --git a/scripts/load_html.js b/scripts/load_html.js
index d3b04c6..046bf71 100644
--- a/scripts/load_html.js
+++ b/scripts/load_html.js
@@ -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));
 			}
diff --git a/scripts/old_load_html.js b/scripts/old_load_html.js
index 97f0f2b..13fb9c8 100644
--- a/scripts/old_load_html.js
+++ b/scripts/old_load_html.js
@@ -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);
 };
 
diff --git a/test_template_slots/index.html b/test_template_slots/index.html
deleted file mode 100644
index 1987051..0000000
--- a/test_template_slots/index.html
+++ /dev/null
@@ -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>
-
diff --git a/test_template_slots/test.html b/test_template_slots/test.html
deleted file mode 100644
index d5d762c..0000000
--- a/test_template_slots/test.html
+++ /dev/null
@@ -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>
diff --git a/test_template_slots/test_2.html b/test_template_slots/test_2.html
deleted file mode 100644
index df10e76..0000000
--- a/test_template_slots/test_2.html
+++ /dev/null
@@ -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>
-
diff --git a/test_template_slots/test_3.html b/test_template_slots/test_3.html
deleted file mode 100644
index 976c44f..0000000
--- a/test_template_slots/test_3.html
+++ /dev/null
@@ -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>