From 728698a90a3d4fa45c59fb4b51212b4d9e8bf1af Mon Sep 17 00:00:00 2001 From: spiceywasabi Date: Thu, 1 Feb 2024 23:03:22 -0800 Subject: [PATCH] add changes for wizard side panel --- core/script.js | 14 +++-------- core/style.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++ core/wizard.js | 49 ++++++++++++++++++++++++++++++++++---- index.html | 20 ++++++++++++---- 4 files changed, 126 insertions(+), 21 deletions(-) diff --git a/core/script.js b/core/script.js index b3e6b84..70fe2e3 100644 --- a/core/script.js +++ b/core/script.js @@ -16,14 +16,12 @@ const maxLogLength = 100; const log = document.getElementById("log"); const stepBox = document.getElementById("steps-container"); const butWelcome = document.getElementById("btnWelcome"); -const butAdvanced = document.getElementById("btnAdvanced"); const butRejectFlash = document.getElementById("btnDeny"); const butWizardStart = document.getElementById("btnWizardStart"); const butStart = document.getElementById("btnStart"); const butConnect = document.getElementById("btnConnect"); const butSkipWelcome = document.getElementById("welcomeScreenCheck"); -const butAdvancedMode = document.getElementById("advancedMode"); const agreementModal = document.getElementById("agreement-modal"); // Console Modal @@ -83,8 +81,7 @@ var settings = { "devWiFiPass": txtSSIDPass, "devWifiMode": butWifiMode, "firmwareRelease": butBranch, - "skipWelcome": butSkipWelcome, - "advancedMode": butAdvancedMode + "skipWelcome": butSkipWelcome } var releaseDataCache = {} @@ -194,7 +191,6 @@ document.addEventListener("DOMContentLoaded", () => { // set the clear button and reset butWelcome.addEventListener("click", clickWelcome); - butAdvanced.addEventListener("click", clickAdvanced); butStart.addEventListener("click",clickWelcomeStart); butRejectFlash.addEventListener("click",clickRejectFlash); //butSkipWelcome.addEventListener("click", clickSkipWelcome); @@ -228,7 +224,7 @@ document.addEventListener("DOMContentLoaded", () => { // to ensure people read things. butWelcome.disabled=true; butProgram.disabled = true; - buildReleaseSelectors(); // DISABLE IN DEBUG / RENABLE FOR RELEASE + //buildReleaseSelectors(); // DISABLE IN DEBUG / RENABLE FOR RELEASE accordionDisable(); logMsg("Welcome to O.MG Web Serial Flasher. Ready..."); @@ -518,11 +514,7 @@ async function clickAdvanced(){ } async function clickWelcome() { - if(!butWizardStart.classList.contains("d-none") || butAdvancedMode.checked == false){ - switchStep("step-mode-selector"); - } else { - await clickAdvanced(); - } + await clickAdvanced(); } async function clickRejectFlash(){ diff --git a/core/style.css b/core/style.css index 3c6cb2f..b00409e 100644 --- a/core/style.css +++ b/core/style.css @@ -244,4 +244,68 @@ button.fancy:hover::after { .wizard-button { padding-left: 5px; padding-right: 4px; +} + +.wizard-container { + margin-top: 20px; +} + +.wizard-steps { + margin-top: 10px; + padding-top: 2rem; +} + + +#wizard-slideout { + background: #fafafa; + color: #333; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Shadow */ + position: fixed; + top: 0; + left: -600px; + width: 600px; + height: 100%; + z-index: 9999; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + transition-duration: 0.3s; +} + +#wizard-slideout.on { + left: 0; +} + +.wizard-footer { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 8rem; + background-color: rgba(255, 255, 255, 0.5); /* Transparent white background */ + box-shadow: 0 4px 2px -2px gray; +} + +.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } +.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } +.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + +.wizard-close-button { + position: absolute; + top: 10px; + right: 15px; + cursor: pointer; + font-size: 18px; + color: #b8b8b8; + text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); +} + +.start-support { + position: fixed; + bottom: 10px; + right: 10px; + background-color: #f0f0f0; + padding: 10px; + border: 1px solid #ccc; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } \ No newline at end of file diff --git a/core/wizard.js b/core/wizard.js index bec7790..4185ce5 100644 --- a/core/wizard.js +++ b/core/wizard.js @@ -2,8 +2,10 @@ "use strict"; const wizardFile = 'wizard/wizard.json' -const stepsContainer = document.getElementById('steps-container'); +const helpPanel = document.getElementById('wizard-slideout') +const stepsContainer = document.getElementById('wizard-steps'); const butWizard = document.getElementById("btnWizardStart"); +const butCloseWizard = document.getElementById("wizard-close-button") let wizardStart = "" @@ -15,6 +17,26 @@ function doesElementExist(elementId) { return !!document.getElementById(elementId); } + +async function wizardStep(activeStep) { + // this may need to be more specific + let steps = stepsContainer.getElementsByClassName("wizard-step"); + console.log("in here") + console.log(steps); + console.log(activeStep); + for (let i = 0; i < steps.length; i++) { + let step = steps[i]; + console.log(activeStep); + console.log(step); + if (activeStep === step.id) { + step.classList.remove("d-none"); + } else { + step.classList.add("d-none"); + } + } +} + + async function loadWizard() { fetch(wizardFile) .then(response => { @@ -37,11 +59,12 @@ async function loadWizard() { function generateStepHTML(step) { var stepContainer = document.createElement('div'); - stepContainer.classList.add('step', 'd-none'); + stepContainer.classList.add('wizard-step', 'd-none'); stepContainer.id = `wizard_${step.step}`; var h2Element = document.createElement('h2'); h2Element.textContent = step.title; + h2Element.classList.add('pb-2','border-bottom'); stepContainer.appendChild(h2Element); @@ -49,7 +72,7 @@ function generateStepHTML(step) { let imageDiv = document.createElement('div'); imageDiv.classList.add('wizard-image',"container"); let imageRes = document.createElement('img'); - imageRes.classList.add("img-fluid","mw-80") + imageRes.classList.add("img-fluid","mw-80","rounded-4","shadow-lg"); imageRes.src = step.image; imageRes.alt = step.step; imageDiv.appendChild(imageRes); @@ -119,6 +142,8 @@ function renderWizard(steps){ } steps.forEach(step => { stepsContainer.prepend(generateStepHTML(step)); + console.log(stepsContainer) + console.log(generateStepHTML(step)) }); } @@ -142,13 +167,22 @@ function handleNextWizardStep(step,clicked_step){ ready = window[step.validator](step); } if(ready){ - switchStep(next_step); + wizardStep(next_step); } } else { console.log(`Attempting to navigate to nonexistant wizard step ${clicked_step}`) } } +function toggleHelpPanel(){ + helpPanel.classList.toggle("on"); + if(helpPanel.classList.contains("on")){ + butWizard.textContent="Close Help" + } else { + butWizard.textContent = "Continue Help" + } +} + document.addEventListener('DOMContentLoaded', () => { loadWizard(); console.log("HERE"); @@ -156,7 +190,12 @@ document.addEventListener('DOMContentLoaded', () => { butWizard.addEventListener('click', async function() { if(wizardStart != ""){ logMsg(`User starting guided wizard for flashing. Initial Step: ${wizardStart}`) - await switchStep(wizardStart); + toggleHelpPanel(); + await wizardStep(wizardStart); + } }); + butCloseWizard.addEventListener('click', () => { + toggleHelpPanel(); + }) }); diff --git a/index.html b/index.html index 8f292ac..80eaa00 100644 --- a/index.html +++ b/index.html @@ -149,7 +149,7 @@

Terms of Use

-
+
- +
- + -->
@@ -555,6 +553,15 @@
Help: Programming
+
+
+
X
+
+ +
+
+
+
+
+ +