chat: size and enabled/disabled retention

public/js/chat.js

@@ -170,6 +170,9 @@ document.addEventListener('DOMContentLoaded', () => {
   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;
@@ -197,6 +200,8 @@ document.addEventListener('DOMContentLoaded', () => {
       // Apply the new widths
       leftCol.style.width = `${leftColPercentage}%`;
       rightCol.style.width = `${rightColPercentage}%`;
+      localStorage.setItem('leftColPct', leftCol.style.width)
+      localStorage.setItem('rightColPct', rightCol.style.width)
       startX = e.pageX;
     }
 
@@ -209,4 +214,74 @@ document.addEventListener('DOMContentLoaded', () => {
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
   });
+
+  function toggleChat() {
+    const leftCol = document.querySelector('.left-col');
+    const rightCol = document.querySelector('.right-col');
+    let chatContainer = document.getElementsByClassName('chat-container')[0];
+
+    var chatEnabled = localStorage.getItem('chatEnabled');
+    if (chatEnabled === 'true') {
+      leftCol.style.width = localStorage.getItem('leftColPct') || '70%';
+      rightCol.style.width = localStorage.getItem('rightColPct') || '30%';
+      chatContainer.style.display = '';
+    } else {
+      rightCol.style.width = '0%';
+      leftCol.style.width = '100%';
+      chatContainer.style.display = 'none';
+    }
+  }
+
+  document.getElementById('chatButton').addEventListener('click', function(e) {
+    e.preventDefault()
+    var chatEnabled = localStorage.getItem('chatEnabled');
+    if(chatEnabled === 'true' || chatEnabled === null) {
+      localStorage.setItem('chatEnabled', 'false');
+    } else {
+      localStorage.setItem('chatEnabled', 'true');
+    }
+
+    toggleChat()
+  });
+
+  toggleChat()
+
+  if(localStorage.getItem('chatEnabled') !== 'false') {
+    leftCol.style.width = localStorage.getItem('leftColPct');
+    rightCol.style.width = localStorage.getItem('rightColPct');
+    rightCol.style.display = '';  
+  }
+
+  leftCol.style.display = '';
+
+/*
+
+  localStorage.removeItem("leftColPct");
+  localStorage.removeItem("rightColPct");
+  localStorage.removeItem("chatEnabled");
+
+  function toggleChat() {
+    const leftCol = document.querySelector('.left-col');
+    const rightCol = document.querySelector('.right-col');
+    let chatContainer = document.getElementsByClassName('chat-container')[0]
+
+    if(localStorage)
+
+    if(rightCol.style.width == '0%') {
+      rightCol.style.width = '30%';
+      leftCol.style.width = '70%';
+      chatContainer.style.display = ''
+    } else {
+      rightCol.style.width = '0%';
+      leftCol.style.width = '100%';
+      chatContainer.style.display = 'none'
+    }
+  }
+
+  chatButton.addEventListener('click', function(e) {
+    e.preventDefault()
+    toggleChat()
+  });
+*/
+
 });

sass/_project-sass/_project-Main.scss

@@ -2148,6 +2148,32 @@ a.tag:hover {
 .row.editor {
   display: flex;
   height: calc(100vh - 105px);
+  /* Width and background of the scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    background-color: #F5F5F5;
+  }
+
+  /* Background of the scrollbar track */
+  ::-webkit-scrollbar-track {
+    background-color: #1d1f21;
+  }
+
+  /* Style of the scrollbar thumb (the part you drag) */
+  ::-webkit-scrollbar-thumb {
+    background-color: #CCC;
+    border-radius: 6px;
+  }
+
+  /* Style of the scrollbar thumb when hovering */
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #B5B5B5;
+  }
+
+  /* Style of the scrollbar corner */
+  ::-webkit-scrollbar-corner {
+    background-color: #F5F5F5;
+  }
 }
 .header-Outro.with-columns.press .col {
   padding: 25px 40px 15px 40px;
@@ -2268,34 +2294,6 @@ pre, code {
   color: #FFFFFF;
 }
 
-
-/* Width and background of the scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  background-color: #F5F5F5;
-}
-
-/* Background of the scrollbar track */
-::-webkit-scrollbar-track {
-  background-color: #1d1f21;
-}
-
-/* Style of the scrollbar thumb (the part you drag) */
-::-webkit-scrollbar-thumb {
-  background-color: #CCC;
-  border-radius: 6px;
-}
-
-/* Style of the scrollbar thumb when hovering */
-::-webkit-scrollbar-thumb:hover {
-  background-color: #B5B5B5;
-}
-
-/* Style of the scrollbar corner */
-::-webkit-scrollbar-corner {
-  background-color: #F5F5F5;
-}
-
 .left-col {
   padding: 1rem;
   overflow-y: scroll;

views/site_files/text_editor.erb

@@ -90,7 +90,7 @@
       <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 == 'index.html' ? '' : @filename %>" target="_blank"><i class="fa fa-globe"></i> View</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"></i> Share</a> <a href="#" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom"><i class="fa fa-comments"></i> Penelope</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> <a class="btn-Action" id="chatButton"><i class="fa fa-comments"></i> Chat</a>
       </span>
     <!-- <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Exit</a> -->
       <div id="editorUpdates" class="tooltip fade bottom in hidden" style="top: 90px;right: 12.5em;">
@@ -111,10 +111,10 @@
 
 
 <div class="row editor">
-  <div class="col left-col" style="width: 70%;">
+  <div class="col left-col" style="display: none">
     <div id="editor"><h3>Loading...</h3></div>
   </div>
-  <div class="col right-col chat-container" style="width: 30%;">
+  <div class="col right-col chat-container" style="display: none">
     <div class="resize-handle"></div>
     <div id="chat-box" class="chat-box">
       <div class="bot-message message">