Adds a floating list of subscribed magazines to the left of the page
目前为
// ==UserScript==
// @name Floating Subs List
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Adds a floating list of subscribed magazines to the left of the page
// @author raltsm4k
// @match *://kbin.social/*
// @match *://fedia.io/*
// @match *://karab.in/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM.setValue
// @grant GM.getValue
// @license MIT
// ==/UserScript==
let user;
(function() {
'use strict';
const a_login = document.querySelector("#header a.login");
user = a_login.getAttribute("href");
if (user !== "/login") {
const div_head = document.querySelector('#header');
const div_subs = document.createElement('div');
const div_subs_s = document.createElement('section');
const div_subs_c = document.createElement('div');
const button_recent = Object.assign(document.createElement("a"), {
className: "icon sort-button",
id: "sort-recent",
title: "Sort by recent",
}).appendChild(Object.assign(document.createElement("i"), {
className: "fa-solid fa-clock-rotate-left"
})).parentNode;
const button_alpha = Object.assign(document.createElement("a"), {
className: "icon sort-button",
id: "sort-alpha",
title: "Sort alphabetically",
}).appendChild(Object.assign(document.createElement("i"), {
className: "fa-solid fa-arrow-down-a-z"
})).parentNode;
button_recent.addEventListener('click', async () => { await GM_setValue('sort_alpha', false); regen(); });
button_alpha.addEventListener('click', async () => { await GM_setValue('sort_alpha', true); regen(); });
GM_addStyle(`#subs-sticky { display: none; }
@media only screen and (min-width: 1136px) {
#middle .kbin-container {
margin: 0 auto 0 max(calc(200px + 1rem), calc(50vw - 720px + 1rem));
}
#subs-sticky {
display: block;
position:absolute;
top: 100%;
left: max(.5rem, calc(50vw - 680px - 200px - 2rem));
width: 200px;
max-height: calc(100vh - 3.5rem);
overflow-y: auto;
}
a.sort-button {
position: relative;
float: right;
padding-left: .5rem;
}
a.sort-button:hover {
cursor: pointer;
}
a.sort-button:not(.active) {
opacity: 50%;
}
#subs-sticky a {
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow-x: hidden;
display: inherit;
}
#subs-sticky h3 {
border-bottom: var(--kbin-sidebar-header-border);
color: var(--kbin-sidebar-header-text-color);
font-size: .8rem;
margin: 0 0 .5rem;
text-transform: uppercase;
}
#subs-sticky .section {
padding: .5rem .5rem 1rem;
margin: 0;
}
#subs-sticky .section a {
color: var(--kbin-meta-link-color);
}
#subs-sticky .section a:hover {
color: var(--kbin-meta-link-hover-color);
}
#subs-sticky ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#subs-sticky ul li small {
display: none;
}
#subs-sticky figure {
display: inline;
vertical-align: middle;
}
#subs-sticky figure, #subs-sticky img {
border-radius: 100%;
}
#subs-sticky::-webkit-scrollbar {
width: 8px;
}
#subs-sticky::-webkit-scrollbar-track {
background: var(--kbin-bg-nth);
}
#subs-sticky::-webkit-scrollbar-thumb {
background: var(--kbin-section-bg);
}
#subs-sticky::-webkit-scrollbar-thumb:hover {
background: var(--kbin-primary-color);
}
}`);
div_subs_c.className = 'container';
div_subs_s.className = 'section';
div_subs_s.appendChild(button_recent);
div_subs_s.appendChild(button_alpha);
div_subs_s.appendChild(Object.assign(document.createElement('h3'), {
textContent: "Subscribed"
}));
div_subs_s.appendChild(div_subs_c);
div_subs.appendChild(div_subs_s);
div_subs.setAttribute('id', 'subs-sticky');
div_head.appendChild(div_subs);
regen();
}
})();
function regen() {
$('#subs-sticky .container').load(window.location.origin + user + "/subscriptions #content .magazines ul", function(){
var els = $('#subs-sticky li div');
els = $('#subs-sticky li');
els.each(function() {
const fig = $(this).find('figure');
const a = $(this).find('a');
$(this).find('small').remove();
if (fig.length > 0) {
fig.find('img').css({'height': '24px', 'width': '24px'});
a.prepend(fig);
} else {
a.prepend(`<figure style="width:24px; height:24px; margin: 0 3px 3px 0; display:inline-block; background-color: rgba(128, 128, 128, 0.5); text-align: center;">
<i class="fa-solid fa-newspaper" style="opacity:50%; vertical-align: middle;"></i></figure>`);
}
a.removeClass();
});
const do_sort = GM_getValue('sort_alpha');
const button_recent = $('#sort-recent');
const button_alpha = $('#sort-alpha');
if (do_sort === true) {
sort_alpha();
button_alpha.addClass('active');
button_recent.removeClass('active');
} else {
button_recent.addClass('active');
button_alpha.removeClass('active');
}
});
}
function sort_alpha() {
const elems = $('#subs-sticky li').detach().sort(function (a, b) {
return ($(a).text().trim().toLowerCase() < $(b).text().trim().toLowerCase() ? -1
: $(a).text().trim().toLowerCase() > $(b).text().trim().toLowerCase() ? 1 : 0);
});
$('#subs-sticky ul').append(elems);
}