☰

Kbin Notifications Panel

Adds a notification panel to the navigation bar

Versione datata 07/07/2023. Vedi la nuova versione l'ultima versione.

// ==UserScript==
// @name         Kbin Notifications Panel
// @namespace    https://blobcat.codeberg.page
// @version      0.2
// @description  Adds a notification panel to the navigation bar
// @author       blobcat
// @license      MIT
// @match        https://kbin.social/*
// @match        https://lab2.kbin.pub/*
// @match        https://lab3.kbin.pub/*
// @match        https://karab.in/*
// @match        https://fedia.io/*
// @match        https://readit.buzz/*
// @match        https://forum.fail/*
// @match        https://kbin.cafe/*
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA4LjQ2NyA4LjQ2NyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNjMzU4Zjg7c3RvcC1vcGFjaXR5OjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiM3ODM1ZmY7c3RvcC1vcGFjaXR5OjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYiI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojYjU1MGZhO3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojZjJhMGFmO3N0b3Atb3BhY2l0eToxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgeGxpbms6aHJlZj0iI2EiIGlkPSJjIiB4MT0iMjMzLjIwOCIgeDI9IjIzNS4zNzEiIHkxPSIxNTUuNTcyIiB5Mj0iMTU5LjY2MiIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgtMTkuMjE2IDQyLjc3MykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIi8+PGxpbmVhckdyYWRpZW50IHhsaW5rOmhyZWY9IiNiIiBpZD0iZCIgeDE9IjIzOC4zMjEiIHgyPSIyMzYuMzU1IiB5MT0iMTU0LjA3NyIgeTI9IjE1OS40NjUiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwLjk5IDQyLjc3MykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIi8+PC9kZWZzPjxwYXRoIGQ9Im0yMTQuODQ4IDE5OC4zNDItLjY5NS4wMDZjLS4yOTMgMC0uMzkuMTg0LS4zMTkuNDQ5bC42NCAyLjg0NWMuMTQyLjUyNi4yMzYuNjIuMzMyLjYyaC4xODZjLjM2NiAwIC40OTYtLjIyLjYzOS0uNjJsMS4wMTItMi44NDVoLTEuMzMzYy0uMDk1LS4yMTMtLjEyOC0uNDU0LS40NjItLjQ1NHoiIHN0eWxlPSJmaWxsOnVybCgjYyk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOi4wOTY0ODg5IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjYyMjE0IDAgMCAxLjU2MzMzIC0zNDYuODM0MTMwNiAtMzA3LjczNjIyNzgyKSIvPjxwYXRoIGQ9Ik0yMTcuMDggMTk2Ljg0NmgxLjYzMWMuMTMxIDAgLjQwMy4wNzQuMjk2LjM4N2wtMS4zNTYgNC41NDdjLS4xNC4zOTMtLjI2OC40ODItLjY4LjQ4MmgtMi4xNjVjLjExMyAwIC4yMzItLjIyLjM3NS0uNjJsMS4yODktNC4zNmMuMDk0LS4yNS4yMi0uNDM2LjYxLS40MzZ6IiBzdHlsZT0iZmlsbDp1cmwoI2QpO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDouMDk2NDg4OSIgdHJhbnNmb3JtPSJtYXRyaXgoMS42MjIxNCAwIDAgMS41NjMzMyAtMzQ2LjgzNDEzMDYgLTMwNy43MzYyMjc4MikiLz48L3N2Zz4=
// @grant        GM_addStyle
// ==/UserScript==

(function() {
  'use strict';

  GM_addStyle(`
    #header .notification-button .badge {
      font-size: .8em;
      padding: 0.1em 0.4em;
    }
    #header menu .notification-button a:not(.fa-solid.fa-bell) {
      border: 0 !important;
      padding: 0;
      display: inline;
      position: absolute;
      top: 0.5em;
      margin-left: 1.6em;
    }
  `);

  const parentElement = document.querySelector('.header .kbin-container');

  if (parentElement) {
    const listItem = document.createElement('li');
    listItem.classList.add('notification-button');
    listItem.style.cursor = 'pointer';

    const anchorElement = document.createElement('a');
    anchorElement.textContent = ' ';
    anchorElement.classList.add('fa-solid', 'fa-bell');

    listItem.appendChild(anchorElement);

    const thirdChild = parentElement.children[2];
    const counterElement = thirdChild.querySelector('.counter > [href="/settings/notifications"]');

    if (counterElement) {
      listItem.appendChild(counterElement);
    }

    if (thirdChild.children.length >= 5) {
      thirdChild.insertBefore(listItem, thirdChild.children[4]);
    } else {
      thirdChild.insertBefore(listItem, thirdChild.children[3]);
    }

    function toggleIframe() {
      const existingIframe = document.querySelector('.kbin-iframe');

      if (existingIframe) {
        existingIframe.remove();
      } else {
        const iframe = document.createElement('iframe');
        iframe.src = 'https://kbin.social/settings/notifications';
        iframe.className = 'kbin-iframe';
        iframe.style.cssText = `
          position: absolute;
          z-index: 99;
          border: 0;
          top: 3.25rem;
          right: 0;
          resize: vertical;
          min-height: 360px;
          user-select: none;
          border-radius: 4px;
          box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        `;

        iframe.addEventListener('load', () => {
          const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
          const links = iframeDocument.getElementsByTagName('a');

          for (let i = 0; i < links.length; i++) {
            links[i].addEventListener('click', (event) => {
              event.preventDefault();
              window.location.href = event.target.href;
            });
          }
        });

        parentElement.appendChild(iframe);

        iframe.addEventListener('load', () => {
          const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
          const styleElement = iframeDocument.createElement('style');
          styleElement.textContent = `
            #sidebar, #header, #footer, #scroll-top {
              display: none !important;
            }
            #middle {
              margin-top: -30px !important;
            }
            h1 {
              font-size: 1rem;
              padding-left: .5rem;
            }
            .pills {
              padding: 0;
            }
            .page-notifications #main .notification {
              font-size: .8rem;
            }
            .section--small {
              padding: 0.5rem;
            }
            form, .btn__secondary {
              height: 25px;
            }
            .btn {
              padding: 0 6px;
            }
            .page-notifications #main .notification {
              grid-template-areas: "a a a b" "a a a b";
              display: grid;
              width: 100%;
            }
            .page-notifications #main .notification > div {
              grid-area: a;
            }
            .page-notifications #main .notification > span {
              grid-area: b;
            }
            body::-webkit-scrollbar {
              width: 8px;
            }
            body::-webkit-scrollbar-track {
              background: transparent;
            }
            body::-webkit-scrollbar-thumb {
              background-color: gray;
              border-radius: 5px;
              border: 2px solid transparent;
            }
            .pills {
              padding: 0;
              display: inline-block;
              float: right;
              margin: 0.67em;
            }
            h1 {
              display: inline-block;
            }
          `;
          iframeDocument.head.appendChild(styleElement);
        });
      }
    }

    listItem.addEventListener('click', toggleIframe);
  }
})();