replace around works yeaaah

ascii_elements/mouse_4.html

@@ -1,4 +1,6 @@
 
+<div class="insert_html" data-path="ascii_elements/mouse_frame.html">
+
 <pre class="mouse f1">
                  •      
                   •     
@@ -155,6 +157,8 @@
     •••  ••••             
 </pre>
 
+</div>
+
 <!--
                 •                      -                          
          ••     •               --     -                    ••     

ascii_elements/mouse_frame.html

@@ -1,6 +1,9 @@
 
 <div class="mouse_frame">
-	<div class="insert_html" data-path="ascii_elements/mouse_4.html"></div>
+	<div class="content_html"></div>
+</div>
+<div class="test">
+	<p class="content_html"></p>
 </div>
 
 <style>

index.html

@@ -94,7 +94,7 @@
 <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_frame.html"></div>
+<div class="insert_html" data-path="ascii_elements/mouse_4.html"></div>
 
 <pre class="banner reverse">
 •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   

mouse.html

@@ -1,260 +0,0 @@
-
-<div class="mouse_frame">
-	<pre class="mouse f1">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-  •   •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f2">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-   •  •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f3">
-                  •     
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-      •       •         
-   •• •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f4">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-    • •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f5">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-   •  •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f6">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
- •    •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f7">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-•     •       •         
- •    •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-	</pre>
-	<pre class="mouse f8">
-                ••        
-                • •      •
-                 ••     •
-                 •  •   • 
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
-       •       •       •  
-••    •       •••    •   
-  •    •      •       •   
-   •   ••    •        •   
-    •••  ••••             
-	</pre>
-	<pre class="mouse f9">
-                ••        
-                • •      •
-                 ••     •
-                 •  •    •
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
- •     •       •       •  
- •     •       •••    •   
-  •    •      •       •   
-   •   ••    •         •  
-    •••  ••••             
-	</pre>
-	<pre class="mouse f10">
-                      
-                ••        
-                • •      •
-                 ••      •
-                 •  •   • 
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
-  •    •       •       •  
-  •    •       •••    •   
-  •    •      •       •   
-   •   ••    •         •  
-    •••  ••••             
-	</pre>
-</div>
-
-<style>
-	.mouse_frame {
-		position: relative;
-		margin-left: 0px;
-		/*
-		border: 1px solid red;
-		margin-right: auto;
-		height: 8.5em;
-		width: 11.9em;
-		*/
-		width: fit-content;
-	}
-	pre.mouse {
-		--tmouse: 2s;
-		position: absolute;
-		left: 0px;
-		bottom: 0px;
-		margin: 0px;
-		opacity: 0;
-		animation-name: mouse;
-		animation-iteration-count: infinite;
-		animation-duration: var(--tmouse);
-		animation-timing-function: linear;
-		animation-direction: normal;
-	}
-	pre.mouse:first-child {
-		position: relative;
-	}
-	/* *27
-	pre.mouse.f2  {animation-delay: calc(var(--tmouse) *  3.7/100);}
-	pre.mouse.f3  {animation-delay: calc(var(--tmouse) *  7.4/100);}
-	pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 11.1/100);}
-	pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 14.8/100);}
-	pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 18.5/100);}
-	pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 22.2/100);}
-	pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 25.9/100);}
-	pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 29.6/100);}
-	pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 33.3/100);}
-	pre.mouse.f11 {animation-delay: calc(var(--tmouse) *   37/100);}
-	pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 40.7/100);}
-	pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 44.4/100);}
-	pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 48.1/100);}
-	pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 51.8/100);}
-	pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 55.5/100);}
-	pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 59.2/100);}
-	pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 62.9/100);}
-	pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 66.6/100);}
-	pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 70.3/100);}
-	pre.mouse.f21 {animation-delay: calc(var(--tmouse) *   74/100);}
-	pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 77.7/100);}
-	pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 81.4/100);}
-	pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 85.1/100);}
-	pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 88.8/100);}
-	pre.mouse.f26 {animation-delay: calc(var(--tmouse) * 92.5/100);}
-	pre.mouse.f27 {animation-delay: calc(var(--tmouse) * 96.2/100);}
-	*/
-	/* *25
-	pre.mouse.f2  {animation-delay: calc(var(--tmouse) *  4/100);}
-	pre.mouse.f3  {animation-delay: calc(var(--tmouse) *  8/100);}
-	pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 12/100);}
-	pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 16/100);}
-	pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 20/100);}
-	pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 24/100);}
-	pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 28/100);}
-	pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 32/100);}
-	pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 36/100);}
-	pre.mouse.f11 {animation-delay: calc(var(--tmouse) * 40/100);}
-	pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 44/100);}
-	pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 48/100);}
-	pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 52/100);}
-	pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 56/100);}
-	pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 60/100);}
-	pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 64/100);}
-	pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 68/100);}
-	pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 72/100);}
-	pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 76/100);}
-	pre.mouse.f21 {animation-delay: calc(var(--tmouse) * 80/100);}
-	pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 84/100);}
-	pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 88/100);}
-	pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 92/100);}
-	pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 96/100);}
-	*/
-	/* *10
-	*/
-	pre.mouse.f2  {animation-delay: calc(var(--tmouse) * 10/100);}
-	pre.mouse.f3  {animation-delay: calc(var(--tmouse) * 20/100);}
-	pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 30/100);}
-	pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 40/100);}
-	pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 50/100);}
-	pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 60/100);}
-	pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 70/100);}
-	pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 80/100);}
-	pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
-	@keyframes mouse {
-		0%    {opacity: 1;}
-		10%   {opacity: 1;}
-		10.1% {opacity: 0;}
-		100%  {opacity: 0;}
-	}
-</style>
-

scripts/insert_html.js

@@ -1,12 +1,73 @@
+
+// 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 => element.innerHTML = data)
+			.then(data => replace_html(element, data))
 			.catch(error => console.log('Error:', error));
-		element.classList.replace("insert_html", "inserted_html");
+		//element.classList.replace("insert_html", "inserted_html");
 	};
 }