feat: add results page (#6)

arnest00 · web-flow · commit 90f3f33c59d8 · 2025-11-07T14:11:38.000-08:00
* fix: apply welcome panel css correctly

* fix: only one panel open at a time

* fix: unable to scroll on smaller browser window
diff --git a/src/core/ExtensionManager.js b/src/core/ExtensionManager.js
@@ -69,12 +69,24 @@ class ExtensionManager {
     }
   }
 
+  removeVisiblePanels() {
+    const panels = document.querySelectorAll('.cv-panel.cv-panel--visible');
+    if (!panels.length) return;
+
+    panels.forEach((panel) => {
+      panel.classList.remove('cv-panel--visible');
+      setTimeout(() => {
+        panel.remove();
+      }, 300);
+    });
+  }
+
   async togglePanel(panelType) {
     try {
-      const panel = this.panels.get(panelType);
+      const visiblePanels = document.querySelectorAll('.cv-panel.cv-panel--visible');
 
-      if (panel && panel.isVisible) {
-        this.closePanel(panelType);
+      if (visiblePanels.length) {
+        this.removeVisiblePanels();
       } else {
         await this.openPanel(panelType);
       }
@@ -98,6 +110,8 @@ class ExtensionManager {
   }
 
   async openPanel(panelType, data = {}) {
+    this.removeVisiblePanels();
+
     let panel = this.panels.get(panelType);
 
     // Create a new panel if one does not already exist
@@ -111,10 +125,10 @@ class ExtensionManager {
     await panel.show();
   }
 
-  closePanel(panelType) {
+  async closePanel(panelType) {
     const panel = this.panels.get(panelType);
     if (panel) {
-      panel.hide();
+      await panel.hide();
     }
   }
 
@@ -137,3 +151,5 @@ class ExtensionManager {
 }
 
 export { ExtensionManager };
+
+export const extensionManager = new ExtensionManager();
diff --git a/src/core/Panel.js b/src/core/Panel.js
@@ -16,8 +16,15 @@ class Panel {
         cssFile: 'src/styles/styles.css',
         jsFile: 'src/panels/welcome/welcome.js',
         containerId: 'carbon-visualizer-welcome-panel',
-        className: 'cv cv-panel--welcome'
-      }
+        className: 'cv-panel--welcome'
+      },
+      results: {
+        htmlFile: 'src/panels/results/results.html',
+        cssFile: 'src/panels/results/results.css',
+        jsFile: 'src/panels/results/results.js',
+        containerId: 'carbon-visualizer-results-panel',
+        className: 'cv-panel--results'
+      },
     };
 
     return configs[type] || configs.welcome;
@@ -119,8 +126,9 @@ class Panel {
 
     while (retries < maxRetries) {
       const analyzeBtn = this.container.querySelector('#analyze-page-btn');
+      const backToWelcomeBtn = this.container.querySelector('#back-to-welcome-btn');
 
-      if (analyzeBtn) {
+      if (analyzeBtn || backToWelcomeBtn) {
         return; // Element found, we're good to go
       }
 
diff --git a/src/panels/results/results.html b/src/panels/results/results.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div id="cv-panel-content">
+    <header class="cv-panel__header">
+      <h1 class="cv-panel__title">Carbon Visualizer</h1>
+    </header>
+
+    <main class="cv-panel__content">
+      <div class="cv-results">
+        <div class="cv-results__icon">
+          🌱
+        </div>
+        <h2 class="cv-results__title">Results</h2>
+        <p class="cv-results__description">
+          This is where you'd see the results of the analysis. Coming soon!
+        </p>
+
+        <button class="cv-btn cv-btn--primary" id="back-to-welcome-btn">
+          Analyze another page
+        </button>
+      </div>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/src/panels/results/results.js b/src/panels/results/results.js
@@ -0,0 +1,24 @@
+// Results panel JavaScript
+import { extensionManager } from "../../core/ExtensionManager.js";
+
+export function initializePanel(panelType, data) {
+  // Get the container element
+  const container = data.container;
+  
+  if (!container) {
+    return;
+  }
+  
+  // Get back to welcome button from within the container
+  const backToWelcomeBtn = container.querySelector('#back-to-welcome-btn');
+  
+  // Check if button exists before adding event listener
+  if (!backToWelcomeBtn) {
+    return;
+  }
+  
+  // Event listener for back to welcome button
+  backToWelcomeBtn.addEventListener('click', async () => {
+    await extensionManager.openPanel('welcome');
+  });
+}
diff --git a/src/panels/welcome/welcome.html b/src/panels/welcome/welcome.html
@@ -12,15 +12,15 @@ <h1 class="cv-panel__title">Carbon Visualizer</h1>
     
     <main class="cv-panel__content">
       <div class="cv-welcome">
-        <div class="cv-welcome__icon">
+        <div class="cv-panel--welcome__icon">
           🌱
         </div>
-        <h2 class="cv-welcome__title">Welcome to Carbon Visualizer</h2>
-        <p class="cv-welcome__description">
+        <h2 class="cv-panel--welcome__title">Welcome to Carbon Visualizer</h2>
+        <p class="cv-panel--welcome__description">
           Assess your website's carbon footprint using Lighthouse performance metrics and CO2.js calculations.
         </p>
         
-        <ul class="cv-welcome__features">
+        <ul class="cv-panel--welcome__features">
           <li class="cv-feature">
             <span class="cv-feature__icon">⚡</span>
             <span class="cv-feature__text">Performance Analysis</span>
@@ -36,7 +36,7 @@ <h2 class="cv-welcome__title">Welcome to Carbon Visualizer</h2>
         </ul>
         
         <button class="cv-btn cv-btn--primary" id="analyze-page-btn">
-          Analyze This Page
+          Analyze this website
         </button>
       </div>
     </main>
diff --git a/src/panels/welcome/welcome.js b/src/panels/welcome/welcome.js
@@ -1,4 +1,5 @@
 // Welcome panel JavaScript
+import { extensionManager }  from "../../core/ExtensionManager.js";
 
 export function initializePanel(panelType, data) {
   // Get the container element
@@ -17,14 +18,7 @@ export function initializePanel(panelType, data) {
   }
   
   // Event listener for analyze button
-  analyzeBtn.addEventListener('click', () => {
-    // For now, just show a simple message
-    analyzeBtn.disabled = true;
-    analyzeBtn.textContent = 'Coming Soon!';
-    
-    setTimeout(() => {
-      analyzeBtn.disabled = false;
-      analyzeBtn.textContent = 'Analyze This Page';
-    }, 2000);
+  analyzeBtn.addEventListener('click', async () => {
+    await extensionManager.openPanel('results');
   });
 }
diff --git a/src/styles/results.css b/src/styles/results.css
@@ -0,0 +1,26 @@
+
+/* Results panel variant styles */
+
+.cv-panel--results {
+  text-align: center;
+  background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
+  color: var(--cv-white);
+}
+
+.cv-results__icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.cv-results__title {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--cv-white);
+}
+
+.cv-results__description {
+  margin: 0 0 2rem 0;
+  color: var(--cv-white);
+  line-height: 1.5;
+}
diff --git a/src/styles/welcome.css b/src/styles/welcome.css
@@ -5,7 +5,6 @@
   text-align: center;
   background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
   color: var(--cv-white);
-  min-block-size: fit-content;
 }
 
 .cv-panel--welcome__icon {
@@ -32,4 +31,3 @@
   gap: 0.75rem;
   margin-bottom: 2rem;
 }
-

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@`
`5`	`5`	`text-align: center;`
`6`	`6`	`background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);`
`7`	`7`	`color: var(--cv-white);`
`8`		`- min-block-size: fit-content;`
`9`	`8`	`}`
`10`	`9`
`11`	`10`	`.cv-panel--welcome__icon {`
`@@ -32,4 +31,3 @@`
`32`	`31`	`gap: 0.75rem;`
`33`	`32`	`margin-bottom: 2rem;`
`34`	`33`	`}`
`35`		`-`