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

Added keybind option.

Browse Source
This commit is contained in:
Ajay Ramachandran
2019-12-30 16:41:33 -05:00
parent b3361a473c
commit cb2fb6925b
4 changed files with 105 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
_locales/en/messages.json
View File

@@ -341,5 +341,8 @@
},
"showSkipNotice": {
"message": "Show Notice After A Sponsor Is Skipped"
},
"keybindCurrentlySet": {
"message": ". It is currently set to:"
}
}

15
options/options.css
View File

@@ -7,15 +7,28 @@ body {
text-align: center;
}
.bold {
font-weight: bold;
}
.hidden {
display: none;
}
.keybind-status {
display: inline;
}
.small-description {
color: white;
font-size: 13;
}
.medium-description {
color: white;
font-size: 15;
}
.option-text-box {
width: 300px;
}
@@ -161,6 +174,8 @@ body {
text-align: center;
padding-top: 0px;
padding-bottom: 0px;
display: inline-block;
}
#title {

26
options/options.html
View File

@@ -21,6 +21,7 @@
<div id="options" class="hidden">
<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
<label class="switch-container" label-name="__MSG_autoSkip__">
<label class="switch">
@@ -38,6 +39,27 @@
<br/>
<br/>
<div option-type="keybind-change" sync-option="startSponsorKeybind">
<div class="option-button trigger-button">
__MSG_setStartSponsorShortcut__
</div>
<div class="option-hidden-section hidden">
<br/>
<div class="medium-description keybind-status">
__MSG_keybindDescription__
</div>
<span class="medium-description bold keybind-status-key">
</span>
</div>
</div>
<br/>
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
<label class="switch-container" label-name="__MSG_showButtons__">
<label class="switch">
@@ -107,7 +129,7 @@
<br/>
<div option-type="text-change" sync-option="userID">
<div class="option-button text-change-trigger">
<div class="option-button trigger-button">
__MSG_changeUserID__
</div>
@@ -115,7 +137,7 @@
<div class="small-description">__MSG_whatChangeUserID__</div>
<div class="option-hidden-hidden hidden">
<div class="option-hidden-section hidden">
<br/>
<input class="option-text-box" type="text">

66
options/options.js
View File

@@ -37,9 +37,14 @@ async function init() {
checksLeft++;
break;
case "text-change":
let button = optionsElements[i].querySelector(".text-change-trigger");
let button = optionsElements[i].querySelector(".trigger-button");
button.addEventListener("click", () => activateTextChange(optionsElements[i]));
break;
case "keybind-change":
let keybindButton = optionsElements[i].querySelector(".trigger-button");
keybindButton.addEventListener("click", () => activateKeybindChange(optionsElements[i]));
break;
}
}
@@ -50,13 +55,68 @@ async function init() {
optionsContainer.classList.add("animated");
}
/**
* Will trigger the container to ask the user for a keybind.
*
* @param {HTMLElement} element
*/
function activateKeybindChange(element) {
let button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return;
button.classList.add("disabled");
let option = element.getAttribute("sync-option");
chrome.storage.sync.get([option], function(result) {
let currentlySet = result[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
let status = element.querySelector(".option-hidden-section > .keybind-status");
status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
if (result[option] !== null) {
let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
statusKey.innerText = result[option];
}
element.querySelector(".option-hidden-section").classList.remove("hidden");
document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
});
}
/**
* Called when a key is pressed in an activiated keybind change option.
*
* @param {HTMLElement} element
* @param {KeyboardEvent} e
*/
function keybindKeyPressed(element, e) {
e = e || window.event;
var key = e.key;
let option = element.getAttribute("sync-option");
chrome.storage.sync.set({[option]: key});
let status = element.querySelector(".option-hidden-section > .keybind-status");
status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
statusKey.innerText = key;
let button = element.querySelector(".trigger-button");
button.classList.remove("disabled");
}
/**
* Will trigger the textbox to appear to be able to change an option's text.
*
* @param {HTMLElement} element
*/
function activateTextChange(element) {
let button = element.querySelector(".text-change-trigger");
let button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return;
button.classList.add("disabled");
@@ -70,7 +130,7 @@ function activateTextChange(element) {
let setButton = element.querySelector(".text-change-set");
setButton.addEventListener("click", () => setOptionValue(option, textBox.value));
element.querySelector(".option-hidden-hidden").classList.remove("hidden");
element.querySelector(".option-hidden-section").classList.remove("hidden");
});
}