From 938abd9c5cfa57b802d960e8a110a02075dcffb6 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Sat, 28 Aug 2021 13:52:10 +0100 Subject: [PATCH] add random colour button to control colour module --- src/component/bookmarkForm/index.js | 2 ++ src/component/control/color/index.js | 33 +++++++++++++++++++ src/component/control/colorMixer/index.js | 2 ++ src/component/icon/index.js | 3 ++ .../menuContent/themeSetting/index.js | 4 +++ 5 files changed, 44 insertions(+) diff --git a/src/component/bookmarkForm/index.js b/src/component/bookmarkForm/index.js index 119c5c32..4abc9992 100644 --- a/src/component/bookmarkForm/index.js +++ b/src/component/bookmarkForm/index.js @@ -389,6 +389,7 @@ export const BookmarkForm = function({ srOnly: true, defaultValue: bookmarkDefault.accent.rgb, minMaxObject: bookmarkMinMax, + randomColor: true, action: () => { this.preview.update.style(bookmarkData); } @@ -417,6 +418,7 @@ export const BookmarkForm = function({ srOnly: true, defaultValue: bookmarkDefault.color.rgb, minMaxObject: bookmarkMinMax, + randomColor: true, action: () => { this.preview.update.style(bookmarkData); } diff --git a/src/component/control/color/index.js b/src/component/control/color/index.js index 14b71af1..f2b91fd8 100644 --- a/src/component/control/color/index.js +++ b/src/component/control/color/index.js @@ -12,6 +12,7 @@ import { get } from '../../../utility/get'; import { set } from '../../../utility/set'; import { convertColor } from '../../../utility/convertColor'; import { isValidString } from '../../../utility/isValidString'; +import { randomNumber } from '../../../utility/randomNumber'; export const Control_color = function({ object = {}, @@ -22,6 +23,7 @@ export const Control_color = function({ value = '#000000', defaultValue = false, action = false, + randomColor = false, extraButtons = [] } = {}) { @@ -90,6 +92,7 @@ export const Control_color = function({ iconName: 'replay', style: ['line'], classList: ['form-group-item-small'], + title: 'Reset to default', func: () => { set({ object: object, path: path + '.rgb', value: JSON.parse(JSON.stringify(defaultValue)) }); @@ -101,6 +104,32 @@ export const Control_color = function({ } }); + this.random = new Button({ + text: false, + iconName: 'random', + style: ['line'], + classList: ['form-group-item-small'], + title: 'Random colour', + func: () => { + + set({ object: object, path: path + '.hsl', value: { h: randomNumber(0, 360), s: randomNumber(0, 100), l: randomNumber(0, 100) } }); + + set({ + object: object, + path: path + '.rgb', + value: convertColor.hsl.rgb(get({ + object: object, + path: path + '.hsl' + })) + }); + + this.update({ all: true }); + + if (action) { action(); }; + + } + }); + this.delayedUpdate = null; this.update = ({ @@ -143,6 +172,10 @@ export const Control_color = function({ ] }); + if (randomColor) { + formGroup.appendChild(this.random.button); + }; + if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) { formGroup.appendChild(this.reset.button); }; diff --git a/src/component/control/colorMixer/index.js b/src/component/control/colorMixer/index.js index 625bf5f4..55ed4df1 100644 --- a/src/component/control/colorMixer/index.js +++ b/src/component/control/colorMixer/index.js @@ -24,6 +24,7 @@ export const Control_colorMixer = function({ id = 'name', labelText = 'name', srOnly = false, + randomColor = false, action = false } = {}) { @@ -48,6 +49,7 @@ export const Control_colorMixer = function({ value: get({ object: object, path: path + '.rgb' }), defaultValue: defaultValue, extraButtons: [this.moreControlsToggle], + randomColor: randomColor, action: () => { set({ object: object, diff --git a/src/component/icon/index.js b/src/component/icon/index.js index 9812392f..f70794b6 100644 --- a/src/component/icon/index.js +++ b/src/component/icon/index.js @@ -99,6 +99,9 @@ icon.all = { }, propagate: { path: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z' + }, + random: { + path: 'M10.59 9.17L5.41 4L4 5.41L9.17 10.58L10.59 9.17ZM14.5 4L16.54 6.04L4 18.59L5.41 20L17.96 7.46L20 9.5V4H14.5ZM14.83 13.41L13.42 14.82L16.55 17.95L14.5 20H20V14.5L17.96 16.54L14.83 13.41V13.41Z' } }; diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js index f2820f22..d8ab551c 100644 --- a/src/component/menuContent/themeSetting/index.js +++ b/src/component/menuContent/themeSetting/index.js @@ -578,6 +578,7 @@ themeSetting.accent = (parent) => { labelText: 'Accent colour', defaultValue: state.get.default().theme.accent.rgb, minMaxObject: state.get.minMax(), + randomColor: true, action: () => { applyCSSVar([ 'theme.accent.rgb.r', @@ -1300,6 +1301,7 @@ themeSetting.background = (parent) => { labelText: 'Background colour', defaultValue: state.get.default().theme.background.color.rgb, minMaxObject: state.get.minMax(), + randomColor: true, action: () => { applyCSSVar([ 'theme.background.color.rgb.r', @@ -1336,6 +1338,7 @@ themeSetting.background = (parent) => { labelText: 'Background gradient start', defaultValue: state.get.default().theme.background.gradient.start.rgb, minMaxObject: state.get.minMax(), + randomColor: true, action: () => { applyCSSVar([ 'theme.background.gradient.start.rgb.r', @@ -1356,6 +1359,7 @@ themeSetting.background = (parent) => { labelText: 'Background gradient end', defaultValue: state.get.default().theme.background.gradient.end.rgb, minMaxObject: state.get.minMax(), + randomColor: true, action: () => { applyCSSVar([ 'theme.background.gradient.end.rgb.r',