erased everything to set up a clean new master branch
This commit is contained in:
asus
@@ -1,9 +0,0 @@
|
|||||||
<div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
|
|
||||||
|
|
||||||
<pre class="banner" data-class_target="banner">
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
<pre>
|
|
||||||
•
|
|
||||||
•• ••••• •••••
|
|
||||||
••• • • • • ••
|
|
||||||
•••• • •••• • • • •
|
|
||||||
•• •• • • • • • • • •
|
|
||||||
•• •• • • • ••• •••••
|
|
||||||
•• •• • •• •
|
|
||||||
•• •• • •• •
|
|
||||||
•• ••••••••• • • •
|
|
||||||
•• •• • •••• ••••• •
|
|
||||||
•• •• • • • • • • •
|
|
||||||
•• •• • • • • •• • •
|
|
||||||
•••• • •• •• •• •
|
|
||||||
••• • ••••••• • • •••
|
|
||||||
•• • • •••••
|
|
||||||
•••••••• • • •
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
<pre>
|
|
||||||
•••• •
|
|
||||||
• • •
|
|
||||||
• • •
|
|
||||||
• •••
|
|
||||||
•••••
|
|
||||||
• •
|
|
||||||
• •
|
|
||||||
• •
|
|
||||||
••• •••
|
|
||||||
• • • •
|
|
||||||
• • • •
|
|
||||||
•••• ••••
|
|
||||||
• • • • •
|
|
||||||
••• • • •
|
|
||||||
••••••••
|
|
||||||
•
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
<pre>
|
|
||||||
•
|
|
||||||
•
|
|
||||||
•• •
|
|
||||||
• • •••••••
|
|
||||||
• •• • •
|
|
||||||
• ••••• • • • •
|
|
||||||
• • • • • •
|
|
||||||
• • •• •
|
|
||||||
• • • •
|
|
||||||
••• •• ••
|
|
||||||
• •• • •
|
|
||||||
• ••••
|
|
||||||
•• •
|
|
||||||
•
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
@@ -1,252 +0,0 @@
|
|||||||
|
|
||||||
<load-html data-path="ascii_elements/mouse_container.html">
|
|
||||||
<div slot part="mouse_div">
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</load-html>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
• -
|
|
||||||
•• • -- - ••
|
|
||||||
• • • - - - • • •
|
|
||||||
••••••••• --------- •• •
|
|
||||||
• • •• - - -- • • •
|
|
||||||
• • • - - - • • • •
|
|
||||||
••••• • • • ----- - - - ••••• • ••
|
|
||||||
• • •• • - - -- - • • •••••••••
|
|
||||||
• • - - • • •
|
|
||||||
• • •• - - -- •• • ••• •
|
|
||||||
• • • • - - - - • • • •
|
|
||||||
• •• • - -- - • •• • •
|
|
||||||
••• •••• --- ---- ••• ••••
|
|
||||||
-->
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* *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>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
|
|
||||||
<div class="mouse_container">
|
|
||||||
<slot class="content_html"></slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.mouse_container {
|
|
||||||
position: relative;
|
|
||||||
margin-left: 0px;
|
|
||||||
display: contents;
|
|
||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<pre>
|
|
||||||
• • • • ••••• ••••• • ••• • • • •
|
|
||||||
• • • • • • • • • • •• •• • •
|
|
||||||
••••• • • • •• • • • ••••• • • • •
|
|
||||||
• • • • • • • • • • • • • •
|
|
||||||
• • ••••• ••••• ••••• ••••• • • • • •
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
90
index.html
90
index.html
@@ -1,90 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr" dir="ltr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<!-- create "fake" favicon : https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests -->
|
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
||||||
<title>hugulumu.fr</title>
|
|
||||||
<meta name="description" content="site web de hugo lamy, developpeur">
|
|
||||||
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
|
|
||||||
<!--
|
|
||||||
<link href="./style.css" type="text/css" rel="stylesheet">
|
|
||||||
-->
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
body * {
|
|
||||||
display: flex;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
script, style {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
p, pre {
|
|
||||||
line-height: 0.8;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
margin: 10px 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<load-html data-path="ascii_elements/name.html"></load-html>
|
|
||||||
<load-html data-path="ascii_elements/mouse_1.html"></load-html>
|
|
||||||
<load-html data-path="ascii_elements/mouse_2.html"></load-html>
|
|
||||||
<load-html data-path="ascii_elements/mouse_3.html"></load-html>
|
|
||||||
<load-html data-path="ascii_elements/mouse_4.html"></load-html>
|
|
||||||
|
|
||||||
<load-html data-path="ascii_elements/banner_1.html"></load-html>
|
|
||||||
|
|
||||||
<pre class="banner reverse t1_0">
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
</pre>
|
|
||||||
<div class="insert_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
|
|
||||||
<pre class="banner t0_5">
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
</pre>
|
|
||||||
<pre class="banner anime reverse">
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
#!/bin/bash
|
|
||||||
|
|
||||||
# Define the file to watch
|
|
||||||
file_to_watch="./"
|
|
||||||
|
|
||||||
# Watch for modification events on the file continuously, with a minimum interval of 1s
|
|
||||||
last_modified=0
|
|
||||||
while read -r directory events filename; do
|
|
||||||
current_time=$(date +%s) # Get the current time in seconds
|
|
||||||
|
|
||||||
if [ "$current_time" -gt "$last_modified" ]; then
|
|
||||||
last_modified=$current_time
|
|
||||||
echo "$current_time - The file $filename was modified."
|
|
||||||
fi
|
|
||||||
done < <(inotifywait -q --monitor --event modify "$file_to_watch")
|
|
||||||
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
|
|
||||||
|
|
||||||
customElements.define(
|
|
||||||
"load-html",
|
|
||||||
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;
|
|
||||||
//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));
|
|
||||||
}
|
|
||||||
|
|
||||||
fetch(path)
|
|
||||||
.then(response => response.text())
|
|
||||||
.then(load_content)
|
|
||||||
.catch(error => console.log('Error:', error));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
@@ -1,89 +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 fill_content(new_content, old_content, target_name) {
|
|
||||||
if (!old_content)
|
|
||||||
return;
|
|
||||||
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;
|
|
||||||
return element.getElementsByClassName(class_to_find);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
|
||||||
|
|
||||||
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_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));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user