`;
const gifsContentId = 'hipda-GIFs__content';
const gifsContentElem = document.createElement('div');
gifsContentElem.id = gifsContentId;
gifsContentElem.style.display = 'flex';
gifsContentElem.style.justifyContent = 'center';
gifsContentElem.style.overflowY = 'auto';
gifsContentElem.style.height = '350px';
gifsContentElem.style.width = '450px';
gifsContentElem.style.paddingTop = '0.5em';
gifsContainer.appendChild(gifsContentElem);
gifsContainer.insertAdjacentHTML(
'beforeend',
`
`,
);
const gf = new hipdaGiphy.GiphyFetch('askdHCgTjMe0SVXAnUe15PICPgF1zlWh');
const searchGifs = (term) => (offset) =>
gf.search(term, { offset, limit: 10, lang: 'zh-CN' });
const fetchTrendingGifs = (offset) => {
return gf.trending({ offset, limit: 10 });
};
const handleOnGifClick = (gif, e) => {
e.preventDefault();
const fastPostElem = document.querySelector('#fastpostmessage');
const gifUrl = gif.images.original.url;
if (fastPostElem) {
const fastPostValue = fastPostElem.value;
fastPostElem.value = ''.concat(
fastPostValue.slice(0, fastPostElem.selectionStart),
`[img]${gifUrl}[/img]`,
fastPostValue.slice(fastPostElem.selectionEnd),
);
}
const postBoxIframe = document.querySelector('#postbox #e_iframe');
const postBoxBodyElem =
postBoxIframe &&
postBoxIframe.contentWindow.document.querySelector('body');
if (postBoxBodyElem) {
postBoxBodyElem.innerHTML += `
`;
}
tippyInstance.hide();
};
const makeGrid = (fetchFunc, key = 'trending') => {
const remove = hipdaGiphy.renderGrid(
{
width: 450,
fetchGifs: fetchFunc,
columns: 3,
gutter: 6,
user: {},
key,
hideAttribution: true,
noResultsMessage: '无结果',
onGifClick: handleOnGifClick,
},
gifsContentElem,
);
return { remove };
};
const debounce = (callback, wait) => {
let timeout;
return (...args) => {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => callback.apply(context, args), wait);
};
};
const handleOnInput = (event) => {
const inputVal = event.target.value;
makeGrid(searchGifs(inputVal), inputVal);
};
const handleOnMount = () => {
const searchInputElem = document.querySelector('#hipda-GIFs__search');
searchInputElem &&
searchInputElem.addEventListener('input', debounce(handleOnInput, 500));
makeGrid(fetchTrendingGifs);
};
const tippyTheme = GM_getResourceText('lightBorderCss');
GM_addStyle(tippyTheme);
const tippyTargetElem = lastActionElem ? gifBtnElem : gifBtnOfPostBoxElem;
const tippyInstance = tippy(tippyTargetElem, {
content: gifsContainer,
trigger: 'click',
interactive: true,
appendTo: document.body,
placement: 'auto',
arrow: false,
theme: 'light-border',
maxWidth: 500,
onMount: handleOnMount,
});
})();