public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example .myext Editor</title>
<style>
body {
font-family: Arial, sans-serif;
position: relative;
}
#fileContent {
width: 100%;
height: 300px;
}
button {
margin-top: 10px;
}
.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.popup .close {
display: block;
text-align: right;
cursor: pointer;
}
/* New tab styling */
.tab {
display: inline-block;
padding: 10px;
background: #f1f1f1;
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
.tab.active {
background: #ddd;
}
.new-file-btn {
position: absolute;
right: 10px;
top: 10px;
background: #007bff;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Edit .myext Files</h1>
<div id="tabs"></div>
<textarea id="fileContent"></textarea>
<button onclick="saveChanges()">Save Changes</button>
<button onclick="showPopup()">Show Function Result</button>
<button class="new-file-btn" onclick="createNewFile()">New File</button>
<div id="popup" class="popup">
<div class="close" onclick="closePopup()">✖</div>
<div id="popupContent"></div>
</div>
<script>
let currentFile = 'example.myext';
// Function to create and activate a new tab
function createTab(filename) {
const tabs = document.getElementById('tabs');
const newTab = document.createElement('div');
newTab.className = 'tab';
newTab.textContent = filename;
newTab.onclick = () => {
currentFile = filename;
fetchFileContent(currentFile);
setActiveTab(newTab);
};
tabs.appendChild(newTab);
setActiveTab(newTab);
}
// Fetch and display the current file content
fetchFileContent(currentFile);
createTab(currentFile);
function fetchFileContent(filename) {
fetch(`/${filename}`)
.then(response => response.text())
.then(data => {
document.getElementById('fileContent').value = data;
});
}
function saveChanges() {
const content = document.getElementById('fileContent').value;
fetch(`/${currentFile}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: content })
})
.then(response => response.text())
.then(data => {
alert('File saved successfully');
})
.catch(err => {
alert('Error saving file');
});
}
function showPopup() {
const result = myCustomFunction();
document.getElementById('popupContent').textContent = result;
document.getElementById('popup').style.display = 'block';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
function myCustomFunction() {
return 'Custom function executed!';
}
function createNewFile() {
const newFileName = prompt('Enter the name for the new file:', 'example1.myext');
if (newFileName) {
currentFile = newFileName;
createTab(newFileName);
fetchFileContent(newFileName);
}
}
function setActiveTab(tab) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
}
</script>
</body>
</html>
server.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example .myext Editor</title>
<style>
body {
font-family: Arial, sans-serif;
position: relative;
}
#fileContent {
width: 100%;
height: 300px;
}
button {
margin-top: 10px;
}
.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.popup .close {
display: block;
text-align: right;
cursor: pointer;
}
/* New tab styling */
.tab {
display: inline-block;
padding: 10px;
background: #f1f1f1;
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
.tab.active {
background: #ddd;
}
.new-file-btn {
position: absolute;
right: 10px;
top: 10px;
background: #007bff;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Edit .myext Files</h1>
<div id="tabs"></div>
<textarea id="fileContent"></textarea>
<button onclick="saveChanges()">Save Changes</button>
<button onclick="showPopup()">Show Function Result</button>
<button class="new-file-btn" onclick="createNewFile()">New File</button>
<div id="popup" class="popup">
<div class="close" onclick="closePopup()">✖</div>
<div id="popupContent"></div>
</div>
<script>
let currentFile = 'example.myext';
// Function to create and activate a new tab
function createTab(filename) {
const tabs = document.getElementById('tabs');
const newTab = document.createElement('div');
newTab.className = 'tab';
newTab.textContent = filename;
newTab.onclick = () => {
currentFile = filename;
fetchFileContent(currentFile);
setActiveTab(newTab);
};
tabs.appendChild(newTab);
setActiveTab(newTab);
}
// Fetch and display the current file content
fetchFileContent(currentFile);
createTab(currentFile);
function fetchFileContent(filename) {
fetch(`/${filename}`)
.then(response => response.text())
.then(data => {
document.getElementById('fileContent').value = data;
});
}
function saveChanges() {
const content = document.getElementById('fileContent').value;
fetch(`/${currentFile}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: content })
})
.then(response => response.text())
.then(data => {
alert('File saved successfully');
})
.catch(err => {
alert('Error saving file');
});
}
function showPopup() {
const result = myCustomFunction();
document.getElementById('popupContent').textContent = result;
document.getElementById('popup').style.display = 'block';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
function myCustomFunction() {
return 'Custom function executed!';
}
function createNewFile() {
const newFileName = prompt('Enter the name for the new file:', 'example1.myext');
if (newFileName) {
currentFile = newFileName;
createTab(newFileName);
fetchFileContent(newFileName);
}
}
function setActiveTab(tab) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
}
</script>
</body>
</html>
Top comments (0)