perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

trying to make it work for all subchilds

Browse Source
This commit is contained in:
asus
2023-10-28 20:52:21 +02:00
parent 205ba8acd8
commit 2d1a84eff6
7 changed files with 291 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
README.md
View File

@@ -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 ?

9
ascii_elements/banner_1.html Normal file
View File

@@ -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>

57
ascii_elements/banner_container.html Normal file
View File

@@ -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>

2
ascii_elements/mouse_4.html
View File

@@ -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">
•

2
ascii_elements/mouse_frame.html → ascii_elements/mouse_container.html
View File

@@ -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>

62
index.html
View File

@@ -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">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre>
<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="reverse" data-class_target="banner"></div>
<pre class="banner reverse t1_0">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
@@ -115,11 +63,7 @@
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre>
<pre class="banner t1_5">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
</pre>
<div class="load_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
<pre class="banner t0_5">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

67
scripts/load_html.js
View File

@@ -9,40 +9,69 @@ function deserialize_html(html) {
//return template.content.childNodes;
}
function find_class_in_htmlcollection(elements, target_name) {
for (element of elements) {
function fill_content(new_content, old_content, target_name) {
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");
for (result of results) {
let data_name = result.dataset.name;
if (target_name === data_name)
return result;
}
return element.getElementsByClassName(class_to_find);
}
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;
function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
let matching_elements = [];
if (!data_to_compare)
return matching_elements;
for (element of html_collection) {
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) {
let path = (element.dataset.path);
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 => replace_html(element, content))
.then(content_to_load => replace_html(element_to_replace, content_to_load))
.catch(error => console.log('Error:', error));
};
}