Поиск GIF-изображений.
// ==UserScript==
// @name Gifs
// @namespace http://shikimori.me/
// @version 1.0
// @description Поиск GIF-изображений.
// @author pirate~
// @match *://shikimori.tld/*
// @match *://shikimori.one/*
// @match *://shikimori.me/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const debounce = (fn, wait) => {
let t;
return (...a) => {
clearTimeout(t);
t = setTimeout(() => fn(...a), wait);
};
};
const style = document.createElement('style');
style.textContent = `
.all { position: relative; display: inline-block; }
.pushme { position: relative; cursor: pointer; padding: 0 10px; }
.new_block { z-index: 99; position: absolute; top: -310px; overflow-y: auto; padding: 5px; background: white; width: 400px; height: 300px; box-shadow: 0 0 2px #b9b9b9; }
.new_block > .popular-img, .results-container { display: grid; grid-template-columns: repeat(7, 50px); justify-content: center; padding: 5px; gap: 5px; }
.new_block img { cursor: pointer; width: 50px; height: 50px; object-fit: cover; }
.new_block img:hover { opacity: 0.5; }
.search-container { display: flex; align-items: center; }
.search-container > .search-input { border: 1px solid lightgray; color: #605f5f; font-size: 13px; padding: 0.5em; height: 30px; }
.search-container > .search-button { border: 1px solid lightgray; border-left: 0; color: #605f5f; font-size: 13px; height: 30px; cursor: pointer; padding: 0 5px; align-items: center; display: flex; }
.search-container > .search-button:active, .new_block > .load_more:active { box-shadow: inset 0 0 4px lightgray; }
.new_block > .load_more { border: 1px solid lightgray; padding: 5px; float: right; text-align: center; display: none; cursor: pointer; }
.b-shiki_editor aside.buttons { overflow: inherit !important; }
`;
document.head.appendChild(style);
function setupPopularImageEvent(img) {
let lastClickTime = 0;
const clickInterval = 300;
img.addEventListener('click', function() {
const now = Date.now();
let count = Number(img.dataset.clickCount) || 0;
if (now - lastClickTime < clickInterval) {
count++;
} else {
count = 1;
}
img.dataset.clickCount = count;
lastClickTime = now;
if (count >= 3) {
img.remove();
savePopularImages();
img.dataset.clickCount = 0;
return;
}
document.querySelectorAll('.editor-area').forEach(ta => {
const pos = ta.selectionStart;
const tag = `[img no-zoom w=40]${img.src}[/img]`;
ta.value = ta.value.slice(0, pos) + tag + ta.value.slice(pos);
ta.setSelectionRange(pos + tag.length, pos + tag.length);
});
});
}
function addCustomElements() {
let target = document.querySelector('.b-shiki_editor:not(.b-shiki_editor-v2) .editor-controls');
if (!target) target = document.querySelector('.vue-node .menubar');
if (!target) return;
if (target.querySelector('.all')) return;
const allContainer = document.createElement('div');
allContainer.className = 'all';
const pushMeButton = document.createElement('div');
pushMeButton.className = 'pushme';
pushMeButton.style.cursor = 'pointer';
pushMeButton.style.padding = '0 10px';
pushMeButton.style.color = 'var(--headline-color)';
pushMeButton.textContent = '🌁';
const newBlock = document.createElement('div');
newBlock.className = 'new_block';
newBlock.style.display = 'none';
const searchContainer = document.createElement('div');
searchContainer.className = 'search-container';
const searchInput = document.createElement('input');
searchInput.className = 'search-input';
searchInput.type = 'text';
searchInput.placeholder = 'Что ищешь?';
const searchButton = document.createElement('span');
searchButton.className = 'search-button';
searchButton.textContent = 'Найти';
searchButton.addEventListener('click', () => searchTenor(searchInput.value));
searchContainer.appendChild(searchInput);
searchContainer.appendChild(searchButton);
newBlock.appendChild(searchContainer);
const resultsContainer = document.createElement('div');
resultsContainer.className = 'results-container';
newBlock.appendChild(resultsContainer);
const popularImagesContainer = document.createElement('div');
popularImagesContainer.className = 'popular-img';
newBlock.appendChild(popularImagesContainer);
const loadMoreButton = document.createElement('span');
loadMoreButton.className = 'load_more';
loadMoreButton.textContent = 'Ещё';
loadMoreButton.addEventListener('click', () => {
const term = document.querySelector('.new_block .search-input').value;
searchTenor(term, true);
});
newBlock.appendChild(loadMoreButton);
allContainer.appendChild(pushMeButton);
allContainer.appendChild(newBlock);
target.appendChild(allContainer);
pushMeButton.addEventListener('click', () => {
newBlock.style.display = getComputedStyle(newBlock).display === 'none' ? 'block' : 'none';
pushMeButton.classList.toggle('clickme');
});
}
function restorePopularImages() {
const container = document.querySelector('.popular-img');
if (!container) return;
container.innerHTML = '';
const imgs = JSON.parse(localStorage.getItem('popularImages')) || [];
imgs.forEach(src => {
const img = document.createElement('img');
img.className = 'popular-img-item';
img.src = src;
img.style.cursor = 'pointer';
img.style.width = '50px';
img.style.height = '50px';
img.style.objectFit = 'cover';
setupPopularImageEvent(img);
container.appendChild(img);
});
}
function savePopularImages() {
const imgs = Array.from(document.querySelectorAll('.popular-img img')).map(i => i.src);
localStorage.setItem('popularImages', JSON.stringify(imgs));
}
let offset = 0, limit = 28, apiKey = 'LIVDSRZULELA';
function searchTenor(term, loadMore = false) {
const results = document.querySelector('.results-container');
const popular = document.querySelector('.popular-img');
if (!results) return;
if (!loadMore) { results.innerHTML = ''; offset = 0; }
fetch(`https://api.tenor.com/v1/search?key=${apiKey}&q=${term}&limit=${limit}&pos=${offset}`)
.then(r => r.json())
.then(data => {
data.results.forEach(gif => {
const img = document.createElement('img');
img.className = 'search-result-img';
img.style.cursor = 'pointer';
img.style.width = '50px';
img.style.height = '50px';
img.style.objectFit = 'cover';
img.src = gif.media[0].gif.url;
img.alt = gif.title;
img.addEventListener('click', () => {
document.querySelectorAll('.editor-area').forEach(ta => {
const pos = ta.selectionStart;
const tag = `[img no-zoom w=40]${img.src}[/img]`;
ta.value = ta.value.slice(0, pos) + tag + ta.value.slice(pos);
ta.setSelectionRange(pos + tag.length, pos + tag.length);
});
const exists = Array.from(document.querySelectorAll('.popular-img img')).some(i => i.src === img.src);
if (!exists) {
const copy = img.cloneNode();
copy.className = 'popular-img-item';
copy.style.cursor = 'pointer';
setupPopularImageEvent(copy);
const existingImgs = document.querySelectorAll('.popular-img img');
if (existingImgs.length >= 49) existingImgs[0].remove();
popular.appendChild(copy);
savePopularImages();
}
});
results.appendChild(img);
});
offset += limit;
const lmb = document.querySelector('.load_more');
if (lmb) lmb.style.display = data.results.length > 0 ? 'inline-block' : 'none';
popular.style.display = results.querySelectorAll('img').length > 0 ? 'none' : 'grid';
})
.catch(e => console.error(e));
}
function initGifs() {
addCustomElements();
if (!window.popularImagesInitialized) {
restorePopularImages();
window.popularImagesInitialized = true;
}
}
const di = debounce(initGifs, 100);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', di);
} else {
di();
}
new MutationObserver(di).observe(document.body, { childList: true, subtree: true });
const _wrap = m => {
const orig = history[m];
return (...args) => {
const ret = orig.apply(history, args);
window.dispatchEvent(new Event('locationchange'));
return ret;
};
};
history.pushState = _wrap('pushState');
history.replaceState = _wrap('replaceState');
window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
window.addEventListener('locationchange', di);
window.addEventListener('pageshow', di);
document.addEventListener('visibilitychange', () => { if (!document.hidden) di(); });
})();