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