external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 09:07:45 +01:00
Code Issues Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_locales/en/messages.json
View file

@ -335,5 +335,11 @@
},
"createdBy": {
"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;
}
.smallDescription {
color: white;
font-size: 13;
}
#options {
max-width: 60%;
text-align: left;
@ -39,6 +44,9 @@ body {
right: 0;
bottom: 0;
background-color: #707070;
}
.animated * {
-webkit-transition: .4s;
transition: .4s;
}
@ -51,6 +59,9 @@ body {
left: 4px;
bottom: 4px;
background-color: white;
}
.animated .slider:before {
-webkit-transition: .4s;
transition: .4s;
}

105
options/options.html
View file

@ -10,7 +10,7 @@
<body class="sponsorBlockPageBody">
<div id="title">
<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepiccircle"/>
<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
SponsorBlock
</div>
@ -20,13 +20,102 @@
<h1>__MSG_Options__</h1>
<div id="options">
<label class="switch-container" label-name="__MSG_hideButtons__" toggle-sync-option="hideVideoPlayerControls">
<label class="switch">
<input id="buttons" type="checkbox">
<span class="slider round"></span>
</label>
</label>
<div id="options" style="display: none">
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="disableAutoSkip">
<label class="switch-container" label-name="__MSG_autoSkip__">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</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>
</center>

35
options/options.js
View file

@ -1,5 +1,38 @@
window.addEventListener('DOMContentLoaded', init);
function init() {
async function init() {
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");
}