Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-06 19:47:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

address isssues for pull request

Browse Source
This commit is contained in:
Áron Hegymegi-Kiss
2022-01-09 21:28:30 +01:00
parent ed17d4859f
commit 83db64d084
9 changed files with 327 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/_locales/en/messages.json
View File

@@ -863,13 +863,9 @@
"message": "h", "message": "h",
"description": "100h" "description": "100h"
}, },
"optionsTabCategories": {
"message": "Categories",
"description": "Appears in Options as a tab header for setting up categories. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
},
"optionsTabBehavior": { "optionsTabBehavior": {
"message": "Behavior", "message": "Behavior",
"description": "Appears in Options as a tab header for options related to the general behavior of the extension. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for options related to categories and skipping behavior. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabInterface": { "optionsTabInterface": {
"message": "Interface", "message": "Interface",
@@ -879,16 +875,12 @@
"message": "Keyboard shortcuts", "message": "Keyboard shortcuts",
"description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabPrivacy": {
"message": "Privacy",
"description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server). To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
},
"optionsTabBackup": { "optionsTabBackup": {
"message": "Backup/Restore", "message": "Backup/Restore",
"description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabAdvanced": { "optionsTabAdvanced": {
"message": "Advanced", "message": "Miscellaneous",
"description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"noticeVisibilityLabel": { "noticeVisibilityLabel": {

148
public/help/styles.css
View File

@@ -1,5 +1,31 @@
:root {
--color-scheme: dark;
--background: #333333;
--header-color: #212121;
--dialog-background: #181818;
--dialog-border: white;
--text: #c4c4c4;
--title: #dad8d8;
--disabled: #520000;
--black: black;
--white: white;
}
[data-theme="light"] {
--color-scheme: light;
--background: #f9f9f9;
--header-color: white;
--dialog-background: #f9f9f9;
--dialog-border: #282828;
--text: #262626;
--title: #707070;
--disabled: #ffcaca;
--black: white;
--white: black;
}
html { html {
color-scheme: dark; color-scheme: var(--color-scheme);
} }
.bigText { .bigText {
@@ -7,7 +33,7 @@ html {
} }
body { body {
background-color: #333333; background-color: var(--background);
font-family: sans-serif; font-family: sans-serif;
} }
@@ -15,6 +41,10 @@ body {
text-align: center; text-align: center;
} }
.inline {
display: inline-block;
}
.container { .container {
max-width: 60%; max-width: 60%;
margin: auto; margin: auto;
@@ -54,7 +84,7 @@ body {
vertical-align: middle; vertical-align: middle;
font-size: 50px; font-size: 50px;
color: #212121; color: var(--header-color);
padding: 20px; padding: 20px;
@@ -127,8 +157,8 @@ p,li {
font-size: 16px; font-size: 16px;
} }
p,li,a { p,li,a,span,div {
color: #c4c4c4; color: var(--text);
} }
p,li,code,a { p,li,code,a {
@@ -162,7 +192,7 @@ img {
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
color: #dad8d8; color: var(--title);
text-align: center; text-align: center;
} }
@@ -203,21 +233,93 @@ svg {
} }
} }
/* Light mode, if requested */ /* keybind dialog */
@media only screen and (prefers-color-scheme: light) { .key {
html { border-width: 1px;
color-scheme: light; border-style: solid;
} border-radius: 5px;
body { display: inline-block;
background-color: #f9f9f9; min-width: 33px;
} text-align: center;
p,li,a { font-weight: bold;
color: #262626; border-color: var(--white);
} box-sizing: border-box;
h1,h2,h3,h4,h5,h6 { }
color: #707070;
} .unbound, .key {
#title { padding: 8px;
color: white; }
}
#keybind-dialog .dialog {
position: fixed;
border-width: 3px;
border-style: solid;
border-radius: 15px;
max-height: 100vh;
width: 400px;
overflow-x: auto;
z-index: 100;
padding: 15px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
background-color: var(--dialog-background);
border-color: var(--dialog-border);
}
#change-keybind-buttons {
float: right;
}
#change-keybind-buttons > .option-button {
margin: 0 2px;
}
#change-keybind-settings {
margin: 15px 15px 30px;
}
#change-keybind-settings .key {
vertical-align: top;
margin: 15px 0 0 40px;
height: 34px;
}
#change-keybind-error {
margin-bottom: 15px;
color: red;
font-weight: bold;
}
.blocker {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 90;
background-color: #00000080;
}
.option-button {
cursor: pointer;
background-color: #c00000;
padding: 10px;
color: white;
border-radius: 5px;
font-size: 14px;
width: max-content;
}
.option-button:hover:not(.disabled) {
background-color: #fc0303;
}
.option-button.disabled {
cursor: default;
background-color: var(--disabled);
color: grey;
} }

213
public/options/options.css
View File

@@ -1,101 +1,59 @@
/* Options page CSS */ /* Options page CSS */
/* Dark mode CSS, this is the default if unsupported */ :root {
html { --color-scheme: dark;
color-scheme: dark; --background: #333333;
} --menu-background: #181818;
body { --menu-foreground: white;
background-color: #333333; --dialog-background: #181818;
} --dialog-border: white;
#navigation, #keybind-dialog .dialog { --tab-color: #242424;
background-color: #181818; --tab-hover: white;
color: white; --description: #dfdfdf;
} --disabled: #520000;
.tab-heading { --slider: #707070;
background-color: #242424; --title: #dad8d8;
color: white; --border-color: #484848;
} --black: black;
.tab-heading:hover { --white: white;
outline: 3px solid white;
}
.medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: white;
}
.small-description, p, li, span, div {
color: #dfdfdf;
}
.option-button.disabled {
background-color: #520000;
color: grey;
}
.slider {
background-color: #707070;
}
h1,h2,h3,h4,h5,h6 {
color: #dad8d8;
}
.option-group > div {
border-bottom: 1px solid #484848;
border-image: linear-gradient(to right, #484848, #00000000 80%) 1;
}
.categoryTableElement td {
border-top: 1px solid #484848;
}
.key, #keybind-dialog .dialog {
border-color: white;
} }
/* Light mode, if requested */ [data-theme="light"] {
@media only screen and (prefers-color-scheme: light) { --color-scheme: light;
html { --background: #f9f9f9;
color-scheme: light; --menu-background: #dbdbdb;
} --menu-foreground: #212121;
body { --dialog-background: #f9f9f9;
background-color: #f9f9f9; --dialog-border: #282828;
} --tab-color: #ababab;
#navigation, #keybind-dialog .dialog { --tab-hover: #2e2e2e;
background-color: #dbdbdb; --description: #262626;
color: #212121; --disabled: #ffcaca;
} --slider: #bfbebe;
.tab-heading { --title: #707070;
background-color: #ababab; --border-color: #d9d9d9;
color: black; --black: white;
} --white: black;
.tab-heading:hover { }
outline: 3px solid #2e2e2e;
} .medium-description, .switch-container, .optionLabel, .categoryTableElement {
.medium-description, .switch-container, .optionLabel, .categoryTableElement { color: var(--white);
color: black; }
}
.small-description, p, li, span, div { .small-description, p, li, span, div {
color: #262626; color: var(--description);
} }
.option-button.disabled {
background-color: #ffcaca; h1,h2,h3,h4,h5,h6 {
color: grey; color: var(--title);
}
.slider {
background-color: #bfbebe;
}
h1,h2,h3,h4,h5,h6 {
color: #707070;
}
.option-group > div {
border-bottom: 1px solid #d9d9d9;
border-image: linear-gradient(to right, #d9d9d9, #00000000 80%) 1;
}
.categoryTableElement td {
border-top: 1px solid #d9d9d9;
}
.key, #keybind-dialog .dialog {
border-color: black;
}
} }
html, body { html, body {
color-scheme: var(--color-scheme);
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
background-color: var(--background);
} }
* { * {
@@ -104,10 +62,9 @@ html, body {
#options-container { #options-container {
display: flex; display: flex;
justify-content: space-between;
} }
#navigation { #menubar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
@@ -117,12 +74,20 @@ html, body {
border-radius: 15px; border-radius: 15px;
margin: 15px; margin: 15px;
z-index: 10; z-index: 10;
background-color: var(--menu-background);
color: var(--menu-foreground);
}
#navigation {
display: flex;
flex-direction: column;
gap: 30px;
} }
.tab-heading { .tab-heading {
font-size: 18px; font-size: 18px;
height: 50px; height: 55px;
line-height: 50px; line-height: 55px;
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
border-radius: 15px; border-radius: 15px;
@@ -130,6 +95,12 @@ html, body {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
background-color: var(--tab-color);
color: var(--white);
}
.tab-heading:hover {
outline: 3px solid var(--tab-hover);
} }
.tab-heading.selected { .tab-heading.selected {
@@ -144,6 +115,8 @@ html, body {
.option-group > div { .option-group > div {
min-height: 50px; min-height: 50px;
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid var(--border-color);
border-image: linear-gradient(to right, var(--border-color), #00000000 80%) 1;
} }
.option-group > div:last-child, .option-group > #keybind-dialog { .option-group > div:last-child, .option-group > #keybind-dialog {
@@ -152,6 +125,7 @@ html, body {
.optionLabel, #version { .optionLabel, #version {
font-size: 14px; font-size: 14px;
height: 15px;
} }
div[data-type="keybind-change"] .optionLabel { div[data-type="keybind-change"] .optionLabel {
@@ -172,6 +146,7 @@ input[type='number'] {
min-width: 33px; min-width: 33px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
border-color: var(--white);
} }
.unbound, .key { .unbound, .key {
@@ -186,7 +161,7 @@ input[type='number'] {
} }
.keybind-buttons:hover { .keybind-buttons:hover {
background-color: #00000080; background-color: #00000030;
} }
.keybind-buttons > div, .keybind-buttons > span { .keybind-buttons > div, .keybind-buttons > span {
@@ -206,6 +181,8 @@ input[type='number'] {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: var(--dialog-background);
border-color: var(--dialog-border);
} }
#change-keybind-buttons { #change-keybind-buttons {
@@ -291,6 +268,7 @@ input[type='number'] {
.categoryTableElement td { .categoryTableElement td {
padding-top: 10px; padding-top: 10px;
border-top: 1px solid var(--border-color);
} }
.medium-description { .medium-description {
@@ -319,6 +297,8 @@ input[type='number'] {
.option-button.disabled { .option-button.disabled {
cursor: default; cursor: default;
background-color: var(--disabled);
color: grey;
} }
#options { #options {
@@ -326,7 +306,7 @@ input[type='number'] {
flex-basis: 80%; flex-basis: 80%;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
padding: 80px 15px 0 3%; padding: 80px 15% 0 3%;
box-sizing: border-box; box-sizing: border-box;
transition: padding 0.3s; transition: padding 0.3s;
@@ -378,6 +358,7 @@ input[type='number'] {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--slider);
} }
.animated * { .animated * {
@@ -452,9 +433,13 @@ input:checked + .slider:before {
} }
#createdBy { #createdBy {
font-size: 14px;
text-align: center; text-align: center;
margin-top: auto; margin: auto 0 10px 0;
height: 50px;
}
#createdBy > * {
font-size: 14px;
} }
#title { #title {
@@ -463,7 +448,7 @@ input:checked + .slider:before {
font-size: 40px; font-size: 40px;
padding: 20px; padding: 40px 20px;
text-decoration: none; text-decoration: none;
} }
@@ -600,20 +585,28 @@ svg {
/* Handle smaller screensizes */ /* Handle smaller screensizes */
@media only screen and (max-width: 1600px){
#options {
padding-right: 8%;
}
}
@media only screen and (max-height: 770px), only screen and (max-width: 1200px) { @media only screen and (max-height: 770px), only screen and (max-width: 1200px) {
#options-container { #options-container {
flex-direction: column; flex-direction: column;
} }
#navigation { #menubar {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 8px; gap: 8px;
min-width: unset; min-width: unset;
max-width: unset; max-width: unset;
padding: 8px; padding: 8px;
} }
#navigation {
gap: 8px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#options { #options {
padding: 0 50px; padding: 0 50px;
} }
@@ -625,24 +618,34 @@ svg {
font-size: 16px; font-size: 16px;
padding: 0 10px; padding: 0 10px;
margin: 0; margin: 0;
flex-grow: 1;
} }
#title { #title {
width: 100%; width: 100%;
font-size: 30px; font-size: 30px;
padding: 10px;
} }
#title .profilepic { #title .profilepic {
height: 40px; height: 40px;
} }
#createdBy { #createdBy {
margin: unset; margin: 10px 0 0 0;
height: unset;
width: 100%; width: 100%;
} }
#createdBy > div {
display: inline-block;
}
#sbDonate {
position: absolute;
right: 30px;
margin-top: 10px;
}
#version { #version {
font-size: 10px; font-size: 10px;
height: 10px;
transform: translate(-50px, -5px); transform: translate(-50px, -5px);
} }
.sticky #navigation { .sticky #menubar {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;

118
public/options/options.html
View File

@@ -16,7 +16,7 @@
<div id="options-container"> <div id="options-container">
<div id="navigation" class="center"> <div id="menubar" class="center">
<div id="title" class="titleBar"> <div id="title" class="titleBar">
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/> <img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
@@ -24,55 +24,47 @@
<div id="version"></div> <div id="version"></div>
</div> </div>
<div class="tab-heading" data-for="segments"> <div id="navigation">
__MSG_optionsTabCategories__ <div class="tab-heading" data-for="behavior">
</div> __MSG_optionsTabBehavior__
</div>
<div class="tab-heading" data-for="behavior"> <div class="tab-heading" data-for="interface">
__MSG_optionsTabBehavior__ __MSG_optionsTabInterface__
</div> </div>
<div class="tab-heading" data-for="interface"> <div class="tab-heading" data-for="keybinds">
__MSG_optionsTabInterface__ __MSG_optionsTabKeyBinds__
</div> </div>
<div class="tab-heading" data-for="keybinds"> <div class="tab-heading" data-for="import">
__MSG_optionsTabKeyBinds__ __MSG_optionsTabBackup__
</div> </div>
<div class="tab-heading" data-for="privacy"> <div class="tab-heading" data-for="advanced">
__MSG_optionsTabPrivacy__ __MSG_optionsTabAdvanced__
</div> </div>
</div>
<div class="tab-heading" data-for="import"> <div id="createdBy" class="titleBar">
__MSG_optionsTabBackup__ <div>
</div> <img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle" alt="profile picture of creator"/>
__MSG_createdBy__
<div class="tab-heading" data-for="advanced"> <a href="https://ajay.app">Ajay Ramachandran</a>
__MSG_optionsTabAdvanced__ </div>
</div>
<p id="createdBy" class="titleBar">
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle" alt="profile picture of creator"/>
__MSG_createdBy__
<a href="https://ajay.app">Ajay Ramachandran</a>
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a> <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a>
</p> </div>
</div> </div>
<div id="options" class="hidden"> <div id="options">
<div id="segments" class="option-group hidden"> <div id="behavior" class="option-group hidden">
<div id="category-type" data-type="react-CategoryChooserComponent"> <div id="category-type" data-type="react-CategoryChooserComponent">
</div> </div>
</div>
<div id="behavior" class="option-group hidden">
<div data-type="toggle" data-sync="autoSkipOnMusicVideos"> <div data-type="toggle" data-sync="autoSkipOnMusicVideos">
<div class="switch-container"> <div class="switch-container">
<label class="switch"> <label class="switch">
@@ -318,36 +310,6 @@
</div> </div>
<div id="privacy" class="option-group hidden">
<div data-type="toggle" data-sync="trackViewCount">
<div class="switch-container">
<label class="switch">
<input id="trackViewCount" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="trackViewCount">
__MSG_enableViewTracking__
</label>
</div>
<div class="small-description">__MSG_whatViewTracking__</div>
</div>
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
<div class="switch-container">
<label class="switch">
<input id="trackViewCountInPrivate" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="trackViewCountInPrivate">
__MSG_enableViewTrackingInPrivate__
</label>
</div>
</div>
</div>
<div id="import" class="option-group hidden"> <div id="import" class="option-group hidden">
<div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning"> <div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning">
@@ -439,6 +401,32 @@
</div> </div>
</div> </div>
</div> </div>
<div data-type="toggle" data-sync="trackViewCount">
<div class="switch-container">
<label class="switch">
<input id="trackViewCount" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="trackViewCount">
__MSG_enableViewTracking__
</label>
</div>
<div class="small-description">__MSG_whatViewTracking__</div>
</div>
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
<div class="switch-container">
<label class="switch">
<input id="trackViewCountInPrivate" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="trackViewCountInPrivate">
__MSG_enableViewTrackingInPrivate__
</label>
</div>
</div>
<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation"> <div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
<div class="option-button trigger-button"> <div class="option-button trigger-button">

4
src/components/KeybindComponent.tsx
View File

@@ -53,9 +53,9 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
} }
openEditDialog(): void { openEditDialog(): void {
dialog = document.createElement("div"); dialog = parent.document.createElement("div");
dialog.id = "keybind-dialog"; dialog.id = "keybind-dialog";
document.body.prepend(dialog); parent.document.body.prepend(dialog);
ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog); ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
} }

2
src/components/KeybindDialogComponent.tsx
View File

@@ -76,10 +76,12 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
} }
componentDidMount(): void { componentDidMount(): void {
parent.document.addEventListener("keydown", this.keybindKeyPressed);
document.addEventListener("keydown", this.keybindKeyPressed); document.addEventListener("keydown", this.keybindKeyPressed);
} }
componentWillUnmount(): void { componentWillUnmount(): void {
parent.document.removeEventListener("keydown", this.keybindKeyPressed);
document.removeEventListener("keydown", this.keybindKeyPressed); document.removeEventListener("keydown", this.keybindKeyPressed);
} }

2
src/components/SponsorTimeEditComponent.tsx
View File

@@ -371,7 +371,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst") if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst")
.replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) { .replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) {
// Open options page // Open options page
chrome.runtime.sendMessage({message: "openConfig", hash: "segments"}); chrome.runtime.sendMessage({message: "openConfig", hash: "behavior"});
} }
return; return;

7
src/help.ts
View File

@@ -9,6 +9,13 @@ window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); utils.localizeHtmlPage();
//switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
!(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
navigator.userAgent.includes("Windows NT 6") ||
navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14")))
document.documentElement.setAttribute("data-theme", "light");
await utils.wait(() => Config.config !== null); await utils.wait(() => Config.config !== null);
if (!showDonationLink()) { if (!showDonationLink()) {

45
src/options.ts
View File

@@ -13,19 +13,41 @@ import CategoryChooser from "./render/CategoryChooser";
import KeybindComponent from "./components/KeybindComponent"; import KeybindComponent from "./components/KeybindComponent";
import { showDonationLink } from "./utils/configUtils"; import { showDonationLink } from "./utils/configUtils";
const utils = new Utils(); const utils = new Utils();
let embed = false;
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); utils.localizeHtmlPage();
//switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
!(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
navigator.userAgent.includes("Windows NT 6") ||
navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14")))
document.documentElement.setAttribute("data-theme", "light");
// selected tab
if (location.hash != "") {
const substr = location.hash.substring(1);
let menuItem = document.querySelector(`[data-for='${substr}']`);
if (menuItem == null)
menuItem = document.querySelector(`[data-for='behavior']`);
menuItem.classList.add("selected");
} else {
document.querySelector(`[data-for='behavior']`).classList.add("selected");
}
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
// Remove header if needed // Remove header if needed
if (window.location.hash === "#embed") { if (window.location.hash === "#embed") {
embed = true;
for (const element of document.getElementsByClassName("titleBar")) { for (const element of document.getElementsByClassName("titleBar")) {
element.classList.add("hidden"); element.classList.add("hidden");
} }
document.getElementById("options").classList.add("embed"); document.getElementById("options").classList.add("embed");
createStickyHeader();
} }
if (!Config.configListeners.includes(optionsConfigUpdateListener)) { if (!Config.configListeners.includes(optionsConfigUpdateListener)) {
@@ -35,7 +57,7 @@ async function init() {
await utils.wait(() => Config.config !== null); await utils.wait(() => Config.config !== null);
if (!showDonationLink()) { if (!showDonationLink()) {
document.getElementById("sbDonate").style.display = "none"; document.getElementById("sbDonate").classList.add("hidden");
} }
// Set all of the toggle options to the correct option // Set all of the toggle options to the correct option
@@ -102,9 +124,9 @@ async function init() {
break; break;
case "showDonationLink": case "showDonationLink":
if (checkbox.checked) if (checkbox.checked)
document.getElementById("sbDonate").style.display = "none"; document.getElementById("sbDonate").classList.add("hidden");
else else
document.getElementById("sbDonate").style.display = "unset"; document.getElementById("sbDonate").classList.remove("hidden");
break; break;
} }
@@ -249,16 +271,6 @@ async function init() {
} }
// Tab interaction // Tab interaction
if (location.hash != "") {
const substr = location.hash.substring(1);
let menuItem = document.querySelector(`[data-for='${substr}']`);
if (menuItem == null)
menuItem = document.querySelector(`[data-for='segments']`);
menuItem.classList.add("selected");
} else {
document.querySelector(`[data-for='segments']`).classList.add("selected");
}
const tabElements = document.getElementsByClassName("tab-heading"); const tabElements = document.getElementsByClassName("tab-heading");
for (let i = 0; i < tabElements.length; i++) { for (let i = 0; i < tabElements.length; i++) {
const tabFor = tabElements[i].getAttribute("data-for"); const tabFor = tabElements[i].getAttribute("data-for");
@@ -279,11 +291,8 @@ async function init() {
}); });
} }
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
window.onscroll = () => createStickyHeader(); window.onscroll = () => createStickyHeader();
optionsContainer.classList.remove("hidden");
optionsContainer.classList.add("animated"); optionsContainer.classList.add("animated");
} }
@@ -291,7 +300,7 @@ function createStickyHeader() {
const container = document.getElementById("options-container"); const container = document.getElementById("options-container");
const options = document.getElementById("options"); const options = document.getElementById("options");
if (window.pageYOffset > 115) { if (window.pageYOffset > 90 && (window.innerHeight <= 770 || window.innerWidth <= 1200) || embed) {
if (!container.classList.contains("sticky")) { if (!container.classList.contains("sticky")) {
options.style.marginTop = options.offsetTop.toString()+"px"; options.style.marginTop = options.offsetTop.toString()+"px";
container.classList.add("sticky"); container.classList.add("sticky");