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

start onboarding-panel-4 for site assignments

Browse source
This commit is contained in:
groovecoder 2017-05-05 13:46:58 -05:00
parent 5887f991b3
commit 8f80b527f5
2 changed files with 33 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
webextension/js/popup.js
View file

@ -12,6 +12,7 @@ const DEFAULT_ICON = "circle";
const P_ONBOARDING_1 = "onboarding1"; const P_ONBOARDING_1 = "onboarding1";
const P_ONBOARDING_2 = "onboarding2"; const P_ONBOARDING_2 = "onboarding2";
const P_ONBOARDING_3 = "onboarding3"; const P_ONBOARDING_3 = "onboarding3";
const P_ONBOARDING_4 = "onboarding4";
const P_CONTAINERS_LIST = "containersList"; const P_CONTAINERS_LIST = "containersList";
const P_CONTAINERS_EDIT = "containersEdit"; const P_CONTAINERS_EDIT = "containersEdit";
const P_CONTAINER_INFO = "containerInfo"; const P_CONTAINER_INFO = "containerInfo";
@ -69,8 +70,10 @@ const Logic = {
// Routing to the correct panel. // Routing to the correct panel.
.then(() => { .then(() => {
// If localStorage is disabled, we don't show the onboarding. // If localStorage is disabled, we don't show the onboarding.
if (!localStorage || localStorage.getItem("onboarded3")) { if (!localStorage || localStorage.getItem("onboarded4")) {
this.showPanel(P_CONTAINERS_LIST); this.showPanel(P_CONTAINERS_LIST);
} else if (localStorage.getItem("onboarded3")) {
this.showPanel(P_ONBOARDING_4);
} else if (localStorage.getItem("onboarded2")) { } else if (localStorage.getItem("onboarded2")) {
this.showPanel(P_ONBOARDING_3); this.showPanel(P_ONBOARDING_3);
} else if (localStorage.getItem("onboarded1")) { } else if (localStorage.getItem("onboarded1")) {
@ -215,8 +218,29 @@ Logic.registerPanel(P_ONBOARDING_3, {
// 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", () => { document.querySelector("#onboarding-almost-done-button").addEventListener("click", () => {
localStorage.setItem("onboarded3", true); localStorage.setItem("onboarded3", true);
Logic.showPanel(P_ONBOARDING_4);
});
},
// This method is called when the panel is shown.
prepare() {
return Promise.resolve(null);
},
});
// P_ONBOARDING_4: Fourth page for Onboarding.
// ----------------------------------------------------------------------------
Logic.registerPanel(P_ONBOARDING_4, {
panelSelector: ".onboarding-panel-4",
// This method is called when the object is registered.
initialize() {
// Let's move to the containers list panel.
document.querySelector("#onboarding-done-button").addEventListener("click", () => {
localStorage.setItem("onboarded4", true);
Logic.showPanel(P_CONTAINERS_LIST); Logic.showPanel(P_CONTAINERS_LIST);
}); });
}, },

7
webextension/popup.html
View file

@ -27,6 +27,13 @@
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" /> <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">A place for everything, and everything in its place.</h3> <h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
<p>Start with the containers we've created, or create your own.</p> <p>Start with the containers we've created, or create your own.</p>
<a href="#" id="onboarding-almost-done-button" class="onboarding-button">Next</a>
</div>
<div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
<img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
<h3 class="onboarding-title">Assign your favorite sites to containers..</h3>
<p>Assign your favorite sites to automatically open in containers.</p>
<a href="#" id="onboarding-done-button" class="onboarding-button">Done</a> <a href="#" id="onboarding-done-button" class="onboarding-button">Done</a>
</div> </div>