From 4ea20962e69e888ff4093a479ef42e6c510974b6 Mon Sep 17 00:00:00 2001 From: Abiodun Afolabi <91214759+Abbeyafolaby@users.noreply.github.com> Date: Fri, 21 Jul 2023 08:19:14 +0100 Subject: [PATCH] feat: added buttons for Tailwind code options (#410) --- index.html | 302 +++++++++++++++++++++---------- src/lib/getElements.ts | 5 + src/lib/packages.ts | 66 ++++++- src/pages/animation.ts | 72 +++++--- src/pages/border-radius.ts | 49 +++-- src/pages/box-shadow.ts | 66 ++++--- src/pages/gradient-background.ts | 18 +- src/pages/gradient-border.ts | 18 +- src/pages/gradient-text.ts | 19 +- src/pages/input-range.ts | 77 +++++--- src/pages/pic-text.ts | 18 +- src/pages/text-shadow.ts | 73 +++++--- src/pages/transform.ts | 73 +++++--- src/style.css | 4 + 14 files changed, 626 insertions(+), 234 deletions(-) diff --git a/index.html b/index.html index 790d9456..753e8abb 100644 --- a/index.html +++ b/index.html @@ -1179,7 +1179,16 @@

style="color: white; margin-right: 5px" width="20" > - Get Code + Get CSS Code + +
+ + Get Tailwind
@@ -1228,16 +1237,26 @@

Results

Download Svg - - +
+ + +
@@ -1267,16 +1286,26 @@

Results

Download Svg - - +
+ + +
@@ -1284,16 +1313,29 @@

Results

-
- +
+
+ +
+
+ +
@@ -1301,16 +1343,32 @@

Results

-
- +
+
+ +
+
+ +
@@ -1318,16 +1376,29 @@

Results

-
- +
+
+ +
+
+ +
@@ -1335,16 +1406,29 @@

Results

-
- +
+
+ +
+
+ +
@@ -1352,16 +1436,29 @@

Results

-
- +
+
+ +
+
+ +
@@ -1369,16 +1466,29 @@

Results

-
- +
+
+ +
+
+ +
@@ -1408,16 +1518,26 @@

Results

Download Svg
- - +
+ + +
diff --git a/src/lib/getElements.ts b/src/lib/getElements.ts index 3481414d..f3e93470 100644 --- a/src/lib/getElements.ts +++ b/src/lib/getElements.ts @@ -10,6 +10,11 @@ export const getResultPage = (): HTMLElement => export const getCopyCodeButton = (attribute: string): HTMLElement => document.querySelector(`[data-download=${attribute}-code]`) as HTMLElement; +export const getTailwindButton = (attribute: string): HTMLElement => + document.querySelector( + `[data-download=${attribute}-tailwind]` + ) as HTMLElement; + export const getPNGButton = (attribute: string): HTMLElement => document.querySelector(`[data-download=${attribute}-PNG]`) as HTMLElement; diff --git a/src/lib/packages.ts b/src/lib/packages.ts index 306fdb7b..7f9ecaa4 100644 --- a/src/lib/packages.ts +++ b/src/lib/packages.ts @@ -58,19 +58,31 @@ function createDownloadLink(fileName: string, url: string) { return link; } +// copyCodeToClipboard; + /** - * Allows you to copy to clipboard + * Allows you to copy CSS code to clipboard * * @param attribute The attribute name of the generator element * @param outputElement output element to display result */ -export function copyCodeToClipboard( +export function copyCSSCodeToClipboard( attribute: string, outputElement: HTMLElement ): void { actOnGenerator(attribute, outputElement); } +/** + * Allows you to copy Tailwind code to clipboard + * + * @param attribute The attribute name of the generator element + * @param outputElement output element to display result + */ +export function copyTailwindCodeToClipboard(attribute: string): void { + actOnTailwindGenerator(attribute); +} + export const addRule = (function (style) { const sheet = document.head.appendChild(style).sheet; return function (selector: string, css: {[x: string]: string}) { @@ -249,6 +261,56 @@ const actOnGenerator = (attribute: string, outputElement: HTMLElement) => { }); } }; +/** + * what should copy when the copy Tailwind button is clicked + * + * @param attribute attribute of the clicked generator + * @param outputElement output element to display result + */ +const actOnTailwindGenerator = (attribute: string) => { + let codeToCopy = ''; + + switch (attribute) { + case 'pic-text': + codeToCopy = ``; + break; + case 'gradient-text': + codeToCopy = ``; + break; + case 'gradient-border': + codeToCopy = ``; + break; + case 'gradient-background': + codeToCopy = ``; + break; + case 'border-radius': + codeToCopy = ``; + break; + case 'box-shadow': + codeToCopy = ``; + break; + case 'text-shadow': + codeToCopy = ``; + break; + case 'input-range': + codeToCopy = ``; + break; + default: + codeToCopy = ` + Couldn't copy, please try again :( + `; + } + + try { + copy(codeToCopy); + } catch { + Eggy({ + title: `Whoops`, + message: `Can't copy, try again`, + type: 'error', + }); + } +}; export function downloadPNG(attribute: string, outputImage: HTMLElement): void { DomToImage.toPng(outputImage, {quality: 1}).then((dataUrl) => { diff --git a/src/pages/animation.ts b/src/pages/animation.ts index 5c841329..8781c1bd 100644 --- a/src/pages/animation.ts +++ b/src/pages/animation.ts @@ -11,6 +11,7 @@ import { getResetButton, getResultPage, getStyleSheet, + getTailwindButton, } from '../lib/getElements'; import {setGradientDegreeValue, showPopup, slideIn} from '../lib/packages'; @@ -18,6 +19,7 @@ let initial_length = 0; // let rule_added = false; let isAnimationSliderOpen = false; let css = ''; +let tailwindCss = ''; type Values = { type: string; @@ -27,6 +29,7 @@ type Values = { const attribute = 'animation'; const getCodeButtonElement = getCopyCodeButton(attribute); +const getTailwindCodeButtonElement = getTailwindButton(attribute); const getOutputElement = getOutput(attribute); const getDegreeElement = getRange(attribute); @@ -74,6 +77,15 @@ export function animationGenerator(type: 'newResults' | 'oldResults' | null) { ); }); manageAnimation(values, getOutputElement, Stylesheet); + getTailwindCodeButtonElement.addEventListener('click', () => { + copy(tailwindCss); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); + }); + manageTailwindAnimation(values); } // configuring animation preview @@ -275,39 +287,55 @@ export function addAnimationListener() { setGradientDegreeValue(getDegreeElement); } - - function resetValues() { - const { inputs } = getAllFields(attribute); - - getResetButton(attribute).addEventListener("click", () => { + const {inputs} = getAllFields(attribute); - inputs.forEach(input => { + getResetButton(attribute).addEventListener('click', () => { + inputs.forEach((input) => { input.value = input.defaultValue; input.checked = input.defaultChecked; }); - - getDegreeSpanElement(attribute).innerHTML = "deg" - getResetButton(attribute).classList.remove("reset-show"); - }) - + getDegreeSpanElement(attribute).innerHTML = 'deg'; + getResetButton(attribute).classList.remove('reset-show'); + }); } // get values from all targets to get notified when values change. function getValues() { - - const { inputs } = getAllFields(attribute); - - inputs.forEach(input => { - input.addEventListener("input", () => { - if (inputs[4].value !== inputs[4].defaultValue || input.checked !== input.defaultChecked - || inputs[5].value !== inputs[5].defaultValue) { - getResetButton(attribute).classList.add("reset-show"); + const {inputs} = getAllFields(attribute); + + inputs.forEach((input) => { + input.addEventListener('input', () => { + if ( + inputs[4].value !== inputs[4].defaultValue || + input.checked !== input.defaultChecked || + inputs[5].value !== inputs[5].defaultValue + ) { + getResetButton(attribute).classList.add('reset-show'); resetValues(); } - }) - }) + }); + }); +} +getValues(); + +// Function to get tailwind styles for animation +function manageTailwindAnimation(values: Values) { + // if (rule_added) { + // stylesheet.deleteRule(initial_length + 1); + // rule_added = false; + // } + if (values.type === 'fade') { + tailwindCss = ``; + } else if (values.type === 'skew') { + tailwindCss = ``; + // rule_added = true; + } else if (values.type === 'flip') { + tailwindCss = ``; + // rule_added = true; + } else if (values.type === 'rotate') { + tailwindCss = ``; + } } -getValues(); \ No newline at end of file diff --git a/src/pages/border-radius.ts b/src/pages/border-radius.ts index 0b0a8fe1..eb5e600a 100644 --- a/src/pages/border-radius.ts +++ b/src/pages/border-radius.ts @@ -7,9 +7,14 @@ import { getCopyCodeButton, getResultPage, getAllFields, - getResetButton + getResetButton, + getTailwindButton, } from '../lib/getElements'; -import {copyCodeToClipboard, showPopup} from '../lib/packages'; +import { + copyCSSCodeToClipboard, + showPopup, + copyTailwindCodeToClipboard, +} from '../lib/packages'; type Values = { BorderTop: string; @@ -32,7 +37,7 @@ const borderRadiusPreview = document.querySelector( function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -56,6 +61,8 @@ function getBorderRadiusResult( const getCodeButtonElement = getCopyCodeButton(attribute); getCodeButtonElement.addEventListener('click', copyHandler); + const getTailwindCodeButtonElement = getTailwindButton(attribute); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); } export function borderRadiusGenerator( @@ -112,31 +119,39 @@ export function addBorderRadiusListener() { // reset the values of all target fields function resetValues() { - const { inputs } = getAllFields(attribute); - - getResetButton(attribute).addEventListener("click", () => { + const {inputs} = getAllFields(attribute); - inputs.forEach(input => { + getResetButton(attribute).addEventListener('click', () => { + inputs.forEach((input) => { input.value = input.defaultValue; }); - borderRadiusPreview.style.borderRadius = "0"; + borderRadiusPreview.style.borderRadius = '0'; - getResetButton(attribute).classList.remove("reset-show"); - }) + getResetButton(attribute).classList.remove('reset-show'); + }); } // get values from all targets to get notified when values change. function getValues() { + const {inputs} = getAllFields(attribute); - const { inputs } = getAllFields(attribute); - - inputs.forEach(input => { - input.addEventListener("input", () => { - getResetButton(attribute).classList.add("reset-show"); + inputs.forEach((input) => { + input.addEventListener('input', () => { + getResetButton(attribute).classList.add('reset-show'); resetValues(); - }) - }) + }); + }); } getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); +} diff --git a/src/pages/box-shadow.ts b/src/pages/box-shadow.ts index a4053077..ee7d0bdb 100644 --- a/src/pages/box-shadow.ts +++ b/src/pages/box-shadow.ts @@ -10,9 +10,15 @@ import { getPreviewSlider, getShadowFields, getAllFields, - getResetButton + getResetButton, + getTailwindButton, } from '../lib/getElements'; -import {copyCodeToClipboard, showPopup, slideIn} from '../lib/packages'; +import { + copyCSSCodeToClipboard, + copyTailwindCodeToClipboard, + showPopup, + slideIn, +} from '../lib/packages'; type Values = { hOffset: string; @@ -27,7 +33,7 @@ let isSliderOpen = false; function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -83,6 +89,8 @@ function getBoxShadowResult(values: Values, outputElement: HTMLElement): void { const getCodeButtonElement = getCopyCodeButton(attribute); getCodeButtonElement.addEventListener('click', copyHandler); + const getTailwindCodeButtonElement = getTailwindButton(attribute); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); } export function addBoxShadowListener(): void { @@ -133,34 +141,50 @@ export function addBoxShadowListener(): void { // reset the values of all target fields function resetValues() { - const { inputs } = getAllFields(attribute); - - getResetButton(attribute).addEventListener("click", () => { + const {inputs} = getAllFields(attribute); - inputs.forEach(input => { + getResetButton(attribute).addEventListener('click', () => { + inputs.forEach((input) => { input.value = input.defaultValue; }); - document.querySelector("[data-content='box-shadow'] #box-shadow-h-offset-field")!.innerHTML = "5px"; - document.querySelector("[data-content='box-shadow'] #box-shadow-v-offset-field")!.innerHTML = "10px"; - document.querySelector("[data-content='box-shadow'] #box-shadow-blur-field")!.innerHTML = "18px"; - document.querySelector("[data-content='box-shadow'] #box-shadow-spread-field")!.innerHTML = "5px"; - - getResetButton(attribute).classList.remove("reset-show"); - }) + document.querySelector( + "[data-content='box-shadow'] #box-shadow-h-offset-field" + )!.innerHTML = '5px'; + document.querySelector( + "[data-content='box-shadow'] #box-shadow-v-offset-field" + )!.innerHTML = '10px'; + document.querySelector( + "[data-content='box-shadow'] #box-shadow-blur-field" + )!.innerHTML = '18px'; + document.querySelector( + "[data-content='box-shadow'] #box-shadow-spread-field" + )!.innerHTML = '5px'; + + getResetButton(attribute).classList.remove('reset-show'); + }); } // get values from all targets to get notified when values change. function getValues() { + const {inputs} = getAllFields(attribute); - const { inputs } = getAllFields(attribute); - - inputs.forEach(input => { - input.addEventListener("input", () => { - getResetButton(attribute).classList.add("reset-show"); + inputs.forEach((input) => { + input.addEventListener('input', () => { + getResetButton(attribute).classList.add('reset-show'); resetValues(); - }) - }) + }); + }); } getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); +} diff --git a/src/pages/gradient-background.ts b/src/pages/gradient-background.ts index 26fa2129..495d76b3 100644 --- a/src/pages/gradient-background.ts +++ b/src/pages/gradient-background.ts @@ -9,9 +9,10 @@ import { getResetButton, getDegreeSpanElement, getGradientPreview, + getTailwindButton, } from '../lib/getElements'; import { - copyCodeToClipboard, + copyCSSCodeToClipboard, showPopup, whatColorButtonShouldShow, addNewColorPicker, @@ -19,6 +20,7 @@ import { setGradientDegreeValue, createGradientPreview, getColorsValue, + copyTailwindCodeToClipboard, } from '../lib/packages'; type Values = { @@ -37,7 +39,7 @@ const resetButton = getResetButton(attribute); function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -63,6 +65,8 @@ function getGradientBackgroundResult( const getCodeButtonElement = getCopyCodeButton(attribute); getCodeButtonElement.addEventListener('click', copyHandler); + const getTailwindCodeButtonElement = getTailwindButton(attribute); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); } export function gradientBackgroundGenerator( @@ -154,3 +158,13 @@ function getValues() { } resetValues(); getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); +} diff --git a/src/pages/gradient-border.ts b/src/pages/gradient-border.ts index 035d16d7..9f15fad6 100644 --- a/src/pages/gradient-border.ts +++ b/src/pages/gradient-border.ts @@ -11,9 +11,10 @@ import { getResetButton, getDegreeSpanElement, getGradientPreview, + getTailwindButton, } from '../lib/getElements'; import { - copyCodeToClipboard, + copyCSSCodeToClipboard, showPopup, addRule, whatColorButtonShouldShow, @@ -22,6 +23,7 @@ import { setGradientDegreeValue, createGradientPreview, getColorsValue, + copyTailwindCodeToClipboard, } from '../lib/packages'; type Values = { @@ -47,7 +49,7 @@ const resultPage = getResultPage(); function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -80,6 +82,8 @@ function getGradientBorderResult( const getCodeButtonElement = getCopyCodeButton(attribute); getCodeButtonElement.addEventListener('click', copyHandler); + const getTailwindCodeButtonElement = getTailwindButton(attribute); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); } export function gradientBorderGenerator( @@ -181,3 +185,13 @@ function getValues() { } resetValues(); getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); +} diff --git a/src/pages/gradient-text.ts b/src/pages/gradient-text.ts index 1d4ea568..29c213f2 100644 --- a/src/pages/gradient-text.ts +++ b/src/pages/gradient-text.ts @@ -12,9 +12,10 @@ import { getResetButton, getDegreeSpanElement, getGradientPreview, + getTailwindButton, } from '../lib/getElements'; import { - copyCodeToClipboard, + copyCSSCodeToClipboard, showPopup, downloadPNG, downloadSVG, @@ -25,6 +26,7 @@ import { setGradientDegreeValue, createGradientPreview, getColorsValue, + copyTailwindCodeToClipboard, } from '../lib/packages'; type Values = { @@ -43,7 +45,7 @@ const resetButton = getResetButton(attribute); function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -124,6 +126,7 @@ function getGradientTextResult( const getCodeButtonElement = getCopyCodeButton(attribute); const getPNGButtonElement = getPNGButton(attribute); const getSVGButtonElement = getSVGButton(attribute); + const getTailwindCodeButtonElement = getTailwindButton(attribute); if (outputElement.childElementCount >= 1) { outputElement.innerHTML = ''; @@ -137,6 +140,8 @@ function getGradientTextResult( getSVGButtonElement.addEventListener('click', svgDownloadHanlder); getCodeButtonElement.addEventListener('click', copyHandler); + + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); } export function addGradientTextListener() { @@ -214,3 +219,13 @@ function getValues() { } resetValues(); getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); +} diff --git a/src/pages/input-range.ts b/src/pages/input-range.ts index 58cc2552..e08ec5f5 100644 --- a/src/pages/input-range.ts +++ b/src/pages/input-range.ts @@ -6,9 +6,14 @@ import { getColorInput2, getAllInputElements, getAllFields, - getResetButton + getResetButton, + getTailwindButton, } from '../lib/getElements'; -import {copyCodeToClipboard, showPopup} from '../lib/packages'; +import { + copyCSSCodeToClipboard, + copyTailwindCodeToClipboard, + showPopup, +} from '../lib/packages'; type RangeType = 'track' | 'thumb'; type RangeValues = { @@ -117,7 +122,7 @@ function copyHandler() { const previewElement = document.getElementById( 'preview-range' ) as HTMLInputElement; - copyCodeToClipboard(attribute, previewElement); + copyCSSCodeToClipboard(attribute, previewElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -127,7 +132,7 @@ function copyHandler() { export const rangeGenerator = () => { const getCodeButton = getCopyCodeButton(attribute); - + const getTailwindCodeButtonElement = getTailwindButton(attribute); const getTrackColor = getColorInput1(attribute); const getThumbColor = getColorInput2(attribute); @@ -181,39 +186,63 @@ export const rangeGenerator = () => { }); getCodeButton.addEventListener('click', copyHandler); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); }; - function resetValues() { - const { inputs } = getAllFields(attribute); - - getResetButton(attribute).addEventListener("click", () => { + const {inputs} = getAllFields(attribute); - inputs.forEach(input => { + getResetButton(attribute).addEventListener('click', () => { + inputs.forEach((input) => { input.value = input.defaultValue; input.checked = input.defaultChecked; }); - (document.querySelector('[data-content="input-range"] #thumb-height-label') as HTMLElement).innerHTML = ""; - (document.querySelector('[data-content="input-range"] #track-height-label') as HTMLElement).innerHTML = ""; - (document.querySelector('[data-content="input-range"] #thumb-width-label') as HTMLElement).innerHTML = ""; - (document.querySelector('[data-content="input-range"] #track-width-label') as HTMLElement).innerHTML = ""; - - getResetButton(attribute).classList.remove("reset-show"); - }) + ( + document.querySelector( + '[data-content="input-range"] #thumb-height-label' + ) as HTMLElement + ).innerHTML = ''; + ( + document.querySelector( + '[data-content="input-range"] #track-height-label' + ) as HTMLElement + ).innerHTML = ''; + ( + document.querySelector( + '[data-content="input-range"] #thumb-width-label' + ) as HTMLElement + ).innerHTML = ''; + ( + document.querySelector( + '[data-content="input-range"] #track-width-label' + ) as HTMLElement + ).innerHTML = ''; + + getResetButton(attribute).classList.remove('reset-show'); + }); } // get values from all targets to get notified when values change. function getValues() { + const {inputs} = getAllFields(attribute); - const { inputs } = getAllFields(attribute); - - inputs.forEach(input => { - input.addEventListener("input", () => { - getResetButton(attribute).classList.add("reset-show"); + inputs.forEach((input) => { + input.addEventListener('input', () => { + getResetButton(attribute).classList.add('reset-show'); resetValues(); - }) - }) + }); + }); +} +getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); } -getValues(); \ No newline at end of file diff --git a/src/pages/pic-text.ts b/src/pages/pic-text.ts index 69ee81f8..1c250834 100644 --- a/src/pages/pic-text.ts +++ b/src/pages/pic-text.ts @@ -4,19 +4,21 @@ import { getCopyCodeButton, getPNGButton, getSVGButton, + getTailwindButton, } from '../lib/getElements'; import { - copyCodeToClipboard, + copyCSSCodeToClipboard, showPopup, downloadPNG, downloadSVG, + copyTailwindCodeToClipboard, } from '../lib/packages'; const attribute = 'pic-text'; function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -95,8 +97,20 @@ function getPicTextResult(attribute: string, outputNode: HTMLElement): void { const getCodeButtonElement = getCopyCodeButton(attribute); const getPNGButtonElement = getPNGButton(attribute); const getSVGButtonElement = getSVGButton(attribute); + const getTailwindCodeButtonElement = getTailwindButton(attribute); getPNGButtonElement.addEventListener('click', pngDownloadHandler); getSVGButtonElement.addEventListener('click', svgDownloadHanlder); getCodeButtonElement.addEventListener('click', copyHandler); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); +} + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); } diff --git a/src/pages/text-shadow.ts b/src/pages/text-shadow.ts index 1672b0b4..87b1e8c2 100644 --- a/src/pages/text-shadow.ts +++ b/src/pages/text-shadow.ts @@ -13,14 +13,16 @@ import { getShadowFields, getAllFields, getResetButton, + getTailwindButton, } from '../lib/getElements'; import { - copyCodeToClipboard, + copyCSSCodeToClipboard, showPopup, downloadPNG, downloadSVG, triggerEmptyAnimation, slideIn, + copyTailwindCodeToClipboard, } from '../lib/packages'; type Values = { @@ -36,7 +38,7 @@ const attribute = 'text-shadow'; function copyHandler() { const outputElement = getOutput(attribute); - copyCodeToClipboard(attribute, outputElement); + copyCSSCodeToClipboard(attribute, outputElement); showPopup( 'Code Copied', 'Code has been successfully copied to clipboard', @@ -104,6 +106,8 @@ function getTextShadowResult(values: Values, outputElement: HTMLElement): void { const getCodeButtonElement = getCopyCodeButton(attribute); getCodeButtonElement.addEventListener('click', copyHandler); + const getTailwindCodeButtonElement = getTailwindButton(attribute); + getTailwindCodeButtonElement.addEventListener('click', tailwindHandler); } export function addTextShadowListener(): void { @@ -158,48 +162,61 @@ export function addTextShadowListener(): void { }); } - // reset the values of all target fields function resetValues() { - const { inputs, textarea } = getAllFields(attribute); + const {inputs, textarea} = getAllFields(attribute); - getResetButton(attribute).addEventListener("click", () => { - inputs.forEach(input => { + getResetButton(attribute).addEventListener('click', () => { + inputs.forEach((input) => { input.value = input.defaultValue; - }) + }); textarea.value = textarea.defaultValue; - - document.querySelector("[data-content='text-shadow'] #text-shadow-h-offset-field")!.innerHTML = "2px"; - document.querySelector("[data-content='text-shadow'] #text-shadow-v-offset-field")!.innerHTML = "2px"; - document.querySelector("[data-content='text-shadow'] #text-shadow-blur-field")!.innerHTML = "4px"; - - getResetButton(attribute).classList.remove("reset-show"); - }) + document.querySelector( + "[data-content='text-shadow'] #text-shadow-h-offset-field" + )!.innerHTML = '2px'; + document.querySelector( + "[data-content='text-shadow'] #text-shadow-v-offset-field" + )!.innerHTML = '2px'; + document.querySelector( + "[data-content='text-shadow'] #text-shadow-blur-field" + )!.innerHTML = '4px'; + + getResetButton(attribute).classList.remove('reset-show'); + }); } // get values from all targets to get notified when values change. function getValues() { + const {inputs, textarea} = getAllFields(attribute); - const { inputs, textarea } = getAllFields(attribute); - - inputs.forEach(input => { - input.addEventListener("input", () => { - if (input.value !== "" || input.value !== input.defaultValue) { - getResetButton(attribute).classList.add("reset-show"); + inputs.forEach((input) => { + input.addEventListener('input', () => { + if (input.value !== '' || input.value !== input.defaultValue) { + getResetButton(attribute).classList.add('reset-show'); resetValues(); } - }) - }) + }); + }); - textarea.addEventListener("input", () => { - if (textarea.value !== "") { - resetValues() - getResetButton(attribute).classList.add("reset-show"); + textarea.addEventListener('input', () => { + if (textarea.value !== '') { + resetValues(); + getResetButton(attribute).classList.add('reset-show'); } - }) + }); +} +getValues(); + +// Tailwind codecopy handler +function tailwindHandler() { + copyTailwindCodeToClipboard(attribute); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); } -getValues(); \ No newline at end of file diff --git a/src/pages/transform.ts b/src/pages/transform.ts index 9c3872da..f3f8fbb9 100644 --- a/src/pages/transform.ts +++ b/src/pages/transform.ts @@ -8,6 +8,7 @@ import { getRange, getResetButton, getResultPage, + getTailwindButton, } from '../lib/getElements'; import {showPopup, slideIn} from '../lib/packages'; @@ -27,6 +28,7 @@ const transformExports = { }; let css = ''; +let tailwindCss = ''; let isSliderOpen = false; const preview = getPreviewSlider(attribute); @@ -156,6 +158,7 @@ function getTransformResult(outputElement: HTMLElement): void { }; manageTransform(values, outputElement); + manageTailwindTransform(values); const getCodeButtonElement = getCopyCodeButton(attribute); getCodeButtonElement.style.zIndex = '100'; @@ -167,6 +170,15 @@ function getTransformResult(outputElement: HTMLElement): void { 'success' ); }); + const getTailwindCodeButtonElement = getTailwindButton(attribute); + getTailwindCodeButtonElement.addEventListener('click', () => { + copy(tailwindCss); + showPopup( + 'Tailwind Code Copied', + 'Code has been successfully copied to clipboard', + 'success' + ); + }); } function manageTransform(values: Values, getOutputElement: HTMLElement) { @@ -211,38 +223,57 @@ function manageTransform(values: Values, getOutputElement: HTMLElement) { } } - function resetValues() { + const {inputs} = getAllFields(attribute); - const { inputs } = getAllFields(attribute); - - getResetButton(attribute).addEventListener("click", () => { - - inputs.forEach(input => { + getResetButton(attribute).addEventListener('click', () => { + inputs.forEach((input) => { input.value = input.defaultValue; input.checked = input.defaultChecked; }); - getResetButton(attribute).classList.remove("reset-show"); - }) - + getResetButton(attribute).classList.remove('reset-show'); + }); } - // get values from all targets to get notified when values change. function getValues() { - - const { inputs } = getAllFields(attribute); - - inputs.forEach(input => { - input.addEventListener("input", () => { - if (input.checked !== input.defaultChecked - || inputs[5].value !== inputs[5].defaultValue) { - getResetButton(attribute).classList.add("reset-show"); + const {inputs} = getAllFields(attribute); + + inputs.forEach((input) => { + input.addEventListener('input', () => { + if ( + input.checked !== input.defaultChecked || + inputs[5].value !== inputs[5].defaultValue + ) { + getResetButton(attribute).classList.add('reset-show'); resetValues(); } - }) - }) + }); + }); +} +getValues(); + +// Function to get tailwind styles for transform +function manageTailwindTransform(values: Values) { + switch (values.type) { + case 'scale': + tailwindCss = `scale`; + break; + case 'skew': + tailwindCss = `skew`; + break; + case 'translateX': + tailwindCss = `translateX`; + break; + case 'translateY': + tailwindCss = `Translatey`; + break; + case 'rotate': + tailwindCss = `Rotate`; + break; + default: + break; + } } -getValues(); \ No newline at end of file diff --git a/src/style.css b/src/style.css index 6035c882..ca039919 100644 --- a/src/style.css +++ b/src/style.css @@ -1085,6 +1085,10 @@ a { .input { padding: 2rem; } + + .btn-container { + justify-content: space-around; + } } @media screen and (max-width: 650px) {