From bb8eb56eb5b7d069ca1cb503b1cf35c17828b717 Mon Sep 17 00:00:00 2001 From: Jeremy Dixon Date: Mon, 18 Jan 2021 01:41:48 -0600 Subject: [PATCH] add options button panel --- assets/images/settings.svg | 1 + script_background.js | 15 +++++-- script_foreground.js | 77 ++++++++++++++++------------------ styles.css | 85 +++++++++++++++++++++++++++++++++----- toolbar.html | 22 ++++++++-- 5 files changed, 140 insertions(+), 60 deletions(-) create mode 100644 assets/images/settings.svg diff --git a/assets/images/settings.svg b/assets/images/settings.svg new file mode 100644 index 0000000..a4c852f --- /dev/null +++ b/assets/images/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/script_background.js b/script_background.js index 86473d0..524f746 100644 --- a/script_background.js +++ b/script_background.js @@ -12,10 +12,17 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse)=>{ switch (flag) { case "alert": handleAlert(request); + sendResponse("alerted") case "get": - //handleGet(request, sendResponse); - } - sendResponse("This is a mo'fuckin response") + const file = chrome.runtime.getURL('./toolbar.html'); + fetch(file) + .then((res) => { + return res.text() + }).then((html) => { + sendResponse(html) + }) + } + return true }) function handleAlert({message}){ @@ -30,5 +37,5 @@ function handleAlert({message}){ function handleGet({message}, sendResponse){ console.log('handling get'); - + } \ No newline at end of file diff --git a/script_foreground.js b/script_foreground.js index 4da4cba..43ee4c5 100644 --- a/script_foreground.js +++ b/script_foreground.js @@ -3,51 +3,44 @@ let config = { alert: { sound:1, frequency:1 - }, - watch: true -} - + } +}; function appendTool(html){ + // fetch the plugin HTML from the background script... chrome.runtime.sendMessage({message:{flag:"get", option:"toolbar.html"}}, function(res){ - console.log('balls', res ) + //... and append it + document.querySelector('.p-ia__view_header__spacer').innerHTML = res; + //... and it's event listeners + var start = document.querySelector('#start-timer'); + var stop = document.querySelector('#stop-timer'); + document.querySelector('#start-timer').addEventListener('click', function(){ + start.style.display = 'none'; + stop.style.display = 'inline-block'; + console.log('clicking Refresh every '+config.speed+' milliseconds'); + timer = setInterval(function(){ + var refresh_btn = document.querySelectorAll('[data-qa-action-id="refresh-queue"]')[0]; + if(refresh_btn){refresh_btn.click()}; + if(newQuestion()){ + //chrome.runtime.sendMessage({message:{flag:"alert", option:config.alert}}); + config.watch = false; + }; + }, config.speed); + return timer; + }); + document.querySelector('#stop-timer').addEventListener('click', function(){ + stop.style.display = 'none'; + start.style.display = 'inline-block'; + clearInterval(timer); + }); + document.querySelector('#settings-button').addEventListener('click', function(){ + if(document.querySelector('#options-container').style.display=="none"){ + document.querySelector('#options-container').style.display="block" + } else { + document.querySelector('#options-container').style.display="none" + } + }); }) - - - /* ADD HTML BUTTONS */ - var header = document.querySelector('.p-ia__view_header__spacer'); - header.innerHTML = "
START
STOP
"; - var start = document.querySelector('#start-timer'); - var stop = document.querySelector('#stop-timer'); - var alert = document.querySelector('#alert'); - var options = document.querySelector('#options'); - var timer; - - - start.addEventListener('click', function(){ - start.style.display = 'none'; - config.watch = true; - stop.style.display = 'inline-block'; - console.log('clicking Refresh every '+config.speed+' milliseconds'); - timer = setInterval(function(){ - var refresh_btn = document.querySelectorAll('[data-qa-action-id="refresh-queue"]')[0]; - if(refresh_btn){refresh_btn.click()}; - if(newQuestion()){ - //chrome.runtime.sendMessage({message:{flag:"alert", option:config.alert}}); - config.watch = false; - }; - }, config.speed); - return timer; - }) - - stop.addEventListener('click', function(){ - stop.style.display = 'none'; - start.style.display = 'inline-block'; - clearInterval(timer); - - }) - - //chrome.runtime.sendMessage({message:{flag:"alert", option:config.alert}}); } function newQuestion(){ @@ -59,4 +52,4 @@ function newQuestion(){ } } -window.addEventListener('load', appendTool) +window.addEventListener('load', appendTool); diff --git a/styles.css b/styles.css index 66bbdd6..062d64c 100644 --- a/styles.css +++ b/styles.css @@ -1,23 +1,88 @@ +#askAssist { + padding: 1rem; + height: 100px; + width: 60%; + margin-right: 2rem; + float: right; +} .cusBut { - border-radius: 5px; + border-radius: 3px; line-height: 1.6; - border: 2px solid #dddddd; - width: 75px; + border: 1px solid #dddddd; + min-width: 75px; height: 30px; - margin: 1rem; float: right; text-align: center; color:white; + padding: 0 8px 1px; } #start-timer { - background-color: #91d68b; + border: 1px solid rgba(0,122,90, .3); + color: #007a5a; + font-weight: 700; + font-size: 15px; + +} +#start-timer:hover { + box-shadow: 0 1px 3px 0 rgba(0,0,0,.08); + background: rgba(var(--sk_foreground_min,29,28,29),.04); } #stop-timer { - background-color: #E70002; - display:none; + display: none; + border: 1px solid rgba(226, 2, 2, 0.3); + color: #E70002; + font-weight: 700; + font-size: 15px; + cursor: pointer; } -#alert { - display: none; - background-color: #6abdd7; +#stop-timer:hover { + box-shadow: 0 1px 3px 0 rgba(0,0,0,.08); + background: rgba(var(--sk_foreground_min,29,28,29),.04); +} +#settings-button{ + color:rgba(0,122,90, .3); + float: right; + font-size: 3rem; + margin:0; + padding:0; + height: 30px; + line-height: 0.5; + margin-left: 1rem; + margin-right: 1rem; + cursor: pointer; } +#settings-button:hover{ + color:rgba(0,122,90, .9); + animation: rotation 10s infinite linear; +} +#options-container{ + display:none; + margin-top: -4px; + float: right; + max-width: 600px; + background-color: rgba(0,122,90, .05); + padding: 0.5rem; +} +#options-container>*{ + color:rgba(0,122,90); + border-color: rgba(0,122,90); +} +#options-container>input,select{ + border-radius: 3px; + border-width: 1px; + max-width: 80px; + border-style: solid; +} +#options-container>input{ + width: 40px; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } + } diff --git a/toolbar.html b/toolbar.html index 91e873b..f14f20e 100644 --- a/toolbar.html +++ b/toolbar.html @@ -1,4 +1,18 @@ - -
START
-
STOP
-
+
+ +
+ + + + + +
+

⚙

+
AskAssist
+
Stop Watching
+
\ No newline at end of file