Skip to content

Commit edad3ea

Browse files
JohnChizzyDun-sin
JohnChizzy
and
Dun-sin
authored
feat: Buttons dropdown (#436)
Co-authored-by: Dunsin <[email protected]>
1 parent 3119e7e commit edad3ea

14 files changed

+597
-161
lines changed

‎index.html

Lines changed: 330 additions & 157 deletions
Large diffs are not rendered by default.

‎src/lib/getElements.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,24 @@ export const getOpenSideBarButton = (): HTMLElement =>
77
export const getResultPage = (): HTMLElement =>
88
document.querySelector('.side-results') as HTMLElement;
99

10+
export const getCssOrTailwindButton = (attribute: string): HTMLElement =>
11+
document.querySelector(
12+
`[data-css-tailwind=${attribute}-code]`
13+
) as HTMLElement;
14+
15+
export const getCssOrTailwindDropdown = (attribute: string): HTMLElement =>
16+
document.querySelector(
17+
`[data-dropdown=${attribute}-dropdown2]`
18+
) as HTMLElement;
19+
20+
export const getPngOrSvgButton = (attribute: string): HTMLElement =>
21+
document.querySelector(`[data-png-svg=${attribute}-image]`) as HTMLElement;
22+
23+
export const getPngOrSvgDropdown = (attribute: string): HTMLElement =>
24+
document.querySelector(
25+
`[data-dropdown=${attribute}-dropdown1]`
26+
) as HTMLElement;
27+
1028
export const getCopyCodeButton = (attribute: string): HTMLElement =>
1129
document.querySelector(`[data-download=${attribute}-code]`) as HTMLElement;
1230

‎src/lib/packages.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,3 +442,17 @@ export const whatColorButtonShouldShow = (attribute: string): void => {
442442
getRemoveNewColorButton(attribute).style.display = 'none';
443443
}
444444
};
445+
446+
// close dropdown on outside click
447+
448+
export function closeDropdown(
449+
toggleFunction: () => void,
450+
dropdown: HTMLElement,
451+
classToToggle: string
452+
): void {
453+
document.documentElement.addEventListener('click', function () {
454+
if (dropdown.classList.contains(classToToggle)) {
455+
toggleFunction();
456+
}
457+
});
458+
}

‎src/pages/animation.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,15 @@ import {
1212
getResultPage,
1313
getStyleSheet,
1414
getTailwindButton,
15+
getCssOrTailwindButton,
16+
getCssOrTailwindDropdown,
1517
} from '../lib/getElements';
16-
import {setGradientDegreeValue, showPopup, slideIn} from '../lib/packages';
18+
import {
19+
setGradientDegreeValue,
20+
showPopup,
21+
slideIn,
22+
closeDropdown,
23+
} from '../lib/packages';
1724

1825
let initial_length = 0;
1926
// let rule_added = false;
@@ -34,9 +41,19 @@ const getTailwindCodeButtonElement = getTailwindButton(attribute);
3441
const getOutputElement = getOutput(attribute);
3542
const getDegreeElement = getRange(attribute);
3643
const getRadioButtonSetElement = getRadioButtonSet(attribute);
44+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
45+
const showCopyClass = 'show-css-tailwind';
3746

3847
const preview = getPreviewSlider(attribute);
3948

49+
function getCssOrTailwind(e?: MouseEvent): void {
50+
e?.stopPropagation();
51+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
52+
}
53+
54+
// closes css and tailwind dropdown on outside click
55+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
56+
4057
initialConfiguration(
4158
getRadioButtonSetElement,
4259
getDegreeElement,
@@ -86,6 +103,8 @@ export function animationGenerator(type: 'newResults' | 'oldResults' | null) {
86103
);
87104
});
88105
manageTailwindAnimation(values);
106+
const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
107+
getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
89108
}
90109

91110
// configuring animation preview

‎src/pages/border-radius.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,14 @@ import {
99
getAllFields,
1010
getResetButton,
1111
getTailwindButton,
12+
getCssOrTailwindButton,
13+
getCssOrTailwindDropdown,
1214
} from '../lib/getElements';
1315
import {
1416
copyCSSCodeToClipboard,
1517
showPopup,
1618
copyTailwindCodeToClipboard,
19+
closeDropdown,
1720
} from '../lib/packages';
1821

1922
type Values = {
@@ -30,6 +33,8 @@ const borderTop = getBorderTop(attribute);
3033
const borderRight = getBorderRight(attribute);
3134
const borderLeft = getBorderLeft(attribute);
3235
const borderBottom = getBorderBottom(attribute);
36+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
37+
const showCopyClass = 'show-css-tailwind';
3338

3439
const borderRadiusPreview = document.querySelector(
3540
'.border-radius-preview-box > .preview'
@@ -45,6 +50,14 @@ function copyHandler() {
4550
);
4651
}
4752

53+
function getCssOrTailwind(e?: MouseEvent): void {
54+
e?.stopPropagation();
55+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
56+
}
57+
58+
// closes css and tailwind dropdown on outside click
59+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
60+
4861
function getBorderRadiusResult(
4962
attribute: string,
5063
values: Values,
@@ -63,6 +76,8 @@ function getBorderRadiusResult(
6376
getCodeButtonElement.addEventListener('click', copyHandler);
6477
const getTailwindCodeButtonElement = getTailwindButton(attribute);
6578
getTailwindCodeButtonElement.addEventListener('click', tailwindHandler);
79+
const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
80+
getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
6681
}
6782

6883
export function borderRadiusGenerator(

‎src/pages/box-shadow.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ import {
1212
getAllFields,
1313
getResetButton,
1414
getTailwindButton,
15+
getCssOrTailwindButton,
16+
getCssOrTailwindDropdown,
1517
} from '../lib/getElements';
1618
import {
1719
copyCSSCodeToClipboard,
1820
copyTailwindCodeToClipboard,
1921
showPopup,
2022
slideIn,
23+
closeDropdown,
2124
} from '../lib/packages';
2225

2326
type Values = {
@@ -30,6 +33,8 @@ type Values = {
3033

3134
const attribute = 'box-shadow';
3235
let isSliderOpen = false;
36+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
37+
const showCopyClass = 'show-css-tailwind';
3338

3439
function copyHandler() {
3540
const outputElement = getOutput(attribute);
@@ -41,6 +46,14 @@ function copyHandler() {
4146
);
4247
}
4348

49+
function getCssOrTailwind(e?: MouseEvent): void {
50+
e?.stopPropagation();
51+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
52+
}
53+
54+
// closes css and tailwind dropdown on outside click
55+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
56+
4457
export function boxShadowGenerator(
4558
type: 'newResults' | 'oldResults' | null
4659
): void {
@@ -91,6 +104,8 @@ function getBoxShadowResult(values: Values, outputElement: HTMLElement): void {
91104
getCodeButtonElement.addEventListener('click', copyHandler);
92105
const getTailwindCodeButtonElement = getTailwindButton(attribute);
93106
getTailwindCodeButtonElement.addEventListener('click', tailwindHandler);
107+
const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
108+
getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
94109
}
95110

96111
export function addBoxShadowListener(): void {

‎src/pages/gradient-background.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ let gradientBackgroundInputs = getAllInputElements('gradient-background');
3434

3535
const getDegreeElement = getRange(attribute);
3636
const resetButton = getResetButton(attribute);
37+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
38+
const showCopyClass = 'show-css-tailwind';
3739

3840
function copyHandler() {
3941
const outputElement = getOutput(attribute);
@@ -45,6 +47,14 @@ function copyHandler() {
4547
);
4648
}
4749

50+
function getCssOrTailwind(e?: MouseEvent): void {
51+
e?.stopPropagation();
52+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
53+
}
54+
55+
// closes css and tailwind dropdown on outside click
56+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
57+
4858
/**
4959
* sets the result to the output element
5060
*

‎src/pages/gradient-border.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
getDegreeSpanElement,
1313
getGradientPreview,
1414
getTailwindButton,
15+
getCssOrTailwindButton,
16+
getCssOrTailwindDropdown,
1517
} from '../lib/getElements';
1618
import {
1719
copyCSSCodeToClipboard,
@@ -24,6 +26,7 @@ import {
2426
createGradientPreview,
2527
getColorsValue,
2628
copyTailwindCodeToClipboard,
29+
closeDropdown,
2730
} from '../lib/packages';
2831

2932
type Values = {
@@ -42,6 +45,8 @@ const getOutputElement = getOutput(attribute);
4245

4346
const getDegreeElement = getRange(attribute);
4447
const resetButton = getResetButton(attribute);
48+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
49+
const showCopyClass = 'show-css-tailwind';
4550

4651
let gradientBorderInputs = getAllInputElements('gradient-border');
4752

@@ -57,6 +62,14 @@ function copyHandler() {
5762
);
5863
}
5964

65+
function getCssOrTailwind(e?: MouseEvent): void {
66+
e?.stopPropagation();
67+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
68+
}
69+
70+
// closes css and tailwind dropdown on outside click
71+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
72+
6073
/**
6174
* sets the result to the output element
6275
*
@@ -84,6 +97,8 @@ function getGradientBorderResult(
8497
getCodeButtonElement.addEventListener('click', copyHandler);
8598
const getTailwindCodeButtonElement = getTailwindButton(attribute);
8699
getTailwindCodeButtonElement.addEventListener('click', tailwindHandler);
100+
const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
101+
getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
87102
}
88103

89104
export function gradientBorderGenerator(

‎src/pages/gradient-text.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ import {
1313
getDegreeSpanElement,
1414
getGradientPreview,
1515
getTailwindButton,
16+
getCssOrTailwindButton,
17+
getCssOrTailwindDropdown,
18+
getPngOrSvgButton,
19+
getPngOrSvgDropdown,
1620
} from '../lib/getElements';
1721
import {
1822
copyCSSCodeToClipboard,
@@ -27,6 +31,7 @@ import {
2731
createGradientPreview,
2832
getColorsValue,
2933
copyTailwindCodeToClipboard,
34+
closeDropdown,
3035
} from '../lib/packages';
3136

3237
type Values = {
@@ -42,6 +47,10 @@ const getRemoveColorButtonElement = getRemoveNewColorButton(attribute);
4247

4348
const getDegreeElement = getRange(attribute);
4449
const resetButton = getResetButton(attribute);
50+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
51+
const getPngOrSvgDropdownElement = getPngOrSvgDropdown(attribute);
52+
const showCopyClass = 'show-css-tailwind';
53+
const showPngOrSvgClass = 'show-png-svg';
4554

4655
function copyHandler() {
4756
const outputElement = getOutput(attribute);
@@ -53,6 +62,22 @@ function copyHandler() {
5362
);
5463
}
5564

65+
function getCssOrTailwind(e?: MouseEvent): void {
66+
e?.stopPropagation();
67+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
68+
}
69+
70+
function getPngOrSvg(e?: MouseEvent) {
71+
e?.stopPropagation();
72+
getPngOrSvgDropdownElement.classList.toggle(showPngOrSvgClass);
73+
}
74+
75+
// closes css and tailwind dropdown on outside click
76+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
77+
78+
// closes png and css dropdown outside click
79+
closeDropdown(getPngOrSvg, getPngOrSvgDropdownElement, showPngOrSvgClass);
80+
5681
function pngDownloadHandler() {
5782
const outputElement = getOutput(attribute);
5883
downloadPNG(attribute, outputElement);
@@ -127,6 +152,8 @@ function getGradientTextResult(
127152
const getPNGButtonElement = getPNGButton(attribute);
128153
const getSVGButtonElement = getSVGButton(attribute);
129154
const getTailwindCodeButtonElement = getTailwindButton(attribute);
155+
const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
156+
const getPngOrSvgButtonElement = getPngOrSvgButton(attribute);
130157

131158
if (outputElement.childElementCount >= 1) {
132159
outputElement.innerHTML = '';
@@ -142,6 +169,10 @@ function getGradientTextResult(
142169
getCodeButtonElement.addEventListener('click', copyHandler);
143170

144171
getTailwindCodeButtonElement.addEventListener('click', tailwindHandler);
172+
173+
getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
174+
175+
getPngOrSvgButtonElement.addEventListener('click', getPngOrSvg);
145176
}
146177

147178
export function addGradientTextListener() {

‎src/pages/input-range.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,14 @@ import {
88
getAllFields,
99
getResetButton,
1010
getTailwindButton,
11+
getCssOrTailwindButton,
12+
getCssOrTailwindDropdown,
1113
} from '../lib/getElements';
1214
import {
1315
copyCSSCodeToClipboard,
1416
copyTailwindCodeToClipboard,
1517
showPopup,
18+
closeDropdown,
1619
} from '../lib/packages';
1720

1821
type RangeType = 'track' | 'thumb';
@@ -28,6 +31,8 @@ type Values = {
2831
};
2932

3033
const attribute = 'input-range';
34+
const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
35+
const showCopyClass = 'show-css-tailwind';
3136

3237
function setLabelValue() {
3338
const getThumbHeightLabel = document.getElementById(
@@ -129,12 +134,20 @@ function copyHandler() {
129134
'success'
130135
);
131136
}
137+
function getCssOrTailwind(e?: MouseEvent): void {
138+
e?.stopPropagation();
139+
getCssOrTailwindDropdownElement.classList.toggle(showCopyClass);
140+
}
141+
142+
// closes css and tailwind dropdown on outside click
143+
closeDropdown(getCssOrTailwind, getCssOrTailwindDropdownElement, showCopyClass);
132144

133145
export const rangeGenerator = () => {
134146
const getCodeButton = getCopyCodeButton(attribute);
135147
const getTailwindCodeButtonElement = getTailwindButton(attribute);
136148
const getTrackColor = getColorInput1(attribute);
137149
const getThumbColor = getColorInput2(attribute);
150+
const getCssOrTailwindButtonElement = getCssOrTailwindButton(attribute);
138151

139152
const getTrackHeightElement = document.getElementById(
140153
'track-height'
@@ -187,6 +200,7 @@ export const rangeGenerator = () => {
187200

188201
getCodeButton.addEventListener('click', copyHandler);
189202
getTailwindCodeButtonElement.addEventListener('click', tailwindHandler);
203+
getCssOrTailwindButtonElement.addEventListener('click', getCssOrTailwind);
190204
};
191205

192206
function resetValues() {

0 commit comments

Comments
 (0)