noham/BetterYGG
1
0
Fork 0
mirror of https://github.com/NohamR/BetterYGG.git synced 2026-01-10 00:08:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI and functionality for options and scripts

Browse Source
This commit is contained in:
√(noham)²
2025-12-23 22:56:12 +01:00
parent 98c7f2fcd5
commit 917e536468
9 changed files with 183 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@
.vscode .vscode
Capture Capture
.eslintrc.json .eslintrc.json
docs/.DS_Store

14
README.md
View File

@@ -4,15 +4,21 @@ Chrome extension for the website yggtorrent.org
## Installation ## Installation
1. Clonez le dépôt : `git clone https://github.com/NohamR/BetterYGG` 1. Clonez le dépôt : `git clone https://github.com/NohamR/BetterYGG`
2. Ouvrez Chrome et allez à `chrome://extensions/` 2. Ouvrez Chrome et allez à `chrome://extensions/`
3. Activez le mode développeur 3. Activez le mode développeur
4. Cliquez sur "Charger l'extension non empaquetée" 4. Cliquez sur "Charger l'extension non empaquetée"
5. Sélectionnez le dossier du dépôt cloné 5. Sélectionnez le dossier du dépôt cloné
![docs/images/dev-mode.png](docs/images/dev-mode.png)
## Configuration importante
**N'oubliez pas d'entrer votre token YGG dans les options de l'extension !** Rendez-vous dans les options et ajoutez votre token disponible sur [votre compte YGG](https://www.yggtorrent.org/user/account).
![docs/images/options.png](docs/images/options.png)
![docs/images/token.png](docs/images/token.png)
Cette extension conçue pour le site yggtorrent.org permet de télécharger des torrents sans être authentifié. Pour cela rendez vous dans les options de l'extension et introduisez votre token Ygg. Ce token est disponible dans l'onglet mon compte du site. Cette extension conçue pour le site yggtorrent.org permet de télécharger des torrents sans être authentifié. Pour cela rendez vous dans les options de l'extension et introduisez votre token Ygg. Ce token est disponible dans l'onglet mon compte du site.
Note: Cette extension utilise désormais yggapi.eu pour le téléchargement des torrents (API non officielle). Note: Cette extension utilise désormais yggapi.eu pour le téléchargement des torrents (API non officielle).

5
contentScripts/addTorrent/accessAddTorrent.js
View File

@@ -1,3 +1,4 @@
var downloadButton = document.querySelector('a.butt'); var downloadButton = document.querySelector('a.butt');
downloadButton.onclick = function () {}; if (downloadButton) {
downloadButton.removeAttribute('onclick'); downloadButton.onclick = function() { window.location.href = this.href; };
}

1
contentScripts/addTorrent/addTorrent.js
View File

@@ -15,6 +15,7 @@ downloadLine.insertAdjacentElement('afterend', torrentInfo);
/* Add third party download button */ /* Add third party download button */
var downloadButton = downloadLine.querySelector('a.butt'); var downloadButton = downloadLine.querySelector('a.butt');
downloadButton.removeAttribute('id'); // remove "download-timer-btn"
var flexButton = document.createElement('a'); var flexButton = document.createElement('a');
flexButton.appendChild(document.createTextNode('Télécharger via discord ')); flexButton.appendChild(document.createTextNode('Télécharger via discord '));
var span = document.createElement('span'); var span = document.createElement('span');

8
contentScripts/allPages/accessAllPages.js
View File

@@ -1,9 +1,13 @@
hideSidebar(); hideSidebar();
$(window).on('resize', function () { window.addEventListener('resize', function () {
hideSidebar(); hideSidebar();
}); });
function hideSidebar() { function hideSidebar() {
$(window).width() < 1750 ? $('#cat, .back-cat').removeClass('active') : $('#cat, .back-cat').addClass('active'); if (window.innerWidth < 1750) {
document.querySelectorAll('#cat, .back-cat').forEach(el => el.classList.remove('active'));
} else {
document.querySelectorAll('#cat, .back-cat').forEach(el => el.classList.add('active'));
}
} }

BIN
docs/images/dev-mode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 KiB

BIN
docs/images/options.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
docs/images/token.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

238
options/options.html
View File

@@ -1,101 +1,187 @@
<html> <!DOCTYPE html>
<html lang="fr">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexgg Options</title> <title>Flexgg Options</title>
<style> <style>
.center { body {
display: block; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto; background-color: #f4f4f4;
margin-right: auto; color: #333;
margin: 0;
padding: 20px;
line-height: 1.6;
} }
#discordIntegrationSection { .container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header img {
max-width: 150px;
height: auto;
}
.form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: bold;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="checkbox"],
.form-group select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.form-group small a {
color: #007bff;
text-decoration: none;
}
.form-group small a:hover {
text-decoration: underline;
}
.section {
border-top: 1px solid #eee;
padding-top: 20px;
margin-top: 30px;
}
.section h3 {
margin-top: 0;
color: #007bff;
}
.hidden {
display: none; display: none;
} }
#displayAddCategoriesSection { .button-group {
display: none; display: flex;
gap: 10px;
margin-bottom: 20px;
} }
#addCategoriesSection { button {
display: none; padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
} }
ul { button:hover {
list-style-type: none; background-color: #0056b3;
} }
li { table {
margin: 0 0 5px 0; width: 100%;
}
li.section {
margin: 15px 0 5px 0;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f8f9fa;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f8f9fa;
} }
</style> </style>
</head> </head>
<body cz-shortcut-listen="true"> <body>
<img class="center" src="../img/ygg.png" id="yggImage"><br/> <div class="container">
<ul> <header class="header">
<li> <img src="../img/ygg.png" alt="YGG Logo" id="yggImage">
<span>Ygg token: </span> <h1>Options BetterYGG</h1>
<input id="yggToken" type="text" size="35"/> </header>
</li>
<li> <form id="optionsForm">
<span>Colonne de tri des recherches et cat&eacute;gories: </span> <div class="form-group">
<select id="searchSort"> <label for="yggToken">Ygg Token:</label>
<option value="name">Nom</option> <input id="yggToken" type="text" size="35">
<option value="comment">Nbr commentaire</option> <small><a href="https://www.yggtorrent.org/user/account" target="_blank">Obtenir votre token ici</a></small>
<option value="publish_date">Date</option> </div>
<option value="size">Taille</option>
<option value="completed">Nbr complet</option> <div class="form-group">
<option value="seed">Seed</option> <label for="searchSort">Colonne de tri des recherches et catégories:</label>
<option value="leech">Leech</option> <select id="searchSort">
</select> <option value="name">Nom</option>
</li> <option value="comment">Nbr commentaire</option>
<li> <option value="publish_date">Date</option>
<span>Ordre du tri des recherches et cat&eacute;gories:</span> <option value="size">Taille</option>
<select id="searchOrder"> <option value="completed">Nbr complet</option>
<option value="asc">Ascendant</option> <option value="seed">Seed</option>
<option value="desc">Descendant</option> <option value="leech">Leech</option>
</select> </select>
</li> </div>
<li class="section">
<span>Afficher le formulaire discord: </span> <div class="form-group">
<input id="displayDiscord" type="checkbox"/> <label for="searchOrder">Ordre du tri des recherches et catégories:</label>
</li> <select id="searchOrder">
<div id="discordIntegrationSection"> <option value="asc">Ascendant</option>
<li> <option value="desc">Descendant</option>
<span>Discord Webhook url: </span> </select>
<input id="discordWebhookUrl" type="text" size="150"/> </div>
</li>
<li> <div class="form-group">
<span>Discord Username: </span> <label for="displayDiscord">
<input id="discordUserName" type="text"/> <input id="displayDiscord" type="checkbox">
</li> Afficher le formulaire Discord
</div> </label>
<li id="displayAddCategoriesSection" class="section"> </div>
<span>Modifier les cat&eacute;gories: </span>
<input id="displayAddCategories" type="checkbox"/> <div id="discordIntegrationSection" class="section hidden">
</li> <h3>Intégration Discord</h3>
<div id="addCategoriesSection"> <div class="form-group">
<li> <label for="discordWebhookUrl">Discord Webhook URL:</label>
<button id="saveCategories">Sauvegarder</button> <input id="discordWebhookUrl" type="text" size="150">
<button id="restoreCategories">Restaurer valeurs par d&eacute;faut</button> </div>
</li> <div class="form-group">
<li> <label for="discordUserName">Discord Username:</label>
<input id="discordUserName" type="text">
</div>
</div>
<div class="form-group">
<label for="displayAddCategories">
<input id="displayAddCategories" type="checkbox">
Modifier les catégories
</label>
</div>
<div id="addCategoriesSection" class="section hidden">
<h3>Gestion des Catégories</h3>
<div class="button-group">
<button type="button" id="saveCategories">Sauvegarder</button>
<button type="button" id="restoreCategories">Restaurer valeurs par défaut</button>
</div>
<table id="categoriesTable"> <table id="categoriesTable">
<thead> <thead>
<tr> <tr>
<th>Nom de cat&eacute;gorie</th> <th>Nom de catégorie</th>
<th>Saisonnier</th> <th>Saisonnier</th>
<th>Url sur YGG</th> <th>URL sur YGG</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</li> </div>
</div> </form>
</ul> </div>
<script src="options.js"></script> <script src="options.js"></script>
</body> </body>