From 90b29706e3dbbd57953d298458b07ef88b5286fd Mon Sep 17 00:00:00 2001 From: Benjamin Robinet Date: Fri, 9 Apr 2021 16:52:04 +0200 Subject: [PATCH 1/6] The "for" attribute of a label is made to match an ID (not a name) --- popup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/popup.html b/popup.html index cdc5d4a..b80e194 100644 --- a/popup.html +++ b/popup.html @@ -84,7 +84,7 @@
- +
From 0f076f5f1d550765e8900e0c21105d5a850f671e Mon Sep 17 00:00:00 2001 From: Benjamin Robinet Date: Fri, 9 Apr 2021 16:53:17 +0200 Subject: [PATCH 2/6] The "for" attribute of a label is made to match an ID (not a name) --- popup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/popup.html b/popup.html index b80e194..761fa4a 100644 --- a/popup.html +++ b/popup.html @@ -101,7 +101,7 @@
- +
From 668b66df1e086ef46b7d6d00efa266026bf90a37 Mon Sep 17 00:00:00 2001 From: Benjamin Robinet Date: Fri, 9 Apr 2021 16:55:25 +0200 Subject: [PATCH 3/6] Reformat --- popup.html | 317 +++++++++++++++++++++++++++-------------------------- 1 file changed, 159 insertions(+), 158 deletions(-) diff --git a/popup.html b/popup.html index 761fa4a..687a783 100644 --- a/popup.html +++ b/popup.html @@ -1,174 +1,175 @@ - + - - -
+ + +
-
- - - -
+
+ + + +
-
- - - -
+
+ + + +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrevYou
-
-
-
- - -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrevYou
+
+
+
+ + +
-
- - -
-
+
+ + +
+
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Preview -
-
-

Produced with ♥️ by BenjaminCode. Design by BastiUi

-
- -
- - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Preview +
+
+

Produced with ♥️ by BenjaminCode. Design by BastiUi

+
+ +
+ + From 1c2ea0a7202afbf588298211789adb8301b0fd9b Mon Sep 17 00:00:00 2001 From: Benjamin Robinet Date: Fri, 9 Apr 2021 16:58:37 +0200 Subject: [PATCH 4/6] Reformat --- popup.js | 128 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 71 insertions(+), 57 deletions(-) diff --git a/popup.js b/popup.js index c8a38c6..fa3fbf4 100644 --- a/popup.js +++ b/popup.js @@ -20,53 +20,67 @@ const eyesPupils = document.querySelectorAll('.js-animated-eyes') // Once the page is loaded, check if the Dark Mode is activated with a function that // returns 'on' or null depending on the existence of a 'darkMode' key on LocalStorage -window.onload = () =>{ - if ( isDarkModeOn() == 'on' ){ +window.onload = () => { + if (isDarkModeOn() == 'on') { setTimeout(darkMode, 300) } -} +} -darkModeBtn.addEventListener( 'click', () => { - if ( isDarkModeOn() == null ) { +darkModeBtn.addEventListener('click', () => { + if (isDarkModeOn() == null) { darkMode() - localStorage.setItem( 'darkMode', 'on' ) + localStorage.setItem('darkMode', 'on') } else { lightMode() - localStorage.removeItem( 'darkMode' ) + localStorage.removeItem('darkMode') } }) // Function that checks the existence of the key 'darkMode' on LocalStorage -function isDarkModeOn(){ - return localStorage.getItem( 'darkMode' ) ? 'on' : null +function isDarkModeOn() { + return localStorage.getItem('darkMode') ? 'on' : null } -function darkMode(){ - darkModeBtn.innerHTML = +function darkMode() { + darkModeBtn.innerHTML = '' - +'' - +'' - - let styleToChange = { bg : '#161827', btnBg : '#1C1F30', headerColor : '#FFFFFF', formText : '#FFFFFF', btnColor : '#24008C', btnBorder : '#6116FF' } + + '' + + '' + + let styleToChange = { + bg: '#161827', + btnBg: '#1C1F30', + headerColor: '#FFFFFF', + formText: '#FFFFFF', + btnColor: '#24008C', + btnBorder: '#6116FF' + } - switchProperties( styleToChange ) + switchProperties(styleToChange) } -function lightMode(){ - darkModeBtn.innerHTML = +function lightMode() { + darkModeBtn.innerHTML = '' - +'' - +'' - - let styleToChange = { bg : '#FFFFFF', btnBg : '#F8F5FF', headerColor : '#000000', formText : '#000000', btnColor : '#6116FF', btnBorder : '#24008C' } + + '' + + '' + + let styleToChange = { + bg: '#FFFFFF', + btnBg: '#F8F5FF', + headerColor: '#000000', + formText: '#000000', + btnColor: '#6116FF', + btnBorder: '#24008C' + } - switchProperties( styleToChange ) + switchProperties(styleToChange) } -function switchProperties(properties){ - for ( let el in properties ){ - root.style.setProperty( '--'+el, properties[el] ) +function switchProperties(properties) { + for (let el in properties) { + root.style.setProperty('--' + el, properties[el]) } } @@ -92,13 +106,13 @@ function initInputs() { channelNameInput.value = storedThumbnail.channelName || null videoThumbnail = storedThumbnail.thumbnail - if(videoThumbnail) { + if (videoThumbnail) { previewVideo.src = videoThumbnail thumbnailInput.classList.add('loaded') } channelThumbnailBase64 = storedThumbnail.channelThumbnail - if(channelThumbnailBase64) { + if (channelThumbnailBase64) { preview.src = channelThumbnailBase64 channelThumbnailInput.classList.add('loaded') } @@ -113,7 +127,7 @@ randomButton.addEventListener('change', (e) => { const isChecked = e.target.checked if (isChecked) { e.target.parentNode.parentNode.classList.add('active') - }else { + } else { e.target.parentNode.parentNode.classList.remove('active') } }) @@ -126,7 +140,7 @@ async function launchScript(shuffle = false) { let [tab] = await chrome.tabs.query({active: true, currentWindow: true}) // If the user is on another site than YT if (tab === undefined || !tab.url.startsWith('https://www.youtube.com/')) { - chrome.storage.local.set({ errorMessage: 'You need to be on the Youtube homepage !' }) + chrome.storage.local.set({errorMessage: 'You need to be on the Youtube homepage !'}) return } @@ -200,13 +214,13 @@ function findCard() { const activeScreen = document.querySelector('[role="main"]') // Target only ytd-rich-item-renderer element and not ytd-rich-item-renderer with id content for the main page let cards = activeScreen.querySelectorAll('.ytd-rich-item-renderer:not(#content)') - if(cards.length === 0) { + if (cards.length === 0) { cards = activeScreen.getElementsByTagName('ytd-grid-video-renderer') } chrome.storage.local.get('thumbnailProperties', (result) => { - if(result.thumbnailProperties.shuffle) { + if (result.thumbnailProperties.shuffle) { const min = 1 const max = 12 cardPositionIndex = Math.floor(Math.random() * (max - min + 1)) + min @@ -267,58 +281,58 @@ function refreshApp() { // First, we find the eyes's positions and their center : let eyeCoord = headerEye.getBoundingClientRect() -let centerOfEyeX = Math.round(( ( eyeCoord.right - eyeCoord.left ) / 2 ) + eyeCoord.left) -let centerOfEyeY = Math.round(( ( eyeCoord.bottom - eyeCoord.top ) / 2 ) + eyeCoord.top) +let centerOfEyeX = Math.round(((eyeCoord.right - eyeCoord.left) / 2) + eyeCoord.left) +let centerOfEyeY = Math.round(((eyeCoord.bottom - eyeCoord.top) / 2) + eyeCoord.top) // On mousemove, we locate the mouse position and compare its X & Y coordinates to the eyes's center. // let=eyeDirection indicates the eyes's direction with cardinal directions -document.addEventListener('mousemove', (e) =>{ +document.addEventListener('mousemove', (e) => { let mouseX = e.clientX let mouseY = e.clientY let eyeDirection eyeDirection = mouseY < centerOfEyeY ? 'N' : 'S' eyeDirection += mouseX < centerOfEyeX ? 'W' : 'E' - - if ( approx ( mouseX, centerOfEyeX ) ){ - eyeDirection = mouseY > centerOfEyeY ? 'S' : 'N' + + if (approx(mouseX, centerOfEyeX)) { + eyeDirection = mouseY > centerOfEyeY ? 'S' : 'N' } - - if ( approx ( mouseY, centerOfEyeY ) ){ + + if (approx(mouseY, centerOfEyeY)) { eyeDirection = mouseX > centerOfEyeX ? 'E' : 'W' } - if ( approx ( mouseY, centerOfEyeY ) && approx ( mouseX, centerOfEyeX )){ + if (approx(mouseY, centerOfEyeY) && approx(mouseX, centerOfEyeX)) { eyeDirection = 'C' } // Cardinal directions are calculated on an approximative direction ( eyes's center +/- 10px ) - function approx(nbToCompare, nbToApprox){ - return ( nbToApprox-10 < nbToCompare && nbToCompare < nbToApprox + 10) + function approx(nbToCompare, nbToApprox) { + return (nbToApprox - 10 < nbToCompare && nbToCompare < nbToApprox + 10) } - function wichDirection(dir){ + function wichDirection(dir) { let direction = { - 'N' : '(2px, -5px)', - 'NE' : '(4px, -4px)', - 'E' : '(5px, 0px)', - 'SE' : '(4px, 4px)', - 'S' : '(2px, 5px)', - 'SW' : '(0px, 4px)', - 'W' : '(0px, 0px)', - 'NW' : '(0px, -4px)', - 'C' : '(2px, 0px)', + 'N': '(2px, -5px)', + 'NE': '(4px, -4px)', + 'E': '(5px, 0px)', + 'SE': '(4px, 4px)', + 'S': '(2px, 5px)', + 'SW': '(0px, 4px)', + 'W': '(0px, 0px)', + 'NW': '(0px, -4px)', + 'C': '(2px, 0px)', } return direction[dir] } - function setPupilsDirection(dir){ - for (let pupils of eyesPupils){ - pupils.style.setProperty('transform', 'translate'+(dir)) - + function setPupilsDirection(dir) { + for (let pupils of eyesPupils) { + pupils.style.setProperty('transform', 'translate' + (dir)) + } } From 05e3ff761c161148ef86557cdd24fbcc3a9c7f76 Mon Sep 17 00:00:00 2001 From: Benjamin Robinet Date: Fri, 9 Apr 2021 17:43:40 +0200 Subject: [PATCH 5/6] Add dropzone for thumbnail picture --- popup.html | 2 +- popup.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/popup.html b/popup.html index 687a783..777bb85 100644 --- a/popup.html +++ b/popup.html @@ -92,7 +92,7 @@
-