Interesting Wikipedia userscript

Does evil things to wikipedia articles

当前为 2024-08-20 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Interesting Wikipedia userscript
  3. // @namespace roxwize
  4. // @match *://*.wikipedia.org/*
  5. // @grant none
  6. // @version 1.5
  7. // @author roxwize
  8. // @description Does evil things to wikipedia articles
  9. // @license GPL-3.0-or-later
  10. // @homepageURL https://greasyfork.org/en/scripts/479665-interesting-wikipedia-userscript
  11. // ==/UserScript==
  12.  
  13. const images = [
  14. "https://media.tenor.com/MBkt9DXPaUYAAAAd/ddostumka%C3%A7.gif",
  15. "https://media.tenor.com/C8aEDgYC1y4AAAAd/aphex-twin-come-to-daddy.gif",
  16. "https://media.tenor.com/4i00_7OrisUAAAAC/sandoz-canu-sandoz.gif",
  17. "https://media.tenor.com/hrNDlz8yD3UAAAAC/harley-quinn-margot-robbie.gif",
  18. "https://media.tenor.com/s1w-Sc5ahpEAAAAd/paz-pazzin.gif",
  19. "https://media.tenor.com/dWS427mpAZAAAAAd/secu-rity-meme.gif",
  20. "https://media.tenor.com/XUFDsSt48GYAAAAd/eminem.gif",
  21. "https://media.tenor.com/QgphpoWrjaAAAAAd/retro-retro-dev.gif",
  22. "https://media.tenor.com/uSo4lQu9dVgAAAAC/homer-smile.gif",
  23. "https://media.tenor.com/QMpyBmPBlhoAAAAC/wtf-roblox.gif",
  24. "https://media.tenor.com/47hdAGX-uAwAAAAC/charjabug-weegee.gif",
  25. "https://media.tenor.com/HcQ44DFmPccAAAAC/video-gaming.gif",
  26. "https://media.tenor.com/79djON9nNhMAAAAC/0001.gif",
  27. "https://media.tenor.com/U2ilbVQ-DAwAAAAC/jameis-winston-crab.gif",
  28. "https://c.tenor.com/jZlLTydic2UAAAAd/tenor.gif",
  29. "https://c.tenor.com/KE0dcwJ1VS4AAAAC/tenor.gif",
  30. "https://media1.tenor.com/m/cmiHJgTxV5AAAAAd/minccino-poketoon.gif",
  31. "https://media1.tenor.com/m/klfhGWhyzzYAAAAd/praise-allah.gif",
  32. "https://media1.tenor.com/m/TiJaOnPTFTsAAAAC/williams-evil.gif",
  33. "https://media1.tenor.com/m/sUey3ekTfDoAAAAC/slugcat-rain-world-artificer-dance.gif",
  34. "https://media1.tenor.com/m/gfZaN-s9gm0AAAAd/tsg-hoffenheim-fussball.gif",
  35. "https://media1.tenor.com/m/8fkcv1WDDM0AAAAC/robot-hello.gif",
  36. "https://media1.tenor.com/m/mMhU45-pZGsAAAAd/autechre-sean-booth.gif",
  37. "https://media1.tenor.com/m/I3wc0IZXfqYAAAAC/benedict-cumberbatch-doctor-strange.gif",
  38. "https://media1.tenor.com/m/D8GSu_9yYmAAAAAC/urkel-steve-urkel.gif",
  39. "https://media1.tenor.com/m/E2xaet0TtYsAAAAd/south-park-block13.gif",
  40. "https://media1.tenor.com/m/i9Ge9uKBVAcAAAAC/exorcist-prank.gif",
  41. "https://media1.tenor.com/m/1_JQdzkUcqQAAAAd/pepto-drink.gif",
  42. "https://media1.tenor.com/m/aRaj8_BOr4IAAAAC/philip-wikipedia.gif",
  43. "https://media1.tenor.com/m/jIEjhVJPlrsAAAAd/hitman-hitman2.gif",
  44. "https://media1.tenor.com/m/Vw16aqm7wiEAAAAd/rhythm-heaven-fail.gif",
  45. "https://media1.tenor.com/m/IQcO08GxscoAAAAd/smooth-criminal-cat.gif",
  46. "https://media1.tenor.com/m/BuXXCcVsbmcAAAAd/bogdan-moment-hl.gif",
  47. "https://media1.tenor.com/m/BImhqpdSqUUAAAAd/evil-villain.gif",
  48. "https://media1.tenor.com/m/iDbMu5kjwrkAAAAd/man-runnin.gif",
  49. "https://media1.tenor.com/m/hHwMQpLGCcQAAAAd/kermit-gay-kermit-potion.gif",
  50. "https://media1.tenor.com/m/T850EkA3rgMAAAAC/112hageland-leuven2.gif",
  51. "https://media1.tenor.com/m/rp8l7QTPjbMAAAAd/coca-cola-coke.gif",
  52. "https://media1.tenor.com/m/HL5dPXaDcgYAAAAC/din-barbaad.gif",
  53. "https://media1.tenor.com/m/wpaGL3wIw4kAAAAC/caprisun.gif",
  54. "https://media1.tenor.com/m/XBrPEFm-_14AAAAC/cat-lightning.gif",
  55. "https://media1.tenor.com/m/PsgKlEP-1PgAAAAd/creepy-minecraft.gif",
  56. "https://media1.tenor.com/m/t-l_c8Z9bJsAAAAd/%D0%BF%D0%B0%D1%81%D1%85%D0%B0%D0%BB%D0%BA%D0%BE-%D0%B4%D0%B6%D0%BE%D0%BA%D0%B5%D1%80.gif",
  57. "https://media1.tenor.com/m/LsGpcwpSsmoAAAAC/googliness-the-internship.gif",
  58. "https://media1.tenor.com/m/J7-lKCV1jjQAAAAd/fat-guy.gif",
  59. "https://media1.tenor.com/m/0rc0l8Qqx-kAAAAd/penguin.gif",
  60. "https://media1.tenor.com/m/ggtuNDdcGO0AAAAC/object-fool-eucerin.gif",
  61. "https://media1.tenor.com/m/cG7XQuWtkekAAAAC/link-counsciousness.gif",
  62. "https://media1.tenor.com/m/ZvPv7jkHXd8AAAAC/object-fool-eucerin.gif",
  63. "https://media1.tenor.com/m/m4Fy2lQd5j0AAAAC/trisha-tamil.gif",
  64. "https://media1.tenor.com/m/53ff8yADDDcAAAAC/arthritis-inflammation.gif",
  65. "https://media1.tenor.com/m/TxTQBaxnGwgAAAAC/bird-brain-mechanical.gif",
  66. "https://media1.tenor.com/m/rYscw0R2NqEAAAAC/mario-retro.gif",
  67. "https://media1.tenor.com/m/821Jm-bIScoAAAAd/dance-robot.gif",
  68. "https://media1.tenor.com/m/u_J8-0ocXfMAAAAC/homer-homer-simpson.gif",
  69. "https://media1.tenor.com/m/d7RH_KsFTWQAAAAd/five-nights-at-freddy%27s-fnaf.gif",
  70. "https://media1.tenor.com/m/6tJ8-Vu_CWQAAAAC/patapon-patapon3.gif",
  71. "https://media1.tenor.com/m/vRxgL6nyzK0AAAAd/dancing-3d.gif",
  72. "https://media1.tenor.com/m/s8mYduoNxQAAAAAC/home-alone-december.gif",
  73. "https://media1.tenor.com/m/H0TP37zS6j4AAAAC/pizza-tower-the-noise.gif",
  74. "https://media1.tenor.com/m/nnQsqX9g_YYAAAAd/tang916-happy-easter.gif",
  75. "https://media1.tenor.com/m/uCZPKgq0jDYAAAAC/ljarius-sneed-ljarius.gif",
  76. "https://media1.tenor.com/m/I-hb4OExuugAAAAC/bfdi-mouth.gif",
  77. "https://media1.tenor.com/m/s-7ru8cGJU0AAAAd/caveira-skull.gif",
  78. "https://media1.tenor.com/m/8NRi6VMAbR8AAAAC/bunny-maloney-jean-francois.gif",
  79. "https://media1.tenor.com/m/kBCP0yD9sVYAAAAd/thom-yorke-walking.gif",
  80. "https://media1.tenor.com/m/iNoVG4ZlXwUAAAAC/gta.gif",
  81. "https://media1.tenor.com/m/4H_vBUFCuEgAAAAd/skate-glitch.gif",
  82. "https://media1.tenor.com/m/MnKaoweSL7YAAAAd/sneed-bop.gif",
  83. "https://media1.tenor.com/m/e71nId8Yj4kAAAAd/shenmue-shenmue-forklift.gif",
  84. "https://media1.tenor.com/m/3-w0dE_SL7UAAAAC/o2-o2robot.gif",
  85. "https://media1.tenor.com/m/TPSxhmp-6lkAAAAC/roblox.gif",
  86. "https://media1.tenor.com/m/A4bTak1BWbgAAAAd/scolex-fish.gif",
  87. "https://media1.tenor.com/m/k0pf_TDz1DsAAAAd/aphextwin-idm.gif",
  88. "https://media1.tenor.com/m/ZetHEGNctWcAAAAd/click-here-to-upload-to-tenor-upload-your-own-gifs.gif",
  89. "https://media1.tenor.com/m/-7EhZTjdRQ8AAAAC/android-running-android.gif",
  90. "https://media1.tenor.com/m/CtgzUsEujTsAAAAC/sistersmoi-siss.gif",
  91. "https://media1.tenor.com/m/mMhU45-pZGsAAAAd/autechre-sean-booth.gif",
  92. "https://media1.tenor.com/m/wY95uJQ4DYoAAAAC/popsticky-popcorn-ab.gif",
  93. // thankyou to ellis for the gifs
  94. "https://64.media.tumblr.com/1a35ba4b9cc154ea6a1f7b323a817e9d/57edb24c0e90f3d4-92/s1280x1920/a2e0cf8398860a0e401e24d7560925f78be40d61.gif",
  95. "https://media1.tenor.com/m/LzikZYfpDwAAAAAC/sewing-sewing-machine.gif",
  96. "https://media1.tenor.com/m/hweQnVtO6UMAAAAC/spongebob-wall.gif",
  97. "https://media1.tenor.com/m/TVeq1AOlHQAAAAAC/bubsy-explode.gif",
  98. // thankyou to me for the gifs
  99. "https://media1.tenor.com/m/a0aS96FfutgAAAAd/radiohead-thom-yorke.gif",
  100. "https://media1.tenor.com/m/RCntpOKN4bQAAAAd/erm-what-the-sigma-sigma.gif",
  101. "https://media1.tenor.com/m/6CIKiVAesy0AAAAC/pubie-fulptube.gif",
  102. "https://media1.tenor.com/m/7peLhQT7GrcAAAAC/wacky-silly.gif",
  103. "https://media1.tenor.com/m/kw-zE0H3lSgAAAAC/wooper-roller-skates.gif",
  104. "https://media1.tenor.com/m/1BlDMUTDCZ4AAAAC/sackboy-little-big-planet.gif",
  105. "https://media1.tenor.com/m/y0Yub_nVmNYAAAAd/jerma-jerma985.gif",
  106. "https://media1.tenor.com/m/GnrqZuKrwzcAAAAC/snoop-dogg.gif",
  107. "https://media1.tenor.com/m/YyjJWH0YMxoAAAAd/william-shakespeare-shakespeare.gif",
  108. "https://media1.tenor.com/m/PBz8WbWestUAAAAC/dive-toilet.gif",
  109. "https://media1.tenor.com/m/bV6ObqR_dREAAAAC/rage-3kliksphilip.gif",
  110. "https://media1.tenor.com/m/sO8QSSzBXhkAAAAC/radiohead-bear.gif",
  111. "https://media1.tenor.com/m/ivG0cBBNSdMAAAAC/evil-bfdi.gif",
  112. "https://media1.tenor.com/m/dXAnXprr_h4AAAAC/morgana-persona-5.gif",
  113. "https://media1.tenor.com/m/SNKFpcrFWWAAAAAC/persona-5-morgana.gif",
  114. "https://media1.tenor.com/m/qFaVryk8_64AAAAC/morgana-dance-morgana.gif",
  115. // thankyou to jack for the gifs
  116. "https://media1.tenor.com/m/cjefIM5Y6KsAAAAd/the-orville-36-hours.gif",
  117. "https://media1.tenor.com/m/V3MyGNQiaEIAAAAC/dancing-twerk.gif",
  118. "https://media1.tenor.com/m/fwoJNI_CpjQAAAAC/skeleton-shocked.gif",
  119. "https://media1.tenor.com/m/SiJels-VZLkAAAAC/terminator-arnold-schwarzenegger.gif",
  120. "https://media1.tenor.com/m/XuT_ifWR91wAAAAC/rage-mad.gif",
  121. "https://media.tenor.com/qzA2L1B7nP0AAAAM/cali007.gif",
  122. "https://media1.tenor.com/m/8vQY3QJX_soAAAAC/andy-exhausted.gif",
  123. "https://media1.tenor.com/m/JHCBI26vkJIAAAAC/alien-alien-dance.gif",
  124. "https://media1.tenor.com/m/G2Hgohh0P-8AAAAC/jay-z-shot.gif",
  125. "https://media1.tenor.com/m/OFl-Kxj_D_8AAAAd/smart-iptv-iptv.gif",
  126. "https://media1.tenor.com/m/aqNxzTht6IAAAAAC/cat-fire.gif",
  127. "https://media1.tenor.com/m/HtFYNC0gUIEAAAAC/cave-story-sue-sakamoto.gif",
  128. "https://media1.tenor.com/m/AqG3VVVxwYMAAAAC/arvinguy.gif"
  129. ];
  130. const imageWhitelist = new Array(images.length).fill(-1).map((_, i) => i);
  131. const style = `
  132. #god{position:fixed;bottom:1em;left:1em;background:rgba(50,40,80,0.8);padding:1em;color:white;}
  133. #gantzgraf{position:fixed;bottom:1em;right:1em;background:rgba(50,40,80,0.8);padding:1em;color:white;text-align:right;}
  134. #gantzgraf .option{display:flex;align-items:center;gap:1em;}
  135. #gantzgraf .option label{flex-grow:1;text-align:right;}
  136. #giflist-root{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(245,248,242,0.85);padding:1rem;overflow-y:auto;box-sizing:border-box;}
  137. #giflist-root-header{height:10%;border-bottom:1px solid rgba(0,0,0,0.2);overflow-x:hidden;margin-bottom:1rem;}
  138. #giflist-root-header h1{font-size:300%;border-bottom:0;margin:0;font-weight:bold;}
  139. #giflist-root-list{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-auto-rows:minmax(120px,1fr);gap:2%;}
  140. #giflist-root-list div{display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.25);border-radius:10px;padding:6px;}
  141. #giflist-root-list div:hover{background-color:rgba(180,180,180,0.7);cursor:pointer;}
  142. #giflist-root-list div img{width:80%;max-height:80%;}
  143. #giflist-root-list div:hover img{filter:grayscale(1);}
  144. span.small{display:block;font-size:smaller;}
  145. span.sub{display:block;color:rgba(0,0,0,0.7);font-style:italic;}
  146. .iwusbox a{color:white;font-weight:bold;text-decoration:underline;}
  147. `;
  148. let words = [];
  149.  
  150. const config = {
  151. styleModifications: {
  152. label: "Modify page style",
  153. current: false
  154. },
  155. linkModifications: {
  156. label: "Modify links",
  157. current: true
  158. },
  159. figCaptions: {
  160. label: "Modify image captions",
  161. current: false
  162. },
  163. textualModifications: {
  164. label: "Screw up text nodes",
  165. current: true
  166. },
  167. excessive: {
  168. label: "<b>Overdrive</b>",
  169. current: true
  170. },
  171. chinese: {
  172. label: "Add random Chinese characters",
  173. current: true
  174. },
  175. randomLinks: {
  176. label: "Change links to be random",
  177. current: false
  178. }
  179. };
  180.  
  181. function modify(e, f) {
  182. const n = e.childNodes;
  183. for (let d of n) {
  184. if (d.nodeType === Node.TEXT_NODE) f(d);
  185. else modify(d, f);
  186. }
  187. }
  188.  
  189. const chance = () => Math.random() * 100;
  190. const rand = (a) => a[Math.floor(Math.random() * a.length)];
  191. const screwup = (str) => {
  192. const s = str.split("");
  193. let o = "";
  194. let i = 0;
  195. for (let l of s) {
  196. if (chance() > 60) continue;
  197. if (chance() < 20 && s[i+1]) o += s[i+1];
  198. if (chance() > 80 && s[i-1]) o += s[i-1];
  199. if (chance() < 80) o += l;
  200. if (chance() > 90) o += l;
  201. i++;
  202. }
  203. return o;
  204. }
  205. const applyRandomTransformation = (node, transformation, chance = 0.2) => {
  206. const chars = [];
  207. for (let i = 0; i < node.textContent.length; i++) {
  208. let c = node.textContent[i];
  209. if (Math.random() < chance) {
  210. c = transformation(c);
  211. }
  212. chars.push(c);
  213. }
  214. return chars.join("");
  215. }
  216. const applyRandomWordTransformation = (node, transformation, chance = 0.2) => {
  217. const words = node.textContent.split(" ");
  218. for (let i in words) {
  219. if (Math.random() < chance) words[i] = transformation(words[i]);
  220. }
  221. return words.join(" ");
  222. }
  223.  
  224. (function() {
  225. // Add userscript styles
  226. const stylesheet = document.createElement("style");
  227. stylesheet.innerHTML = style;
  228. document.head.appendChild(stylesheet);
  229. // Root element.
  230. const rootEl = document.createElement("div");
  231. rootEl.id = "god";
  232. rootEl.classList.add("iwusbox");
  233. rootEl.innerHTML = `<span class="small">iwus v${GM.info.script.version} | <a href="https://greasyfork.org/en/scripts/479665-interesting-wikipedia-userscript" data-immune="true">greasyfork</a></span><input type="text" id="bregex" placeholder="regex" /><br/><input type="text" id="breplacement" placeholder="replacement" /><br/><button id="bok" style="cursor:pointer;">ok</button>`;
  234. document.body.appendChild(rootEl);
  235. document.getElementById("bok").addEventListener("click", () => {
  236. // Begin
  237. words = [];
  238. const regexp = new RegExp(document.getElementById("bregex").value, "g");
  239. const replce = document.getElementById("breplacement").value;
  240. const chchrs = ["桤","酒","垄","耐","撑","澉","颎","苦","耗","檎","霰","嗲","扩","京","柩","辨","蒿","蠓","湟","药","更","哇","迕","烬","陪","坭","摘","罹","徙","脖","溶","佬","岣","桅","看","缎"];
  241. const puncts = [" ? ", " ! ", " ?? ", " !! ", " ?! ", " !? ", "... "]
  242. const phrase = ["Chinese restaurant in the future never let you finish your sentence", "Chinese restaurant in the future", "never let you finish your sentence", "Lego Island"];
  243. // new Array(93).fill("").map((e, i) => String.fromCharCode(i + 33));
  244. const asciic = ["!","\"","#","$","%","&","'","(",")","*","+",",","-",".","/","0","1","2","3","4","5","6","7","8","9",":",";","<","=",">","?","@","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","[","\\","]","^","_","`","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","{","|","}"];
  245. document.querySelectorAll(`p, ${config.figCaptions.current ? "figcaption," : ""} th, td, li, h1, h2, h3, h4, h5, h6, dd`).forEach((e) => {
  246. modify(e, (node) => {
  247. node.textContent = node.textContent.replaceAll(regexp, replce);
  248. if (node.textContent.length > 2 && node.textContent !== ".") words.push(node.textContent);
  249. // == TEXTUAL MODIFICATIONS == //
  250. if (config.textualModifications.current) {
  251. if (config.excessive.current) {
  252. if (chance() > 90) {
  253. // 10% chance to remove all vowels and scramble
  254. node.textContent = screwup(node.textContent.replaceAll(/[aeiou]/g, ""));
  255. } else if (chance() > 90) {
  256. // 10% chance to scramble normally otherwise
  257. node.textContent = screwup(node.textContent);
  258. }
  259. // replace all punctuation with random in list or append to a given character with 20% chance
  260. node.textContent = applyRandomTransformation(node, (c) => {
  261. if (["!", "?", "."].includes(c) || Math.random() > 0.8) {
  262. return puncts[Math.floor(Math.random() * puncts.length)];
  263. }
  264. });
  265. }
  266. // 60% chance to make random letters uppercase with a 20% chance for each
  267. if (chance() > 60) {
  268. node.textContent = applyRandomTransformation(node, (c) => c.toUpperCase());
  269. }
  270. // 1% chance to add a random word
  271. node.textContent = applyRandomWordTransformation(node, (w) => phrase[Math.floor(Math.random() * phrase.length)], 0.01);
  272. }
  273. // 10% chance to add anywhere from 5 to 85 random chinese characters after a word
  274. if (Math.random() > 0.9 && config.chinese.current) {
  275. for (let i = 0; i < Math.floor(Math.random() * 80) + 5; i++) {
  276. node.textContent += chchrs[Math.floor(Math.random() * chchrs.length)];
  277. }
  278. }
  279. // 90% chance to just get cut off after ten letters at a random point
  280. if (node.textContent.length > 10 && Math.random() > 0.1 && config.excessive.current) {
  281. node.textContent = node.textContent.substring(0, Math.floor(Math.random() * (node.textContent.length - 10)) + 10)
  282. }
  283. // [jack idea no.1] 50% chance for commas to repeat 5 to 10 times
  284. node.textContent = applyRandomTransformation(node, (c) => {
  285. if (c === ',' && Math.random() >= 0.5) {
  286. return new Array(Math.floor(Math.random() * 5) + 5).fill(",").join("");
  287. }
  288. });
  289. // [jack idea no.2] 20% chance for 5 to 35 random ascii characters before text
  290. if (Math.random() <= 0.2 && config.excessive.current) {
  291. let s = "";
  292. for (let i = 0; i < Math.floor(Math.random() * 5) + 30; i++) {
  293. s += asciic[Math.floor(Math.random() * asciic.length)];
  294. }
  295. node.textContent = s + node.textContent;
  296. }
  297. });
  298. // == STYLE MODIFICATIONS == //
  299. if (config.styleModifications.current) {
  300. e.style.color = `hsl(${Math.round(Math.random()*360)} 50% 50%)`;
  301. if (chance() > 75) e.style.backgroundColor = `hsl(${Math.round(Math.random()*360)} 50% 50%)`;
  302. e.style.textDecoration = chance() > 70 ? "underline" : "normal";
  303. e.style.fontStyle = chance() > 70 ? "italic" : "normal";
  304. if (chance() > 30) {
  305. e.style.transform = `translate(${Math.random()*25}px, ${Math.random()*50}px)`;
  306. } else {
  307. e.style.transform = `rotate(${Math.random()*5-2.5}deg)`;
  308. if (chance() > 45) {
  309. e.style.transform += ` scale(${Math.random()*2+0.5})`;
  310. }
  311. }
  312. e.style.fontSize = `${9 + Math.floor(Math.random()*10)}pt`;
  313. }
  314. });
  315. document.querySelectorAll("img").forEach((e) => {
  316. e.src = images[rand(imageWhitelist)];
  317. });
  318. // == LINK MODIFICATIONS == //
  319. if (config.linkModifications.current) {
  320. document.querySelectorAll("a").forEach((e) => {
  321. if (e.dataset.immune === "true") return;
  322.  
  323. if (config.randomLinks.current) {
  324. e.setAttribute("href", "https://en.wikipedia.org/wiki/Special:Random");
  325. }
  326. modify(e, (node) => {
  327. node.textContent = rand(words);
  328. });
  329. });
  330. }
  331. });
  332. // Config options
  333. const configEl = document.createElement("div");
  334. configEl.id = "gantzgraf";
  335. configEl.classList.add("iwusbox");
  336. for (let [k, v] of Object.entries(config)) {
  337. const e = document.createElement("div");
  338. e.classList.add("option");
  339. e.innerHTML = `<label for="bo-${k}">${v.label}</label>`;
  340. let o;
  341. if (typeof v.current === "number" && v.vals != undefined) {
  342. o = document.createElement("div");
  343. o.style = "display:block;"
  344. v.vals.forEach((el, i) => {
  345. const vO = document.createElement("input");
  346. vO.type = "radio";
  347. vO.name = `bo-${k}`;
  348. vO.id = `ro-${k}-${i}`;
  349. vO.value = i.toString();
  350. o.appendChild(vO);
  351. const vL = document.createElement("label");
  352. vL.setAttribute("for", vO.id);
  353. vL.innerHTML = el;
  354. vL.style.display = "block";
  355. o.appendChild(vL);
  356. });
  357. } else {
  358. o = document.createElement("input");
  359. o.type = "checkbox";
  360. o.checked = config[k].current;
  361. o.addEventListener("input", () => {
  362. config[k].current = o.checked;
  363. });
  364. }
  365. o.name = `bo-${k}`;
  366. o.id = o.name;
  367. e.appendChild(o);
  368. configEl.appendChild(e);
  369. }
  370. // Giflist opener
  371. const openGifListLink = document.createElement("a");
  372. openGifListLink.innerHTML = "open the gif list";
  373. openGifListLink.href = "javascript:void(0);"
  374. openGifListLink.onclick = renderGifList;
  375. openGifListLink.dataset.immune = true;
  376. configEl.appendChild(openGifListLink);
  377. document.body.appendChild(configEl);
  378. })();
  379.  
  380. // Maybe run automatically on page load
  381. function renderGifList() {
  382. // Root div
  383. const rootDiv = document.createElement("div");
  384. rootDiv.id = "giflist-root";
  385. rootDiv.innerHTML = `
  386. <div id="giflist-root-header">
  387. <h1>Giflist</h1><span class="sub">Click on a gif to remove it | <a href="javascript:document.getElementById('giflist-root').remove()" data-immune="true">close</a></span>
  388. </div>
  389. `;
  390. const rootList = document.createElement("div");
  391. rootList.id = "giflist-root-list";
  392. // Individual gif elements
  393. let i = 0;
  394. for (let gif of images) {
  395. const gifDiv = document.createElement("div");
  396. gifDiv.id = `iwusdiv-${i}`;
  397. gifDiv.dataset.index = i;
  398. gifDiv.innerHTML = `<img src="${gif}" alt="no.${i}">`;
  399. gifDiv.addEventListener("click", () => {
  400. if (imageWhitelist.length === 1) {
  401. alert("No");
  402. return;
  403. }
  404. imageWhitelist.splice(imageWhitelist.indexOf(parseInt(gifDiv.dataset.index)), 1);
  405. gifDiv.remove();
  406. });
  407. rootList.appendChild(gifDiv);
  408. i++;
  409. }
  410. rootDiv.appendChild(rootList);
  411. document.body.appendChild(rootDiv);
  412. }