userscript for hitomi.la
// ==UserScript== // @name Hitomi Enhanced // @author asdf // @license Apache-2.0 // @description userscript for hitomi.la // @description:en userscript for Hitomi.la // @match https://hitomi.la/* // @exclude https://hitomi.la/doujinshi/* // @exclude https://hitomi.la/manga/* // @exclude https://hitomi.la/artistcg/* // @exclude https://hitomi.la/gamecg/* // @exclude https://hitomi.la/imageset/* // @exclude https://hitomi.la/cg/* // @exclude https://hitomi.la/reader/* // @grant GM_addStyle // @grant GM_getResourceText // @grant GM_xmlhttpRequest // @require https://code.jquery.com/jquery-3.7.1.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js // @version 0.0.1.20250522021016 // @namespace https://greasyfork.org/users/1284632 // ==/UserScript== (async function() { 'use strict'; let defaultQuery = localStorage.getItem('hitomiDefaultQuery') || ''; const validClasses = ['dj', 'cg', 'acg', 'manga', 'anime', 'imageset']; let default_url = defaultQuery ? `https://hitomi.la/search.html?${encodeURI(defaultQuery)}` : 'https://hitomi.la/'; if (defaultQuery && window.location.href === 'https://hitomi.la/') { window.location.href = default_url; return; } // Initialize IndexedDB function initIndexedDB() { return new Promise((resolve, reject) => { const request = indexedDB.open('HitomiEnhancedDB', 1); request.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore('jsonCache'); }; request.onsuccess = (event) => { resolve(event.target.result); }; request.onerror = (event) => { reject(new Error('IndexedDB initialization failed: ' + event.target.error)); }; }); } // Store JSON data in IndexedDB function storeJsonInIndexedDB(db, jsonData) { return new Promise((resolve, reject) => { const transaction = db.transaction(['jsonCache'], 'readwrite'); const store = transaction.objectStore('jsonCache'); const request = store.put(jsonData, 'test_final_result'); request.onsuccess = () => resolve(console.log("cached Json")); request.onerror = () => reject(new Error('Failed to store JSON in IndexedDB: ' + request.error)); }); } // Retrieve JSON data from IndexedDB function getJsonFromIndexedDB(db) { return new Promise((resolve, reject) => { const transaction = db.transaction(['jsonCache'], 'readonly'); const store = transaction.objectStore('jsonCache'); const request = store.get('test_final_result'); request.onsuccess = () => resolve(request.result || null); request.onerror = () => reject(new Error('Failed to retrieve JSON from IndexedDB: ' + request.error)); }); } // Fetch JSON data and cache it if not in IndexedDB async function getCachedJson() { try { const db = await initIndexedDB(); let jsonData = await getJsonFromIndexedDB(db); if (!jsonData) { jsonData = await new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'GET', url: 'https://raw.githubusercontent.com/tttt369/hitomi_enhanced/master/urls/result.json', onload: (response) => { try { // レスポンスをJSONとしてパース const data = JSON.parse(response.responseText); resolve(data); } catch (e) { reject(new Error('Failed to parse JSON: ' + e.message)); } }, onerror: () => { reject(new Error('Failed to fetch JSON')); } }); }); await storeJsonInIndexedDB(db, jsonData); } // jsonDataが文字列の場合、パースを試みる if (typeof jsonData === 'string') { try { jsonData = JSON.parse(jsonData); } catch (e) { console.error('Failed to parse stored JSON:', e); return {}; } } // jsonDataが配列でない場合のエラーハンドリング if (!Array.isArray(jsonData)) { console.error('jsonData is not an array:', jsonData); return {}; } const jsonDataMap = {}; jsonData.forEach((item, index) => { jsonDataMap[index] = item; }); return jsonDataMap; } catch (error) { console.error(error); return {}; } } // Load JSON data const jsonDataMap = await getCachedJson(); const html = ` <!DOCTYPE html> <html data-bs-theme="dark" lang="ja"> <head></head> <body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a href="/"> <img class="navbar-brand" src="//ltn.gold-usergeneratedcontent.net/logo.png" alt="Logo"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse w-100" id="navbarNav"> <ul class="navbar-nav me-auto"> <li class="nav-item"><a class="nav-link" href="/alltags-a.html">tags</a></li> <li class="nav-item"><a class="nav-link" href="/allartists-a.html">artists</a></li> <li class="nav-item"><a class="nav-link" href="/allseries-a.html">series</a></li> <li class="nav-item"><a class="nav-link" href="/allcharacters-a.html">characters</a></li> </ul> <div class="SearchContainer"> <form class="d-flex position-relative" role="search"> <input id="query-input" class="form-control me-2" type="search" placeholder="Search" aria-label="Search" autocomplete="off"> <button class="btn btn-outline-success" type="submit">Search</button> </form> <div class="default-query-container"> <div class="default-query-badges"></div> <input id="default-query-input" class="form-control default-query-input" type="text" placeholder="Add to default query"> <button id="save-default-btn" class="btn btn-outline-success">Save</button> </div> </div> </div> </div> </nav> <div class="sticky-navbar"> <button id="tag-picker-btn" class="btn tag-picker-btn"> </button> <div class="btn-group" role="group"> <button id="add-tag-btn" class="btn btn-success" disabled> <i class="bi bi-plus-circle-fill"></i> </button> <button id="exclude-tag-btn" class="btn btn-danger" disabled> <i class="bi bi-dash-circle-fill"></i> </button> </div> </div> <div class="container"> <div class="card-container bg-secondary-subtle"> <div class="row g-4 p-3 mt-5 five-columns"> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="//ltn.hitomi.la/searchlib.js"></script> <script src="//ltn.hitomi.la/search.js"></script> </body> </html> `; const head = ` <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <title>Hitomi Enhanced</title> <style> .card { display: flex; flex-direction: column; width: 230px; margin: auto; } .card-title { font-weight: bold; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-all; } .card-img-top { object-fit: cover; } .card-body { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5px; } .ImageContainer { overflow: hidden; } .ImageContainer img { object-fit: cover; width: 100%; height: 250px; } .tags-container { scrollbar-width: none; -ms-overflow-style: none; display: flex; overflow-x: auto; white-space: nowrap; background-color: #00000038; margin: 3%; width: 100%; } .tags-container a { margin-right: 5%; text-decoration: none; } .page-container { text-align: center; padding-bottom: 3%; } .page-container li { display: inline-block; padding: 0 2px; } .page-container a { text-decoration: none; padding: 4px; color: #444455; } .page-container a:hover { text-decoration: none; color: #fff; background-color: #282e3b; } .popup { position: relative; } .popuptext { visibility: hidden; width: 250px; background-color: #555; color: #fff; border-radius: 6px; position: absolute; z-index: 10; top: -40px; left: 50%; transform: translateX(-50%); } .popuptext.show { visibility: visible; } h6.badge { margin-top: auto; margin-bottom: 0px; align-self: flex-start; } .dropdown-menu { margin-top: 10%; padding: 0px; width: 100%; } .header-sort-select { display: flex; justify-content: end; } strong { color: cyan; } .TableContainer { display: flex; flex-direction: column; align-items: center; overflow-x: auto; } .TableContainer table { table-layout: fixed; width: 100%; } .TableContainer td a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .colon { width: 7%; text-align: center; } .type { width: 37%; } .col { display: flex; width: 40%; padding-left: 3px; padding-right: 3px; } .default-query-container { margin-top: 10px; display: flex; } .default-query-badges { display: flex; overflow: auto; margin-bottom: 5px; gap: 5px; scrollbar-width: none; -ms-overflow-style: none; } .default-query-input { width: 150px; } .save-default-btn { margin-top: 5px; } .sticky-navbar { display: flex; position: sticky; top: 0; z-index: 1000; background-color: #343a40; } .tag-picker-btn { margin-right: auto; } .highlighted-tag { border: 2px solid yellow !important; } .sticky-navbar button { font-size: 14px; } .numstar-container { display: flex; width: 100%; justify-content: space-between; gap: 10px; align-items: center; margin-top: auto; } .star { display: flex; margin: 0; gap: 3px; color: #ffc107; font-size: x-small; align-items: flex-end; } .star i { font-size: 14px; } .navbar-collapse { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .navbar-nav.me-auto { flex-grow: 1; margin-right: 10px; } .SearchContainer { flex-shrink: 1; min-width: 0; } .sticky-navbar--static { display: flex; position: static; top: 0; background-color: #343a40; } .sticky-navbar--static button { font-size: 14px; } @media (max-width: 991px) { .navbar-nav.me-auto { margin-right: 0; flex-basis: 100%; margin-bottom: 10px; } .SearchContainer { flex-basis: 100%; max-width: 100%; } .default-query-container { flex-direction: column; align-items: stretch; } .default-query-input { width: 100%; } } @media (max-width: 480px) { .ImageContainer img { height: 170px; } .card { font-size: 70%; } } @media (min-width: 481px) and (max-width: 992px) { .ImageContainer img { height: 220px; } } @media (min-width: 768px) { .col { width: 30%; } } @media (min-width: 992px) and (max-width: 1199px) { .col { width: 25%; } } @media (min-width: 992px) { .SearchContainer { max-width: 490px; } } </style> `; const obj_data = { div_NextPage: null, div_header_sort_select: null }; let jsonData = []; let currentBatchIndex = 0; const batchSize = 25; async function observeGalleryContents(targetDoc, isInitialPage = false) { return new Promise((resolve) => { const observer = new MutationObserver(() => { const div_gallerycontents = targetDoc.querySelectorAll('div.gallery-content div'); const div_page_containers = $('div.page-container'); const div_header_sort_select = $('div.header-sort-select'); if (div_page_containers.length > 0) obj_data.div_NextPage = div_page_containers; if (div_header_sort_select.length > 0) obj_data.div_header_sort_select = div_header_sort_select; if (div_gallerycontents.length > 2) { observer.disconnect(); const filteredContents = Array.from(div_gallerycontents).filter(element => Array.from(element.classList).some(cls => validClasses.includes(cls)) ).map(element => isInitialPage ? $(element).get()[0] : element.cloneNode(true)); resolve(filteredContents); } }); observer.observe(targetDoc.body, { childList: true, subtree: true }); }); } async function generateCard(contentUrl, title, imgPicture, Tags, seriesList, language, type, ArtistList, stars = 0, jsonDataMap) { const div_col = $('<div class="col"></div>'); $('.row').append(div_col); const div_card = $('<div class="card h-100"></div>'); div_col.append(div_card); const ImageContainer = $('<div class="ImageContainer"></div>'); div_card.append(ImageContainer); const a_ImgUrl = $('<a></a>').attr('href', contentUrl); ImageContainer.append(a_ImgUrl); const img_top = $(imgPicture).addClass('card-img-top'); a_ImgUrl.append(img_top); const div_card_body = $('<div class="card-body"></div>'); div_card.append(div_card_body); const TableContainer = $('<div class="TableContainer"></div>'); div_card_body.append(TableContainer); const a_card_title = $('<a class="card-title"></a>').attr('href', contentUrl).text(title); TableContainer.append(a_card_title); const table = $('<table><tbody></tbody></table>'); TableContainer.append(table); const tbody = table.find('tbody'); const appendListRow = (type, listOrItem, urlPrefix, container, defaultText = 'N/A') => { const isList = Array.isArray(listOrItem) || listOrItem instanceof NodeList; const list = isList ? Array.from(listOrItem) : [listOrItem]; const text = list.length && list[0].textContent ? list[0].textContent : defaultText; const raw_url = list.length && list[0].href ? list[0].href : "#"; const aTag = $(`<a>${text}</a>`); tbody.append(`<tr><td class="type">${type}</td><td class="colon">:</td><td></td></tr>`); tbody.find('tr:last td:last').append(aTag); if (list.length && list[0].textContent) { aTag.attr('href', defaultQuery === '' ? raw_url : `${default_url + urlPrefix}${encode_search_query_for_url(text)}`); } if (isList && list.length > 1) { const popup = $(`<div class="popup"><i class="bi bi-info-square"></i><span class="popuptext">${list.slice(1).map(s => `${type}: ${s.textContent}`).join('<br>')}</span></div>`); container.append(popup); } }; appendListRow('language', language, ' language:', div_card_body); appendListRow('type', type, ' type:', div_card_body, 'Unknown'); appendListRow('artist', ArtistList, ' artist:', div_card_body); appendListRow('series', seriesList, ' series:', div_card_body); const div_numstar_container = $('<div class="numstar-container"></div>'); div_card_body.append(div_numstar_container); const h6_pagenum = $('<h6 class="badge bg-secondary">Loading...</h6>'); div_numstar_container.append(h6_pagenum); const re_num = contentUrl.match(/.*-(\d+)\.html/); let galleryId if (re_num && re_num[1]) { galleryId = re_num[1]; const item = Object.values(jsonDataMap).find(item => item.id === galleryId); if (item) { h6_pagenum.text(`${item.pages}p`); } else { $.getScript(`https://ltn.gold-usergeneratedcontent.net/galleries/${galleryId}.js`, function() { if (typeof galleryinfo !== 'undefined' && galleryinfo.files) { h6_pagenum.text(`${galleryinfo.files.length}p`); } }).fail(() => { console.error('Failed to load gallery script:', galleryId); h6_pagenum.text('N/A'); }); } } else { h6_pagenum.text('N/A'); } const h6_star = $('<h6 class="star"></h6>'); const json_items = Object.values(jsonDataMap).find(item => item.id === galleryId); if (json_items) { const a_StarHref = $("<a></a>") a_StarHref.attr("href", json_items.dmm_url); const finalStars = json_items.stars const filledStars = Math.floor(finalStars / 10); const NumStars = json_items.num_stars const hasHalfStar = finalStars % 10 >= 5 ? 1 : 0; if (finalStars > 0) { for (let i = 0; i < filledStars; i++) { const i_fillstar = $('<i class="bi bi-star-fill"></i>'); h6_star.append(i_fillstar); } if (hasHalfStar) { const i_halfstar = $('<i class="bi bi-star-half"></i>'); h6_star.append(i_halfstar); } h6_star.append(NumStars); a_StarHref.append(h6_star) } div_numstar_container.append(a_StarHref) } const div_tags_container = $('<div class="tags-container"></div>'); div_card_body.append(div_tags_container); if (Tags.length === 0) { div_tags_container.append('<span class="badge bg-primary"></span>'); } else { Tags.forEach(tag => { const clone = tag.cloneNode(true); if (clone.textContent === '...') return; if (clone.href) { const TagUrl = clone.href.match(/\/tag\/(.*)-all.html/); if (TagUrl && TagUrl[1]) { clone.className = 'badge bg-primary'; clone.href = defaultQuery === '' ? clone.href : default_url + " " + encode_search_query_for_url(decodeURIComponent(TagUrl[1])); div_tags_container.append(clone); } } }); } } function setupTagScrollEvents() { const divDefaultQueryBadges = document.getElementsByClassName('default-query-badges'); for (const Badge of divDefaultQueryBadges) { Badge.addEventListener('wheel', (event) => { event.preventDefault(); Badge.scrollLeft += event.deltaY; }); } const divTagsContainers = document.getElementsByClassName('tags-container'); for (const container of divTagsContainers) { container.addEventListener('wheel', (event) => { event.preventDefault(); container.scrollLeft += event.deltaY; }); } } function setupPopupEvents() { document.body.addEventListener('click', (e) => { const popup = e.target.closest('.popup'); if (popup) { e.preventDefault(); const popuptext = popup.querySelector('.popuptext'); if (popuptext) popuptext.classList.toggle('show'); } }); } async function initializePage(jsonDataMap) { let initialContents = await observeGalleryContents(document, true); document.documentElement.innerHTML = html; document.head.insertAdjacentHTML('beforeend', head); document.querySelector('html').setAttribute('data-bs-theme', 'dark'); const html_container = document.querySelector('.container'); const html_row = document.querySelector('.row'); if (obj_data.div_NextPage) html_container.appendChild(obj_data.div_NextPage[1]); const newSelect = document.createElement('select'); newSelect.id = 'custom_sort'; const option1 = document.createElement('option'); option1.text = '-'; option1.value = 'value1'; newSelect.appendChild(option1); const option2 = document.createElement('option'); option2.text = 'star sort'; option2.value = 'value2'; newSelect.appendChild(option2); obj_data.div_header_sort_select[0].appendChild(newSelect); if (obj_data.div_header_sort_select) html_row.appendChild(obj_data.div_header_sort_select[0]); initialContents.forEach(item => { const h1Element = item.querySelector('h1.lillie a'); generateCard( h1Element ? h1Element.href : '#', h1Element ? h1Element.textContent : 'Unknown', item.querySelector('div[class$="-img1"] picture'), item.querySelectorAll('td.relatedtags ul li a'), item.querySelectorAll('td.series-list ul li a'), item.querySelector('table.dj-desc tbody tr:nth-child(3) td a') || { textContent: 'Unknown', href: '#' }, item.querySelector('table.dj-desc tbody tr:nth-child(2) td a') || { textContent: 'Unknown', href: '#' }, item.querySelectorAll('div.artist-list ul li a') || { textContent: 'Unknown', href: '#' }, 0, jsonDataMap ); }); setupPopupEvents(); setupTagScrollEvents(); setupTagPicker(); } function loadNextPageInIframe(url, jsonDataMap) { const iframe = document.createElement('iframe'); iframe.style.cssText = 'position: fixed; top: 0; left: 0; width: 1px; height: 1px; border: 0; visibility: hidden;'; iframe.sandbox = 'allow-same-origin allow-scripts'; iframe.src = url; iframe.onload = async () => { try { const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; const nextContents = await observeGalleryContents(iframeDoc); nextContents.forEach(item => { const h1Element = item.querySelector('h1.lillie a'); generateCard( h1Element ? h1Element.href : '#', h1Element ? h1Element.textContent : 'Unknown', item.querySelector('div[class$="-img1"] picture'), item.querySelectorAll('td.relatedtags ul li a'), item.querySelectorAll('td.series-list ul li a'), item.querySelector('table.dj-desc tbody tr:nth-child(3) td a') || { textContent: 'Unknown', href: '#' }, item.querySelector('table.dj-desc tbody tr:nth-child(2) td a') || { textContent: 'Unknown', href: '#' }, item.querySelectorAll('div.artist-list ul li a') || { textContent: 'Unknown', href: '#' }, 0, jsonDataMap ); }); console.log(`Page ${currentPage} loaded`); hasFetched = false; setupPopupEvents(); setupTagScrollEvents(); } catch (e) { console.error('Failed to load next page:', e); } finally { document.body.removeChild(iframe); } }; document.body.appendChild(iframe); } let currentPage = parseInt(window.location.hash.replace('#', '') || '1', 10); let hasFetched = false; function getNextPageUrl() { const baseUrl = window.location.href.split('#')[0]; const re_url = /\.html$/; currentPage += 1; if (window.location.href.match(re_url) || baseUrl === 'https://hitomi.la/') { const urlParts = baseUrl.split('page='); return `${urlParts[0]}?page=${currentPage}`; } else { return `${baseUrl}#${currentPage}`; } } async function setupCustomSort(jsonDataMap) { const newSelect = document.getElementById('custom_sort'); newSelect.addEventListener('change', (e) => { if (e.target.value === 'value2') { currentBatchIndex = 0; jsonData = []; $('.row').empty(); jsonData = Object.values(jsonDataMap).sort((a, b) => (b.stars || 0) - (a.stars || 0)); processBatch(jsonDataMap); } }); } async function processBatch(jsonDataMap) { if (currentBatchIndex >= jsonData.length) { console.log('No more data to process'); return; } const div_gallery_content = document.createElement('div'); div_gallery_content.className = 'gallery-content'; div_gallery_content.style.cssText = 'position: fixed; top: 0; left: 0; width: 1px; height: 1px; border: 0; visibility: hidden;'; document.body.appendChild(div_gallery_content); const dataBatch = jsonData.slice(currentBatchIndex, currentBatchIndex + batchSize); currentBatchIndex += batchSize; const fetchPromises = dataBatch.map(item => { const id = item.id; const stars = item.stars || 0; const url = `https://ltn.gold-usergeneratedcontent.net/galleryblock/${id}.html`; return $.get(url).then(function(html) { html = typeof rewrite_tn_paths === 'function' ? rewrite_tn_paths(html) : html; const domElements = $.parseHTML(html); const container = document.createElement('div'); container.append(...domElements); div_gallery_content.appendChild(container); if ('loading' in HTMLImageElement.prototype && typeof flip_lazy_images === 'function') { flip_lazy_images(); } if (typeof moveimages === 'function') { moveimages(); } if (typeof localDates === 'function') { localDates(); } if (typeof limitLists === 'function') { limitLists(); } return { container, stars }; }).fail(function() { console.error(`Failed to fetch HTML from ${url}`); return null; }); }); await Promise.all(fetchPromises).then(results => { const validClasses = ['dj', 'cg', 'acg', 'manga', 'anime', 'imageset']; results.forEach(result => { if (!result) return; const { container, stars } = result; const galleryItems = Array.from(container.children).filter(element => Array.from(element.classList).some(cls => validClasses.includes(cls)) ); galleryItems.forEach(item => { const h1Element = item.querySelector('h1.lillie a'); generateCard( h1Element ? h1Element.href : '#', h1Element ? h1Element.textContent : 'Unknown', item.querySelector('div[class$="-img1"] picture'), item.querySelectorAll('td.relatedtags ul li a'), item.querySelectorAll('td.series-list ul li a'), item.querySelector('table.dj-desc tbody tr:nth-child(3) td a') || { textContent: 'Unknown', href: '#' }, item.querySelector('table.dj-desc tbody tr:nth-child(2) td a') || { textContent: 'Unknown', href: '#' }, item.querySelectorAll('div.artist-list ul li a') || { textContent: 'Unknown', href: '#' }, stars, jsonDataMap ); }); }); document.body.removeChild(div_gallery_content); setupPopupEvents(); setupTagScrollEvents(); hasFetched = false; }).catch(error => { console.error('Error processing batch:', error); hasFetched = false; }); } window.onscroll = function() { if (hasFetched) return; if ((window.scrollY + window.innerHeight) >= document.documentElement.scrollHeight * 0.9) { hasFetched = true; if (jsonData.length > 0) { processBatch(jsonDataMap); } else { loadNextPageInIframe(getNextPageUrl(), jsonDataMap); } } }; const lastUrl = []; window.addEventListener('hashchange', () => { lastUrl.push(location.hash); if (lastUrl.length >= 2 && lastUrl.at(-2) !== lastUrl.at(-1)) { location.reload(); } }); function setupDefaultQueryEditor() { const badgesContainer = document.querySelector('.default-query-badges'); const defaultQueryInput = document.getElementById('default-query-input'); const saveButton = document.getElementById('save-default-btn'); function updateBadges() { badgesContainer.innerHTML = ''; const queryParts = defaultQuery.split(' ').filter(part => part.trim()); queryParts.forEach(part => { const badge = document.createElement('span'); if (part.match(/^-/)) { badge.className = 'badge bg-danger d-flex align-items-center'; } else { badge.className = 'badge bg-success d-flex align-items-center'; } badge.innerHTML = `${part} <button type="button" class="btn-close btn-close-white ms-1" aria-label="Remove"></button>`; badgesContainer.appendChild(badge); badge.querySelector('.btn-close').addEventListener('click', () => { defaultQuery = defaultQuery.split(' ').filter(p => p !== part).join(' '); updateBadges(); updateUrl(); savequery(); }); }); } function updateUrl() { const newDefaultUrl = `https://hitomi.la/search.html?${encodeURI(defaultQuery)}`; document.querySelector('.navbar-brand').href = newDefaultUrl; default_url = newDefaultUrl; } function savequery() { localStorage.setItem('hitomiDefaultQuery', defaultQuery); console.log('Default query saved:', defaultQuery); saveButton.textContent = 'Saved!'; setTimeout(() => saveButton.textContent = 'Save', 1000); } function addquery() { defaultQuery += ` ${defaultQueryInput.value.trim()}`; defaultQueryInput.value = ''; updateBadges(); updateUrl(); savequery(); } defaultQueryInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && defaultQueryInput.value.trim()) { addquery(); } }); saveButton.addEventListener('click', () => { if (defaultQueryInput.value.trim()) { defaultQuery += ` ${defaultQueryInput.value.trim()}`; defaultQueryInput.value = ''; updateBadges(); updateUrl(); savequery(); } }); updateBadges(); } function setupSearch() { const input = document.getElementById('query-input'); const form = document.querySelector('form[role="search"]'); const stickyNavbar = document.querySelector('.sticky-navbar'); input.addEventListener("focus", function() { stickyNavbar.classList.add('sticky-navbar--static'); stickyNavbar.classList.remove('sticky-navbar'); }); input.addEventListener("blur", function() { stickyNavbar.classList.remove('sticky-navbar--static'); stickyNavbar.classList.add('sticky-navbar'); }); const hiddenSuggestions = document.createElement('ul'); hiddenSuggestions.id = 'search-suggestions'; hiddenSuggestions.style.display = 'none'; document.body.appendChild(hiddenSuggestions); const suggestionsContainer = document.createElement('div'); suggestionsContainer.className = 'dropdown-menu'; form.appendChild(suggestionsContainer); const updateSuggestionsVisibility = () => { suggestionsContainer.classList.toggle('show', suggestionsContainer.children.length > 0 && input === document.activeElement); }; let committedValue = ''; let lastInput = ''; const updateDropdown = () => { suggestionsContainer.innerHTML = ''; const suggestions = hiddenSuggestions.children; Array.from(suggestions).forEach(suggestion => { const item = document.createElement('a'); item.className = 'dropdown-item d-flex justify-content-between align-items-center text-wrap'; item.href = '#'; const textContainer = document.createElement('span'); const searchResult = suggestion.querySelector('.search-result')?.innerHTML || ''; const searchNs = suggestion.querySelector('.search-ns')?.textContent || ''; textContainer.innerHTML = `${searchResult}${searchNs}`; const total = document.createElement('span'); total.className = 'text-muted ms-2'; total.textContent = suggestion.querySelector('.search-suggestion_total')?.textContent || ''; item.appendChild(textContainer); item.appendChild(total); item.addEventListener('click', (e) => { e.preventDefault(); const searchString = suggestion.querySelector('.search-result')?.textContent || ''; const re_ns = /\((.*)\)$/; const tagMatch = searchNs.match(re_ns); const tag = tagMatch ? tagMatch[1] : ''; const input_value = encode_search_query_for_url(tag + ":" + searchString); if (searchString && tag) { const currentValue = input.value.trim(); if (lastInput && currentValue.endsWith(lastInput)) { input.value = currentValue.slice(0, -lastInput.length).trim() + (committedValue ? ' ' : '') + input_value; } else { input.value = committedValue + (committedValue ? ' ' : '') + input_value; } committedValue = input.value; lastInput = ''; } updateSuggestionsVisibility(); }); suggestionsContainer.appendChild(item); }); updateSuggestionsVisibility(); }; input.addEventListener('input', () => { const currentValue = input.value.trim(); if (!currentValue) { lastInput = ''; committedValue = ''; } else { lastInput = currentValue.slice(committedValue.length).trim(); } handle_keyup_in_search_box(); setTimeout(updateDropdown, 50); }); input.addEventListener('focus', updateSuggestionsVisibility); input.addEventListener('blur', () => setTimeout(updateSuggestionsVisibility, 100)); const handleSearchQuery = () => { const userQuery = input.value.trim(); const combinedQuery = userQuery ? `${defaultQuery} ${userQuery}` : defaultQuery; window.location.href = `https://hitomi.la/search.html?${encodeURI(combinedQuery)}`; }; input.addEventListener('keydown', e => { if (e.keyCode === 13) { e.preventDefault(); handleSearchQuery(); } }); form.addEventListener('submit', e => { e.preventDefault(); handleSearchQuery(); }); new MutationObserver(updateDropdown).observe(hiddenSuggestions, { childList: true, subtree: true }); } function setupTagPicker() { const pickerBtn = document.getElementById('tag-picker-btn'); const addBtn = document.getElementById('add-tag-btn'); const excludeBtn = document.getElementById('exclude-tag-btn'); let isPickerActive = false; let selectedTag = null; function updatePickerButton(btn, active) { btn.innerHTML = 'Select Tag'; const icon = document.createElement('i'); icon.className = 'bi bi-eyedropper'; icon.style.marginLeft = '5px'; if (!active) { btn.innerHTML = ''; } btn.appendChild(icon); } function extractTagFromHref(href) { const match = href.match(/\/tag\/(.*)-all.html/) || href.match(/search\.html\?.*? (.*)$/); return match ? encode_search_query_for_url(decodeURIComponent(match[1])) : null; } function updateDefaultQueryUI() { const badgesContainer = document.querySelector('.default-query-badges'); badgesContainer.innerHTML = ''; const queryParts = defaultQuery.split(' ').filter(part => part.trim()); queryParts.forEach(part => { const badge = document.createElement('span'); if (part.match(/^-/)) { badge.className = 'badge bg-danger d-flex align-items-center'; } else { badge.className = 'badge bg-success d-flex align-items-center'; } badge.innerHTML = `${part} <button type="button" class="btn-close btn-close-white ms-1" aria-label="Remove"></button>`; badgesContainer.appendChild(badge); badge.querySelector('.btn-close').addEventListener('click', () => { defaultQuery = defaultQuery.split(' ').filter(p => p !== part).join(' '); updateDefaultQueryUI(); default_url = `https://hitomi.la/search.html?${encodeURI(defaultQuery)}`; document.querySelector('.navbar-brand').href = default_url; localStorage.setItem('hitomiDefaultQuery', defaultQuery); }); }); default_url = `https://hitomi.la/search.html?${encodeURI(defaultQuery)}`; document.querySelector('.navbar-brand').href = default_url; } pickerBtn.addEventListener('click', () => { isPickerActive = !isPickerActive; pickerBtn.classList.toggle('btn-warning', isPickerActive); updatePickerButton(pickerBtn, isPickerActive); addBtn.disabled = !isPickerActive; excludeBtn.disabled = !isPickerActive; if (!isPickerActive && selectedTag) { selectedTag.classList.remove('highlighted-tag'); selectedTag = null; } }) document.addEventListener('click', (e) => { if (!isPickerActive) return; const tag = e.target.closest('.tags-container .badge'); if (tag) { e.preventDefault(); if (selectedTag) selectedTag.classList.remove('highlighted-tag'); tag.classList.add('highlighted-tag'); selectedTag = tag; } }); addBtn.addEventListener('click', () => { if (!selectedTag) return; const tagText = extractTagFromHref(selectedTag.href); if (tagText && !defaultQuery.includes(tagText)) { defaultQuery += defaultQuery ? ` ${tagText}` : tagText; localStorage.setItem('hitomiDefaultQuery', defaultQuery); updateDefaultQueryUI(); } selectedTag.classList.remove('highlighted-tag'); selectedTag = null; }); excludeBtn.addEventListener('click', () => { if (!selectedTag) return; const tagText = extractTagFromHref(selectedTag.href); if (tagText) { const excludeText = `-${tagText}`; if (!defaultQuery.includes(excludeText)) { defaultQuery += defaultQuery ? ` ${excludeText}` : excludeText; localStorage.setItem('hitomiDefaultQuery', defaultQuery); updateDefaultQueryUI(); } } selectedTag.classList.remove('highlighted-tag'); selectedTag = null; }); updatePickerButton(pickerBtn, isPickerActive); } await initializePage(jsonDataMap); setupSearch(); setupDefaultQueryEditor(); loadNextPageInIframe(getNextPageUrl(), jsonDataMap); setupPopupEvents(); setupCustomSort(jsonDataMap); })();
