Skip to content

Commit

Permalink
Choice Screen second step (#8)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrmod
chrmod authored Oct 23, 2020
1 parent 63b662e commit 8ae4de2
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 15 deletions.
2 changes: 1 addition & 1 deletion src/choice-screen.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
async function onboarding() {
const { isOnboardingCompleted } = await browser.storage.local.get("isOnboardingCompleted");
if (!isOnboardingCompleted) {
if (DEBUG || !isOnboardingCompleted) {
await browser.tabs.create({
url: browser.extension.getURL('pages/choice-screen.html'),
});
Expand Down
2 changes: 1 addition & 1 deletion src/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.1.5",
"version": "0.1.6",
"browser_specific_settings": {
"gecko": {
"id": "search@ghostery.com"
Expand Down
139 changes: 135 additions & 4 deletions src/pages/choice-screen.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@
color: #4a4a4a;
font-family: Roboto;
}
body {
position: relative;
}
.header {
text-align: left;
}
Expand Down Expand Up @@ -72,6 +75,7 @@
}
}
.engine {
cursor: pointer;
float: left;
display: flex;
width: 343px;
Expand Down Expand Up @@ -119,6 +123,73 @@
height: 37px;
margin-bottom: 8px;
}
.modal {
top: 60px;
margin: 0 auto;
left: 0;
right: 0;
position: absolute;
box-sizing: border-box;
width: 902px;
max-width: 902px;
border: 1px solid #4A4A4A;
background-color: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
}
.modal-content .engine-logo {
height: 58px;
margin-bottom: 71px;
}
.modal-content p {
width: 528px;
color: #4A4A4A;
font-family: Roboto;
font-size: 24px;
font-weight: 500;
letter-spacing: 0;
line-height: 42px;
text-align: center;
margin: 0 auto;
}
.cancel-button {
box-sizing: border-box;
height: 44px;
width: 161.92px;
border: 2px solid #4A4A4A;
border-radius: 3.52px;
background-color: transparent;
color: #4A4A4A;
font-family: Roboto;
font-size: 14.08px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
margin: 0 10px;
cursor: pointer;
}
.confirm-button {
height: 44px;
width: 161.92px;
border-radius: 3.52px;
border: 0;
background: linear-gradient(131.66deg, #FF7E74 0%, #00AEF0 100%);
color: #FFFFFF;
font-family: Roboto;
font-size: 14.08px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-align: center;
margin: 0 10px;
cursor: pointer;
}
.buttons {
margin-top: 71px;
margin-bottom: 71px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
Expand All @@ -129,7 +200,7 @@
<h1>Welcome! Choose your default search</h1>
<h2>Pick a default search engine for all your searches.</h2>
<div class="engines">
<a class="engine" data-name="Ghostery Search">
<a class="engine" data-modal="ghostery">
<div class="radio">
<img class="radio-off" src="../assets/radio-off.png" />
<img class="radio-on" src="../assets/radio-on.png" />
Expand All @@ -141,7 +212,7 @@ <h2>Pick a default search engine for all your searches.</h2>
</div>
<div class="spacer"></div>
</a>
<a class="engine" data-name="StartPage">
<a class="engine" data-modal="startpage">
<div class="radio">
<img class="radio-off" src="../assets/radio-off.png" />
<img class="radio-on" src="../assets/radio-on.png" />
Expand All @@ -152,7 +223,7 @@ <h2>Pick a default search engine for all your searches.</h2>
</div>
<div class="spacer"></div>
</a>
<a class="engine" data-name="Bing">
<a class="engine" data-modal="bing">
<div class="radio">
<img class="radio-off" src="../assets/radio-off.png" />
<img class="radio-on" src="../assets/radio-on.png" />
Expand All @@ -163,7 +234,7 @@ <h2>Pick a default search engine for all your searches.</h2>
</div>
<div class="spacer"></div>
</a>
<a class="engine" data-name="Yahoo">
<a class="engine" data-modal="yahoo">
<div class="radio">
<img class="radio-off" src="../assets/radio-off.png" />
<img class="radio-on" src="../assets/radio-on.png" />
Expand All @@ -176,5 +247,65 @@ <h2>Pick a default search engine for all your searches.</h2>
</a>
</div>
</section>
<div id="ghostery-modal" class="modal hidden">
<section class="header">
<img id="logo" src="../assets/GhosteryBrowser.svg" />
</section>
<section class="modal-content">
<img class="engine-logo" src="../assets/GhosterySearch.svg" />
<p>
With a Plus subscription, you can access the world’s first and only ad-free private search! We use a special cookie-less login to keep your search absolutely private.
</p>
<div class="buttons">
<button class="cancel-button">Cancel</button>
<button class="confirm-button" data-name="Ghostery Search">Confirm</button>
</div>
</section>
</div>
<div id="startpage-modal" class="modal hidden">
<section class="header">
<img id="logo" src="../assets/GhosteryBrowser.svg" />
</section>
<section class="modal-content">
<img class="engine-logo" src="../assets/StartPage.svg" />
<p>
With Startpage, you will see ads but they are private and do not use your data. This choice will be reflected in your Ghostery privacy settings.
</p>
<div class="buttons">
<button class="cancel-button">Cancel</button>
<button class="confirm-button" data-name="StartPage">Confirm</button>
</div>
</section>
</div>
<div id="yahoo-modal" class="modal hidden">
<section class="header">
<img id="logo" src="../assets/GhosteryBrowser.svg" />
</section>
<section class="modal-content">
<img class="engine-logo" src="../assets/Yahoo.svg" />
<p>
With Yahoo, you will see ads that use your data for targeting and attribution. This choice will be reflected in your Ghostery privacy settings.
</p>
<div class="buttons">
<button class="cancel-button">Cancel</button>
<button class="confirm-button" data-name="Yahoo">Confirm</button>
</div>
</section>
</div>
<div id="bing-modal" class="modal hidden">
<section class="header">
<img id="logo" src="../assets/GhosteryBrowser.svg" />
</section>
<section class="modal-content">
<img class="engine-logo" src="../assets/Bing.svg" />
<p>
With Bing, you will see ads that use your data for targeting and attribution. This choice will be reflected in your Ghostery privacy settings.
</p>
<div class="buttons">
<button class="cancel-button">Cancel</button>
<button class="confirm-button" data-name="Bing">Confirm</button>
</div>
</section>
</div>
</body>
</html>
40 changes: 31 additions & 9 deletions src/pages/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,36 @@ document.addEventListener('DOMContentLoaded', () => {
const engines = [...document.querySelectorAll('.engine')];
engines.forEach(engine => {
engine.addEventListener('click', async () => {
const name = engine.dataset.name;
await browser.ghostery.setDefaultSearchEngine(name);
const currentTab = await browser.tabs.getCurrent();
await browser.storage.local.set({
isOnboardingCompleted: true,
});
await browser.tabs.create({});
browser.tabs.remove(currentTab.id);
const name = engine.dataset.modal;
const modal = document.querySelector(`#${name}-modal`);
modal.classList.remove('hidden');
});
});
});

const cancelButtons = [...document.querySelectorAll('.modal .cancel-button')];
cancelButtons.forEach(button => {
button.addEventListener('click', closeModals);
});
const confirmButtons = [...document.querySelectorAll('.modal .confirm-button')];
confirmButtons.forEach(button => {
const name = button.dataset.name;
button.addEventListener('click', selectSearchEngine.bind(null, name));
});
});

async function selectSearchEngine(name) {
await browser.ghostery.setDefaultSearchEngine(name);
const currentTab = await browser.tabs.getCurrent();
await browser.storage.local.set({
isOnboardingCompleted: true,
});
await browser.tabs.create({});
browser.tabs.remove(currentTab.id);
}

function closeModals() {
const modals = [...document.querySelectorAll('.modal')];
modals.forEach(modal => {
modal.classList.add('hidden');
});
}

0 comments on commit 8ae4de2

Please sign in to comment.