您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
GIFs support for HiPDA
// ==UserScript== // @name hipda-GIFs // @namespace https://github.com/maltoze/tampermonkey-scripts/ // @version 0.1.3 // @description GIFs support for HiPDA // @author maltoze // @match https://www.hi-pda.com/forum/* // @match https://www.4d4y.com/forum/* // @require https://cdn.jsdelivr.net/npm/@popperjs/core@2/dist/umd/popper.min.js // @require https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy-bundle.umd.min.js // @require https://cdn.jsdelivr.net/gh/maltoze/tampermonkey-scripts@dbaa6eef6a1231c7bf30118d62daa38e052042c1/hipda/dist/hipda-giphy.umd.min.js // @resource lightBorderCss https://cdn.jsdelivr.net/npm/tippy.js@6/themes/light-border.css // @grant GM_getResourceText // @grant GM_addStyle // @license MIT // ==/UserScript== (function () { 'use strict'; const lastActionElem = document.querySelector( '#fastpostform > table > tbody > tr > td.postcontent > div > div > a:last-of-type', ); const cmdSmiliesElem = document.querySelector('#e_cmd_smilies'); if (!lastActionElem && !cmdSmiliesElem) { return; } const gifBtnOfPostBoxElem = document.createElement('a'); gifBtnOfPostBoxElem.style.padding = '2px 0 26px 0'; gifBtnOfPostBoxElem.style.cursor = 'pointer'; gifBtnOfPostBoxElem.style.background = 'none'; gifBtnOfPostBoxElem.innerHTML = ` <svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="17.7939" y="8.52844" width="2.877" height="14.0941" fill="#9933FF"></rect> <rect x="0.531494" y="22.6226" width="20.139" height="2.81882" fill="#00CCFF"></rect> <rect x="0.531494" y="2.89081" width="2.877" height="19.7317" fill="#00FF99"></rect> <rect x="0.531494" y="0.0720215" width="11.508" height="2.81882" fill="#FFF35C"></rect> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.7936 5.70966V2.89084H14.9166V0.0720215H12.0396V2.90493V2.91903V5.72375V5.72375V8.52848H14.9166H17.7936V8.52848H20.6706V5.70966H17.7936Z" fill="#FF6666"></path> <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M12.0394 0.0720215V2.89084H9.16235L12.0394 0.0720215Z" fill="#0F0F0F"></path> <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M17.7939 11.3754V8.52844H20.6709L17.7939 11.3754Z" fill="#0F0F0F"></path> </svg>GIF `; cmdSmiliesElem && cmdSmiliesElem.insertAdjacentElement('afterend', gifBtnOfPostBoxElem); const gifBtnElem = document.createElement('a'); gifBtnElem.style.textIndent = 0; gifBtnElem.style.textDecoration = 'none'; gifBtnElem.style.cursor = 'pointer'; gifBtnElem.style.width = '28px'; gifBtnElem.style.background = 'none'; gifBtnElem.style.display = 'flex'; gifBtnElem.style.alignItems = 'center'; gifBtnElem.innerHTML = ` <svg width="25" height="11" viewBox="0 0 33 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.502 2.147L10.317 4.313C9.348 3.401 8.17 3.154 7.277 3.154C5.111 3.154 3.705 4.446 3.705 7.049C3.705 8.759 4.598 10.868 7.277 10.868C7.98 10.868 9.082 10.735 9.842 10.184V8.474H6.479V5.529H12.977V11.438C12.141 13.129 9.823 14.041 7.258 14.041C1.995 14.041 0 10.526 0 7.049C0 3.572 2.28 0 7.277 0C9.12 0 10.754 0.38 12.502 2.147ZM19.348 13.68H15.605V0.38H19.348V13.68ZM26.27 13.68H22.546V0.38H32.749V3.534H26.27V6.023H32.35V9.101H26.27V13.68Z" fill="url(#paint0_linear)"/> <defs> <linearGradient id="paint0_linear" x1="16.5382" y1="-7.16091" x2="6.33537" y2="16.8717" gradientUnits="userSpaceOnUse"> <stop stop-color="#00E6CC"/> <stop offset="1" stop-color="#9933FF"/> </linearGradient> </defs> </svg> `; lastActionElem && lastActionElem.insertAdjacentElement('afterend', gifBtnElem); const gifsContainerId = 'hipda-GIFs__container'; const gifsContainer = document.createElement('div'); gifsContainer.id = gifsContainerId; gifsContainer.innerHTML = ` <div style="margin: 0.5em"> <input id="hipda-GIFs__search" style="padding: 0.5em; width: 100%; box-sizing: border-box; outline: 0; border: 1px solid #d9d9d9; border-radius: 4px;" placeholder="搜索GIFs..." /> <div> `; 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', `<div style="width: 100px; padding: 14px 0 10px 0"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 581.5 67.1" xml:space="preserve" > <path fill="#898989" d="M327.2,26.7h29.7v8c0,5.7,0,11.4,0,17.1c0,1.4-0.4,2.5-1.2,3.6c-2.3,3.2-5.3,5.4-8.8,6.9 c-10.6,4.2-21.3,4.5-31.9,0.2c-7.5-3-12.6-8.6-15.3-16.2c-3.3-9.3-3.1-18.6,1.1-27.7c3.9-8.3,10.5-13.5,19.2-16 c6.1-1.7,12.4-1.8,18.7-0.7c5.6,1,11.6,4.5,15.9,9.1c-1.6,1.6-3.2,3.2-4.8,4.9c-1.6,1.7-3.2,3.4-4.8,5.1c-0.7-0.5-1.2-0.9-1.6-1.2 c-5.2-3.9-11-5-17.3-3.7c-5,1.1-8.6,4.2-10.3,9c-1.9,5.4-2,10.9,0.2,16.3c2.3,5.6,6.6,8.6,12.6,9.2c3.6,0.3,7.1,0,10.5-1.3 c1.1-0.4,2.2-1,3.3-1.5v-7.9h-15.2C327.1,35.6,327.2,31.2,327.2,26.7 M453.6,63.9h17.1V41.3h21.9v22.6h16.9c0-20.3,0-40.4,0-60.6 h-17c-0.1,7.7,0.1,15.3-0.1,22.8h-21.8V3.3h-17.1V63.9z M411,63.8V47.5c4,0,8,0.1,12,0c2.7-0.1,5.3-0.4,7.9-1 c5.1-1.2,9.4-3.7,12.5-8c3-4.2,4.1-8.9,3.9-13.9c-0.2-6.5-2.5-12-7.6-16.1c-4.4-3.6-9.6-5.1-15.1-5.2h-31.1v60.6H411 M410.7,17.9 c0.6,0,8.3,0,12.1,0c5.5,0,7.9,4.7,7.2,9c-0.6,3.6-2.8,5.9-6.3,6.1c-4.2,0.2-8.5,0-13,0V17.9z M546.8,23.9 c-4.3-7.2-8.4-13.9-12.5-20.7h-19.8c7.9,12.4,15.7,24.4,23.5,36.6v23.9h17.1V39.7c8-11.8,24.4-36.2,24.6-36.5h-0.6h-19.2 C555.6,10,551.3,16.8,546.8,23.9 M382.4,63.9c0-20.4,0-40.5,0-60.8h-17.1v60.8H382.4" ></path> <path fill="#C1C1C1" d="M1.7,19.3H15c6.3,0,9.9,4.1,9.9,8.9c0,4.8-3.6,8.9-9.9,8.9H7v10.6H1.7V19.3z M14.2,23.7H7v9.1h7.2 c3,0,5.2-1.8,5.2-4.5S17.2,23.7,14.2,23.7z M43.3,18.8c9.1,0,15.4,6.2,15.4,14.7c0,8.5-6.4,14.7-15.4,14.7 c-9.1,0-15.4-6.2-15.4-14.7C27.9,25,34.2,18.8,43.3,18.8z M43.3,23.2c-6.1,0-10,4.4-10,10.3c0,5.8,3.9,10.3,10,10.3 c6.1,0,10-4.4,10-10.3C53.3,27.6,49.4,23.2,43.3,23.2z M80.1,26.7l-5.8,21h-5.7L60,19.3h5.9l5.9,21.9L78,19.3h4.2l6.2,21.9l5.8-21.9 h5.9l-8.6,28.5H86L80.1,26.7z M103.8,19.3h20.7v4.4h-15.4v7.4h15.1v4.4h-15.1v7.9h15.4v4.4h-20.7V19.3z M140.4,37.1h-5.2v10.6h-5.3 V19.3h13.3c6,0,9.9,3.7,9.9,8.9c0,5.1-3.5,7.8-7.2,8.4l7.4,11.2h-6.1L140.4,37.1z M142.4,23.7h-7.2v9.1h7.2c3,0,5.2-1.8,5.2-4.5 S145.4,23.7,142.4,23.7z M158.3,19.3H179v4.4h-15.4v7.4h15.1v4.4h-15.1v7.9H179v4.4h-20.7V19.3z M184.4,19.3h11.2 c9.4,0,15.8,5.9,15.8,14.3c0,8.4-6.4,14.2-15.8,14.2h-11.2V19.3z M195.6,43.4c6.6,0,10.4-4.4,10.4-9.8c0-5.5-3.6-9.9-10.4-9.9h-5.9 v19.7H195.6z M228.2,19.3H243c5.5,0,8.6,3.2,8.6,7.3c0,3.6-2.4,6-5.2,6.5c3.2,0.5,5.8,3.5,5.8,7c0,4.4-3.1,7.7-8.8,7.7h-15.3V19.3z M241.9,31.1c2.7,0,4.3-1.5,4.3-3.7s-1.5-3.7-4.3-3.7h-8.5v7.4H241.9z M242.2,43.4c2.9,0,4.6-1.5,4.6-4c0-2.1-1.6-3.9-4.6-3.9h-8.7 v7.9H242.2z M264.7,35.9L253,19.3h6.1l8.3,12.2l8.2-12.2h6.1L270,35.9v11.8h-5.3V35.9z" ></path> </svg> </div>`, ); 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 += `<img src="${gifUrl}" alt="${gif.title}" />`; } 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, }); })();