Code and Serial Panels printable

Author: makermelissa

index.html

@@ -90,7 +90,7 @@
                         </ul>
                     </nav>
                 </div>
-                <div id="editor"></div>
+                <div id="editor" tabindex="0"></div>
             </div>
             <div id="page-separator" class=""></div>
             <div id="serial-page" class="">
@@ -113,7 +113,7 @@
                     </select>
                     <canvas id="plotter-canvas"></canvas>
                 </div>
-                <div id="terminal"></div>
+                <div id="terminal" tabindex="1"></div>
             </div>
         </div>
         <div id="footer-bar">

js/layout.js

@@ -26,12 +26,52 @@ function isSerialVisible() {
     return serialPage.classList.contains('active');
 }
 
+function setupPanelFocusHandlers() {
+    console.log("Setting up panel focus handlers");
+    serialPage.removeEventListener('click', handleActivePanel);
+    serialPage.addEventListener('click', handleActivePanel);
+    editorPage.removeEventListener('click', handleActivePanel);
+    editorPage.addEventListener('click', handleActivePanel);
+}
+
+function handleActivePanel(event) {
+    const panel = event.currentTarget;
+    setActivePanel(panel);
+}
+
+function setActivePanel(panel) {
+    if (panel === serialPage && isSerialVisible()) {
+        // Serial panel requested and visible
+        serialPage.classList.add('focused-panel');
+        editorPage.classList.remove('focused-panel');
+        console.log("Serial panel focused");
+    } else if (panel === editorPage && isEditorVisible()) {
+        // Editor panel requested and visible
+        editorPage.classList.add('focused-panel');
+        serialPage.classList.remove('focused-panel');
+        console.log("Editor panel focused");
+    } else {
+        // Requested panel is not visible, set other panel as focused
+        if (isEditorVisible()) {
+            editorPage.classList.add('focused-panel');
+            serialPage.classList.remove('focused-panel');
+            console.log("Editor panel focused (default)");
+        } else {
+            serialPage.classList.add('focused-panel');
+            editorPage.classList.remove('focused-panel');
+            console.log("Serial panel focused (default)");
+        }
+    }
+}
+
 async function toggleEditor() {
     if (isSerialVisible()) {
         editorPage.classList.toggle('active');
         saveSetting(SETTING_EDITOR_VISIBLE, isEditorVisible());
         updatePageLayout(UPDATE_TYPE_EDITOR);
     }
+    setupPanelFocusHandlers();
+    setActivePanel(editorPage);
 }
 
 async function toggleSerial() {
@@ -40,6 +80,8 @@ async function toggleSerial() {
         saveSetting(SETTING_TERMINAL_VISIBLE, isSerialVisible());
         updatePageLayout(UPDATE_TYPE_SERIAL);
     }
+    setupPanelFocusHandlers();
+    setActivePanel(serialPage);
 }
 
 btnModeEditor.removeEventListener('click', toggleEditor);
@@ -229,4 +271,6 @@ pageSeparator.addEventListener('mousedown', async function (e) {
 
 fixViewportHeight();
 window.addEventListener("resize", fixViewportHeight);
-loadPanelSettings();
+loadPanelSettings();
+setupPanelFocusHandlers();
+setActivePanel(editorPage);

sass/base/_base.scss

@@ -88,3 +88,23 @@ h5 {
     background-color: #d8d8d8;
     color: #888;
 }
+
+@media print {
+  body {
+    visibility: hidden;
+  }
+  #editor-page.focused-panel #editor, #serial-page.focused-panel #terminal {
+    visibility: visible;
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 2em;
+    .xterm-rows {
+      font-size: 1.2em;
+      &> div {
+        height: 1.2em !important;
+        line-height: 1.2em !important;
+      }
+    }
+  }
+}