diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2021-12-03 01:31:36 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-03 01:31:36 +0300 |
commit | f6da2e3d5316c5359ddf83d3f20faf9303ebb2ff (patch) | |
tree | 16f6b8fd5db4f513d7df64b68ac8f241e3bfab2b | |
parent | 12c0cf990760b1d7e9f6b404654f973a6ad11b7e (diff) | |
parent | 6262f24f7b8aa608b5a6706a7e2b20b1e3b6870d (diff) |
Merge pull request #141 from Frontesque/main
Major UI Update + Feature Request Implementation
-rw-r--r-- | Extensions/chrome/popup.css | 125 | ||||
-rw-r--r-- | Extensions/chrome/popup.html | 29 | ||||
-rw-r--r-- | Extensions/chrome/popup.js | 30 | ||||
-rw-r--r-- | Extensions/chrome/return-youtube-dislike.script.js | 28 | ||||
-rw-r--r-- | Extensions/firefox/firefox.zip | bin | 0 -> 24871 bytes | |||
-rw-r--r-- | Extensions/firefox/popup.css | 57 | ||||
-rw-r--r-- | Extensions/firefox/popup.html | 17 | ||||
-rw-r--r-- | Extensions/firefox/popup.js | 4 | ||||
-rw-r--r-- | Extensions/firefox/return-youtube-dislike.script.js | 25 |
9 files changed, 250 insertions, 65 deletions
diff --git a/Extensions/chrome/popup.css b/Extensions/chrome/popup.css index 2f54c1d..a3f88af 100644 --- a/Extensions/chrome/popup.css +++ b/Extensions/chrome/popup.css @@ -1,44 +1,115 @@ /* Variables */ :root { - --background: #111; - --primary: #ff4444; - --secondary: #272727; - --white: #fff; + --primary: #cc2929; + --accent: #581111; + + --background: #111; + --secondary: #272727; + --tertiary: #333333; + --lightGrey: #999; + --white: #fff; } /* Window Styling */ -html,body { - background-color: var(--background); - color: var(--white); - min-width: 300px; - padding: 0.5em; - font-family: Arial, Helvetica, sans-serif; - font-size: 14px; +html, +body { + background-color: var(--background); + color: var(--white); + min-width: 300px; + padding: 0.5em; + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; } h1 { - font-size: 26px; + font-size: 26px; } button { - color: var(--white); - background: var(--secondary); - cursor: pointer; - padding: 5px 16px; - border: none; - border-radius: 4px; - font-weight: 500; - box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%); + color: var(--white); + background: var(--secondary); + cursor: pointer; + padding: 5px 16px; + border: none; + border-radius: 4px; + font-weight: 500; + box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), + 0 1px 10px 0 rgb(0 0 0 / 12%); } #advancedToggle { - margin-top: 1em; - margin-bottom: 2em; + margin-top: 1em; + margin-bottom: 2em; } #advancedSettings { - display: none; - border: 2px solid var(--secondary); - border-radius: 4px; - padding: 0.5em; -}
\ No newline at end of file + display: none; + border: 2px solid var(--secondary); + border-radius: 0.5rem; + padding: 1rem; +} + +#advancedLegend { + color: var(--tertiary) !important; + /* margin: auto; */ /* Center the label */ + /* padding: .25rem .5rem; */ + /* border-radius: .25rem; */ + /* border: .25rem solid var(--secondary); */ +} + +/* Switches */ +.switch { + position: relative; + display: inline-block; + width: 30px; + height: 17px; + margin-bottom: 1rem; +} + +.switch:last-of-type { + margin-bottom: 0; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--secondary); + transition: 0.4s; + border-radius: 34px; +} + +.slider:before { + position: absolute; + content: ""; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background: var(--lightGrey); + transition: 0.4s; + border-radius: 50%; +} + +input:checked + .slider { + background: var(--accent); +} + +input:checked + .slider:before { + transform: translateX(13px); + background: var(--primary); +} + +.switchLabel { + margin-left: 0.5rem; + width: 250px !important; + transform: translateX(35px); + display: inline-block; +} diff --git a/Extensions/chrome/popup.html b/Extensions/chrome/popup.html index e5aa87e..903fb2f 100644 --- a/Extensions/chrome/popup.html +++ b/Extensions/chrome/popup.html @@ -1,13 +1,11 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta content="text/html; charset=utf-8"> + <meta content="text/html; charset=utf-8" /> <title>Return YouTube Dislike</title> - <link rel="stylesheet" href="popup.css"> + <link rel="stylesheet" href="popup.css" /> </head> <body> - - <center> <img src="icons/icon48.png" alt="Logo" /> <h1>Return YouTube Dislike</h1> @@ -18,15 +16,26 @@ <button id="link_discord">Discord</button> <br> -<!-- <button id="advancedToggle">Show Advanced</button>--> + <button id="advancedToggle">Show Settings</button> + <br> </center> - <div id="advancedSettings"> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid? - </div> - - + <fieldset id="advancedSettings"> + <legend id="advancedLegend">Settings</legend> + + <label class="switch"> + <input type="checkbox" id="disable_ratio_bar" /> + <span class="slider" /> + <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label + ><br /> + + <label class="switch"> + <input type="checkbox" id="disable_api_unlisted" /> + <span class="slider" /> + <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label + ><br /> + </fieldset> </body> <script src="popup.js"></script> </html> diff --git a/Extensions/chrome/popup.js b/Extensions/chrome/popup.js index 0d3c991..cfc64d5 100644 --- a/Extensions/chrome/popup.js +++ b/Extensions/chrome/popup.js @@ -1,33 +1,33 @@ /* Config */ const config = { advanced: false, - showAdvancedMessage: "Show Advanced", - hideAdvancedMessage: "Hide Advanced", + showAdvancedMessage: "Show Settings", + hideAdvancedMessage: "Hide Settings", links: { - website: 'https://returnyoutubedislike.com', - github: 'https://github.com/Anarios/return-youtube-dislike', - discord: 'https://discord.gg/mYnESY4Md5' + website: "https://returnyoutubedislike.com", + github: "https://github.com/Anarios/return-youtube-dislike", + discord: "https://discord.gg/mYnESY4Md5", }, }; /* Links */ -document.getElementById('link_website').addEventListener('click', () => { - chrome.tabs.create({url: config.links.website}); +document.getElementById("link_website").addEventListener("click", () => { + chrome.tabs.create({ url: config.links.website }); }); -document.getElementById('link_github').addEventListener('click', () => { - chrome.tabs.create({url: config.links.github}); +document.getElementById("link_github").addEventListener("click", () => { + chrome.tabs.create({ url: config.links.github }); }); -document.getElementById('link_discord').addEventListener('click', () => { - chrome.tabs.create({url: config.links.discord}); +document.getElementById("link_discord").addEventListener("click", () => { + chrome.tabs.create({ url: config.links.discord }); }); /* Advanced Toggle */ -const advancedToggle = document.getElementById('advancedToggle'); -advancedToggle.addEventListener('click', () => { - const adv = document.getElementById('advancedSettings'); +const advancedToggle = document.getElementById("advancedToggle"); +advancedToggle.addEventListener("click", () => { + const adv = document.getElementById("advancedSettings"); if (config.advanced) { adv.style.display = "none"; advancedToggle.innerHTML = config.showAdvancedMessage; @@ -39,8 +39,6 @@ advancedToggle.addEventListener('click', () => { } }); - - /* popup-script.js document.querySelector('#login') .addEventListener('click', function () { diff --git a/Extensions/chrome/return-youtube-dislike.script.js b/Extensions/chrome/return-youtube-dislike.script.js index d51cc00..0de7853 100644 --- a/Extensions/chrome/return-youtube-dislike.script.js +++ b/Extensions/chrome/return-youtube-dislike.script.js @@ -1,4 +1,8 @@ (function (extensionId) { + let storedData = { + dislikes: 0 + }; + function cLog(message, writer) { message = `[return youtube dislike]: ${message}`; if (writer) { @@ -9,10 +13,13 @@ } function getButtons() { - if (document.getElementById("menu-container").offsetParent === null) { + + //--- If Menu Element Is Displayed: ---// + if (document.getElementById('menu-container').offsetParent === null) { return document.querySelector( "ytd-menu-renderer.ytd-watch-metadata > div" ); + //--- If Menu Element Isnt Displayed: ---// } else { return document .getElementById("menu-container") @@ -44,6 +51,7 @@ return getDislikeButton().classList.contains("style-text"); } + function getState() { if (isVideoLiked()) { return "liked"; @@ -54,14 +62,16 @@ return "neutral"; } + //--- Sets The Likes And Dislikes Values ---// function setLikes(likesCount) { getButtons().children[0].querySelector("#text").innerText = likesCount; } - function setDislikes(dislikesCount) { getButtons().children[1].querySelector("#text").innerText = dislikesCount; } + + function setState() { let statsSet = false; chrome.runtime.sendMessage( @@ -78,6 +88,7 @@ if (response.likes || response.dislikes) { const formattedDislike = numberFormat(response.dislikes); setDislikes(formattedDislike); + storedData.dislikes = parseInt(response.dislikes); createRateBar(response.likes, response.dislikes); statsSet = true; } @@ -110,12 +121,21 @@ } function likeClicked() { - // console.log("like" + getState()); + console.log("Dislike State:",getState()); // setState(); } function dislikeClicked() { - // console.log("dislike" + getState()); + let state = getState(); + + console.log("Dislike State:",state); + + if (state == 'disliked') { + setDislikes(numberFormat(storedData.dislikes + 1)) + } else if (state == 'neutral') { + setDislikes(numberFormat(storedData.dislikes)) + } + // setState(); } diff --git a/Extensions/firefox/firefox.zip b/Extensions/firefox/firefox.zip Binary files differnew file mode 100644 index 0000000..c5e477e --- /dev/null +++ b/Extensions/firefox/firefox.zip diff --git a/Extensions/firefox/popup.css b/Extensions/firefox/popup.css index a9b86ad..f5df55f 100644 --- a/Extensions/firefox/popup.css +++ b/Extensions/firefox/popup.css @@ -1,8 +1,11 @@ /* Variables */ :root { + --primary: #CC2929; + --accent: #581111; + --background: #111; - --primary: #ff4444; --secondary: #272727; + --lightGrey: #999; --white: #fff; } @@ -42,4 +45,56 @@ button { border-radius: 4px; padding: 0.5em; margin-right: 1em; /* FIREFOX ONLY */ +} + +/* Switches */ +.switch { + position: relative; + display: inline-block; + width: 30px; + height: 17px; + margin-bottom: 0.5em; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--secondary); + transition: .4s; + border-radius: 34px; +} + +.slider:before { + position: absolute; + content: ''; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background: var(--lightGrey); + transition: .4s; + border-radius: 50%; +} + +input:checked+.slider { + background: var(--accent); +} + +input:checked+.slider:before { + transform: translateX(13px); + background: var(--primary); +} + +.switchLabel { + width: 250px !important; + transform: translateX(35px); + display: inline-block; }
\ No newline at end of file diff --git a/Extensions/firefox/popup.html b/Extensions/firefox/popup.html index e5aa87e..dc8e4fb 100644 --- a/Extensions/firefox/popup.html +++ b/Extensions/firefox/popup.html @@ -18,12 +18,25 @@ <button id="link_discord">Discord</button> <br> -<!-- <button id="advancedToggle">Show Advanced</button>--> + <button id="advancedToggle">Show Settings</button> + <br> </center> <div id="advancedSettings"> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo laboriosam, veritatis sint dolores assumenda harum quidem molestiae ad repellendus aliquid? + + <label class="switch"> + <input type="checkbox" id="disable_ratio_bar" /> + <span class="slider" /> + <span class="switchLabel">Lorem ipsum dolor sit amet</span> + </label><br> + + <label class="switch"> + <input type="checkbox" id="disable_api_unlisted" /> + <span class="slider" /> + <span class="switchLabel">Lorem ipsum dolor sit amet</span> + </label><br> + </div> diff --git a/Extensions/firefox/popup.js b/Extensions/firefox/popup.js index 0d3c991..9cde399 100644 --- a/Extensions/firefox/popup.js +++ b/Extensions/firefox/popup.js @@ -1,8 +1,8 @@ /* Config */ const config = { advanced: false, - showAdvancedMessage: "Show Advanced", - hideAdvancedMessage: "Hide Advanced", + showAdvancedMessage: "Show Settings", + hideAdvancedMessage: "Hide Settings", links: { website: 'https://returnyoutubedislike.com', diff --git a/Extensions/firefox/return-youtube-dislike.script.js b/Extensions/firefox/return-youtube-dislike.script.js index b7a7cf6..c4f31bc 100644 --- a/Extensions/firefox/return-youtube-dislike.script.js +++ b/Extensions/firefox/return-youtube-dislike.script.js @@ -1,3 +1,7 @@ +let storedData = { + dislikes: 0 +}; + function cLog(message, writer) { message = `[return youtube dislike]: ${message}`; if (writer) { @@ -8,8 +12,11 @@ function cLog(message, writer) { } function getButtons() { + + //--- If Menu Element Is Displayed: ---// if (document.getElementById("menu-container").offsetParent === null) { return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div"); + //--- If Menu Element Isnt Displayed: ---// } else { return document .getElementById("menu-container") @@ -51,14 +58,15 @@ function getState() { return "neutral"; } +//--- Sets The Likes And Dislikes Values ---// function setLikes(likesCount) { getButtons().children[0].querySelector("#text").innerText = likesCount; } - function setDislikes(dislikesCount) { getButtons().children[1].querySelector("#text").innerText = dislikesCount; } + function setState() { let statsSet = false; browser.runtime.sendMessage( @@ -74,6 +82,7 @@ function setState() { if (response.likes || response.dislikes) { const formattedDislike = numberFormat(response.dislikes); setDislikes(formattedDislike); + storedData.dislikes = parseInt(response.dislikes); createRateBar(response.likes, response.dislikes); statsSet = true; } @@ -95,6 +104,7 @@ function setState() { cLog(JSON.stringify(response)); if (response != undefined && !statsSet) { const formattedDislike = numberFormat(response.dislikes); + storedData.dislikes = response.dislikes; // setLikes(response.likes); console.log(response); setDislikes(formattedDislike); @@ -106,12 +116,21 @@ function setState() { } function likeClicked() { - // console.log("like" + getState()); + console.log("Dislike State:",getState()); // setState(); } function dislikeClicked() { - // console.log("dislike" + getState()); + let state = getState(); + + console.log("Dislike State:",state); + + if (state == 'disliked') { + setDislikes(numberFormat(storedData.dislikes + 1)) + } else if (state == 'neutral') { + setDislikes(numberFormat(storedData.dislikes)) + } + // setState(); } |