mirror of
https://github.com/abrendan/smolEditWeb.git
synced 2025-08-24 21:50:36 +02:00
Initial commit
This commit is contained in:
Brendan
216
static/js/editor.js
Normal file
216
static/js/editor.js
Normal file
@@ -0,0 +1,216 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log("DOM content loaded");
|
||||
const editor = document.getElementById('editor');
|
||||
const openBtn = document.getElementById('openBtn');
|
||||
const saveBtn = document.getElementById('saveBtn');
|
||||
const findBtn = document.getElementById('findBtn');
|
||||
const printBtn = document.getElementById('printBtn');
|
||||
const modal = document.getElementById('modal');
|
||||
const closeModal = document.getElementsByClassName('close')[0];
|
||||
const findInput = document.getElementById('findInput');
|
||||
const findButton = document.getElementById('findButton');
|
||||
const encodingSelect = document.getElementById('encodingSelect');
|
||||
const fontSelect = document.getElementById('fontSelect');
|
||||
const wrapTextCheckbox = document.getElementById('wrapText');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
|
||||
// Brendan Modal elements
|
||||
const brendanLink = document.getElementById('brendanLink');
|
||||
const brendanModal = document.getElementById('brendanModal');
|
||||
const closeBrendanModal = brendanModal.getElementsByClassName('close')[0];
|
||||
|
||||
console.log("All elements selected");
|
||||
|
||||
let currentFileName = 'untitled.txt';
|
||||
let currentEncoding = 'utf-8';
|
||||
|
||||
// Set file input to accept only .txt files
|
||||
fileInput.setAttribute('accept', '.txt');
|
||||
|
||||
openBtn.addEventListener('click', function() {
|
||||
console.log("Open button clicked");
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', function(e) {
|
||||
console.log("File input changed");
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
if (file.name.toLowerCase().endsWith('.txt')) {
|
||||
currentFileName = file.name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const content = e.target.result;
|
||||
detectEncoding(content);
|
||||
editor.value = content;
|
||||
console.log("File loaded successfully");
|
||||
};
|
||||
reader.onerror = function(e) {
|
||||
console.error("Error reading file:", e);
|
||||
alert("An error occurred while reading the file. Please try again.");
|
||||
};
|
||||
reader.readAsText(file);
|
||||
} else {
|
||||
alert("Please select a .txt file.");
|
||||
fileInput.value = ''; // Clear the file input
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
saveBtn.addEventListener('click', function() {
|
||||
console.log("Save button clicked");
|
||||
const content = editor.value;
|
||||
fetch('/download', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ content: content, filename: currentFileName, encoding: currentEncoding }),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const blob = new Blob([data.content], { type: 'text/plain' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = url;
|
||||
a.download = data.filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
console.log("File saved successfully");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
alert("An error occurred while saving the file. Please try again.");
|
||||
});
|
||||
});
|
||||
|
||||
findBtn.addEventListener('click', function() {
|
||||
console.log("Find button clicked");
|
||||
modal.style.display = "block";
|
||||
});
|
||||
|
||||
closeModal.addEventListener('click', function() {
|
||||
modal.style.display = "none";
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
findButton.addEventListener('click', function() {
|
||||
console.log("Find text button clicked");
|
||||
const searchText = findInput.value;
|
||||
if (searchText) {
|
||||
const content = editor.value;
|
||||
const startIndex = content.indexOf(searchText);
|
||||
if (startIndex !== -1) {
|
||||
editor.setSelectionRange(startIndex, startIndex + searchText.length);
|
||||
editor.focus();
|
||||
console.log("Text found and highlighted");
|
||||
} else {
|
||||
alert("Text not found!");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
encodingSelect.addEventListener('change', function() {
|
||||
console.log("Encoding changed to:", this.value);
|
||||
currentEncoding = this.value;
|
||||
});
|
||||
|
||||
function detectEncoding(content) {
|
||||
console.log("Detecting encoding");
|
||||
fetch('/detect_encoding', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ content: content }),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
currentEncoding = data.encoding;
|
||||
encodingSelect.value = currentEncoding;
|
||||
console.log("Encoding detected:", currentEncoding);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
alert("An error occurred while detecting the file encoding. Using default encoding.");
|
||||
});
|
||||
}
|
||||
|
||||
// Print functionality
|
||||
printBtn.addEventListener('click', function() {
|
||||
console.log("Print button clicked");
|
||||
const content = editor.value;
|
||||
const printWindow = window.open('', '_blank');
|
||||
printWindow.document.write('<html><head><title>Print</title>');
|
||||
printWindow.document.write('<style>body { font-family: ' + editor.style.fontFamily + '; white-space: pre-wrap; }</style>');
|
||||
printWindow.document.write('</head><body>');
|
||||
printWindow.document.write(content);
|
||||
printWindow.document.write('</body></html>');
|
||||
printWindow.document.close();
|
||||
printWindow.print();
|
||||
});
|
||||
|
||||
// Basic text editing features
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
switch (e.key.toLowerCase()) {
|
||||
case 'x':
|
||||
document.execCommand('cut');
|
||||
break;
|
||||
case 'c':
|
||||
document.execCommand('copy');
|
||||
break;
|
||||
case 'v':
|
||||
document.execCommand('paste');
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Font selection
|
||||
fontSelect.addEventListener('change', function() {
|
||||
console.log("Font changed to:", this.value);
|
||||
editor.style.fontFamily = this.value + ', monospace';
|
||||
});
|
||||
|
||||
// Text wrapping
|
||||
wrapTextCheckbox.addEventListener('change', function() {
|
||||
console.log("Text wrap changed to:", this.checked);
|
||||
if (this.checked) {
|
||||
editor.classList.add('wrap');
|
||||
} else {
|
||||
editor.classList.remove('wrap');
|
||||
}
|
||||
});
|
||||
|
||||
// Set initial font
|
||||
editor.style.fontFamily = fontSelect.value + ', monospace';
|
||||
|
||||
// Brendan Modal functionality
|
||||
brendanLink.addEventListener('click', function(e) {
|
||||
console.log("Brendan link clicked");
|
||||
e.preventDefault();
|
||||
brendanModal.style.display = "block";
|
||||
});
|
||||
|
||||
closeBrendanModal.addEventListener('click', function() {
|
||||
brendanModal.style.display = "none";
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if (event.target == brendanModal) {
|
||||
brendanModal.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
console.log("All event listeners set up");
|
||||
});
|
||||
|
||||
console.log("editor.js loaded");
|
||||
Reference in New Issue
Block a user