Musselman
bcc9135851
This addition helps ensure proper rendering and responsiveness of the webpage across different devices and screen sizes.
201 lines
No EOL
11 KiB
HTML
201 lines
No EOL
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en_US" data-bs-theme="dark">
|
|
|
|
<head>
|
|
<title>Edit File</title>
|
|
<link rel="stylesheet" type="text/css"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
|
|
<link rel="stylesheet" type="text/css"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
|
<script src="/static/build/editor.js" type="text/javascript"></script>
|
|
<style>
|
|
.editor:empty:not(:focus):before {
|
|
content: attr(data-placeholder);
|
|
opacity: 45%;
|
|
}
|
|
|
|
[contenteditable]:focus {
|
|
outline: 0px solid transparent;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="vh-100">
|
|
|
|
<div class="sticky-top bg-light-grey">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="mx-auto d-flex justify-content-center">
|
|
<h1>Editing File: </h1>
|
|
<h1 id="filename" onclick="editFileName()" contenteditable="false">{{.Filename}}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row sticky-top bg-light-grey">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between bg-light-grey border-bottom p-2">
|
|
<div>
|
|
<div class="dropdown d-inline-block">
|
|
<button class="btn dropdown-toggle" type="button" id="headingDropdown"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="fas fa-heading"></i>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="headingDropdown">
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('heading', 'h1')">Heading 1</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('heading', 'h2')">Heading 2</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('heading', 'h3')">Heading 3</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('heading', 'h4')">Heading 4</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('heading', 'h5')">Heading 5</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('heading', 'h6')">Heading 6</button></li>
|
|
</ul>
|
|
</div>
|
|
<button type="button" class="btn" onclick="formatText('bold')" aria-label="Bold"><i
|
|
class="fas fa-bold"></i></button>
|
|
<button type="button" class="btn " onclick="formatText('italic')"><i
|
|
class="fas fa-italic"></i></button>
|
|
<button type="button" class="btn " onclick="formatText('underline')"><i
|
|
class="fas fa-underline"></i></button>
|
|
<button type="button" class="btn " onclick="formatText('strikeThrough')"><i
|
|
class="fas fa-strikethrough"></i></button>
|
|
<button type="button" class="btn " onclick="undo()"><i class="fas fa-undo"></i></button>
|
|
<button type="button" class="btn " onclick="redo()"><i class="fas fa-redo"></i></button>
|
|
<button type="button" class="btn " onclick="formatText('removeFormat')"><i
|
|
class="fas fa-eraser"></i></button>
|
|
</div>
|
|
|
|
<!-- First few buttons visible on small screens -->
|
|
<div class="d-none d-md-block">
|
|
<button class="btn " onclick="addTable()"><i class="fas fa-table" disabled></i></button>
|
|
<button class="btn " onclick="addVideo()"><i class="fas fa-video"></i></button>
|
|
|
|
<button type="button" class="btn " onclick="formatText('insertUnorderedList')"><i
|
|
class="fas fa-list-ul"></i></button>
|
|
<button type="button" class="btn " onclick="formatText('insertOrderedList')"><i
|
|
class="fas fa-list-ol"></i></button>
|
|
<button type="button" class="btn " onclick="insertImage()"><i class="fas fa-image"></i></button>
|
|
<!--- <button type="button" class="btn " onclick="formatText('formatBlock', '<blockquote>')" disabled><i class="fas fa-quote-right"></i></button>
|
|
<button type="button" class="btn " onclick="formatText('formatBlock', '<code>')" disabled><i class="fas fa-code"></i></button> -->
|
|
<button type="button" class="btn " onclick="formatText('insertHorizontalRule')"><i
|
|
class="fas fa-grip-lines"></i></button>
|
|
<button class="btn " onclick="insertLink()"><i class="fas fa-link"></i></button>
|
|
</div>
|
|
|
|
<!-- Dropdown with remaining buttons on small screens -->
|
|
<div class="dropdown position-relative d-md-none">
|
|
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
|
|
<li><button class="dropdown-item" type="button" onclick="addTable()">Add Table</button></li>
|
|
<li><button class="dropdown-item" type="button" onclick="addVideo()">Add Video</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('insertUnorderedList')">Insert Unordered List</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('insertOrderedList')">Insert Ordered List</button></li>
|
|
<li><button class="dropdown-item" type="button" onclick="insertImage()">Insert
|
|
Image</button></li>
|
|
<li><button class="dropdown-item" type="button"
|
|
onclick="formatText('insertHorizontalRule')">Insert Horizontal Rule</button></li>
|
|
<li><button class="dropdown-item" type="button" onclick="insertLink()">Insert Link</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="btn " onclick="confirmOverwrite()"> <i class="fa fa-notes-medical"></i>
|
|
Templates</i></button>
|
|
<button class="btn " onclick="saveForm()"><i class="fas fa-save"></i></button>
|
|
<button class="btn " onclick="confirmDeletion()"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<form id="save-form" method="post" action="/save?filename={{.Filename}}">
|
|
<textarea hidden="true" id="editor-form-content" name="editor"></textarea>
|
|
<input type="hidden" id="filename-form-content" name="filename" value="{{.Filename}}">
|
|
<div class="editor shadow-none" id="editor" role="textbox" contenteditable="true"
|
|
data-placeholder="The page lays unwritten....">
|
|
{{.FileContent}}
|
|
</div>
|
|
</form>
|
|
|
|
<div id="tableModal" class="modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add Table</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-row">
|
|
<div class="form-group col-sm-6">
|
|
<label for="tableRows">Rows</label>
|
|
<input type="number" class="form-control" id="tableRows" value="3" min="2">
|
|
</div>
|
|
<div class="form-group col-sm-6">
|
|
<label for="tableColumns">Columns</label>
|
|
<input type="number" class="form-control" id="tableColumns" value="3" min="2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
|
|
onclick="document.getElementById('tableModal').style.display = 'none'">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="createTable()">Create Table</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// The deletion is kept here as I (Musselman) have not found a way to implement the {{.Filename}} into the javascript.
|
|
function confirmDeletion() {
|
|
if (confirm("Are you sure you want to delete {{.Filename}}?")) {
|
|
const filename = "{{.Filename}}";
|
|
deleteFile(filename);
|
|
}
|
|
}
|
|
|
|
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);
|
|
});
|
|
}
|
|
</script>
|
|
<script src="/static/build/darkmode.js" type="text/javascript"></script>
|
|
|
|
</body>
|
|
|
|
</html> |