mirror of
https://github.com/NohamR/BetterYGG.git
synced 2026-01-10 08:18:19 +00:00
[1.0] First commit
This commit is contained in:
vermillion-dev
83
options/options.html
Normal file
83
options/options.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Flexgg Options</title>
|
||||
<style>
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#discordIntegrationSection {
|
||||
display: none;
|
||||
}
|
||||
#displayAddCategoriesSection {
|
||||
display: none;
|
||||
}
|
||||
#addCategoriesSection {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
li.section {
|
||||
margin: 15px 0 5px 0;
|
||||
}
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body cz-shortcut-listen="true">
|
||||
<img class="center" src="../img/ygg.png" id="yggImage"><br/>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Ygg token: </span>
|
||||
<input id="yggToken" type="text" size="35"/>
|
||||
</li>
|
||||
<li class="section">
|
||||
<span>Afficher le formulaire discord: </span>
|
||||
<input id="displayDiscord" type="checkbox"/>
|
||||
</li>
|
||||
<div id="discordIntegrationSection">
|
||||
<li>
|
||||
<span>Discord Webhook url: </span>
|
||||
<input id="discordWebhookUrl" type="text" size="150"/>
|
||||
</li>
|
||||
<li>
|
||||
<span>Discord Username: </span>
|
||||
<input id="discordUserName" type="text"/>
|
||||
</li>
|
||||
</div>
|
||||
<li id="displayAddCategoriesSection" class="section">
|
||||
<span>Modifier les catégories: </span>
|
||||
<input id="displayAddCategories" type="checkbox"/>
|
||||
</li>
|
||||
<div id="addCategoriesSection">
|
||||
<li>
|
||||
<button id="saveCategories">Sauvegarder</button>
|
||||
<button id="restoreCategories">Restaurer valeurs par défaut</button>
|
||||
</li>
|
||||
<li>
|
||||
<table id="categoriesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom de catégorie</th>
|
||||
<th>Saisonnier</th>
|
||||
<th>Url sur YGG</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
199
options/options.js
Normal file
199
options/options.js
Normal file
@@ -0,0 +1,199 @@
|
||||
var yggToken = document.getElementById('yggToken');
|
||||
var discordWebhookUrl = document.getElementById('discordWebhookUrl');
|
||||
var discordUserName = document.getElementById('discordUserName');
|
||||
var displayDiscord = document.getElementById('displayDiscord');
|
||||
var displayAddCategories = document.getElementById('displayAddCategories');
|
||||
|
||||
var discordIntegration = document.getElementById('discordIntegrationSection');
|
||||
var displayAddCategoriesSection = document.getElementById('displayAddCategoriesSection');
|
||||
var addCategories = document.getElementById('addCategoriesSection');
|
||||
|
||||
var categoriesTable = document.getElementById('categoriesTable').children[1];
|
||||
var buttonSaveCategories = document.getElementById('saveCategories');
|
||||
var buttonRestoreCategories = document.getElementById('restoreCategories');
|
||||
var defaultCategories = [];
|
||||
var categories = [];
|
||||
|
||||
chrome.storage.sync.get(['yggToken', 'discordWebhookUrl', 'discordUserName', 'displayDiscord', 'displayAddCategories', 'categories', 'defaultCategories'], function(value){
|
||||
if(value.yggToken)
|
||||
yggToken.value = value.yggToken;
|
||||
if(value.discordWebhookUrl)
|
||||
discordWebhookUrl.value = value.discordWebhookUrl;
|
||||
if(value.discordUserName)
|
||||
discordUserName.value = value.discordUserName;
|
||||
if(value.displayDiscord){
|
||||
displayDiscord.checked = value.displayDiscord;
|
||||
if (displayDiscord.checked){
|
||||
discordIntegration.style.display = "block";
|
||||
displayAddCategoriesSection.style.display = "block";
|
||||
if (displayAddCategories.checked){
|
||||
addCategories.style.display = "block";
|
||||
}
|
||||
}
|
||||
else {
|
||||
discordIntegration.style.display = "none";
|
||||
displayAddCategoriesSection.style.display = "none";
|
||||
addCategories.style.display = "none";
|
||||
}
|
||||
if(value.displayAddCategories){
|
||||
displayAddCategories.checked = value.displayAddCategories;
|
||||
if (displayAddCategories.checked){
|
||||
addCategories.style.display = "block";
|
||||
}
|
||||
else {
|
||||
addCategories.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
if(value.categories){
|
||||
categories = value.categories;
|
||||
makeCategoriesTable(categories);
|
||||
}
|
||||
if(value.defaultCategories){
|
||||
defaultCategories = value.defaultCategories;
|
||||
buttonSaveCategories.addEventListener('click', saveCategories)
|
||||
buttonRestoreCategories.addEventListener('click', restoreDefaultCategories)
|
||||
}
|
||||
});
|
||||
|
||||
function addToStorage(name, value) {
|
||||
chrome.storage.sync.set({ [name]: value });
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
yggToken.addEventListener('input', function(){
|
||||
addToStorage('yggToken', this.value);
|
||||
});
|
||||
discordWebhookUrl.addEventListener('input', function(){
|
||||
addToStorage('discordWebhookUrl', this.value);
|
||||
});
|
||||
discordUserName.addEventListener('input', function(){
|
||||
addToStorage('discordUserName', this.value);
|
||||
});
|
||||
displayDiscord.addEventListener('input', function(){
|
||||
addToStorage('displayDiscord', this.checked);
|
||||
if (this.checked){
|
||||
discordIntegration.style.display = "block";
|
||||
displayAddCategoriesSection.style.display = "block";
|
||||
if (displayAddCategories.checked){
|
||||
addCategories.style.display = "block";
|
||||
}
|
||||
}
|
||||
else {
|
||||
discordIntegration.style.display = "none";
|
||||
displayAddCategoriesSection.style.display = "none";
|
||||
addCategories.style.display = "none";
|
||||
}
|
||||
});
|
||||
displayAddCategories.addEventListener('input', function(){
|
||||
addToStorage('displayAddCategories', this.checked);
|
||||
if (this.checked)
|
||||
addCategories.style.display = "block";
|
||||
else {
|
||||
addCategories.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/***********************/
|
||||
/* Element constructor */
|
||||
/***********************/
|
||||
|
||||
function makeCategoriesArray() {
|
||||
lines = Array.from(categoriesTable.children)
|
||||
var categoriesArray = []
|
||||
for(var i in lines){
|
||||
var line = lines[i];
|
||||
name = line.getElementsByTagName('input').namedItem('name').value;
|
||||
season = line.getElementsByTagName('input').namedItem('season').checked;
|
||||
urls = line.getElementsByTagName('textarea').namedItem('urls').value;
|
||||
urlsArray = urls.split('\n').filter(x => x != '')
|
||||
if(name != ''){
|
||||
categoriesArray.push({
|
||||
name: name,
|
||||
season: season,
|
||||
urls: urlsArray
|
||||
})
|
||||
}
|
||||
}
|
||||
return categoriesArray;
|
||||
}
|
||||
|
||||
function makeCategoriesTable(categories) {
|
||||
var tbody = document.createElement('tbody');
|
||||
for (var i in categories){
|
||||
var line = categories[i];
|
||||
var tr = getTr(line.name, line.season, line.urls, "Supprimer", deleteLine);
|
||||
tbody.appendChild(tr)
|
||||
}
|
||||
var tr = getTr('', false, [], "Ajouter", addLine);
|
||||
tbody.appendChild(tr)
|
||||
categoriesTable.parentNode.replaceChild(tbody, categoriesTable)
|
||||
categoriesTable = tbody;
|
||||
}
|
||||
|
||||
function getTr(name, season, urls, buttonText, buttonOnClick){
|
||||
var tr = document.createElement('tr');
|
||||
|
||||
var tdName = document.createElement('td');
|
||||
var inputName = document.createElement('input');
|
||||
inputName.type = "text";
|
||||
inputName.name = "name";
|
||||
inputName.value = name;
|
||||
tdName.appendChild(inputName);
|
||||
tr.appendChild(tdName);
|
||||
|
||||
var tdSeason = document.createElement('td');
|
||||
var inputSeason = document.createElement('input');
|
||||
inputSeason.type = "checkbox";
|
||||
inputSeason.name = "season";
|
||||
inputSeason.checked = season;
|
||||
tdSeason.appendChild(inputSeason);
|
||||
tr.appendChild(tdSeason);
|
||||
|
||||
var tdUrls = document.createElement('td');
|
||||
var textareaUrls = document.createElement('textarea');
|
||||
textareaUrls.name = "urls";
|
||||
textareaUrls.rows="5";
|
||||
textareaUrls.cols="75";
|
||||
textareaUrls.value = urls.join('\n');
|
||||
tdUrls.appendChild(textareaUrls);
|
||||
tr.appendChild(tdUrls);
|
||||
|
||||
var tdTrash = document.createElement('td');
|
||||
var button = document.createElement('button');
|
||||
button.innerText = buttonText
|
||||
button.addEventListener("click", buttonOnClick);
|
||||
tdTrash.appendChild(button);
|
||||
tr.appendChild(tdTrash);
|
||||
|
||||
return tr;
|
||||
}
|
||||
|
||||
/*******************/
|
||||
/* Events Handlers */
|
||||
/*******************/
|
||||
|
||||
function addLine(){
|
||||
this.innerText = "Supprimer"
|
||||
this.removeEventListener("click", addLine);
|
||||
this.addEventListener("click", deleteLine);
|
||||
var tr = getTr('', false, [], "Ajouter", addLine);
|
||||
categoriesTable.appendChild(tr)
|
||||
}
|
||||
|
||||
function deleteLine(){
|
||||
this.parentElement.parentElement.remove()
|
||||
}
|
||||
|
||||
function saveCategories(){
|
||||
categories = makeCategoriesArray();
|
||||
addToStorage('categories', categories);
|
||||
makeCategoriesTable(categories);
|
||||
}
|
||||
|
||||
function restoreDefaultCategories(){
|
||||
categories = defaultCategories
|
||||
addToStorage('categories', categories);
|
||||
makeCategoriesTable(categories);
|
||||
}
|
||||
Reference in New Issue
Block a user