Skip to content

Commit 983e2ff

Browse files
Dun-sinDun-sin
committed
refactor(main,general): used the respective functions for getting inputs
1 parent 6830c3a commit 983e2ff

File tree

2 files changed

+79
-110
lines changed

2 files changed

+79
-110
lines changed

‎src/lib/general.ts

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,24 @@ export const getColorInput1 = (attribute: string): HTMLInputElement =>
150150
export const getColorInput2 = (attribute: string): HTMLInputElement =>
151151
<HTMLInputElement>document.getElementById(`${attribute}-color2`);
152152

153+
export const gradientElementInputs = (attribute: string): NodeList =>
154+
document.querySelectorAll(`.${attribute}-inputs`);
155+
156+
export const gradientPreview = (attribute: string): HTMLElement =>
157+
document.querySelector(`#${attribute}-color-preview`) as HTMLElement;
158+
159+
export const createGradientPreview = (
160+
color1: HTMLInputElement,
161+
color2: HTMLInputElement,
162+
range: HTMLInputElement,
163+
preview: HTMLElement
164+
) => {
165+
const colorFrom = color1?.value;
166+
const colorTo = color2?.value;
167+
const fill = range?.value;
168+
preview.style.background = `linear-gradient(${fill}deg, ${colorFrom}, ${colorTo})`;
169+
};
170+
153171
export const getOutput = (attribute: string): HTMLElement =>
154172
<HTMLElement>document.querySelector(`[data-result = ${attribute}] > .output`);
155173

@@ -191,11 +209,6 @@ export const getStyleSheet = () => {
191209
return <CSSStyleSheet>stylesheet[0];
192210
};
193211

194-
/* |||| CONSIDER RENAMING getOutput above TO getGradientBorder ||||
195-
* (for example) export const getGradientBorder = (attribute: string): HTMLElement =>
196-
* <HTMLElement>document.querySelector(`${attribute}`);
197-
*/
198-
199212
function createDownloadLink(fileName: string, url: string) {
200213
const link = document.createElement('a');
201214
link.download = fileName;

‎src/main.ts

Lines changed: 61 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@ import {gradientTextGenerator} from './pages/gradient-text';
44
import {gradientBorderGenerator} from './pages/gradient-border';
55
import {gradientBackgroundGenerator} from './pages/gradient-background';
66
import {animationGenerator} from './pages/animation';
7+
8+
// Utils
9+
import {
10+
createGradientPreview,
11+
gradientElementInputs,
12+
gradientPreview,
13+
getColorInput1,
14+
getColorInput2,
15+
getRange,
16+
getCheckbox,
17+
getRadiusInput,
18+
} from './lib/general';
19+
20+
// Packages
721
import * as FilePond from 'filepond';
822
import 'filepond/dist/filepond.min.css';
923

@@ -43,20 +57,20 @@ const sideBarTiming = {
4357
};
4458

4559
const navBarSlideIn = [
46-
{left: "-50%", opacity: '0', },
47-
{left: "0%", opacity: '1'}
48-
]
60+
{left: '-50%', opacity: '0'},
61+
{left: '0%', opacity: '1'},
62+
];
4963

5064
const navBarSlideOut = [
51-
{left: "0%", opacity: '1'},
52-
{left: "-50%", opacity: '0'}
53-
]
65+
{left: '0%', opacity: '1'},
66+
{left: '-50%', opacity: '0'},
67+
];
5468

5569
const navBarAnimationOptions = {
5670
duration: 300,
5771
iterations: 1,
58-
easing: 'ease'
59-
}
72+
easing: 'ease',
73+
};
6074

6175
// Elements
6276
const generators = document.querySelectorAll('[data-gen]');
@@ -71,91 +85,61 @@ const navBar = document.querySelector('#nav');
7185
const menuIcon = document.querySelector('#menu-icon');
7286

7387
//gradient text color elements
74-
const gradientTextInputs = document.querySelectorAll('.gradient-text-inputs');
75-
const textPreview = <HTMLElement>(
76-
document.querySelector('#gradient-text-color-preview')
77-
);
78-
const gradientTextColor1 = <HTMLInputElement>(
79-
document.querySelector('#gradient-text-color1')
80-
);
81-
const gradientTextColor2 = <HTMLInputElement>(
82-
document.querySelector('#gradient-text-color2')
83-
);
84-
const gradientTextDegree = <HTMLInputElement>(
85-
document.querySelector('#gradient-text-degree')
86-
);
88+
const gradientTextInputs = gradientElementInputs('gradient-text');
89+
const textPreview = gradientPreview('gradient-text');
90+
const gradientTextColor1 = getColorInput1('gradient-text');
91+
const gradientTextColor2 = getColorInput2('gradient-text');
92+
const gradientTextDegree = getRange('gradient-text');
8793

8894
//gradient border color element
89-
const gradientBorderInputs = document.querySelectorAll(
90-
'.gradient-border-inputs'
91-
);
92-
const borderPreview = <HTMLElement>(
93-
document.querySelector('#gradient-border-color-preview')
94-
);
95-
const gradientBorderColor1 = <HTMLInputElement>(
96-
document.querySelector('#gradient-border-color1')
97-
);
98-
const gradientBorderColor2 = <HTMLInputElement>(
99-
document.querySelector('#gradient-border-color2')
100-
);
101-
const gradientBorderDegree = <HTMLInputElement>(
102-
document.querySelector('#gradient-border-degree')
103-
);
104-
const gradientBorderRadius = <HTMLInputElement>(
105-
document.querySelector('#gradient-border-radius')
106-
);
107-
const gradientBorderInput = <HTMLInputElement>(
108-
document.querySelector('#gradient-border-input')
109-
)
95+
const gradientBorderInputs = gradientElementInputs('gradient-border');
96+
const borderPreview = gradientPreview('gradient-border');
97+
const gradientBorderColor1 = getColorInput1('gradient-border');
98+
const gradientBorderColor2 = getColorInput2('gradient-border');
99+
const gradientBorderDegree = getRange('gradient-border');
100+
101+
const gradientBorderRadius = getCheckbox('gradient-border');
102+
const gradientBorderInput = getRadiusInput('gradient-border');
103+
110104
//gradient background color elements
111-
const gradientBackgroundInputs = document.querySelectorAll(
112-
'.gradient-background-inputs'
113-
);
114-
const backgroundPreview = <HTMLElement>(
115-
document.querySelector('#gradient-background-color-preview')
116-
);
117-
const gradientBackgroundColor1 = <HTMLInputElement>(
118-
document.querySelector('#gradient-background-color1')
119-
);
120-
const gradientBackgroundColor2 = <HTMLInputElement>(
121-
document.querySelector('#gradient-background-color2')
122-
);
123-
const gradientBackgroundDegree = <HTMLInputElement>(
124-
document.querySelector('#gradient-background-degree')
125-
);
105+
const gradientBackgroundInputs = gradientElementInputs('gradient-background');
106+
const backgroundPreview = gradientPreview('gradient-background');
107+
const gradientBackgroundColor1 = getColorInput1('gradient-background');
108+
const gradientBackgroundColor2 = getColorInput2('gradient-background');
109+
const gradientBackgroundDegree = getRange('gradient-background');
126110

127111
// get all range inputs
128112
const gradientRangeInputs = document.querySelectorAll('.degree-range');
129113

130114
menuIcon?.addEventListener('click', () => {
131115
if (navBar?.classList.contains('closed-nav')) {
132-
navBar?.animate(navBarSlideIn, navBarAnimationOptions)
116+
navBar?.animate(navBarSlideIn, navBarAnimationOptions);
133117
navBar?.classList.remove('closed-nav');
134118
menuIcon?.setAttribute('icon', 'ci:close-big');
135119
} else {
136-
navBar?.animate(navBarSlideOut, navBarAnimationOptions)
120+
navBar?.animate(navBarSlideOut, navBarAnimationOptions);
137121
navBar?.classList.add('closed-nav');
138122
menuIcon?.setAttribute('icon', 'dashicons:menu-alt');
139123
}
140124
});
141125

142-
const menu = <HTMLElement>(document.querySelector('.menu'))
143-
const body = <HTMLElement>(document.querySelector('body'))
126+
const menu = <HTMLElement>document.querySelector('.menu');
127+
const body = <HTMLElement>document.querySelector('body');
144128

145-
if(getComputedStyle(menu).display == 'block'){
146-
body.onclick = (e)=>{
147-
if(e.target !== navBar){
148-
if(e.target !== menuIcon){
149-
navBar?.classList.add('closed-nav')
150-
menuIcon?.setAttribute('icon', 'dashicons:menu-alt');
151-
}
129+
if (getComputedStyle(menu).display == 'block') {
130+
body.onclick = (e) => {
131+
if (e.target !== navBar) {
132+
if (e.target !== menuIcon) {
133+
navBar?.classList.add('closed-nav');
134+
menuIcon?.setAttribute('icon', 'dashicons:menu-alt');
135+
}
152136
}
153-
}
137+
};
154138
}
155139

156140
for (let i = 0; i < generators.length; i++) {
157141
generators[i].addEventListener('click', () => {
158-
navBar?.animate(navBarSlideOut, navBarAnimationOptions)
142+
navBar?.animate(navBarSlideOut, navBarAnimationOptions);
159143
navBar?.classList.add('closed-nav');
160144
menuIcon?.setAttribute('icon', 'dashicons:menu-alt');
161145
});
@@ -282,25 +266,11 @@ function showResult(attribute: string | null) {
282266
generatorsFunction(attribute);
283267
}
284268

285-
// function fixPicTextFile() {
286-
// const getImageEntryElement = <HTMLInputElement>(
287-
// document.getElementById(`pic-text-file`)
288-
// );
289-
// getImageEntryElement.setAttribute('value', '');
290-
// getImageEntryElement.setAttribute('src', '');
291-
// FilePond.destroy(getImageEntryElement);
292-
293-
// if (attributeValue === null) return;
294-
// removeOrAddGeneratorContent(attributeValue, 'none');
295-
// }
296-
297-
// add event listener to generator icons
298-
299269
generators.forEach((generator) => {
300270
generator?.addEventListener('click', (): void => {
301271
const checking = generator.getAttribute('data-gen');
302272

303-
if(checking === null) return;
273+
if (checking === null) return;
304274
sidebar.style.display = 'none';
305275
attributeValue = checking;
306276
showContent(attributeValue, 'flex');
@@ -342,7 +312,7 @@ gradientRangeInputs.forEach((gradientRangeInput: HTMLInputElement) => {
342312
});
343313

344314
for (let i = 0; i < gradientBackgroundInputs.length; i++) {
345-
gradientBackgroundInputs[i].addEventListener('input', () =>
315+
gradientBackgroundInputs[i].addEventListener('change', () =>
346316
createGradientPreview(
347317
gradientBackgroundColor1,
348318
gradientBackgroundColor2,
@@ -354,7 +324,7 @@ for (let i = 0; i < gradientBackgroundInputs.length; i++) {
354324

355325
//set gradient border preview
356326
for (let i = 0; i < gradientBorderInputs.length; i++) {
357-
gradientBorderInputs[i].addEventListener('input', () =>
327+
gradientBorderInputs[i].addEventListener('change', () =>
358328
createGradientPreview(
359329
gradientBorderColor1,
360330
gradientBorderColor2,
@@ -364,9 +334,8 @@ for (let i = 0; i < gradientBorderInputs.length; i++) {
364334
);
365335
}
366336

367-
//set gradient text preview
368337
for (let i = 0; i < gradientTextInputs.length; i++) {
369-
gradientTextInputs[i].addEventListener('input', () =>
338+
gradientTextInputs[i].addEventListener('change', () =>
370339
createGradientPreview(
371340
gradientTextColor1,
372341
gradientTextColor2,
@@ -376,20 +345,7 @@ for (let i = 0; i < gradientTextInputs.length; i++) {
376345
);
377346
}
378347

379-
//create gradient preview
380-
const createGradientPreview = (
381-
color1: HTMLInputElement,
382-
color2: HTMLInputElement,
383-
range: HTMLInputElement,
384-
preview: HTMLElement
385-
) => {
386-
const colorFrom = color1?.value;
387-
const colorTo = color2?.value;
388-
const fill = range?.value;
389-
preview.style.background = `linear-gradient(${fill}deg, ${colorFrom}, ${colorTo})`;
390-
};
391-
392348
//Toggle gradient border radius input display
393-
gradientBorderRadius.addEventListener('change', function() {
394-
gradientBorderInput.style.display = this.checked ? "inline" : "none"
395-
})
349+
gradientBorderRadius.addEventListener('change', function () {
350+
gradientBorderInput.style.display = this.checked ? 'inline' : 'none';
351+
});

0 commit comments

Comments
 (0)