From 015ac546f4beb444e33b1e0f4c51f216966d2d0b Mon Sep 17 00:00:00 2001 From: Danny Guo Date: Sun, 15 Apr 2018 14:55:24 -0400 Subject: [PATCH] Delay turning off PawBlock from the popup Suggested by #4. --- CHANGELOG.md | 2 + __tests__/.eslintrc.json | 3 +- __tests__/popup-test.js | 14 ++++--- extension/images/happy-cat.svg | 1 + extension/images/sad-pug.svg | 1 + extension/options.html | 2 +- extension/popup.html | 21 +++++++++- extension/scripts/popup.js | 73 ++++++++++++++++++++++++++++++++-- extension/styles/popup.css | 18 ++++++++- 9 files changed, 122 insertions(+), 13 deletions(-) create mode 100644 extension/images/happy-cat.svg create mode 100644 extension/images/sad-pug.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index fd76a40..27db612 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Changed +- Delay turning off PawBlock from the toolbar popup ## [0.4.0] - 2018-01-22 ### Changed diff --git a/__tests__/.eslintrc.json b/__tests__/.eslintrc.json index 55f121d..91c3da4 100644 --- a/__tests__/.eslintrc.json +++ b/__tests__/.eslintrc.json @@ -1,5 +1,6 @@ { "env": { - "jest": true + "jest": true, + "node": true } } diff --git a/__tests__/popup-test.js b/__tests__/popup-test.js index 9407f7e..8cf9d4a 100644 --- a/__tests__/popup-test.js +++ b/__tests__/popup-test.js @@ -1,9 +1,13 @@ +const fs = require('fs'); +const path = require('path'); + test('action popup', () => { - document.body.innerHTML = ` - - - - `; + const popup = fs.readFileSync( + path.join(__dirname, '../extension/popup.html'), + 'utf-8' + ); + + document.write(popup); window.browser = { storage: { diff --git a/extension/images/happy-cat.svg b/extension/images/happy-cat.svg new file mode 100644 index 0000000..27e51f6 --- /dev/null +++ b/extension/images/happy-cat.svg @@ -0,0 +1 @@ +Happy Cat \ No newline at end of file diff --git a/extension/images/sad-pug.svg b/extension/images/sad-pug.svg new file mode 100644 index 0000000..508f265 --- /dev/null +++ b/extension/images/sad-pug.svg @@ -0,0 +1 @@ +Sad Pug \ No newline at end of file diff --git a/extension/options.html b/extension/options.html index e201b93..c62d1bc 100644 --- a/extension/options.html +++ b/extension/options.html @@ -53,7 +53,7 @@

-

This can also be quickly toggled using the toolbar button.

+

This can also be toggled using the toolbar button.

diff --git a/extension/popup.html b/extension/popup.html index 786e448..14861bd 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -19,7 +19,7 @@

-
+

On

@@ -28,6 +28,25 @@

+
+

Are you sure you want to turn it off?

+ + + + +
+ Edit your options diff --git a/extension/scripts/popup.js b/extension/scripts/popup.js index 70c39e4..df2b6a6 100644 --- a/extension/scripts/popup.js +++ b/extension/scripts/popup.js @@ -5,10 +5,17 @@ if ( window.browser = window.chrome; } -var onButton = document.querySelector('#on-button'); -var offButton = document.querySelector('#off-button'); +const onButton = document.querySelector('#on-button'); +const offButton = document.querySelector('#off-button'); +const areYouSure = document.querySelector('#are-you-sure'); +const cancelButton = document.querySelector('#cancel-button'); +const confirmButton = document.querySelector('#confirm-button'); +let pawblockOn = false; +let countdown; function setStatus(on, saveToStorage) { + pawblockOn = on; + if (on) { onButton.classList.add('is-info'); offButton.classList.remove('is-info'); @@ -23,7 +30,7 @@ function setStatus(on, saveToStorage) { if (error) { console.error('Failed to set the status:', error.message); } else { - var status = on ? 'on' : 'off'; + const status = on ? 'on' : 'off'; browser.browserAction.setIcon({ path: { '16': 'images/icon-16-' + status + '.png', @@ -39,7 +46,7 @@ function setStatus(on, saveToStorage) { function restoreSettings() { browser.storage.sync.get({on: true}, function(items) { - var error = browser.runtime.lastError; + const error = browser.runtime.lastError; if (error) { console.error('Failed to retrieve settings:', error.message); } else { @@ -51,11 +58,69 @@ function restoreSettings() { document.addEventListener('DOMContentLoaded', restoreSettings); onButton.addEventListener('click', function() { + if (pawblockOn) { + return; + } + setStatus(true, true); }); offButton.addEventListener('click', function() { + if (!pawblockOn) { + return; + } + + areYouSure.style.display = 'block'; + + confirmButton.setAttribute('disabled', 'true'); + let counter = 5; + confirmButton.innerText = counter; + + if (countdown) { + clearInterval(countdown); + } + + countdown = setInterval(() => { + counter--; + confirmButton.innerText = counter; + if (counter <= 0) { + clearInterval(countdown); + confirmButton.removeAttribute('disabled'); + confirmButton.innerText = 'Yes'; + } + }, 1000); +}); + +cancelButton.addEventListener('click', () => { + areYouSure.style.display = ''; + + if (countdown) { + clearInterval(countdown); + countdown = null; + } +}); + +cancelButton.addEventListener('mouseenter', () => { + document.querySelector('#animal').src = 'images/happy-cat.svg'; +}); + +cancelButton.addEventListener('mouseleave', () => { + document.querySelector('#animal').src = 'images/sad-pug.svg'; +}); + +confirmButton.addEventListener('click', () => { + if (confirmButton.getAttribute('disabled')) { + return; + } + setStatus(false, true); + + areYouSure.style.display = ''; + + if (countdown) { + clearInterval(countdown); + countdown = null; + } }); document.querySelector('#options-link').addEventListener('click', function() { diff --git a/extension/styles/popup.css b/extension/styles/popup.css index 3fbe57d..13530e8 100644 --- a/extension/styles/popup.css +++ b/extension/styles/popup.css @@ -16,10 +16,26 @@ h1 { margin-bottom: 0.2em; } -#buttons { +#status-buttons, #confirm-buttons { justify-content: center; } +#confirm-buttons { + margin-top: 15px; +} + +.button { + min-width: 100px; +} + #on-button, #off-button { min-width: 55px; } + +#are-you-sure { + display: none; +} + +img { + max-width: 150px; +}