Skip to content

Commit 1e1b8b2

Browse files
leviaristaleviarista
committed
Rewrite JS functions, keep theme, improvements
1 parent 6fad29c commit 1e1b8b2

22 files changed

+586
-364
lines changed

‎js/banner.js‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
import { getPattern } from './data/patterns';
2+
import { getMainElements } from "./helpers/elements";
3+
import { isLocalDevelopment } from './helpers/helpers';
4+
5+
const {
6+
bannerImage,
7+
bannerTitle,
8+
bannerSubtitle,
9+
toolbox,
10+
toolboxDecorations,
11+
toolboxBackground,
12+
} = getMainElements();
13+
14+
function updateBanner(theme) {
15+
console.table(theme);
16+
console.log('•ᴗ• Updating Banner ...');
17+
applyTheme(theme);
18+
if (!theme.ignoreSave) saveTheme(theme);
19+
}
20+
21+
function applyTheme({
22+
padding,
23+
background,
24+
titleColor,
25+
subtitleColor,
26+
borderColor,
27+
borderSize,
28+
borderRadius,
29+
textAlign,
30+
decoration,
31+
decorationSize,
32+
pattern,
33+
patternColor,
34+
patternOpacity,
35+
patternSize,
36+
titleFont,
37+
subtitleFont,
38+
titleFontSize,
39+
subtitleFontSize,
40+
title,
41+
subtitle,
42+
decorationLocal = false
43+
}) {
44+
if (padding) {
45+
let paddingValue = `${padding}px`;
46+
bannerImage.style.padding = paddingValue;
47+
48+
document.querySelectorAll('.img-decoration-container img')
49+
.forEach(dec => {
50+
if (dec.style.left === 'auto')
51+
dec.style.right = paddingValue;
52+
else
53+
dec.style.left = paddingValue;
54+
});
55+
}
56+
if (background) bannerImage.style.backgroundColor = background;
57+
if (titleColor) bannerTitle.style.color = titleColor;
58+
if (subtitleColor) bannerSubtitle.style.color = subtitleColor;
59+
if (borderColor && borderSize && borderRadius) {
60+
bannerImage.style.border = `solid ${borderColor} ${borderSize}px`;
61+
bannerImage.style.borderRadius = `${borderRadius}px`;
62+
}
63+
if (borderColor) bannerImage.style.borderColor = borderColor;
64+
if (textAlign) {
65+
bannerImage.style.alignItems = textAlign;
66+
67+
// const paddingValue = document.querySelector('#paddings-input').value || 25;
68+
const paddingValue = padding || 25;
69+
const paddingPx = `${paddingValue}px`;
70+
const imageDecoration = document.querySelector('.img-decoration-container img');
71+
if (textAlign === 'flex-end') {
72+
document.querySelector('.img-decoration-container .img-decoration-2')?.remove();
73+
imageDecoration.style.left = paddingPx;
74+
imageDecoration.style.right = 'auto';
75+
} else if (textAlign === 'flex-start') {
76+
document.querySelector('.img-decoration-container .img-decoration-2')?.remove();
77+
imageDecoration.style.left = 'auto';
78+
imageDecoration.style.right = paddingPx;
79+
} else if (textAlign === 'center') {
80+
imageDecoration.style.left = 'auto';
81+
imageDecoration.style.right = paddingPx;
82+
if (!document.querySelector('.img-decoration-container .img-decoration-2')) {
83+
const clonedImageDecoration = imageDecoration.cloneNode(true);
84+
clonedImageDecoration.style.left = paddingPx;
85+
clonedImageDecoration.style.right = 'auto';
86+
clonedImageDecoration.className = 'img-decoration-2';
87+
const imageDecorationContainer = document.querySelector('.img-decoration-container');
88+
imageDecorationContainer.appendChild(clonedImageDecoration)
89+
}
90+
}
91+
}
92+
if (decoration) {
93+
const imageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration');
94+
const otherImageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration-2');
95+
96+
if (decoration === 'none') {
97+
imageDecoration.style.display = 'none';
98+
if (otherImageDecoration)
99+
otherImageDecoration.style.display = 'none';
100+
} else {
101+
let imageSrc = decorationLocal ? decoration : `images/decorations/${decoration}`;
102+
103+
imageDecoration.style.display = 'block';
104+
imageDecoration.src = imageSrc;
105+
if (otherImageDecoration) {
106+
otherImageDecoration.style.display = 'block';
107+
otherImageDecoration.src = imageSrc;
108+
}
109+
}
110+
}
111+
if (decorationSize) {
112+
const imageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration');
113+
const otherImageDecoration = bannerImage.querySelector('.img-decoration-container .img-decoration-2');
114+
115+
imageDecoration.style.width = `${decorationSize}px`;
116+
if (otherImageDecoration)
117+
otherImageDecoration.style.width = `${decorationSize}px`;
118+
}
119+
if (pattern || patternColor || patternOpacity || patternSize) {
120+
bannerImage.style.backgroundImage = getPattern(pattern, patternColor.replace('#', ''), patternOpacity);
121+
bannerImage.style.backgroundSize = `${patternSize}px`;
122+
}
123+
if (titleFont && subtitleFont) {
124+
// document.fonts.ready.then(() => {
125+
bannerTitle.style.fontFamily = `"${titleFont}"`;
126+
bannerSubtitle.style.fontFamily = `"${subtitleFont}"`;
127+
// });
128+
}
129+
if (titleFontSize || subtitleFontSize) {
130+
bannerTitle.style.fontSize = `${titleFontSize}px`;
131+
bannerSubtitle.style.fontSize = `${subtitleFontSize}px`;
132+
}
133+
if (title || subtitle) {
134+
bannerTitle.innerText = title || '';
135+
bannerSubtitle.innerText = subtitle || '';
136+
}
137+
}
138+
139+
function saveTheme(theme) {
140+
console.log('•ᴗ• Saving theme ...')
141+
// if (!theme.persistText) {
142+
// delete theme['title'];
143+
// delete theme['subtitle'];
144+
// }
145+
const oldTheme = JSON.parse(localStorage.getItem('theme'));
146+
let newTheme;
147+
if (oldTheme) {
148+
newTheme = { ...oldTheme, ...theme };
149+
} else {
150+
newTheme = theme;
151+
}
152+
localStorage.setItem('theme', JSON.stringify(newTheme));
153+
154+
if (isLocalDevelopment) {
155+
// console.log(theme);
156+
console.table(newTheme);
157+
}
158+
}
159+
160+
function updateUIOptions({
161+
padding = 25,
162+
background,
163+
titleColor,
164+
subtitleColor,
165+
borderColor,
166+
borderSize,
167+
borderRadius,
168+
textAlign,
169+
decoration,
170+
decorationSize,
171+
pattern,
172+
patternColor,
173+
patternSize,
174+
patternOpacity,
175+
titleFont,
176+
subtitleFont,
177+
titleFontSize = 40,
178+
subtitleFontSize = 20,
179+
title,
180+
subtitle
181+
}) {
182+
console.log('•ᴗ• Updating UI Options ...')
183+
184+
if (padding) {
185+
const paddingInput = document.querySelector('#paddings-input');
186+
paddingInput.value = padding;
187+
paddingInput.nextElementSibling.value = padding;
188+
}
189+
if (background) {
190+
const mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector');
191+
const backgroundTabBgColorSelector = document.querySelector('.bg-color-selectors input#background-bg-color-selector');
192+
mainTabBgColorSelector.value = background;
193+
backgroundTabBgColorSelector.value = background;
194+
}
195+
if (titleColor) {
196+
const mainTabtitleColorSelector = toolbox.querySelector('.color-selectors-container input#title-color-selector');
197+
mainTabtitleColorSelector.value = titleColor;
198+
}
199+
if (subtitleColor) {
200+
const mainTabSubtitleColorSelector = toolbox.querySelector('.color-selectors-container input#subtitle-color-selector');
201+
mainTabSubtitleColorSelector.value = subtitleColor;
202+
}
203+
if (borderColor || borderSize || borderRadius) {
204+
const borderColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#border-color-selector');
205+
const borderInput = toolboxBackground.querySelector('.border-inputs input#border-input');
206+
const borderRadiusInput = toolboxBackground.querySelector('.border-inputs input#border-radius-input');
207+
borderColorSelector.value = borderColor;
208+
borderInput.value = borderSize;
209+
borderInput.nextElementSibling.value = borderSize;
210+
borderRadiusInput.value = borderRadius;
211+
borderRadiusInput.nextElementSibling.value = borderRadius;
212+
}
213+
if (textAlign) { }
214+
if (decoration) { }
215+
if (decorationSize) {
216+
const decorationSizeInput = toolboxDecorations.querySelector('.decorations-size-inputs input#decoration-size-input');
217+
decorationSizeInput.value = decorationSize;
218+
decorationSizeInput.nextElementSibling.value = decorationSize;
219+
}
220+
if (pattern) { }
221+
if (patternSize) {
222+
const patternSizeInput = toolboxBackground.querySelector('.pattern-inputs input#pattern-size-input');
223+
patternSizeInput.value = patternSize;
224+
patternSizeInput.nextElementSibling.value = patternSize;
225+
226+
}
227+
if (patternColor || patternOpacity) {
228+
const patternOpacityInput = toolboxBackground.querySelector('.pattern-inputs input#pattern-opacity-input');
229+
const patternColorSelector = toolboxBackground.querySelector('.pattern-inputs input#pattern-color-selector');
230+
patternOpacityInput.value = patternOpacity
231+
patternOpacityInput.nextElementSibling.value = patternOpacity
232+
patternColorSelector.value = patternColor;
233+
}
234+
if (titleFont || subtitleFont) {
235+
toolbox.querySelector('.font-selectors-container #title-font-selector').value = titleFont ?? 'Red Hat Display';
236+
toolbox.querySelector('.font-selectors-container #subtitle-font-selector').value = subtitleFont ?? 'Kalam';
237+
}
238+
if (titleFontSize || subtitleFontSize) {
239+
const titleFontSizeInput = toolbox.querySelector('.font-size-inputs input#title-font-size-input');
240+
titleFontSizeInput.value = titleFontSize;
241+
titleFontSizeInput.nextElementSibling.value = titleFontSize;
242+
243+
const subtitleFontSizeInput = toolbox.querySelector('.font-size-inputs input#subtitle-font-size-input');
244+
subtitleFontSizeInput.value = subtitleFontSize;
245+
subtitleFontSizeInput.nextElementSibling.value = subtitleFontSize;
246+
}
247+
if (title || subtitle) {
248+
toolbox.querySelector('.text-inputs input#title-input').value = title;
249+
toolbox.querySelector('.text-inputs input#subtitle-input').value = subtitle;
250+
}
251+
}
252+
253+
function getSavedThemeProp(prop) {
254+
if (!prop) return '';
255+
const theme = JSON.parse(localStorage.getItem('theme'));
256+
return theme[prop];
257+
}
258+
259+
export {
260+
updateBanner,
261+
updateUIOptions,
262+
getSavedThemeProp
263+
};

0 commit comments

Comments
 (0)