☰

Fullchan X

8chan features script

Szkript telepítése?
A szerző által javasolt szkript

Ez is érdekelhet: 8chanSS

Szkript telepítése 
  1. // ==UserScript==
  2. // @name        Fullchan X
  3. // @namespace   Violentmonkey Scripts
  4. // @match        *://8chan.moe/*
  5. // @match        *://8chan.se/*
  6. // @match        *://8chan.cc/*
  7. // @match        *://8chan.cc/*
  8. // @grant        GM.getValue
  9. // @grant        GM.setValue
  10. // @grant        GM.deleteValue
  11. // @grant        GM.listValues
  12. // @run-at      document-end
  13. // @version     1.20.27
  14. // @author      vfyxe
  15. // @description 8chan features script
  16. // ==/UserScript==
  17.  
  18. class fullChanX extends HTMLElement {
  19.   constructor() {
  20.     super();
  21.   }
  22.  
  23.   async init() {
  24.     this.settingsEl = document.querySelector('fullchan-x-settings');
  25.     this.settingsAll = this.settingsEl?.settings;
  26.  
  27.     if (!this.settingsAll) {
  28.       const savedSettings = await GM.getValue('fullchan-x-settings');
  29.       if (savedSettings) {
  30.         try {
  31.           this.settingsAll = JSON.parse(savedSettings);
  32.         } catch (error) {
  33.           console.error('Failed to parse settings from GM storage', error);
  34.           this.settingsAll = {};
  35.         }
  36.       } else {
  37.         this.settingsAll = {};
  38.       }
  39.     }
  40.  
  41.     this.settings = this.settingsAll.main || {};
  42.     this.settingsThreadBanisher = this.settingsAll.threadBanisher || {};
  43.     this.settingsMascot = this.settingsAll.mascot || {};
  44.  
  45.     this.isThread = !!document.querySelector('.opCell');
  46.     this.isDisclaimer = window.location.href.includes('disclaimer');
  47.  
  48.     Object.keys(this.settings).forEach(key => {
  49.       if (typeof this.settings[key] === 'object' && this.settings[key] !== null) {
  50.         this[key] = this.settings[key]?.value;
  51.       } else {
  52.         this[key] = this.settings[key];
  53.       }
  54.     });
  55.  
  56.     this.settingsButton = this.querySelector('#fcx-settings-btn');
  57.     this.settingsButton.addEventListener('click', () => this.settingsEl.toggle());
  58.  
  59.     this.handleBoardLinks();
  60.  
  61.     this.styleUI();
  62.  
  63.     if (!this.isThread) {
  64.       if (this.settingsThreadBanisher.enableThreadBanisher) this.banishThreads(this.settingsThreadBanisher);
  65.       return;
  66.     }
  67.  
  68.     this.quickReply = document.querySelector('#quick-reply');
  69.     this.qrbody = document.querySelector('#qrbody');
  70.     this.threadParent = document.querySelector('#divThreads');
  71.     this.threadId = this.threadParent.querySelector('.opCell').id;
  72.     this.thread = this.threadParent.querySelector('.divPosts');
  73.     this.posts = [...this.thread.querySelectorAll('.postCell')];
  74.     this.postOrder = 'default';
  75.     this.postOrderSelect = this.querySelector('#thread-sort');
  76.     this.myYousLabel = this.querySelector('.my-yous__label');
  77.     this.yousContainer = this.querySelector('#my-yous');
  78.     this.gallery = document.querySelector('fullchan-x-gallery');
  79.     this.galleryButton = this.querySelector('#fcx-gallery-btn');
  80.  
  81.     this.updateYous();
  82.     this.observers();
  83.  
  84.     if (this.enableFileExtensions) this.handleTruncatedFilenames();
  85.     if (this.settingsMascot.enableMascot) this.showMascot();
  86.  
  87.     if (this.settings.doNotShowLocation) {
  88.       const checkbox = document.getElementById('qrcheckboxNoFlag');
  89.       if (checkbox) checkbox.checked = true;
  90.       checkbox.dispatchEvent(new Event('change', { bubbles: true }));
  91.     }
  92.   }
  93.  
  94.   styleUI () {
  95.     this.style.setProperty('--top', this.uiTopPosition);
  96.     this.style.setProperty('--right', this.uiRightPosition);
  97.     this.classList.toggle('fcx-in-nav', this.moveToNav)
  98.     this.classList.toggle('fcx--dim', this.uiDimWhenInactive && !this.moveToNave);
  99.     this.classList.toggle('fcx-page-thread', this.isThread);
  100.     document.body.classList.toggle('fcx-replies-plus', this.enableEnhancedReplies);
  101.     document.body.classList.toggle('fcx-hide-delete', this.hideDeletionBox);
  102.     document.body.classList.toggle('fcx-hide-navbar', this.settings.hideNavbar);
  103.     document.body.classList.toggle('fcx-icon-replies', this.settings.enableIconBacklinks);
  104.     const style = document.createElement('style');
  105.  
  106.     if (this.hideDefaultBoards !== '' && this.hideDefaultBoards.toLowerCase() !== 'all') {
  107.       style.textContent += '#navTopBoardsSpan{display:block!important;}'
  108.     }
  109.     document.body.appendChild(style);
  110.   }
  111.  
  112.   checkRegexList(string, regexList) {
  113.     const regexObjects = regexList.map(r => {
  114.       const match = r.match(/^\/(.*)\/([gimsuy]*)$/);
  115.       return match ? new RegExp(match[1], match[2]) : null;
  116.     }).filter(Boolean);
  117.  
  118.     return regexObjects.some(regex => regex.test(string));
  119.   }
  120.  
  121.   banishThreads(banisher) {
  122.     this.threadsContainer = document.querySelector('#divThreads');
  123.     if (!this.threadsContainer) return;
  124.     this.threadsContainer.classList.add('fcx-threads');
  125.  
  126.     const currentBoard = document.querySelector('#labelBoard')?.textContent.replace(/\//g,'');
  127.     const boards = banisher.boards.value?.split(',') || [''];
  128.     if (!boards.includes(currentBoard)) return;
  129.  
  130.     const minCharacters = banisher.minimumCharacters.value || 0;
  131.     const banishTerms = banisher.banishTerms.value?.split('\n') || [];
  132.     const banishAnchored = banisher.banishAnchored.value;
  133.     const wlCyclical = banisher.whitelistCyclical.value;
  134.     const wlReplyCount = parseInt(banisher.whitelistReplyCount.value);
  135.  
  136.     const banishSorter = (thread) => {
  137.       if (thread.querySelector('.pinIndicator') || thread.classList.contains('fcx-sorted')) return;
  138.       let shouldBanish = false;
  139.  
  140.       const isAnchored = thread.querySelector('.bumpLockIndicator');
  141.       const isCyclical = thread.querySelector('.cyclicIndicator');
  142.       const replyCount = parseInt(thread.querySelector('.labelReplies')?.textContent?.trim()) || 0;
  143.       const threadSubject = thread.querySelector('.labelSubject')?.textContent?.trim() || '';
  144.       const threadMessage = thread.querySelector('.divMessage')?.textContent?.trim() || '';
  145.       const threadContent = threadSubject + ' ' + threadMessage;
  146.  
  147.       const hasMinChars = threadMessage.length > minCharacters;
  148.       const hasWlReplyCount = replyCount > wlReplyCount;
  149.  
  150.       if (!hasMinChars) shouldBanish = true;
  151.       if (isAnchored && banishAnchored) shouldBanish = true;
  152.       if (isCyclical && wlCyclical) shouldBanish = false;
  153.       if (hasWlReplyCount) shouldBanish = false;
  154.  
  155.       // run heavy regex process only if needed
  156.       if (!shouldBanish && this.checkRegexList(threadContent, banishTerms)) shouldBanish = true;
  157.       if (shouldBanish) thread.classList.add('shit-thread');
  158.       thread.classList.add('fcx-sorted');
  159.     };
  160.  
  161.     const banishThreads = () => {
  162.       this.threads = this.threadsContainer.querySelectorAll('.catalogCell');
  163.       this.threads.forEach(thread => banishSorter(thread));
  164.     };
  165.     banishThreads();
  166.  
  167.     const observer = new MutationObserver((mutationsList) => {
  168.       for (const mutation of mutationsList) {
  169.         if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
  170.           banishThreads();
  171.           break;
  172.         }
  173.       }
  174.     });
  175.  
  176.     observer.observe(this.threadsContainer, { childList: true });
  177.   }
  178.  
  179.   handleBoardLinks () {
  180.     const navBoards = document.querySelector('#navTopBoardsSpan');
  181.     const customBoardLinks = this.customBoardLinks?.toLowerCase().replace(/\s/g,'').split(',');
  182.     console.log(customBoardLinks)
  183.     let hideDefaultBoards = this.hideDefaultBoards?.toLowerCase().replace(/\s/g,'') || '';
  184.     const urlCatalog = this.catalogBoardLinks ? '/catalog.html' : '';
  185.  
  186.     if (hideDefaultBoards === 'all') {
  187.       document.body.classList.add('fcx-hide-navboard');
  188.     } else {
  189.       const waitForNavBoards = setInterval(() => {
  190.         const navBoards = document.querySelector('#navTopBoardsSpan');
  191.         if (!navBoards || !navBoards.querySelector('a')) return;
  192.  
  193.         clearInterval(waitForNavBoards);
  194.  
  195.         hideDefaultBoards = hideDefaultBoards.split(',');
  196.         const defaultLinks = [...navBoards.querySelectorAll('a')];
  197.         defaultLinks.forEach(link => {
  198.           link.href += urlCatalog;
  199.           const linkText = link.textContent;
  200.           const shouldHide = hideDefaultBoards.includes(linkText) || customBoardLinks.includes(linkText);
  201.           link.classList.toggle('fcx-hidden', shouldHide);
  202.         });
  203.       }, 50);
  204.  
  205.       if (this.customBoardLinks?.length > 0) {
  206.         const customNav = document.createElement('span');
  207.         customNav.classList = 'nav-boards nav-boards--custom';
  208.         customNav.innerHTML = '<span>[</span>';
  209.  
  210.         customBoardLinks.forEach((board, index) => {
  211.           const link = document.createElement('a');
  212.           link.href = '/' + board + urlCatalog;
  213.           link.textContent = board;
  214.           customNav.appendChild(link);
  215.           if (index < customBoardLinks.length - 1) customNav.innerHTML += '<span>/</span>';
  216.         });
  217.  
  218.         customNav.innerHTML += '<span>]</span>';
  219.         navBoards?.parentNode.insertBefore(customNav, navBoards);
  220.       }
  221.     }
  222.   }
  223.  
  224.   observers () {
  225.     this.postOrderSelect.addEventListener('change', (event) => {
  226.       this.postOrder = event.target.value;
  227.       this.assignPostOrder();
  228.     });
  229.  
  230.  
  231.     // Thread click
  232.     this.threadParent.addEventListener('click', event => this.handleClick(event));
  233.  
  234.  
  235.     // Your (You)s
  236.     const observerCallback = (mutationsList, observer) => {
  237.       for (const mutation of mutationsList) {
  238.         if (mutation.type === 'childList') {
  239.           this.posts = [...this.thread.querySelectorAll('.postCell')];
  240.           if (this.postOrder !== 'default') this.assignPostOrder();
  241.           this.updateYous();
  242.           this.gallery.updateGalleryImages();
  243.           if (this.settings.enableFileExtensions) this.handleTruncatedFilenames();
  244.         }
  245.       }
  246.     };
  247.     const threadObserver = new MutationObserver(observerCallback);
  248.     threadObserver.observe(this.thread, { childList: true, subtree: false });
  249.  
  250.  
  251.     // Gallery
  252.     this.galleryButton.addEventListener('click', () => this.gallery.open());
  253.     this.myYousLabel.addEventListener('click', (event) => {
  254.       if (this.myYousLabel.classList.contains('fcx-unseen')) {
  255.         this.yousContainer.querySelector('.fcx-unseen').click();
  256.       }
  257.     });
  258.  
  259.     if (!this.enableEnhancedReplies) return;
  260.     const setReplyLocation = (replyPreview) => {
  261.       const parent = replyPreview.parentElement;
  262.       if (!parent || (!parent.classList.contains('innerPost') && !parent.classList.contains('innerOP'))) return;
  263.       if (parent.querySelector('.postInfo .panelBacklinks').style.display === 'none') return;
  264.       const parentMessage = parent.querySelector('.divMessage');
  265.  
  266.       if (parentMessage && parentMessage.parentElement === parent) {
  267.         parentMessage.insertAdjacentElement('beforebegin', replyPreview);
  268.       }
  269.     };
  270.  
  271.     const observer = new MutationObserver(mutations => {
  272.       for (const mutation of mutations) {
  273.         for (const node of mutation.addedNodes) {
  274.           if (node.nodeType !== 1) continue;
  275.  
  276.           if (node.classList.contains('inlineQuote')) {
  277.             const replyPreview = node.closest('.replyPreview');
  278.             if (replyPreview) {
  279.                 setReplyLocation(replyPreview);
  280.             }
  281.           }
  282.         }
  283.       }
  284.     });
  285.  
  286.     if (this.threadParent) observer.observe(this.threadParent, {childList: true, subtree: true });
  287.   }
  288.  
  289.   handleClick (event) {
  290.     const clicked = event.target;
  291.     let replyLink = clicked.closest('.panelBacklinks a');
  292.     const parentPost = clicked.closest('.innerPost, .innerOP');
  293.     const closeButton = clicked.closest('.postInfo > a:first-child');
  294.     const anonId = clicked.closest('.labelId');
  295.     const addMascotButton = clicked.closest('.sizeLabel');
  296.  
  297.     if (closeButton) this.handleReplyCloseClick(closeButton, parentPost);
  298.     if (replyLink) this.handleReplyClick(replyLink, parentPost);
  299.     if (anonId && this.enableIdPostList) this.handleAnonIdClick(anonId, event);
  300.     if (addMascotButton) this.handleAddMascotClick(addMascotButton, event);
  301.   }
  302.  
  303.   handleAddMascotClick(button, event) {
  304.     event.preventDefault();
  305.     try {
  306.       const parentEl = button.closest('.uploadDetails');
  307.  
  308.       if (!parentEl) return;
  309.       const linkEl = parentEl.querySelector('.originalNameLink');
  310.       const imageUrl = linkEl.href;
  311.       const imageName = linkEl.textContent;
  312.  
  313.       this.settingsEl.addMascotFromPost(imageUrl, imageName, button);
  314.     } catch (error) {
  315.       console.log(error);
  316.     }
  317.   }
  318.  
  319.   handleReplyCloseClick(closeButton, parentPost) {
  320.     const replyLink = document.querySelector(`[data-close-id="${closeButton.id}"]`);
  321.     if (!replyLink) return;
  322.     const linkParent = replyLink.closest('.innerPost, .innerOP');
  323.     this.handleReplyClick(replyLink, linkParent);
  324.   }
  325.  
  326.   handleReplyClick(replyLink, parentPost) {
  327.     replyLink.classList.toggle('fcx-active');
  328.     let replyColor = replyLink.dataset.color;
  329.     const replyId = replyLink.href.split('#').pop();
  330.     let replyPost = false;
  331.     let labelId = false;
  332.  
  333.     const randomNum = () => `${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`
  334.  
  335.     if (!replyColor) {
  336.       replyPost = document.querySelector(`#${CSS.escape(replyId)}`);
  337.       labelId = replyPost?.querySelector('.labelId');
  338.       replyColor = labelId?.textContent || randomNum();
  339.       if (labelId) replyLink.dataset.hasId = true;
  340.     }
  341.  
  342.     const linkQuote = [...parentPost.querySelectorAll('.replyPreview .linkQuote')]
  343.         .find(link => link.textContent === replyId);
  344.     if (!labelId && !replyLink.dataset.hasId) {
  345.       linkQuote.style = `--active-color: #${replyColor};`;
  346.       linkQuote.classList.add('fcx-active-color');
  347.     }
  348.  
  349.     const closeId = randomNum();
  350.     const closeButton = linkQuote?.closest('.innerPost').querySelector('.postInfo > a:first-child');
  351.     if (closeButton) closeButton.id = closeId;
  352.  
  353.     replyLink.style = `--active-color: #${replyColor};`;
  354.     replyLink.dataset.color = `${replyColor}`;
  355.     replyLink.dataset.closeId = closeId;
  356.   }
  357.  
  358.   handleAnonIdClick (anonId, event) {
  359.     this.anonIdPosts?.remove();
  360.     if (anonId === this.anonId) {
  361.       this.anonId = null;
  362.       return;
  363.     }
  364.  
  365.     this.anonId = anonId;
  366.     const anonIdText = anonId.textContent.split(' ')[0];
  367.     this.anonIdPosts = document.createElement('div');
  368.     this.anonIdPosts.classList = 'fcx-id-posts fcx-prevent-nesting';
  369.  
  370.     const match = window.location.pathname.match(/^\/[^/]+\/res\/\d+\.html/);
  371.     const prepend = match ? `${match[0]}#` : '';
  372.  
  373.     const selector = `.postInfo:has(.labelId[style="background-color: #${anonIdText}"]) .linkQuote`;
  374.  
  375.     const postIds = [...this.threadParent.querySelectorAll(selector)].map(link => {
  376.       const postId = link.getAttribute('href').split('#q').pop();
  377.       const newLink = document.createElement('a');
  378.       newLink.className = 'quoteLink';
  379.       newLink.href = prepend + postId;
  380.       newLink.textContent = `>>${postId}`;
  381.       return newLink;
  382.     });
  383.  
  384.     postIds.forEach(postId => this.anonIdPosts.appendChild(postId));
  385.     anonId.insertAdjacentElement('afterend', this.anonIdPosts);
  386.  
  387.     this.setPostListeners(this.anonIdPosts);
  388.   }
  389.  
  390.   setPostListeners(parentPost) {
  391.     const postLinks = [...parentPost.querySelectorAll('.quoteLink')];
  392.  
  393.     const hoverPost = (event, link) => {
  394.       const quoteId = link.href.split('#')[1];
  395.  
  396.       let existingPost = document.querySelector(`.nestedPost[data-quote-id="${quoteId}"]`)
  397.         || link.closest(`.postCell[id="${quoteId}"]`);
  398.  
  399.       if (existingPost) {
  400.         this.markedPost = existingPost.querySelector('.innerPost') || existingPost.querySelector('.innerOP');
  401.         this.markedPost?.classList.add('markedPost');
  402.         return;
  403.       }
  404.  
  405.       const quotePost = document.getElementById(quoteId);
  406.  
  407.       tooltips.removeIfExists();
  408.  
  409.       const tooltip = document.createElement('div');
  410.       tooltip.className = 'quoteTooltip';
  411.       document.body.appendChild(tooltip);
  412.  
  413.       const rect = link.getBoundingClientRect();
  414.       if (!api.mobile) {
  415.         if (rect.left > window.innerWidth / 2) {
  416.           const right = window.innerWidth - rect.left - window.scrollX;
  417.           tooltip.style.right = `${right}px`;
  418.         } else {
  419.           const left = rect.right + 10 + window.scrollX;
  420.           tooltip.style.left = `${left}px`;
  421.         }
  422.       }
  423.  
  424.       tooltip.style.top = `${rect.top + window.scrollY}px`;
  425.       tooltip.style.display = 'inline';
  426.  
  427.       tooltips.loadTooltip(tooltip, link.href, quoteId);
  428.       tooltips.currentTooltip = tooltip;
  429.     }
  430.  
  431.     const unHoverPost = (event, link) => {
  432.       if (!tooltips.currentTooltip) {
  433.         this.markedPost?.classList.remove('markedPost');
  434.         return false;
  435.       }
  436.  
  437.       if (tooltips.unmarkReply) {
  438.         tooltips.currentTooltip.classList.remove('markedPost');
  439.         Array.from(tooltips.currentTooltip.getElementsByClassName('replyUnderline'))
  440.           .forEach((a) => a.classList.remove('replyUnderline'))
  441.         tooltips.unmarkReply = false;
  442.       } else {
  443.         tooltips.currentTooltip.remove();
  444.       }
  445.  
  446.       tooltips.currentTooltip = null;
  447.     }
  448.  
  449.     const addHoverPost = (link => {
  450.       link.addEventListener('mouseenter', (event) => hoverPost(event, link));
  451.       link.addEventListener('mouseleave', (event) => unHoverPost(event, link));
  452.     });
  453.  
  454.     postLinks.forEach(link => addHoverPost(link));
  455.   }
  456.  
  457.   handleTruncatedFilenames () {
  458.     this.postFileNames = [...this.threadParent.querySelectorAll('.originalNameLink[download]:not([data-file-ext])')];
  459.     this.postFileNames.forEach(fileName => {
  460.       if (!fileName.textContent.includes('.')) return;
  461.       const strings = fileName.textContent.split('.');
  462.       const typeStr =  `.${strings.pop()}`;
  463.       const typeEl = document.createElement('a');
  464.       typeEl.classList = ('file-ext originalNameLink');
  465.       typeEl.textContent = typeStr;
  466.       fileName.dataset.fileExt = typeStr;
  467.       fileName.textContent = strings.join('.');
  468.       fileName.parentNode.insertBefore(typeEl, fileName.nextSibling);
  469.     });
  470.   }
  471.  
  472.   assignPostOrder () {
  473.     const postOrderReplies = (post) => {
  474.       const replyCount = post.querySelectorAll('.panelBacklinks a').length;
  475.       post.style.order = 100 - replyCount;
  476.     }
  477.  
  478.     const postOrderCatbox = (post) => {
  479.       const postContent = post.querySelector('.divMessage').textContent;
  480.       const matches = postContent.match(/catbox\.moe/g);
  481.       const catboxCount = matches ? matches.length : 0;
  482.       post.style.order = 100 - catboxCount;
  483.     }
  484.  
  485.     if (this.postOrder === 'default') {
  486.       this.thread.style.display = 'block';
  487.       return;
  488.     }
  489.  
  490.     this.thread.style.display = 'flex';
  491.  
  492.     if (this.postOrder === 'replies') {
  493.       this.posts.forEach(post => postOrderReplies(post));
  494.     } else if (this.postOrder === 'catbox') {
  495.       this.posts.forEach(post => postOrderCatbox(post));
  496.     }
  497.   }
  498.  
  499.   updateYous () {
  500.     this.yous = this.posts.filter(post => post.querySelector('.quoteLink.you'));
  501.     this.yousLinks = this.yous.map(you => {
  502.       const youLink = document.createElement('a');
  503.       youLink.textContent = '>>' + you.id;
  504.       youLink.href = '#' + you.id;
  505.       return youLink;
  506.     })
  507.  
  508.     let hasUnseenYous = false;
  509.     this.setUnseenYous();
  510.  
  511.     this.yousContainer.innerHTML = '';
  512.     this.yousLinks.forEach(you => {
  513.       const youId = you.textContent.replace('>>', '');
  514.       if (!this.seenYous.includes(youId)) {
  515.         you.classList.add('fcx-unseen');
  516.         hasUnseenYous = true
  517.       }
  518.       this.yousContainer.appendChild(you)
  519.     });
  520.  
  521.     this.myYousLabel.classList.toggle('fcx-unseen', hasUnseenYous);
  522.  
  523.     if (this.replyTabIcon === '') return;
  524.     const icon = this.replyTabIcon;
  525.     document.title = hasUnseenYous
  526.       ? document.title.startsWith(`${icon} `)
  527.         ? document.title
  528.         : `${icon} ${document.title}`
  529.       : document.title.replace(new RegExp(`^${icon} `), '');
  530.   }
  531.  
  532.   observeUnseenYou(you) {
  533.     you.classList.add('fcx-observe-you');
  534.  
  535.     const observer = new IntersectionObserver((entries, observer) => {
  536.       entries.forEach(entry => {
  537.         if (entry.isIntersecting) {
  538.           const id = you.id;
  539.           you.classList.remove('fcx-observe-you');
  540.  
  541.           if (!this.seenYous.includes(id)) {
  542.             this.seenYous.push(id);
  543.             localStorage.setItem(this.seenKey, JSON.stringify(this.seenYous));
  544.           }
  545.  
  546.           observer.unobserve(you);
  547.           this.updateYous();
  548.  
  549.         }
  550.       });
  551.     }, { rootMargin: '0px', threshold: 0.001 });
  552.  
  553.     observer.observe(you);
  554.   }
  555.  
  556.   setUnseenYous() {
  557.     this.seenKey = `${this.threadId}-seen-yous`;
  558.     this.seenYous = JSON.parse(localStorage.getItem(this.seenKey));
  559.  
  560.     if (!this.seenYous) {
  561.       this.seenYous = [];
  562.       localStorage.setItem(this.seenKey, JSON.stringify(this.seenYous));
  563.     }
  564.  
  565.     this.unseenYous = this.yous.filter(you => !this.seenYous.includes(you.id));
  566.  
  567.     this.unseenYous.forEach(you => {
  568.       if (!you.classList.contains('fcx-observe-you')) {
  569.         this.observeUnseenYou(you);
  570.       }
  571.     });
  572.   }
  573.  
  574.   showMascot(mascotData) {
  575.     let mascot = null;
  576.  
  577.     if (mascotData) {
  578.       mascot = mascotData;
  579.     } else {
  580.       const mascotList = this.settingsEl?.savedMascots
  581.         .filter(mascot => mascot.enabled);
  582.       if (!mascotList || mascotList.length === 0) return;
  583.       mascot = mascotList[Math.floor(Math.random() * mascotList.length)];
  584.     }
  585.  
  586.     if (!mascot.image) return;
  587.  
  588.     if (!this.mascotEl) {
  589.       this.mascotEl = document.createElement('img');
  590.       this.mascotEl.classList.add('fcx-mascot');
  591.       document.body.appendChild(this.mascotEl);
  592.     }
  593.  
  594.     this.mascotEl.style = "";
  595.     this.mascotEl.src = mascot.image;
  596.     this.mascotEl.style.opacity = this.settingsMascot.opacity * 0.01;
  597.  
  598.     if (mascot.top) this.mascotEl.style.top = mascot.top;
  599.     if (mascot.left) this.mascotEl.style.left = mascot.left;
  600.     if (mascot.right) this.mascotEl.style.right = mascot.right;
  601.     if (mascot.bottom) this.mascotEl.style.bottom = mascot.bottom;
  602.  
  603.     if (mascot.width) this.mascotEl.style.width = mascot.width;
  604.     if (mascot.height) this.mascotEl.style.height = mascot.height;
  605.     if (mascot.flipImage) this.mascotEl.style.transform = 'scaleX(-1)';
  606.   }
  607. };
  608.  
  609. window.customElements.define('fullchan-x', fullChanX);
  610.  
  611.  
  612. class fullChanXSettings extends HTMLElement {
  613.   constructor() {
  614.     super();
  615.     this.settingsKey = 'fullchan-x-settings';
  616.     this.mascotKey = 'fullchan-x-mascots';
  617.     this.inputs = [];
  618.     this.settings = {};
  619.     this.settingsTemplate = {
  620.       main: {
  621.         moveToNav: {
  622.           info: 'Move Fullchan-X controls into the navbar.',
  623.           type: 'checkbox',
  624.           value: true
  625.         },
  626.         enableEnhancedReplies: {
  627.           info: "Enhances 8chan's native reply post previews.<p>Inline replies are now a <b>native feature</b> of 8chan, remember to enable them.</p>",
  628.           type: 'checkbox',
  629.           value: true
  630.         },
  631.         enableIconBacklinks: {
  632.           info: "Display reply backlinks as icons.",
  633.           type: 'checkbox',
  634.           value: false
  635.         },
  636.         hideDeletionBox: {
  637.           info: "Not much point in seeing this if you're not an mod.",
  638.           type: 'checkbox',
  639.           value: false
  640.         },
  641.         enableIdPostList: {
  642.           info: "Show list of posts when clicking an ID.",
  643.           type: 'checkbox',
  644.           value: true
  645.         },
  646.         doNotShowLocation: {
  647.           info: "Board with location option will be set to false by default.",
  648.           type: 'checkbox',
  649.           value: false
  650.         },
  651.         enableFileExtensions: {
  652.           info: 'Always show filetype on shortened file names.',
  653.           type: 'checkbox',
  654.           value: true
  655.         },
  656.         customBoardLinks: {
  657.           info: 'List of custom boards in nav (seperate by comma)',
  658.           type: 'input',
  659.           value: 'v,a,b'
  660.         },
  661.         hideDefaultBoards: {
  662.           info: 'List of boards to remove from nav (seperate by comma). Set as "all" to remove all.',
  663.           type: 'input',
  664.           value: 'interracial,mlp'
  665.         },
  666.         catalogBoardLinks: {
  667.           info: 'Redirect nav board links to catalog pages.',
  668.           type: 'checkbox',
  669.           value: true
  670.         },
  671.         uiTopPosition: {
  672.           info: 'Position from top of screen e.g. 100px',
  673.           type: 'input',
  674.           value: '50px'
  675.         },
  676.         uiRightPosition: {
  677.           info: 'Position from right of screen e.g. 100px',
  678.           type: 'input',
  679.           value: '25px'
  680.         },
  681.         uiDimWhenInactive: {
  682.           info: 'Dim UI when not hovering with mouse.',
  683.           type: 'checkbox',
  684.           value: true
  685.         },
  686.         hideNavbar: {
  687.           info: 'Hide navbar until hover.',
  688.           type: 'checkbox',
  689.           value: false
  690.         },
  691.         replyTabIcon: {
  692.           info: 'Set the icon/text added to tab title when you get a new (You).',
  693.           type: 'input',
  694.           value: '❗'
  695.         }
  696.       },
  697.       mascot: {
  698.         enableMascot: {
  699.           info: 'Enable mascot image.',
  700.           type: 'checkbox',
  701.           value: false
  702.         },
  703.         enableMascotAddButtons: {
  704.           info: 'Add mascots-add button to post images.',
  705.           type: 'checkbox',
  706.           value: true
  707.         },
  708.         opacity: {
  709.           info: 'Opacity (1 to 100)',
  710.           type: 'input',
  711.           inputType: 'number',
  712.           value: '75'
  713.         }
  714.       },
  715.       mascotImage: {
  716.         id: {
  717.           type: 'input',
  718.           value: '',
  719.         },
  720.         enabled: {
  721.           info: 'Enable this mascot.',
  722.           type: 'checkbox',
  723.           value: true
  724.         },
  725.         name: {
  726.           info: 'Descriptive name',
  727.           type: 'input',
  728.           value: 'New Mascot'
  729.         },
  730.         image: {
  731.           info: 'Image URL (8chan image recommended).',
  732.           type: 'input',
  733.           value: '/.static/logo.png'
  734.         },
  735.         flipImage: {
  736.           info: 'Mirror the mascot image.',
  737.           type: 'checkbox',
  738.           value: false
  739.         },
  740.         width: {
  741.           info: 'Width of image.',
  742.           type: 'input',
  743.           value: '300px'
  744.         },
  745.         height: {
  746.           info: 'Height of image.',
  747.           type: 'input',
  748.           value: 'auto'
  749.         },
  750.         bottom: {
  751.           info: 'Bottom position.',
  752.           type: 'input',
  753.           value: '0px'
  754.         },
  755.         right: {
  756.           info: 'Right position.',
  757.           type: 'input',
  758.           value: '0px'
  759.         },
  760.         top: {
  761.           info: 'Top position.',
  762.           type: 'input',
  763.           value: ''
  764.         },
  765.         left: {
  766.           info: 'Left position.',
  767.           type: 'input',
  768.           value: ''
  769.         }
  770.       },
  771.       threadBanisher: {
  772.         enableThreadBanisher: {
  773.           info: 'Banish shit threads to the bottom of the calalog.',
  774.           type: 'checkbox',
  775.           value: true
  776.         },
  777.         boards: {
  778.           info: 'Banish theads on these boards (seperated by comma).',
  779.           type: 'input',
  780.           value: 'v,a'
  781.         },
  782.         minimumCharacters: {
  783.           info: 'Minimum character requirements',
  784.           type: 'input',
  785.           inputType: 'number',
  786.           value: 100
  787.         },
  788.         banishTerms: {
  789.           info: `<p>Banish threads with these terms to the bottom of the catalog (new line per term).</p>
  790.                 <p>How to use regex: <a href="https://www.datacamp.com/cheat-sheet/regular-expresso" target="__blank">Regex Cheatsheet</a>.</p>
  791.                 <p>NOTE: word breaks (\\b) MUST be entered as double escapes (\\\\b), they will appear as (\\b) when saved.</p>
  792.           `,
  793.           type: 'textarea',
  794.           value: '/\\bcuck\\b/i\n/\\bchud\\b/i\n/\\bblacked\\b/i\n/\\bnormie\\b/i\n/\\bincel\\b/i\n/\\btranny\\b/i\n/\\bslop\\b/i\n'
  795.         },
  796.         whitelistCyclical: {
  797.           info: 'Whitelist cyclical threads.',
  798.           type: 'checkbox',
  799.           value: true
  800.         },
  801.         banishAnchored: {
  802.           info: 'Banish anchored threads that are under minimum reply count.',
  803.           type: 'checkbox',
  804.           value: true
  805.         },
  806.         whitelistReplyCount: {
  807.           info: 'Threads above this reply count (excluding those with banish terms) will be whitelisted.',
  808.           type: 'input',
  809.           inputType: 'number',
  810.           value: 100
  811.         },
  812.       },
  813.       defaultMascot: {
  814.         enabled: true,
  815.         id: '',
  816.         name: 'New Mascot',
  817.         image: '/.static/logo.png',
  818.         flipImage: false,
  819.         width: '300px',
  820.         height: 'auto',
  821.         bottom: '0px',
  822.         right: '0px',
  823.         top: '',
  824.         left: '',
  825.       }
  826.     };
  827.   }
  828.  
  829.   async init() {
  830.     this.fcx = document.querySelector('fullchan-x');
  831.     this.settingsMainEl = this.querySelector('.fcxs-main');
  832.     this.settingsThreadBanisherEl = this.querySelector('.fcxs-thread-banisher');
  833.     this.settingsMascotEl = this.querySelector('.fcxs-mascot-settings');
  834.     this.mascotListEl = this.querySelector('.fcxs-mascot-list');
  835.     this.mascotSettingsTemplate = {...this.settingsTemplate.mascotImage};
  836.     this.currentMascotSettings = {...this.settingsTemplate.defaultMascot};
  837.  
  838.     this.addMascotEl = this.querySelector('.fcxs-add-mascot-settings');
  839.     this.saveMascotButton = this.querySelector('.fcxs-save-mascot');
  840.  
  841.     await this.getSavedSettings();
  842.     await this.getSavedMascots();
  843.  
  844.     if (this.settings.main) {
  845.       this.fcx.init();
  846.       this.loaded = true;
  847.     };
  848.  
  849.     this.buildSettingsOptions('main', 'settings', this.settingsMainEl);
  850.     this.buildSettingsOptions('threadBanisher', 'settings', this.settingsThreadBanisherEl);
  851.     this.buildSettingsOptions('mascot', 'settings', this.settingsMascotEl);
  852.     this.buildSettingsOptions('mascotImage', 'mascotSettingsTemplate', this.addMascotEl);
  853.  
  854.     this.listeners();
  855.     this.querySelector('.fcx-settings__close').addEventListener('click', () => this.close());
  856.  
  857.     document.body.classList.toggle('fcx-add-mascot-button', this.settings.mascot.enableMascotAddButtons);
  858.  
  859.     if (!this.loaded) this.fcx.init();
  860.   }
  861.  
  862.   getRandomId () {
  863.     return `id${Math.random().toString(36).substring(2, 8)}`;
  864.   }
  865.  
  866.   async setSavedSettings(settingsKey, status) {
  867.     console.log("SAVING", this.settings);
  868.     await GM.setValue(settingsKey, JSON.stringify(this.settings));
  869.     if (status === 'updated') this.classList.add('fcxs-updated');
  870.   }
  871.  
  872.   async getSavedSettings() {
  873.     let saved = JSON.parse(await GM.getValue(this.settingsKey, 'null'));
  874.  
  875.     if (!saved) {
  876.       const localSaved = JSON.parse(localStorage.getItem(this.settingsKey));
  877.       if (localSaved) {
  878.         saved = localSaved;
  879.         await GM.setValue(this.settingsKey, JSON.stringify(saved));
  880.         localStorage.removeItem(this.settingsKey);
  881.         console.log('[Fullchan-X] Migrated settings from localStorage to GM storage.');
  882.       }
  883.     }
  884.  
  885.     if (!saved) return;
  886.  
  887.     let migrated = false;
  888.     for (const [sectionKey, sectionTemplate] of Object.entries(this.settingsTemplate)) {
  889.       if (!saved[sectionKey]) {
  890.         saved[sectionKey] = {};
  891.       }
  892.       for (const [key, defaultConfig] of Object.entries(sectionTemplate)) {
  893.         if (saved[sectionKey][key] && typeof saved[sectionKey][key] === 'object' && 'value' in saved[sectionKey][key]) {
  894.           // Old format detected, migrating it
  895.           saved[sectionKey][key] = saved[sectionKey][key].value;
  896.           migrated = true;
  897.         }
  898.       }
  899.     }
  900.  
  901.     this.settings = saved;
  902.     if (migrated) {
  903.       console.log('[Fullchan-X] Migrated old settings to new format.');
  904.       this.setSavedSettings(this.settingsKey, 'migrated');
  905.     }
  906.  
  907.     console.log('SAVED SETTINGS:', this.settings)
  908.   }
  909.  
  910.   async updateSavedMascot(mascot, status = 'updated') {
  911.     const index = this.savedMascots.findIndex(objectMascot => objectMascot.id === mascot.id);
  912.     if (index !== -1) {
  913.       this.savedMascots[index] = mascot;
  914.     } else {
  915.       this.savedMascots.push(mascot);
  916.     }
  917.     await GM.setValue(this.mascotKey, JSON.stringify(this.savedMascots));
  918.     this.classList.add(`fcxs-mascot-${status}`);
  919.   }
  920.  
  921.   async getSavedMascots() {
  922.     let savedMascots = JSON.parse(await GM.getValue(this.mascotKey, 'null'));
  923.  
  924.     if (!savedMascots) {
  925.       const localSaved = JSON.parse(localStorage.getItem(this.mascotKey));
  926.       if (localSaved) {
  927.         savedMascots = localSaved;
  928.         await GM.setValue(this.mascotKey, JSON.stringify(savedMascots));
  929.         localStorage.removeItem(this.mascotKey);
  930.         console.log('[Fullchan-X] Migrated mascots from localStorage to GM storage.');
  931.       }
  932.     }
  933.  
  934.     if (!(savedMascots?.length > 0)) {
  935.       savedMascots = [
  936.         {
  937.           ...this.settingsTemplate.defaultMascot,
  938.          name: 'Vivian',
  939.          id: 'id0',
  940.          image: '/.media/4283cdb87bc82b2617509306c6a50bd9d6d015f727f931fb4969b499508e2e7e.webp'
  941.         }
  942.       ];
  943.     }
  944.  
  945.     this.savedMascots = savedMascots;
  946.     this.savedMascots.forEach(mascot => this.addMascotCard(mascot));
  947.   }
  948.  
  949.   addMascotCard(mascot, replaceId) {
  950.     const card = document.createElement('div');
  951.     card.classList = `fcxs-mascot-card${mascot.enabled?'':' fcxs-mascot-card--disabled'}`;
  952.     card.id = mascot.id;
  953.     card.innerHTML = `
  954.       <img src="${mascot.image}" loading="lazy">
  955.       <div class="fcxs-mascot-card__name">
  956.         <span>${mascot.name}</span>
  957.       </div>
  958.       <div class="fcxs-mascot-card__buttons">
  959.         <button class="fcxs-mascot-card__button" name="edit">Edit</button>
  960.         <button class="fcxs-mascot-card__button" name="delete">Delete</button>
  961.       </div>
  962.     `;
  963.     if (replaceId) {
  964.       const oldCard = this.mascotListEl.querySelector(`#${replaceId}`);
  965.       if (oldCard) {
  966.         this.mascotListEl.replaceChild(card, oldCard);
  967.         return;
  968.       }
  969.     }
  970.     this.mascotListEl.appendChild(card);
  971.   }
  972.  
  973.   addMascotFromPost(imageUrl, imageName, fakeButtonEl) {
  974.     const acceptedTypes = ['jpeg', 'jpg', 'gif', 'png', 'webp'];
  975.     const noneTransparentTypes = ['jpeg', 'jpg'];
  976.     const fileType = imageUrl.split('.').pop().toLowerCase();
  977.  
  978.     if (!acceptedTypes.includes(fileType)) {
  979.       window.alert('This file type cannot be used as a mascot.');
  980.       return;
  981.     }
  982.  
  983.     try {
  984.       const mascotUrl = imageUrl.includes('/.media/')
  985.         ? '/.media/' + imageUrl.split('/.media/')[1]
  986.         : imageUrl;
  987.  
  988.       this.currentMascotSettings = {
  989.         ...this.settingsTemplate.defaultMascot,
  990.         image: mascotUrl,
  991.         name: imageName
  992.       };
  993.  
  994.       this.handleSaveMascot();
  995.       fakeButtonEl.classList.add('mascotAdded');
  996.  
  997.       if (noneTransparentTypes.includes(fileType)) {
  998.         window.alert('Mascot added, but this file type does not support transparency.');
  999.       }
  1000.     } catch (error) {
  1001.       console.error('Error adding mascot:', error);
  1002.       window.alert('Failed to add mascot. Please try again.');
  1003.     }
  1004.   }
  1005.  
  1006.   async handleSaveMascot(event) {
  1007.     const mascot = { ...this.currentMascotSettings };
  1008.     if (!mascot.id) mascot.id = this.getRandomId();
  1009.     const index = this.savedMascots.findIndex(m => m.id === mascot.id);
  1010.  
  1011.     if (index !== -1) {
  1012.       this.savedMascots[index] = mascot;
  1013.       this.addMascotCard(mascot, mascot.id);
  1014.     } else {
  1015.       this.savedMascots.push(mascot);
  1016.       this.addMascotCard(mascot);
  1017.     }
  1018.  
  1019.     await GM.setValue(this.mascotKey, JSON.stringify(this.savedMascots));
  1020.     this.classList.remove('fcxs--mascot-modal');
  1021.   }
  1022.  
  1023.   async handleMascotClick(clicked, event) {
  1024.     const mascotEl = clicked.closest('.fcxs-mascot-card');
  1025.     if (!mascotEl) return;
  1026.     const mascotId = mascotEl.id;
  1027.     const mascot = this.savedMascots.find(m => m.id === mascotId);
  1028.     const button = clicked.closest('.fcxs-mascot-card__button');
  1029.     const mascotTitle = clicked.closest('.fcxs-mascot-card__name');
  1030.     const mascotImg = clicked.closest('img');
  1031.  
  1032.     if (mascotTitle) {
  1033.       this.fcx.showMascot(mascot);
  1034.     } else if (mascotImg) {
  1035.       const updatedMascot = {...mascot, enabled: !mascot.enabled}
  1036.       this.currentMascotSettings = {...updatedMascot};
  1037.       this.handleSaveMascot();
  1038.       this.addMascotCard(updatedMascot, mascotId);
  1039.     } else if (button) {
  1040.       const buttonType = button.name;
  1041.       if (buttonType === 'delete') {
  1042.         this.savedMascots = this.savedMascots.filter(m => m.id !== mascotId);
  1043.         await GM.setValue(this.mascotKey, JSON.stringify(this.savedMascots));
  1044.         mascotEl.remove();
  1045.       } else if (buttonType === 'edit') {
  1046.         if (!mascot) return;
  1047.         this.classList.add('fcxs--mascot-modal');
  1048.         this.saveMascotButton.disabled = true;
  1049.         this.currentMascotSettings = {...mascot}
  1050.         for (const key of Object.keys(this.currentMascotSettings)) {
  1051.           if (mascot[key] !== undefined) {
  1052.             const input = this.addMascotEl.querySelector(`[name="${key}"]`);
  1053.             if (input) {
  1054.               if (input.type === 'checkbox') {
  1055.                 input.checked = mascot[key];
  1056.               } else {
  1057.                 input.value = mascot[key];
  1058.               }
  1059.             }
  1060.           }
  1061.         }
  1062.       }
  1063.     }
  1064.   }
  1065.  
  1066.   handleClick(event) {
  1067.     const clicked = event.target;
  1068.     if (clicked.closest('.fcxs-mascot-card')) this.handleMascotClick(clicked, event);
  1069.     if (clicked.closest('.fcxs-close-mascot')) this.classList.remove('fcxs--mascot-modal');
  1070.  
  1071.     if (clicked.closest('.fcxs-mascot__new')) {
  1072.       this.currentMascotSettings = {...this.settingsTemplate.defaultMascot};
  1073.       const mascot = this.currentMascotSettings;
  1074.       for (const key of Object.keys(this.currentMascotSettings)) {
  1075.         if (mascot[key] !== undefined) {
  1076.           const input = this.addMascotEl.querySelector(`[name="${key}"]`);
  1077.           if (input) {
  1078.             if (input.type === 'checkbox') {
  1079.               input.checked = mascot[key];
  1080.             } else {
  1081.               input.value = mascot[key];
  1082.             }
  1083.           }
  1084.         }
  1085.         this.classList.add('fcxs--mascot-modal');
  1086.         this.saveMascotButton.disabled = true;
  1087.       }
  1088.     }
  1089.   }
  1090.  
  1091.   listeners() {
  1092.     this.saveMascotButton.addEventListener('click', event => this.handleSaveMascot(event));
  1093.     this.addEventListener('click', event => this.handleClick(event));
  1094.  
  1095.     this.inputs.forEach(input => {
  1096.       input.addEventListener('change', () => {
  1097.         const settingsKey = input.dataset.settingsKey;
  1098.         if (settingsKey === 'mascotImage') {
  1099.           const value = input.type === 'checkbox' ? input.checked : input.value;
  1100.           this.currentMascotSettings[input.name] = value;
  1101.           this.saveMascotButton.disabled = false;
  1102.           this.fcx.showMascot(this.currentMascotSettings);
  1103.           return;
  1104.         }
  1105.  
  1106.         const settingsObject = this.settings[settingsKey];
  1107.         const key = input.name;
  1108.         const value = input.type === 'checkbox' ? input.checked : input.value;
  1109.  
  1110.         settingsObject[key] = value;
  1111.         this.setSavedSettings(this.settingsKey, 'updated');
  1112.       });
  1113.     });
  1114.   }
  1115.  
  1116.   buildSettingsOptions(settingsKey, parentKey, parent) {
  1117.     if (!parent) return;
  1118.  
  1119.     if (!this[parentKey][settingsKey]) this[parentKey][settingsKey] = {...this.settingsTemplate[settingsKey]};
  1120.     const settingsObject = this[parentKey][settingsKey];
  1121.  
  1122.     Object.entries(this.settingsTemplate[settingsKey]).forEach(([key, config]) => {
  1123.  
  1124.       if (typeof settingsObject[key] === 'undefined') {
  1125.         settingsObject[key] = config.value ?? ''; // God fucking damn the hell that not having this caused me. Yes, I am retarded.
  1126.       }
  1127.  
  1128.       const wrapper = document.createElement('div');
  1129.       const infoWrapper = document.createElement('div');
  1130.       wrapper.classList = (`fcx-setting fcx-setting--${key}`);
  1131.       infoWrapper.classList.add('fcx-setting__info');
  1132.       wrapper.appendChild(infoWrapper);
  1133.  
  1134.       const label = document.createElement('label');
  1135.       label.textContent = key
  1136.         .replace(/([A-Z])/g, ' $1')
  1137.         .replace(/^./, str => str.toUpperCase());
  1138.       label.setAttribute('for', key);
  1139.       infoWrapper.appendChild(label);
  1140.  
  1141.       if (config.info) {
  1142.         const info = document.createElement('p');
  1143.         info.innerHTML = config.info;
  1144.         infoWrapper.appendChild(info);
  1145.       }
  1146.  
  1147.       let savedValue = settingsObject[key].value ?? settingsObject[key] ?? config.value;
  1148.       if (settingsObject[key]?.value) savedValue = settingsObject[key].value;
  1149.  
  1150.       let input;
  1151.  
  1152.       if (config.type === 'checkbox') {
  1153.         input = document.createElement('input');
  1154.         input.type = 'checkbox';
  1155.         input.checked = savedValue;
  1156.       } else if (config.type === 'textarea') {
  1157.         input = document.createElement('textarea');
  1158.         input.value = savedValue;
  1159.       } else if (config.type === 'input') {
  1160.         input = document.createElement('input');
  1161.         input.type = config.inputType || 'text';
  1162.         input.value = savedValue;
  1163.       } else if (config.type === 'select' && config.options) {
  1164.         input = document.createElement('select');
  1165.         const options = config.options.split(',');
  1166.         options.forEach(opt => {
  1167.           const option = document.createElement('option');
  1168.           option.value = opt;
  1169.           option.textContent = opt;
  1170.           if (opt === savedValue) option.selected = true;
  1171.           input.appendChild(option);
  1172.         });
  1173.       }
  1174.  
  1175.       if (input) {
  1176.         input.id = key;
  1177.         input.name = key;
  1178.         input.dataset.settingsKey = settingsKey;
  1179.         wrapper.appendChild(input);
  1180.         this.inputs.push(input);
  1181.         settingsObject[key] = input.type === 'checkbox' ? input.checked : input.value;
  1182.       }
  1183.  
  1184.       parent.appendChild(wrapper);
  1185.     });
  1186.   }
  1187.  
  1188.   open() {
  1189.     this.classList.add('open');
  1190.   }
  1191.  
  1192.   close() {
  1193.     this.classList.remove('open');
  1194.   }
  1195.  
  1196.   toggle() {
  1197.     this.classList.toggle('open');
  1198.   }
  1199. }
  1200.  
  1201. window.customElements.define('fullchan-x-settings', fullChanXSettings);
  1202.  
  1203.  
  1204. class fullChanXGallery extends HTMLElement {
  1205.   constructor() {
  1206.     super();
  1207.   }
  1208.  
  1209.   init() {
  1210.     this.fullchanX = document.querySelector('fullchan-x');
  1211.     this.imageContainer = this.querySelector('.gallery__images');
  1212.     this.mainImageContainer = this.querySelector('.gallery__main-image');
  1213.     this.mainImage = this.mainImageContainer.querySelector('img');
  1214.     this.sizeButtons = [...this.querySelectorAll('.gallery__scale-options .scale-option')];
  1215.     this.closeButton = this.querySelector('.gallery__close');
  1216.     this.listeners();
  1217.     this.addGalleryImages();
  1218.     this.initalized = true;
  1219.   }
  1220.  
  1221.   addGalleryImages () {
  1222.     this.thumbs = [...this.fullchanX.threadParent.querySelectorAll('.imgLink')].map(thumb => {
  1223.       return thumb.cloneNode(true);
  1224.     });
  1225.  
  1226.     this.thumbs.forEach(thumb => {
  1227.       this.imageContainer.appendChild(thumb);
  1228.     });
  1229.   }
  1230.  
  1231.   updateGalleryImages () {
  1232.     if (!this.initalized) return;
  1233.  
  1234.     const newThumbs = [...this.fullchanX.threadParent.querySelectorAll('.imgLink')].filter(thumb => {
  1235.       return !this.thumbs.find(thisThumb.href === thumb.href);
  1236.     }).map(thumb => {
  1237.       return thumb.cloneNode(true);
  1238.     });
  1239.  
  1240.     newThumbs.forEach(thumb => {
  1241.       this.thumbs.push(thumb);
  1242.       this.imageContainer.appendChild(thumb);
  1243.     });
  1244.   }
  1245.  
  1246.   listeners () {
  1247.     this.addEventListener('click', event => {
  1248.       const clicked = event.target;
  1249.  
  1250.       let imgLink = clicked.closest('.imgLink');
  1251.       if (imgLink?.dataset.filemime === 'video/webm') return;
  1252.  
  1253.       if (imgLink) {
  1254.         event.preventDefault();
  1255.         this.mainImage.src = imgLink.href;
  1256.       }
  1257.  
  1258.       this.mainImageContainer.classList.toggle('active', !!imgLink);
  1259.  
  1260.       const scaleButton = clicked.closest('.scale-option');
  1261.       if (scaleButton) {
  1262.         const scale = parseFloat(getComputedStyle(this.imageContainer).getPropertyValue('--scale')) || 1;
  1263.         const delta = scaleButton.id === 'fcxg-smaller' ? -0.1 : 0.1;
  1264.         const newScale = Math.max(0.1, scale + delta);
  1265.         this.imageContainer.style.setProperty('--scale', newScale.toFixed(2));
  1266.       }
  1267.  
  1268.       if (clicked.closest('.gallery__close')) this.close();
  1269.     });
  1270.   }
  1271.  
  1272.   open () {
  1273.     if (!this.initalized) this.init();
  1274.     this.classList.add('open');
  1275.     document.body.classList.add('fct-gallery-open');
  1276.   }
  1277.  
  1278.   close () {
  1279.     this.classList.remove('open');
  1280.     document.body.classList.remove('fct-gallery-open');
  1281.   }
  1282. }
  1283.  
  1284. window.customElements.define('fullchan-x-gallery', fullChanXGallery);
  1285.  
  1286.  
  1287. class ToggleButton extends HTMLElement {
  1288.   constructor() {
  1289.     super();
  1290.     const data = this.dataset;
  1291.     this.onclick = () => {
  1292.       const target = data.target ? document.querySelector(data.target) : this;
  1293.       const value = data.value || 'active';
  1294.       !!data.set ? target.dataset[data.set] = value : target.classList.toggle(value);
  1295.     }
  1296.   }
  1297. }
  1298.  
  1299. window.customElements.define('toggle-button', ToggleButton);
  1300.  
  1301.  
  1302.  
  1303. // Create fullchan-x gallery
  1304. const fcxg = document.createElement('fullchan-x-gallery');
  1305. fcxg.innerHTML = `
  1306.   <div class="fcxg gallery">
  1307.     <button id="fcxg-close" class="gallery__close fullchan-x__option">Close</button>
  1308.     <div class="gallery__scale-options">
  1309.       <button id="fcxg-smaller" class="scale-option fullchan-x__option">-</button>
  1310.       <button id="fcxg-larger" class="scale-option fullchan-x__option">+</button>
  1311.     </div>
  1312.     <div id="fcxg-images" class="gallery__images" style="--scale:1.0"></div>
  1313.     <div id="fcxg-main-image" class="gallery__main-image">
  1314.       <img src="" />
  1315.     </div>
  1316.   </div>
  1317. `;
  1318. document.body.appendChild(fcxg);
  1319.  
  1320.  
  1321.  
  1322. // Create fullchan-x element
  1323. const fcx = document.createElement('fullchan-x');
  1324. fcx.innerHTML = `
  1325.   <div class="fcx__controls">
  1326.     <button id="fcx-settings-btn" class="fullchan-x__option fcx-settings-toggle">
  1327.      <a>⚙️</a><span>Settings</span>
  1328.     </button>
  1329.  
  1330.     <div class="fullchan-x__option fullchan-x__sort thread-only">
  1331.       <a>☰</a>
  1332.       <select id="thread-sort">
  1333.         <option value="default">Default</option>
  1334.         <option value="replies">Replies</option>
  1335.         <option value="catbox">Catbox</option>
  1336.       </select>
  1337.     </div>
  1338.  
  1339.     <button id="fcx-gallery-btn" class="gallery__toggle fullchan-x__option thread-only">
  1340.       <a>🖼️</a><span>Gallery</span>
  1341.     </button>
  1342.  
  1343.     <div class="fcx__my-yous thread-only">
  1344.       <p class="my-yous__label fullchan-x__option"><a>💬</a><span>My (You)s</span></p>
  1345.       <div class="my-yous__yous fcx-prevent-nesting" id="my-yous"></div>
  1346.     </div>
  1347.   </div>
  1348. `;
  1349. (document.querySelector('.navHeader') || document.body).appendChild(fcx);
  1350.  
  1351.  
  1352.  
  1353. // Create fullchan-x settings
  1354. const fcxs = document.createElement('fullchan-x-settings');
  1355. fcxs.innerHTML = `
  1356.   <div class="fcx-settings fcxs" data-tab="main">
  1357.     <header>
  1358.       <div class="fcxs__heading">
  1359.         <span class="fcx-settings__title">
  1360.           <img class="fcxs_logo" src="/.static/logo/logo_blue.png" height="25px" width="auto">
  1361.           <span>
  1362.             Fullchan-X Settings
  1363.           </span>
  1364.         </span>
  1365.         <button class="fcx-settings__close fullchan-x__option">Close</button>
  1366.       </div>
  1367.  
  1368.       <div class="fcx-settings__tab-buttons">
  1369.         <toggle-button data-target=".fcxs" data-set="tab" data-value="main">
  1370.           Main
  1371.         </toggle-button>
  1372.         <toggle-button data-target=".fcxs" data-set="tab" data-value="catalog">
  1373.           catalog
  1374.         </toggle-button>
  1375.         <toggle-button data-target=".fcxs" data-set="tab" data-value="mascot">
  1376.           Mascot
  1377.         </toggle-button>
  1378.       </div>
  1379.     </header>
  1380.  
  1381.     <main>
  1382.       <div class="fcxs__updated-message">
  1383.         <p>Settings updated, refresh page to apply</p>
  1384.         <button class="fullchan-x__option" onClick="location.reload()">Reload page</button>
  1385.       </div>
  1386.  
  1387.       <div class="fcx-settings__settings">
  1388.         <div class="fcxs-main fcxs-tab"></div>
  1389.         <div class="fcxs-mascot fcxs-tab">
  1390.           <div class="fcxs-mascot-settings"></div>
  1391.           <div class="fcxs-mascot-list">
  1392.               <div class="fcxs-mascot__new">
  1393.                 <span>+</span>
  1394.               </div>
  1395.           </div>
  1396.  
  1397.           <p class="fcxs-tab__description">
  1398.             Go to <a href="/mascot/catalog.html" target="__blank">8chan.*/mascot/</a> to store or find new mascots.
  1399.           </p>
  1400.         </div>
  1401.         <div class="fcxs-catalog fcxs-tab">
  1402.           <div class="fcxs-thread-banisher"></div>
  1403.         </div>
  1404.       </div>
  1405.     </main>
  1406.  
  1407.     <footer>
  1408.     </footer>
  1409.   </div>
  1410.  
  1411.   <div class="fcxs-add-mascot">
  1412.     <button class="fcx-option fcxs-close-mascot">Close</button>
  1413.     <div class="fcxs-add-mascot-settings"></div>
  1414.     <button class="fcx-option fcxs-save-mascot" disabled>Save Mascot</button>
  1415.   </div>
  1416. `;
  1417.  
  1418.  
  1419. // Styles
  1420. const style = document.createElement('style');
  1421. style.innerHTML = `
  1422.   .fcx-hide-navboard #navTopBoardsSpan#navTopBoardsSpan#navTopBoardsSpan {
  1423.     display: none!important;
  1424.   }
  1425.  
  1426.   fullchan-x {
  1427.     --top: 50px;
  1428.     --right: 25px;
  1429.     background: var(--background-color);
  1430.     border: 1px solid var(--navbar-text-color);
  1431.     color: var(--link-color);
  1432.     font-size: 14px;
  1433.     z-index: 3;
  1434.   }
  1435.  
  1436.   toggle-button {
  1437.     cursor: pointer;
  1438.   }
  1439.  
  1440.   /* Fullchan-X in nav styles */
  1441.   .fcx-in-nav {
  1442.     padding: 0;
  1443.     border-width: 0;
  1444.     line-height: 20px;
  1445.     margin-right: 2px;
  1446.     background: none;
  1447.   }
  1448.  
  1449.   .fcx-in-nav .fcx__controls:before,
  1450.   .fcx-in-nav .fcx__controls:after {
  1451.     color: var(--navbar-text-color);
  1452.     font-size: 85%;
  1453.   }
  1454.  
  1455.   .fcx-in-nav .fcx__controls:before {
  1456.     content: "]";
  1457.   }
  1458.  
  1459.   .fcx-in-nav .fcx__controls:after {
  1460.     content: "[";
  1461.   }
  1462.  
  1463.   .fcx-in-nav .fcx__controls,
  1464.   .fcx-in-nav:hover .fcx__controls:hover {
  1465.     flex-direction: row-reverse;
  1466.   }
  1467.  
  1468.   .fcx-in-nav .fcx__controls .fullchan-x__option {
  1469.     padding: 0!important;
  1470.     justify-content: center;
  1471.     background: none;
  1472.     line-height: 0;
  1473.     max-width: 20px;
  1474.     min-width: 20px;
  1475.     translate: 0 1px;
  1476.     border: solid var(--navbar-text-color) 1px !important;
  1477.   }
  1478.  
  1479.   .fcx-in-nav .fcx__controls .fullchan-x__option:hover {
  1480.     border: solid var(--subject-color) 1px !important;
  1481.   }
  1482.  
  1483.   .fcx-in-nav .fullchan-x__sort > a {
  1484.     position: relative;
  1485.     margin-bottom: 1px;
  1486.   }
  1487.  
  1488.   .fcx-in-nav .fcx__controls > * {
  1489.     position: relative;
  1490.   }
  1491.  
  1492.   .fcx-in-nav .fcx__controls .fullchan-x__option > span,
  1493.   .fcx-in-nav .fcx__controls .fullchan-x__option:not(:hover) > select {
  1494.     display: none;
  1495.   }
  1496.  
  1497.   .fcx-in-nav .fcx__controls .fullchan-x__option > select {
  1498.     appearance: none;
  1499.     position: absolute;
  1500.     left: 0;
  1501.     top: 0;
  1502.     width: 100%;
  1503.     height: 100%;
  1504.     font-size: 0;
  1505.   }
  1506.  
  1507.   .fcx-in-nav .fcx__controls .fullchan-x__option > select option {
  1508.     font-size: 12px;
  1509.   }
  1510.  
  1511.   .fcx-in-nav .my-yous__yous {
  1512.     position: absolute;
  1513.     left: 50%;
  1514.     translate: -50%;
  1515.     background: var(--background-color);
  1516.     border: 1px solid var(--navbar-text-color);
  1517.     padding: 14px;
  1518.   }
  1519.  
  1520.   .bottom-header .fcx-in-nav .my-yous__yous {
  1521.     top: 0;
  1522.     translate: -50% -100%;
  1523.   }
  1524.  
  1525.   /* Fullchan-X main styles */
  1526.   fullchan-x:not(.fcx-in-nav) {
  1527.     top: var(--top);
  1528.     right: var(--right);
  1529.     display: block;
  1530.     padding: 10px;
  1531.     position: fixed;
  1532.     display: block;
  1533.   }
  1534.  
  1535.   fullchan-x:not(.fcx-page-thread) .thread-only,
  1536.   fullchan-x:not(.fcx-page-catalog) .catalog-only {
  1537.     display: none!important;
  1538.   }
  1539.  
  1540.   fullchan-x:hover {
  1541.     z-index: 1000!important;
  1542.   }
  1543.  
  1544.   .navHeader:has(fullchan-x:hover) {
  1545.     z-index: 1000!important;
  1546.   }
  1547.  
  1548.   fullchan-x.fcx--dim:not(:hover) {
  1549.     opacity: 0.6;
  1550.   }
  1551.  
  1552.   .divPosts {
  1553.     flex-direction: column;
  1554.   }
  1555.  
  1556.   .fcx__controls {
  1557.     display: flex;
  1558.     flex-direction: column;
  1559.     gap: 6px;
  1560.   }
  1561.  
  1562.   fullchan-x:not(:hover):not(:has(select:focus)) span,
  1563.   fullchan-x:not(:hover):not(:has(select:focus)) select {
  1564.     display: none;
  1565.     margin-left: 5px;
  1566.     z-index:3;
  1567.   }
  1568.  
  1569.   .fcx__controls span,
  1570.   .fcx__controls select {
  1571.     margin-left: 5px;
  1572.   }
  1573.  
  1574.   .fcx__controls select {
  1575.     cursor: pointer;
  1576.   }
  1577.  
  1578.   #thread-sort {
  1579.     border: none;
  1580.     background: none;
  1581.   }
  1582.  
  1583.   .my-yous__yous {
  1584.     display: none;
  1585.     flex-direction: column;
  1586.     padding-top: 10px;
  1587.     max-height: calc(100vh - 220px - var(--top));
  1588.     overflow: auto;
  1589.   }
  1590.  
  1591.   .fcx__my-yous:hover .my-yous__yous {
  1592.     display: flex;
  1593.   }
  1594.  
  1595.   .fullchan-x__option,
  1596.   .fcx-option {
  1597.     display: flex;
  1598.     padding: 6px 8px;
  1599.     background: white;
  1600.     border: none !important;
  1601.     border-radius: 0.2rem;
  1602.     transition: all ease 150ms;
  1603.     cursor: pointer;
  1604.     margin: 0;
  1605.     font-weight: 400;
  1606.     text-align: left;
  1607.     min-width: 18px;
  1608.     min-height: 18px;
  1609.     align-items: center;
  1610.     color: #374369;
  1611.   }
  1612.  
  1613.   .fullchan-x__option,
  1614.   .fullchan-x__option select {
  1615.     font-size: 12px;
  1616.     font-weight: 400;
  1617.     color: #374369;
  1618.   }
  1619.  
  1620.   fullchan-x:not(:hover):not(:has(select:focus)) .fullchan-x__option {
  1621.     display: flex;
  1622.     justify-content: center;
  1623.   }
  1624.  
  1625.   #thread-sort {
  1626.     padding-right: 0;
  1627.   }
  1628.  
  1629.   #thread-sort:hover {
  1630.     display: block;
  1631.   }
  1632.  
  1633.   .innerPost:has(>.divMessage>.you),
  1634.   .innerPost:has(>.divMessage>*:not(div)>.you),
  1635.   .innerPost:has(>.divMessage>*:not(div)>*:not(div)>.you) {
  1636.     border-left: solid #dd003e 3px;
  1637.   }
  1638.  
  1639.   .innerPost.innerPost:has(>.postInfo>.youName),
  1640.   .innerOP.innerOP:has(>.postInfo>.youName) {
  1641.     border-left: solid #68b723 3px;
  1642.   }
  1643.  
  1644.   /* --- Nested quotes --- */
  1645.   .divMessage .nestedPost {
  1646.     display: inline-block;
  1647.     width: 100%;
  1648.     margin-bottom: 14px;
  1649.     white-space: normal!important;
  1650.     overflow-wrap: anywhere;
  1651.     margin-top: 0.5em;
  1652.     border: 1px solid var(--navbar-text-color);
  1653.   }
  1654.  
  1655.   .nestedPost .innerPost,
  1656.   .nestedPost .innerOP {
  1657.     width: 100%;
  1658.   }
  1659.  
  1660.   .nestedPost .imgLink .imgExpanded {
  1661.     width: auto!important;
  1662.     height: auto!important;
  1663.   }
  1664.  
  1665.   .my-yous__label.fcx-unseen {
  1666.     background: var(--link-hover-color)!important;
  1667.     color: white;
  1668.   }
  1669.  
  1670.   .my-yous__yous .fcx-unseen {
  1671.     font-weight: 900;
  1672.     color: var(--link-hover-color);
  1673.   }
  1674.  
  1675.   .panelBacklinks a.fcx-active {
  1676.     color: #dd003e;
  1677.   }
  1678.  
  1679.   /*--- Settings --- */
  1680.   fullchan-x-settings {
  1681.     color: var(--link-color);
  1682.     font-size: 14px;
  1683.   }
  1684.  
  1685.   .fcx-settings {
  1686.     display: block;
  1687.     position: fixed;
  1688.     top: 50vh;
  1689.     left: 50vw;
  1690.     translate: -50% -50%;
  1691.     padding: 0 0 20px;
  1692.     background: var(--background-color);
  1693.     border: 1px solid var(--navbar-text-color);
  1694.     border-radius: 8px;
  1695.     max-width: 480px;
  1696.     max-height: 80vh;
  1697.     overflow: auto;
  1698.     min-width: 500px;
  1699.     z-index: 1000;
  1700.   }
  1701.  
  1702.   .fcx-settings header {
  1703.     position: sticky;
  1704.     top: 0;
  1705.     padding-top: 20px;
  1706.     background: var(--background-color);
  1707.     z-index: 3;
  1708.   }
  1709.  
  1710.   fullchan-x-settings:not(.open) {
  1711.     display: none;
  1712.   }
  1713.  
  1714.   .fcxs__heading,
  1715.   .fcxs-tab,
  1716.   .fcxs footer {
  1717.     padding: 0 20px;
  1718.   }
  1719.  
  1720.   .fcx-settings header {
  1721.     margin: 0 0 15px;
  1722.     border-bottom: 1px solid var(--navbar-text-color);
  1723.   }
  1724.  
  1725.   .fcxs__heading {
  1726.     display: flex;
  1727.     align-items: center;
  1728.     justify-content: space-between;
  1729.     padding-bottom: 20px;
  1730.   }
  1731.  
  1732.   .fcx-settings__title {
  1733.     display: flex;
  1734.     align-items: center;
  1735.     gap: 10px;
  1736.     font-size: 24px;
  1737.     font-size: 24px;
  1738.     letter-spacing: 0.04em;
  1739.   }
  1740.  
  1741.   .fcx-settings input[type="checkbox"] {
  1742.     cursor: pointer;
  1743.   }
  1744.  
  1745.   .fcxs_logo {
  1746.     .margin-top: -2px;
  1747.   }
  1748.  
  1749.   .fcx-settings__tab-buttons {
  1750.     border-top: 1px solid var(--navbar-text-color);
  1751.     display: flex;
  1752.     align-items: center;
  1753.   }
  1754.  
  1755.   .fcx-settings__tab-buttons toggle-button {
  1756.     flex: 1;
  1757.     padding: 15px;
  1758.     font-size: 14px;
  1759.   }
  1760.  
  1761.   .fcx-settings__tab-buttons toggle-button + toggle-button {
  1762.     border-left: 1px solid var(--navbar-text-color);
  1763.   }
  1764.  
  1765.   .fcx-settings__tab-buttons toggle-button:hover {
  1766.     color: var(--role-color);
  1767.   }
  1768.  
  1769.   fullchan-x-settings:not(.fcxs-updated) .fcxs__updated-message {
  1770.     display: none;
  1771.   }
  1772.  
  1773.   .fcxs:not([data-tab="main"]) .fcxs-main,
  1774.   .fcxs:not([data-tab="catalog"]) .fcxs-catalog,
  1775.   .fcxs:not([data-tab="mascot"]) .fcxs-mascot {
  1776.     display: none;
  1777.   }
  1778.  
  1779.   .fcxs[data-tab="main"] [data-value="main"],
  1780.   .fcxs[data-tab="catalog"] [data-value="catalog"],
  1781.   .fcxs[data-tab="mascot"] [data-value="mascot"] {
  1782.     font-weight: 700;
  1783.   }
  1784.  
  1785.   .fcx-setting {
  1786.     display: flex;
  1787.     justify-content: space-between;
  1788.     align-items: center;
  1789.     padding: 12px 0;
  1790.   }
  1791.  
  1792.   .fcx-setting__info {
  1793.     max-width: 60%;
  1794.   }
  1795.  
  1796.   .fcx-setting input[type="text"],
  1797.   .fcx-setting input[type="number"],
  1798.   .fcx-setting select,
  1799.   .fcx-setting textarea {
  1800.     padding: 4px 6px;
  1801.     min-width: 35%;
  1802.   }
  1803.  
  1804.   .fcx-setting textarea {
  1805.     min-height: 100px;
  1806.   }
  1807.  
  1808.   .fcx-setting label {
  1809.     font-weight: 600;
  1810.   }
  1811.  
  1812.   .fcx-setting p {
  1813.     margin: 6px 0 0;
  1814.     font-size: 12px;
  1815.   }
  1816.  
  1817.   .fcx-setting + .fcx-setting {
  1818.     border-top: 1px solid var(--navbar-text-color);
  1819.   }
  1820.  
  1821.   .fcxs__updated-message {
  1822.     margin: 10px 0;
  1823.     text-align: center;
  1824.   }
  1825.  
  1826.   .fcxs__updated-message p {
  1827.     font-size: 14px;
  1828.     color: var(--error);
  1829.   }
  1830.  
  1831.   .fcxs__updated-message button {
  1832.     margin: 14px auto 0;
  1833.   }
  1834.  
  1835.   .fcxs-tab__description {
  1836.     text-align: center;
  1837.     margin-top: 24px;
  1838.     font-size: 12px;
  1839.   }
  1840.  
  1841.   .fcxs-tab__description a {
  1842.     text-decoration: underline;
  1843.   }
  1844.  
  1845.   /* --- Gallery --- */
  1846.   .fct-gallery-open,
  1847.   body.fct-gallery-open,
  1848.   body.fct-gallery-open #mainPanel {
  1849.     overflow: hidden!important;
  1850.   }
  1851.  
  1852.   body.fct-gallery-open fullchan-x:not(.fcx-in-nav),
  1853.   body.fct-gallery-open #quick-reply {
  1854.     display: none!important;
  1855.   }
  1856.  
  1857.   fullchan-x-gallery {
  1858.     position: fixed;
  1859.     top: 0;
  1860.     left: 0;
  1861.     width: 100%;
  1862.     background: rgba(0,0,0,0.9);
  1863.     display: none;
  1864.     height: 100%;
  1865.     overflow: auto;
  1866.   }
  1867.  
  1868.   fullchan-x-gallery.open {
  1869.     display: block;
  1870.   }
  1871.  
  1872.   fullchan-x-gallery .gallery {
  1873.     padding: 50px 10px 0
  1874.   }
  1875.  
  1876.   fullchan-x-gallery .gallery__images {
  1877.     --scale: 1.0;
  1878.     display: flex;
  1879.     width: 100%;
  1880.     height: 100%;
  1881.     justify-content: center;
  1882.     align-content: flex-start;
  1883.     gap: 4px 8px;
  1884.     flex-wrap: wrap;
  1885.   }
  1886.  
  1887.   fullchan-x-gallery .imgLink {
  1888.     float: unset;
  1889.     display: block;
  1890.     zoom: var(--scale);
  1891.   }
  1892.  
  1893.   fullchan-x-gallery .imgLink img {
  1894.     border: solid white 1px;
  1895.   }
  1896.  
  1897.   fullchan-x-gallery .imgLink[data-filemime="video/webm"] img {
  1898.     border: solid #68b723 4px;
  1899.   }
  1900.  
  1901.   fullchan-x-gallery .gallery__close {
  1902.     border: solid 1px var(--background-color)!important;
  1903.     position: fixed;
  1904.     top: 60px;
  1905.     right: 35px;
  1906.     padding: 6px 14px;
  1907.     min-height: 30px;
  1908.     z-index: 10;
  1909.   }
  1910.  
  1911.   .fcxg .gallery__scale-options {
  1912.     position: fixed;
  1913.     bottom: 30px;
  1914.     right: 35px;
  1915.     display: flex;
  1916.     gap: 14px;
  1917.     z-index: 10;
  1918.   }
  1919.  
  1920.   .fcxg .gallery__scale-options .fullchan-x__option {
  1921.     border: solid 1px var(--background-color)!important;
  1922.     width: 35px;
  1923.     height: 35px;
  1924.     font-size: 18px;
  1925.     display: flex;
  1926.     justify-content: center;
  1927.   }
  1928.  
  1929.   .gallery__main-image {
  1930.     display: none;
  1931.     position: fixed;
  1932.     top: 0;
  1933.     left: 0;
  1934.     width: 100%;
  1935.     height: 100%;
  1936.     justify-content: center;
  1937.     align-content: center;
  1938.     background: rgba(0,0,0,0.5);
  1939.   }
  1940.  
  1941.   .gallery__main-image img {
  1942.     padding: 40px 10px 15px;
  1943.     height: auto;
  1944.     max-width: calc(100% - 20px);
  1945.     object-fit: contain;
  1946.   }
  1947.  
  1948.   .gallery__main-image.active {
  1949.     display: flex;
  1950.   }
  1951.  
  1952.   /*-- Truncated file extentions --*/
  1953.   .originalNameLink[data-file-ext] {
  1954.     display: inline-block;
  1955.     overflow: hidden;
  1956.     white-space: nowrap;
  1957.     text-overflow: ellipsis;
  1958.     max-width: 65px;
  1959.   }
  1960.  
  1961.   .originalNameLink[data-file-ext]:hover {
  1962.     max-width: unset;
  1963.     white-space: normal;
  1964.     display: inline;
  1965.   }
  1966.  
  1967.   a[data-file-ext]:hover:after {
  1968.     content: attr(data-file-ext);
  1969.   }
  1970.  
  1971.   a[data-file-ext] + .file-ext {
  1972.     pointer-events: none;
  1973.   }
  1974.  
  1975.   a[data-file-ext]:hover + .file-ext {
  1976.     display: none;
  1977.   }
  1978.  
  1979.   /*-- Enhanced replies --*/
  1980.   .fcx-replies-plus .panelBacklinks a.fcx-active {
  1981.     --active-color: red;
  1982.     color: var(--active-color);
  1983.   }
  1984.  
  1985.  
  1986.   body:not(.fcx-icon-replies).fcx-replies-plus .panelBacklinks a.fcx-active,
  1987.   .fcx-replies-plus .replyPreview .linkQuote.fcx-active-color {
  1988.     background: var(--active-color);
  1989.     padding: 2px 4px 2px 3px;
  1990.     color: white!important;
  1991.     solid 1px var(--navbar-text-color);
  1992.     box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2);
  1993.     text-shadow: 0.5px 0.5px 0.5px #000,-0.5px 0.5px 0.5px #000,-0.5px -0.5px 0.5px #000,0.5px -0.5px 0.5px #000, 0px 0px 4px #000, 0px 0px 4px #000;
  1994.     background-image: linear-gradient(-45deg, rgba(0,0,0,0.2), rgba(255,255,255,0.2));
  1995.   }
  1996.  
  1997.   .fcx-replies-plus .replyPreview {
  1998.     padding-left: 40px;
  1999.     padding-right: 10px;
  2000.     margin-top: 10px;
  2001.   }
  2002.  
  2003.   .fcx-replies-plus .altBacklinks {
  2004.     background-color: unset;
  2005.   }
  2006.  
  2007.   .fcx-replies-plus .altBacklinks + .replyPreview {
  2008.     padding-left: 4px;
  2009.     padding-right: 0px;
  2010.     margin-top: 5px;
  2011.   }
  2012.  
  2013.   .fcx-replies-plus .replyPreview .inlineQuote + .inlineQuote {
  2014.     margin-top: 8px;
  2015.   }
  2016.  
  2017.   .fcx-replies-plus .inlineQuote .innerPost {
  2018.     border: solid 1px var(--navbar-text-color)
  2019.   }
  2020.  
  2021.   .fcx-replies-plus .quoteLink + .inlineQuote {
  2022.     margin-top: 6px;
  2023.   }
  2024.  
  2025.   .fcx-replies-plus .inlineQuote .postInfo > a:first-child {
  2026.     position: absolute;
  2027.     display: inline-block;
  2028.     font-size: 0;
  2029.     width: 14px;
  2030.     height: 14px;
  2031.     background: var(--link-color);
  2032.     border-radius: 50%;
  2033.     translate: 6px 0.5px;
  2034.   }
  2035.  
  2036.   .fcx-replies-plus .inlineQuote .postInfo > a:first-child:after {
  2037.     content: '+';
  2038.     display: block;
  2039.     position: absolute;
  2040.     left: 50%;
  2041.     top: 50%;
  2042.     font-size: 18px;
  2043.     color: var(--contrast-color);
  2044.     transform: translate(-50%, -50%) rotate(45deg);
  2045.     z-index: 1;
  2046.   }
  2047.  
  2048.   .fcx-replies-plus .inlineQuote .postInfo > a:first-child:hover {
  2049.     background: var(--link-hover-color);
  2050.   }
  2051.  
  2052.   .fcx-replies-plus .inlineQuote .hideButton {
  2053.     margin-left: 25px;
  2054.   }
  2055.  
  2056.   /*-- Nav Board Links --*/
  2057.   .nav-boards--custom {
  2058.     display: flex;
  2059.     gap: 3px;
  2060.   }
  2061.  
  2062.   .fcx-hidden,
  2063.   #navTopBoardsSpan.fcx-hidden ~ #navBoardsSpan,
  2064.   #navTopBoardsSpan.fcx-hidden ~ .nav-fade,
  2065.   #navTopBoardsSpan a.fcx-hidden + span {
  2066.     display: none;
  2067.   }
  2068.  
  2069.   /*-- Anon Unique ID posts --*/
  2070.   .postInfo .spanId {
  2071.     position: relative;
  2072.   }
  2073.  
  2074.   .fcx-id-posts {
  2075.     position: absolute;
  2076.     top: 0;
  2077.     left: 20px;
  2078.     translate: 0 calc(-100% - 5px);
  2079.     display: flex;
  2080.     flex-direction: column;
  2081.     padding: 10px;
  2082.     background: var(--background-color);
  2083.     border: 1px solid var(--navbar-text-color);
  2084.     width: max-content;
  2085.     max-width: 500px;
  2086.     max-height: 500px;
  2087.     overflow: auto;
  2088.     z-index: 1000;
  2089.   }
  2090.  
  2091.   .fcx-id-posts .nestedPost {
  2092.     pointer-events: none;
  2093.     width: auto;
  2094.   }
  2095.  
  2096.   /*-- Thread sorting --*/
  2097.   #divThreads.fcx-threads {
  2098.     display: flex!important;
  2099.     flex-wrap: wrap;
  2100.     justify-content: center;
  2101.   }
  2102.  
  2103.   .catalogCell.shit-thread {
  2104.     order: 10;
  2105.     filter: sepia(0.17);
  2106.   }
  2107.  
  2108.   .catalogCell.shit-thread .labelPage:after {
  2109.     content: " 💩";
  2110.   }
  2111.  
  2112.   /* Hide navbar */
  2113.   .fcx-hide-navbar .navHeader {
  2114.     --translateY: -100%;
  2115.     translate: 0 var(--translateY);
  2116.     transition: ease 300ms translate;
  2117.   }
  2118.  
  2119.   .bottom-header.fcx-hide-navbar .navHeader {
  2120.     --translateY: 100%;
  2121.   }
  2122.  
  2123.   .fcx-hide-navbar .navHeader:after {
  2124.     content: "";
  2125.     display: block;
  2126.     height: 100%;
  2127.     width: 100%;
  2128.     left: 0;
  2129.     position: absolute;
  2130.     top: 100%;
  2131.   }
  2132.  
  2133.   .fcx-hide-navbar .navHeader:hover {
  2134.     --translateY: -0%;
  2135.   }
  2136.  
  2137.   .bottom-header .fcx-hide-navbar .navHeader:not(:hover) {
  2138.     --translateY: 100%;
  2139.   }
  2140.  
  2141.   .bottom-header .fcx-hide-navbar .navHeader:after {
  2142.     top: -100%;
  2143.   }
  2144.  
  2145.   /* Extra styles */
  2146.   .fcx-hide-delete .postInfo .deletionCheckBox {
  2147.     display: none;
  2148.   }
  2149.  
  2150.   /*-- mascot --*/
  2151.   .fcx-mascot {
  2152.     position: fixed;
  2153.     z-index: -1;
  2154.   }
  2155.  
  2156.   .fct-gallery-open .fcx-mascot {
  2157.     display: none;
  2158.   }
  2159.  
  2160.   .fcxs-mascot-list {
  2161.     display: grid;
  2162.     grid-template-columns: 1fr 1fr 1fr;
  2163.     gap: 10px;
  2164.     margin: 25px 0 40px;
  2165.   }
  2166.  
  2167.   .fcxs-mascot__new,
  2168.   .fcxs-mascot-card {
  2169.     border: 1px solid var(--navbar-text-color);
  2170.     border-radius: 8px;
  2171.     position: relative;
  2172.     overflow: hidden;
  2173.     height: 170px;
  2174.     rgba(255,255,255,0.15);
  2175.     cursor: pointer;
  2176.   }
  2177.  
  2178.   .fcxs-mascot__new {
  2179.     display: flex;
  2180.     justify-content: center;
  2181.     align-items: center;
  2182.     font-size: 50px;
  2183.   }
  2184.  
  2185.   .fcxs-mascot__new span {
  2186.     opacity: 0.6;
  2187.     transition: ease 150ms opacity;
  2188.   }
  2189.  
  2190.   .fcxs-mascot__new:hover span {
  2191.     opacity: 1;
  2192.   }
  2193.  
  2194.   .fcxs-mascot-card img {
  2195.     height: 100%;
  2196.     width: 100%;
  2197.     object-fit: contain;
  2198.     opacity: 0.7;
  2199.     transition: ease 150ms all;
  2200.   }
  2201.  
  2202.   .fcxs-mascot-card:hover img {
  2203.     opacity: 1;
  2204.   }
  2205.  
  2206.   .fcxs-mascot-card--disabled img {
  2207.     filter: grayscale(1);
  2208.     opacity: 0.4;
  2209.   }
  2210.  
  2211.   .fcxs-mascot-card--disabled:hover img {
  2212.     filter: grayscale(0.8);
  2213.     opacity: 0.6;
  2214.   }
  2215.  
  2216.   .fcxs-mascot-card__buttons {
  2217.     border-top: solid 1px var(--navbar-text-color);
  2218.     position: absolute;
  2219.     bottom: 0;
  2220.     left: 0;
  2221.     width: 100%;
  2222.     display: flex;
  2223.     opacity: 0;
  2224.     transition: ease 150ms opacity;
  2225.   }
  2226.  
  2227.   .fcxs-mascot-card:hover .fcxs-mascot-card__buttons {
  2228.     opacity: 1;
  2229.    }
  2230.  
  2231.   .fcxs-mascot-card button {
  2232.     --background-opacity: 0.5;
  2233.     transition: ease 150ms all;
  2234.     flex: 1;
  2235.     margin: 0;
  2236.     border: none;
  2237.     padding: 6px 0;
  2238.     color: var(--link-color);
  2239.     background: rgba(255,255,255,var(--background-opacity));
  2240.   }
  2241.  
  2242.   .fcxs-mascot-card button + button {
  2243.     border-left: solid 1px var(--navbar-text-color);
  2244.   }
  2245.  
  2246.   .fcxs-mascot-card button:hover {
  2247.     --background-opacity: 1;
  2248.   }
  2249.  
  2250.   .fcxs-mascot-card__name {
  2251.     position: absolute;
  2252.     top: 0;
  2253.     left: 0;
  2254.     width: 100%;
  2255.     background: rgba(255,255,255,0.2);
  2256.     transition: ease 150ms background;
  2257.   }
  2258.  
  2259.   .fcxs-mascot-card__name:hover {
  2260.     background: rgba(255,255,255,0.6);
  2261.   }
  2262.  
  2263.   .fcxs-mascot-card__name span {
  2264.     display: block;
  2265.     width: auto;
  2266.     text-align: center;
  2267.     white-space: nowrap;
  2268.     overflow: hidden;
  2269.     text-overflow: ellipsis;
  2270.     padding: 2px 10px;
  2271.   }
  2272.  
  2273.   .fcxs-mascot-card:hover span {
  2274.     white-space: normal;
  2275.     overflow: hidden;
  2276.     display: -webkit-box;
  2277.     -webkit-line-clamp: 3;
  2278.     -webkit-box-orient: vertical;
  2279.     text-overflow: ellipsis;
  2280.     max-height: 54px;
  2281.     padding: 2px 0;
  2282.   }
  2283.  
  2284.   .fcxs-add-mascot {
  2285.     display: none;
  2286.     position: fixed;
  2287.     top: 50%;
  2288.     left: 50%;
  2289.     translate: -50% -50%;
  2290.     width: 390px;
  2291.     padding: 20px;
  2292.     background: var(--background-color);
  2293.     border: solid 1px var(--navbar-text-color);
  2294.     border-radius: 6px;
  2295.     z-index: 1001;
  2296.   }
  2297.  
  2298.   .fcxs-close-mascot {
  2299.     margin-left: auto;
  2300.   }
  2301.  
  2302.   .fcxs--mascot-modal .fcxs,
  2303.   .fcxs--mascot-modal .fcx-settings__settings{
  2304.     overflow: hidden;
  2305.   }
  2306.  
  2307.   .fcxs--mascot-modal .fcxs-add-mascot {
  2308.     display: block;
  2309.   }
  2310.  
  2311.   .fcxs--mascot-modal .fcxs:after {
  2312.     content: "";
  2313.     display: block;
  2314.     position: fixed;
  2315.     top: 0;
  2316.     left: 0;
  2317.     width: 100%;
  2318.     height: 1000vh;
  2319.     background: rgba(0,0,0,0.5);
  2320.     z-index: 3;
  2321.   }
  2322.  
  2323.   .fcxs-add-mascot-settings {
  2324.     display: flex;
  2325.     flex-wrap: wrap;
  2326.     gap: 0 30px;
  2327.   }
  2328.  
  2329.   .fcxs-add-mascot-settings .fcx-setting {
  2330.     min-width: 40%;
  2331.     flex: 1;
  2332.   }
  2333.  
  2334.   .fcxs-add-mascot-settings .fcx-setting input {
  2335.     width: 40px;
  2336.     min-width: unset;
  2337.   }
  2338.  
  2339.   .fcxs-add-mascot-settings .fcx-setting--enabled,
  2340.   .fcxs-add-mascot-settings .fcx-setting--name,
  2341.   .fcxs-add-mascot-settings .fcx-setting--image,
  2342.   .fcxs-add-mascot-settings .fcx-setting--flipImage {
  2343.     max-width: 100%;
  2344.     width: 100%;
  2345.     flex: unset;
  2346.   }
  2347.  
  2348.   .fcxs-add-mascot-settings .fcx-setting--name input,
  2349.   .fcxs-add-mascot-settings .fcx-setting--image input {
  2350.     width: 62%;
  2351.   }
  2352.  
  2353.   .fcxs-add-mascot-settings .fcx-setting--enabled {
  2354.     border: none;
  2355.   }
  2356.  
  2357.   .fcxs-add-mascot-settings .fcx-setting--id {
  2358.     display: none;
  2359.   }
  2360.  
  2361.   .fcxs-save-mascot {
  2362.     margin: 20px auto 0;
  2363.     padding-left: 80px;
  2364.     padding-right: 80px;
  2365.   }
  2366.  
  2367.   .fcxs-save-mascot[disabled] {
  2368.     cursor: not-allowed;
  2369.     opacity: 0.4;
  2370.   }
  2371.  
  2372.   .fcx-add-mascot-button .uploadCell .sizeLabel {
  2373.     pointer-events: all;
  2374.     position: relative;
  2375.     z-index: 1;
  2376.     cursor: pointer;
  2377.   }
  2378.  
  2379.   .fcx-add-mascot-button .uploadCell .sizeLabel:after {
  2380.     content: "+mascot";
  2381.     display: block;
  2382.     position: absolute;
  2383.     top: 50%;
  2384.     left: 0;
  2385.     transform: translateY(-50%);
  2386.     width: 100%;
  2387.     padding: 1px 0;
  2388.     text-align: center;
  2389.     border-radius: 3px;
  2390.     background: var(--contrast-color);
  2391.     border: 1px solid var(--text-color);
  2392.     cursor: pointer;
  2393.     opacity: 0;
  2394.     transition: ease 150ms opacity;
  2395.   }
  2396.  
  2397.   .fcx-add-mascot-button .uploadCell .sizeLabel.mascotAdded:after {
  2398.     content: "added!"
  2399.   }
  2400.  
  2401.   .fcx-add-mascot-button .uploadCell:hover .sizeLabel:after {
  2402.     opacity: 1;
  2403.   }
  2404.  
  2405.   .fcx-add-mascot-button .quoteTooltip {
  2406.     z-index: 3;
  2407.   }
  2408.  
  2409.   .extraMenuButton .floatingList,
  2410.   .postInfo .floatingList {
  2411.     z-index: 2;
  2412.   }
  2413.  
  2414.   /*-- Backlink icons --*/
  2415.   .fcx-icon-replies .panelBacklinks > a {
  2416.     font-size: 0;
  2417.     text-decoration: none;
  2418.     margin-left: -4px;
  2419.     display: inline-block;
  2420.     padding: 1px 3px;
  2421.   }
  2422.  
  2423.   .fcx-icon-replies .panelBacklinks > a:first-child {
  2424.     margin-left: 3px;
  2425.   }
  2426.  
  2427.   .fcx-icon-replies .panelBacklinks > a:after {
  2428.     display: inline-block;
  2429.     content: '▶';
  2430.     font-size: 10pt;
  2431.     rotate: 0deg;
  2432.     transition: ease 75ms all;
  2433.   }
  2434.  
  2435.   .fcx-icon-replies .opCell .panelBacklinks > a.fcx-active:after {
  2436.     rotate: 90deg;
  2437.     text-shadow: 0px 1px 0px #000, 1.8px 0px 0px #000, -0.8px -1.5px 0px #000, -0.8px 1.5px 0px #000;
  2438.   }
  2439.  
  2440.   /*-- 8chan jank CSS fix --*/
  2441.   .spoiler > .inlineQuote {
  2442.     color: initial!important;
  2443.   }
  2444.   .spoiler > .inlineQuote .quoteLink {
  2445.     color: #ff0000!important;
  2446.   }
  2447.  
  2448.   .spoiler > .inlineQuote .greenText {
  2449.     color: #429406!important;
  2450.   }
  2451.  
  2452.   .spoiler > .inlineQuote .spoiler  {
  2453.     color: #000!important;
  2454.   }
  2455. `;
  2456.  
  2457. document.head.appendChild(style);
  2458. document.body.appendChild(fcxs);
  2459. fcxs.init();
  2460.  
  2461. // Asuka and Eris (fantasy Asuka) are best girls