rintyuu/notepad
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

add embed functionality

Browse source
This commit is contained in:
rintyuu 2024-12-03 21:35:53 -08:00
parent 7c1c7f6582
commit 1185a97b58
1 changed files with 202 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

368
index.html
View file

@ -1,48 +1,53 @@
<!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;
padding: 5px; padding: 5px;
cursor: move; cursor: move;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.close-btn { .close-btn {
cursor: pointer; cursor: pointer;
} }
.title-bar button { .title-bar button {
cursor: pointer; cursor: pointer;
} }
.text-area { .text-area {
width: 300px; width: 300px;
height: 200px; height: 200px;
} }
.dropdown { .embed-area {
width: 100%;
height: 100%;
border: none;
display: none;
}
.dropdown {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
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;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
@ -52,220 +57,251 @@
background: none; background: none;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; display: block;
} }
.top-left { </style>
/* position: absolute; */ </head>
top: 5px; <body>
left: 5px; <button onclick="createNewNotepad()">New...</button>
} <button onclick="showHelp()">Help</button>
</style>
</head>
<body>
<button class="top-left" onclick="createNewNotepad()">New...</button> <script>
let zIndexCounter = 1;
<button class="top-left" href="#" onclick="showHelp()">Help</button> function createNewNotepad() {
const notepadWindow = document.createElement("div");
<script> notepadWindow.className = "window";
let zIndexCounter = 1; notepadWindow.style.left = "50px";
notepadWindow.style.top = "50px";
// Function to create a new notepad
function createNewNotepad() {
const notepadWindow = document.createElement('div');
notepadWindow.className = 'window';
notepadWindow.style.left = '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.onclick = function() { saveButton.textContent = "Save";
saveText(notepadWindow); saveButton.onclick = function () {
saveText(notepadWindow);
}; };
const openButton = document.createElement('button');
openButton.textContent = 'Open'; const openButton = document.createElement("button");
openButton.onclick = function() { openButton.textContent = "Open";
openFile(notepadWindow); openButton.onclick = function () {
openFile(notepadWindow);
}; };
const renameButton = document.createElement('button');
renameButton.textContent = 'Rename'; const renameButton = document.createElement("button");
renameButton.onclick = function() { renameButton.textContent = "Rename";
const newTitle = prompt('Enter new title:'); renameButton.onclick = function () {
if (newTitle !== null) { const newTitle = prompt("Enter new title:");
titleText.textContent = newTitle; if (newTitle !== null) {
} titleText.textContent = newTitle;
}; }
const closeButton = document.createElement('button'); };
closeButton.textContent = 'Close';
closeButton.onclick = function() { const embedButton = document.createElement("button");
if (notepadWindow.querySelector('.text-area').value.trim() !== '') { embedButton.textContent = "Embed";
const confirmClose = confirm('Are you sure you want to close this notepad?'); embedButton.onclick = function () {
if (confirmClose) { const embedCode = prompt("Enter embed HTML (e.g., iframe):");
notepadWindow.parentNode.removeChild(notepadWindow); if (embedCode) {
} replaceWithEmbed(notepadWindow, embedCode);
} else { }
notepadWindow.parentNode.removeChild(notepadWindow); };
const closeButton = document.createElement("button");
closeButton.textContent = "Close";
closeButton.onclick = function () {
const textArea = notepadWindow.querySelector(".text-area");
if (textArea.value.trim() === "") {
notepadWindow.parentNode.removeChild(notepadWindow);
} else {
const confirmClose = confirm(
"Are you sure you want to close this notepad?"
);
if (confirmClose) {
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() === "") {
if (confirmClose) { notepadWindow.parentNode.removeChild(notepadWindow);
notepadWindow.parentNode.removeChild(notepadWindow); } else {
} const confirmClose = confirm(
} else { "Are you sure you want to close this?"
notepadWindow.parentNode.removeChild(notepadWindow); );
if (confirmClose) {
notepadWindow.parentNode.removeChild(notepadWindow);
} }
}
}; };
titleBar.appendChild(fileDropdown); titleBar.appendChild(fileDropdown);
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) {
function makeDraggable(dragHandle, element) { 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) {
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) { const textArea = notepadWindow.querySelector(".text-area");
notepadWindow.querySelector('.text-area').value = event.target.result; textArea.style.display = "block";
}; const embedArea = notepadWindow.querySelector(".embed-area");
reader.readAsText(file); embedArea.style.display = "none";
textArea.value = event.target.result;
};
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);
}; };
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);
document.body.appendChild(helpWindow); document.body.appendChild(helpWindow);
makeDraggable(titleBar, helpWindow); makeDraggable(titleBar, helpWindow);
} }
</script>
</body> createNewNotepad();
</script>
</body>
</html> </html>