trying to make it work for all subchilds

README.md

@@ -1,3 +1,175 @@
 start it with a server, like : `alive-server`
 - https://www.npmjs.com/package/alive-server
 - install : `npm install -g alive-server`
+
+---
+
+function replaceHtml(elementToReplace, contentToLoad) {
+	let oldContent = elementToReplace.innerHTML;
+	let newContent = deserialize_html(contentToLoad);
+	let targetName = elementToReplace.dataset.target;
+	let contentElement = findClassInHtmlcollection(newContent, targetName);
+	if (contentElement)
+		content_element.outerHTML = oldContent;
+
+	elementToReplace.replaceWith(...newContent);
+};
+
+function loadHtml() {
+	let elements = document.getElementsByClassName("load_html");
+	for (let elementToReplace of elements) {
+		let path = (elementToReplace.dataset.path);
+		fetch(path)
+			.then(response => response.text())
+			.then(contentToLoad => replaceHtml(elementToReplace, contentToLoad))
+			.catch(error => console.log('Error:', error));
+	};
+}
+
+---
+
+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.target;
+	let content_element = find_class_in_htmlcollection(new_content, target_name);
+	if (content_element)
+		content_element.outerHTML = old_content;
+
+	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);
+		fetch(path)
+			.then(response => response.text())
+			.then(content_to_load => replace_html(element_to_replace, content_to_load))
+			.catch(error => console.log('Error:', error));
+	};
+}
+
+---
+
+https://www.youtube.com/watch?v=elt5zpcTlOE
+
+01. 00:00:00 Flowers (Miley Cyrus, 2022)
+02. 00:03:11 Calm Down (Rema, Selena Gomez)
+03. 00:07:07 Dusk Till Dawn (Zayn, Sia, cover ?)
+04. 00:10:17 Old Town Road (Lil Nas X, Billy Ray Cyrus, Jatayu cover)
+05. 00:12:47 Stay (The Kid Laroi, Justin Bieber, cover ?)
+06. 00:15:07 Kill Bill (Sza, cover ?)
+07. 00:17:41 Treat You Better (Shawn Mendes, cover ?)
+08. 00:20:34 We Don't Talk Anymore ()
+09. 00:23:35 Unstoppable ()
+10. 00:27:21 See You Again ()
+11. 00:30:11 24K Magic - Bruno Mars ()
+12. 00:33:39 Bad Habits ()
+13. 00:36:39 This Is What You Came For ()
+14. 00:40:35 Sugar ()
+15. 00:44:28 Side to Sise ()
+16. 00:47:58 Im The One ()
+17. 00:51:10 Sorry - Justin Bieber ()
+18. 00:54:16 Wthout Me - Halsey ()
+19. 00:55:57 Lose You To Love Me ()
+20. 00:58:08 Work From Home ()
+21. 01:00:35 Havana ()
+22. 01:02:54 Shivers ()
+23. 01:06:24 Save Your Tears ()
+24. 01:09:59 Peaches ()
+25. 01:12:01 Cheap Thrills ()
+26. 01:13:57 Rihanna - Work ()
+27. 01:17:23 Easy On Me ()
+28. 01:21:01 Señorita - Shawn Mendes ()
+29. 01:24:11 New Rules ()
+30. 01:27:40 The Greatest - Sia ()
+31. 01:29:50 Shape Of You ()
+32. 01:33:12 Attention ()
+33. 01:36:25 Monsters ()
+34. 01:37:52 Good 4 U ()
+35. 01:41:38 Faded ()
+36. 01:45:06 Send My Love ()
+37. 01:48:43 What About Us ()
+38. 01:53:14 Let Me Love You ()
+39. 01:56:48 I Don't Care ()
+40. 01:59:47 There's Nothing Holding Me Back ()
+41. 02:03:07
+42. 02:05:48
+43. 02:07:30
+44. 02:10:23
+45. 02:13:13
+46. 02:16:30
+47. 02:18:38
+48. 02:23:26
+49. 02:26:39
+50. 02:29:18
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+
+01. 00:00:00 Flowers
+02. 00:03:11 Calm Down
+03. 00:07:07 Dusk Till Dawn
+04. 00:10:17 Old Town Road
+05. 00:12:47 Stay
+06. 00:15:07 Kill Bill
+07. 00:17:41 Treat You Better
+08. 00:20:34 We Don't Talk Anymore
+09. 00:23:35 Unstoppable
+10. 00:27:21 See You Again
+11. 00:30:11 24K Magic
+12. 00:33:39 Bad Habits
+13. 00:36:39 This Is What You Came For
+14. 00:40:35 Sugar
+15. 00:44:28 Side to Sise
+16. 00:47:58 Im The One
+17. 00:51:10 Sorry
+18. 00:54:16 Wthout Me
+19. 00:55:57 Lose You To Love Me
+20. 00:58:08 Work From Home
+21. 01:00:35 Havana
+22. 01:02:54 Shivers
+23. 01:06:24 Save Your Tears
+24. 01:09:59 Peaches
+25. 01:12:01 Cheap Thrills
+26. 01:13:57 Work
+27. 01:17:23 Easy On Me
+28. 01:21:01 Señorita
+29. 01:24:11 New Rules
+30. 01:27:40 The Greatest
+31. 01:29:50 Shape Of You
+32. 01:33:12 Attention
+33. 01:36:25 Monsters
+34. 01:37:52 Good 4 U
+35. 01:41:38 Faded
+36. 01:45:06 Send My Love
+37. 01:48:43 What About Us
+38. 01:53:14 Let Me Love You
+39. 01:56:48 I Don't Care
+40. 01:59:47 There's Nothing Holding Me Back
+41. 02:03:07 ?
+42. 02:05:48 ?
+43. 02:07:30 ?
+44. 02:10:23 ?
+45. 02:13:13 ?
+46. 02:16:30 ?
+47. 02:18:38 ?
+48. 02:23:26 ?
+49. 02:26:39 ?
+50. 02:29:18 ?
+

ascii_elements/banner_1.html

@@ -0,0 +1,9 @@
+<div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
+
+<pre class="banner" data-class_target="banner">
+•   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
+ • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
+  •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
+</pre>
+
+</div>

ascii_elements/banner_container.html

@@ -0,0 +1,57 @@
+
+<div class="banner_container">
+	<div class="content_html" data-path_target="banner"></div>
+</div>
+
+<style>
+	div.banner {
+		flex-wrap: wrap;
+		overflow: hidden;
+		width: 99vw;
+		margin: 10px 0px;
+	}
+	div.smallbanner {
+		height: 3.5ex;
+	}
+	div.bigbanner {
+		height: 21.5ex;
+	}
+	div.banner * {
+		margin: 0px;
+	}
+	div.banner p {
+		white-space: pre;
+	}
+	div.banner br {
+		display: block;
+	}
+	pre.banner {
+		position: relative;
+		margin-left: -100px;
+		animation-name: slide;
+		animation-iteration-count: infinite;
+		animation-duration: 2s;
+		animation-timing-function: linear;
+		animation-direction: normal;
+	}
+	pre.banner.pause {
+		animation-play-state: paused;
+	}
+	pre.banner.reverse {
+		animation-direction: reverse;
+	}
+	pre.banner.t0_5 {
+		animation-duration: 0.5s;
+	}
+	pre.banner.t1_0 {
+		animation-duration: 1s;
+	}
+	pre.banner.t1_5 {
+		animation-duration: 1.5s;
+	}
+	@keyframes slide {
+		from {left:0;}
+		to {left:2.4em;}
+	}
+</style>
+

ascii_elements/mouse_4.html

@@ -1,5 +1,5 @@
 
-<div class="load_html" data-path="ascii_elements/mouse_frame.html" data-target="mouse_frame">
+<div class="load_html" data-path="ascii_elements/mouse_container.html" data-path_target="mouse_frame">
 
 <pre class="mouse f1">
                  •      

ascii_elements/mouse_container.html

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

index.html

@@ -37,55 +37,6 @@
 			pre {
 				margin: 10px 0px;
 			}
-			div.banner {
-				flex-wrap: wrap;
-				overflow: hidden;
-				width: 99vw;
-				margin: 10px 0px;
-			}
-			div.smallbanner {
-				height: 3.5ex;
-			}
-			div.bigbanner {
-				height: 21.5ex;
-			}
-			div.banner * {
-				margin: 0px;
-			}
-			div.banner p {
-				white-space: pre;
-			}
-			div.banner br {
-				display: block;
-			}
-			pre.banner {
-				position: relative;
-				margin-left: -100px;
-				animation-name: slide;
-				animation-iteration-count: infinite;
-				animation-duration: 2s;
-				animation-timing-function: linear;
-				animation-direction: normal;
-			}
-			pre.banner.pause {
-				animation-play-state: paused;
-			}
-			pre.banner.reverse {
-				animation-direction: reverse;
-			}
-			pre.banner.t0_5 {
-				animation-duration: 0.5s;
-			}
-			pre.banner.t1_0 {
-				animation-duration: 1s;
-			}
-			pre.banner.t1_5 {
-				animation-duration: 1.5s;
-			}
-			@keyframes slide {
-				from {left:0;}
-				to {left:2.4em;}
-			}
 		</style>
 	</head>
 	<body>
@@ -96,11 +47,8 @@
 <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">
+<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div>
-•   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
+
- • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
-  •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
-</pre>
 <pre class="banner reverse t1_0">
   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
@@ -115,11 +63,7 @@
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
 </pre>
-<pre class="banner t1_5">
+<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
-•   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
- • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
-  •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
-</pre>
 <pre class="banner t0_5">
 •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

scripts/load_html.js

@@ -9,40 +9,69 @@ function deserialize_html(html) {
 	//return template.content.childNodes;
 }
 
-function find_class_in_htmlcollection(elements, target_name) {
+function fill_content(new_content, old_content, target_name) {
-	for (element of elements) {
+	let elements_with_class = find_elements_by_class(new_content, "content_html");
+	let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
+	elements_to_fill.forEach(el => el.outerHTML = old_content);
+}
+
+function find_elements_by_class(html_collection, class_to_find) {
+	for (element of html_collection) {
 		if (element.nodeName === "STYLE")
 			continue;
 		if (element.nodeName === "SCRIPT")
 			continue;
-		let results = element.getElementsByClassName("content_html");
+		return element.getElementsByClassName(class_to_find);
-		for (result of results) {
-			let data_name = result.dataset.name;
-			if (target_name === data_name)
-				return result;
-		}
 	}
 	return null;
 }
 
-function replace_html(element, content) {
+function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
-	let old_content = element.innerHTML;
+	let matching_elements = [];
-	let new_elements = deserialize_html(content);
+	if (!data_to_compare)
-	let target_name = element.dataset.target;
+		return matching_elements;
-	let content_elements = find_class_in_htmlcollection(new_elements, target_name);
+	for (element of html_collection) {
-	if (content_elements)
-		content_elements.outerHTML = old_content;
 
-	element.replaceWith(...new_elements);
+		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) {
+	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 of elements) {
+	for (let element_to_replace of elements) {
-		let path = (element.dataset.path);
+		let path = (element_to_replace.dataset.path);
+		if (!path)
+			continue;
 		fetch(path)
 			.then(response => response.text())
-			.then(content => replace_html(element, content))
+			.then(content_to_load => replace_html(element_to_replace, content_to_load))
 			.catch(error => console.log('Error:', error));
 	};
 }