From 0d3493d555c07be5499cf1c28be439108a3f1bee Mon Sep 17 00:00:00 2001 From: solstice23 Date: Tue, 29 Nov 2022 01:39:58 +0800 Subject: [PATCH] Add gradient background --- README.md | 4 +- RefinedNowPlaying/main.js | 40 +++++++++++++++++- RefinedNowPlaying/manifest.json | 2 +- RefinedNowPlaying/settings-menu.html | 61 +++++++++++++++++++++++++++- RefinedNowPlaying/styles.css | 5 ++- 5 files changed, 104 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ec689f5..7fd19a9 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,6 @@ https://user-images.githubusercontent.com/23134847/202904157-74c344c9-a3de-44d4- - [x] 自定义菜单 - [x] 方形封面 - [x] 歌词模糊 -- [ ] 渐变背景 -- [ ] 主题色切换开关 +- [x] 渐变背景 +- [x] 主题色切换开关 - [ ] 适配亮色主题 diff --git a/RefinedNowPlaying/main.js b/RefinedNowPlaying/main.js index d8c32ac..7f7b5c5 100644 --- a/RefinedNowPlaying/main.js +++ b/RefinedNowPlaying/main.js @@ -177,8 +177,11 @@ function getGradientFromPalette(palette) { palette = palette.sort((a, b) => { return calcLuminance(a) - calcLuminance(b); }); - palette = palette.slice(palette.length / 2 - 3, palette.length / 2 + 3); - + palette = palette.slice(palette.length / 2 - 4, palette.length / 2 + 4); + palette = palette.sort((a, b) => { + return rgb2Hsl(b)[1] - rgb2Hsl(a)[1]; + }); + palette = palette.slice(0, 6); let differences = new Array(6); for(let i = 0; i < differences.length; i++){ @@ -400,6 +403,32 @@ const addSettingsMenu = async () => { document.body.style.setProperty(variable, mapping(slider.value)); sliderEnhance(slider); } + const bindSelectGroupToClasses = (selectGroup, defaultValue, mapping = (x) => { return x }) => { + const buttons = selectGroup.querySelectorAll(".rnp-select-group-btn"); + buttons.forEach(button => { + button.addEventListener("click", e => { + const value = e.target.getAttribute("value"); + buttons.forEach(button => { + button.classList.remove("selected"); + document.body.classList.remove(mapping(button.getAttribute("value"))); + }); + e.target.classList.add("selected"); + document.body.classList.add(mapping(value)); + setSetting(selectGroup.id, value); + }); + }); + const value = getSetting(selectGroup.id, defaultValue); + buttons.forEach(button => { + if (button.getAttribute("value") == value) { + button.classList.add("selected"); + document.body.classList.add(mapping(value)); + } else { + button.classList.remove("selected"); + document.body.classList.remove(mapping(button.getAttribute("value"))); + } + }); + } + const initSettings = () => { const rectangleCover = document.querySelector('#rectangle-cover'); @@ -408,6 +437,7 @@ const addSettingsMenu = async () => { const useNotosans = document.querySelector('#use-notosans'); const hideComments = document.querySelector('#hide-comments'); const partialBg = document.querySelector('#partial-bg'); + const gradientBgDynamic = document.querySelector('#gradient-bg-dynamic'); bindCheckboxToClass(rectangleCover, 'rectangle-cover', true); bindCheckboxToClass(lyricBlur, 'lyric-blur', true); @@ -415,15 +445,21 @@ const addSettingsMenu = async () => { bindCheckboxToClass(useNotosans, 'use-notosans', false); bindCheckboxToClass(hideComments, 'hide-comments', false); bindCheckboxToClass(partialBg, 'partial-bg', false); + bindCheckboxToClass(gradientBgDynamic, 'gradient-bg-dynamic', true); const bgBlur = document.querySelector('#bg-blur'); const bgDim = document.querySelector('#bg-dim'); + const bgDimForGradientBg = document.querySelector('#bg-dim-for-gradient-bg'); const bgOpacity = document.querySelector('#bg-opacity'); bindSliderToCSSVariable(bgBlur, '--bg-blur', 36, 'change', (x) => { return x + 'px' }); bindSliderToCSSVariable(bgDim, '--bg-dim', 55, 'input', (x) => { return x / 100 }); + bindSliderToCSSVariable(bgDimForGradientBg, '--bg-dim-for-gradient-bg', 45, 'input', (x) => { return x / 100 }); bindSliderToCSSVariable(bgOpacity, '--bg-opacity', 0, 'input', (x) => { return 1 - x / 100 }); + + const bgType = document.querySelector('#bg-type'); + bindSelectGroupToClasses(bgType, 'album', (x) => { return x == 'gradient' ? 'gradient-bg' : 'album-bg' }); } const settingsMenu = document.createElement('div'); settingsMenu.id = 'settings-menu'; diff --git a/RefinedNowPlaying/manifest.json b/RefinedNowPlaying/manifest.json index 6a23860..1cbb4ca 100644 --- a/RefinedNowPlaying/manifest.json +++ b/RefinedNowPlaying/manifest.json @@ -1,6 +1,6 @@ { "manifest_version": 1, - "version": "0.3", + "version": "0.4", "name": "RefinedNowPlaying", "injects": { "Main": [ diff --git a/RefinedNowPlaying/settings-menu.html b/RefinedNowPlaying/settings-menu.html index 7816def..00173a1 100644 --- a/RefinedNowPlaying/settings-menu.html +++ b/RefinedNowPlaying/settings-menu.html @@ -27,14 +27,29 @@
背景
+
+ +
+ + +
+
+
+ + +
-
+
+
+ + +
@@ -106,6 +121,8 @@ flex-direction: row; align-items: center; margin-bottom: 15px; + transition: all .3s ease; + height: var(--estimated-height, unset); } .rnp-checkbox-label { padding-left: 10px; @@ -184,6 +201,43 @@ pointer-events: none; } + .rnp-select-group-wrapper { + display: flex; + flex-direction: column; + margin-bottom: 15px; + } + .rnp-select-group-label { + margin-right: 10px; + margin-bottom: 10px; + } + .rnp-select-group { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: stretch; + flex: 1; + gap: 1px; + } + .rnp-select-group-btn { + flex: 1; + background-color: #dfe1e433; + border: none; + border-radius: 0; + padding-top: 4px; + padding-bottom: 4px; + transition: background-color .3s ease; + } + .rnp-select-group-btn:first-child { + border-radius: 6px 0 0 6px; + } + .rnp-select-group-btn:last-child { + border-radius: 0 6px 6px 0; + } + .rnp-select-group-btn.selected { + background-color: var(--accent-color); + font-weight: bold; + } + #rnp-settings-menu { @@ -249,7 +303,10 @@