TEXT   33   0
   414 5.23 KB    142

Improved Flag Selector

By AnonPPP
Created: 2021-10-01 15:18:38
Expiry: Never
script4chanx

  1. // This is a userscript to make the flagselector more bearable
  2. // For Archival Purpose (I did not make this)
  3. // Source code checks out
  4. // ==UserScript==
  5. // @name Improved Waifu Flag Selection
  6. // @namespace http://example.org/improved_waifu_flag_sel
  7. // @version 1.0.3
  8. // @description Improved flag selection for /mlp/ (icons, search, etc)
  9. // @author Anonymous
  10. // @license MIT
  11. // @match https://boards.4channel.org/mlp/*
  12. // @icon https://icons.duckduckgo.com/ip2/4channel.org.ico
  13. // @resource cssMain https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css
  14. // @resource cssFlags https://s.4cdn.org/image/flags/mlp/flags.1.css
  15. // @require https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js
  16. // @require https://openuserjs.org/src/libs/soufianesakhi/node-creation-observer.js
  17. // @grant GM_getResourceText
  18. // @grant GM_addStyle
  19. // ==/UserScript==
  20.  
  21. (function() {
  22. 'use strict';
  23. /*global Choices, NodeCreationObserver*/
  24. GM_addStyle(GM_getResourceText("cssMain"));
  25. GM_addStyle(`
  26. .choices__inner {
  27. box-sizing: border-box;
  28. padding: 0 !important;
  29. min-height: 25px !important;
  30. }
  31. .choices[data-type*="select-one"] .choices__inner {
  32. padding-bottom: 0px !important;
  33. }
  34. .choices[data-type*="select-one"] .choices__input {
  35. padding: 3px !important;
  36. }
  37. .choices__list--dropdown .choices__item {
  38. padding: 3px !important;
  39. }
  40. .bfl-0 {
  41. visibility: hidden;
  42. }
  43. #qr > form {
  44. overflow-y: visible !important;
  45. overflow-x: visible !important;
  46. }
  47. `);
  48. if (document.querySelector('link[rel="stylesheet"][href*="flags"]') === null) {
  49. GM_addStyle(GM_getResourceText("cssFlags"));
  50. }
  51.  
  52. let clonedFlagSelector;
  53. let myNodeList = document.querySelectorAll('.flagSelector');
  54. for (let i = 0; i < myNodeList.length; i++) {
  55. let flagSelectorElem = myNodeList[i];
  56. if (i == 0) {
  57. clonedFlagSelector = flagSelectorElem.cloneNode(true);
  58. }
  59. createChoices(flagSelectorElem, 'choices ponyFlagChoices');
  60. console.log("i=" + i);
  61. }
  62.  
  63. function createChoices(flagSelectorElem, outerClass) {
  64. const choices = new Choices(flagSelectorElem, {
  65. searchResultLimit: 80,
  66. searchPlaceholderValue: "Search pony",
  67. noResultsText: 'No ponies found',
  68. itemSelectText: '',
  69. shouldSort: false,
  70. classNames: {
  71. containerOuter: outerClass,
  72. },
  73. fuseOptions: {
  74. includeMatches: true,
  75. includeScore: true,
  76. threshold: 0.1,
  77. distance: 600
  78. },
  79. callbackOnCreateTemplates: () => ({
  80. choice: (...args) => {
  81. const choiceDefault = Choices.defaults.templates.choice.call(this, ...args);
  82. addIcon(choiceDefault, ...args);
  83. return choiceDefault;
  84. },
  85. item: (...args) => {
  86. const itemDefault = Choices.defaults.templates.item.call(this, ...args);
  87. addIcon(itemDefault, ...args);
  88. return itemDefault;
  89. }
  90. }),
  91. });
  92. flagSelectorElem.addEventListener(
  93. 'choice',
  94. function(event) {
  95. setBoardFlag(event.detail.choice.value);
  96. },
  97. false,
  98. );
  99. choices.setChoiceByValue(getBoardFlag());
  100. return choices;
  101. }
  102.  
  103. function addIcon(templateElement, ...args) {
  104. console.log(args[1]);
  105. const icon = document.createElement("span");
  106. icon.classList.add("bfl", "bfl-" + args[1].value.toLowerCase());
  107. const space = document.createTextNode(" ");
  108. templateElement.prepend(icon, space);
  109. }
  110.  
  111. //#qrForm > #qrCaptchaContainer + div > .flagSelector,
  112. let isObserve = true;
  113. NodeCreationObserver.onCreation("#qrForm > #qrCaptchaContainer + div > .ponyFlagChoices", (node) => {
  114. if (isObserve) {
  115. isObserve = false;
  116. let curFlagSelector = clonedFlagSelector.cloneNode(true);
  117. node.parentNode.appendChild(curFlagSelector);
  118. node.remove();
  119. createChoices(curFlagSelector, 'choices');
  120. isObserve = true;
  121. }
  122. });
  123. NodeCreationObserver.onCreation("#qr > form > .flagSelector", (node) => {
  124. if (isObserve) {
  125. isObserve = false;
  126. createChoices(node, 'choices');
  127. isObserve = true;
  128. }
  129. });
  130.  
  131. function setBoardFlag(value) {
  132. var curBoardFlagKey = "4chan_flag_" + location.pathname.split(/\//)[1];
  133. "0" === value ? localStorage.removeItem(curBoardFlagKey) : localStorage.setItem(curBoardFlagKey, value);
  134. }
  135.  
  136. function getBoardFlag() {
  137. var curBoardFlagKey = "4chan_flag_" + location.pathname.split(/\//)[1];
  138. return localStorage.getItem(curBoardFlagKey) || "0";
  139. }
  140.  
  141. // .flagSelector
  142. })();

/mlp/ Flags All ID'S

by AnonPPP

Flag Hider (4ChanX)

by AnonPPP

Flag Filter (4ChanX)

by AnonPPP

A Joint Collection of (almost) all MD5 Image Hashes (EQG)

by AnonPPP

MLP G5 Stream Compilation

by AnonPPP