Hitomi.la Language Filter komplett überarbeitet
This commit is contained in:
Akamaru
@@ -1,8 +1,8 @@
|
||||
// ==UserScript==
|
||||
// @name Hitomi.la Language Filter
|
||||
// @namespace https://git.ponywave.de/Akamaru/Userscripts
|
||||
// @version 1.1
|
||||
// @description Filter manga by language on hitomi.la
|
||||
// @version 2.0
|
||||
// @description Filter manga by language on hitomi.la with improved integration
|
||||
// @author Akamaru
|
||||
// @match https://hitomi.la/*
|
||||
// @icon https://www.google.com/s2/favicons?domain=hitomi.la&sz=32
|
||||
@@ -17,7 +17,7 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Available languages
|
||||
// Available languages (matching hitomi.la's language options)
|
||||
const languages = {
|
||||
'all': 'All Languages',
|
||||
'english': 'English',
|
||||
@@ -34,39 +34,85 @@
|
||||
'vietnamese': 'Vietnamese',
|
||||
'polish': 'Polish',
|
||||
'indonesian': 'Indonesian',
|
||||
'turkish': 'Turkish'
|
||||
'turkish': 'Turkish',
|
||||
'dutch': 'Dutch',
|
||||
'norwegian': 'Norwegian',
|
||||
'finnish': 'Finnish',
|
||||
'swedish': 'Swedish',
|
||||
'tagalog': 'Tagalog',
|
||||
'arabic': 'Arabic',
|
||||
'hebrew': 'Hebrew'
|
||||
};
|
||||
|
||||
// Get saved language preference (default: english)
|
||||
let selectedLanguage = GM_getValue('selectedLanguage', 'english');
|
||||
// Get saved language preference (default: all)
|
||||
let selectedLanguage = GM_getValue('selectedLanguage', 'all');
|
||||
|
||||
// Create language selector UI
|
||||
// Create language selector UI integrated into the page
|
||||
function createLanguageSelector() {
|
||||
const container = document.createElement('div');
|
||||
container.id = 'language-filter-container';
|
||||
container.style.cssText = `
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 10000;
|
||||
background: #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
// Find the list-title section where "Order by" dropdown is located
|
||||
const listTitle = document.querySelector('.list-title');
|
||||
if (!listTitle) {
|
||||
console.warn('Hitomi Language Filter: .list-title not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Make list-title use flexbox for horizontal layout
|
||||
listTitle.style.cssText = `
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 15px !important;
|
||||
flex-wrap: nowrap !important;
|
||||
`;
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.textContent = 'Language: ';
|
||||
label.style.fontWeight = 'bold';
|
||||
// Fix h3 margin to prevent layout issues
|
||||
const h3 = listTitle.querySelector('h3');
|
||||
if (h3) {
|
||||
h3.style.marginBottom = '0';
|
||||
}
|
||||
|
||||
// Create a wrapper for the dropdowns to keep them together on the right
|
||||
let dropdownWrapper = document.querySelector('.header-sort-wrapper');
|
||||
if (!dropdownWrapper) {
|
||||
dropdownWrapper = document.createElement('div');
|
||||
dropdownWrapper.className = 'header-sort-wrapper';
|
||||
dropdownWrapper.style.cssText = `
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
`;
|
||||
}
|
||||
|
||||
// Fix position and float of existing header-sort-select to work with flexbox
|
||||
const existingSort = document.querySelector('.header-sort-select');
|
||||
if (existingSort) {
|
||||
existingSort.style.cssText = `
|
||||
position: relative !important;
|
||||
float: none !important;
|
||||
top: auto !important;
|
||||
right: auto !important;
|
||||
`;
|
||||
// Move existing sort into wrapper if not already there
|
||||
if (existingSort.parentElement !== dropdownWrapper) {
|
||||
dropdownWrapper.appendChild(existingSort);
|
||||
}
|
||||
}
|
||||
|
||||
// Create container for the filter
|
||||
const filterContainer = document.createElement('div');
|
||||
filterContainer.id = 'language-filter-container';
|
||||
filterContainer.className = 'header-sort-select';
|
||||
filterContainer.style.cssText = `
|
||||
position: relative !important;
|
||||
float: none !important;
|
||||
top: auto !important;
|
||||
right: auto !important;
|
||||
`;
|
||||
|
||||
// Create select element (no label)
|
||||
const select = document.createElement('select');
|
||||
select.style.cssText = `
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
`;
|
||||
select.id = 'language-filter-dropdown';
|
||||
|
||||
// Add options
|
||||
for (const [code, name] of Object.entries(languages)) {
|
||||
@@ -84,17 +130,28 @@
|
||||
selectedLanguage = this.value;
|
||||
GM_setValue('selectedLanguage', selectedLanguage);
|
||||
filterGalleries();
|
||||
updateVisibleCount();
|
||||
});
|
||||
|
||||
container.appendChild(label);
|
||||
container.appendChild(select);
|
||||
document.body.appendChild(container);
|
||||
filterContainer.appendChild(select);
|
||||
|
||||
// Add filter to the dropdown wrapper
|
||||
dropdownWrapper.appendChild(filterContainer);
|
||||
|
||||
// Add wrapper to list-title if not already there
|
||||
if (!dropdownWrapper.parentElement) {
|
||||
listTitle.appendChild(dropdownWrapper);
|
||||
}
|
||||
}
|
||||
|
||||
// Get all gallery elements (including all types)
|
||||
function getAllGalleries() {
|
||||
return document.querySelectorAll('.gallery, .dj, .manga, .acg, .imageset');
|
||||
}
|
||||
|
||||
// Filter galleries based on selected language
|
||||
function filterGalleries() {
|
||||
// Find all gallery items (both classes used on the site)
|
||||
const galleries = document.querySelectorAll('.gallery, .dj, .manga');
|
||||
const galleries = getAllGalleries();
|
||||
|
||||
galleries.forEach(gallery => {
|
||||
if (selectedLanguage === 'all') {
|
||||
@@ -105,6 +162,7 @@
|
||||
// Check for language link in format /index-LANGUAGE.html
|
||||
const languageTag = gallery.querySelector('a[href*="/index-"][href$=".html"]');
|
||||
if (!languageTag) {
|
||||
// Hide if no language tag found
|
||||
gallery.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
@@ -114,42 +172,91 @@
|
||||
|
||||
if (langMatch && langMatch[1]) {
|
||||
const galleryLang = langMatch[1].toLowerCase();
|
||||
if (galleryLang === selectedLanguage) {
|
||||
gallery.style.display = '';
|
||||
} else {
|
||||
gallery.style.display = 'none';
|
||||
}
|
||||
gallery.style.display = (galleryLang === selectedLanguage) ? '' : 'none';
|
||||
} else {
|
||||
gallery.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Register menu command for quick access
|
||||
GM_registerMenuCommand('Change Language Filter', function() {
|
||||
const newLang = prompt('Enter language code:\n' +
|
||||
Object.entries(languages).map(([code, name]) => `${code} - ${name}`).join('\n'));
|
||||
if (newLang && languages[newLang]) {
|
||||
selectedLanguage = newLang;
|
||||
GM_setValue('selectedLanguage', selectedLanguage);
|
||||
location.reload();
|
||||
// Update visible gallery count (optional visual feedback)
|
||||
function updateVisibleCount() {
|
||||
const galleries = getAllGalleries();
|
||||
const visible = Array.from(galleries).filter(g => g.style.display !== 'none').length;
|
||||
const total = galleries.length;
|
||||
|
||||
// Update or create count display
|
||||
let countDisplay = document.getElementById('language-filter-count');
|
||||
if (!countDisplay) {
|
||||
countDisplay = document.createElement('span');
|
||||
countDisplay.id = 'language-filter-count';
|
||||
countDisplay.style.cssText = 'margin-left: 10px; color: #666; font-size: 0.9em;';
|
||||
const filterContainer = document.getElementById('language-filter-container');
|
||||
if (filterContainer) {
|
||||
filterContainer.appendChild(countDisplay);
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedLanguage === 'all') {
|
||||
countDisplay.textContent = '';
|
||||
} else {
|
||||
countDisplay.textContent = `(${visible}/${total})`;
|
||||
}
|
||||
}
|
||||
|
||||
// Register menu command for quick access
|
||||
GM_registerMenuCommand('Reset Language Filter', function() {
|
||||
selectedLanguage = 'all';
|
||||
GM_setValue('selectedLanguage', selectedLanguage);
|
||||
const select = document.getElementById('language-filter-dropdown');
|
||||
if (select) {
|
||||
select.value = 'all';
|
||||
}
|
||||
filterGalleries();
|
||||
updateVisibleCount();
|
||||
});
|
||||
|
||||
// Initialize
|
||||
function init() {
|
||||
createLanguageSelector();
|
||||
filterGalleries();
|
||||
|
||||
// Watch for dynamic content loading
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
// Wait a bit for the page to fully load
|
||||
setTimeout(() => {
|
||||
createLanguageSelector();
|
||||
filterGalleries();
|
||||
});
|
||||
updateVisibleCount();
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
// Watch for dynamic content loading (e.g., infinite scroll)
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
// Only filter if gallery content changes
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.addedNodes.length > 0) {
|
||||
const hasGalleryNodes = Array.from(mutation.addedNodes).some(node => {
|
||||
if (node.nodeType === 1) { // Element node
|
||||
return node.classList.contains('dj') ||
|
||||
node.classList.contains('manga') ||
|
||||
node.classList.contains('acg') ||
|
||||
node.classList.contains('imageset') ||
|
||||
node.classList.contains('gallery');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (hasGalleryNodes) {
|
||||
filterGalleries();
|
||||
updateVisibleCount();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const galleryContent = document.querySelector('.gallery-content');
|
||||
if (galleryContent) {
|
||||
observer.observe(galleryContent, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Wait for page to load
|
||||
|
||||
Reference in New Issue
Block a user