File "mistral05.html"
Full Path: /home/analogde/www/2024_PHP_13_01_2025/mistral05.html
File size: 4.78 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree Viewer</title>
<style>
ul {
list-style-type: none;
}
.file-icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: blue;
margin-right: 5px;
}
.version-icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: green;
margin-right: 5px;
}
.context-menu {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.context-menu-item {
padding: 10px;
cursor: pointer;
}
.context-menu-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul id="tree"></ul>
<div id="contextMenu" class="context-menu">
<div class="context-menu-item" data-action="option1">Option 1</div>
<div class="context-menu-item" data-action="option2">Option 2</div>
<div class="context-menu-item" data-action="option3">Option 3</div>
<div class="context-menu-item" data-action="option4">Option 4</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'script.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
const tree = document.getElementById('tree');
for (const [fileName, versions] of Object.entries(data)) {
const li = document.createElement('li');
const fileIcon = document.createElement('span');
fileIcon.className = 'file-icon';
li.appendChild(fileIcon);
li.appendChild(document.createTextNode(fileName));
const versionsUl = document.createElement('ul');
versionsUl.style.display = 'none';
versions.forEach(version => {
const versionLi = document.createElement('li');
const versionIcon = document.createElement('span');
versionIcon.className = 'version-icon';
versionLi.appendChild(versionIcon);
versionLi.appendChild(document.createTextNode(version));
versionsUl.appendChild(versionLi);
versionLi.addEventListener('contextmenu', function(event) {
event.preventDefault();
const contextMenu = document.getElementById('contextMenu');
contextMenu.style.display = 'block';
contextMenu.style.left = event.pageX + 'px';
contextMenu.style.top = event.pageY + 'px';
contextMenu.dataset.fileName = fileName;
contextMenu.dataset.version = version;
});
});
li.appendChild(versionsUl);
tree.appendChild(li);
li.addEventListener('click', function(event) {
if (event.target === li || event.target === fileIcon) {
const display = versionsUl.style.display === 'none' ? 'block' : 'none';
versionsUl.style.display = display;
}
});
}
}
};
xhr.send();
document.addEventListener('click', function() {
console.log("aaaaaaTRACE");
const contextMenu = document.getElementById('contextMenu');
contextMenu.style.display = 'none';
});
document.getElementById('contextMenu').addEventListener('click', function(event) {
if (event.target.classList.contains('context-menu-item')) {
const action = event.target.dataset.action;
const fileName = this.dataset.fileName;
const version = this.dataset.version;
alert(`Action: ${action}\nFile: ${fileName}\nVersion: ${version}`);
}
});
});
</script>
</body>
</html>