Musselman/notatio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch Repo to notatio/notatio

Browse source
This commit is contained in:
James Musselman 2023-11-20 22:10:40 -06:00
commit 9da51a1e6b
26 changed files with 4117 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

393
static/build/editor.js Normal file
View file

@ -0,0 +1,393 @@
document.addEventListener('DOMContentLoaded', function () {
formatAllTables();
document.body.addEventListener("click", focusOnEditor);
});
function formatAllTables() {
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++)
formatTable(tables[i]);
}
function formatText(tag, data) {
if (tag === 'heading') {
var headingTag = document.createElement(data);
var selection = window.getSelection();
var range = selection.getRangeAt(0);
headingTag.appendChild(range.extractContents());
range.insertNode(headingTag);
} else {
document.execCommand(tag, false, data);
}
}
function formatTable(table) {
// Add Bootstrap classes to the table
table.classList.add('table', 'table-striped', 'table-hover');
// Add Bootstrap classes to the table header cells
var headerCells = table.getElementsByTagName('th');
for (var i = 0; i < headerCells.length; i++) {
headerCells[i].classList.add('');
}
// Add Bootstrap classes to the table rows
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].classList.add('');
// Add event listener to the last cell of each row
var cells = rows[i].getElementsByTagName('td');
var lastCell = cells[cells.length - 1];
lastCell.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// Check if it's the last cell in the last row
var lastRow = rows[rows.length - 1];
if (this.parentNode === lastRow && this === lastRow.lastElementChild) {
event.preventDefault();
var newParagraph = document.createElement('p');
newParagraph.textContent = '\u00A0'; // Insert a non-breaking space to maintain table structure
table.parentNode.insertBefore(newParagraph, table.nextSibling);
document.getElementById('editor').focus();
}
}
});
}
// Add Bootstrap classes to the table data cells
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
cells[i].classList.add('align-middle');
}
}
function saveForm() {
console.log("Saving file");
var editedContent = document.getElementById("editor").innerHTML;
var editedFilename = document.getElementById("filename").innerText;
// Set the editor content as the value of the editor-form-content textarea
document.getElementById("editor-form-content").value = editedContent;
document.getElementById("filename-form-content").value = editedFilename;
// Submit the form
document.getElementById("save-form").submit();
}
function confirmOverwrite() {
if (confirm("Are you sure you want to overwrite the file contents?")) {
document.getElementById("template-modal").style.display = "block";
// Close the modal when the close button or outside of the modal is clicked
window.addEventListener("click", function (e) {
if (e.target == document.getElementById("template-modal")) {
document.getElementById("template-modal").style.display = "none";
}
});
}
}
function confirmDeletion() {
if (confirm("Are you sure you want to delete {{.Filename}}?")) {
const filename = "{{.Filename}}";
deleteFile(filename);
}
}
// Function to focus on the editor when body is clicked
function focusOnEditor() {
// Check if the clicked element is inside the body div
if (event.target === document.body) { // Set the cursor position in the editor
setCursorPosition(document.getElementById("editor"));
}
}
// Add event listener to the body element
function redirectToTemplate(templateURL) {
window.location.href = templateURL;
}
function editFileName() {
var fileNameElement = document.getElementById("filename");
var fileName = fileNameElement.innerText.trim();
var extension = fileName.substring(fileName.lastIndexOf("."));
// Remove the file extension
fileName = fileName.replace(extension, "");
// Allow editing the filename
fileNameElement.contentEditable = "true";
fileNameElement.innerText = fileName;
fileNameElement.focus();
// Disable the enter key to prevent adding new lines
fileNameElement.addEventListener("keydown", function (event) {
if (event.keyCode == 13) {
event.preventDefault();
fileNameElement.blur();
}
});
// Update the filename when the user finishes editing
fileNameElement.onblur = function () {
fileName = fileNameElement.innerText.trim();
// Add the file extension back
fileName += extension;
fileNameElement.innerText = fileName;
fileNameElement.contentEditable = "false";
fileNameElement.removeEventListener("keydown");
};
}
// Show the table size modal
function addTable() {
document.getElementById("tableModal").style.display = "block";
return
}
function createTable() {
var tableRowsInput = document.getElementById('tableRows');
var tableColumnsInput = document.getElementById('tableColumns');
var tableRows = parseInt(tableRowsInput.value);
var tableColumns = parseInt(tableColumnsInput.value);
if (!isNaN(tableRows) && !isNaN(tableColumns)) {
// Create a new table-responsive div
var tableResponsiveDiv = document.createElement('div');
tableResponsiveDiv.classList.add('table-responsive');
// Create a new table element
var table = document.createElement('table');
table.classList.add('table', 'table-striped', 'table-bordered');
// Create the table header
var thead = document.createElement('thead');
var headerRow = document.createElement('tr');
for (var j = 0; j < tableColumns; j++) {
var headerCell = document.createElement('th');
var headerText = document.createTextNode('Header ' + (j + 1));
headerCell.appendChild(headerText);
headerRow.appendChild(headerCell);
}
thead.appendChild(headerRow);
// Create the table body
var tbody = document.createElement('tbody');
for (var i = 0; i < tableRows; i++) {
var row = document.createElement('tr');
for (var j = 0; j < tableColumns; j++) {
var cell = document.createElement('td');
var cellText = document.createTextNode('Cell ' + (i + 1) + '-' + (j + 1));
cell.appendChild(cellText);
row.appendChild(cell);
}
tbody.appendChild(row);
}
// Append the thead and tbody to the table
table.appendChild(thead);
table.appendChild(tbody);
// Append the table to the table-responsive div
tableResponsiveDiv.appendChild(table);
// Insert the table-responsive div into the editor
var editor = document.getElementById('editor');
editor.appendChild(tableResponsiveDiv);
// Create a new <div> element
var paragraphDiv = document.createElement('div');
// Create a new <p> element
var paragraph = document.createElement('p');
// Set the text content of the paragraph
var paragraphText = document.createTextNode('');
paragraph.appendChild(paragraphText);
// Append the paragraph to the paragraph div
paragraphDiv.appendChild(paragraph);
// Insert the paragraph div after the table-responsive div
editor.appendChild(paragraphDiv);
// Reset the modal inputs
tableRowsInput.value = '3';
tableColumnsInput.value = '3';
// Close the modal
document.getElementById('tableModal').style.display = 'none';
}
}
function addVideo() {
var url = prompt("Enter the video URL:");
if (url !== null) {
var videoElement = document.createElement('video');
videoElement.controls = true;
videoElement.src = url;
document.getElementById('editor').appendChild(videoElement);
var paragraphElement = document.createElement('p');
paragraphElement.textContent = 'Type your text here';
document.getElementById('editor').appendChild(paragraphElement);
}
}
function deleteFile(filename) {
// Send a POST request to the server to delete the specified file
fetch("/delete", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ files: [filename] }),
})
.then(response => {
if (response.ok) {
window.location.replace("/home");
} else {
// Handle the error, e.g., display an error message
console.error("Error deleting file");
}
})
.catch(error => {
console.error("Error deleting file:", error);
});
}
function insertLink() {
var url = prompt('Enter the URL:');
// Check if the URL is null or empty
if (url === null || url === '') {
console.log('URL is empty. Aborting link creation.');
return;
}
var label = '';
// Get the user's selection
var selection = window.getSelection();
// Check if the user has made a selection
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
// Get the selected text
var selectedText = range.toString().trim();
// Prompt for the label only if there is no selection
if (selectedText.length === 0) {
label = prompt('Please enter the Link Text:');
} else {
label = selectedText;
}
}
// Check if the URL or label is empty
if (url === '' || label === '') {
console.log('URL or label is empty. Aborting link creation.');
return;
}
// Create the link HTML
var val = '<a href="' + url + '" target="_blank">' + label + '</a>';
// Insert the link HTML at the current selection or caret position
document.execCommand('insertHTML', false, val);
}
function undo() {
document.execCommand('undo', false, null);
}
function redo() {
document.execCommand('redo', false, null);
}
function selectAll() {
document.execCommand('selectAll', false, null);
}
function insertImage() {
var url = prompt('Enter the image URL:');
if (url !== null) {
document.execCommand('insertImage', false, url);
}
}
function setCursorPosition(element) {
var range = document.createRange();
range.selectNodeContents(element);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
document.addEventListener('keydown', function (event) {
if ((event.ctrlKey || event.metaKey)) {
switch (event.key.toLowerCase()) {
case 'b':
event.preventDefault();
formatText('bold');
break;
case 'i':
event.preventDefault();
formatText('italic');
break;
case 'u':
event.preventDefault();
formatText('underline');
break;
case 'l':
event.preventDefault();
insertLink();
break;
case 'z':
event.preventDefault();
undo();
break;
case 'y':
event.preventDefault();
redo();
break;
case 'd':
event.preventDefault();
confirmDeletion();
break;
case 'p':
event.preventDefault();
insertImage();
break;
case 't':
event.preventDefault();
confirmOverwrite();
break;
case 's':
event.preventDefault();
saveForm();
break;
case 'f':
event.preventDefault();
formatText('removeFormat');
break;
case 'T':
event.preventDefault();
addTable();
break;
case 'm':
event.preventDefault();
addVideo();
break;
}
}
});

BIN
static/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB