diff --git a/src/core/ExtensionManager.js b/src/core/ExtensionManager.js index 58de51d..8d78c35 100644 --- 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 index faef7a3..466fb20 100644 --- 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 new file mode 100644 index 0000000..4359767 --- /dev/null +++ b/src/panels/results/results.html @@ -0,0 +1,30 @@ + + + + + + + +
+
+

Carbon Visualizer

+
+ +
+
+
+ 🌱 +
+

Results

+

+ This is where you'd see the results of the analysis. Coming soon! +

+ + +
+
+
+ + diff --git a/src/panels/results/results.js b/src/panels/results/results.js new file mode 100644 index 0000000..bfddec9 --- /dev/null +++ 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 index bc28712..8b8af27 100644 --- a/src/panels/welcome/welcome.html +++ b/src/panels/welcome/welcome.html @@ -12,15 +12,15 @@

Carbon Visualizer

-
+
🌱
-

Welcome to Carbon Visualizer

-

+

Welcome to Carbon Visualizer

+

Assess your website's carbon footprint using Lighthouse performance metrics and CO2.js calculations.

-
    +
    • âš¡ Performance Analysis @@ -36,7 +36,7 @@

      Welcome to Carbon Visualizer

diff --git a/src/panels/welcome/welcome.js b/src/panels/welcome/welcome.js index beb036c..7c1e301 100644 --- 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 new file mode 100644 index 0000000..46946ed --- /dev/null +++ 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 index 9124535..f016ca9 100644 --- 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; } -