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

create relation between inserted and surounded html

Browse Source
This commit is contained in:
asus
2023-10-28 13:32:28 +02:00
parent 8c4479b9bc
commit 205ba8acd8
5 changed files with 67 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ascii_elements/mouse_4.html
View File

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

9
ascii_elements/mouse_frame.html
View File

@@ -1,13 +1,10 @@
<div class="mouse_frame">
<div class="content_html"></div>
</div>
<div class="test">
<p class="content_html"></p>
<div class="mouse_container">
<div class="content_html" data-name="mouse_frame"></div>
</div>
<style>
.mouse_frame {
.mouse_container {
position: relative;
margin-left: 0px;
/*

12
index.html
View File

@@ -17,7 +17,7 @@
<meta name="keywords" content="truc, bidule, chouette">
<link href="./style.css" type="text/css" rel="stylesheet">
-->
<script type="text/javascript" src="./scripts/insert_html.js" defer></script>
<script type="text/javascript" src="./scripts/load_html.js" defer></script>
<style>
body {
overflow-x: hidden;
@@ -90,11 +90,11 @@
</head>
<body>
<div class="insert_html" data-path="ascii_elements/name.html"></div>
<div class="insert_html" data-path="ascii_elements/mouse_1.html"></div>
<div class="insert_html" data-path="ascii_elements/mouse_2.html"></div>
<div class="insert_html" data-path="ascii_elements/mouse_3.html"></div>
<div class="insert_html" data-path="ascii_elements/mouse_4.html"></div>
<div class="load_html" data-path="ascii_elements/name.html"></div>
<div class="load_html" data-path="ascii_elements/mouse_1.html"></div>
<div class="load_html" data-path="ascii_elements/mouse_2.html"></div>
<div class="load_html" data-path="ascii_elements/mouse_3.html"></div>
<div class="load_html" data-path="ascii_elements/mouse_4.html"></div>
<pre class="banner reverse">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

80
scripts/insert_html.js
View File

@@ -1,80 +0,0 @@
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
function deserialize_html(html) {
let template = document.createElement('template');
template.innerHTML = html;
return template.content.children;
// use .children instead of childNodes to avoid #text elements :
// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
//return template.content.childNodes;
}
function find_class_in_htmlcollection(elements) {
let content_elements = [];
for (element of elements) {
if (element.nodeName === "STYLE")
continue;
if (element.nodeName === "SCRIPT")
continue;
let result = element.getElementsByClassName("content_html");
if (result.length > 0) {
// for the moment only deal with 1 :
return result[0];
content_elements = content_elements.concat(Array.from(result));
}
}
//return content_elements;
return "";
}
function replace_html(element, content) {
// console.log("element: ", element);
// console.log("element.childNodes: ", element.childNodes);
// console.log("element.getElementsByClassName('content'): ", element.getElementsByClassName('content'));
let old_content = element.innerHTML;
let new_elements = deserialize_html(content);
//console.log("new_elements: ", new_elements);
let content_elements = find_class_in_htmlcollection(new_elements);
if (content_elements) {
console.log("new_elements1: ", new_elements[0].outerHTML);
console.log("content_elements: ", content_elements);
console.log("old_content: ", old_content);
content_elements.outerHTML = old_content;
console.log("new_elements2: ", new_elements[0].outerHTML);
}
// let previous_content = element.innerHTML;
// console.log("previous_content: ", previous_content);
// console.log("element: ", element);
// element.outerHTML = content;
element.replaceWith(...new_elements);
// console.log("temp_element: ", temp_element);
// tmp_element.insertAdjacentText('beforeend', previous_content);
// console.log("temp_element: ", temp_element);
// element.insertAdjacentHTML('beforebegin', data)
// element.innerHTML = data
// element.outerHTML = data
};
function insert_html() {
let elements = document.getElementsByClassName("insert_html");
for (let element of elements) {
let path = (element.dataset.path);
fetch(path)
.then(response => response.text())
.then(data => replace_html(element, data))
.catch(error => console.log('Error:', error));
//element.classList.replace("insert_html", "inserted_html");
};
}
// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
const callback = (mutation_list, observer) => insert_html();
const observer = new MutationObserver(callback);
const targetNode = document.body;
const config = { attributes: true, childList: true, subtree: true };
// Start observing the target node for configured mutations
observer.observe(targetNode, config);

57
scripts/load_html.js Normal file
View File

@@ -0,0 +1,57 @@
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
function deserialize_html(html) {
let template = document.createElement('template');
template.innerHTML = html;
return template.content.children;
// use .children instead of childNodes to avoid #text elements :
// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
//return template.content.childNodes;
}
function find_class_in_htmlcollection(elements, target_name) {
for (element of elements) {
if (element.nodeName === "STYLE")
continue;
if (element.nodeName === "SCRIPT")
continue;
let results = element.getElementsByClassName("content_html");
for (result of results) {
let data_name = result.dataset.name;
if (target_name === data_name)
return result;
}
}
return null;
}
function replace_html(element, content) {
let old_content = element.innerHTML;
let new_elements = deserialize_html(content);
let target_name = element.dataset.target;
let content_elements = find_class_in_htmlcollection(new_elements, target_name);
if (content_elements)
content_elements.outerHTML = old_content;
element.replaceWith(...new_elements);
};
function load_html() {
let elements = document.getElementsByClassName("load_html");
for (let element of elements) {
let path = (element.dataset.path);
fetch(path)
.then(response => response.text())
.then(content => replace_html(element, content))
.catch(error => console.log('Error:', error));
};
}
// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
const callback = (mutation_list, observer) => load_html();
const observer = new MutationObserver(callback);
const targetNode = document.body;
const config = { attributes: true, childList: true, subtree: true };
// Start observing the target node for configured mutations
observer.observe(targetNode, config);