From 719e4d45f1d4861d452cd00873225a34eb8b05f3 Mon Sep 17 00:00:00 2001 From: BanceDev Date: Mon, 16 Sep 2024 22:10:51 -0400 Subject: [PATCH 1/4] added basic preview functionality with toggle button --- vagrant/common.sh | 2 +- views/site_files/text_editor.erb | 32 ++++++++++++++++++++++++-------- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/vagrant/common.sh b/vagrant/common.sh index 89c8e0a7..f64a84c8 100644 --- a/vagrant/common.sh +++ b/vagrant/common.sh @@ -26,4 +26,4 @@ service ssh restart wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo dpkg -i google-chrome-stable_current_amd64.deb sudo apt-get install -f -y -rm google-chrome-stable_current_amd64.deb \ No newline at end of file +rm google-chrome-stable_current_amd64.deb diff --git a/views/site_files/text_editor.erb b/views/site_files/text_editor.erb index 39582abb..43e6ee35 100644 --- a/views/site_files/text_editor.erb +++ b/views/site_files/text_editor.erb @@ -89,7 +89,8 @@ Save - View + Preview + Open '> Share<% if current_site.supporter? %> Penelope (beta)<% end %> @@ -111,10 +112,16 @@ <% end %> +

Loading...

+ + -
-
- - - -
-
+
+
+ + + +
@@ -156,6 +162,16 @@ }).prop('selected', true) <% 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) { if(unsavedChanges == false) return From b91ff6266b693e63079c0a1b3be81867f6003b3f Mon Sep 17 00:00:00 2001 From: BanceDev Date: Mon, 16 Sep 2024 22:32:27 -0400 Subject: [PATCH 2/4] moved handle bar logic and preview into its own js file also patched a bug where the editor would not go back to full width after hiding preview/chat --- public/js/chat.js | 54 +------------------------- public/js/preview.js | 65 ++++++++++++++++++++++++++++++++ views/site_files/text_editor.erb | 13 +------ 3 files changed, 68 insertions(+), 64 deletions(-) create mode 100644 public/js/preview.js diff --git a/public/js/chat.js b/public/js/chat.js index c65087e9..039d9866 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -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() { const leftCol = document.querySelector('.left-col'); const rightCol = document.querySelector('.right-col'); @@ -260,4 +208,4 @@ Maintain a friendly, patient, supportive tone. Prioritize the user's learning an } leftCol.style.display = ''; -}); \ No newline at end of file +}); diff --git a/public/js/preview.js b/public/js/preview.js new file mode 100644 index 00000000..ecc5327d --- /dev/null +++ b/public/js/preview.js @@ -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%`; + } +} + diff --git a/views/site_files/text_editor.erb b/views/site_files/text_editor.erb index 43e6ee35..f8bec03e 100644 --- a/views/site_files/text_editor.erb +++ b/views/site_files/text_editor.erb @@ -112,6 +112,7 @@ <% end %> +
@@ -161,17 +162,7 @@ return ($(this).text() == '<%= current_site.editor_theme %>') }).prop('selected', true) <% 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) { if(unsavedChanges == false) return From e9de44811bcaf5a7d7d67f78896be0be5316a592 Mon Sep 17 00:00:00 2001 From: BanceDev Date: Mon, 16 Sep 2024 22:51:07 -0400 Subject: [PATCH 3/4] ensured that preview updates on save and avoids caching --- views/site_files/text_editor.erb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/views/site_files/text_editor.erb b/views/site_files/text_editor.erb index f8bec03e..b8e7f24b 100644 --- a/views/site_files/text_editor.erb +++ b/views/site_files/text_editor.erb @@ -120,7 +120,7 @@