// ==UserScript==
// @name         Floating Subs List
// @namespace    http://tampermonkey.net/
// @version      0.1
// @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
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    var a_login = document.querySelector("#header a.login");
    var a_login_href = a_login.getAttribute("href");

    if (a_login_href !== "/login") {
        var div_head = document.querySelector('#header');
        var div_subs = document.createElement('div');
        var div_subs_s = document.createElement('section');
        var div_subs_c = document.createElement('div');

        GM_addStyle(`#subs-sticky { display: none; }
                 @media only screen and (min-width: 1280px) {
                 #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;
                }
                #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(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);

        $('#subs-sticky .container').load(window.location.origin + a_login_href + "/subscriptions #content .magazines ul", function(){
            var els = $('#subs-sticky li div');
            els = $('#subs-sticky li');
            els.each(function() {
                var fig = $(this).find('figure');
                var a = $(this).find('a');
                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();
            });
        });
    }
})();