Greasy Fork is available in English.
Adds a side panel with all magazine subscriptions.
当前为
// ==UserScript==
// @name Kbin Subscriptions Panel
// @namespace https://perry.dev
// @license MIT
// @version 0.2
// @description Adds a side panel with all magazine subscriptions.
// @author Daniel Pervan
// @match https://kbin.social/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
function addSubscriptionsSidePanel() {
const loginElement = document.querySelector(".login");
console.log(loginElement.href);
if (loginElement.href.endsWith("/login")) {
return;
}
GM_addStyle(`
#middle > .kbin-container {
grid-template-areas: "magazine-panel main sidebar";
grid-template-columns: 1fr 3fr 1fr;
}
#magazine-panel {
background-color: var(--kbin-section-bg);
border: var(--kbin-options-border);
color: var(--kbin-section-text-color);
margin-bottom: .5rem;
padding: 2rem 1rem;
border-radius: 0 0 .5rem .5rem !important;
height: fit-content;
font-size: 0.8em;
}
#magazine-panel h3 {
border-bottom: var(--kbin-sidebar-header-border);
color: var(--kbin-sidebar-header-text-color);
font-size: .8rem;
margin: 0 0 1rem;
text-transform: uppercase;
}
#magazine-panel ul {
list-style: none;
line-height: 2.5em;
padding-inline: 0;
}
#magazine-panel ul li a img {
height: 1em;
margin-right: 0.4em;
}
#magazine-panel ul li a .padder {
width: 1.4em;
display: inline-block;
}
#subscription-panel-spinner {
text-align: center;
font-size: 2em;
}
`);
/** Create the subscription panel */
const kbinContainer = document.querySelector("#middle > .kbin-container");
const magazinePanel = document.createElement("aside");
const magazinePanelUl = document.createElement("ul");
const title = document.createElement("h3");
magazinePanel.id = "magazine-panel";
title.innerHTML = "Subscriptions";
magazinePanel.appendChild(title);
kbinContainer.appendChild(magazinePanel);
magazinePanel.appendChild(magazinePanelUl);
/** Add spinner */
const spinner = document.createElement("div");
spinner.id = "subscription-panel-spinner";
spinner.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
magazinePanel.appendChild(spinner);
/** Fetch subscription page */
const xhr = new XMLHttpRequest();
xhr.open("GET", "/settings/subscriptions/magazines", true);
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
spinner.remove();
if (this.status === 200) {
/** Parse the page */
let dom = new DOMParser().parseFromString(this.responseText, 'text/html');
let magazinesElements = dom.querySelectorAll(".section.magazines.magazines-columns ul>li");
let magazines = []
/** Find subscriptions */
magazinesElements.forEach((el) => {
let magA = el.querySelector("a")
let mag = {};
mag.name = magA.innerHTML;
mag.url = magA.href;
mag.img = el.querySelector("figure img")?.src;
magazines.push(mag);
});
magazines.sort((a,b) => {
return a.name.localeCompare(b.name);
})
magazines.forEach(mag => {
/** Create the item dom element */
let li = document.createElement("li");
let a = document.createElement("a");
a.href = mag.url;
if (mag.img) {
let img = document.createElement("img");
img.src = mag.img;
a.appendChild(img);
} else {
/** Add some padding when there is no magazine image */
let span = document.createElement("span");
span.className = "padder";
a.appendChild(span);
}
a.appendChild(document.createTextNode(mag.name));
li.appendChild(a);
magazinePanelUl.appendChild(li);
});
} else {
magazinePanel.appendChild(document.createTextNode("Failed to load subscriptions"));
}
}
};
xhr.send();
}
addSubscriptionsSidePanel();
})();