rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using browser.storage.local for onboarding stage

Browse source
This commit is contained in:
Jonathan Kingston 2017-07-05 16:07:24 -07:00
parent 69f06f96cc
commit e0abaa67e2
1 changed files with 56 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
webextension/js/popup.js
View file

@ -9,6 +9,8 @@ const DEFAULT_COLOR = "blue";
const DEFAULT_ICON = "circle"; const DEFAULT_ICON = "circle";
const NEW_CONTAINER_ID = "new"; const NEW_CONTAINER_ID = "new";
const ONBOARDING_STORAGE_KEY = "onboarding-stage";
// List of panels // List of panels
const P_ONBOARDING_1 = "onboarding1"; const P_ONBOARDING_1 = "onboarding1";
const P_ONBOARDING_2 = "onboarding2"; const P_ONBOARDING_2 = "onboarding2";
@ -90,20 +92,52 @@ const Logic = {
// Routing to the correct panel. // Routing to the correct panel.
// If localStorage is disabled, we don't show the onboarding. // If localStorage is disabled, we don't show the onboarding.
if (!localStorage || localStorage.getItem("onboarded5")) { const data = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
this.showPanel(P_CONTAINERS_LIST); let onboarded = data[ONBOARDING_STORAGE_KEY];
} else if (localStorage.getItem("onboarded4")) { if (!onboarded) {
this.showPanel(P_ONBOARDING_5); // Legacy local storage used before panel 5
} else if (localStorage.getItem("onboarded3")) { if (localStorage.getItem("onboarded4")) {
this.showPanel(P_ONBOARDING_4); onboarded = 4;
} else if (localStorage.getItem("onboarded2")) { } else if (localStorage.getItem("onboarded3")) {
this.showPanel(P_ONBOARDING_3); onboarded = 3;
} else if (localStorage.getItem("onboarded1")) { } else if (localStorage.getItem("onboarded2")) {
this.showPanel(P_ONBOARDING_2); onboarded = 2;
} else { } else if (localStorage.getItem("onboarded1")) {
this.showPanel(P_ONBOARDING_1); onboarded = 1;
} else {
onboarded = 0;
}
this.setOnboardingStage(onboarded);
} }
switch (onboarded) {
case 5:
this.showPanel(P_CONTAINERS_LIST);
break;
case 4:
this.showPanel(P_ONBOARDING_5);
break;
case 3:
this.showPanel(P_ONBOARDING_4);
break;
case 2:
this.showPanel(P_ONBOARDING_3);
break;
case 1:
this.showPanel(P_ONBOARDING_2);
break;
case 0:
default:
this.showPanel(P_ONBOARDING_1);
break;
}
},
setOnboardingStage(stage) {
return browser.storage.local.set({
[ONBOARDING_STORAGE_KEY]: stage
});
}, },
async clearBrowserActionBadge() { async clearBrowserActionBadge() {
@ -316,8 +350,8 @@ Logic.registerPanel(P_ONBOARDING_1, {
initialize() { initialize() {
// Let's move to the next panel. // Let's move to the next panel.
[...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => { [...document.querySelectorAll(".onboarding-start-button")].forEach(startElement => {
Logic.addEnterHandler(startElement, () => { Logic.addEnterHandler(startElement, async function () {
localStorage.setItem("onboarded1", true); await Logic.setOnboardingStage(1);
Logic.showPanel(P_ONBOARDING_2); Logic.showPanel(P_ONBOARDING_2);
}); });
}); });
@ -340,8 +374,8 @@ Logic.registerPanel(P_ONBOARDING_2, {
initialize() { initialize() {
// Let's move to the containers list panel. // Let's move to the containers list panel.
[...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => { [...document.querySelectorAll(".onboarding-next-button")].forEach(nextElement => {
Logic.addEnterHandler(nextElement, () => { Logic.addEnterHandler(nextElement, async function () {
localStorage.setItem("onboarded2", true); await Logic.setOnboardingStage(2);
Logic.showPanel(P_ONBOARDING_3); Logic.showPanel(P_ONBOARDING_3);
}); });
}); });
@ -364,8 +398,8 @@ Logic.registerPanel(P_ONBOARDING_3, {
initialize() { initialize() {
// Let's move to the containers list panel. // Let's move to the containers list panel.
[...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => { [...document.querySelectorAll(".onboarding-almost-done-button")].forEach(almostElement => {
Logic.addEnterHandler(almostElement, () => { Logic.addEnterHandler(almostElement, async function () {
localStorage.setItem("onboarded3", true); await Logic.setOnboardingStage(3);
Logic.showPanel(P_ONBOARDING_4); Logic.showPanel(P_ONBOARDING_4);
}); });
}); });
@ -386,8 +420,8 @@ Logic.registerPanel(P_ONBOARDING_4, {
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
// Let's move to the containers list panel. // Let's move to the containers list panel.
document.querySelector("#onboarding-done-button").addEventListener("click", () => { Logic.addEnterHandler(document.querySelector("#onboarding-done-button"), async function () {
localStorage.setItem("onboarded4", true); await Logic.setOnboardingStage(4);
Logic.showPanel(P_ONBOARDING_5); Logic.showPanel(P_ONBOARDING_5);
}); });
}, },
@ -407,8 +441,8 @@ Logic.registerPanel(P_ONBOARDING_5, {
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
// Let's move to the containers list panel. // Let's move to the containers list panel.
document.querySelector("#onboarding-longpress-button").addEventListener("click", () => { Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async function () {
localStorage.setItem("onboarded5", true); await Logic.setOnboardingStage(5);
Logic.showPanel(P_CONTAINERS_LIST); Logic.showPanel(P_CONTAINERS_LIST);
}); });
}, },