-
-
+
+
+
+
+
+
+
@@ -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) {