Skip to content

Commit 73a5939

Browse files
Dun-sinDun-sin
authored
feat(color): add option for extra color (#375)
clicking on add new color adds a new color picker and clicking on remove color removes the feature
1 parent bae1c13 commit 73a5939

File tree

6 files changed

+302
-104
lines changed

6 files changed

+302
-104
lines changed

‎index.html

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -390,7 +390,7 @@ <h2>
390390
<label for="color" class="color">
391391
<input
392392
type="text"
393-
data-coloris
393+
data-coloris=""
394394
placeholder="Tap to pick a color"
395395
id="gradient-text-color1"
396396
class="gradient-text-inputs"
@@ -408,6 +408,26 @@ <h2>
408408
</label>
409409
</div>
410410

411+
<div class="add-remove-color">
412+
<div class="addNewColor newColor">
413+
<iconify-icon
414+
icon="material-symbols:add"
415+
style="color: white"
416+
width="20"
417+
></iconify-icon>
418+
<p>Add New Color</p>
419+
</div>
420+
421+
<div class="removeNewColor newColor">
422+
<iconify-icon
423+
icon="material-symbols:remove"
424+
style="color: white"
425+
width="20"
426+
></iconify-icon>
427+
<p>Remove A Color</p>
428+
</div>
429+
</div>
430+
411431
<div class="preview" id="gradient-text-color-preview"></div>
412432

413433
<label id="degree">
@@ -423,6 +443,7 @@ <h2>
423443
class="gradient-text-inputs degree-range"
424444
/>
425445
</label>
446+
426447
<div class="btn" data-button="gradient-text">Get Results</div>
427448
</div>
428449

@@ -450,6 +471,26 @@ <h2>
450471
</label>
451472
</div>
452473

474+
<div class="add-remove-color">
475+
<div class="addNewColor newColor">
476+
<iconify-icon
477+
icon="material-symbols:add"
478+
style="color: white"
479+
width="20"
480+
></iconify-icon>
481+
<p>Add New Color</p>
482+
</div>
483+
484+
<div class="removeNewColor newColor">
485+
<iconify-icon
486+
icon="material-symbols:remove"
487+
style="color: white"
488+
width="20"
489+
></iconify-icon>
490+
<p>Remove A Color</p>
491+
</div>
492+
</div>
493+
453494
<div class="preview" id="gradient-border-color-preview"></div>
454495

455496
<label class="radius" for="gradient-border-radius">
@@ -509,6 +550,26 @@ <h2>
509550
</label>
510551
</div>
511552

553+
<div class="add-remove-color">
554+
<div class="addNewColor newColor">
555+
<iconify-icon
556+
icon="material-symbols:add"
557+
style="color: white"
558+
width="20"
559+
></iconify-icon>
560+
<p>Add New Color</p>
561+
</div>
562+
563+
<div class="removeNewColor newColor">
564+
<iconify-icon
565+
icon="material-symbols:remove"
566+
style="color: white"
567+
width="20"
568+
></iconify-icon>
569+
<p>Remove A Color</p>
570+
</div>
571+
</div>
572+
512573
<div class="preview" id="gradient-background-color-preview"></div>
513574

514575
<label id="degree">
@@ -648,7 +709,7 @@ <h2>
648709
<div class="preview-slider"></div>
649710

650711
<div class="colors">
651-
<label for="color" class="color">
712+
<label for="color" class="color full-page">
652713
<input
653714
type="text"
654715
data-coloris
@@ -738,7 +799,7 @@ <h2>
738799
></textarea>
739800

740801
<div class="colors">
741-
<label for="color" class="color">
802+
<label for="color" class="color full-page">
742803
<input
743804
type="text"
744805
data-coloris

‎src/lib/general.ts

Lines changed: 112 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,19 @@ export const getShadowColor = (attribute: string): HTMLInputElement =>
9797
export const getShadowPreview = (attribute: string): HTMLInputElement =>
9898
document.getElementById(`${attribute}-preview`) as HTMLInputElement;
9999

100+
export const getParentElementOfColors = (attribute: string): HTMLElement =>
101+
document.querySelector(`[data-content=${attribute}] .colors`) as HTMLElement;
102+
103+
export const getNewColorButton = (attribute: string): HTMLElement =>
104+
document.querySelector(
105+
`[data-content=${attribute}] .addNewColor`
106+
) as HTMLElement;
107+
108+
export const removeNewColorButton = (attribute: string): HTMLElement =>
109+
document.querySelector(
110+
`[data-content=${attribute}] .removeNewColor`
111+
) as HTMLElement;
112+
100113
export const setGradientDegreeValue = (degreeElement: HTMLElement): void =>
101114
degreeElement.addEventListener('input', (e) => {
102115
const target = e.target as HTMLInputElement;
@@ -142,15 +155,15 @@ export function slideIn(slider: HTMLElement, isOpen: boolean) {
142155
}
143156

144157
export const createGradientPreview = (
145-
color1: HTMLInputElement,
146-
color2: HTMLInputElement,
147158
range: HTMLInputElement,
148-
preview: HTMLElement
159+
attribute: string
149160
) => {
150-
const colorFrom = color1?.value;
151-
const colorTo = color2?.value;
152161
const fill = range?.value;
153-
preview.style.background = `linear-gradient(${fill}deg, ${colorFrom}, ${colorTo})`;
162+
gradientPreview(
163+
attribute
164+
).style.background = `linear-gradient(${fill}deg, ${getColorsValue(
165+
attribute
166+
).join(', ')})`;
154167
};
155168

156169
function createDownloadLink(fileName: string, url: string) {
@@ -173,6 +186,21 @@ export function copyCodeToClipboard(
173186
actOnGenerator(attribute, outputElement);
174187
}
175188

189+
export const addRule = (function (style) {
190+
const sheet = document.head.appendChild(style).sheet;
191+
return function (selector: string, css: {[x: string]: any}) {
192+
const propText =
193+
typeof css === 'string'
194+
? css
195+
: Object.keys(css)
196+
.map(function (p) {
197+
return p + ':' + (p === 'content' ? "'" + css[p] + "'" : css[p]);
198+
})
199+
.join(';');
200+
sheet?.insertRule(selector + '{' + propText + '}', sheet.cssRules.length);
201+
};
202+
})(document.createElement('style'));
203+
176204
/**
177205
* what should copy when the copy css button is clicked
178206
*
@@ -368,3 +396,81 @@ export function triggerEmptyAnimation(inputElement: HTMLInputElement): void {
368396
inputElement.style.borderColor = 'white';
369397
}, 1000);
370398
}
399+
400+
export function addNewColorPicker(attribute: string): void {
401+
const getParentElementToAddTo = getParentElementOfColors(attribute);
402+
const numberOfChildren = getParentElementToAddTo?.childElementCount;
403+
404+
if (numberOfChildren === undefined || numberOfChildren === 4) return;
405+
406+
const colorNumber = numberOfChildren + 1;
407+
408+
getParentElementToAddTo?.appendChild(createLabelForNewColor());
409+
whatColorButtonShouldShow(attribute);
410+
411+
// create label element
412+
function createLabelForNewColor(): Node {
413+
const labelWrapperForColor = document.createElement('label');
414+
labelWrapperForColor.setAttribute('for', 'color');
415+
labelWrapperForColor.className = 'color';
416+
417+
labelWrapperForColor.appendChild(createNewColor());
418+
419+
return labelWrapperForColor;
420+
}
421+
422+
// create color pickter
423+
function createNewColor(): Node {
424+
const newColorCreated = document.createElement('input');
425+
newColorCreated.setAttribute('type', 'text');
426+
newColorCreated.setAttribute('data-coloris', '');
427+
newColorCreated.placeholder = 'Tap to pick a color';
428+
newColorCreated.id = `${attribute}-color${colorNumber}`;
429+
newColorCreated.className = `${attribute}-inputs`;
430+
431+
return newColorCreated;
432+
}
433+
}
434+
435+
export function getColorsValue(attribute: string): Array<string> {
436+
const colorValues: string[] = [];
437+
438+
const colorInput = document.querySelectorAll(
439+
`[data-content=${attribute}] .color input`
440+
);
441+
colorInput.forEach((value) => {
442+
const colorValue = value as HTMLInputElement;
443+
colorValues.push(colorValue.value);
444+
});
445+
446+
return colorValues;
447+
}
448+
449+
export function removeColorPicker(attribute: string): void {
450+
const getParentElementToRemoveFrom = getParentElementOfColors(attribute);
451+
const numberOfChildren = getParentElementToRemoveFrom?.childElementCount;
452+
453+
if (numberOfChildren === undefined || numberOfChildren === 2) return;
454+
getParentElementToRemoveFrom?.lastChild?.remove();
455+
456+
whatColorButtonShouldShow(attribute);
457+
}
458+
459+
export function whatColorButtonShouldShow(attribute: string): void {
460+
const getNumberOfChildren =
461+
getParentElementOfColors(attribute).childElementCount;
462+
463+
// display add new color button
464+
if (getNumberOfChildren === 2 || getNumberOfChildren !== 4) {
465+
getNewColorButton(attribute).style.display = 'flex';
466+
} else {
467+
getNewColorButton(attribute).style.display = 'none';
468+
}
469+
470+
// display remove color button
471+
if (getNumberOfChildren > 2) {
472+
removeNewColorButton(attribute).style.display = 'flex';
473+
} else {
474+
removeNewColorButton(attribute).style.display = 'none';
475+
}
476+
}

‎src/pages/gradient-background.ts

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
import * as utils from '../lib/general';
22

33
type Values = {
4-
firstColor: string;
5-
secondColor: string;
64
degree: string;
75
};
86

97
const attribute = 'gradient-background';
108

11-
const gradientBackgroundInputs = utils.getAllInputElements(
12-
'gradient-background'
13-
);
9+
const getNewColorButton = utils.getNewColorButton(attribute);
10+
const getRemoveColorButton = utils.removeNewColorButton(attribute);
11+
12+
let gradientBackgroundInputs = utils.getAllInputElements('gradient-background');
1413

15-
const backgroundPreview = utils.gradientPreview('gradient-background');
16-
const getFirstColor = utils.getColorInput1(attribute);
17-
const getSecondColor = utils.getColorInput2(attribute);
1814
const getDegreeElement = utils.getRange(attribute);
1915

2016
function copyHandler() {
@@ -39,7 +35,9 @@ function getGradientBackgroundResult(
3935
values: Values,
4036
outputElement: HTMLElement
4137
): void {
42-
outputElement.style.background = `linear-gradient(${values.degree}deg, ${values.firstColor}, ${values.secondColor})`;
38+
outputElement.style.background = `linear-gradient(${values.degree}deg, ${utils
39+
.getColorsValue(attribute)
40+
.join(', ')})`;
4341

4442
const getCodeButtonElement = utils.getCopyCodeButton(attribute);
4543
getCodeButtonElement.addEventListener('click', copyHandler);
@@ -51,36 +49,43 @@ export function gradientBackgroundGenerator(
5149
if (type === null) return;
5250

5351
const getOutputElement = utils.getOutput(attribute);
54-
55-
if (getFirstColor.value == '' || getSecondColor.value == '') {
56-
getFirstColor.value == '' && utils.triggerEmptyAnimation(getFirstColor);
57-
getSecondColor.value == '' && utils.triggerEmptyAnimation(getSecondColor);
58-
return;
59-
}
6052
const resultPage = utils.getResultPage();
6153

6254
resultPage.style.display = 'flex';
6355
if (type === 'oldResults') return;
6456

6557
const values: Values = {
66-
firstColor: getFirstColor.value,
67-
secondColor: getSecondColor.value,
6858
degree: getDegreeElement.value,
6959
};
7060
getGradientBackgroundResult(attribute, values, getOutputElement);
7161
}
7262

7363
export function addGradientBackgroundListener() {
64+
utils.whatColorButtonShouldShow(attribute);
65+
getNewColorButton.addEventListener('click', () => {
66+
utils.addNewColorPicker(attribute);
67+
addEventListenerToTheNewColorPicker();
68+
});
69+
70+
getRemoveColorButton.addEventListener('click', () => {
71+
utils.removeColorPicker(attribute);
72+
addEventListenerToTheNewColorPicker();
73+
});
74+
75+
inputEventListner();
76+
77+
utils.setGradientDegreeValue(getDegreeElement);
78+
}
79+
80+
function addEventListenerToTheNewColorPicker() {
81+
gradientBackgroundInputs = utils.getAllInputElements(attribute);
82+
inputEventListner();
83+
}
84+
85+
function inputEventListner() {
7486
gradientBackgroundInputs.forEach((inputElement) => {
7587
inputElement.addEventListener('input', () => {
76-
utils.createGradientPreview(
77-
getFirstColor,
78-
getSecondColor,
79-
getDegreeElement,
80-
backgroundPreview
81-
);
88+
utils.createGradientPreview(getDegreeElement, attribute);
8289
});
8390
});
84-
85-
utils.setGradientDegreeValue(getDegreeElement);
8691
}

0 commit comments

Comments
 (0)