Scanlator filter

Animeboynz · Nov 11, 2024 · dc4bfee · dc4bfee
1 parent d67a348
commit dc4bfee
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 3 deletions.
diff --git a/site/index.html b/site/index.html
@@ -181,7 +181,10 @@ <h2>Load your .tachibk, .proto.gz or extracted .json file</h2>
           </div>
           <ul id="manga-genres"></ul>
         </div>
-        <span class="material-symbols-outlined" id="chapters-sort-button">swap_vert</span>
+        <div id="chapter-buttons">
+          <span class="material-symbols-outlined" id="chapters-sort-button">swap_vert</span>
+          <span class="material-symbols-outlined" id="chapters-filter-button">filter_list</span>
+        </div>
         <div id="manga-chapters"></div>
       </div>
     </div>

diff --git a/site/script.js b/site/script.js
@@ -2,7 +2,11 @@ import consts from './scripts/constants.js';
 import { dlJSON, encodeToProtobuf } from './scripts/export.js';
 import { handleFileLoad, loadDemoData } from './scripts/loadBackup.js';
 import { closeModal, showModal } from './scripts/modals.js';
-import { initializeLibrary, toggleExpandDescription } from './scripts/library.js';
+import {
+  initializeLibrary,
+  toggleChapterFilter,
+  toggleExpandDescription,
+} from './scripts/library.js';
 import { applySettings, loadSettings, saveSetting } from './scripts/settings.js';
 
 var searchCooldown;
@@ -28,6 +32,10 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }); // Sort chapters
+  consts.chapterFilterButton.addEventListener('click', event => {
+    event.target.classList.toggle('active');
+    toggleChapterFilter();
+  });
   consts.loadBackup.addEventListener('click', e => {
     closeModal('settings-modal');
     window.data = null;

diff --git a/site/scripts/constants.js b/site/scripts/constants.js
@@ -56,6 +56,7 @@ export default {
   modalDescriptionDiv: document.querySelector('#manga-description-div'),
   expandDescriptionArrow: document.querySelector('.fade-out'),
   sortButton: document.querySelector('#chapters-sort-button'),
+  chapterFilterButton: document.querySelector('#chapters-filter-button'),
   chapterList: document.querySelector('#manga-chapters'),
   // Main Screen
   tabsContainer: document.querySelector('#tabs'),

diff --git a/site/scripts/library.js b/site/scripts/library.js
@@ -335,6 +335,7 @@ function showMangaDetails(manga, categories, source) {
   const repoMatch = repoData?.find(entry => entry.id == manga.source);
   const newWindowIcon = addMaterialSymbol(null, 'open_in_new');
   newWindowIcon.classList.add('link-icon');
+  consts.mangaModal.dataset.index = window.data.backupManga.indexOf(manga);
   consts.modalTitle.forEach(element => {
     element.textContent = manga.customTitle || manga.title;
     element.parentNode.removeAttribute('href');
@@ -528,6 +529,9 @@ function showMangaDetails(manga, categories, source) {
     consts.sortButton.hidden = false;
   } else consts.sortButton.hidden = true;
 
+  consts.chapterFilterButton.hidden = !Array.isArray(manga.excludedScanlators);
+  toggleChapterFilter();
+
   showModal('manga-modal');
   consts.expandDescriptionArrow.hidden =
     consts.modalDescriptionDiv.offsetHeight <
@@ -792,3 +796,13 @@ function getRepoIndex() {
   });
   return sources;
 }
+
+export function toggleChapterFilter() {
+  const manga = window.data.backupManga[consts.mangaModal.dataset.index];
+  const scanlators = manga.excludedScanlators || [];
+  document.querySelectorAll('.scanlator').forEach(element => {
+    element.closest('.chapter-box').hidden = consts.chapterFilterButton.classList.contains('active')
+      ? scanlators.includes(element.textContent)
+      : false;
+  });
+}
diff --git a/site/styles/manga-details.css b/site/styles/manga-details.css
@@ -63,13 +63,23 @@
   flex-flow: column-reverse;
 }
 
+#chapter-buttons {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+#chapters-filter-button,
 #chapters-sort-button {
   cursor: pointer;
   display: block;
-  margin: 0;
+  margin: 0 0 0 0.5em;
   text-align: right;
 }
 
+#chapters-filter-button.active {
+  color: var(--color-filter-active);
+}
+
 #manga-title-link,
 #manga-source > a,
 #manga-chapters a {