Skip to content

Commit 6fad29c

Browse files
leviaristaleviarista
committed
Rework functions, add patterns and decorations, img optimizations & fixes
1 parent d412e3a commit 6fad29c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+584
-437
lines changed

‎js/data/patterns.js‎

Lines changed: 103 additions & 53 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/data/themes.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"pattern": "bubbles",
1313
"patternColor": "#FFFFFF",
1414
"patternOpacity": 0.15,
15+
"titleFont": "Tahoma",
16+
"subtitleFont": "Quattrocento",
1517
"previewImage": "theme-1-preview.png"
1618
},
1719
{

‎js/helpers/helpers.js‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import themes from "../data/themes.json";
22
import { getMainElements } from "./elements";
3+
import { getPattern } from '../data/patterns';
34

45
const {
56
bannerImageContainer,
@@ -37,31 +38,36 @@ function updateBanner({
3738
pattern,
3839
patternColor,
3940
patternOpacity,
41+
patternSize,
4042
titleFont,
4143
subtitleFont
4244
}) {
4345
if (background) bannerImage.style.backgroundColor = background;
4446
if (titleColor) bannerTitle.style.color = titleColor;
4547
if (subtitleColor) bannerSubtitle.style.color = subtitleColor;
46-
if (borderColor || borderSize || borderRadius) {
48+
if (borderColor && borderSize && borderRadius) {
4749
bannerImage.style.border = `solid ${borderColor} ${borderSize}px`;
4850
bannerImage.style.borderRadius = `${borderRadius}px`;
4951
}
52+
if (borderColor) bannerImage.style.borderColor = borderColor;
5053
if (textAlign)
5154
document.querySelector(`.align-buttons button[data-align-value="${textAlign}"]`).click();
5255
if (decoration)
5356
document.querySelector(`.decorations-buttons button[data-decoration-value="${decoration}"]`).click();
5457
if (decorationSize) { }
55-
if (pattern) {
56-
document.querySelector(`.patterns-buttons button[data-pattern-value="${pattern}"]`).click();
57-
}
58-
if (patternColor || patternOpacity) {
58+
if (pattern || patternColor || patternOpacity || patternSize) {
59+
const formatedColor = patternColor.replace('#', '');
60+
61+
bannerImage.style.backgroundImage = getPattern(pattern, formatedColor, patternOpacity);
62+
bannerImage.style.backgroundSize = `${patternSize}px`;
5963
}
64+
// if (patternColor || patternOpacity) {
65+
// }
6066
if (titleFont || subtitleFont) {
61-
document.fonts.ready.then(() => {
62-
bannerTitle.style.fontFamily = `"${titleFont}"`;
63-
bannerSubtitle.style.fontFamily = `"${subtitleFont}"`;
64-
});
67+
// document.fonts.ready.then(() => {
68+
bannerTitle.style.fontFamily = `"${titleFont}"`;
69+
bannerSubtitle.style.fontFamily = `"${subtitleFont}"`;
70+
// });
6571
}
6672
}
6773

@@ -112,9 +118,7 @@ function updateUIOptions({
112118
decorationSizeInput.value = decorationSize;
113119
decorationSizeInput.nextElementSibling.value = decorationSize;
114120
}
115-
if (pattern) {
116-
117-
}
121+
if (pattern) { }
118122
if (patternColor || patternOpacity) {
119123
const patternOpacityInput = document.querySelector('.pattern-inputs input#pattern-opacity-input');
120124
const patternColorSelector = document.querySelector('.pattern-inputs input#pattern-color-selector');
@@ -129,9 +133,10 @@ function updateUIOptions({
129133
}
130134

131135
function setTheme(theme) {
132-
logTheme(theme);
136+
// logTheme(theme);
133137
updateUIOptions(theme);
134138
updateBanner(theme);
139+
document.querySelector(`.patterns-buttons button[data-pattern-value="${theme.pattern}"]`).click();
135140
}
136141

137142
function logTheme(theme) {
@@ -141,4 +146,4 @@ function logTheme(theme) {
141146
}
142147
}
143148

144-
export { getAllThemes, getTheme, getRandomTheme, setTheme };
149+
export { getAllThemes, getTheme, getRandomTheme, setTheme, updateBanner };

‎js/main.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ subtitleFontSelect.value = 'Kalam';
2727
// Demo reset after ended
2828
document.querySelector('.how-to-section video.demo').onended = (e) => e.target.currentTime = 0;
2929

30-
/* ************** Header image buttons ************** */
30+
/* ************** Header image options ************** */
3131

3232
// Download button
3333
document.querySelector('.download-button')
@@ -73,7 +73,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
7373
}
7474
if (miniatureButton) {
7575
miniatureButton.style.display = "block";
76-
console.log('Running on localhost! display appending image option ...');
76+
// console.log('Running on localhost! display appending image option ...');
7777

7878
miniatureButton.addEventListener('click', async () => {
7979
const png = await snapdom.toPng(el, { embedFonts: true, scale: 0.25 });
@@ -113,7 +113,7 @@ document.querySelector('.dark-mode-button')
113113
}
114114
});
115115

116-
/* ************** Randomize ************** */
116+
// Randomize
117117

118118
document.querySelector('.randomize-button')
119119
.addEventListener('click', (e) => {

‎js/tabs.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,18 @@ document.querySelectorAll('.tab .tablinks')
1919
.forEach(button => {
2020
button.addEventListener('click', (e) => {
2121
const name = e.target.getAttribute('data-name');
22+
localStorage.setItem('openTab', name)
2223
openTab(e, name);
2324
});
2425
})
2526

26-
document.getElementById("defaultOpenTag").click();
27+
/* ************** Open tab ************** */
28+
29+
document.addEventListener("DOMContentLoaded", (event) => {
30+
const openTab = localStorage.getItem('openTab');
31+
if (openTab) {
32+
document.querySelector(`[data-name="${openTab}"]`).click();
33+
} else {
34+
document.getElementById("defaultOpenTag").click();
35+
}
36+
});

‎js/toolbox-background.js‎

Lines changed: 25 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,30 @@
1-
import { getBackgroundSvg } from './data/patterns';
1+
import { getPatternDefaultSize } from './data/patterns';
2+
import { updateBanner } from './helpers/helpers';
3+
import { getMainElements } from './helpers/elements';
24

35
/* ************** Elements ************** */
46

5-
let bannerImageContainer = document.querySelector('.header-image-container');
6-
let bannerImage = document.querySelector('#github-header-image');
7-
let title = bannerImage.querySelector('.title');
8-
let subtitle = bannerImage.querySelector('.subtitle');
9-
10-
let toolboxBackground = document.querySelector('.toolbox-background');
7+
const {
8+
toolboxBackground,
9+
} = getMainElements();
1110

1211
// init
1312
let selectedPattern = 'bubbles';
1413
let selectedPatternOpacity = 0.15;
1514
let selectedPatternColor = 'FFF';
16-
let selectedPatternSize = '200px';
15+
let selectedPatternSize = 200;
1716
setPatternBackground();
1817

19-
/* ************** Set theme button ************** */
20-
21-
// document.querySelector('.log-theme-button').addEventListener('click', () => {
22-
// let obj = ` {background: '${document.querySelector('.color-selectors-container input#main-bg-color-selector').value}', title: '${document.querySelector('.color-selectors-container input#title-color-selector').value}', subtitle: '${document.querySelector('.color-selectors-container input#subtitle-color-selector').value}', border: '${document.querySelector('.bg-color-selectors input#border-color-selector').value}', borderSize: ${document.querySelector('.border-inputs input#border-input').value}, borderRadius: ${document.querySelector('.border-inputs input#border-radius-input').value}, textAlign: '${bannerImage.style.alignItems}', decoration: '${document.querySelector('.img-decoration-container img').src.split('/').pop().replace('.png', '')}.png', decorationSize: ${document.querySelector('.decorations-size-inputs input#decoration-size-input').value}, pattern: '${selectedPattern}', patternColor: '${document.querySelector('.pattern-inputs input#pattern-color-selector').value}', patternOpacity: ${document.querySelector('.pattern-inputs input#pattern-opacity-input').value}, titleFont: '${document.querySelector('.font-selectors-container #title-font-selector').value}', subtitleFont: '${document.querySelector('.font-selectors-container #subtitle-font-selector').value}'}, `;
23-
// console.log(JSON.stringify(obj).replaceAll('\"', '\''))
24-
// })
25-
2618
/* ************** Color selectors ************** */
2719

2820
function setBgColorValues() {
2921
let bgColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#background-bg-color-selector');
3022
let borderColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#border-color-selector');
3123

32-
bannerImage.style.backgroundColor = bgColorSelector.value;
33-
bannerImage.style.borderColor = borderColorSelector.value;
24+
updateBanner({
25+
background: bgColorSelector.value,
26+
borderColor: borderColorSelector.value,
27+
})
3428

3529
let mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector');
3630
mainTabBgColorSelector.value = bgColorSelector.value;
@@ -50,8 +44,11 @@ function setBorderValues() {
5044
let borderRadiusInput = toolboxBackground.querySelector('.border-inputs input#border-radius-input');
5145
let borderColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#border-color-selector');
5246

53-
bannerImage.style.border = `solid ${borderColorSelector.value} ${borderInput.value}px`;
54-
bannerImage.style.borderRadius = `${borderRadiusInput.value}px`;
47+
updateBanner({
48+
borderColor: borderColorSelector.value,
49+
borderSize: borderInput.value,
50+
borderRadius: borderRadiusInput.value
51+
});
5552
}
5653

5754
toolboxBackground.querySelectorAll('.border-inputs input')
@@ -88,11 +85,14 @@ toolboxBackground.querySelectorAll('.pattern-inputs input[type="color"]')
8885
/* ************** Patterns ************** */
8986

9087
function setPatternBackground() {
91-
const patternColor = toolboxBackground.querySelector('.pattern-inputs input#pattern-color-selector').value;
92-
selectedPatternColor = patternColor.replace('#', '');
93-
94-
bannerImage.style.backgroundImage = getBackgroundSvg(selectedPattern, selectedPatternColor, selectedPatternOpacity);
95-
bannerImage.style.backgroundSize = `${selectedPatternSize}px`;
88+
const selectedPatternColor = toolboxBackground.querySelector('.pattern-inputs input#pattern-color-selector').value;
89+
90+
updateBanner({
91+
pattern: selectedPattern,
92+
patternColor: selectedPatternColor,
93+
patternOpacity: selectedPatternOpacity,
94+
patternSize: selectedPatternSize
95+
});
9696
}
9797

9898
toolboxBackground.querySelectorAll('.patterns-buttons button')
@@ -110,59 +110,7 @@ toolboxBackground.querySelectorAll('.patterns-buttons button')
110110
})
111111

112112
function setPatternDefaultSize(patternValue) {
113-
switch (patternValue) {
114-
case 'jigsaw':
115-
selectedPatternSize = 100;
116-
break;
117-
case 'github':
118-
selectedPatternSize = 40;
119-
break;
120-
case 'endless-constellation':
121-
selectedPatternSize = 250;
122-
break;
123-
case 'floating-cogs':
124-
selectedPatternSize = 350;
125-
break;
126-
case 'bubbles':
127-
selectedPatternSize = 200;
128-
break;
129-
case 'random-shapes':
130-
selectedPatternSize = 80;
131-
break;
132-
case 'lisbon':
133-
selectedPatternSize = 80;
134-
break;
135-
case 'temple':
136-
selectedPatternSize = 100;
137-
break;
138-
case 'topography':
139-
selectedPatternSize = 500;
140-
break;
141-
case 'falling-triangles':
142-
selectedPatternSize = 36;
143-
break;
144-
case 'glamorous':
145-
selectedPatternSize = 135;
146-
break;
147-
case 'i-like-food':
148-
selectedPatternSize = 225;
149-
break;
150-
case 'leaf':
151-
selectedPatternSize = 80;
152-
break;
153-
case 'circuit-board':
154-
selectedPatternSize = 304;
155-
break;
156-
case 'overlapping-circles':
157-
selectedPatternSize = 80;
158-
break;
159-
case 'endless-clouds':
160-
selectedPatternSize = 112;
161-
break;
162-
default:
163-
selectedPatternSize = 100;
164-
break;
165-
}
113+
selectedPatternSize = getPatternDefaultSize(patternValue);
166114
toolboxBackground.querySelector('.pattern-inputs #pattern-size-input').value = selectedPatternSize;
167115
toolboxBackground.querySelector('.pattern-inputs #pattern-size-input').nextElementSibling.innerHTML = selectedPatternSize;
168116
}

‎js/toolbox-decorations.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { getMainElements } from "./helpers/elements";
22

3+
/* ************** Elements ************** */
4+
35
const {
46
toolboxDecorations,
57
} = getMainElements();

‎partials/toolbox/background.html‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,11 @@
7171
<img src="./images/patterns/temple-thumbnail.svg" alt="temple pattern button" />
7272
</button>
7373
<button type="button" class="btn" aria-label="topography pattern button" data-pattern-value="topography">
74-
<img src="./images/patterns/topography-thumbnail.svg" alt="topography pattern button"
75-
style="width: 55px;" />
74+
<img src="./images/patterns/topography-thumbnail.svg" alt="topography pattern button" />
7675
</button>
7776
<button type="button" class="btn" aria-label="falling-triangles pattern button"
7877
data-pattern-value="falling-triangles">
79-
<img src="./images/patterns/falling-triangles-thumbnail.svg" alt="falling-triangles pattern button" />
78+
<img src="./images/patterns/falling-triangles-thumbnail.svg" alt="falling-triangles pattern button" style="width: 45px;" />
8079
</button>
8180
<button type="button" class="btn" aria-label="glamorous pattern button" data-pattern-value="glamorous">
8281
<img src="./images/patterns/glamorous-thumbnail.svg" alt="glamorous pattern button" />
@@ -99,7 +98,7 @@
9998
</button>
10099
<button type="button" class="btn" aria-label="endless-clouds pattern button"
101100
data-pattern-value="endless-clouds">
102-
<img src="./images/patterns/endless-clouds-thumbnail.svg" alt="endless-clouds pattern button" />
101+
<img src="./images/patterns/endless-clouds-thumbnail.svg" alt="endless-clouds pattern button" style="width: 45px;" />
103102
</button>
104103
<!-- <button type="button" class="btn" aria-label="random-shapes pattern button"
105104
data-pattern-value="random-shapes">
@@ -108,12 +107,49 @@
108107
<button type="button" class="btn" aria-label="bathroom-floor pattern button"
109108
data-pattern-value="bathroom-floor">
110109
<img src="./images/patterns/bathroom-floor-thumbnail.svg" alt="random-shapes pattern button"
111-
style="width: 30px;" />
110+
style="width: 40px;" />
112111
</button>
113112
<button type="button" class="btn" aria-label="squares-in-squares pattern button"
114113
data-pattern-value="squares-in-squares">
115114
<img src="./images/patterns/squares-in-squares-thumbnail.svg" alt="squares-in-squares pattern button"
116-
style="width: 30px;" />
115+
style="width: 40px;" />
116+
</button>
117+
<button type="button" class="btn" aria-label="aztec pattern button" data-pattern-value="aztec">
118+
<img src="./images/patterns/aztec-thumbnail.svg" alt="aztec pattern button" style="width: 40px;" />
119+
</button>
120+
<button type="button" class="btn" aria-label="hideout pattern button" data-pattern-value="hideout">
121+
<img src="./images/patterns/hideout-thumbnail.svg" alt="hideout pattern button" style="width: 40px;" />
122+
</button>
123+
<button type="button" class="btn" aria-label="4-point-stars pattern button"
124+
data-pattern-value="4-point-stars">
125+
<img src="./images/patterns/4-point-stars-thumbnail.svg" alt="4-point-stars pattern button"
126+
style="width: 45px;" />
127+
</button>
128+
<button type="button" class="btn" aria-label="moroccan pattern button" data-pattern-value="moroccan">
129+
<img src="./images/patterns/moroccan-thumbnail.svg" alt="moroccan pattern button" style="width: 50px;" />
130+
</button>
131+
<button type="button" class="btn" aria-label="charlie-brown pattern button"
132+
data-pattern-value="charlie-brown">
133+
<img src="./images/patterns/charlie-brown-thumbnail.svg" alt="charlie-brown pattern button"
134+
style="width: 55px;" />
135+
</button>
136+
<button type="button" class="btn" aria-label="stamp-collection pattern button"
137+
data-pattern-value="stamp-collection">
138+
<img src="./images/patterns/stamp-collection-thumbnail.svg" alt="stamp-collection pattern button"
139+
style="width: 50px;" />
140+
</button>
141+
<button type="button" class="btn" aria-label="squares pattern button" data-pattern-value="squares">
142+
<img src="./images/patterns/squares-thumbnail.svg" alt="squares pattern button" style="width: 45px;" />
143+
</button>
144+
<button type="button" class="btn" aria-label="graph-paper pattern button" data-pattern-value="graph-paper">
145+
<img src="./images/patterns/graph-paper-thumbnail.svg" alt="graph-paper pattern button" style="width: 50px;" />
146+
</button>
147+
<button type="button" class="btn" aria-label="brick-wall pattern button" data-pattern-value="brick-wall">
148+
<img src="./images/patterns/brick-wall-thumbnail.svg" alt="brick-wall pattern button"/>
149+
</button>
150+
<button type="button" class="btn" aria-label="dalmatian-spots pattern button"
151+
data-pattern-value="dalmatian-spots">
152+
<img src="./images/patterns/dalmatian-spots-thumbnail.svg" alt="dalmatian-spots pattern button" style="width: 50px;" />
117153
</button>
118154
</div>
119155
</div>

‎partials/toolbox/decorations.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,28 @@
7575
<button type="button" class="btn" aria-label="apple decoration button" data-decoration-value="apple.png">
7676
<img src="./images/decorations/apple-thumbnail.png" alt="apple decoration button" />
7777
</button>
78+
<button type="button" class="btn" aria-label="dino-border decoration button"
79+
data-decoration-value="dino-border.png">
80+
<img src="./images/decorations/dino-border.png" alt="dino-border decoration button" />
81+
</button>
82+
<button type="button" class="btn" aria-label="dino decoration button" data-decoration-value="dino.png">
83+
<img src="./images/decorations/dino.png" alt="dino decoration button" />
84+
</button>
85+
<button type="button" class="btn" aria-label="headphones-cat decoration button" data-decoration-value="headphones-cat-1.png">
86+
<img src="./images/decorations/headphones-cat-1.png" alt="headphones-cat decoration button" />
87+
</button>
88+
<button type="button" class="btn" aria-label="headphones-cat decoration button" data-decoration-value="headphones-cat-2.png">
89+
<img src="./images/decorations/headphones-cat-2.png" alt="headphones-cat decoration button" />
90+
</button>
91+
<button type="button" class="btn" aria-label="html decoration button" data-decoration-value="html.png">
92+
<img src="./images/decorations/html.png" alt="html decoration button" />
93+
</button>
94+
<button type="button" class="btn" aria-label="css decoration button" data-decoration-value="css.png">
95+
<img src="./images/decorations/css.png" alt="css decoration button" />
96+
</button>
97+
<button type="button" class="btn" aria-label="js decoration button" data-decoration-value="js.png">
98+
<img src="./images/decorations/js.png" alt="js decoration button" />
99+
</button>
78100
</div>
79101
<div class="decorations-upload">
80102
<label for="decoration-size-input">Upload your own decoration:</label>

0 commit comments

Comments
 (0)