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 2.0
// @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
// ==/UserScript==
(function () {
'use strict';
(()=>{var y=(l,e)=>()=>(l&&(e=l(l=0)),e);var ne=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports);function J(l){if(typeof document<"u"){var e=document.createElement("style"),t=document.createTextNode(l);e.appendChild(t),document.head.appendChild(e)}}var j=y(()=>{});var W=y(()=>{j();J('body.extend-width:not(.subscription-panel-force-mobile) .kbin-container{max-width:1620px}.subscription-panel-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99;background-color:#00000080;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.subscription-panel-modal-content{background-color:var(--kbin-section-bg);border:var(--kbin-options-border);color:var(--kbin-section-text-color);padding:2rem 1rem;height:fit-content;font-size:.8em;position:relative;max-width:600px;min-width:400px;width:100%;animation:modalopen .2s ease-in-out}.subscription-panel-modal-content h1,.subscription-panel-modal-content h2{margin-top:0;text-align:center}.subscription-panel-modal-content .close{color:#aaa;font-size:28px;cursor:pointer;position:absolute;top:.5rem;right:1rem}.subscription-panel-modal-content .close:hover{color:var(--kbin-sidebar-header-text-color)}body.rounded-edges .subscription-panel-modal-content{border-radius:.5rem}body.rounded-edges #subscription-panel-content{border-radius:0 0 .5rem .5rem}body.rounded-edges .subscription-panel-modal .danger{border-radius:.5rem}#subscription-panel .search-box-container{position:relative}#subscription-panel .search-box-clear{position:absolute;top:.6em;right:1em;font-size:1.5em;display:none;cursor:pointer;transition:color .2s ease-in-out;animation:searchBoxClearShow .25s ease-in-out}@keyframes searchBoxClearShow{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}#subscription-panel .search-box-clear:hover{color:var(--kbin-sidebar-header-text-color)}#subscription-panel .search-box-clear.active{display:block}#subscription-panel-edit-button{position:absolute;top:0;left:0;margin:.5rem;padding:.5rem;color:var(--kbin-section-text-color);font-size:.8em;cursor:pointer;transition:font-size .2s ease-in-out}#subscription-panel-edit-button i{transition:transform .2s ease-in-out}#subscription-panel-edit-button:not(.active):hover i{color:var(--kbin-sidebar-header-text-color);transform:rotate(-25deg)}#subscription-panel-edit-button.active{font-size:1.5em}#subscription-panel-edit-button.active:hover{color:var(--kbin-link-hover-color)}#subscription-panel-edit-button.active:hover i{transform:scale(1.2)}#subscription-panel-settings-button{position:absolute;top:0;right:0;margin:.5rem;padding:.5rem;color:var(--kbin-section-text-color);font-size:.8em;cursor:pointer;transition:transform .2s ease-in-out}#subscription-panel-settings-button:hover{color:var(--kbin-sidebar-header-text-color);transform:rotate(25deg)}#subscription-panel-settings-button:active{animation:settingsbuttonclick .5s ease-in-out}@keyframes settingsbuttonclick{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.subscription-panel-settings-modal-content{max-width:600px;min-width:400px}.subscription-panel-settings-modal-content ul{list-style:none;padding-inline:0}.subscription-panel-settings-modal-content ul li{margin-bottom:1rem}.subscription-panel-settings-modal-content ul li label{display:block;margin-bottom:.5rem}.subscription-panel-settings-modal-content ul li label.danger{background-color:RGBA(255,0,0,.1);border:1px solid RGBA(255,0,0,.5);padding:.5rem;color:var(--kbin-section-text-color);margin:2em 0}.subscription-panel-settings-modal-content ul li .description{font-size:.8em;font-weight:100;font-style:italic;opacity:.8}.subscription-panel-settings-modal-content ul li input[type=checkbox]{margin-right:.5rem}.subscription-panel-settings-modal-content ul li input[type=button]{margin-right:.5rem;padding:.5rem}.subscription-panel-settings-modal-content ul li input[type=button]:active{opacity:.8}.subscription-panel-settings-modal-content h2{margin-top:0}@keyframes modalopen{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}#subscription-panel-collapse-button{position:relative;display:inline-block;right:0;margin:.5rem;padding:.5rem;color:var(--kbin-section-text-color);font-size:.8em;cursor:pointer;transition:transform .2s ease-in-out}body.subscription-panel-collapsed #subscription-panel h3:hover #subscription-panel-collapse-button{transform:translate(2px)}#subscription-panel h3:hover #subscription-panel-collapse-button{color:var(--kbin-sidebar-header-text-color);transform:translate(-2px)}body:not(.subscription-panel-force-mobile) #middle>.kbin-container{grid-template-areas:"subscription-panel main sidebar";grid-template-columns:minmax(200px,1fr) 3fr 1fr}body.subscription-panel-collapsed:not(.subscription-panel-force-mobile) #middle>.kbin-container{grid-template-columns:minmax(100px,120px) 3fr 1fr}body.subscription-panel-collapsed.sidebar-left:not(.subscription-panel-force-mobile) #middle>.kbin-container{grid-template-columns:1fr 3fr minmax(100px,120px)}body.subscription-panel-collapsed #middle>.kbin-container #subscription-panel #subscription-panel-collapse-button{margin:0;padding:0 .5em}body.subscription-panel-collapsed #middle>.kbin-container #subscription-panel li{font-size:.8em}body.subscription-panel-collapsed #middle>.kbin-container #subscription-panel li.no-image{padding-left:1.8em}body.subscription-panel-collapsed #middle>.kbin-container #subscription-panel .search-box-container{display:none}body.subscription-panel-collapsed.subscription-panel-hide-on-collapse #middle>.kbin-container #subscription-panel ul{display:none}body.subscription-panel-collapsed.subscription-panel-hide-on-collapse #middle>.kbin-container .last-clicked-container{display:none}body:not(.subscription-panel-force-mobile) .sidebar-left #middle>.kbin-container{grid-template-areas:"sidebar main subscription-panel";grid-template-columns:1fr 3fr minmax(200px,1fr)}body.subscription-panel-collapsed:not(.subscription-panel-force-mobile) .sidebar-left #middle>.kbin-container{grid-template-columns:1fr 3fr minmax(100px,120px)}#subscription-panel-content{background-color:var(--kbin-section-bg);border:var(--kbin-options-border);color:var(--kbin-section-text-color);margin-bottom:.5rem;padding:2rem 1rem;height:fit-content;font-size:.8em;margin-right:.5rem;position:relative}#subscription-panel.edit-mode h3,#subscription-panel.edit-mode .last-clicked-container,#subscription-panel.edit-mode #subscription-panel-settings-button{display:none}#subscription-panel.edit-mode .search-box-container{margin-top:2em}#subscription-panel.edit-mode .group.open>ul{width:auto}#subscription-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;width:100%}#subscription-panel .last-clicked-container{border-bottom:var(--kbin-sidebar-header-border)}#subscription-panel .last-clicked-container.hideItem{display:none}#subscription-panel .last-clicked-container h3{margin-top:1em}#subscription-panel ul{list-style:none;line-height:2.5em;padding-inline:0}#subscription-panel ul.fade-in,#subscription-panel ul li.fade-in{animation:showItem .5s ease-in-out}#subscription-panel ul li{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#subscription-panel ul li.ignore:not(.edit-mode){display:none}#subscription-panel ul li.hideItem{animation:hideItem .25s ease-in-out;animation-fill-mode:forwards}#subscription-panel ul li .magazine{transition:transform .2s ease-in-out;display:inline-block}#subscription-panel ul li .tools .toolItem{display:inline-block;margin-right:.5rem;cursor:pointer;color:var(--kbin-link-color)}#subscription-panel ul li .tools .toolItem:hover{color:var(--kbin-link-hover-color)}#subscription-panel ul li.starred .toolItem.star{color:RGBA(255,215,0,1)}#subscription-panel ul li.starred .toolItem.star:hover{color:RGBA(255,215,0,.8)}#subscription-panel ul li.ignore .toolItem.ignore{color:var(--kbin-link-hover-color)}#subscription-panel ul li.ignore .toolItem.ignore:hover{opacity:.8}#subscription-panel ul li.edit-mode .magazine{transform:translate(3.5em)}#subscription-panel ul li.edit-mode.group .count{display:none}#subscription-panel ul li.edit-mode .tools{display:inline-block;animation:showTools .5s ease-in-out;position:absolute}@keyframes showTools{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}#subscription-panel ul li .tools{display:none}#subscription-panel ul li a img{height:1.4em;margin-right:.5em;border-radius:50%;vertical-align:middle}#subscription-panel ul li.no-image a.magazine{padding-left:1.9em}#subscription-panel ul li.group{font-weight:700}#subscription-panel ul li.group a.group-name .name{margin-left:.5em}#subscription-panel ul li.group a.group-name .count{margin-left:.25em;font-weight:400;opacity:.8}#subscription-panel ul li.group a.group-name .image{font-size:1.2em;vertical-align:middle;width:1.2em}#subscription-panel ul li.group ul{margin-left:.75em;padding-left:.75em;padding-right:.75em;border-left:var(--kbin-sidebar-header-border);border-bottom:var(--kbin-sidebar-header-border);width:fit-content;border-bottom-left-radius:.5rem;display:none}#subscription-panel ul li.group ul li{font-weight:400}#subscription-panel ul li.group.open ul{animation:openGroup .25s ease-in-out;display:block}#subscription-panel .instance-name{opacity:.8;font-weight:100}@keyframes openGroup{0%{transform:translateY(-.5em);opacity:0}to{transform:translateY(0);opacity:1}}#subscription-panel-spinner{text-align:center;font-size:2em}@keyframes showItem{0%{opacity:0}to{opacity:1}}@keyframes hideItem{0%{opacity:1;max-height:2.5em}to{opacity:0;max-height:0}}#header menu li a.subscription-panel-mobile-button{display:none}@keyframes showMobileSubscriptionPanelUL{0%{transform:translateY(-2em)}to{transform:translateY(0)}}@keyframes showMobileSubscriptionPanel{0%{opacity:0}to{opacity:1}}body.subscription-panel-open{overflow:hidden}body.subscription-panel-open #scroll-top{display:none!important}body.subscription-panel-open.subscription-panel-force-mobile #middle>.kbin-container #subscription-panel{height:100%;left:0;width:100%;overflow:hidden;position:fixed;z-index:5;top:0;border-radius:0!important;border:none;margin:0;background:RGBA(0,0,0,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}body.subscription-panel-open.subscription-panel-force-mobile #middle>.kbin-container #subscription-panel #subscription-panel-content{height:100%;overflow:auto;padding:1em 10em;padding-bottom:100px!important;position:fixed;top:49px;width:fit-content;margin:2em 0 0;animation:showMobileSubscriptionPanel .2s ease-out}body.subscription-panel-open.subscription-panel-force-mobile #middle>.kbin-container #subscription-panel ul{animation:showMobileSubscriptionPanelUL .2s ease-out}body.subscription-panel-open.rounded-edges #middle>.kbin-container #subscription-panel-content{border-radius:.5rem}body.subscription-panel-open #header menu li a.subscription-panel-mobile-button{border-bottom:var(--kbin-header-hover-border)}#header menu li a.subscription-panel-mobile-button{font-size:0;cursor:pointer;transition:border-bottom .2s ease-in-out}body.subscription-panel-force-mobile #header menu li a.subscription-panel-mobile-button{display:block}body.subscription-panel-force-mobile #subscription-panel-collapse-button{display:none}a.subscription-panel-mobile-button i{font-size:.85rem}@media (max-width: 991.98px){#header menu li a.subscription-panel-mobile-button{display:block}body #middle>.kbin-container,body.subscription-panel-collapsed #middle>.kbin-container{grid-template-areas:"main main" "subscription-panel subscription-panel" "sidebar sidebar"!important;grid-template-columns:1fr!important}body.subscription-panel-open #middle>.kbin-container #subscription-panel{height:100%;top:0;left:0;position:fixed;width:100%;z-index:2;margin:0;animation:showMobileSubscriptionPanel .2s ease-out}body.subscription-panel-open #middle>.kbin-container #subscription-panel #subscription-panel-content{height:100%;left:0;padding:2em 2em 100px!important;width:100%!important;border-radius:0!important;border:none;top:49px!important;margin:0!important;overflow:auto}body.subscription-panel-open #middle>.kbin-container #subscription-panel ul{animation:showMobileSubscriptionPanelUL .2s ease-out}#subscription-panel-collapse-button{display:none}#subscription-panel-settings-button{right:1em}}@media (hover: none){#header menu li a.subscription-panel-mobile-button:hover{border-bottom:3px solid transparent}}@media (pointer: coarse){#subscription-panel-settings-button{font-size:1.2em}}.subscription-panel-onboarding .subscription-panel-onboarding-content{max-width:800px}.subscription-panel-onboarding-next{margin-top:1em;font-size:2em;text-align:center;display:block}')});function p(){let l=localStorage.getItem("subscription-panel-settings"),e={};return l&&(e=JSON.parse(l)),e.useCache===void 0&&(e.useCache=!0),e.useGroups===void 0&&(e.useGroups=!0),e.showLastClicked===void 0&&(e.showLastClicked=!0),e}function f(l){localStorage.setItem("subscription-panel-settings",JSON.stringify(l))}function F(){localStorage.removeItem("subscription-panel-settings"),localStorage.removeItem("subscription-panel-magazine-data")}var L=y(()=>{});var I,h,M=y(()=>{I=class l{#e;type;fullName;editMode;hidden=!1;element;static get TYPE(){return{MAGAZINE:"magazine",GROUP:"group"}}constructor(e,t){this.fullName=e,this.name=e,this.type=t,this.#e=null,this.editMode=!1}get icon(){return this.#e}getElement(){let e=document.createElement("li");return e.classList.add("item"),e.setAttribute("data-type",this.type),e.setAttribute("data-name",this.fullName),e}enableEditMode(){this.editMode=!0}disableEditMode(){this.editMode=!1}toggleEditMode(){this.editMode?this.disableEditMode():this.enableEditMode()}isStarred(){return!1}isHidden(){return this.hidden}hide(e=!1){this.hidden=!0,this.element&&this.element.classList.add("hideItem")}show(e=!1){this.hidden&&(this.hidden=!1,this.element&&(e&&this.element.classList.contains("hideItem")&&(this.element.addEventListener("animationend",()=>{this.element.classList.remove("fade-in")}),this.element.classList.add("fade-in")),this.element.classList.remove("hideItem")))}toggleHidden(){this.isHidden()?this.hide():this.show()}isIgnored(){return!1}search(e,t=!1){return!t&&this.isIgnored()?!1:this.fullName.toLowerCase().includes(e.toLowerCase())}copy(){return new l(this.fullName,this.type)}},h=I});var T,v,C=y(()=>{M();T=class l extends h{icon;element;starred;constructor(e,t,i=null){super(e,h.TYPE.MAGAZINE),this.icon=i,this.url=t,this.name=e.replace(/@.*/,"");let s=e.match(/@(.*)/);this.instanceName=s?s[1]:null}registerClickTime(){this.appendMagazineData({clickTime:Date.now()})}getMagazineData(){let e=localStorage.getItem("subscription-panel-magazine-data");return e?(e=JSON.parse(e),e=e[this.fullName]||{}):e={},e}getClickTime(){return this.getMagazineData().clickTime||0}appendMagazineData(e){let t=localStorage.getItem("subscription-panel-magazine-data");t?t=JSON.parse(t):t={},t[this.fullName]?t[this.fullName]={...t[this.fullName],...e}:t[this.fullName]=e,localStorage.setItem("subscription-panel-magazine-data",JSON.stringify(t))}static fromElement(e){let t=e.querySelector("a");return new l(t.innerText,t.href,e.querySelector("figure img")?.src)}enableEditMode(){super.enableEditMode(),this.element&&this.element.classList.add("edit-mode")}disableEditMode(){super.disableEditMode(),this.element&&this.element.classList.remove("edit-mode")}toggleStar(){this.getMagazineData()?.starred?this.unstar():this.star()}star(){this.appendMagazineData({starred:!0}),this.element.classList.add("starred"),this.starred=!0}unstar(){this.appendMagazineData({starred:!1}),this.element.classList.remove("starred"),this.starred=!1}isStarred(){return this.starred===void 0&&(this.starred=this.getMagazineData()?.starred===!0),this.starred}ignore(){this.element.classList.add("ignore"),this.ignored=!0,this.appendMagazineData({ignored:!0}),this.element.querySelector(".toolItem.ignore").innerHTML='<i class="fas fa-eye-slash"></i>'}unignore(){this.element.classList.remove("ignore"),this.ignored=!1,this.appendMagazineData({ignored:!1}),this.element.querySelector(".toolItem.ignore").innerHTML='<i class="fas fa-eye"></i>'}toggleIgnored(){this.isIgnored()?this.unignore():this.ignore()}isIgnored(){return this.ignored===void 0&&(this.ignored=this.getMagazineData()?.ignored===!0),this.ignored}getElement(){if(this.element)return this.element;let e=this.getMagazineData(),t=document.createElement("li");e?.starred&&t.classList.add("starred"),this.isIgnored()&&t.classList.add("ignore");let i=Object.assign(document.createElement("span"),{className:"tools"}),s=Object.assign(document.createElement("span"),{className:"star toolItem",title:"Star",innerHTML:'<i class="fas fa-star"></i>',onclick:()=>{this.toggleStar()}}),r=Object.assign(document.createElement("span"),{className:"ignore toolItem",title:"Ignore",innerHTML:this.isIgnored()?'<i class="fas fa-eye-slash"></i>':'<i class="fas fa-eye"></i>',onclick:()=>{this.toggleIgnored()}});i.appendChild(s),i.appendChild(r),t.appendChild(i),this.element=t;let o=document.createElement("a");if(o.href=this.url,o.className="magazine",o.addEventListener("click",()=>{this.registerClickTime()}),o.title=this.fullName,this.icon){let n=document.createElement("img");n.src=this.icon,o.appendChild(n)}else t.classList.add("no-image");let a=document.createElement("span");if(a.className="name",a.appendChild(document.createTextNode(this.name)),o.appendChild(a),this.instanceName){let n=document.createElement("span");n.className="instance-name",n.appendChild(document.createTextNode("@"+this.instanceName)),o.appendChild(n)}return t.appendChild(o),t}static fromJSON(e){return new l(e.fullName,e.url,e.icon)}toJSON(){return{fullName:this.fullName,icon:this.icon,url:this.url,type:this.type}}copy(){return new l(this.fullName,this.url,this.icon)}},v=T});var q,z,O=y(()=>{M();C();q=class l extends h{#e=!1;element;magazines=[];countElement;constructor(e,t){super(e,h.TYPE.GROUP),this.magazines=t,this.name=e}set isOpen(e){this.#e=!!e}get isOpen(){return!!this.#e}get icon(){return this.isOpen?'<i class="fas fa-box-open image"></i>':'<i class="fas fa-box image"></i>'}getClickTime(){let e=0;return this.magazines.forEach(t=>{t.getClickTime()>e&&(e=t.getClickTime())}),e||0}static fromElement(e){let t=e.querySelector("a");return new l(t.innerText,e.querySelector("figure img")?.src,t.href)}toggle(){this.isOpen?this.close():this.open()}open(){this.isOpen=!0,this.element.classList.add("open");let e=this.element.querySelector("a"),t=e.querySelector("i");e.setAttribute("aria-expanded","true"),t.classList.remove("fa-box"),t.classList.add("fa-box-open")}close(){this.isOpen=!1,this.element.classList.remove("open");let e=this.element.querySelector("a"),t=e.querySelector("i");e.setAttribute("aria-expanded","false"),t.classList.remove("fa-box-open"),t.classList.add("fa-box")}getElement(){if(this.element)return this.element;let e=this.magazineCount(),t=document.createElement("li");this.element=t,t.classList.add("group"),(this.isIgnored()||e===0)&&t.classList.add("ignore");let i=document.createElement("a");i.className="group-name",i.href="#",i.title=this.fullName,i.ariaLabel=this.fullName,i.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation(),this.toggle()});let s=Object.assign(document.createElement("span"),{className:"count",innerHTML:"("+e+")"});this.countElement=s,i.innerHTML=this.icon+'<span class="name">'+this.fullName+"</span>",i.appendChild(s),t.appendChild(i);let r=document.createElement("ul");return this.magazines.forEach(o=>{let a=o.getElement();r.appendChild(a)}),t.appendChild(r),t}static fromJSON(e){return new l(e.fullName,e.magazines.map(t=>v.fromJSON(t)))}toJSON(){return{fullName:this.fullName,magazines:this.magazines.map(e=>e.toJSON()),type:this.type}}copy(){return new l(this.fullName,this.magazines.map(e=>e.copy()))}enableEditMode(){super.enableEditMode(),this.element&&(this.magazines.forEach(e=>{e.enableEditMode()}),this.open(),this.element.classList.add("edit-mode"))}disableEditMode(){super.disableEditMode(),this.element&&(this.magazines.forEach(e=>{e.disableEditMode()}),this.close(),this.element.classList.remove("edit-mode"),this.isIgnored()?this.element.classList.add("ignore"):this.element.classList.remove("ignore"),this.countElement.innerHTML="("+this.magazineCount()+")")}isStarred(){return this.magazines.some(e=>e.isStarred())}isIgnored(){return this.magazineCount()===0}hide(e=!1){super.hide(),this.element&&(this.magazines.forEach(t=>{t.hide(e)}),this.element.classList.add("hideItem"))}show(e=!1){super.show(),this.element&&this.magazines.forEach(t=>{t.show()})}magazineCount(){let e=0;return this.magazines.forEach(t=>{t.isIgnored()||e++}),e}search(e,t=!1){let i=super.search(e,t);return!i&&!t&&this.isIgnored()?!1:(this.magazines.forEach(s=>{s.search(e,t)&&(i=!0)}),i)}},z=q});var H,S,N=y(()=>{L();O();C();M();H=class{constructor(){localStorage.removeItem("subscription-panel-cache")}save(e){let t=p(),i={cache:e,timestamp:Date.now(),version:1};t?.useCache&&localStorage.setItem("subscription-panel-item-cache",JSON.stringify(i))}remove(){localStorage.removeItem("subscription-panel-item-cache")}parseItem(e){if(e.type===h.TYPE.MAGAZINE)return new v(e.fullName,e.url,e.icon);if(e.type===h.TYPE.GROUP){let t=[];return e.magazines.forEach(i=>{t.push(this.parseItem(i))}),new z(e.fullName,t)}}get(){if(p()?.useCache){let t=localStorage.getItem("subscription-panel-item-cache");if(t){let i=JSON.parse(t);if(i.version===1){let s=[];return i.cache.forEach(r=>{s.push(this.parseItem(r))}),s}else return this.remove(),[]}}return[]}},S=H});var D,Z,_=y(()=>{L();N();D=class{subscriptionsPanel;modalElement;constructor(e){this.subscriptionsPanel=e}getSettingsButtonElement(){let e=document.createElement("div");return e.id="subscription-panel-settings-button",e.title="Settings",e.ariaLabel="Settings",e.innerHTML='<i class="fa-solid fa-cog"></i>',e.addEventListener("click",()=>{this.show()}),e}init(){let e=this.getSettingsButtonElement();this.subscriptionsPanel.contentElement.appendChild(e),this.applySettings(),window.addEventListener("open-subscriptions-panel-settings",()=>{this.show()})}close(){this.modalElement&&(this.modalElement.remove(),this.modalElement=null)}show(){let e=p(),t=document.createElement("div");this.modalElement=t,t.className="subscription-panel-settings-modal subscription-panel-modal",t.innerHTML=`
<div class="subscription-panel-settings-modal-content subscription-panel-modal-content">
<div class="subscription-panel-settings-modal-header">
<span class="close" title="Close settings" aria-label="Close settings">
<i class="fa-solid fa-times"></i>
</span>
<h2>Subscriptions Panel Settings</h2>
</div>
<div class="subscription-panel-settings-modal-body">
<ul>
<li>
<label>
<input type="checkbox" id="subscription-panel-extend-width" />
Extend page width
<span class="description">Extend the page width to fit the subscriptions panel</span>
</label>
<label>
<input type="checkbox" id="subscription-panel-hide-on-collapse" />
Hide on collapse
<span class="description">Hide magazines when panel is collapsed</span>
</label>
<label>
<input type="checkbox" id="subscription-panel-use-cache" />
Cache subscriptions
<span class="description">Cache subscriptions to load the panel quicker.</span>
</label>
<label>
<input type="checkbox" id="subscription-panel-force-mobile" />
Always show mobile menu
<span class="description">Always show the mobile menu, even on desktop.</span>
</label>
<label>
<input type="checkbox" id="subscription-panel-use-groups" />
Group identical names
<span class="description">Group magazines with the same name but from different instances.</span>
</label>
<label>
<input type="checkbox" id="subscription-panel-show-last-clicked" />
Show recently viewed
<span class="description">Show recently viewed magazines.</span>
</label>
<label>
<input type="checkbox" id="subscription-panel-show-onboarding" />
Show onboarding
<span class="description">Show the onboarding step again on next load.</span>
</label>
<label class="danger">
<input type="button" id="subscription-panel-reset" value="Reset settings"/>
<span class="description">Removes all cached data and resets settings to default.</span>
</label>
</li>
</div>
</div>
`,document.body.appendChild(t);let i=t.querySelector("#subscription-panel-extend-width");e?.extendWidth&&(i.checked=!0);let s=t.querySelector("#subscription-panel-hide-on-collapse");e?.hideOnCollapse&&(s.checked=!0);let r=t.querySelector("#subscription-panel-use-cache");e?.useCache&&(r.checked=!0);let o=t.querySelector("#subscription-panel-show-onboarding");e?.onboardingDone&&(o.checked=!1);let a=t.querySelector("#subscription-panel-force-mobile");e?.forceMobile&&(a.checked=!0);let n=t.querySelector("#subscription-panel-use-groups");e?.useGroups&&(n.checked=!0);let g=t.querySelector("#subscription-panel-show-last-clicked");e?.showLastClicked&&(g.checked=!0),t.querySelector("#subscription-panel-reset").addEventListener("click",()=>{new S().remove(),F(),window.location.reload()}),t.querySelector(".subscription-panel-settings-modal .close").addEventListener("click",()=>{this.close()}),t.addEventListener("click",c=>{c.target===t&&this.close()}),t.querySelector("#subscription-panel-extend-width").addEventListener("change",c=>{let d=p();d.extendWidth=!!c.target.checked,f(d),this.applySettings()}),t.querySelector("#subscription-panel-use-cache").addEventListener("change",c=>{let d=p();c.target.checked?d.useCache=!0:(d.useCache=!1,new S().remove()),f(d),this.applySettings()}),t.querySelector("#subscription-panel-hide-on-collapse").addEventListener("change",c=>{let d=p();d.hideOnCollapse=!!c.target.checked,f(d),this.applySettings()}),t.querySelector("#subscription-panel-show-onboarding").addEventListener("change",c=>{let d=p();d.onboardingDone=!c.target.checked,f(d)}),t.querySelector("#subscription-panel-use-groups").addEventListener("change",c=>{let d=p();d.useGroups=!!c.target.checked;let E=this.subscriptionsPanel.subscriptionsHandler;E.reload().then(()=>{this.subscriptionsPanel.addMagazinesToDOM(E.subscriptions,!0)}),f(d),this.applySettings()}),t.querySelector("#subscription-panel-force-mobile").addEventListener("change",c=>{let d=p();d.forceMobile=!!c.target.checked,f(d),this.applySettings()}),t.querySelector("#subscription-panel-show-last-clicked").addEventListener("change",c=>{let d=p();d.showLastClicked=!!c.target.checked;let E=this.subscriptionsPanel.subscriptionsHandler;E.reload().then(()=>{this.subscriptionsPanel.addMagazinesToDOM(E.subscriptions,!0)}),f(d),this.applySettings()})}applySettings(){let e=p();e?.extendWidth?document.body.classList.add("extend-width"):document.body.classList.remove("extend-width"),e?.collapsed?this.subscriptionsPanel.collapsePanel():this.subscriptionsPanel.expandPanel(),e?.hideOnCollapse?document.body.classList.add("subscription-panel-hide-on-collapse"):document.body.classList.remove("subscription-panel-hide-on-collapse"),e?.forceMobile?document.body.classList.add("subscription-panel-force-mobile"):(document.body.classList.remove("subscription-panel-force-mobile"),this.subscriptionsPanel.closeMobilePanel())}},Z=D});var G,V,X=y(()=>{L();N();C();M();O();G=class{subscriptions;constructor(){this.subscriptions=[]}reload(){return this.subscriptions=[],this.load(1)}sort(){this.subscriptions.sort((e,t)=>e.isStarred()&&!t.isStarred()?-1:!e.isStarred()&&t.isStarred()?1:e.name.localeCompare(t.name))}append(e){let i=p()?.useGroups;e.forEach(r=>{let o=!1;this.subscriptions.some((a,n)=>(a.type===h.TYPE.MAGAZINE&&r.type===h.TYPE.MAGAZINE&&a.url===r.url?o=!0:i&&a.name.toLowerCase()===r.name.toLowerCase()&&(a.type===h.TYPE.GROUP?a.magazines.push(r):this.subscriptions[n]=new z(a.name,[a,r]),o=!0),o)),o||this.subscriptions.push(r)}),this.sort(),new S().save(this.subscriptions)}load(e){e=e||1;let t="https://kbin.social/settings/subscriptions/magazines?p="+e;return fetch(t).then(s=>{let r=document.querySelector("#subscription-panel-spinner");return r&&r.remove(),s.text()}).then(s=>{let r=new DOMParser().parseFromString(s,"text/html"),o=r.querySelectorAll(".section.magazines.magazines-columns ul>li"),a=[];o.forEach(g=>{let u=v.fromElement(g);a.push(u);let c=window.location.pathname.match(/\/m\/(.+?)(\/|$)/);c&&c[1]===u.fullName&&u.registerClickTime()}),this.append(a);let n=r.querySelector("a.pagination__item.pagination__item--next-page")?.href;return n=n?n.match(/p=(\d+)/)[1]:void 0,n=n?parseInt(n):1,e<n&&e<100?this.load(e+1):Promise.resolve()}).catch(s=>(console.error(s),document.querySelector("#subscription-panel-content").appendChild(document.createTextNode("Failed to load subscriptions")),Promise.reject(s)))}loadSubscriptions(e,t){e=e||1;let i=new XMLHttpRequest;i.onreadystatechange=()=>{if(i.readyState===4){let s=document.querySelector("#subscription-panel-spinner");if(s&&s.remove(),i.status===200){let r=new DOMParser().parseFromString(i.responseText,"text/html"),o=r.querySelectorAll(".section.magazines.magazines-columns ul>li"),a=[];o.forEach(g=>{let u=v.fromElement(g);a.push(u),console.log("Checking if we are on the magazine page",window.location.pathname,u.url),window.location&&window.location.pathname===u.url&&(console.log("Registering click time"),u.registerClickTime())}),this.append(a);let n=r.querySelector("a.pagination__item.pagination__item--next-page")?.href;n=n?n.match(/p=(\d+)/)[1]:void 0,n=n?parseInt(n):1,e<n&&e<100?this.loadSubscriptions(e+1,t):t&&t(this.subscriptions)}else document.querySelector("#subscription-panel-content").appendChild(document.createTextNode("Failed to load subscriptions"))}},i.open("GET","/settings/subscriptions/magazines?p="+e,!0),i.send()}},V=G});var A,$,K=y(()=>{N();L();X();C();A=class{subscriptionsHandler;containerElement;contentElement;editMode=!1;constructor(){this.subscriptionsHandler=new V}init(){if(document.querySelector(".login").href.endsWith("/login"))return;let t=document.querySelector("#middle > .kbin-container"),i=document.createElement("div");this.containerElement=i,i.id="subscription-panel";let s=document.createElement("aside");this.contentElement=s;let r=document.createElement("ul");r.className="fade-in subscription-list",r.addEventListener("animationend",()=>{r.classList.remove("fade-in")});let o=document.createElement("h3");s.id="subscription-panel-content",o.innerHTML='<span class="subscription-panel-header">Subscriptions</span>',s.appendChild(o);let a=Object.assign(document.createElement("div"),{id:"subscription-panel-edit-button",title:"Edit subscriptions",ariaLabel:"Edit subscriptions",innerHTML:'<i class="fa-solid fa-pencil"></i>'});a.addEventListener("click",()=>{this.toggleEditMode()}),s.appendChild(a),i.appendChild(s),t.appendChild(i);let n=document.createElement("input");n.type="text",n.id="subscription-panel-search",n.placeholder="Filter",n.addEventListener("input",b=>{let x=b.target.value.toLowerCase();if(x.length===0){w.classList.remove("hideItem"),this.subscriptionsHandler.subscriptions.forEach(m=>{m.show(!0),m.type===v.TYPE.GROUP&&m.close()});return}w.classList.add("hideItem"),this.subscriptionsHandler.subscriptions.forEach(m=>{if(m.type===v.TYPE.GROUP){m.open();let U=!1;m.magazines.forEach(P=>{P.search(x,this.editMode)?(U=!0,P.show(!0)):P.hide(!0)}),U?m.show(!0):m.hide(!0)}else m.type===v.TYPE.MAGAZINE&&(m.search(x,this.editMode)?m.show(!0):m.hide(!0))})});let g=document.createElement("span");g.className="search-box-clear",g.innerHTML='<i class="fa-solid fa-times"></i>',g.addEventListener("click",()=>{n.value="",n.dispatchEvent(new Event("input"))}),n.addEventListener("input",()=>{n.value.length>0?g.classList.add("active"):g.classList.remove("active")}),n.addEventListener("keydown",b=>{b.key==="Escape"&&(n.value="",n.dispatchEvent(new Event("input")))});let u=document.createElement("div");u.className="search-box-container",u.appendChild(n),u.appendChild(g),s.appendChild(u);let c=document.createElement("span");c.id="subscription-panel-collapse-button",c.title="Hide Subscriptions",c.ariaLabel="Hide Subscriptions",c.innerHTML='<i class="fa-solid fa-chevron-left"></i>',o.addEventListener("click",()=>{this.toggleCollapsePanel()}),o.appendChild(c);let d=document.querySelector(".kbin-container > menu"),E=document.createElement("li"),k=document.createElement("a");k.className="subscription-panel-mobile-button",k.title="Subscriptions",k.ariaLabel="Subscriptions",k.href="#",k.innerHTML='<i class="fa-solid fa-newspaper"></i>',k.addEventListener("click",b=>{this.toggleOpenMobilePanel(),b.preventDefault()}),E.appendChild(k),d.insertBefore(E,d.firstChild),i.addEventListener("click",b=>{b.target===i&&document.body.classList.contains("subscription-panel-open")&&document.body.classList.contains("subscription-panel-force-mobile")&&this.closeMobilePanel()}),new MutationObserver(b=>{b.forEach(x=>{x.attributeName==="class"&&x.target.getAttribute(x.attributeName).includes("open")&&this.closeMobilePanel()})}).observe(document.getElementById("sidebar"),{attributes:!0});let w=document.createElement("div");w.className="last-clicked-container",w.appendChild(Object.assign(document.createElement("h3"),{innerText:"Recently viewed"}));let R=document.createElement("ul");R.className="fade-in last-clicked-list",p()?.showLastClicked!==!0&&w.classList.add("hideItem"),w.appendChild(R),s.appendChild(w),s.appendChild(r);let Y=new S().get();if(Y.length>0)this.addMagazinesToDOM(Y,!1);else{let b=document.createElement("div");b.id="subscription-panel-spinner",b.innerHTML='<i class="fa-solid fa-spinner fa-spin"></i>',s.appendChild(b)}this.subscriptionsHandler.load().then(()=>{this.addMagazinesToDOM(this.subscriptionsHandler.subscriptions,!0)})}enableEditMode(){this.editMode=!0,this.containerElement.classList.add("edit-mode"),this.expandPanel(),this.subscriptionsHandler.subscriptions.forEach(t=>{t.enableEditMode()});let e=document.getElementById("subscription-panel-edit-button");e.innerHTML='<i class="fa-solid fa-check"></i> Done',e.classList.add("active")}disableEditMode(){this.editMode=!1,this.containerElement.classList.remove("edit-mode"),this.subscriptionsHandler.subscriptions.forEach(i=>{i.disableEditMode()}),this.subscriptionsHandler.sort(),this.addMagazinesToDOM(this.subscriptionsHandler.subscriptions);let e=document.getElementById("subscription-panel-edit-button");e.innerHTML='<i class="fa-solid fa-pencil"></i>',e.classList.remove("active");let t=document.querySelector("#subscription-panel-search");t.value="",t.dispatchEvent(new Event("input"))}toggleEditMode(){this.editMode?this.disableEditMode():this.enableEditMode()}toggleCollapsePanel(){let e=p();document.body.classList.contains("subscription-panel-collapsed")?(this.expandPanel(),e.collapsed=!1):this.collapsePanel()&&(e.collapsed=!0),f(e)}collapsePanel(){if(window.innerWidth<=991.98||document.body.classList.contains("subscription-panel-force-mobile")||this.editMode)return!1;let e=document.querySelector(".last-clicked-container h3");e&&(e.innerHTML='<i class="fa-solid fa-clock-rotate-left"></i> Recent'),document.body.classList.contains("sidebar-left")?document.querySelector("#subscription-panel-collapse-button i").className="fa-solid fa-chevron-left":document.querySelector("#subscription-panel-collapse-button i").className="fa-solid fa-chevron-right";let t=document.querySelector("#subscription-panel-collapse-button");return t.title="Show subscriptions",t.ariaLabel="Show subscriptions",document.querySelector(".subscription-panel-header").innerHTML='<i class="fa-solid fa-newspaper"></i> Subs',document.body.classList.add("subscription-panel-collapsed"),!0}expandPanel(){document.body.classList.contains("sidebar-left")?document.querySelector("#subscription-panel-collapse-button i").className="fa-solid fa-chevron-right":document.querySelector("#subscription-panel-collapse-button i").className="fa-solid fa-chevron-left";let e=document.querySelector(".last-clicked-container h3");e&&(e.innerText="Recently viewed");let t=document.querySelector("#subscription-panel-collapse-button");return t.title="Hide subscriptions",t.ariaLabel="Hide subscriptions",document.querySelector(".subscription-panel-header").innerText="Subscriptions",document.body.classList.remove("subscription-panel-collapsed"),!0}toggleOpenMobilePanel(){document.body.classList.contains("subscription-panel-open")?this.closeMobilePanel():this.openMobilePanel()}openMobilePanel(){document.body.classList.add("subscription-panel-open"),document.body.classList.contains("fixed-navbar")||window.scrollTo(0,0),document.getElementById("sidebar")?.classList.remove("open")}closeMobilePanel(){document.body.classList.remove("subscription-panel-open")}addMagazinesToDOM(e){let t=document.querySelector("#subscription-panel ul.subscription-list"),i=document.querySelector("#subscription-panel .last-clicked-container"),s=document.querySelector("#subscription-panel ul.last-clicked-list");if(t.innerHTML="",s.innerHTML="",p()?.showLastClicked===!0){i.classList.remove("hideItem");let o=[...e].sort((a,n)=>n.getClickTime()-a.getClickTime()).slice(0,4);o=o.filter(a=>a.getClickTime()>0),o.length===0?i.classList.add("hideItem"):o.forEach(a=>{let n=a.copy().getElement();n.classList.add("last-clicked"),s.appendChild(n)})}else i.classList.add("hideItem");e.forEach(o=>{let a=o.getElement();t.appendChild(a)})}},$=A});var B,Q,ee=y(()=>{L();B=class{modalElement;constructor(){}init(){let e=p();e?.onboardingDone||(console.log("Onboarding not done yet, showing onboarding modal"),e.onboardingDone=!0,f(e),this.show())}close(){this.modalElement&&(this.modalElement.remove(),this.modalElement=null)}show(){let e=document.createElement("div");this.modalElement=e,e.className="subscription-panel-onboarding subscription-panel-modal",e.innerHTML=`
<div class="subscription-panel-onboarding-content subscription-panel-modal-content">
<div class="subscription-panel-onboarding-close close" title="Close onboarding" aria-label="Close onboarding"><i class="fa-solid fa-times"></i></div>
<h2>Thanks for using Subscriptions Panel!</h2>
<p>Click on the <i class="fa-solid fa-chevron-left"></i> icon to collapse the panel.</p>
<p>Click on the <i class="fa-solid fa-cog"></i> icon to open the settings.</p>
<p>Click on the <i class="fa-solid fa-newspaper"></i> icon to open the panel on mobile.</p>
<p>Magazines that share the same name are grouped together. A group is indicated by a <i class="fa-solid fa-box"></i> icon.</p>
<p>Please take a few seconds to review the settings in the next step. You can always do this later if you want.</p>
<a href="#" class="subscription-panel-onboarding-next">Show settings <i class="fa-solid fa-chevron-right"></i></a>
</div>
`,e.querySelector(".subscription-panel-onboarding-close").addEventListener("click",t=>{this.close(),t.preventDefault()}),e.querySelector(".subscription-panel-onboarding-next").addEventListener("click",t=>{this.close(),window.dispatchEvent(new Event("open-subscriptions-panel-settings")),t.preventDefault()}),e.addEventListener("click",t=>{t.target===e&&(this.close(),window.dispatchEvent(new Event("open-subscriptions-panel-settings")),t.preventDefault())}),document.body.appendChild(e)}},Q=B});var oe=ne(()=>{W();_();K();ee();var te=new $,ie=new Z(te),se=new Q(ie);te.init();ie.init();se.init()});oe();})();
})();