Skip to content

Commit

Permalink
feat: add reset button for new color input created
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dun-sin
Dun-sin committed Mar 12, 2023
1 parent 005d0a3 commit 79404fa
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 78 deletions.
36 changes: 24 additions & 12 deletions src/lib/getElements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,14 @@ export const getColorInput1 = (attribute: string): HTMLInputElement =>
export const getColorInput2 = (attribute: string): HTMLInputElement =>
document.getElementById(`${attribute}-color2`) as HTMLInputElement;

export const getAllInputElements = (attribute: string): NodeList =>
export const getAllColorInput = (
attribute: string
): NodeListOf<HTMLInputElement> =>
document.querySelectorAll(`[data-content=${attribute}] .color input`);

export const getAllInputElements = (
attribute: string
): NodeListOf<HTMLInputElement> =>
document.querySelectorAll(`.${attribute}-inputs`);

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


export const getAllFields = (attribute: string) => {
const inputs = document.querySelectorAll(`[data-content=${attribute}] input`) as NodeListOf<HTMLInputElement>;
const textarea = document.querySelector(`[data-content='${attribute}'] textarea`) as HTMLTextAreaElement;

const inputs = document.querySelectorAll(
`[data-content=${attribute}] input`
) as NodeListOf<HTMLInputElement>;
const textarea = document.querySelector(
`[data-content='${attribute}'] textarea`
) as HTMLTextAreaElement;

return {
inputs,
textarea
}
}
textarea,
};
};

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

export const getDegreeSpanElement = (attribute: string) =>
document.querySelector(`[data-content=${attribute}] .unit-display`) as HTMLSpanElement;
export const getDegreeSpanElement = (attribute: string) =>
document.querySelector(
`[data-content=${attribute}] .unit-display`
) as HTMLSpanElement;
6 changes: 3 additions & 3 deletions src/lib/packages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
getNewColorButton,
getParentElementOfColors,
getRemoveNewColorButton,
getAllColorInput,
} from './getElements';

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

const colorInput = document.querySelectorAll(
`[data-content=${attribute}] .color input`
);
const colorInput = getAllColorInput(attribute);

colorInput.forEach((value) => {
const colorValue = value as HTMLInputElement;
colorValues.push(colorValue.value);
Expand Down
24 changes: 14 additions & 10 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,9 @@ FilePond.create(getImageEntryElement, {
imageSRC = img.src;

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

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

getPicResultBtn.style.pointerEvents = '';
//add reset button to dom
resetBtn.classList.add("reset-show");
resetBtn.classList.add('reset-show');
}

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

getPicResultBtn.style.pointerEvents = 'none';
// remove reset button from dom
resetBtn.classList.remove("reset-show");
resetBtn.classList.remove('reset-show');
});

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

function resetValue() {
resetBtn.addEventListener("click", () => {
closeBtn.click();
})
resetBtn.addEventListener('click', () => {
closeBtn.click();
});
}

resetValue();
Expand Down Expand Up @@ -372,6 +374,12 @@ closeBar?.addEventListener('click', () => {
}, 200);
});

getDurationElement?.addEventListener('change', () => {
displayAnimationPreview();
});

getDegreeElement?.addEventListener('change', () => displayAnimationPreview());

// adds event listner for which generator should show
generators.forEach((generator) => {
generator?.addEventListener('click', (): void => {
Expand Down Expand Up @@ -407,15 +415,11 @@ getResultsButton.forEach((getResult) => {
});
});

getDegreeElement?.addEventListener('change', () => displayAnimationPreview());
getRadioButtonSetElement.forEach((radioButton: HTMLInputElement) => {
radioButton.onclick = () => {
displayAnimationPreview();
};
});
getDurationElement?.addEventListener('change', () => {
displayAnimationPreview();
});

// configuring dropdown menu
dropDownElements.forEach((dropDown) => {
Expand Down
54 changes: 31 additions & 23 deletions src/pages/gradient-background.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import {
getCopyCodeButton,
getResultPage,
getRemoveNewColorButton,
getAllFields,
getResetButton,
getDegreeSpanElement
getDegreeSpanElement,
getGradientPreview,
} from '../lib/getElements';
import {
copyCodeToClipboard,
Expand All @@ -33,6 +33,7 @@ const getRemoveColorButtonElement = getRemoveNewColorButton(attribute);
let gradientBackgroundInputs = getAllInputElements('gradient-background');

const getDegreeElement = getRange(attribute);
const resetButton = getResetButton(attribute);

function copyHandler() {
const outputElement = getOutput(attribute);
Expand Down Expand Up @@ -101,6 +102,8 @@ export function addGradientBackgroundListener() {
function addEventListenerToTheNewColorPicker() {
gradientBackgroundInputs = getAllInputElements(attribute);
inputEventListner();
if (resetButton.classList.contains('reset-show')) return;
resetButton.classList.add('reset-show');
}

function inputEventListner() {
Expand All @@ -111,38 +114,43 @@ function inputEventListner() {
});
}



// reset the values of all target fields

function resetValues() {
const { inputs } = getAllFields(attribute);
const colorInput: HTMLInputElement[] = [...new Set([])];

resetButton.addEventListener('click', () => {
resetButton.classList.remove('reset-show');
getDegreeSpanElement(attribute).innerHTML = 'deg';

getResetButton(attribute).addEventListener("click", () => {
getGradientPreview(attribute).style.background = '';

inputs.forEach(input => {
gradientBackgroundInputs.forEach((input) => {
input.value = input.defaultValue;
});

getDegreeSpanElement(attribute).innerHTML = "deg";
getResetButton(attribute).classList.remove("reset-show");
})
if (input.id.includes('color')) {
colorInput.push(input);
}
});

if (colorInput.length > 2) {
for (let i = 2; i < colorInput.length; i++) {
removeColorPicker(attribute);
}
}
});
}

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

function getValues() {
gradientBackgroundInputs.forEach((input) => {
input.addEventListener('input', () => {
if (input.value === '') return;

const { inputs } = getAllFields(attribute);

inputs.forEach(input => {
input.addEventListener("input", () => {
if (input.value !== "") {
getResetButton(attribute).classList.add("reset-show");
resetValues();
}
})
})
if (resetButton.classList.contains('reset-show')) return;
resetButton.classList.add('reset-show');
});
});
}
getValues();
resetValues();
getValues();
64 changes: 34 additions & 30 deletions src/pages/gradient-text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import {
getRemoveNewColorButton,
getResultPage,
getSVGButton,
getAllFields,
getResetButton,
getDegreeSpanElement
getDegreeSpanElement,
getGradientPreview,
} from '../lib/getElements';
import {
copyCodeToClipboard,
Expand Down Expand Up @@ -39,6 +39,7 @@ const getNewColorButtonElement = getNewColorButton(attribute);
const getRemoveColorButtonElement = getRemoveNewColorButton(attribute);

const getDegreeElement = getRange(attribute);
const resetButton = getResetButton(attribute);

function copyHandler() {
const outputElement = getOutput(attribute);
Expand Down Expand Up @@ -155,9 +156,12 @@ export function addGradientTextListener() {

setGradientDegreeValue(getDegreeElement);
}

function addEventListenerToTheNewColorPicker() {
gradientTextInputs = getAllInputElements(attribute);
inputEventListner();
if (resetButton.classList.contains('reset-show')) return;
resetButton.classList.add('reset-show');
}

function inputEventListner() {
Expand All @@ -169,44 +173,44 @@ function inputEventListner() {
}

// reset the values of all target fields

function resetValues() {
const { inputs, textarea } = getAllFields(attribute);
const colorInput: HTMLInputElement[] = [...new Set([])];

getResetButton(attribute).addEventListener("click", () => {
inputs.forEach(input => {
input.value = input.defaultValue;
})
resetButton.addEventListener('click', () => {
resetButton.classList.remove('reset-show');
getDegreeSpanElement(attribute).innerHTML = 'deg';

getGradientPreview(attribute).style.background = '';

textarea.value = textarea.defaultValue;
gradientTextInputs.forEach((input) => {
input.value = input.defaultValue;

getDegreeSpanElement(attribute).innerHTML = "deg";
getResetButton(attribute).classList.remove("reset-show");
})
if (input.id.includes('color')) {
colorInput.push(input);
}
});

if (colorInput.length > 2) {
for (let i = 2; i < colorInput.length; i++) {
removeColorPicker(attribute);
}
}
});
}

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

function getValues() {

const { inputs, textarea } = getAllFields(attribute);


inputs.forEach(input => {
input.addEventListener("input", () => {
if (input.value !== "") {
getResetButton(attribute).classList.add("reset-show");
resetValues();
gradientTextInputs.forEach((input) => {
input.addEventListener('input', () => {
if (input.nodeName === 'TEXTAREA') {
if (input.value === '') return;
}
})
})

textarea.addEventListener("input", () => {
if (textarea.value !== "") {
resetValues()
getResetButton(attribute).classList.add("reset-show");
}
})
if (resetButton.classList.contains('reset-show')) return;
resetButton.classList.add('reset-show');
});
});
}
getValues();
resetValues();
getValues();

1 comment on commit 79404fa

@vercel
Copy link

@vercel vercel bot commented on 79404fa Mar 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

code-magic – ./

code-magic-dun-sin.vercel.app
code-magic-git-main-dun-sin.vercel.app
trick-generator.vercel.app
code-magic.vercel.app

Please sign in to comment.