add embed functionality

This commit is contained in:
rintyuu 2024-12-03 21:35:53 -08:00
parent 7c1c7f6582
commit 1185a97b58

View file

@ -1,16 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Notepad</title> <title>Notepad</title>
<style> <style>
/* Styles for draggable windows */
.window { .window {
position: absolute; position: absolute;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #fff; background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Drop shadow */ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
} }
.title-bar { .title-bar {
background-color: #f0f0f0; background-color: #f0f0f0;
@ -30,6 +29,12 @@
width: 300px; width: 300px;
height: 200px; height: 200px;
} }
.embed-area {
width: 100%;
height: 100%;
border: none;
display: none;
}
.dropdown { .dropdown {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -40,7 +45,7 @@
background-color: #f9f9f9; background-color: #f9f9f9;
min-width: 100px; min-width: 100px;
z-index: 1; z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Drop shadow */ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
} }
.dropdown-content button { .dropdown-content button {
color: black; color: black;
@ -56,97 +61,111 @@
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; display: block;
} }
.top-left {
/* position: absolute; */
top: 5px;
left: 5px;
}
</style> </style>
</head> </head>
<body> <body>
<button onclick="createNewNotepad()">New...</button>
<button class="top-left" onclick="createNewNotepad()">New...</button> <button onclick="showHelp()">Help</button>
<button class="top-left" href="#" onclick="showHelp()">Help</button>
<script> <script>
let zIndexCounter = 1; let zIndexCounter = 1;
// Function to create a new notepad
function createNewNotepad() { function createNewNotepad() {
const notepadWindow = document.createElement('div'); const notepadWindow = document.createElement("div");
notepadWindow.className = 'window'; notepadWindow.className = "window";
notepadWindow.style.left = '50px'; notepadWindow.style.left = "50px";
notepadWindow.style.top = '50px'; notepadWindow.style.top = "50px";
notepadWindow.style.zIndex = zIndexCounter++; notepadWindow.style.zIndex = zIndexCounter++;
const titleBar = document.createElement('div'); const titleBar = document.createElement("div");
titleBar.className = 'title-bar'; titleBar.className = "title-bar";
titleBar.draggable = true; titleBar.draggable = true;
const fileDropdown = document.createElement('div'); const fileDropdown = document.createElement("div");
fileDropdown.className = 'dropdown'; fileDropdown.className = "dropdown";
const fileDropdownButton = document.createElement('button'); const fileDropdownButton = document.createElement("button");
fileDropdownButton.textContent = 'File'; fileDropdownButton.textContent = "File";
const fileDropdownContent = document.createElement('div'); const fileDropdownContent = document.createElement("div");
fileDropdownContent.className = 'dropdown-content'; fileDropdownContent.className = "dropdown-content";
const newButton = document.createElement('button');
newButton.textContent = 'New...'; const newButton = document.createElement("button");
newButton.textContent = "New...";
newButton.onclick = createNewNotepad; newButton.onclick = createNewNotepad;
const saveButton = document.createElement('button');
saveButton.textContent = 'Save'; const saveButton = document.createElement("button");
saveButton.textContent = "Save";
saveButton.onclick = function () { saveButton.onclick = function () {
saveText(notepadWindow); saveText(notepadWindow);
}; };
const openButton = document.createElement('button');
openButton.textContent = 'Open'; const openButton = document.createElement("button");
openButton.textContent = "Open";
openButton.onclick = function () { openButton.onclick = function () {
openFile(notepadWindow); openFile(notepadWindow);
}; };
const renameButton = document.createElement('button');
renameButton.textContent = 'Rename'; const renameButton = document.createElement("button");
renameButton.textContent = "Rename";
renameButton.onclick = function () { renameButton.onclick = function () {
const newTitle = prompt('Enter new title:'); const newTitle = prompt("Enter new title:");
if (newTitle !== null) { if (newTitle !== null) {
titleText.textContent = newTitle; titleText.textContent = newTitle;
} }
}; };
const closeButton = document.createElement('button');
closeButton.textContent = 'Close'; const embedButton = document.createElement("button");
embedButton.textContent = "Embed";
embedButton.onclick = function () {
const embedCode = prompt("Enter embed HTML (e.g., iframe):");
if (embedCode) {
replaceWithEmbed(notepadWindow, embedCode);
}
};
const closeButton = document.createElement("button");
closeButton.textContent = "Close";
closeButton.onclick = function () { closeButton.onclick = function () {
if (notepadWindow.querySelector('.text-area').value.trim() !== '') { const textArea = notepadWindow.querySelector(".text-area");
const confirmClose = confirm('Are you sure you want to close this notepad?'); if (textArea.value.trim() === "") {
notepadWindow.parentNode.removeChild(notepadWindow);
} else {
const confirmClose = confirm(
"Are you sure you want to close this notepad?"
);
if (confirmClose) { if (confirmClose) {
notepadWindow.parentNode.removeChild(notepadWindow); notepadWindow.parentNode.removeChild(notepadWindow);
} }
} else {
notepadWindow.parentNode.removeChild(notepadWindow);
} }
}; };
fileDropdownContent.appendChild(newButton); fileDropdownContent.appendChild(newButton);
fileDropdownContent.appendChild(saveButton); fileDropdownContent.appendChild(saveButton);
fileDropdownContent.appendChild(openButton); fileDropdownContent.appendChild(openButton);
fileDropdownContent.appendChild(renameButton); fileDropdownContent.appendChild(renameButton);
fileDropdownContent.appendChild(embedButton);
fileDropdownContent.appendChild(closeButton); fileDropdownContent.appendChild(closeButton);
fileDropdown.appendChild(fileDropdownButton); fileDropdown.appendChild(fileDropdownButton);
fileDropdown.appendChild(fileDropdownContent); fileDropdown.appendChild(fileDropdownContent);
const titleText = document.createElement('div'); const titleText = document.createElement("div");
titleText.textContent = 'Notepad'; titleText.textContent = "Notepad";
titleText.style.textAlign = 'center'; titleText.style.textAlign = "center";
titleText.style.flexGrow = '1'; titleText.style.flexGrow = "1";
const closeButtonTitle = document.createElement('button'); const closeButtonTitle = document.createElement("button");
closeButtonTitle.className = 'close-btn'; closeButtonTitle.className = "close-btn";
closeButtonTitle.innerHTML = 'X'; closeButtonTitle.innerHTML = "X";
closeButtonTitle.onclick = function () { closeButtonTitle.onclick = function () {
if (notepadWindow.querySelector('.text-area').value.trim() !== '') { const textArea = notepadWindow.querySelector(".text-area");
const confirmClose = confirm('Are you sure you want to close this notepad?'); if (textArea.value.trim() === "") {
notepadWindow.parentNode.removeChild(notepadWindow);
} else {
const confirmClose = confirm(
"Are you sure you want to close this?"
);
if (confirmClose) { if (confirmClose) {
notepadWindow.parentNode.removeChild(notepadWindow); notepadWindow.parentNode.removeChild(notepadWindow);
} }
} else {
notepadWindow.parentNode.removeChild(notepadWindow);
} }
}; };
@ -154,91 +173,106 @@
titleBar.appendChild(titleText); titleBar.appendChild(titleText);
titleBar.appendChild(closeButtonTitle); titleBar.appendChild(closeButtonTitle);
const textArea = document.createElement('textarea'); const textArea = document.createElement("textarea");
textArea.className = 'text-area'; textArea.className = "text-area";
const embedArea = document.createElement("div");
embedArea.className = "embed-area";
notepadWindow.appendChild(titleBar); notepadWindow.appendChild(titleBar);
notepadWindow.appendChild(textArea); notepadWindow.appendChild(textArea);
notepadWindow.appendChild(embedArea);
document.body.appendChild(notepadWindow); document.body.appendChild(notepadWindow);
makeDraggable(titleBar, notepadWindow); makeDraggable(titleBar, notepadWindow);
} }
// Function to make an element draggable function replaceWithEmbed(notepadWindow, embedCode) {
const textArea = notepadWindow.querySelector(".text-area");
const embedArea = notepadWindow.querySelector(".embed-area");
textArea.style.display = "none";
embedArea.style.display = "block";
embedArea.innerHTML = embedCode;
}
function makeDraggable(dragHandle, element) { function makeDraggable(dragHandle, element) {
let offsetX, offsetY; let offsetX, offsetY;
dragHandle.addEventListener('mousedown', function(event) { dragHandle.addEventListener("mousedown", function (event) {
event.preventDefault(); event.preventDefault();
offsetX = event.clientX - parseInt(element.style.left, 10); offsetX = event.clientX - parseInt(element.style.left, 10);
offsetY = event.clientY - parseInt(element.style.top, 10); offsetY = event.clientY - parseInt(element.style.top, 10);
document.addEventListener('mousemove', dragElement); document.addEventListener("mousemove", dragElement);
document.addEventListener('mouseup', stopDragging); document.addEventListener("mouseup", stopDragging);
}); });
function dragElement(event) { function dragElement(event) {
element.style.left = (event.clientX - offsetX) + 'px'; element.style.left = event.clientX - offsetX + "px";
element.style.top = (event.clientY - offsetY) + 'px'; element.style.top = event.clientY - offsetY + "px";
} }
function stopDragging() { function stopDragging() {
document.removeEventListener('mousemove', dragElement); document.removeEventListener("mousemove", dragElement);
document.removeEventListener('mouseup', stopDragging); document.removeEventListener("mouseup", stopDragging);
} }
} }
// Function to save text from notepad
function saveText(notepadWindow) { function saveText(notepadWindow) {
const textArea = notepadWindow.querySelector('.text-area'); const textArea = notepadWindow.querySelector(".text-area");
const textToSave = textArea.value; const textToSave = textArea.value;
const blob = new Blob([textToSave], { type: "text/plain" }); const blob = new Blob([textToSave], { type: "text/plain" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const titleText = notepadWindow.querySelector('.title-bar > div:nth-child(2)').textContent; const titleText = notepadWindow.querySelector(
const a = document.createElement('a'); ".title-bar > div:nth-child(2)"
).textContent;
const a = document.createElement("a");
a.href = url; a.href = url;
a.download = titleText + '.txt'; a.download = titleText + ".txt";
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
} }
// Function to open text file in notepad
function openFile(notepadWindow) { function openFile(notepadWindow) {
const fileInput = document.createElement('input'); const fileInput = document.createElement("input");
fileInput.type = 'file'; fileInput.type = "file";
fileInput.accept = 'text/plain'; fileInput.accept = "text/plain";
fileInput.addEventListener('change', function() { fileInput.addEventListener("change", function () {
const file = fileInput.files[0]; const file = fileInput.files[0];
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function (event) { reader.onload = function (event) {
notepadWindow.querySelector('.text-area').value = event.target.result; const textArea = notepadWindow.querySelector(".text-area");
textArea.style.display = "block";
const embedArea = notepadWindow.querySelector(".embed-area");
embedArea.style.display = "none";
textArea.value = event.target.result;
}; };
reader.readAsText(file); reader.readAsText(file);
}); });
fileInput.click(); fileInput.click();
} }
// Function to show help
function showHelp() { function showHelp() {
const helpWindow = document.createElement('div'); const helpWindow = document.createElement("div");
helpWindow.className = 'window'; helpWindow.className = "window";
helpWindow.style.left = '50px'; helpWindow.style.left = "50px";
helpWindow.style.top = '50px'; helpWindow.style.top = "50px";
helpWindow.style.zIndex = zIndexCounter++; helpWindow.style.zIndex = zIndexCounter++;
const titleBar = document.createElement('div'); const titleBar = document.createElement("div");
titleBar.className = 'title-bar'; titleBar.className = "title-bar";
titleBar.draggable = true; titleBar.draggable = true;
const titleText = document.createElement('div'); const titleText = document.createElement("div");
titleText.textContent = 'Help'; titleText.textContent = "Help";
titleText.style.textAlign = 'center'; titleText.style.textAlign = "center";
titleText.style.flexGrow = '1'; titleText.style.flexGrow = "1";
const closeButtonTitle = document.createElement('button'); const closeButtonTitle = document.createElement("button");
closeButtonTitle.className = 'close-btn'; closeButtonTitle.className = "close-btn";
closeButtonTitle.innerHTML = 'X'; closeButtonTitle.innerHTML = "X";
closeButtonTitle.onclick = function () { closeButtonTitle.onclick = function () {
helpWindow.parentNode.removeChild(helpWindow); helpWindow.parentNode.removeChild(helpWindow);
}; };
@ -246,18 +280,19 @@
titleBar.appendChild(titleText); titleBar.appendChild(titleText);
titleBar.appendChild(closeButtonTitle); titleBar.appendChild(closeButtonTitle);
const textArea = document.createElement('textarea'); const textArea = document.createElement("textarea");
textArea.className = 'text-area'; textArea.className = "text-area";
textArea.style.width = '578px'; // Adjusting width textArea.style.width = "578px";
textArea.style.height = '221px'; // Adjusting height textArea.style.height = "221px";
textArea.value = 'rintyuu/notepad v0.4\n\n' + textArea.value =
'using this webapp is very straight foward,\n' + "rintyuu/notepad v0.5\n\n" +
' - click "New Notepad" at the top right to make a new text window\n' + "using this webapp is very straightforward,\n" +
' - windows are dragable\n' + ' - click "New..." at the top right to make a new text window\n' +
' - in each window, there is a file context menu\n' + " - windows are draggable\n" +
' - have fun typing\n\n' + " - in each window, there is a file context menu\n" +
'https://git.rintyuu.dev/rintyuu/notepad\n' + " - have fun typing\n\n" +
'contact me at me@rintyuu.uk for suggestions'; "https://git.rintyuu.dev/rintyuu/notepad\n" +
"contact me at me@rintyuu.uk for suggestions";
helpWindow.appendChild(titleBar); helpWindow.appendChild(titleBar);
helpWindow.appendChild(textArea); helpWindow.appendChild(textArea);
@ -265,7 +300,8 @@
makeDraggable(titleBar, helpWindow); makeDraggable(titleBar, helpWindow);
} }
</script>
createNewNotepad();
</script>
</body> </body>
</html> </html>