zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-29 19:48:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

moved handle bar logic and preview into its own js file

Browse source 
also patched a bug where the editor would not go back to full width after hiding preview/chat
This commit is contained in:
BanceDev 2024-09-16 22:32:27 -04:00
parent 719e4d45f1
commit b91ff6266b
3 changed files with 68 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
public/js/chat.js
View file

@ -169,58 +169,6 @@ Maintain a friendly, patient, supportive tone. Prioritize the user's learning an
}); });
} }
// Resize chat box
const handle = document.querySelector('.resize-handle');
const leftCol = document.querySelector('.left-col');
const rightCol = document.querySelector('.right-col');
const editorRow = document.querySelector('.row.editor');
let isResizing = false;
if(!localStorage.getItem('leftColPct')) localStorage.setItem('leftColPct', '70%')
if(!localStorage.getItem('rightColPct')) localStorage.setItem('rightColPct', '30%')
handle.addEventListener('mousedown', function(e) {
e.preventDefault();
isResizing = true;
let startX = e.pageX;
let initialLeftColWidth = leftCol.offsetWidth; // Capture the initial width when resizing starts
function handleMouseMove(e) {
if (!isResizing) return;
const editorRowWidth = editorRow.offsetWidth; // Get the total width of the editor row
let moveX = e.pageX - startX;
let leftColWidth = initialLeftColWidth + moveX; // Use the initial width for relative adjustments
// Convert to percentage
let leftColPercentage = (leftColWidth / editorRowWidth) * 100;
let rightColPercentage = 100 - leftColPercentage;
// Check and enforce the minimum and maximum widths
if (rightColPercentage < 20) { // Minimum 20% for right column
rightColPercentage = 20;
leftColPercentage = 80;
} else if (rightColPercentage > 80) { // Maximum 80% for right column
rightColPercentage = 80;
leftColPercentage = 20;
}
// Apply the new widths
leftCol.style.width = `${leftColPercentage}%`;
rightCol.style.width = `${rightColPercentage}%`;
localStorage.setItem('leftColPct', `${leftColPercentage}%`);
localStorage.setItem('rightColPct', `${rightColPercentage}%`);
}
function handleMouseUp() {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
isResizing = false;
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
});
function toggleChat() { function toggleChat() {
const leftCol = document.querySelector('.left-col'); const leftCol = document.querySelector('.left-col');
const rightCol = document.querySelector('.right-col'); const rightCol = document.querySelector('.right-col');

65
public/js/preview.js Normal file
View file

@ -0,0 +1,65 @@
document.addEventListener('DOMContentLoaded', () => {
const handle = document.querySelector('.resize-handle');
const leftCol = document.querySelector('.left-col');
const rightCol = document.querySelector('.right-col');
const editorRow = document.querySelector('.row.editor');
let isResizing = false;
if(!localStorage.getItem('leftColPct')) localStorage.setItem('leftColPct', '70%')
if(!localStorage.getItem('rightColPct')) localStorage.setItem('rightColPct', '30%')
handle.addEventListener('mousedown', function(e) {
e.preventDefault();
isResizing = true;
let startX = e.pageX;
let initialLeftColWidth = leftCol.offsetWidth; // Capture the initial width when resizing starts
function handleMouseMove(e) {
if (!isResizing) return;
const editorRowWidth = editorRow.offsetWidth; // Get the total width of the editor row
let moveX = e.pageX - startX;
let leftColWidth = initialLeftColWidth + moveX; // Use the initial width for relative adjustments
// Convert to percentage
let leftColPercentage = (leftColWidth / editorRowWidth) * 100;
let rightColPercentage = 100 - leftColPercentage;
// Check and enforce the minimum and maximum widths
if (rightColPercentage < 20) { // Minimum 20% for right column
rightColPercentage = 20;
leftColPercentage = 80;
} else if (rightColPercentage > 80) { // Maximum 80% for right column
rightColPercentage = 80;
leftColPercentage = 20;
}
// Apply the new widths
leftCol.style.width = `${leftColPercentage}%`;
rightCol.style.width = `${rightColPercentage}%`;
localStorage.setItem('leftColPct', `${leftColPercentage}%`);
localStorage.setItem('rightColPct', `${rightColPercentage}%`);
}
function handleMouseUp() {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
isResizing = false;
}
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
});
});
function togglePreview() {
const leftCol = document.querySelector('.left-col');
var preview = document.getElementById('preview');
if (preview.style.display === 'none' || preview.style.display === '') {
preview.style.display = 'block';
} else {
preview.style.display = 'none';
leftCol.style.width = `100%`;
}
}

11
views/site_files/text_editor.erb
View file

@ -112,6 +112,7 @@
<script src="/js/chat.js"></script> <script src="/js/chat.js"></script>
<% end %> <% end %>
<script src="/js/preview.js"></script>
<div class="row editor"> <div class="row editor">
<div class="col left-col" style="display: <% current_site.supporter? ? 'none' : 'block' %>; margin-left: 20px;"> <div class="col left-col" style="display: <% current_site.supporter? ? 'none' : 'block' %>; margin-left: 20px;">
@ -162,16 +163,6 @@
}).prop('selected', true) }).prop('selected', true)
<% end %> <% end %>
function togglePreview() {
var preview = document.getElementById('preview');
if (preview.style.display === 'none' || preview.style.display === '') {
preview.style.display = 'block';
} else {
preview.style.display = 'none';
}
}
function saveTextFile(quit) { function saveTextFile(quit) {
if(unsavedChanges == false) if(unsavedChanges == false)
return return