Skip to content

Commit ea3cd36

Browse files
HoangTran0410HoangTran0410
committed
smooth scroll setting for extension popup
1 parent 148d5f4 commit ea3cd36

File tree

5 files changed

+111
-70
lines changed

5 files changed

+111
-70
lines changed

‎popup/helpers/storage.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,8 @@ export const recentScriptsSaver = createScriptsSaver("useful-scripts-recently");
5858
export const favoriteScriptsSaver = createScriptsSaver(
5959
"useful-scripts-favorite"
6060
);
61+
62+
// default is false => enabled; true => disabled
63+
export const smoothScrollSaver = createVariableSaver(
64+
"useful-scripts-smoothScroll"
65+
);

‎popup/index.js‎

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
activeTabIdSaver,
2828
favoriteScriptsSaver,
2929
recentScriptsSaver,
30+
smoothScrollSaver,
3031
} from "./helpers/storage.js";
3132
import {
3233
canAutoRun,
@@ -44,6 +45,8 @@ const searchInput = document.querySelector(".search input");
4445
const searchFound = document.querySelector(".search .searchFound");
4546
const scrollToTopBtn = document.querySelector("#scroll-to-top");
4647

48+
let disableSmoothScroll = null;
49+
4750
// ========================================================
4851
// ========================= Tabs =========================
4952
// ========================================================
@@ -522,20 +525,19 @@ function initSettings() {
522525
// select language
523526
const langRow = document.createElement("div");
524527
const curLang = getLang();
528+
langRow.classList.add("row");
525529
langRow.innerHTML = `
526-
<div class="row">
527-
<div class="label">${t({ en: "Language", vi: "Ngôn ngữ" })}</div>
528-
<div class="right-container">
529-
<img src="${getFlag(curLang)}" />
530-
<select class="select">
531-
${LANG_KEY.map(
532-
(key) =>
533-
`<option value="${key}" ${key === curLang ? "selected" : ""}>
534-
${LANG[key]}
535-
</option>`
536-
).join("")}
537-
</select>
538-
</div>
530+
<div class="label">${t({ en: "Language", vi: "Ngôn ngữ" })}</div>
531+
<div class="right-container">
532+
<img src="${getFlag(curLang)}" />
533+
<select class="select">
534+
${LANG_KEY.map(
535+
(key) =>
536+
`<option value="${key}" ${key === curLang ? "selected" : ""}>
537+
${LANG[key]}
538+
</option>`
539+
).join("")}
540+
</select>
539541
</div>
540542
`;
541543
const select = langRow.querySelector(".select");
@@ -558,6 +560,7 @@ function initSettings() {
558560
let curThemeKey = getTheme();
559561
let curThem = THEME[curThemeKey];
560562
const themeRow = document.createElement("div");
563+
themeRow.classList.add("row");
561564
const author = curThem?.author
562565
? `<a target="_blank" href="${curThem.author.link}" title="${t({
563566
vi: "Tác giả",
@@ -567,19 +570,17 @@ function initSettings() {
567570
</a>`
568571
: "";
569572
themeRow.innerHTML = `
570-
<div class="row">
571-
<div class="label">${t({ en: "Theme", vi: "Chủ đề" })}</div>
572-
<div class="right-container">
573-
${author}
574-
<select class="select">
575-
${THEME_KEY.map((key) => {
576-
let selected = key === curThemeKey ? "selected" : "";
577-
return `<option value="${key}" ${selected}>
578-
${t(THEME[key])}
579-
</option>`;
580-
})}
581-
</select>
582-
</div>
573+
<div class="label">${t({ en: "Theme", vi: "Chủ đề" })}</div>
574+
<div class="right-container">
575+
${author}
576+
<select class="select">
577+
${THEME_KEY.map((key) => {
578+
let selected = key === curThemeKey ? "selected" : "";
579+
return `<option value="${key}" ${selected}>
580+
${t(THEME[key])}
581+
</option>`;
582+
})}
583+
</select>
583584
</div>
584585
`;
585586
const selectTheme = themeRow.querySelector(".select");
@@ -594,6 +595,33 @@ function initSettings() {
594595
};
595596
body.appendChild(themeRow);
596597

598+
// smooth scroll row
599+
const smoothScrollRow = document.createElement("div");
600+
smoothScrollRow.classList.add("row");
601+
smoothScrollRow.innerHTML = `
602+
<div class="label">${t({
603+
vi: "Cuộn chuột mượt",
604+
en: "Smooth scroll",
605+
})}</div>
606+
<div class="right-container">
607+
<button class="checkmark"></button>
608+
</div>
609+
`;
610+
const checkbox = smoothScrollRow.querySelector("button");
611+
checkbox.classList.toggle("active", !(smoothScrollSaver.get() ?? false));
612+
checkbox.onclick = () => {
613+
let curVal = smoothScrollSaver.get();
614+
let newVal = !curVal;
615+
smoothScrollSaver.set(newVal);
616+
617+
let enabled = !newVal;
618+
trackEvent("CHANGE-SMOOTH-SCROLL-" + (enabled ? "ON" : "OFF"));
619+
checkbox.classList.toggle("active", enabled);
620+
if (enabled) disableSmoothScroll = enableSmoothScroll();
621+
else if (typeof disableSmoothScroll == "function") disableSmoothScroll();
622+
};
623+
body.appendChild(smoothScrollRow);
624+
597625
openModal(
598626
t({
599627
en: "Settings",
@@ -679,9 +707,9 @@ window.addEventListener("scroll", onScrollEnd);
679707
// #endregion
680708

681709
(async function () {
682-
enableSmoothScroll();
683710
trackEvent("OPEN-POPUP");
684711

712+
if (!smoothScrollSaver.get()) disableSmoothScroll = enableSmoothScroll();
685713
initTracking();
686714
initSearch();
687715
initTooltip();

‎popup/styles/default.less‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ option {
123123
display: flex;
124124
justify-content: center;
125125
align-items: center;
126+
margin-bottom: 5px;
126127

127128
.label {
128129
flex-grow: 1;
@@ -298,7 +299,7 @@ option {
298299
}
299300
}
300301

301-
button {
302+
button:not(.checkmark) {
302303
position: relative;
303304
border: none;
304305
margin: 0.25em;
@@ -384,37 +385,40 @@ option {
384385
}
385386
}
386387
}
388+
}
387389

388-
.checkmark {
389-
display: inline-block;
390-
width: 25px;
391-
height: 25px;
392-
padding: 0;
393-
margin: 0px;
394-
border: 1px solid @checkmark_border;
395-
background-color: @bg_checkmark;
390+
.checkmark {
391+
display: inline-block;
392+
position: relative;
393+
width: 25px;
394+
height: 25px;
395+
padding: 0;
396+
margin: 0 5px 0 0;
397+
border-radius: 5px;
398+
border: 1px solid @checkmark_border;
399+
background-color: @bg_checkmark;
400+
cursor: pointer;
396401

397-
&:hover {
398-
background-color: @bg_checkmark_hover;
399-
}
400-
401-
&.active {
402-
background-color: @bg_checkmark_active;
403-
404-
&:after {
405-
content: "";
406-
position: absolute;
407-
display: block;
408-
left: 8px;
409-
top: 4px;
410-
width: 5px;
411-
height: 10px;
412-
border: solid @color_checkmark;
413-
border-width: 0 3px 3px 0;
414-
-webkit-transform: rotate(45deg);
415-
-ms-transform: rotate(45deg);
416-
transform: rotate(45deg);
417-
}
402+
&:not(.active):hover {
403+
background-color: @bg_checkmark_hover;
404+
}
405+
406+
&.active {
407+
background-color: @bg_checkmark_active;
408+
409+
&:after {
410+
content: "";
411+
position: absolute;
412+
display: block;
413+
left: 8px;
414+
top: 4px;
415+
width: 5px;
416+
height: 10px;
417+
border: solid @color_checkmark;
418+
border-width: 0 3px 3px 0;
419+
-webkit-transform: rotate(45deg);
420+
-ms-transform: rotate(45deg);
421+
transform: rotate(45deg);
418422
}
419423
}
420424
}

‎popup/styles/xtri98.less‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
}
9696

9797
.content {
98-
button {
98+
button:not(.checkmark) {
9999
position: relative;
100100
border: none;
101101
margin: 0.1em;
@@ -175,22 +175,24 @@
175175
border-radius: 0.25rem;
176176
}
177177
}
178+
}
178179

179-
.checkmark {
180-
display: inline-block;
181-
width: 28px;
182-
height: 25px;
183-
padding: 0;
184-
margin-left: 5px;
185-
border: 1px solid #999;
186-
background-color: #e6e6e6;
180+
.checkmark {
181+
display: inline-block;
182+
width: 28px;
183+
height: 25px;
184+
padding: 0;
185+
margin: 0 5px 0 0;
186+
border-radius: 5px;
187+
border: 1px solid @checkmark_border;
188+
background-color: @bg_checkmark;
189+
cursor: pointer;
187190

188-
&:hover {
189-
background-color: #ccc;
190-
}
191+
&:not(.active):hover {
192+
background-color: #ccc;
191193
}
192194

193-
.checkmark.active {
195+
&.active {
194196
background-color: #04aa6d;
195197

196198
&:after {

‎scripts/smoothScroll.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -971,4 +971,6 @@ export function run() {
971971
cleanup();
972972
cleanupMiddlemouse();
973973
};
974+
975+
return window.ufs_smoothScroll_disable;
974976
}

0 commit comments

Comments
 (0)