Skip to content

Commit f83bdbc

Browse files
author
hoang.tran12
committed
refactor + badges
1 parent 616ecc8 commit f83bdbc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+882
-1009
lines changed

‎popup/helpers/storage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { allScripts } from "../../scripts/index.js";
1+
import allScripts from "../../scripts/_allScripts.js";
22

33
const createVariableSaver = (key, defaultValue = null) => ({
44
set: (data) => {

‎popup/helpers/theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function setTheme(themeKey) {
4343
if (themeKey in THEME) {
4444
currentThemeKey = themeKey;
4545
themeSaver.set(themeKey);
46-
cssTag.href = `styles/${themeKey}.less`;
46+
cssTag.href = `themes/${themeKey}.less`;
4747

4848
// remove old compiled css
4949
document.querySelector("style[id^=less]")?.remove?.();

‎popup/index.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { openModal } from "./helpers/modal.js";
22
import { refreshSpecialTabs, getAllTabs } from "./tabs.js";
3+
import { BADGES_CONFIG } from "../scripts/helpers/badge.js";
34
import { checkForUpdate } from "./helpers/checkForUpdate.js";
45
import { UfsGlobal } from "../scripts/content-scripts/ufs_global.js";
56
import { THEME, THEME_KEY, getTheme, setTheme } from "./helpers/theme.js";
@@ -228,16 +229,18 @@ function createScriptButton(script, isFavorite = false) {
228229
const badgeContainer = document.createElement("div");
229230
badgeContainer.classList.add("badgeContainer");
230231

231-
script.badges?.map((badge) => {
232-
const { text, color, backgroundColor } = badge;
233-
const badgeItem = document.createElement("span");
234-
badgeItem.classList.add("badge");
235-
badgeItem.innerHTML = t(text);
236-
badgeItem.style.color = color;
237-
badgeItem.style.backgroundColor = backgroundColor;
238-
239-
badgeContainer.appendChild(badgeItem);
240-
});
232+
script.badges
233+
.filter((badge) => badge in BADGES_CONFIG)
234+
.map((badge) => {
235+
const { text, color, backgroundColor } = BADGES_CONFIG[badge];
236+
const badgeItem = document.createElement("span");
237+
badgeItem.classList.add("badge");
238+
badgeItem.innerHTML = t(text);
239+
badgeItem.style.color = color;
240+
badgeItem.style.backgroundColor = backgroundColor;
241+
242+
badgeContainer.appendChild(badgeItem);
243+
});
241244

242245
button.appendChild(badgeContainer);
243246
}
@@ -692,7 +695,7 @@ function initTracking() {
692695

693696
function initScrollToTop() {
694697
scrollToTopBtn.addEventListener("click", () => {
695-
document.body.scrollTo({
698+
window.scrollTo({
696699
top: 0,
697700
behavior: "smooth",
698701
});
@@ -704,13 +707,13 @@ function initScrollToTop() {
704707
}
705708

706709
function saveScroll() {
707-
const scrollY = document.body.scrollTop;
710+
const scrollY = window.scrollY;
708711
Storage.set("popupScrollY", scrollY);
709712
}
710713

711714
function restoreScroll() {
712715
Storage.get("popupScrollY", 0).then((value) => {
713-
document.body.scrollTo({
716+
window.scrollTo({
714717
top: value,
715718
// behavior: "smooth",
716719
});
@@ -719,7 +722,7 @@ function restoreScroll() {
719722

720723
const onScrollEnd = UfsGlobal.Utils.debounce(() => {
721724
saveScroll();
722-
scrollToTopBtn.classList.toggle("hide", document.body.scrollTop < 200);
725+
scrollToTopBtn.classList.toggle("hide", window.scrollY < 200);
723726
}, 100);
724727

725728
window.addEventListener("scroll", onScrollEnd);

‎popup/popup.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23

34
<head>
5+
<title>Useful Script</title>
46
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
57
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
68
crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -10,7 +12,7 @@
1012

1113
<script src="./libs/swal2.min.js"></script>
1214

13-
<link rel="stylesheet/less" type="text/css" href="styles/default.less" />
15+
<link rel="stylesheet/less" type="text/css" href="themes/default.less" />
1416
<script src="libs/less.js"></script>
1517
</head>
1618

‎popup/styles/tooltip.less‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
// https://www.cssportal.com/css-tooltip-generator/
2+
@keyframes tooltip-vert {
3+
to {
4+
opacity: 1;
5+
transform: translate(-50%, 0);
6+
}
7+
}
8+
9+
@keyframes tooltip-horz {
10+
to {
11+
opacity: 1;
12+
transform: translate(0, -50%);
13+
}
14+
}
15+
16+
[data-tooltip] {
17+
position: relative;
18+
cursor: pointer;
19+
--animation-duration: .3s;
20+
21+
&::before {
22+
text-transform: none;
23+
font-size: .9em;
24+
line-height: 1;
25+
position: absolute;
26+
display: none;
27+
opacity: 0;
28+
content: '';
29+
border: 6px solid transparent;
30+
z-index: 101;
31+
}
32+
33+
&::after {
34+
text-transform: none;
35+
font-size: .9em;
36+
line-height: 1;
37+
position: absolute;
38+
display: none;
39+
opacity: 0;
40+
content: attr(data-tooltip);
41+
text-align: center;
42+
min-width: 3em;
43+
max-width: 21em;
44+
white-space: nowrap;
45+
overflow: hidden;
46+
text-overflow: ellipsis;
47+
padding: 6px 8px;
48+
border-radius: 3px;
49+
background: @bg_tooltip2;
50+
color: @color_tooltip2;
51+
z-index: 100;
52+
pointer-events: none;
53+
}
54+
55+
&:hover {
56+
&::before {
57+
display: block;
58+
}
59+
60+
&::after {
61+
display: block;
62+
}
63+
}
64+
65+
&:not([data-flow]) {
66+
&::before {
67+
bottom: 100%;
68+
border-bottom-width: 0;
69+
border-top-color: @bg_tooltip2;
70+
left: 50%;
71+
transform: translate(-50%, -.4em);
72+
}
73+
74+
&::after {
75+
bottom: calc(100% + 5px);
76+
left: 50%;
77+
transform: translate(-50%, -.4em);
78+
}
79+
80+
&:hover {
81+
&::before {
82+
animation: tooltip-vert var(--animation-duration) ease-out forwards;
83+
}
84+
85+
&::after {
86+
animation: tooltip-vert var(--animation-duration) ease-out forwards;
87+
}
88+
}
89+
}
90+
}
91+
92+
[data-tooltip=''] {
93+
&::before {
94+
display: none !important;
95+
}
96+
97+
&::after {
98+
display: none !important;
99+
}
100+
}
101+
102+
[data-tooltip][data-flow^="top"] {
103+
&::before {
104+
bottom: 100%;
105+
border-bottom-width: 0;
106+
border-top-color: @bg_tooltip2;
107+
left: 50%;
108+
transform: translate(-50%, -.4em);
109+
}
110+
111+
&::after {
112+
bottom: calc(100% + 5px);
113+
left: 50%;
114+
transform: translate(-50%, -.4em);
115+
}
116+
117+
&:hover {
118+
&::before {
119+
animation: tooltip-vert var(--animation-duration) ease-out forwards;
120+
}
121+
122+
&::after {
123+
animation: tooltip-vert var(--animation-duration) ease-out forwards;
124+
}
125+
}
126+
}
127+
128+
[data-tooltip][data-flow^="bottom"] {
129+
&::before {
130+
top: 100%;
131+
border-top-width: 0;
132+
border-bottom-color: @bg_tooltip2;
133+
left: 50%;
134+
transform: translate(-50%, .4em);
135+
}
136+
137+
&::after {
138+
top: calc(100% + 5px);
139+
left: 50%;
140+
transform: translate(-50%, .4em);
141+
}
142+
143+
&:hover {
144+
&::before {
145+
animation: tooltip-vert var(--animation-duration) ease-out forwards;
146+
}
147+
148+
&::after {
149+
animation: tooltip-vert var(--animation-duration) ease-out forwards;
150+
}
151+
}
152+
}
153+
154+
[data-tooltip][data-flow^="left"] {
155+
&::before {
156+
top: 50%;
157+
border-right-width: 0;
158+
border-left-color: @bg_tooltip2;
159+
left: calc(0em - 5px);
160+
transform: translate(-.5em, -50%);
161+
}
162+
163+
&::after {
164+
top: 50%;
165+
right: calc(100% + 5px);
166+
transform: translate(-.4em, -50%);
167+
}
168+
169+
&:hover {
170+
&::before {
171+
animation: tooltip-horz var(--animation-duration) ease-out forwards;
172+
}
173+
174+
&::after {
175+
animation: tooltip-horz var(--animation-duration) ease-out forwards;
176+
}
177+
}
178+
}
179+
180+
[data-tooltip][data-flow^="right"] {
181+
&::before {
182+
top: 50%;
183+
border-left-width: 0;
184+
border-right-color: @bg_tooltip2;
185+
right: calc(0em - 7px);
186+
transform: translate(.4em, -50%);
187+
}
188+
189+
&::after {
190+
top: 50%;
191+
left: calc(100% + 5px);
192+
transform: translate(.5em, -50%);
193+
}
194+
195+
&:hover {
196+
&::before {
197+
animation: tooltip-horz var(--animation-duration) ease-out forwards;
198+
}
199+
200+
&::after {
201+
animation: tooltip-horz var(--animation-duration) ease-out forwards;
202+
}
203+
}
204+
}

0 commit comments

Comments
 (0)