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

Added text set option (userID)

Browse Source
This commit is contained in:
Ajay Ramachandran
2019-12-30 01:20:20 -05:00
parent 91f4d7f669
commit fcb6ed7676
3 changed files with 103 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
options/options.css
View File

@@ -3,11 +3,42 @@ body {
font-family: Sans-Serif;
}
.smallDescription {
.hidden {
display: none;
}
.small-description {
color: white;
font-size: 13;
}
.option-text-box {
width: 300px;
}
.option-button {
cursor: pointer;
background-color: #c00000;
padding: 10px;
color: white;
border-radius: 5px;
font-size: 14px;
width: fit-content;
}
.option-button:hover {
background-color: #fc0303;
}
.option-button.disabled {
cursor: default;
background-color: #520000;
color: grey;
}
#options {
max-width: 60%;
text-align: left;

48
options/options.html
View File

@@ -22,7 +22,7 @@
<div id="options" style="display: none">
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="disableAutoSkip">
<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
<label class="switch-container" label-name="__MSG_autoSkip__">
<label class="switch">
<input type="checkbox">
@@ -33,13 +33,13 @@
<br/>
<br/>
<div class="smallDescription">__MSG_autoSkipDescription__</div>
<div class="small-description">__MSG_autoSkipDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="hideVideoPlayerControls">
<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
<label class="switch-container" label-name="__MSG_showButtons__">
<label class="switch">
<input type="checkbox">
@@ -50,13 +50,13 @@
<br/>
<br/>
<div class="smallDescription">__MSG_hideButtonsDescription__</div>
<div class="small-description">__MSG_hideButtonsDescription__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="hideInfoButtonPlayerControls">
<div option-type="toggle" toggle-type="reverse" sync-option="hideInfoButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showInfoButton__">
<label class="switch">
<input type="checkbox">
@@ -67,13 +67,13 @@
<br/>
<br/>
<div class="smallDescription">__MSG_whatInfoButton__</div>
<div class="small-description">__MSG_whatInfoButton__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="hideDeleteButtonPlayerControls">
<div option-type="toggle" toggle-type="reverse" sync-option="hideDeleteButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showDeleteButton__">
<label class="switch">
<input type="checkbox">
@@ -84,13 +84,13 @@
<br/>
<br/>
<div class="smallDescription">__MSG_whatDeleteButton__</div>
<div class="small-description">__MSG_whatDeleteButton__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-sync-option="trackViewCount">
<div option-type="toggle" sync-option="trackViewCount">
<label class="switch-container" label-name="__MSG_enableViewTracking__">
<label class="switch">
<input type="checkbox" checked>
@@ -101,13 +101,39 @@
<br/>
<br/>
<div class="smallDescription">__MSG_whatViewTracking__</div>
<div class="small-description">__MSG_whatViewTracking__</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" toggle-sync-option="dontShowNotice">
<div option-type="text-change" sync-option="userID">
<div class="option-button text-change-trigger">
__MSG_changeUserID__
</div>
<br/>
<div class="small-description">__MSG_whatChangeUserID__</div>
<div class="option-hidden-hidden hidden">
<br/>
<input class="option-text-box" type="text">
<br/>
<br/>
<div class="option-button text-change-set">
__MSG_setUserID__
</div>
</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
<label class="switch-container" label-name="__MSG_showSkipNotice__">
<label class="switch">
<input type="checkbox">

38
options/options.js
View File

@@ -13,7 +13,7 @@ async function init() {
for (let i = 0; i < optionsElements.length; i++) {
switch (optionsElements[i].getAttribute("option-type")) {
case "toggle":
let option = optionsElements[i].getAttribute("toggle-sync-option");
let option = optionsElements[i].getAttribute("sync-option");
chrome.storage.sync.get([option], function(result) {
let optionResult = result[option];
if (optionResult != undefined) {
@@ -27,7 +27,7 @@ async function init() {
}
checkbox.addEventListener("click", () =>{
optionToggled(option, reverse ? !checkbox.checked : checkbox.checked)
setOptionValue(option, reverse ? !checkbox.checked : checkbox.checked)
});
}
@@ -35,6 +35,11 @@ async function init() {
});
checksLeft++;
break;
case "text-change":
let button = optionsElements[i].querySelector(".text-change-trigger");
button.addEventListener("click", () => activateTextChange(optionsElements[i]));
break;
}
}
@@ -46,10 +51,35 @@ async function init() {
}
/**
* Called when an option has been toggled.
* Will trigger the textbox to appear to be able to change an option's text.
*
* @param {HTMLElement} element
*/
function optionToggled(option, value) {
function activateTextChange(element) {
let button = element.querySelector(".text-change-trigger");
if (button.classList.contains("disabled")) return;
button.classList.add("disabled");
let textBox = element.querySelector(".option-text-box");
let option = element.getAttribute("sync-option");
chrome.storage.sync.get([option], function(result) {
textBox.value = result[option];
let setButton = element.querySelector(".text-change-set");
setButton.addEventListener("click", () => setOptionValue(option, textBox.value));
element.querySelector(".option-hidden-hidden").classList.remove("hidden");
});
}
/**
* Called when an option has been changed.
*
* @param {string} option
* @param {*} value
*/
function setOptionValue(option, value) {
chrome.storage.sync.set({[option]: value});
}