Merge 3650a43802 into 0c2132fe5e

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 = '';
-});
+});

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%`;
+  }
+}
+

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
+rm google-chrome-stable_current_amd64.deb

views/site_files/text_editor.erb

@@ -115,7 +115,8 @@
       </div>
       <a id="saveButton" class="btn-Action" href="#" onclick="saveTextFile(false); return false" style="opacity: 0.5"><span class="hide-on-mobile"><i class="fa fa-save"></i></span>Save</a>
       <span class="hide-on-mobile">
-        <a class="btn-Action" href="<%= current_site.uri @filename %>" target="_blank"><i class="fa fa-globe"></i> View</a>
+        <a id="previewButton" class="btn-Action" href="#" onclick="togglePreview();"><span><i class="fa fa-eye"></i></span>Preview</a>
+        <a class="btn-Action" href="<%= current_site.uri @filename %>" target="_blank"><i class="fa fa-globe"></i> Open</a>
         <a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt chat-button"></i> Share</a><!-- <% if current_site.supporter? %><a class="btn-Action" id="chatButton"><i class="fa fa-comments"></i> Penelope <span style="font-size: 8pt">(beta)</span></a><% end %> -->
         <a id="settingsButton" class="btn-Action" href="#settings" data-toggle="modal"><i class="fa fa-gear"></i> Settings</a>
       </span>
@@ -138,10 +139,18 @@
   <script src="/js/chat.js"></script>
 <% end %>
 -->
+
+<script src="/js/preview.js"></script>
+
 <div class="row editor">
   <div class="col left-col" style="display: <% current_site.supporter? ? 'none' : 'block' %>; margin-left: 20px;">
     <div id="editor"><h3>Loading...</h3></div>
   </div>
+  <div id="preview" class="col right-col chat-container" style="display:none;">
+    <div class="resize-handle"></div>
+    <iframe id="previewFrame" src="<%= current_site.uri @filename %>" width="100%" height="100%" style="background: white"></iframe>
+  </div>
+
   <div class="col right-col chat-container" style="display: none">
     <div class="resize-handle"></div>
     <div id="chat-box" class="chat-box">
@@ -243,7 +252,7 @@
       return ($(this).text() == '<%= current_site.editor_theme %>')
     }).prop('selected', true)
   <% end %>
-
+  
   function saveTextFile(quit) {
     if(unsavedChanges == false)
       return
@@ -301,6 +310,8 @@
 
       }
     })
+    var iframe = document.getElementById('previewFrame');
+    iframe.contentWindow.location.href = iframe.src; 
   }
 
   var editor = {}