Skip to content

Commit 79404fa

Browse files
Dun-sinDun-sin
committed
feat: add reset button for new color input created
1 parent 005d0a3 commit 79404fa

File tree

5 files changed

+106
-78
lines changed

5 files changed

+106
-78
lines changed

‎src/lib/getElements.ts

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ export const getColorInput1 = (attribute: string): HTMLInputElement =>
2525
export const getColorInput2 = (attribute: string): HTMLInputElement =>
2626
document.getElementById(`${attribute}-color2`) as HTMLInputElement;
2727

28-
export const getAllInputElements = (attribute: string): NodeList =>
28+
export const getAllColorInput = (
29+
attribute: string
30+
): NodeListOf<HTMLInputElement> =>
31+
document.querySelectorAll(`[data-content=${attribute}] .color input`);
32+
33+
export const getAllInputElements = (
34+
attribute: string
35+
): NodeListOf<HTMLInputElement> =>
2936
document.querySelectorAll(`.${attribute}-inputs`);
3037

3138
export const getGradientPreview = (attribute: string): HTMLElement =>
@@ -126,19 +133,24 @@ export const getPreviewSlider = (attribute: string): HTMLElement =>
126133
`[data-content=${attribute}] .preview-slider`
127134
) as HTMLElement;
128135

129-
130136
export const getAllFields = (attribute: string) => {
131-
const inputs = document.querySelectorAll(`[data-content=${attribute}] input`) as NodeListOf<HTMLInputElement>;
132-
const textarea = document.querySelector(`[data-content='${attribute}'] textarea`) as HTMLTextAreaElement;
133-
137+
const inputs = document.querySelectorAll(
138+
`[data-content=${attribute}] input`
139+
) as NodeListOf<HTMLInputElement>;
140+
const textarea = document.querySelector(
141+
`[data-content='${attribute}'] textarea`
142+
) as HTMLTextAreaElement;
143+
134144
return {
135145
inputs,
136-
textarea
137-
}
138-
}
146+
textarea,
147+
};
148+
};
139149

140-
export const getResetButton = (attribute: string) =>
141-
document.querySelector(`[data-reset=${attribute}]`) as HTMLButtonElement;
150+
export const getResetButton = (attribute: string) =>
151+
document.querySelector(`[data-reset=${attribute}]`) as HTMLButtonElement;
142152

143-
export const getDegreeSpanElement = (attribute: string) =>
144-
document.querySelector(`[data-content=${attribute}] .unit-display`) as HTMLSpanElement;
153+
export const getDegreeSpanElement = (attribute: string) =>
154+
document.querySelector(
155+
`[data-content=${attribute}] .unit-display`
156+
) as HTMLSpanElement;

‎src/lib/packages.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
getNewColorButton,
1010
getParentElementOfColors,
1111
getRemoveNewColorButton,
12+
getAllColorInput,
1213
} from './getElements';
1314

1415
export const setGradientDegreeValue = (degreeElement: HTMLElement): void =>
@@ -333,9 +334,8 @@ export function addNewColorPicker(attribute: string): void {
333334
export function getColorsValue(attribute: string): Array<string> {
334335
const colorValues: string[] = [];
335336

336-
const colorInput = document.querySelectorAll(
337-
`[data-content=${attribute}] .color input`
338-
);
337+
const colorInput = getAllColorInput(attribute);
338+
339339
colorInput.forEach((value) => {
340340
const colorValue = value as HTMLInputElement;
341341
colorValues.push(colorValue.value);

‎src/main.ts

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,9 @@ FilePond.create(getImageEntryElement, {
154154
imageSRC = img.src;
155155

156156
// reference to reset button
157-
const resetBtn = document.querySelector("[data-reset='pic-text']") as HTMLButtonElement;
157+
const resetBtn = document.querySelector(
158+
"[data-reset='pic-text']"
159+
) as HTMLButtonElement;
158160

159161
// function to enable the get result button once image uploaded
160162
function enableImgResultBtn() {
@@ -164,7 +166,7 @@ FilePond.create(getImageEntryElement, {
164166

165167
getPicResultBtn.style.pointerEvents = '';
166168
//add reset button to dom
167-
resetBtn.classList.add("reset-show");
169+
resetBtn.classList.add('reset-show');
168170
}
169171

170172
enableImgResultBtn();
@@ -181,15 +183,15 @@ FilePond.create(getImageEntryElement, {
181183

182184
getPicResultBtn.style.pointerEvents = 'none';
183185
// remove reset button from dom
184-
resetBtn.classList.remove("reset-show");
186+
resetBtn.classList.remove('reset-show');
185187
});
186188

187189
// clear the input value when reset button is clicked.
188190

189191
function resetValue() {
190-
resetBtn.addEventListener("click", () => {
191-
closeBtn.click();
192-
})
192+
resetBtn.addEventListener('click', () => {
193+
closeBtn.click();
194+
});
193195
}
194196

195197
resetValue();
@@ -372,6 +374,12 @@ closeBar?.addEventListener('click', () => {
372374
}, 200);
373375
});
374376

377+
getDurationElement?.addEventListener('change', () => {
378+
displayAnimationPreview();
379+
});
380+
381+
getDegreeElement?.addEventListener('change', () => displayAnimationPreview());
382+
375383
// adds event listner for which generator should show
376384
generators.forEach((generator) => {
377385
generator?.addEventListener('click', (): void => {
@@ -407,15 +415,11 @@ getResultsButton.forEach((getResult) => {
407415
});
408416
});
409417

410-
getDegreeElement?.addEventListener('change', () => displayAnimationPreview());
411418
getRadioButtonSetElement.forEach((radioButton: HTMLInputElement) => {
412419
radioButton.onclick = () => {
413420
displayAnimationPreview();
414421
};
415422
});
416-
getDurationElement?.addEventListener('change', () => {
417-
displayAnimationPreview();
418-
});
419423

420424
// configuring dropdown menu
421425
dropDownElements.forEach((dropDown) => {

‎src/pages/gradient-background.ts

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import {
66
getCopyCodeButton,
77
getResultPage,
88
getRemoveNewColorButton,
9-
getAllFields,
109
getResetButton,
11-
getDegreeSpanElement
10+
getDegreeSpanElement,
11+
getGradientPreview,
1212
} from '../lib/getElements';
1313
import {
1414
copyCodeToClipboard,
@@ -33,6 +33,7 @@ const getRemoveColorButtonElement = getRemoveNewColorButton(attribute);
3333
let gradientBackgroundInputs = getAllInputElements('gradient-background');
3434

3535
const getDegreeElement = getRange(attribute);
36+
const resetButton = getResetButton(attribute);
3637

3738
function copyHandler() {
3839
const outputElement = getOutput(attribute);
@@ -101,6 +102,8 @@ export function addGradientBackgroundListener() {
101102
function addEventListenerToTheNewColorPicker() {
102103
gradientBackgroundInputs = getAllInputElements(attribute);
103104
inputEventListner();
105+
if (resetButton.classList.contains('reset-show')) return;
106+
resetButton.classList.add('reset-show');
104107
}
105108

106109
function inputEventListner() {
@@ -111,38 +114,43 @@ function inputEventListner() {
111114
});
112115
}
113116

114-
115-
116117
// reset the values of all target fields
117-
118118
function resetValues() {
119-
const { inputs } = getAllFields(attribute);
119+
const colorInput: HTMLInputElement[] = [...new Set([])];
120+
121+
resetButton.addEventListener('click', () => {
122+
resetButton.classList.remove('reset-show');
123+
getDegreeSpanElement(attribute).innerHTML = 'deg';
120124

121-
getResetButton(attribute).addEventListener("click", () => {
125+
getGradientPreview(attribute).style.background = '';
122126

123-
inputs.forEach(input => {
127+
gradientBackgroundInputs.forEach((input) => {
124128
input.value = input.defaultValue;
125-
});
126129

127-
getDegreeSpanElement(attribute).innerHTML = "deg";
128-
getResetButton(attribute).classList.remove("reset-show");
129-
})
130+
if (input.id.includes('color')) {
131+
colorInput.push(input);
132+
}
133+
});
130134

135+
if (colorInput.length > 2) {
136+
for (let i = 2; i < colorInput.length; i++) {
137+
removeColorPicker(attribute);
138+
}
139+
}
140+
});
131141
}
132142

133143
// get values from all targets to get notified when values change.
134144

135145
function getValues() {
146+
gradientBackgroundInputs.forEach((input) => {
147+
input.addEventListener('input', () => {
148+
if (input.value === '') return;
136149

137-
const { inputs } = getAllFields(attribute);
138-
139-
inputs.forEach(input => {
140-
input.addEventListener("input", () => {
141-
if (input.value !== "") {
142-
getResetButton(attribute).classList.add("reset-show");
143-
resetValues();
144-
}
145-
})
146-
})
150+
if (resetButton.classList.contains('reset-show')) return;
151+
resetButton.classList.add('reset-show');
152+
});
153+
});
147154
}
148-
getValues();
155+
resetValues();
156+
getValues();

‎src/pages/gradient-text.ts

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import {
99
getRemoveNewColorButton,
1010
getResultPage,
1111
getSVGButton,
12-
getAllFields,
1312
getResetButton,
14-
getDegreeSpanElement
13+
getDegreeSpanElement,
14+
getGradientPreview,
1515
} from '../lib/getElements';
1616
import {
1717
copyCodeToClipboard,
@@ -39,6 +39,7 @@ const getNewColorButtonElement = getNewColorButton(attribute);
3939
const getRemoveColorButtonElement = getRemoveNewColorButton(attribute);
4040

4141
const getDegreeElement = getRange(attribute);
42+
const resetButton = getResetButton(attribute);
4243

4344
function copyHandler() {
4445
const outputElement = getOutput(attribute);
@@ -155,9 +156,12 @@ export function addGradientTextListener() {
155156

156157
setGradientDegreeValue(getDegreeElement);
157158
}
159+
158160
function addEventListenerToTheNewColorPicker() {
159161
gradientTextInputs = getAllInputElements(attribute);
160162
inputEventListner();
163+
if (resetButton.classList.contains('reset-show')) return;
164+
resetButton.classList.add('reset-show');
161165
}
162166

163167
function inputEventListner() {
@@ -169,44 +173,44 @@ function inputEventListner() {
169173
}
170174

171175
// reset the values of all target fields
172-
173176
function resetValues() {
174-
const { inputs, textarea } = getAllFields(attribute);
177+
const colorInput: HTMLInputElement[] = [...new Set([])];
175178

176-
getResetButton(attribute).addEventListener("click", () => {
177-
inputs.forEach(input => {
178-
input.value = input.defaultValue;
179-
})
179+
resetButton.addEventListener('click', () => {
180+
resetButton.classList.remove('reset-show');
181+
getDegreeSpanElement(attribute).innerHTML = 'deg';
182+
183+
getGradientPreview(attribute).style.background = '';
180184

181-
textarea.value = textarea.defaultValue;
185+
gradientTextInputs.forEach((input) => {
186+
input.value = input.defaultValue;
182187

183-
getDegreeSpanElement(attribute).innerHTML = "deg";
184-
getResetButton(attribute).classList.remove("reset-show");
185-
})
188+
if (input.id.includes('color')) {
189+
colorInput.push(input);
190+
}
191+
});
186192

193+
if (colorInput.length > 2) {
194+
for (let i = 2; i < colorInput.length; i++) {
195+
removeColorPicker(attribute);
196+
}
197+
}
198+
});
187199
}
188200

189201
// get values from all targets to get notified when values change.
190202

191203
function getValues() {
192-
193-
const { inputs, textarea } = getAllFields(attribute);
194-
195-
196-
inputs.forEach(input => {
197-
input.addEventListener("input", () => {
198-
if (input.value !== "") {
199-
getResetButton(attribute).classList.add("reset-show");
200-
resetValues();
204+
gradientTextInputs.forEach((input) => {
205+
input.addEventListener('input', () => {
206+
if (input.nodeName === 'TEXTAREA') {
207+
if (input.value === '') return;
201208
}
202-
})
203-
})
204209

205-
textarea.addEventListener("input", () => {
206-
if (textarea.value !== "") {
207-
resetValues()
208-
getResetButton(attribute).classList.add("reset-show");
209-
}
210-
})
210+
if (resetButton.classList.contains('reset-show')) return;
211+
resetButton.classList.add('reset-show');
212+
});
213+
});
211214
}
212-
getValues();
215+
resetValues();
216+
getValues();

0 commit comments

Comments
 (0)