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

Added all toggle buttons and made them set to their values.

Browse Source
This commit is contained in:
Ajay Ramachandran
2019-12-30 00:39:02 -05:00
parent b27f56bc00
commit 13727270d4
4 changed files with 148 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_locales/en/messages.json
View File

@@ -335,5 +335,11 @@
}, },
"createdBy": { "createdBy": {
"message": "Created By" "message": "Created By"
},
"autoSkip": {
"message": "Auto Skip"
},
"showSkipNotice": {
"message": "Show Notice After A Sponsor Is Skipped"
} }
} }

11
options/options.css
View File

@@ -3,6 +3,11 @@ body {
font-family: Sans-Serif; font-family: Sans-Serif;
} }
.smallDescription {
color: white;
font-size: 13;
}
#options { #options {
max-width: 60%; max-width: 60%;
text-align: left; text-align: left;
@@ -39,6 +44,9 @@ body {
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #707070; background-color: #707070;
}
.animated * {
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
@@ -51,6 +59,9 @@ body {
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
}
.animated .slider:before {
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }

103
options/options.html
View File

@@ -10,7 +10,7 @@
<body class="sponsorBlockPageBody"> <body class="sponsorBlockPageBody">
<div id="title"> <div id="title">
<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepiccircle"/> <img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
SponsorBlock SponsorBlock
</div> </div>
@@ -20,13 +20,102 @@
<h1>__MSG_Options__</h1> <h1>__MSG_Options__</h1>
<div id="options"> <div id="options" style="display: none">
<label class="switch-container" label-name="__MSG_hideButtons__" toggle-sync-option="hideVideoPlayerControls">
<label class="switch"> <div option-type="toggle" toggle-type="reverse" toggle-sync-option="disableAutoSkip">
<input id="buttons" type="checkbox"> <label class="switch-container" label-name="__MSG_autoSkip__">
<span class="slider round"></span> <label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label> </label>
</label>
<br/>
<br/>
<div class="smallDescription">__MSG_autoSkipDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="hideVideoPlayerControls">
<label class="switch-container" label-name="__MSG_showButtons__">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label>
<br/>
<br/>
<div class="smallDescription">__MSG_hideButtonsDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="hideInfoButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showInfoButton__">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label>
<br/>
<br/>
<div class="smallDescription">__MSG_whatInfoButton__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="hideDeleteButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showDeleteButton__">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label>
<br/>
<br/>
<div class="smallDescription">__MSG_whatDeleteButton__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-sync-option="trackViewCount">
<label class="switch-container" label-name="__MSG_enableViewTracking__">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</label>
<br/>
<br/>
<div class="smallDescription">__MSG_whatViewTracking__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="dontShowNotice">
<label class="switch-container" label-name="__MSG_showSkipNotice__">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label>
</div>
</div> </div>
</center> </center>

35
options/options.js
View File

@@ -1,5 +1,38 @@
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
function init() { async function init() {
localizeHtmlPage(); localizeHtmlPage();
// Set all of the toggle options to the correct option
let optionsContainer = document.getElementById("options");
let optionsElements = optionsContainer.children;
// How many checks are left to be done
let checksLeft = 0;
for (let i = 0; i < optionsElements.length; i++) {
switch (optionsElements[i].getAttribute("option-type")) {
case "toggle":
chrome.storage.sync.get([optionsElements[i].getAttribute("toggle-sync-option")], function(result) {
let optionResult = result[optionsElements[i].getAttribute("toggle-sync-option")];
if (optionResult != undefined) {
optionsElements[i].querySelector("input").checked = optionResult;
if (optionsElements[i].getAttribute("toggle-type") == "reverse") {
optionsElements[i].querySelector("input").checked = !optionResult;
}
}
checksLeft--;
});
checksLeft++;
break;
}
}
await wait(() => checksLeft == 0, 1000, 50);
optionsContainer.style.display = "inherit";
optionsContainer.classList.add("animated");
} }