From 104621841be7e8a8ba2774a6d5925117cde2b9ec Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 28 Jan 2023 17:11:15 +0000 Subject: [PATCH] Update JS to show live changes and set light color values --- app/Config/setting-defaults.php | 2 +- resources/js/components/index.js | 2 +- .../js/components/setting-app-color-picker.js | 50 ----------- .../js/components/setting-app-color-scheme.js | 82 +++++++++++++++++++ .../js/components/setting-color-picker.js | 2 +- resources/js/components/tabs.js | 2 +- resources/js/services/util.js | 2 +- .../views/common/custom-styles.blade.php | 14 +--- .../views/settings/customization.blade.php | 12 ++- .../parts/setting-color-scheme.blade.php | 6 +- 10 files changed, 104 insertions(+), 70 deletions(-) delete mode 100644 resources/js/components/setting-app-color-picker.js create mode 100644 resources/js/components/setting-app-color-scheme.js diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php index 005fddfd0..88c4612ca 100644 --- a/app/Config/setting-defaults.php +++ b/app/Config/setting-defaults.php @@ -24,7 +24,7 @@ return [ 'page-draft-color' => '#7e50b1', 'app-color-dark' => '#195785', 'app-color-light-dark' => 'rgba(32,110,167,0.15)', - 'link-color-dark' => '#195785', + 'link-color-dark' => '#429fe3', 'bookshelf-color-dark' => '#ff5454', 'book-color-dark' => '#389f60', 'chapter-color-dark' => '#ee7a2d', diff --git a/resources/js/components/index.js b/resources/js/components/index.js index 27bce48db..82136184b 100644 --- a/resources/js/components/index.js +++ b/resources/js/components/index.js @@ -41,7 +41,7 @@ export {PagePicker} from "./page-picker.js" export {PermissionsTable} from "./permissions-table.js" export {Pointer} from "./pointer.js" export {Popup} from "./popup.js" -export {SettingAppColorPicker} from "./setting-app-color-picker.js" +export {SettingAppColorScheme} from "./setting-app-color-scheme.js" export {SettingColorPicker} from "./setting-color-picker.js" export {SettingHomepageControl} from "./setting-homepage-control.js" export {ShelfSort} from "./shelf-sort.js" diff --git a/resources/js/components/setting-app-color-picker.js b/resources/js/components/setting-app-color-picker.js deleted file mode 100644 index f167e5fc9..000000000 --- a/resources/js/components/setting-app-color-picker.js +++ /dev/null @@ -1,50 +0,0 @@ -import {Component} from "./component"; - -export class SettingAppColorPicker extends Component { - - setup() { - // TODO - this.colorInput = this.$refs.input; - this.lightColorInput = this.$refs.lightInput; - - this.colorInput.addEventListener('change', this.updateColor.bind(this)); - this.colorInput.addEventListener('input', this.updateColor.bind(this)); - } - - /** - * Update the app colors as a preview, and create a light version of the color. - */ - updateColor() { - const hexVal = this.colorInput.value; - const rgb = this.hexToRgb(hexVal); - const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')'; - - this.lightColorInput.value = rgbLightVal; - - const customStyles = document.getElementById('custom-styles'); - const oldColor = customStyles.getAttribute('data-color'); - const oldColorLight = customStyles.getAttribute('data-color-light'); - - customStyles.innerHTML = customStyles.innerHTML.split(oldColor).join(hexVal); - customStyles.innerHTML = customStyles.innerHTML.split(oldColorLight).join(rgbLightVal); - - customStyles.setAttribute('data-color', hexVal); - customStyles.setAttribute('data-color-light', rgbLightVal); - } - - /** - * Covert a hex color code to rgb components. - * @attribution https://stackoverflow.com/a/5624139 - * @param {String} hex - * @returns {{r: Number, g: Number, b: Number}} - */ - hexToRgb(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return { - r: result ? parseInt(result[1], 16) : 0, - g: result ? parseInt(result[2], 16) : 0, - b: result ? parseInt(result[3], 16) : 0 - }; - } - -} diff --git a/resources/js/components/setting-app-color-scheme.js b/resources/js/components/setting-app-color-scheme.js new file mode 100644 index 000000000..71b14badc --- /dev/null +++ b/resources/js/components/setting-app-color-scheme.js @@ -0,0 +1,82 @@ +import {Component} from "./component"; + +export class SettingAppColorScheme extends Component { + + setup() { + this.container = this.$el; + this.mode = this.$opts.mode; + this.lightContainer = this.$refs.lightContainer; + this.darkContainer = this.$refs.darkContainer; + + this.container.addEventListener('tabs-change', event => { + const panel = event.detail.showing; + const newMode = (panel === 'color-scheme-panel-light') ? 'light' : 'dark'; + this.handleModeChange(newMode); + }); + + const onInputChange = (event) => { + this.updateAppColorsFromInputs(); + + if (event.target.name.startsWith('setting-app-color')) { + this.updateLightForInput(event.target); + } + }; + this.container.addEventListener('change', onInputChange); + this.container.addEventListener('input', onInputChange); + } + + handleModeChange(newMode) { + this.mode = newMode; + const isDark = (newMode === 'dark'); + + document.documentElement.classList.toggle('dark-mode', isDark); + this.updateAppColorsFromInputs(); + } + + updateAppColorsFromInputs() { + const inputContainer = this.mode === 'dark' ? this.darkContainer : this.lightContainer; + const inputs = inputContainer.querySelectorAll('input[type="color"]'); + for (const input of inputs) { + const splitName = input.name.split('-'); + const colorPos = splitName.indexOf('color'); + let cssId = splitName.slice(1, colorPos).join('-'); + if (cssId === 'app') { + cssId = 'primary'; + } + + const varName = '--color-' + cssId; + document.body.style.setProperty(varName, input.value); + } + } + + /** + * Update the 'light' app color variant for the given input. + * @param {HTMLInputElement} input + */ + updateLightForInput(input) { + const lightName = input.name.replace('-color', '-color-light'); + const hexVal = input.value; + const rgb = this.hexToRgb(hexVal); + const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')'; + + console.log(input.name, lightName, hexVal, rgbLightVal) + const lightColorInput = this.container.querySelector(`input[name="${lightName}"][type="hidden"]`); + lightColorInput.value = rgbLightVal; + } + + /** + * Covert a hex color code to rgb components. + * @attribution https://stackoverflow.com/a/5624139 + * @param {String} hex + * @returns {{r: Number, g: Number, b: Number}} + */ + hexToRgb(hex) { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return { + r: result ? parseInt(result[1], 16) : 0, + g: result ? parseInt(result[2], 16) : 0, + b: result ? parseInt(result[3], 16) : 0 + }; + } + +} diff --git a/resources/js/components/setting-color-picker.js b/resources/js/components/setting-color-picker.js index 876e14f20..bfb2c93ce 100644 --- a/resources/js/components/setting-color-picker.js +++ b/resources/js/components/setting-color-picker.js @@ -15,6 +15,6 @@ export class SettingColorPicker extends Component { setValue(value) { this.colorInput.value = value; - this.colorInput.dispatchEvent(new Event('change')); + this.colorInput.dispatchEvent(new Event('change', {bubbles: true})); } } \ No newline at end of file diff --git a/resources/js/components/tabs.js b/resources/js/components/tabs.js index 6d48048b5..8d22e3e9b 100644 --- a/resources/js/components/tabs.js +++ b/resources/js/components/tabs.js @@ -43,7 +43,7 @@ export class Tabs extends Component { tab.setAttribute('aria-selected', selected ? 'true' : 'false'); } - this.$emit('change', {section: sectionId}); + this.$emit('change', {showing: sectionId}); } } \ No newline at end of file diff --git a/resources/js/services/util.js b/resources/js/services/util.js index 1a56ebf6c..238f8b1d8 100644 --- a/resources/js/services/util.js +++ b/resources/js/services/util.js @@ -34,7 +34,7 @@ export function scrollAndHighlightElement(element) { if (!element) return; element.scrollIntoView({behavior: 'smooth'}); - const color = document.getElementById('custom-styles').getAttribute('data-color-light'); + const color = getComputedStyle(document.body).getPropertyValue('--color-primary-light'); const initColor = window.getComputedStyle(element).getPropertyValue('background-color'); element.style.backgroundColor = color; setTimeout(() => { diff --git a/resources/views/common/custom-styles.blade.php b/resources/views/common/custom-styles.blade.php index d261110c7..bfdcc8512 100644 --- a/resources/views/common/custom-styles.blade.php +++ b/resources/views/common/custom-styles.blade.php @@ -1,13 +1,7 @@ -