From 205ba8acd8c1b77f0877b14b4476b97001122d73 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Sat, 28 Oct 2023 13:32:28 +0200
Subject: [PATCH] create relation between inserted and surounded html

---
 ascii_elements/mouse_4.html     |  2 +-
 ascii_elements/mouse_frame.html |  9 ++--
 index.html                      | 12 ++---
 scripts/insert_html.js          | 80 ---------------------------------
 scripts/load_html.js            | 57 +++++++++++++++++++++++
 5 files changed, 67 insertions(+), 93 deletions(-)
 delete mode 100644 scripts/insert_html.js
 create mode 100644 scripts/load_html.js
diff --git a/ascii_elements/mouse_4.html b/ascii_elements/mouse_4.html
index 0834e2f..fcaedd5 100644
--- a/ascii_elements/mouse_4.html
+++ b/ascii_elements/mouse_4.html
@@ -1,5 +1,5 @@
 
-<div class="insert_html" data-path="ascii_elements/mouse_frame.html">
+<div class="load_html" data-path="ascii_elements/mouse_frame.html" data-target="mouse_frame">
 
 <pre class="mouse f1">
                  •      
diff --git a/ascii_elements/mouse_frame.html b/ascii_elements/mouse_frame.html
index ad31e78..0f92d18 100644
--- a/ascii_elements/mouse_frame.html
+++ b/ascii_elements/mouse_frame.html
@@ -1,13 +1,10 @@
 
-<div class="mouse_frame">
-	<div class="content_html"></div>
-</div>
-<div class="test">
-	<p class="content_html"></p>
+<div class="mouse_container">
+	<div class="content_html" data-name="mouse_frame"></div>
 </div>
 
 <style>
-	.mouse_frame {
+	.mouse_container {
 		position: relative;
 		margin-left: 0px;
 		/*
diff --git a/index.html b/index.html
index 7acc9cc..5f8c6eb 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
 		<meta name="keywords" content="truc, bidule, chouette">
 		<link href="./style.css" type="text/css" rel="stylesheet">
 		-->
-		<script type="text/javascript" src="./scripts/insert_html.js" defer></script>
+		<script type="text/javascript" src="./scripts/load_html.js" defer></script>
 		<style>
 			body {
 				overflow-x: hidden;
@@ -90,11 +90,11 @@
 	</head>
 	<body>
 
-<div class="insert_html" data-path="ascii_elements/name.html"></div>
-<div class="insert_html" data-path="ascii_elements/mouse_1.html"></div>
-<div class="insert_html" data-path="ascii_elements/mouse_2.html"></div>
-<div class="insert_html" data-path="ascii_elements/mouse_3.html"></div>
-<div class="insert_html" data-path="ascii_elements/mouse_4.html"></div>
+<div class="load_html" data-path="ascii_elements/name.html"></div>
+<div class="load_html" data-path="ascii_elements/mouse_1.html"></div>
+<div class="load_html" data-path="ascii_elements/mouse_2.html"></div>
+<div class="load_html" data-path="ascii_elements/mouse_3.html"></div>
+<div class="load_html" data-path="ascii_elements/mouse_4.html"></div>
 
 <pre class="banner reverse">
 •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
diff --git a/scripts/insert_html.js b/scripts/insert_html.js
deleted file mode 100644
index cb646dd..0000000
--- a/scripts/insert_html.js
+++ /dev/null
@@ -1,80 +0,0 @@
-
-// 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 find_class_in_htmlcollection(elements) {
-	let content_elements = [];
-	for (element of elements) {
-		if (element.nodeName === "STYLE")
-			continue;
-		if (element.nodeName === "SCRIPT")
-			continue;
-		let result = element.getElementsByClassName("content_html");
-		if (result.length > 0) {
-			// for the moment only deal with 1 :
-			return result[0];
-			content_elements = content_elements.concat(Array.from(result));
-		}
-	}
-	//return content_elements;
-	return "";
-}
-
-function replace_html(element, content) {
-//	console.log("element: ", element);
-//	console.log("element.childNodes: ", element.childNodes);
-//	console.log("element.getElementsByClassName('content'): ", element.getElementsByClassName('content'));
-
-	let old_content = element.innerHTML;
-	let new_elements = deserialize_html(content);
-	//console.log("new_elements: ", new_elements);
-	let content_elements = find_class_in_htmlcollection(new_elements);
-	if (content_elements) {
-		console.log("new_elements1: ", new_elements[0].outerHTML);
-		console.log("content_elements: ", content_elements);
-		console.log("old_content: ", old_content);
-		content_elements.outerHTML = old_content;
-		console.log("new_elements2: ", new_elements[0].outerHTML);
-	}
-
-//	let previous_content = element.innerHTML;
-//	console.log("previous_content: ", previous_content);
-//	console.log("element: ", element);
-//	element.outerHTML = content;
-	element.replaceWith(...new_elements);
-
-//	console.log("temp_element: ", temp_element);
-//	tmp_element.insertAdjacentText('beforeend', previous_content);
-//	console.log("temp_element: ", temp_element);
-
-//	element.insertAdjacentHTML('beforebegin', data)
-//	element.innerHTML = data
-//	element.outerHTML = data
-};
-
-function insert_html() {
-	let elements = document.getElementsByClassName("insert_html");
-	for (let element of elements) {
-		let path = (element.dataset.path);
-		fetch(path)
-			.then(response => response.text())
-			.then(data => replace_html(element, data))
-			.catch(error => console.log('Error:', error));
-		//element.classList.replace("insert_html", "inserted_html");
-	};
-}
-
-// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
-const callback = (mutation_list, observer) => insert_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);
diff --git a/scripts/load_html.js b/scripts/load_html.js
new file mode 100644
index 0000000..7b4607e
--- /dev/null
+++ b/scripts/load_html.js
@@ -0,0 +1,57 @@
+
+// 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 find_class_in_htmlcollection(elements, target_name) {
+	for (element of elements) {
+		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 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;
+
+	element.replaceWith(...new_elements);
+};
+
+function load_html() {
+	let elements = document.getElementsByClassName("load_html");
+	for (let element of elements) {
+		let path = (element.dataset.path);
+		fetch(path)
+			.then(response => response.text())
+			.then(content => replace_html(element, content))
+			.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);
+
