Files
nightTab/src/component/state/index.js
2021-08-28 13:52:21 +01:00

297 lines
10 KiB
JavaScript

const state = {};
state.current = {};
state.default = {
layout: {
area: {
header: { width: 100, justify: 'center' },
bookmark: { width: 100, justify: 'center' }
},
alignment: 'center-center',
order: 'header-bookmark',
direction: 'vertical',
size: 100,
width: 80,
padding: 40,
gutter: 20,
breakpoint: 'xs',
scrollbar: 'auto',
title: '',
overscroll: false
},
header: {
item: { justify: 'left' },
greeting: { show: false, type: 'good', custom: '', name: '', size: 100, newLine: false },
transitional: { show: false, type: 'time-and-date', size: 100, newLine: false },
clock: {
hour: { show: true, display: 'number' },
minute: { show: true, display: 'number' },
second: { show: false, display: 'number' },
separator: { show: true, text: '' },
meridiem: { show: false },
hour24: { show: true },
size: 100,
newLine: false
},
date: {
day: { show: false, display: 'word', weekStart: 'monday', length: 'long' },
date: { show: true, display: 'number', ordinal: true },
month: { show: true, display: 'word', length: 'long', ordinal: true },
year: { show: false, display: 'number' },
separator: { show: true, text: '' },
format: 'date-month',
size: 100,
newLine: false
},
search: {
show: true,
width: { by: 'auto', size: 30 },
engine: { selected: 'google', custom: { name: '', url: '', queryName: '' } },
text: { justify: 'center' },
size: 100,
newLine: false,
newTab: false
},
order: [],
edit: false
},
bookmark: {
size: 100,
url: { show: true },
line: { show: true },
shadow: { show: true },
hoverScale: { show: true },
orientation: 'bottom',
style: 'block',
newTab: false,
edit: false,
add: false,
show: true
},
group: {
area: { justify: 'left' },
order: 'header-body',
name: { size: 100 },
openAll: { size: 100 },
edit: false,
add: false
},
toolbar: { location: 'header', position: 'bottom-right', size: 100, accent: { show: true }, add: { show: true }, edit: { show: true }, newLine: false },
theme: {
color: { range: { primary: { h: 222, s: 14 } }, contrast: { start: 17, end: 83 }, shades: 14 },
accent: { hsl: { h: 221, s: 100, l: 50 }, rgb: { r: 0, g: 80, b: 255 }, random: { active: false, style: 'any' }, cycle: { active: false, speed: 300, step: 10 } },
font: {
display: { name: '', weight: 400, style: 'normal' },
ui: { name: '', weight: 400, style: 'normal' }
},
background: {
type: 'theme',
color: { hsl: { h: 221, s: 47, l: 17 }, rgb: { r: 23, g: 36, b: 64 } },
gradient: {
angle: 160,
start: { hsl: { h: 206, s: 16, l: 40 }, rgb: { r: 86, g: 104, b: 118 } },
end: { hsl: { h: 219, s: 28, l: 12 }, rgb: { r: 22, g: 28, b: 39 } }
},
image: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100, vignette: { opacity: 0, start: 90, end: 70 } },
video: { url: '', blur: 0, grayscale: 0, scale: 100, accent: 0, opacity: 100, vignette: { opacity: 0, start: 90, end: 70 } }
},
opacity: { general: 100 },
layout: { color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, blur: 0, opacity: 10 }, divider: { size: 0 } },
header: { color: { by: 'theme', hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 }, opacity: 10 }, search: { opacity: 100 } },
bookmark: { color: { by: 'theme', opacity: 10, hsl: { h: 0, s: 0, l: 0 }, rgb: { r: 0, g: 0, b: 0 } }, item: { border: 0, opacity: 100 } },
group: { openAll: { opacity: 100 } },
toolbar: { opacity: 100 },
style: 'dark',
radius: 25,
shadow: 75,
shade: { opacity: 30, blur: 0 },
custom: { all: [], edit: false }
},
search: false,
modal: false,
menu: false,
autoSuggest: false
};
state.minMax = {
header: {
greeting: { size: { min: 50, max: 500 } },
transitional: { size: { min: 50, max: 500 } },
clock: { size: { min: 50, max: 500 } },
date: { size: { min: 50, max: 500 } },
search: { size: { min: 50, max: 500 }, width: { size: { min: 10, max: 100 } } }
},
bookmark: { size: { min: 50, max: 500 } },
group: {
name: { size: { min: 50, max: 500 } },
openAll: { size: { min: 50, max: 500 } }
},
layout: {
area: {
header: { width: { min: 10, max: 100 } },
bookmark: { width: { min: 10, max: 100 } }
},
size: { min: 10, max: 200 },
width: { min: 10, max: 100 },
padding: { min: 0, max: 300 },
gutter: { min: 0, max: 300 }
},
toolbar: { size: { min: 50, max: 500 } },
theme: {
color: {
range: { primary: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 } } },
contrast: { start: { min: 0, max: 100 }, end: { min: 0, max: 100 } }
},
accent: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
cycle: { speed: { min: 100, max: 1000 }, step: { min: 1, max: 100 } }
},
font: {
display: { weight: { min: 100, max: 900 } },
ui: { weight: { min: 100, max: 900 } }
},
opacity: {
general: { min: 0, max: 100 },
toolbar: { min: 0, max: 100 },
bookmark: { min: 0, max: 100 },
search: { min: 0, max: 100 },
openAll: { min: 0, max: 100 }
},
layout: {
color: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
blur: { min: 0, max: 200 },
opacity: { min: 0, max: 100 }
},
divider: { size: { min: 0, max: 10 } }
},
header: {
color: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
opacity: { min: 0, max: 100 }
},
search: { opacity: { min: 0, max: 100 } }
},
bookmark: {
color: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
opacity: { min: 0, max: 100 }
},
item: { border: { min: 0, max: 20 }, opacity: { min: 0, max: 100 } }
},
group: { openAll: { opacity: { min: 0, max: 100 } } },
toolbar: { opacity: { min: 0, max: 100 } },
background: {
color: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } }
},
gradient: {
angle: { min: 0, max: 360 },
start: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } }
},
end: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } }
},
},
image: { blur: { min: 0, max: 200 }, grayscale: { min: 0, max: 100 }, scale: { min: 100, max: 400 }, accent: { min: 0, max: 100 }, opacity: { min: 0, max: 100 }, vignette: { opacity: { min: 0, max: 100 }, start: { min: 0, max: 100 }, end: { min: 0, max: 100 } } },
video: { blur: { min: 0, max: 200 }, grayscale: { min: 0, max: 100 }, scale: { min: 100, max: 400 }, accent: { min: 0, max: 100 }, opacity: { min: 0, max: 100 }, vignette: { opacity: { min: 0, max: 100 }, start: { min: 0, max: 100 }, end: { min: 0, max: 100 } } }
},
radius: { min: 0, max: 500 },
shadow: { min: 0, max: 300 },
shade: { opacity: { min: 0, max: 100 }, blur: { min: 0, max: 200 } }
}
};
state.step = {
theme: {
font: {
display: { weight: 100 },
ui: { weight: 100 }
}
}
};
state.option = {
layout: {
area: {
header: { justify: ['left', 'center', 'right'], align: ['left', 'center', 'right'] },
bookmark: { justify: ['left', 'center', 'right'], align: ['left', 'center', 'right'] }
},
alignment: ['top-left', 'top-center', 'top-right', 'center-left', 'center-center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'],
direction: ['horizontal', 'vertical'],
order: ['header-bookmark', 'bookmark-header'],
scrollbar: ['auto', 'thin', 'none']
},
header: {
item: { justify: ['left', 'center', 'right'] },
search: { width: { by: ['auto', 'custom'] }, text: { justify: ['left', 'center', 'right'] } }
},
bookmark: {
item: { justify: ['left', 'center', 'right'] },
orientation: ['top', 'bottom'],
style: ['block', 'list']
},
group: {
area: { justify: ['left', 'center', 'right'] },
order: ['header-body', 'body-header']
},
toolbar: {
location: ['corner', 'header'],
position: ['top-left', 'top-right', 'bottom-right', 'bottom-left']
},
theme: {
accent: { random: { style: ['any', 'light', 'dark', 'pastel', 'saturated'] } },
style: ['dark', 'light', 'system'],
layout: { color: { by: ['theme', 'custom'] } },
header: { color: { by: ['theme', 'custom'] } },
bookmark: { color: { by: ['theme', 'custom'] } },
background: { type: ['theme', 'accent', 'color', 'gradient', 'image', 'video'] }
}
};
state.get = {
current: () => { return state.current },
default: () => { return JSON.parse(JSON.stringify(state.default)) },
minMax: () => { return JSON.parse(JSON.stringify(state.minMax)) },
step: () => { return JSON.parse(JSON.stringify(state.step)) },
option: () => { return JSON.parse(JSON.stringify(state.option)) }
};
state.set = {
restore: {
setup: (dataToRestore) => {
state.current.layout = dataToRestore.state.layout;
state.current.header = dataToRestore.state.header;
state.current.bookmark = dataToRestore.state.bookmark;
state.current.group = dataToRestore.state.group;
state.current.toolbar = dataToRestore.state.toolbar;
console.log('setup restored');
},
theme: (dataToRestore) => {
state.current.theme = dataToRestore.state.theme;
console.log('theme restored');
}
},
default: () => {
state.current = state.get.default();
console.log('state set to default');
}
};
export { state };