From 1913e010b6ed5f0513ca156e32637804da411102 Mon Sep 17 00:00:00 2001 From: defaultkavy Date: Fri, 18 Oct 2024 16:28:32 +0800 Subject: [PATCH] v0.10.0 - new - $DetailPanel on posts gallery page. - new - hotkeys support: - toggle detail panel. - video play pause. - new - LocalSettings --- dist/assets/index-BMZsSbMp.js | 1 - dist/assets/index-BgVVzy-z.css | 1 + dist/assets/index-ByWqsQtl.css | 1 - dist/assets/index-C_KR8nb7.js | 1 + dist/index.html | 4 +- index.scss | 32 +++- package.json | 2 +- src/component/DetailPanel/$DetailPanel.ts | 162 +++++++++++++++++++ src/component/DetailPanel/_$DetailPanel.scss | 162 +++++++++++++++++++ src/component/PostGrid/$PostGrid.ts | 16 +- src/component/PostGrid/_$PostGrid.scss | 13 +- src/component/PostTile/$PostTile.ts | 41 +++-- src/component/PostTile/_$PostTile.scss | 1 + src/main.ts | 39 ++++- src/route/post/$post_route.ts | 113 ++----------- src/route/post/_$post_route.scss | 130 +-------------- src/structure/LocalSettings.ts | 11 ++ src/structure/Post.ts | 3 +- 18 files changed, 457 insertions(+), 276 deletions(-) delete mode 100644 dist/assets/index-BMZsSbMp.js create mode 100644 dist/assets/index-BgVVzy-z.css delete mode 100644 dist/assets/index-ByWqsQtl.css create mode 100644 dist/assets/index-C_KR8nb7.js create mode 100644 src/component/DetailPanel/$DetailPanel.ts create mode 100644 src/component/DetailPanel/_$DetailPanel.scss create mode 100644 src/structure/LocalSettings.ts diff --git a/dist/assets/index-BMZsSbMp.js b/dist/assets/index-BMZsSbMp.js deleted file mode 100644 index 07ef276..0000000 --- a/dist/assets/index-BMZsSbMp.js +++ /dev/null @@ -1 +0,0 @@ -var jt=Object.defineProperty;var xt=r=>{throw TypeError(r)};var Ut=(r,e,t)=>e in r?jt(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var h=(r,e,t)=>Ut(r,typeof e!="symbol"?e+"":e,t),Tt=(r,e,t)=>e.has(r)||xt("Cannot "+t);var L=(r,e,t)=>(Tt(r,e,"read from private field"),t?t.call(r):e.get(r)),et=(r,e,t)=>e.has(r)?xt("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t),st=(r,e,t,s)=>(Tt(r,e,"write to private field"),s?s.call(r,t):e.set(r,t),t);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))s(i);new MutationObserver(i=>{for(const n of i)if(n.type==="childList")for(const o of n.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function t(i){const n={};return i.integrity&&(n.integrity=i.integrity),i.referrerPolicy&&(n.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?n.credentials="include":i.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(i){if(i.ep)return;i.ep=!0;const n=t(i);fetch(i.href,n)}})();class X{constructor(){h(this,"eventMap",new Map)}fire(e,...t){var s;return(s=this.eventMap.get(e))==null||s.forEach(i=>i(...t)),this}on(e,t){const s=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return s==null||s.add(t),this}off(e,t){var s;return(s=this.eventMap.get(e))==null||s.delete(t),this}once(e,t){const s=(...n)=>{var o;(o=this.eventMap.get(e))==null||o.delete(s),t(...n)},i=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return i==null||i.add(s),this}}class Mt{constructor(){h(this,"domEvents",{});h(this,"events",new X)}on(e,t,s){e=$.orArrayResolve(e);for(const i of e){this.domEvents[i]||(this.domEvents[i]=new Map);const n=o=>{t(o,this)};this.domEvents[i].set(t,n),this.events.on(i,t),this.dom.addEventListener(i,n,s)}return this}off(e,t,s){var n;const i=(n=this.domEvents[e])==null?void 0:n.get(t);return i&&this.dom.removeEventListener(e,i,s),this.events.off(e,t),this}once(e,t,s){const i=n=>{this.dom.removeEventListener(e,i,s),t(n,this)};return this.dom.addEventListener(e,i,s),this.events.once(e,t),this}trigger(e){this.dom.dispatchEvent(new Event(e))}}class q extends Mt{constructor(){super(...arguments);h(this,"__$property__",{hidden:!1,coordinate:void 0});h(this,"parent")}hide(t,s=!0){return _.fluent(this,arguments,()=>this.__$property__.hidden,()=>{var i;if(t!==void 0)return t instanceof M?(this.__$property__.hidden=t.value,t.use(this,"hide")):this.__$property__.hidden=t,s&&((i=this.parent)==null||i.children.render()),this})}remove(){var t;return(t=this.parent)==null||t.children.remove(this).render(),this}replace(t){var s;return(s=this.parent)==null||s.children.replace(this,t).render(),this}contains(t){return t?t instanceof q?this.dom.contains(t.dom):t instanceof EventTarget?this.dom.contains(_(t).dom):this.dom.contains(t):!1}coordinate(t){return _.fluent(this,arguments,()=>this.__$property__.coordinate,()=>_.set(this.__$property__,"coordinate",t))}self(t){return _.orArrayResolve(t).forEach(s=>s(this)),this}inDOM(){return document.contains(this.dom)}isElement(){return this instanceof F}get element(){return this instanceof F?this:null}get htmlElement(){return this instanceof B?this:null}}class F extends q{constructor(t,s){super();h(this,"dom");h(this,"static_classes",new Set);this.dom=this.createDom(t,s),this.dom.$=this,this.setOptions(s)}createDom(t,s){return s!=null&&s.dom?s.dom:t==="svg"?document.createElementNS("http://www.w3.org/2000/svg","svg"):document.createElement((s==null?void 0:s.tagname)??t)}setOptions(t){return this.id(t==null?void 0:t.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(s=>this.static_classes.has(s)??this.dom.classList.remove(s)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.add(s)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.delete(s)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,s){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?t?(s===null?this.dom.removeAttribute(t):s!==void 0&&this.dom.setAttribute(t,`${s}`),this):this:this:null}tabIndex(t){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",t))}focus(t){return this.dom.focus(t),this}blur(){return this.dom.blur(),this}animate(t,s,i){const n=this.dom.animate(t,s);return i&&(n.onfinish=()=>i(n)),n}getAnimations(t){return this.dom.getAnimations(t)}get dataset(){return this.dom.dataset}domRect(t){const s=this.dom.getBoundingClientRect();if(!t)return s;const i=t instanceof F?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}}class rt extends q{constructor(t){super();h(this,"dom");this.dom=t,this.dom.$=this}domRect(t){const s={bottom:innerHeight,height:innerHeight,left:0,right:innerWidth,top:0,width:innerWidth,x:0,y:0};if(!t)return s;const i=t instanceof F?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}static from(t){return t.$ instanceof rt?t.$:new rt(t)}}const zt="modulepreload",Gt=function(r){return"/"+r},St={},Kt=function(e,t,s){let i=Promise.resolve();if(t&&t.length>0){document.getElementsByTagName("link");const o=document.querySelector("meta[property=csp-nonce]"),a=(o==null?void 0:o.nonce)||(o==null?void 0:o.getAttribute("nonce"));i=Promise.allSettled(t.map(l=>{if(l=Gt(l),l in St)return;St[l]=!0;const u=l.endsWith(".css"),c=u?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${l}"]${c}`))return;const d=document.createElement("link");if(d.rel=u?"stylesheet":zt,u||(d.as="script"),d.crossOrigin="",d.href=l,a&&d.setAttribute("nonce",a),document.head.appendChild(d),u)return new Promise((p,x)=>{d.addEventListener("load",p),d.addEventListener("error",()=>x(new Error(`Unable to preload CSS for ${l}`)))})}))}function n(o){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=o,window.dispatchEvent(a),!a.defaultPrevented)throw o}return i.then(o=>{for(const a of o||[])a.status==="rejected"&&n(a.reason);return e().catch(n)})};class Bt{constructor(e){h(this,"$container");h(this,"childList",new Set);this.$container=e}add(e,t=-1){if(t===-1||this.childList.size-1===t)this.childList.add(e);else{const s=[...this.childList];s.splice(t,0,e),this.childList.clear(),s.forEach(i=>this.childList.add(i))}e.parent=this.$container}remove(e){return this.childList.has(e)?(this.childList.delete(e),e.parent=void 0,this):this}removeAll(e=!0){this.childList.forEach(t=>this.remove(t)),e&&this.render()}replace(e,t){const s=this.array;return s.splice(s.indexOf(e),1,t),e.remove(),this.childList.clear(),s.forEach(i=>this.childList.add(i)),t.parent=this.$container,this}render(){const[e,t]=[this.array.map(i=>i.dom),Array.from(this.dom.childNodes)],s=[];for(;t.length||e.length;){const[i,n]=[t.at(0),e.at(0)];n?i?n!==i?(n.$.hide()||(this.dom.insertBefore(n,i),s.push(n)),e.shift()):(n.$.hide()&&this.dom.removeChild(n),e.shift(),t.shift()):(n.$.hide()||this.dom.append(n),e.shift()):(i&&!s.includes(i)&&i.remove(),t.shift())}}indexOf(e){return this.array.indexOf(e)}get array(){return[...this.childList.values()]}get dom(){return this.$container.dom}}class M{constructor(e,t){h(this,"_value");h(this,"attributes",new Map);h(this,"linkStates",new Set);h(this,"options",{});this.set(e),t&&(this.options=t)}set(e){this._value=e,e instanceof M&&e.linkStates.add(this),this.update(),this.linkStates.forEach(t=>t.update())}static toJSON(e){const t={};for(let[s,i]of Object.entries(e))i instanceof M?i=i.toJSON():i instanceof Object&&M.toJSON(i),Object.assign(t,{[s]:i});return t}update(){for(const[e,t]of this.attributes.entries())for(const s of t)e[s]instanceof Function?this.options.format?e[s](this.options.format(this.value)):e[s](this.value):s in e&&(e[s]=this.value)}use(e,t){const s=this.attributes.get(e);s?s.add(t):this.attributes.set(e,new Set().add(t))}convert(e){return new M(this,{format:e})}get value(){return this._value instanceof M?this._value.value:this._value}toString(){return this.options.format?this.options.format(this.value):this.value instanceof Object?JSON.stringify(this.toJSON()):`${this.value}`}toJSON(){return this.value instanceof M?this.value.toJSON():this.value instanceof Object?M.toJSON(this.value):this.toString()}}class Q extends q{constructor(t){super();h(this,"dom");this.dom=new Text(t),this.dom.$=this}content(t){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",t))}}class B extends F{constructor(e,t){super(e,t)}autocapitalize(e){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",e))}innerText(e){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",e))}title(e){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",e))}dir(e){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",e))}translate(e){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",e))}popover(e){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",e))}spellcheck(e){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",e))}inert(e){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",e))}lang(e){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",e))}draggable(e){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",e))}hidden(e){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",e))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}}class m extends B{constructor(t,s){super(t,s);h(this,"children",new Bt(this));h(this,"__position_cursor",0)}content(t){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(t)})}insert(t,s=-1){return $.fluent(this,arguments,()=>this,async()=>{if(t instanceof Function){let i=t(this);i instanceof Promise?t=await i:t=i}else t instanceof Promise&&(t=await t);t=$.orArrayResolve(t),this.__position_cursor=s<0?this.children.array.length+s:s;for(const i of t)if(i!=null){if(i instanceof Array)this.insert(i,this.__position_cursor);else if(typeof i=="string")this.children.add(new Q(i),s);else if(i instanceof M){const n=new Q(i.toString());i.use(n,"content"),this.children.add(n,s)}else if(i instanceof Promise){const n=(await Kt(async()=>{const{$Async:a}=await Promise.resolve().then(()=>se);return{$Async:a}},void 0)).$Async,o=new n().await(i);this.children.add(o,s)}else this.children.add(i,s);this.__position_cursor+=1}this.children.render()})}clear(){return this.children.removeAll(),this}$(t){if(t.startsWith("::"))return Array.from(document.querySelectorAll(t.replace(/^::/,""))).map(s=>$(s));if(t.startsWith(":"))return $(document.querySelector(t.replace(/^:/,"")))}get scrollHeight(){return this.dom.scrollHeight}get scrollWidth(){return this.dom.scrollWidth}scrollTop(t){return $.fluent(this,arguments,()=>this.dom.scrollTop,()=>$.set(this.dom,"scrollTop",t))}scrollLeft(t){return $.fluent(this,arguments,()=>this.dom.scrollLeft,()=>$.set(this.dom,"scrollLeft",t))}}class Xt extends m{constructor(e){super("a",e),this.dom.addEventListener("click",t=>{$.anchorHandler&&this.href()&&(t.preventDefault(),$.anchorHandler(this,t))})}href(e){return $.fluent(this,arguments,()=>this.dom.href,()=>$.set(this.dom,"href",e))}target(e){return $.fluent(this,arguments,()=>this.dom.target??void 0,()=>{e&&(this.dom.target=e)})}}class qt extends F{constructor(e,t){super(e,t)}}var O;(r=>{function e(a,l,u,c){return l.length?(c(),a):u()}r.fluent=e;function t(a){return a instanceof Array?a:[a]}r.orArrayResolve=t;function s(a,l){return t(l).forEach(u=>{Object.getOwnPropertyNames(u.prototype).forEach(c=>{c!=="constructor"&&Object.defineProperty(a.prototype,c,Object.getOwnPropertyDescriptor(u.prototype,c)||Object.create(null))})}),a}r.mixin=s;function i(a,l,u){u!==void 0&&(a[l]=u)}r.set=i;function n(a){return new M(a)}r.state=n;function o(a){if(a.$)return a.$;if(a.nodeName.toLowerCase()==="body")return new m("body",{dom:a});if(a.nodeName.toLowerCase()==="head")return new m("head",{dom:a});if(a.nodeName.toLowerCase()==="#document")return rt.from(a);if(a instanceof HTMLElement){const l=$.TagNameElementMap[a.tagName.toLowerCase()],u=l?l===m?new l(a.tagName,{dom:a}):new l({dom:a}):new m(a.tagName,{dom:a});if(u instanceof m)for(const c of Array.from(u.dom.childNodes))u.children.add($(c));return u}else if(a instanceof Text){const l=new Q(a.textContent??"");return l.dom=a,l}else if(a instanceof SVGElement&&a.tagName.toLowerCase()==="svg")return new qt("svg",{dom:a});throw`$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE (${a.nodeName})`}r.from=o})(O||(O={}));class D{static create(...e){const t=class{};return Object.getOwnPropertyNames(D.prototype).forEach(s=>{s!=="constructor"&&e.includes(s)&&Object.defineProperty(t.prototype,s,Object.getOwnPropertyDescriptor(D.prototype,s)||Object.create(null))}),t}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}formAction(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}formEnctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}formMethod(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}formNoValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}formTarget(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}name(e){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",e))}maxLength(e){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",e))}minLength(e){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}label(e){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",e))}get form(){return this.dom.form?$(this.dom.form):null}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}class wt extends m{constructor(e){super("button",e)}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}}O.mixin(wt,D.create("disabled","checkValidity","formAction","formEnctype","formMethod","formNoValidate","formTarget","reportValidity"));class Et extends m{constructor(e){super("form",e)}action(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}enctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}method(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}noValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}acceptCharset(e){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",e))}target(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(e=>$(e))}}O.mixin(Et,D.create("checkValidity","reportValidity","autocomplete"));class P extends B{constructor(e){super("input",e)}value(e){return $.fluent(this,arguments,()=>this.type()==="number"?Number(this.dom.value):this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}capture(e){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",e))}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}pattern(e){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}size(e){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}valueAsDate(e){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",e))}valueAsNumber(e){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",e))}webkitdirectory(e){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}showPicker(){return this.dom.showPicker(),this}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}O.mixin(P,D.create("checkValidity","reportValidity","autocomplete","name","form","required","validationMessage","validity","willValidate","formAction","formEnctype","formMethod","formNoValidate","formTarget"));class Qt extends P{constructor(e){super(e),this.type("number")}static from(e){return $.mixin(P,this)}stepDown(){return this.dom.stepDown(),this}stepUp(){return this.dom.stepUp(),this}max(e){return $.fluent(this,arguments,()=>this.dom.max===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"max",e==null?void 0:e.toString()))}min(e){return $.fluent(this,arguments,()=>this.dom.min===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"min",e==null?void 0:e.toString()))}step(e){return $.fluent(this,arguments,()=>Number(this.dom.step),()=>$.set(this.dom,"step",e==null?void 0:e.toString()))}}class Jt extends P{constructor(e){super(e),this.type("radio")}static from(e){return $.mixin(P,this)}checked(e){return $.fluent(this,arguments,()=>this.dom.checked,()=>$.set(this.dom,"checked",e))}defaultChecked(e){return $.fluent(this,arguments,()=>this.dom.defaultChecked,()=>$.set(this.dom,"defaultChecked",e))}}class Yt extends P{constructor(e){super(e),this.type("file")}static from(e){return $.mixin(P,this)}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}accept(...e){return $.fluent(this,arguments,()=>this.dom.accept.split(","),()=>this.dom.accept=e.toString())}}O.mixin(P,[Qt,Jt,Yt]);class Lt extends m{constructor(e){super("label",e)}for(e){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",e)})}get control(){return this.dom.control}}O.mixin(Lt,D.create("form"));class Zt extends B{constructor(e){super("img",e)}async load(e){return new Promise(t=>{const s=this.once("load",()=>{t(s)});typeof e=="string"?s.src(e):e.then(i=>s.src(i))})}static resize(e,t){return new Promise(s=>{const i=new Image;if(i.addEventListener("load",()=>{const n=document.createElement("canvas"),o=n.getContext("2d");if(!o)throw"$Image.resize: context undefined";const a=i.width/i.height,[l,u,c]=[a>1,a<1,a===1],d=t instanceof Array?t[0]:u?t:t*a,p=t instanceof Array?t[1]:l?t:t/a;n.height=p,n.width=d,o.drawImage(i,0,0,d,p),s(n.toDataURL())},{once:!0}),e instanceof File){const n=new FileReader;n.addEventListener("load",()=>i.src=n.result),n.readAsDataURL(e)}else i.src=e})}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}decoding(e){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}isMap(e){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",e))}loading(e){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",e))}referrerPolicy(e){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",e))}sizes(e){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcset(e){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",e))}useMap(e){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class te extends m{constructor(e){super("canvas",e)}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",e)})}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",e)})}captureStream(e){return this.dom.captureStream(e)}getContext(e,t){return this.dom.getContext(e)}toBlob(e,t,s){return this.dom.toBlob(e,t,s),this}toDataURL(e,t){return this.dom.toDataURL(e,t)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class ee extends m{constructor(e){super("dialog",e)}open(e){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",e))}returnValue(e){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",e))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}class At extends m{constructor(e){super("select")}add(e){return this.insert(e),this}item(e){return $(this.dom.item(e))}namedItem(e){return $(this.dom.namedItem(e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(e=>$(e))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(e=>$(e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}O.mixin(At,D.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","validationMessage","validity","willValidate"));class Pt extends m{constructor(e){super("option",e)}defaultSelected(e){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",e))}selected(e){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",e))}text(e){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}O.mixin(Pt,D.create("form","disabled","label"));class Ct extends m{constructor(e){super("optgroup",e)}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}}O.mixin(Ct,D.create("disabled","label"));class Dt extends m{constructor(e){super("textarea",e)}cols(e){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",e))}wrap(e){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}O.mixin(Dt,D.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","minLength","maxLength","validationMessage","validity","willValidate"));var nt;class Rt extends m{constructor(t){super("async",t);et(this,nt,!1)}await(t){return t instanceof Function?t(this).then(s=>this._loaded(s)):t.then(s=>this._loaded(s)),this}_loaded(t){if(st(this,nt,!0),typeof t=="string")this.replace(new Q(t));else if(t instanceof M){const s=new Q(t.toString());t.use(s,"content"),this.replace(s)}else t==null?this.replace(new Q(String(t))):this.replace(t);this.dom.dispatchEvent(new Event("load"))}get loaded(){return L(this,nt)}}nt=new WeakMap;const se=Object.freeze(Object.defineProperty({__proto__:null,$Async:Rt},Symbol.toStringTag,{value:"Module"}));class ie extends B{constructor(e,t){super(e,t)}autoplay(e){return $.fluent(this,arguments,()=>this.dom.autoplay,()=>$.set(this.dom,"autoplay",e))}get buffered(){return this.dom.buffered}controls(e){return $.fluent(this,arguments,()=>this.dom.controls,()=>$.set(this.dom,"controls",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}get currentSrc(){return this.dom.currentSrc}currentTime(e){return $.fluent(this,arguments,()=>this.dom.currentTime,()=>$.set(this.dom,"currentTime",e))}defaultMuted(e){return $.fluent(this,arguments,()=>this.dom.defaultMuted,()=>$.set(this.dom,"defaultMuted",e))}defaultPlaybackRate(e){return $.fluent(this,arguments,()=>this.dom.defaultPlaybackRate,()=>$.set(this.dom,"defaultPlaybackRate",e))}disableRemotePlayback(e){return $.fluent(this,arguments,()=>this.dom.disableRemotePlayback,()=>$.set(this.dom,"disableRemotePlayback",e))}get duration(){return this.dom.duration}get ended(){return this.dom.ended}get error(){return this.dom.error}loop(e){return $.fluent(this,arguments,()=>this.dom.loop,()=>$.set(this.dom,"loop",e))}mediaKeys(e){return $.fluent(this,arguments,()=>this.dom.mediaKeys,()=>$.set(this.dom,"setMediaKeys",[e]))}muted(e){return $.fluent(this,arguments,()=>this.dom.muted,()=>$.set(this.dom,"muted",e))}get networkState(){return this.dom.networkState}get paused(){return this.dom.paused}playbackRate(e){return $.fluent(this,arguments,()=>this.dom.playbackRate,()=>$.set(this.dom,"playbackRate",e))}get played(){return this.dom.played}preload(e){return $.fluent(this,arguments,()=>this.dom.preload,()=>$.set(this.dom,"preload",e))}preservesPitch(e){return $.fluent(this,arguments,()=>this.dom.preservesPitch,()=>$.set(this.dom,"preservesPitch",e))}get readyState(){return this.dom.readyState}get remote(){return this.dom.remote}get seekable(){return this.dom.seekable}get seeking(){return this.dom.seeking}sinkId(e){return $.fluent(this,arguments,()=>this.dom.sinkId,()=>$.set(this.dom,"setSinkId",[e]))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcObject(e){return $.fluent(this,arguments,()=>this.dom.srcObject,()=>$.set(this.dom,"srcObject",e))}get textTracks(){return this.dom.textTracks}volume(e){return $.fluent(this,arguments,()=>this.dom.volume,()=>$.set(this.dom,"volume",e))}addTextTrack(e,t,s){return this.dom.addTextTrack(e,t,s)}canPlayType(e){return this.dom.canPlayType(e)}fastSeek(e){return this.dom.fastSeek(e),this}load(){return this.dom.load(),this}pause(){return this.dom.pause(),this}async play(){return await this.dom.play(),this}get isPlaying(){return this.currentTime()>0&&!this.paused&&!this.ended&&this.readyState>2}}class re extends ie{constructor(e){super("video",e)}disablePictureInPicture(e){return $.fluent(this,arguments,()=>this.dom.disablePictureInPicture,()=>$.set(this.dom,"disablePictureInPicture",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}playsInline(e){return $.fluent(this,arguments,()=>this.dom.playsInline,()=>$.set(this.dom,"playsInline",e))}poster(e){return $.fluent(this,arguments,()=>this.dom.poster,()=>$.set(this.dom,"poster",e))}get videoHeight(){return this.dom.videoHeight}get videoWidth(){return this.dom.videoWidth}cancelVideoFrameCallback(e){return this.dom.cancelVideoFrameCallback(e),this}getVideoPlaybackQuality(){return this.dom.getVideoPlaybackQuality()}requestPictureInPicture(){return this.dom.requestPictureInPicture()}requestVideoFrameCallback(e){return this.dom.requestVideoFrameCallback(e)}}const ut=class ut extends Mt{constructor(){super(...arguments);h(this,"dom",window)}};h(ut,"$",new ut);let mt=ut;class ne{constructor(e){h(this,"keyMap",new Map);h(this,"conditional");e.on("keydown",t=>{var s;this.conditional&&!this.conditional(t)||(s=this.keyMap.get(t.key))==null||s.keydown.forEach(i=>i(t))}),e.on("keyup",t=>{var s;this.conditional&&!this.conditional(t)||(s=this.keyMap.get(t.key))==null||s.keyup.forEach(i=>i(t))}),e.on("keypress",t=>{var s;this.conditional&&!this.conditional(t)||(s=this.keyMap.get(t.key))==null||s.keypress.forEach(i=>i(t))})}if(e){return this.conditional=e,this}assigns(e,t,s){e=O.orArrayResolve(e),t=O.orArrayResolve(t);for(const i of e){const n=this.keyMap.get(i)??{keydown:new Set,keypress:new Set,keyup:new Set};for(const o of t)n[o].add(s);this.keyMap.set(i,n)}return this}unassign(e,t,s){e=O.orArrayResolve(e),t=t?O.orArrayResolve(t):["keydown","keypress","keyup"];for(const i of e){const n=this.keyMap.get(i)??{keydown:new Set,keypress:new Set,keyup:new Set};for(const o of t)s?n[o].delete(s):n[o].clear();this.keyMap.set(i,n)}return this}keydown(e,t){return this.assigns(e,"keydown",t),this}keyup(e,t){return this.assigns(e,"keyup",t),this}keypress(e,t){return this.assigns(e,"keypress",t),this}}function _(r){if(typeof r>"u"||r===null||r instanceof q)return r;if(typeof r=="string"){if(r.startsWith("::"))return Array.from(document.querySelectorAll(r.replace(/^::/,""))).map(e=>_(e));if(r.startsWith(":"))return _(document.querySelector(r.replace(/^:/,"")));if(r in _.TagNameElementMap){const e=_.TagNameElementMap[r];return e===B?new B(r):e===m?new m(r):new e}else return new m(r)}if(r instanceof Node)return r.$?r.$:O.from(r);if(r instanceof Window)return mt.$;throw`$: NOT SUPPORT TARGET ELEMENT TYPE ('${r}')`}(r=>{r.anchorHandler=null,r.TagNameElementMap={html:m,head:m,document:rt,body:m,a:Xt,p:m,pre:m,code:m,blockquote:m,strong:m,h1:m,h2:m,h3:m,h4:m,h5:m,h6:m,div:m,ol:m,ul:m,dl:m,li:m,input:P,label:Lt,button:wt,form:Et,img:Zt,dialog:ee,canvas:te,select:At,option:Pt,optgroup:Ct,textarea:Dt,video:re,async:Rt};function e(f,g,b,S){return g.length?(S(),f):b()}r.fluent=e;function t(f){return f instanceof Array?f:[f]}r.orArrayResolve=t;function s(f,g){return O.mixin(f,g)}r.mixin=s;function i(f,g,b,S){if(b!==void 0){if(b instanceof M){b.use(f,g),f[g]instanceof Function?f[g](...b.value):f[g]=b.value,S&&S(b);return}f[g]instanceof Function?f[g](...b):f[g]=b}}r.set=i;function n(f,g){return new M(f,g)}r.state=n;async function o(f,g){return new Promise(b=>{const S=new FileReader;S.onload=E=>{const T=r("img");if(T.once("load",V=>{const C=r("canvas"),U=C.getContext("2d"),z=T.height()/T.width(),[Z,tt]=[z>1?g/z:g,z>1?g:g*z];C.height(tt).width(Z),U==null||U.drawImage(T.dom,0,0,Z,tt),b(C.toDataURL(f.type))}),!E.target)throw"$.resize(): e.target is null";T.src(E.target.result)},S.readAsDataURL(f)})}r.resize=o;function a(f=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*f}r.rem=a;function l(f){const g=new DOMParser().parseFromString(f,"text/html").body;return Array.from(g.children).map(b=>r(b))}r.html=l;function u(f,g,b){if(typeof g=="number")return Array(g).fill("").map(E=>{const T=S(f)?f[0](...f.slice(1)):r(f);return b&&b(T),T});{const E=[];for(const T of g){const V=f instanceof Function?f(...T):S(f)?f[0](...f.slice(1)):r(f);T instanceof Function?T(V):(T instanceof q||typeof T=="string")&&V.content(T),E.push(V)}return E}function S(E){return E instanceof Array&&E[0]instanceof Function}}r.builder=u;function c(f,g){return Object.assign(r.TagNameElementMap,{[f]:g}),r.TagNameElementMap}r.registerTagName=c;function d(){return new X}r.events=d;function p(f){return new he(f)}r.pointers=p;function x(f){return new ne(f)}r.keys=x;function w(){return new oe}r.focus=w;function I(f){return f()}r.call=I})(_||(_={}));globalThis.$=_;class oe{constructor(){h(this,"layerMap",new Map);h(this,"currentLayer");h(this,"historyList",[])}layer(e){const t=this.layerMap.get(e)??new ae(e);return this.layerMap.set(t.id,t),t}next(){return this.select(0)}prev(){return this.select(1)}up(){return this.select(2)}down(){return this.select(3)}right(){return this.select(4)}left(){return this.select(5)}blur(){var e;return(e=this.currentLayer)==null||e.blur(),this}select(e){var n;if(this.currentLayer=this.currentLayer??[...this.layerMap.values()].at(0),!this.currentLayer)return this;const t=this.currentLayer.currentFocus,s=this.currentLayer.elementSet.array;if(!t)return this.currentLayer.focus(this.currentLayer.beforeBlur??s.at(0)),this;const i=s.indexOf(t);switch(e){case 0:case 1:{let o=e===0?i+1:i-1;(o===s.length&&this.currentLayer.loop()||o===-1&&!this.currentLayer.loop())&&(o=0),this.currentLayer.focus(s.at(o));break}case 3:case 5:case 4:case 2:{const o=t.coordinate();if(!o)break;const a=$.call(()=>{switch(e){case 2:return{y:o.y,x:o.x/2};case 3:return{y:o.y+o.height,x:o.x/2};case 5:return{y:o.y/2,x:o.x};case 4:return{y:o.y/2,x:o.x+o.width}}}),u=(n=s.map(c=>{if(c===t)return;const d=c.coordinate();if(!d)return;const p=$.call(()=>{switch(e){case 2:return{y:d.y+d.height,x:d.x/2};case 3:return{y:d.y,x:d.x/2};case 5:return{y:d.y/2,x:d.x+d.width};case 4:return{y:d.y/2,x:d.x}}});return{$ele:c,elePosition:d,distance:Math.sqrt((p.x-a.x)**2+(p.y-a.y)**2)}}).detype(void 0).filter(({elePosition:c})=>{switch(e){case 2:if(c.y+c.height>=o.y)return!1;break;case 3:if(c.y<=o.y+o.height)return!1;break;case 5:if(c.x+c.width>=o.x)return!1;break;case 4:if(c.x<=o.x+o.width)return!1;break}return!0}).sort((c,d)=>c.distance-d.distance).at(0))==null?void 0:n.$ele;this.currentLayer.focus(u)}}return this}}class ae{constructor(e){h(this,"id");h(this,"elementSet",new Set);h(this,"entrySet",new Set);h(this,"beforeBlur");h(this,"currentFocus");h(this,"__$property__",{loop:!0,scrollThreshold:0});this.id=e,this.add=this.add.bind(this),this.entry=this.entry.bind(this)}add(e){return $.orArrayResolve(e).forEach(t=>{this.elementSet.add(t),t.tabIndex(0)}),this}remove(e){return this.elementSet.delete(e),this}entry(e){return $.orArrayResolve(e).forEach(this.entrySet.add.bind(this.entrySet)),this}focus(e){if(!e)return this;e.hide(!1);const{scrollTop:t,scrollLeft:s}=document.documentElement,i=$.call(()=>{const o=e.domRect();return{left:o.left+s,top:o.top+t,right:o.right+s,bottom:o.bottom+t,height:o.height,width:o.width}}),{scrollThreshold:n}=this.__$property__;return this.blur(),this.currentFocus=e,(t>i.top-n||t>i.bottom+n)&&document.documentElement.scrollTo({left:i.left-n,top:i.top-n}),(t+innerHeightthis.__$property__.loop,()=>$.set(this.__$property__,"loop",e))}scrollThreshold(e){return $.fluent(this,arguments,()=>this.__$property__.scrollThreshold,()=>$.set(this.__$property__,"scrollThreshold",e))}}class he extends X{constructor(t){super();h(this,"$node");h(this,"map",new Map);this.$node=t,this.$node.on("pointerdown",s=>this.down(s)),this.$node.on("pointerup",s=>this.up(s)),this.$node.on("pointermove",s=>this.move(s)),this.$node.on("pointercancel",s=>this.cancel(s))}down(t){const s=new le(this,this.toData(t),$(t.target));this.map.set(s.id,s),this.fire("down",s,t)}up(t){const s=this.map.get(t.pointerId);s&&(this.map.delete(t.pointerId),this.fire("up",s,t))}move(t){const s=this.map.get(t.pointerId);s&&(this.map.set(s.id,s),s.update(this.toData(t)),this.fire("move",s,t))}cancel(t){const s=this.map.get(t.pointerId);s&&(s.update(this.toData(t)),this.map.delete(s.id),this.fire("cancel",s,t))}toData(t){return{id:t.pointerId,type:t.pointerType,width:t.width,height:t.height,x:t.x,y:t.y,movement_x:t.movementX,movement_y:t.movementY}}}class le{constructor(e,t,s){h(this,"initial_x");h(this,"initial_y");h(this,"$target");h(this,"manager");Object.assign(this,t),this.manager=e,this.$target=s,this.initial_x=t.x,this.initial_y=t.y}get move_x(){return this.x-this.initial_x}get move_y(){return this.y-this.initial_y}update(e){return Object.assign(this,e),this}delete(){return this.manager.map.delete(this.id),this}}Array.prototype.detype=function(...r){return this.filter(e=>{if(r.length)for(const t of r)return typeof e!=typeof t;else return e!==void 0})};Object.defineProperties(Set.prototype,{array:{get:function(){return Array.from(this)}}});Set.prototype.sort=function(r){return this.array.sort(r)};class Nt extends m{constructor(t){super("layout",t);h(this,"_property",{ROW_MAX_HEIGHT:200,GAP:0,IS_RENDERING:!1,RENDER_REQUEST:!1,COLUNM:1,TYPE:"justified",ROOT:null,ITEM_PROPERTIES:new Map});this.css({display:"block",position:"relative"}),new ResizeObserver(s=>{this.inDOM()&&(this.render(),this.dom.dispatchEvent(new Event("resize")))}).observe(this.dom),document.addEventListener("scroll",s=>{s.target===this.root().dom&&this.scrollCompute()},{passive:!0}),new IntersectionObserver(s=>{this.inDOM()&&this.render()}).observe(this.dom)}type(t){return $.fluent(this,arguments,()=>this._property.TYPE,()=>$.set(this._property,"TYPE",t))}maxHeight(t){return $.fluent(this,arguments,()=>this._property.ROW_MAX_HEIGHT,()=>$.set(this._property,"ROW_MAX_HEIGHT",t))}column(t){return $.fluent(this,arguments,()=>this._property.COLUNM,()=>$.set(this._property,"COLUNM",t))}gap(t){return $.fluent(this,arguments,()=>this._property.GAP,()=>$.set(this._property,"GAP",t))}root(t){return $.fluent(this,arguments,()=>this._property.ROOT??$(document),()=>$.set(this._property,"ROOT",t))}get COL_WIDTH(){return(this.offsetWidth-this._property.GAP*(this._property.COLUNM-1))/this._property.COLUNM}justifiedCompute(){const t=[],s=this.offsetWidth;for(const i of this.children.array){const n=$(i);if(!(n instanceof F))continue;const o=n.attribute("layout-item-ratio"),a=o?parseFloat(o):n.dom.offsetWidth/n.dom.offsetHeight,l={$node:n,ratio:a};let u=t.at(-1);(!u||u.heightc+=x.ratio);const d=c+a,p=(s-this._property.GAP*u.items.length)/d;u.items.push(l),u.ratio=d,u.height=p}return t}waterfallCompute(){const t=[],s=this.COL_WIDTH,i=()=>{if(t.lengthn.height-o.height)[0]};for(const n of this.children.array){const o=$(n);if(!(o instanceof F))continue;const a=o.attribute("layout-item-ratio"),l=a?parseFloat(a):o.dom.offsetWidth/o.dom.offsetHeight,u={$node:o,ratio:l},c=i();let d=0;c.items.forEach(w=>d+=w.ratio);const p=s/(c.height+s/l),x=s/p;c.items.push(u),c.ratio=p,c.height=x}return t}render(){if(!this.inDOM())return this;if(this._property.ITEM_PROPERTIES.clear(),this._property.TYPE==="justified"){const t=this.justifiedCompute();let s=0;for(const i of t){let n=0;i.height>this._property.ROW_MAX_HEIGHT&&(i.height=this._property.ROW_MAX_HEIGHT);for(const o of i.items){const a=o.ratio*i.height;o.$node.css({position:"absolute",height:`${i.height}px`,width:`${a}px`,top:`${s}px`,left:`${n}px`}),o.$node.attribute("layout-item-ratio",o.ratio),this._property.ITEM_PROPERTIES.set(o.$node,{height:i.height,width:a,top:s,left:n,ratio:o.ratio,$node:o.$node}),o.$node.coordinate({x:n,y:s,height:i.height,width:a}),n+=i.height*o.ratio+this._property.GAP}s+=i.height+this._property.GAP}this.css({height:`${s}px`})}else if(this._property.TYPE="waterfall"){const t=this.waterfallCompute(),s=this.COL_WIDTH;let i=0;for(const n of t){let o=0;for(const a of n.items){const l=s/a.ratio;a.$node.css({position:"absolute",height:`${l}px`,width:`${s}px`,top:`${o}px`,left:`${i}px`}),a.$node.attribute("layout-item-ratio",a.ratio),this._property.ITEM_PROPERTIES.set(a.$node,{height:l,width:s,top:o,left:i,ratio:a.ratio,$node:a.$node}),a.$node.coordinate({x:i,y:o,height:l,width:s}),o+=l+this._property.GAP}i+=s+this._property.GAP}if(t.length){const n=t.sort((o,a)=>a.height-o.height)[0];this.css({height:`${n.height+n.items.length*this._property.GAP}px`})}else this.css({height:""})}return this.scrollCompute(),this}scrollCompute(){if(this.inDOM()===!1)return;const t=document.documentElement.scrollTop-this.dom.offsetTop;this._property.ITEM_PROPERTIES.forEach((s,i)=>{const n=s.top,o=s.top+s.height;document.activeElement!==i.dom&&(o>t&&n{this.contentId=t,this.events.fire("rendered",{$view:this,previousContent:i,nextContent:s})},a=()=>{this.events.fire("afterSwitch",{$view:this,previousId:t})};return this.events.fire("beforeSwitch",{$view:this,preventDefault:()=>n=!0,targetId:t,previousContent:i,nextContent:s,switched:a,rendered:o}),n||(this.content(s),o(),a()),this}get currentContent(){if(this.contentId)return this.viewCache.get(this.contentId)}}$.registerTagName("view",Ht);var W;const y=class y extends Ht{constructor(t){super({tagname:"router",...t});et(this,W,"");h(this,"routes",new Map);y.routers.add(this)}base(t){return $.fluent(this,arguments,()=>L(this,W),()=>{st(this,W,t??L(this,W))})}map(t){t=$.orArrayResolve(t);for(const s of t)s instanceof Array?this.map(s):this.routes.set(s.path(),s);return this.resolve(),this}resolve(){return new Promise(t=>{if(!location.pathname.startsWith(L(this,W)))return t(2);const s=location.pathname.replace(L(this,W),"/").replace("//","/"),i=s.split("/").map(w=>`/${w}`),n=location.search,o=new Map(n.replace("?","").split("&").map(w=>w.split("="))),l=(()=>{const w=[];for(const[I,f]of this.routes){const g=$.orArrayResolve(I);for(const b of g){let S=0,E={},T={};const V=b.split("/").map(C=>`/${C}`);if(!(i.length{const tt=o.get(Z);tt!==void 0&&S++,Object.assign(T,{[Z]:tt})}),U.startsWith("/:")){S++,Object.assign(E,{[U.replace("/:","")]:i[C].replace("/","")});continue}else if(b.startsWith("#")&&b===location.hash){S++;continue}else if(U===i[C]){S++;continue}else break}w.push({deep:S,$route:f,params:E,query:T,routePath:b,pathId:Object.keys(T).length!==0?s+n:Object.keys(E).length!==0?s:g[0]})}}}return w.sort((I,f)=>f.deep-I.deep).at(0)})();if(!l)return t(1);const{$route:u,params:c,pathId:d,query:p}=l;if(d===this.contentId)return t(0);this.events.once("rendered",({nextContent:w,previousContent:I})=>{I==null||I.events.fire("afterShift",{$route:I}),w.events.fire("rendered",{$route:w}),t(0)});const x=this.viewCache.get(d)??u.build({params:c,query:p});this.viewCache.has(d)||this.setView(d,x),this.events.once("beforeSwitch",()=>{var w;x.events.fire("beforeShift",{$route:x}),(w=this.currentContent)==null||w.events.fire("beforeShift",{$route:this.currentContent})}),this.events.once("afterSwitch",()=>x.events.fire("afterShift",{$route:x})),this.switchView(d)})}static init(){if(!history.state||!("index"in history.state)){const t={index:y.index};history.replaceState(t,"")}else y.index=history.state.index;return y.navigationDirection=0,y.resolve(),window.addEventListener("popstate",()=>y.popstate()),window.addEventListener("scroll",()=>{this.setScrollHistory(this.index,location.href,document.documentElement.scrollTop)},{passive:!0}),history.scrollRestoration="manual",this}static open(t,s){return t===void 0?this:(t=this.urlResolver(t),t.href===this.url.href?this:t.origin!==this.url.origin?(window.open(t,s),this):(y.clearForwardScrollHistory(),y.forwardIndex=0,y.index++,history.pushState(y.historyState,"",t),y.stateChange(0),y.resolve(),this))}static back(){return this.index--,this.forwardIndex++,history.back(),this}static forward(){return this.forwardIndex===0?this:(this.index++,this.forwardIndex--,history.forward(),this)}static replace(t){return t===void 0?this:(t=this.urlResolver(t),history.replaceState(y.historyState,"",t),this.stateChange(2),this.setScrollHistory(this.index,location.href,0),y.resolve(),this)}static urlResolver(t){return t instanceof URL?t:(t.startsWith("/")&&(t=`${location.origin}${t}`),t.startsWith("#")&&(t=`${location.origin}${location.pathname}${t}`),new URL(t))}static popstate(){const t=history.state.index>y.index?0:history.state.indext.resolve())),this.scrollRestoration(),this.setScrollHistory(this.index,location.href,document.documentElement.scrollTop)}static get historyState(){return{index:y.index}}static stateChange(t){const s=this.url,i=new URL(location.href);this.url=i,y.events.fire("stateChange",{beforeURL:s,afterURL:i,direction:t}),y.navigationDirection=t}static setScrollHistory(t,s,i){const n=this.getScrollHistory();if(!n)return sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify({[t]:{url:s,value:i}}));n[t]={url:s,value:i},sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(n))}static getScrollHistory(){const t=sessionStorage.getItem(this.scrollHistoryKey);if(t)return JSON.parse(t)}static clearForwardScrollHistory(){const t=this.getScrollHistory();if(t)for(const s in t)Number(s)>this.index&&delete t[s],sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(t))}static scrollRestoration(){const t=this.getScrollHistory();if(t&&t[this.index])document.documentElement.scrollTop=t[this.index].value??0;else if(location.hash.length){const s=$(document.body).$(`:${location.hash}`);s&&(document.documentElement.scrollTop=s.dom.offsetTop)}else document.documentElement.scrollTop=0}};W=new WeakMap,h(y,"routers",new Set),h(y,"events",new X),h(y,"navigationDirection"),h(y,"index",0),h(y,"forwardIndex",0),h(y,"url",new URL(location.href)),h(y,"scrollHistoryKey","$ROUTER_SCROLL_HISTORY");let k=y;var G=(r=>(r[r.Forward=0]="Forward",r[r.Back=1]="Back",r[r.Replace=2]="Replace",r))(G||{});k.init();var Y,j;const _t=class _t extends m{constructor(t){super("route",t);et(this,Y,"");et(this,j);h(this,"rendered",!1)}path(t){return $.fluent(this,arguments,()=>L(this,Y),()=>st(this,Y,t??L(this,Y)))}builder(t){return st(this,j,t),this}render(t){return L(this,j)&&this.content(L(this,j).call(this,{$route:this,params:t.params,query:t.query})),this.rendered=!0,this}build(t){return new _t({dom:this.dom.cloneNode()}).self(s=>{L(this,j)&&s.builder(L(this,j)).render({params:t.params,query:t.query})})}};Y=new WeakMap,j=new WeakMap;let pt=_t;$.registerTagName("router",k);$.registerTagName("route",pt);Object.assign($,{open(r,e){return k.open(r,e)},replace(r){return k.replace(r)},back(){return k.back()},forward(){return k.forward()}});class ce{constructor(e,t){h(this,"booru");Object.assign(this,t),this.booru=e}static async fetchUserFavorites(e,t,s,i=100,n){return(await e.fetch(`/favorites.json?${s}&${`search[user_id]=${t.id}`}&limit=${i}&page=${n}`)).map(a=>(t.favorites.add(a.post_id),a.post_id))}update(e){return Object.assign(this,e),this}}class gt{constructor(e,t,s=!0){h(this,"name$",$.state("..."));h(this,"post_upload_count$",$.state(0));h(this,"level$",$.state(10));h(this,"level_string$",$.state("..."));h(this,"booru");h(this,"favorites",new Set);this.booru=e,Object.assign(this,t),s&&this.update$()}static async fetch(e,t){var n;let s;if(typeof t=="string"){const o=(await e.fetch(`/users.json?search[name]=${t}`)).at(0);if(!o)throw"User Not Found";return s=o}else s=await e.fetch(`/users/${t}.json`);const i=((n=e.users.get(s.id))==null?void 0:n.update(s))??new this(e,s);return e.users.set(i.id,i),i}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[a,l]of Object.entries(t))if(l instanceof Array)i+=`&search[${a}]=${l}`;else if(l instanceof Object)for(const[u,c]of Object.entries(l))i+=`&search[${a}${u}]=${c}`;else i+=`&search[${a}]=${l}`;return(await e.fetch(`/users.json?limit=${s}${i}`)).map(a=>{const l=new this(e,a);return e.users.set(l.id,l),l})}update(e){return Object.assign(this,e),this.update$(),this}update$(){this.name$.set(this.name),this.post_upload_count$.set(this.post_upload_count),this.level$.set(this.level),this.level_string$.set(this.level_string)}get booruURL(){return`${this.booru.origin}/users/${this.id}`}get url(){return`/users/${this.id}`}}const dt=class dt extends gt{constructor(t,s,i){super(t,i,!1);h(this,"apiKey");h(this,"favorite_count$",$.state(0));h(this,"forum_post_count$",$.state(0));this.apiKey=s,this.update$()}update$(){var t,s;super.update$(),(t=this.forum_post_count$)==null||t.set(this.forum_post_count),(s=this.favorite_count$)==null||s.set(this.favorite_count)}async init(){await this.fetchFavorites()}async fetchFavorites(){const t=Array.from(this.favorites.keys()).at(-1),s=await ce.fetchUserFavorites(this.booru,this,"",1e3,t?`b${t}`:1);return dt.events.fire("favoriteUpdate",this),s.length>=1e3&&this.fetchFavorites(),s}static get storageUserData(){const t=localStorage.getItem("user_data");return t?JSON.parse(t):null}static set storageUserData(t){localStorage.setItem("user_data",JSON.stringify(t))}};h(dt,"events",new X);let H=dt;const N=class N{constructor(e){h(this,"user");h(this,"posts",new Map);h(this,"tags",new Map);h(this,"users",new Map);h(this,"favorites",new Map);Object.assign(this,e),this.origin.endsWith("/")&&(this.origin=this.origin.slice(0,-1)),N.manager.set(this.name,this)}static set(e){this.used=e,this.name$.set(e.name),this.storageAPI=e.name;const t=H.storageUserData;return t&&e.login(t.username,t.apiKey),this.events.fire("set"),this}static get storageAPI(){return localStorage.getItem("booru_api")}static set storageAPI(e){e?localStorage.setItem("booru_api",e):localStorage.removeItem("booru_api")}async fetch(e,t="GET"){const s=this.user?`${e.includes("?")?"&":"?"}login=${this.user.name}&api_key=${this.user.apiKey}`:"",i=await fetch(`${this.origin}${e}${s}`,{method:t}).then(n=>n.json());if(i.success===!1)throw i.message;return i}async login(e,t){const s=await this.fetch(`/profile.json?login=${e}&api_key=${t}`);return this.user=new H(this,t,s),this.user.init(),N.events.fire("login",this.user),this.user}logout(){return this.user=void 0,H.storageUserData=null,N.events.fire("logout"),this}};h(N,"used"),h(N,"events",new X),h(N,"name$",$.state(N.name)),h(N,"manager",new Map);let v=N;class ue{constructor(e,t){h(this,"post_count$",$.state(0));h(this,"name$",$.state(""));h(this,"booru");this.booru=e,Object.assign(this,t),this.$update()}static async fetch(e,t){var n;const s=await e.fetch(`/tags/${t}.json`),i=((n=e.tags.get(s.id))==null?void 0:n.update(s))??new this(e,s);return e.tags.set(i.id,i),i}static async fetchMultiple(e,t,s=1e3){let i="";if(t)for(const[a,l]of Object.entries(t))if(l instanceof Array)i+=`&search[${a}]=${l}`;else if(l instanceof Object)for(const[u,c]of Object.entries(l))i+=`&search[${a}${u}]=${c}`;else i+=`&search[${a}]=${l}`;return(await e.fetch(`/tags.json?limit=${s}${i}`)).map(a=>{var u;const l=((u=e.tags.get(a.id))==null?void 0:u.update(a))??new this(e,a);return e.tags.set(l.id,l),l})}update(e){return Object.assign(this,e),this.$update(),this}$update(){this.post_count$.set(this.post_count),this.name$.set(this.name)}}var K=(r=>(r[r.General=0]="General",r[r.Artist=1]="Artist",r[r.Copyright=3]="Copyright",r[r.Character=4]="Character",r[r.Meta=5]="Meta",r))(K||{});const bt=1e3,ht=bt*60,lt=ht*60,ct=lt*24,de=ct*7,ot=new Intl.RelativeTimeFormat("en",{style:"long"});function $t(r){r=Math.floor(r);const e=r/bt,t=r/ht,s=r/lt,i=r/ct,n=r%1e3,o=Math.floor(r%6e4/1e3),a=Math.floor(r%36e5/6e4),l=Math.floor(r%(36e5*24)/36e5),u=o.toString().padStart(2,"0"),c=a.toString().padStart(2,"0"),d=l.toString().padStart(2,"0");return{seconds:e,minutes:t,hours:s,days:i,mil:n,s:o,min:a,h:l,ss:u,mm:c,hh:d}}function fe(r,e=Date.now()){const t=r-e,s=Math.abs(t);if(sthis.update$()),this}static async fetchMultiple(t,s,i=20,n){let o="";if(s){if(typeof s=="string")o=s;else for(const[c,d]of Object.entries(s))if(d!==void 0){if(c==="tags"){o+=`${d}`;continue}o.at(-1)!=="="&&(o+=" "),o+=`${c}:${d}`}}const a=await t.fetch(`/posts.json?limit=${i}&tags=${o}${n?`&page=${n}`:""}&_method=get`);if(!(a instanceof Array))return[];const l=a.map(c=>{var p;const d=((p=t.posts.get(c.id))==null?void 0:p.update(c))??new this(t,c.id,c);return t.posts.set(d.id,d),d});if(!l.length)return l;const u=[...new Set(a.map(c=>[c.approver_id,c.uploader_id].detype(null)).flat())];return gt.fetchMultiple(t,{id:u}).then(()=>l.forEach(c=>c.update$())),l}update$(){var t,s,i,n;this.uploader$.set(((t=this.uploader)==null?void 0:t.name$)??((s=this.uploader_id)==null?void 0:s.toString())),this.approver$.set(((i=this.approver)==null?void 0:i.name$)??((n=this.approver_id)==null?void 0:n.toString())??"None"),this.created_date$.set(fe(+new Date(this.created_at))),this.favcount$.set(this.fav_count),this.score$.set(this.score),this.file_size$.set(me(this.file_size)),this.file_ext$.set(this.file_ext),this.file_url$.set(this.file_url),this.source$.set(this.source),this.dimension$.set(`${this.image_width}x${this.image_height}`),this.booruUrl$.set(`${this.booruUrl}`),this.isUgoria&&this.webm_url$.set(this.large_file_url),this.createdDate=new Date(this.created_at),this.fire("update")}update(t){return Object.assign(this,t),this.update$(),this}async fetchTags(){return await this.ready,await ue.fetchMultiple(this.booru,{name:{_space:this.tag_string}})}async createFavorite(){if(!this.booru.user)return;const t=await this.booru.fetch(`/favorites.json?post_id=${this.id}`,"POST");return this.update(t),this.booru.user.favorites.add(t.id),H.events.fire("favoriteUpdate",this.booru.user),t.id}async deleteFavorite(){!this.booru.user||await fetch(`/api/favorites/${this.id}?login=${this.booru.user.name}&api_key=${this.booru.user.apiKey}&origin=${this.booru.origin}`,{method:"DELETE"}).then(s=>s.json())===!1||(this.fav_count--,this.favcount$.set(this.fav_count),this.booru.user.favorites.delete(this.id),H.events.fire("favoriteUpdate",this.booru.user))}get pathname(){return`/posts/${this.id}`}get uploader(){return this.booru.users.get(this.uploader_id)}get approver(){return this.approver_id?this.booru.users.get(this.approver_id):null}get isVideo(){return this.file_ext==="mp4"||this.file_ext==="webm"||this.file_ext==="zip"}get isGif(){return this.file_ext==="gif"}get isUgoria(){return this.file_ext==="zip"}get hasSound(){return this.tag_string_meta.includes("sound")}get tags(){const t=this.tag_string.split(" ");return[...this.booru.tags.values()].filter(s=>t.includes(s.name))}get previewURL(){var t,s;return((s=(t=this.media_asset.variants)==null?void 0:t.find(i=>i.file_ext==="webp"))==null?void 0:s.url)??this.large_file_url}get booruUrl(){return`${this.booru.origin}/posts/${this.id}`}get url(){return`https://danbooru.defaultkavy.com/posts/${this.id}`}get isFileSource(){return this.source.startsWith("file://")}get isLargeFile(){return this.file_size>5e6}}class Ft{constructor(e){Object.assign(this,e)}static async fetch(e,t){const s=await e.fetch(`/artist_commentaries/${t}.json`);return new this(s)}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[a,l]of Object.entries(t))if(l instanceof Array)i+=`&search[${a}]=${l}`;else if(l instanceof Object)for(const[u,c]of Object.entries(l))i+=`&search[${a}${u}]=${c}`;else i+=`&search[${a}]=${l}`;return(await e.fetch(`/artist_commentaries.json?limit=${s}${i}`)).map(a=>{const l=new this(a);return this.manager.set(l.id,l),l})}}h(Ft,"manager",new Map);class ge extends m{constructor(t,s,i){super("video-controller");h(this,"$video");h(this,"$viewer");h(this,"duration$",$.state("00:00"));h(this,"post");this.$video=t,this.$viewer=s,this.post=i,this.build()}build(){const t=$.events();this.$video.on("timeupdate",()=>this.durationUpdate()),this.content([$("div").class("video-details").content([$("div").class("left").content([$("ion-icon").class("play").title("Play").name("play").self(s=>{this.$video.on("play",()=>s.name("pause")).on("pause",()=>s.name("play")),s.on("click",()=>this.$video.isPlaying?this.$video.pause():this.$video.play())}),$("div").class("duration").content([$("span").class("current-time").content(this.duration$),$("span").content("/"),$("span").class("total-time").content("00:00").self(s=>{this.$video.on("loadeddata",()=>{const i=$t(this.$video.duration*1e3);s.content(Number(i.hh)>0?`${i.hh}:${i.mm}:${i.ss}`:`${i.mm}:${i.ss}`)})})])]),$("div").class("right").content([$("ion-icon").class("volume").title("Volume").name("volume-high").disable(!this.post.hasSound).self(s=>{const i=()=>{this.$video.muted()?s.name("volume-mute"):s.name("volume-high")};s.on("click",()=>{this.$video.muted(!this.$video.muted()),i()})}),$("ion-icon").class("full-screen").title("Full-Screen").name("scan").self(s=>{s.on("click",()=>{document.fullscreenElement?document.exitFullscreen():this.$viewer.dom.requestFullscreen()})})])]),$("div").class("progressbar-container").content([$("div").class("progressbar").content([$("div").class("progress").self(s=>{this.$video.on("timeupdate",i=>{s.css({width:`${this.$video.currentTime()/this.$video.duration*100}%`})}),t.on("progressChange",i=>{s.css({width:`${i*100}%`})})})])]).self(s=>{const i=$.pointers($(document.body));let n=!1;i.on("down",(o,a)=>{if(!s.contains(o.$target))return o.delete();a.preventDefault(),this.$video.isPlaying&&(n=!0,this.$video.pause());const l=(o.x-s.domRect().x)/s.offsetWidth;this.$video.currentTime(l*this.$video.duration)}),i.on("move",(o,a)=>{a.preventDefault();const l=(o.x-s.domRect().x)/s.offsetWidth;this.$video.currentTime(l*this.$video.duration),t.fire("progressChange",l)}),i.on("up",(o,a)=>{n&&this.$video.play(),n=!1})})])}durationUpdate(){const t=$t(this.$video.currentTime()*1e3);this.duration$.set(Number(t.hh)>0?`${t.hh}:${t.mm}:${t.ss}`:`${t.mm}:${t.ss}`)}}const $e=$("route").path("/posts/:id").id("post").builder(({$route:r,params:e})=>{if(!Number(e.id))return $("h1").content("404: POST NOT FOUND");const t=J.get(v.used,+e.id),s=$.events();return $.keys($(window)).if(i=>{if(!($(i.target)instanceof P)&&r.inDOM())return!0}).keydown(["f","F"],i=>{var n;(n=v.used.user)!=null&&n.favorites.has(t.id)?t.deleteFavorite():t.createFavorite()}),[$("div").class("viewer").content(async i=>{const n=$("video");return s.on("video_play_pause",()=>{n.isPlaying?n.pause():n.play()}),await t.ready,i.on("pointermove",o=>{(o.pointerType==="mouse"||o.pointerType==="pen")&&s.fire("viewerPanel_show")}).on("pointerup",o=>{var a;(a=$(":.viewer-panel .panel"))!=null&&a.contains($(o.target))||(o.pointerType==="touch"&&s.fire("viewerPanel_switch"),o.pointerType==="mouse"&&s.fire("video_play_pause"))}).on("mouseleave",()=>{s.fire("viewerPanel_hide")}),[$("div").class("viewer-panel").hide(!1).content([$("div").class("panel").content([t.isVideo?new ge(n,i,t):null,$("div").class("buttons").content([$("ion-icon").title("Favorite").name("heart-outline").self(o=>{var a;H.events.on("favoriteUpdate",l=>{l.favorites.has(t.id)?o.name("heart"):o.name("heart-outline")}),(a=v.used.user)!=null&&a.favorites.has(t.id)&&o.name("heart"),o.on("click",()=>{var l;(l=v.used.user)!=null&&l.favorites.has(t.id)?t.deleteFavorite():t.createFavorite()})}),$("ion-icon").title("Original Size").name("resize-outline").self(o=>{o.on("click",()=>{s.fire("original_size"),o.disable(!0)}),(!t.isLargeFile||t.isVideo)&&o.disable(!0)})])]),$("div").class("overlay")]).self(o=>{s.on("viewerPanel_hide",()=>o.hide(!0)).on("viewerPanel_show",()=>o.hide(!1)).on("viewerPanel_switch",()=>o.hide(!o.hide()))}),t.isVideo?n.height(t.image_height).width(t.image_width).src(t.file_ext==="zip"?t.large_file_url:t.file_url).controls(!1).autoplay(!0).loop(!0).disablePictureInPicture(!0):$("img").src(t.isLargeFile?t.large_file_url:t.file_url).self(o=>{s.on("original_size",()=>o.src(t.file_url))})]}),$("div").class("content").content([$("h3").content("Artist's Commentary"),$("section").class("commentary").content(async i=>{const n=(await Ft.fetchMultiple(v.used,{post:{_id:t.id}})).at(0);return[n?[n.original_title?$("h3").content(n.original_title):null,$("pre").content(n.original_description)]:"No commentary"]})]),$("div").class("sidebar").self(i=>{let n=0;addEventListener("scroll",()=>{i.inDOM()&&(n=document.documentElement.scrollTop)},{passive:!0}),r.on("beforeShift",()=>{innerWidth>800&&i.css({position:"absolute",top:`calc(${n}px + var(--nav-height) + var(--padding))`})}).on("afterShift",()=>i.css({position:"",top:""}))}).content([$("section").class("post-info").content([new A("id").name("Post").content(`#${e.id}`),new A("uploader").name("Uploader").content(t.uploader$),new A("approver").name("Approver").content(t.approver$),new A("date").name("Date").content(t.created_date$),new A("size").name("Size").content([t.file_size$,t.dimension$]),new A("file-type").name("File Type").content(t.file_ext$),$("div").class("inline").content([new A("favorites").name("Favorites").content(t.favcount$),new A("score").name("Score").content(t.score$)]),new A("file-url").name("File").content([$("a").href(t.file_url$).content(t.file_url$.convert(i=>i.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(i,n)=>ft(n,t.file_url))]),new A("source-url").name("Source").content([$("a").href(t.source$).content(t.source$.convert(i=>i.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(i,n)=>ft(n,t.source))]),new A("booru-url").name(v.name$).content([$("a").href(t.booruUrl$).content(t.booruUrl$.convert(i=>i.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(i,n)=>ft(n,t.booruUrl))]),new A("webm-url").name("Webm").hide(!0).self(async i=>{await t.ready,t.isUgoria&&i.content($("a").href(t.webm_url$).content(t.webm_url$.convert(n=>n.replace("https://",""))).target("_blank")).hide(!1)})]),$("div").class("post-tags").content(async i=>{const n=await t.fetchTags(),[o,a,l,u,c]=[n.filter(p=>p.category===K.Artist),n.filter(p=>p.category===K.Character),n.filter(p=>p.category===K.General),n.filter(p=>p.category===K.Meta),n.filter(p=>p.category===K.Copyright)];return[d("Artist",o),d("Character",a),d("Copyright",c),d("Meta",u),d("General",l)];function d(p,x){return x.length?[$("h3").content(p),$("section").content([x.map(w=>$("div").class("tag").content([$("a").class("tag-name").content(w.name).href(`/posts?tags=${w.name}`),$("span").class("tag-post-count").content(w.post_count$.convert(it))]))])]:null}})])]});function ft(r,e){r.name("checkmark"),navigator.clipboard.writeText(e),setTimeout(()=>r.name("clipboard"),3e3)}class A extends m{constructor(t){super("div");h(this,"$name",$("span").class("property-name"));h(this,"$values",$("div").class("property-values"));this.staticClass("property").attribute("property-id",t),super.content([this.$name,this.$values.hide(!0)])}name(t){return this.$name.content(t),this}content(t){this.$values.hide(!1);const s=$.orArrayResolve(t);return this.$values.content(s.map(i=>$("span").staticClass("property-value").content(i))),this}}class It extends m{constructor(t){super("post-tile");h(this,"post");h(this,"$video");h(this,"duration$",$.state(""));this.post=t,this.$video=this.post.isVideo?$("video").width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(!0).loop(!0).muted(!0).hide(!0).on("mousedown",s=>s.preventDefault()):null,this.attribute("filetype",this.post.file_ext),this.durationUpdate(),this.build()}build(){var s,i;let t;(s=this.$video)==null||s.on("timeupdate",(n,o)=>{this.durationUpdate()}),(i=this.$video)==null||i.on("pause",()=>{clearInterval(t),this.durationUpdate()}),this.class("loading").content([this.post.isVideo?$("div").class("video-detail").content([this.post.hasSound?$("ion-icon").name("volume-medium-outline"):null,this.post.isUgoria?$("ion-icon").name("images-outline"):null,$("span").class("duration").content(this.duration$)]):null,this.post.isGif?$("div").class("gif-detail").content([$("span").content("GIF")]):null,$("a").href(this.post.pathname).content(()=>[this.$video,$("img").draggable(!1).css({opacity:"0"}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading("lazy").on("mousedown",n=>n.preventDefault()).once("load",(n,o)=>{o.src(this.post.previewURL).on(["mouseenter","touchstart"],()=>{this.post.isGif&&o.src(this.post.large_file_url)},{passive:!0}).on(["mouseleave","touchend","touchcancel"],()=>{this.post.isGif&&o.src(this.post.previewURL)},{passive:!0}).animate({opacity:[0,1]},{duration:300,fill:"both"}),this.removeClass("loading")})]).on(["mouseenter","touchstart"],()=>{var n,o;(n=this.$video)!=null&&n.isPlaying||(o=this.$video)==null||o.src(this.post.large_file_url).hide(!1).play().catch(a=>{})},{passive:!0}).on(["mouseleave","touchend","touchcancel"],()=>{var n;(n=this.$video)==null||n.pause().currentTime(0).hide(!0)},{passive:!0})])}durationUpdate(){if(!this.$video)return;const t=$t(this.post.media_asset.duration*1e3-this.$video.currentTime()*1e3);this.duration$.set(Number(t.hh)>0?`${t.hh}:${t.mm}:${t.ss}`:`${t.mm}:${t.ss}`)}}class Ot extends Nt{constructor(t){super();h(this,"posts",new Set);h(this,"$posts",new Map);h(this,"orderMap",new Map);h(this,"tags");h(this,"finished",!1);h(this,"limit",100);h(this,"$focus",$.focus());this.tags=t==null?void 0:t.tags,this.addStaticClass("post-grid"),this.type("waterfall").gap(10),this.init()}async init(){setInterval(()=>{this.inDOM()&&document.documentElement.scrollTop===0&&this.getPost("newer")},1e4),v.events.on("set",()=>{this.removeAll(),this.finished&&(this.finished=!1,this.events.fire("startLoad"),this.loader())}),this.on("resize",()=>this.resize()),this.events.fire("startLoad"),this.loader(),this.$focus.layer(100).loop(!1).scrollThreshold($.rem(2)+60),$.keys($(window)).if(t=>{if(!($(t.target)instanceof P)&&this.inDOM())return!0}).keydown("Tab",t=>{t.preventDefault(),t.shiftKey?this.$focus.prev():this.$focus.next()}).keydown(["w","W"],t=>{t.preventDefault(),this.$focus.up()}).keydown(["s","S"],t=>{t.preventDefault(),this.$focus.down()}).keydown(["d","D"],t=>{t.preventDefault(),this.$focus.right()}).keydown(["a","A"],t=>{t.preventDefault(),this.$focus.left()}).keydown([" ","Enter"],t=>{var i;t.preventDefault();const s=(i=this.$focus.currentLayer)==null?void 0:i.currentFocus;s instanceof It&&$.open(`/posts/${s.post.id}`)}).keydown(["Escape"],t=>{t.preventDefault(),this.$focus.blur()})}async loader(){if(!this.inDOM())return setTimeout(()=>this.loader(),100);for(;this.inDOM()&&document.documentElement.scrollHeight<=innerHeight*2;)if(!(await this.getPost("older")).length)return;document.documentElement.scrollTop+innerHeight>document.documentElement.scrollHeight-innerHeight*2&&!(await this.getPost("older")).length||setTimeout(()=>this.loader(),100)}resize(){const t=Math.round(this.dom.clientWidth/300);this.column(t>=2?t:2)}addPost(t){t=$.orArrayResolve(t);for(const i of t){if(!i.file_url||this.posts.has(i))continue;const n=new It(i);this.$posts.set(i,n),this.posts.add(i)}this.$focus.layer(100).removeAll();const s=[...this.orderMap.values()].map(i=>{var n;return(n=this.$posts.get(i))==null?void 0:n.self(this.$focus.layer(100).add)});return this.content(s).render(),this}removeAll(){return this.posts.clear(),this.$posts.clear(),this.orderMap.clear(),this.animate({opacity:[1,0]},{duration:300,easing:"ease"},()=>this.clear().render()),this}async getPost(t){const s=this.tags?decodeURIComponent(this.tags).split("+"):void 0,i=[],n=[];let o=this.limit;if(s)for(const c of s)c.startsWith("ordfav:")||c.startsWith("order:")?n.push(c):c.startsWith("limit:")?o=Number(c.split(":")[1]):i.push(c);if(n.length){if(n.length>1)return this.events.fire("post_error",`Error: These query can't be used together [${n}].`),[];const c=n[0];if(c.startsWith("ordfav:")){const d=c.split(":")[1],p=i.length?`&search[post_tags_match]=${i.toString().replaceAll(",","+")}`:"",x=this.orderKeyList.length?t==="newer"?`&search[id]=>${this.orderKeyList.at(0)}`:`&search[id]=<${this.orderKeyList.at(-1)}`:void 0,w=await v.used.fetch(`/favorites.json?search[user_name]=${d}${x??""}${p}&limit=${o}`),I=await J.fetchMultiple(v.used,{tags:`id:${w.map(g=>g.post_id).toString()}`}),f=new Map;for(const g of w){const b=I.find(S=>S.id===g.post_id);b&&f.set(g.id,b)}return this.orderMap=new Map(t==="newer"?[...f,...this.orderMap]:[...this.orderMap,...f]),this.addPost(I),I}if(c.startsWith("order:")){const d=this.orderKeyList.length?t==="newer"?1:this.orderMap.size/o+1:void 0,p=await J.fetchMultiple(v.used,{tags:this.tags},o,d),x=new Map(p.map(w=>[w.id,w]));return x.forEach((w,I)=>{this.orderMap.has(I)&&x.delete(I)}),this.orderMap=new Map(t==="newer"?[...x,...this.orderMap]:[...this.orderMap,...x]),this.addPost(p),p}}const a=this.orderKeyList.length?t==="newer"?`a${this.orderKeyList.at(0)}`:`b${this.orderKeyList.at(-1)}`:void 0,l=await J.fetchMultiple(v.used,{tags:this.tags},o,a),u=new Map(l.map(c=>[c.id,c]));return this.orderMap=new Map(t==="newer"?[...u,...this.orderMap]:[...this.orderMap,...u]),this.addPost(l),l.length||(this.finished=!0,this.posts.size?this.events.fire("endPost"):this.events.fire("noPost")),l}get orderKeyList(){return[...this.orderMap.keys()]}}class Vt{static async fetch(e,t,s=20){if(!t.length)return this.searchQuery.map(o=>new kt(o));const i=await e.fetch(`/autocomplete.json?search[query]=${t}&search[type]=tag_query&version=1&limit=${s}`);return[...t.length?this.searchQuery.filter(o=>o.value.startsWith(t)&&o.value!==t):this.searchQuery,...i].map(o=>new kt(o))}}h(Vt,"searchQuery",[{value:"user:",label:"user:"},{value:"approver:",label:"approver:"},{value:"-approver:",label:"-approver:"},{value:"order:",label:"order:"},{value:"ordfav:",label:"ordfav:"},{value:"ordfavgroup:",label:"ordfavgroup:"},{value:"search:",label:"search:"},{value:"favgroup:",label:"favgroup:"},{value:"-favgroup:",label:"-favgroup:"},{value:"favcount:",label:"favcount:"},{value:"id:",label:"id:"},{value:"tagcount:",label:"tagcount:"},{value:"gentags:",label:"gentags:"},{value:"arttags:",label:"arttags:"},{value:"chartags:",label:"chartags:"},{value:"copytags:",label:"copytags:"},{value:"metatags:",label:"metatags:"},{value:"score:",label:"score:"},{value:"upvote:",label:"upvote:"},{value:"downvote:",label:"downvote:"},{value:"disapproved:",label:"disapproved:"},{value:"md5:",label:"md5:"},{value:"width:",label:"width:"},{value:"height:",label:"height:"},{value:"ratio:",label:"ratio:"},{value:"mpixels:",label:"mpixels:"},{value:"filesize:",label:"filesize:"},{value:"duration:",label:"duration:"},{value:"is:",label:"is:"},{value:"has:",label:"has:"},{value:"pool:",label:"pool:"},{value:"-pool:",label:"-pool:"},{value:"ordpool:",label:"ordpool:"},{value:"random:",label:"random:"},{value:"limit:",label:"limit:"},{value:"date:",label:"date:"},{value:"commenter:",label:"commenter:"},{value:"note:",label:"note:"},{value:"noter:",label:"noter:"},{value:"noteupdater:",label:"noteupdater:"},{value:"status:",label:"status:"},{value:"-status:",label:"-status:"},{value:"rating:",label:"rating:"},{value:"-rating:",label:"-rating:"},{value:"source:",label:"source:"},{value:"-source:",label:"-source:"},{value:"pixiv:",label:"pixiv:"},{value:"parent:",label:"parent:"},{value:"child:",label:"child:"},{value:"flagger:",label:"flagger:"},{value:"appealer:",label:"appealer:"},{value:"commentary:",label:"commentary:"},{value:"commentaryupdater:",label:"commentaryupdater:"}].map(e=>({type:"query",...e})));class kt{constructor(e){Object.assign(this,e)}isTag(){return this.type==="tag"||this.type==="tag-autocorrect"||this.type==="tag-alias"||this.type==="tag-word"}isTagAutocorrect(){return this.type==="tag-autocorrect"}isTagAntecedent(){return!!this.antecedent}isTagWord(){return this.type==="tag-word"}isUser(){return this.type==="user"}}class ve extends m{constructor(){super("searchbar");h(this,"$tagInput",new be(this));h(this,"$selectionList",new ye);h(this,"typingTimer",null);h(this,"$filter",$("div").class("filter"));this.build(),window.addEventListener("keyup",t=>{!this.inDOM()&&t.key==="/"&&this.open(),this.inDOM()&&t.key==="Escape"&&this.close()})}build(){this.content([$("div").class("input-container").content([this.$tagInput.on("input",()=>this.inputHandler()).on("keydown",t=>this.keyHandler(t)),$("ion-icon").name("close-circle-outline").title("Clear Input").on("click",()=>this.$tagInput.clearAll())]).on("click",t=>{t.target===this.$tagInput.dom&&this.$tagInput.addTag().input()}),$("div").class("selection-list-container").content([this.$selectionList]),this.$filter.on("click",()=>{location.hash==="#search"&&this.close()})])}open(){return location.hash!=="#search"&&$.open(location.href+"#search"),this}close(){return location.hash==="#search"&&$.back(),this}activate(){return this.hide(!1),this.$filter.animate({opacity:[0,.5]},{duration:300,easing:"ease"}),this.$tagInput.input(),this}inactivate(){return this.animate({opacity:[.5,0]},{duration:300,easing:"ease"},()=>this.hide(!0)),this}keyHandler(t){var n,o;const s=()=>{t.preventDefault(),this.$tagInput.addTag().input()},i=a=>{const l=this.$tagInput.children.indexOf(this.$tagInput.$inputor);if(this.$tagInput.$input.value().at(-1)===":")return this.getSearchSuggestions();const u=this.$tagInput.children.array.at(l+1);this.$tagInput.addTag(a.value()),u?this.$tagInput.editTag(u):this.$tagInput.input()};switch(t.key){case"ArrowUp":{t.preventDefault(),this.$selectionList.focusPrevSelection(),this.$tagInput.value((n=this.$selectionList.focused)==null?void 0:n.value());break}case"ArrowDown":{t.preventDefault(),this.$selectionList.focusNextSelection(),this.$tagInput.value((o=this.$selectionList.focused)==null?void 0:o.value());break}case" ":s();break;case"Enter":{t.preventDefault(),this.$selectionList.focused?i(this.$selectionList.focused):(this.$tagInput.addTag(),this.search());break}case"Tab":{t.preventDefault();const a=this.$tagInput.children.indexOf(this.$tagInput.$inputor);if(t.shiftKey){a-1>=0&&this.$tagInput.editTag(this.$tagInput.children.array.at(a-1));break}if(this.$selectionList.focused)i(this.$selectionList.focused);else{const l=this.$tagInput.children.array.at(a+1);l?this.$tagInput.editTag(l):this.$tagInput.addTag().input()}break}case"Backspace":{const a=this.$tagInput.children.indexOf(this.$tagInput.$inputor);a!==0&&!this.$tagInput.$input.value().length&&(t.preventDefault(),this.$tagInput.editTag(this.$tagInput.children.array.at(a-1)));break}}}inputHandler(){this.typingTimer&&(clearTimeout(this.typingTimer),this.typingTimer=null),this.typingTimer=setTimeout(async()=>{this.typingTimer=null,this.getSearchSuggestions()},200)}async getSearchSuggestions(){const t=this.$tagInput.$input.value(),s=await Vt.fetch(v.used,t,20);this.$selectionList.clearSelections().addSelections(s.map(i=>new we().value(i.value).content([$("div").class("selection-label").content([i.isTagAntecedent()?$("span").class("tag-antecedent").self(n=>n.dom.innerHTML=i.antecedent.replaceAll(t,`${t}`)):null,$("div").class("label-container").content([i.isTagAntecedent()?$("ion-icon").name("arrow-forward-outline"):null,$("span").class("label").self(n=>n.dom.innerHTML=i.label.replaceAll(t,`${t}`))])]),i.isTag()?$("div").class("tag-detail").content([$("span").class("tag-post-count").content(it(i.post_count)),$("span").class("tag-category").content(K[i.category])]):null,i.isUser()?$("span").class("user-level").content(i.level):null]).on("click",()=>{this.$tagInput.addTag(i.value).input()})))}search(){return $.replace(`/posts?tags=${this.$tagInput.query.replace(":","%3A")}`),this.$tagInput.clearAll(),this.inactivate(),this}checkURL(t,s){if((t==null?void 0:t.hash)==="#search"&&this.inactivate(),s.hash==="#search"&&this.activate(),`${t==null?void 0:t.pathname}${t==null?void 0:t.search}`==`${s.pathname}${s.search}`)return;const i=s.searchParams.get("tags");this.$tagInput.clearAll(),i==null||i.split(" ").forEach(n=>this.$tagInput.addTag(n))}}class ye extends m{constructor(){super("selection-list");h(this,"focused",null);h(this,"selections",new Set)}addSelections(t){t=$.orArrayResolve(t);for(const s of t)this.selections.add(s);return this.insert(t),this}clearSelections(){return this.focused=null,this.selections.clear(),this.clear(),this}focusSelection(t){return this.blurSelection(),this.focused=t,t.focus(),t.offsetTopthis.scrollTop()+this.offsetHeight&&this.scrollTop(t.offsetTop+t.offsetHeight-this.offsetHeight),this}blurSelection(){var t;return(t=this.focused)==null||t.blur(),this.focused=null,this}focusNextSelection(){const t=this.selections.array,s=t.at(0);if(this.focused){const i=t.at(t.indexOf(this.focused)+1);i?this.focusSelection(i):s&&this.focusSelection(s)}else s&&this.focusSelection(s)}focusPrevSelection(){const t=this.selections.array;if(this.focused){const s=t.at(t.indexOf(this.focused)-1);s&&this.focusSelection(s)}else{const s=t.at(0);s&&this.focusSelection(s)}}}class we extends m{constructor(){super("selection");h(this,"property",{value:""})}value(t){return $.fluent(this,arguments,()=>this.property.value,()=>$.set(this.property,"value",t))}focus(){return this.addClass("active"),this}blur(){return this.removeClass("active"),this}}class be extends m{constructor(t){super("tag-input");h(this,"$input",$("input").type("text"));h(this,"$sizer",$("span").class("sizer"));h(this,"$inputor",$("div").class("input-wrapper").content([this.$sizer,this.$input.on("input",()=>{this.$sizer.content(this.$input.value())})]));h(this,"tags",new Set);h(this,"$seachbar");this.$seachbar=t}input(){return this.insert(this.$inputor),this.$input.focus(),this.$seachbar.$selectionList.clearSelections(),this.$seachbar.getSearchSuggestions(),this}addTag(t){if(t=t??this.$input.value(),!t.length)return this;const s=new _e(t);return s.on("click",()=>this.editTag(s)),this.tags.add(s),this.value(""),this.$input.inDOM()?this.$inputor.replace(s):this.insert(s),this}editTag(t){return this.addTag(),this.tags.delete(t),t.replace(this.$inputor),this.value(t.name),this.$input.focus(),this.$seachbar.getSearchSuggestions(),this}clearAll(){return this.value(""),this.tags.clear(),this.clear(),this}value(t){return t===void 0?this:(this.$input.value(t),this.$sizer.content(t),this)}focus(){return this.$input.focus(),this}get query(){return this.tags.array.map(t=>t.name).toString().replace(",","+")}}class _e extends m{constructor(t){super("tag");h(this,"name");this.name=t,this.build()}build(){this.content(this.name)}}class xe extends m{constructor(){super("ion-icon")}name(e){return this.attribute("name",e),this}size(e){return this.attribute("size",e),this}disable(e){return this.attribute("disable",e),this}link(e,t=!1){return this.on("click",()=>t?$.replace(e):$.open(e)),this}}class Te extends wt{constructor(){super();h(this,"$icon",$("ion-icon"));h(this,"$label",$("span"));this.addStaticClass("icon"),this.build()}build(){super.content([this.$icon.hide(!0),this.$label])}content(t){return this.$label.content(t),this}icon(t){return this.$icon.name(t).hide(!1),this}link(t,s=!1){return this.on("click",()=>s?$.replace(t):$.open(t)),this}}const Se=$("route").id("login").path("/login").builder(()=>{const[r,e]=[$.state(""),$.state("")];return[$("div").class("login-container").content([$("h1").content("Login"),$("div").class("username","input-container").content([$("label").for("username").content("Username"),$("input").type("text").id("username").value(r)]),$("div").class("api-key","input-container").content([$("label").for("api-key").content("API Key"),$("input").type("password").id("api-key").value(e)]),$("icon-button").content("Login").on("click",async()=>{await v.used.login(r.value,e.value),v.used.user&&(H.storageUserData={apiKey:e.value,username:r.value},r.set(""),e.set(""),$.replace("/"))}),$("icon-button").content("Create Account").icon("open-outline").on("click",()=>$.open("https://danbooru.donmai.us/users/new","_blank"))])]});class Ie extends m{constructor(){super("drawer");h(this,"$filter",$("div").class("filter"));h(this,"$container",$("div").class("drawer-container"));h(this,"pointers",$.pointers($(document.body)));h(this,"opened",!1);this.hide(!0),this.build()}build(){this.content([this.$container.content([$("div").class("user-info").hide(!0).self(t=>[v.events.on("login",s=>{t.content([$("div").content([$("h3").class("username").content(s.name$),$("div").class("user-detail").content([$("span").class("userid").content(`ID: ${s.id}`),$("span").class("level").content(["Level: ",s.level_string$])])]),$("div").class("user-nav").content([$("icon-button").title("Uploaded Posts").icon("image").content(s.post_upload_count$.convert(it)).link(`/posts?tags=user:${s.name}`,!0),$("icon-button").title("Favorites").icon("heart").content(s.favorite_count$.convert(it)).link(`/posts?tags=ordfav:${s.name}`,!0),$("icon-button").title("Forum Posts").icon("document-text").content(s.forum_post_count$.convert(it)).hide(!0)])]).hide(!1)}).on("logout",()=>{t.clear().hide(!0)})]),$("div").class("nav").content([$("icon-button").icon("log-in-outline").content("Login").link("/login",!0).self(t=>v.events.on("login",()=>t.hide(!0)).on("logout",()=>t.hide(!1))),$("icon-button").icon("log-in-outline").content("Logout").on("dblclick",()=>v.used.logout()).hide(!0).self(t=>v.events.on("login",()=>t.hide(!1)).on("logout",()=>t.hide(!0))),$("icon-button").icon("swap-horizontal").class("switch").content("Switch Booru").on("click",()=>{v.used===vt?v.set(Oe):v.set(vt),this.close()})])]),this.$filter.on("click",()=>$.back())]),this.pointers.on("move",t=>{var s;(s=$(":.viewer"))!=null&&s.contains(t.$target)||(t.$target.parent,!(t.type!=="pen"&&t.type!=="touch")&&(t.move_y>4||t.move_y<-4||(t.move_x<=-7&&(t.delete(),this.open()),t.move_x>=7&&(t.delete(),this.close()))))})}open(){return location.hash!=="#drawer"&&$.open(location.href+"#drawer"),this}close(){return location.hash==="#drawer"&&$.back(),this}activate(){this.opened=!0,this.hide(!1),this.$container.animate({transform:["translateX(100%)","translateX(0%)"]},{fill:"both",duration:300,easing:"ease"}),this.$filter.animate({opacity:[0,1]},{fill:"both",duration:300,easing:"ease"})}inactivate(){this.opened=!1,this.$container.animate({transform:["translateX(0%)","translateX(100%)"]},{fill:"both",duration:300,easing:"ease"},()=>this.hide(!this.opened)),this.$filter.animate({opacity:[1,0]},{fill:"both",duration:300,easing:"ease"})}checkURL(t,s){(t==null?void 0:t.hash)==="#drawer"&&this.inactivate(),s.hash==="#drawer"&&this.activate()}}$.registerTagName("ion-icon",xe);$.registerTagName("icon-button",Te);$.anchorHandler=r=>{$.open(r.href(),r.target())};const[vt,Oe]=[new v({origin:"https://danbooru.donmai.us",name:"Danbooru"}),new v({origin:"https://safebooru.donmai.us",name:"Safebooru"}),new v({origin:"https://testbooru.donmai.us",name:"Testbooru"})];v.set(v.manager.get(v.storageAPI??"")??vt);const at=new ve().hide(!0),yt=new Ie;$(document.body).content([$("nav").content([$("a").class("title").href("/").content([$("h1").class("booru-name").content(v.name$),$("h2").class("app").content([$("span").class("app-name").content("Viewer"),$("span").class("version").content("v0.9.0")])]),$("div").class("searchbar").content(["Search in ",v.name$]).self(r=>k.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&r.hide(!1),t.hash==="#search"&&r.hide(!0)})).on("click",()=>at.open()),$("div").class("buttons").content([$("ion-icon").class("search").name("search-outline").title("Search").self(r=>k.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&r.hide(!1),t.hash==="#search"&&r.hide(!0)})).on("click",()=>at.open()),$("a").content($("ion-icon").class("open").name("open-outline").title("Open in Original Site")).href(location.href.replace(location.origin,v.used.origin)).target("_blank"),$("ion-icon").class("copy").name("link-outline").title("Copy Page Link").hide(!1).on("click",(r,e)=>{navigator.clipboard.writeText(`${location.origin}${location.pathname}${location.search}`),e.name("checkmark-outline"),setTimeout(()=>{e.name("link-outline")},2e3)}),$("ion-icon").class("menu").name("menu-outline").title("Menu").hide(!1).self(r=>{v.events.on("login",()=>r.hide(!0)).on("logout",()=>r.hide(!1))}).on("click",()=>$.open(location.href+"#drawer")),$("div").class("account").hide(!0).title("Menu").self(r=>{v.events.on("login",e=>{r.content(e.name$.convert(t=>{var s;return((s=t.at(0))==null?void 0:s.toUpperCase())??""})).hide(!1)}).on("logout",()=>r.hide(!0))}).on("click",()=>yt.open())])]),at,yt,$("router").base("/").map([$("route").id("posts").path(["/","/posts"]).builder(()=>new Ot),$("route").id("posts").path("/posts?tags").builder(({query:r})=>{const e=new Ot({tags:r.tags});return[$("header").content([$("h2").content("Posts"),$("div").class("tags").self(t=>{r.tags.split("+").forEach(s=>{t.insert($("a").class("tag").content(decodeURIComponent(s)).href(`posts?tags=${s}`))})})]),$("div").class("no-post").hide(!0).self(t=>{t.on("startLoad",()=>t.hide(!0)),e.on("noPost",()=>t.hide(!1).content("No Posts")).on("post_error",s=>t.hide(!1).content(s))}),e]}),$e,Se]).on("beforeSwitch",r=>{r.preventDefault();function s(){var o;$(document.documentElement).css({scrollBehavior:"auto"});const n=$.call(()=>{switch(k.navigationDirection){case G.Forward:return["translateX(2%)","translateX(0%)"];case G.Back:return["translateX(-2%)","translateX(0%)"];case G.Replace:return""}});r.$view.content(r.nextContent),r.rendered(),(o=r.nextContent.element)==null||o.class("animated").animate({opacity:[0,1],transform:n},{duration:300,easing:"ease"},()=>{var a;r.switched(),$(document.documentElement).css({scrollBehavior:""}),(a=r.nextContent.element)==null||a.removeClass("animated")})}function i(){var o,a;$(document.documentElement).css({scrollBehavior:"auto"});const n=$.call(()=>{switch(k.navigationDirection){case G.Forward:return["translateX(0%)","translateX(-2%)"];case G.Back:return["translateX(0%)","translateX(2%)"];case G.Replace:return""}});(a=(o=r.previousContent)==null?void 0:o.element)==null||a.class("animated").animate({opacity:[1,0],transform:n},{duration:300,easing:"ease"},()=>{var l,u;(u=(l=r.previousContent)==null?void 0:l.element)==null||u.removeClass("animated"),s()})}r.previousContent?i():s()})]);k.events.on("stateChange",({beforeURL:r,afterURL:e})=>Wt(r,e));Wt(void 0,new URL(location.href));function Wt(r,e){at.checkURL(r,e),yt.checkURL(r,e)}$.keys($(window)).if(r=>{if(!($(r.target)instanceof P))return!0}).keydown(["q","Q"],r=>{r.preventDefault(),k.index!==0&&$.back()}).keydown(["e","E"],r=>{r.preventDefault(),k.forwardIndex!==0&&$.forward()}); diff --git a/dist/assets/index-BgVVzy-z.css b/dist/assets/index-BgVVzy-z.css new file mode 100644 index 0000000..3c0e90a --- /dev/null +++ b/dist/assets/index-BgVVzy-z.css @@ -0,0 +1 @@ +layout.post-grid{margin-block:1rem}layout.post-grid a{transition:.3s all ease}layout.post-grid:has(post-tile[focus]) post-tile:not([focus]) a{opacity:.5}layout.post-grid:has(post-tile[focus]) post-tile:hover a{opacity:1}post-tile{display:block;transition:.3s all ease;position:relative;transition:all .3s ease;border-radius:var(--border-radius-medium);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:transparent solid 2px;background-color:var(--secondary-color-1)}post-tile[focus]{outline:var(--secondary-color-9) solid 2px;transform:scale(1.02)}@media (hover: hover){post-tile:hover{transform:scale(1.02);z-index:1;box-shadow:0 0 10px color-mix(in srgb,var(--secondary-color-1) 50%,transparent)}}post-tile.loading{transition:none}post-tile:active{transform:scale(.95)}post-tile div.video-detail,post-tile div.gif-detail{position:absolute;background-color:var(--secondary-color-3);color:var(--primary-color);bottom:.3rem;right:.3rem;padding:.2em .4em;height:1rem;border-radius:var(--border-radius-small);font-size:12px;display:flex;align-items:center;gap:.2rem;z-index:2}post-tile div.video-detail ion-icon,post-tile div.gif-detail ion-icon{font-size:1.4rem}post-tile div.video-detail ion-icon[name=images-outline],post-tile div.gif-detail ion-icon[name=images-outline]{padding:.1rem;font-size:1rem}post-tile div.video-detail span.duration,post-tile div.gif-detail span.duration{text-transform:uppercase;z-index:2}post-tile a{background-color:transparent;padding:0;border-radius:0}post-tile a img{height:100%;width:100%;vertical-align:top;background-color:var(--secondary-color-1)}post-tile a video{height:100%;width:100%;object-fit:cover;position:absolute;z-index:1}searchbar{display:flex;align-items:center;flex-direction:column;width:100%;z-index:200;position:fixed;height:100%}searchbar div.input-container{margin-top:.4rem;background-color:color-mix(in srgb,var(--secondary-color-2) 100%,transparent);border-radius:var(--border-radius-small);font-size:1rem;width:500px;padding:.4rem;max-width:calc(100% - 2rem);box-sizing:border-box;z-index:201;display:flex;align-items:center;border:1px solid var(--secondary-color-4)}searchbar div.input-container:focus-within{outline:none}searchbar div.input-container tag-input{display:flex;gap:.4rem;width:100%;overflow:hidden;padding-inline:.4rem;box-sizing:border-box;cursor:text}searchbar div.input-container tag-input tag{display:inline-block;padding:.2rem .4rem;background-color:var(--secondary-color-4);color:var(--secondary-color-9);border-radius:var(--border-radius-small);cursor:pointer}searchbar div.input-container ion-icon{font-size:20px;color:var(--secondary-color-4);cursor:pointer}searchbar div.input-container ion-icon:hover{color:var(--secondary-color-9)}searchbar div.selection-list-container{overflow:hidden;border-radius:var(--border-radius-small);background-color:var(--secondary-color-1);z-index:201;max-width:calc(100% - 2rem);width:500px}searchbar div.selection-list-container selection-list{display:block;max-height:40vh;overflow-y:scroll;overflow-x:hidden;position:relative}searchbar div.selection-list-container selection-list::-webkit-scrollbar{width:4px}searchbar div.selection-list-container selection-list selection{display:flex;justify-content:space-between;align-items:center;padding:.4rem 1rem;cursor:pointer;gap:1rem}searchbar div.selection-list-container selection-list selection:hover{background-color:color-mix(in srgb,var(--secondary-color-3) 50%,transparent)}searchbar div.selection-list-container selection-list selection.active{background-color:var(--secondary-color-3)}searchbar div.selection-list-container selection-list selection div.selection-label{display:flex;flex-wrap:wrap;gap:.5rem}searchbar div.selection-list-container selection-list selection div.selection-label .label-container{display:flex;gap:.5rem;align-items:center}searchbar div.selection-list-container selection-list selection div.selection-label .label-container ion-icon{font-size:1rem}searchbar div.selection-list-container selection-list selection div.tag-detail{display:flex;align-items:center;gap:.5rem}searchbar div.selection-list-container selection-list selection div.tag-detail .tag-post-count{font-size:.8rem}searchbar div.selection-list-container selection-list selection .tag-category,searchbar div.selection-list-container selection-list selection .user-level{padding:.1rem .4rem;border-radius:var(--border-radius-small);font-size:.9rem;background-color:var(--secondary-color-4);color:var(--secondary-color-9)}searchbar div.filter{background-color:var(--secondary-color-1);opacity:.5;position:fixed;top:0;height:100%;width:100%;z-index:199}.input-wrapper{color:var(--primary-color);border:1px solid var(--secondary-color-9);border-radius:var(--border-radius-small);position:relative;box-sizing:border-box;line-height:1em;font-size:14px;padding:4px 8px;display:inline-block;max-width:100%;text-overflow:ellipsis}.input-wrapper span.sizer{font-family:inherit;white-space:pre;height:1em;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.input-wrapper input{height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;font-size:inherit;line-height:inherit;padding:inherit;position:absolute;box-sizing:border-box;width:100%;border:none;outline:none}button.icon{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.8rem 1.2rem}button.icon ion-icon{font-size:1.4rem;color:inherit}button.icon.vertical{flex-direction:column}ion-icon{font-size:24px;color:var(--primary-color);cursor:pointer}ion-icon:hover{color:var(--secondary-color-9)}ion-icon[disable=true]{color:var(--primary-color-darker);pointer-events:none}drawer{position:fixed;top:0;left:0;display:flex;z-index:300;height:100%;width:100%;box-sizing:border-box;justify-content:end;align-items:center;padding:1rem}drawer div.drawer-container{width:300px;max-width:70%;height:100%;background-color:var(--secondary-color-1);border-radius:var(--border-radius-large);z-index:1;overflow:hidden}drawer div.drawer-container div.user-info{background-color:var(--secondary-color-2);padding:2rem}drawer div.drawer-container div.user-info .username{margin:0;color:var(--secondary-color-9);cursor:pointer}drawer div.drawer-container div.user-info div.user-detail{display:flex;gap:.5rem;margin-top:.2rem}drawer div.drawer-container div.user-info div.user-detail span{font-size:.8rem;color:var(--primary-color-dark);display:block;cursor:pointer}drawer div.drawer-container div.user-info div.user-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}drawer div.drawer-container div.nav{padding:2rem;display:flex;gap:1rem;flex-direction:column}drawer div.drawer-container div.nav button.icon{justify-content:start}drawer div.filter{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--secondary-color-1) 50%,transparent),color-mix(in srgb,var(--secondary-color-0) 70%,transparent))}detail-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;--padding: 1rem;position:fixed;top:calc(var(--nav-height) + var(--padding));right:var(--padding);width:300px;height:calc(100dvh - 2rem - var(--nav-height));background-color:var(--secondary-color-1)}@media (max-width: 800px){detail-panel{position:static;width:100%;overflow:visible;height:100%;padding:1rem;box-sizing:border-box}}detail-panel span.no-content{color:var(--secondary-color-3);font-size:1.6rem;font-weight:900}detail-panel div.preview{overflow:hidden;border-radius:var(--border-radius-large);height:300px;width:300px;background-color:var(--secondary-color-0)}detail-panel div.preview img{height:100%;width:100%;object-fit:contain}detail-panel div.detail{display:flex;flex-direction:column;gap:.4rem;overflow:scroll;overflow-x:hidden;border-radius:var(--border-radius-large);height:100%;width:100%}detail-panel div.detail::-webkit-scrollbar{background-color:#000;width:0px}detail-panel div.detail::-webkit-scrollbar-thumb{background-color:#aeaeec}detail-panel h3{padding-left:1rem;margin-block:.6rem}detail-panel .post-info{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px;display:flex;flex-direction:column;gap:.4rem}detail-panel .post-info .buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}detail-panel div.property{display:flex;gap:.6rem;align-items:center;width:100%}detail-panel div.property span.property-name{flex-shrink:0}detail-panel div.property div.property-values{display:flex;gap:.4rem;width:100%;overflow:hidden}detail-panel div.property div.property-values span.property-value{padding:.2rem .4rem;background-color:var(--secondary-color-1);color:var(--primary-color-dark);border-radius:var(--border-radius-small);justify-content:space-between;flex-shrink:1;display:flex;align-items:center;overflow:hidden}detail-panel div.property div.property-values span.property-value:has(ion-icon){flex-shrink:0}detail-panel div.property div.property-values span.property-value *{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis;flex-shrink:1}detail-panel div.property div.property-values span.property-value ion-icon{font-size:1rem;padding:4px;box-sizing:border-box}detail-panel div.inline{display:flex;gap:1rem}detail-panel div.post-tags{display:flex;flex-direction:column;gap:.2rem}detail-panel div.post-tags div.tag{align-items:center}detail-panel div.post-tags div.tag a.tag-name{word-break:break-word;text-decoration:none}detail-panel div.post-tags div.tag span.tag-post-count{background-color:var(--secondary-color-3);color:var(--secondary-color-8);padding:0 4px;border-radius:var(--border-radius-small);font-size:12px;margin-left:.4rem}detail-panel div.post-tags section.tag-name-only{display:flex;flex-wrap:wrap;column-gap:.5rem}#post{padding:0;padding-top:var(--nav-height)}#post div.viewer{height:calc(100dvh - 2rem - var(--nav-height));display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:var(--border-radius-large);overflow:hidden;width:calc(100vw - 300px - 4rem);margin:1rem;position:relative;transition:all .3s ease}@media (max-width: 800px){#post div.viewer{width:100%;height:calc(100dvh - var(--nav-height));border-radius:0;margin:0}}#post div.viewer img{max-width:100%;max-height:100%}#post div.viewer video{max-width:100%;max-height:100%;-webkit-user-drag:none;transition:all .3s ease}#post div.viewer div.viewer-panel{position:absolute;bottom:0;width:100%;z-index:1}#post div.viewer div.viewer-panel div.panel{width:100%;display:flex;justify-content:center;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box}#post div.viewer div.viewer-panel div.panel video-controller{display:flex;flex-direction:column;gap:1rem;align-items:center;width:100%}#post div.viewer div.viewer-panel div.panel video-controller div.video-details{display:flex;align-items:center;justify-content:space-between;width:100%}#post div.viewer div.viewer-panel div.panel video-controller div.video-details div{display:flex;align-items:center;gap:1rem}#post div.viewer div.viewer-panel div.panel video-controller div.progressbar-container{height:2rem;width:100%;display:flex;touch-action:none;align-items:center;cursor:pointer}#post div.viewer div.viewer-panel div.panel video-controller div.progressbar-container div.progressbar{height:.4rem;width:100%;background-color:var(--secondary-color-1);flex-shrink:1}#post div.viewer div.viewer-panel div.panel video-controller div.progressbar-container div.progressbar div.progress{height:100%;background-color:var(--secondary-color-3);width:100px}#post div.viewer div.viewer-panel div.panel video-controller .play{flex-shrink:0}#post div.viewer div.viewer-panel div.panel div.buttons{width:100%;display:flex;justify-content:center;gap:2rem}#post div.viewer div.viewer-panel div.overlay{position:absolute;bottom:0;width:100%;height:200%;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary-color-1) 0%,transparent),color-mix(in srgb,var(--secondary-color-0) 70%,transparent))}#post div.content{width:calc(100vw - 300px - 2rem);display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}@media (max-width: 800px){#post div.content{width:100%}}#post div.content::-webkit-scrollbar{background-color:#000;width:4px}#post div.content::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.content>h3{padding-left:1rem;margin-block:1rem}#post div.content section.commentary *{text-wrap:wrap;word-break:break-word}route#login{display:flex;justify-content:center;align-items:center;margin-top:5rem}route#login .login-container{padding:2rem;border:1px solid var(--secondary-color-9);border-radius:var(--border-radius-large);display:flex;flex-direction:column;justify-content:center;gap:1rem;max-width:400px;width:100%;box-sizing:border-box}route#login .login-container h1{margin:0}route#login .login-container .input-container{display:flex;flex-direction:column;gap:.5rem}route#login .login-container .input-container input{display:block}:root{--primary-color: #d1d1ee;--primary-color-dark: #9696b3;--primary-color-darker: #72728d;--secondary-color-9: #aeaeec;--secondary-color-8: #9a9ad6;--secondary-color-7: #7c7cb8;--secondary-color-6: #646497;--secondary-color-5: #545486;--secondary-color-4: #424268;--secondary-color-3: #3b3b66;--secondary-color-2: #24243b;--secondary-color-1: #1e1e2c;--secondary-color-0: #07070c;--shadow-color: #09090e50;--border-radius-small: .4rem;--border-radius-medium: .8rem;--border-radius-large: 1.2rem;--nav-height: 50px}html{overflow-x:hidden;font-size:14px;scroll-behavior:smooth}html ::-webkit-scrollbar{background-color:var(--secondary-color-1);width:8px}html ::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}body{overflow-x:hidden;background-color:var(--secondary-color-1);color:var(--primary-color);margin:0;font-family:Microsoft Yahei}nav{display:flex;width:100%;height:var(--nav-height);position:fixed;top:0;z-index:100;background-color:color-mix(in srgb,var(--secondary-color-1) 70%,transparent);justify-content:space-between;align-items:center;padding-inline:1rem;box-sizing:border-box;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}nav a.title{display:flex;align-items:center;gap:.4rem;text-decoration:none}nav a.title .booru-name{color:var(--secondary-color-9);margin:0}nav a.title .app{display:flex;align-items:center;border-radius:var(--border-radius-small);margin:0;gap:.4rem}nav a.title .app .version{color:var(--secondary-color-1);background-color:var(--secondary-color-9);padding:.2em .4em;border-radius:var(--border-radius-small);font-size:.8rem;font-weight:700}nav a.title .app .app-name{display:none;font-size:1rem;color:var(--secondary-color-9)}nav div.searchbar{padding:.4rem 10%;max-width:500px;background-color:color-mix(in srgb,var(--secondary-color-2) 30%,transparent);border:1px solid var(--primary-color-darker);border-radius:var(--border-radius-small);color:var(--primary-color-dark);transition:.3s all ease;cursor:pointer}nav div.searchbar:hover{color:var(--primary-color)}nav div.buttons{display:flex;align-items:center;gap:1rem}nav div.buttons ion-icon{transition:all .3s ease;border-radius:1rem;padding:.4rem}nav div.buttons ion-icon:hover{background-color:color-mix(in srgb,var(--secondary-color-3) 50%,transparent)}nav div.buttons ion-icon.search{display:none}nav div.buttons a{display:flex;justify-content:center;align-items:center}nav div.buttons div.account{height:2rem;width:2rem;display:flex;justify-content:center;align-items:center;border-radius:2rem;font-weight:bolder;color:var(--secondary-color-9);background-color:var(--secondary-color-4);-webkit-user-select:none;user-select:none;cursor:pointer}@media (max-width: 800px){nav div.searchbar{display:none}nav div.buttons ion-icon.search{display:inline-block}nav div.buttons ion-icon.detail-panel{display:none}}router{display:block;position:relative}router route{display:block;position:relative;padding-inline:1rem;padding-top:var(--nav-height)}route#posts header{margin-bottom:1rem}route#posts header h2{margin:0}route#posts header div.tags{display:flex;flex-wrap:wrap;gap:.5rem}route#posts .post-grid.detail-panel-enabled{width:calc(100vw - 300px - 4rem)}@media (max-width: 800px){route#posts .post-grid.detail-panel-enabled{width:100%}}@media (max-width: 800px){route#posts detail-panel{display:none}}section{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px}button{background-color:var(--secondary-color-4);color:var(--secondary-color-9);padding:.8rem 1.2rem;border-radius:1rem;border:none;cursor:pointer}button:hover{background-color:var(--secondary-color-6);color:var(--primary-color)}a{text-decoration:none;color:var(--secondary-color-9)}input{background-color:var(--secondary-color-2);border-radius:var(--border-radius-small);border:1px solid var(--secondary-color-3);font-size:.9rem;padding:.8rem 1.2rem;color:var(--primary-color);outline:none}input:focus{border-color:var(--secondary-color-9)} diff --git a/dist/assets/index-ByWqsQtl.css b/dist/assets/index-ByWqsQtl.css deleted file mode 100644 index 91ae363..0000000 --- a/dist/assets/index-ByWqsQtl.css +++ /dev/null @@ -1 +0,0 @@ -layout.post-grid{margin-top:.4rem}layout.post-grid:has(post-tile[focus]) post-tile:not([focus]){opacity:.5}layout.post-grid:has(post-tile[focus]) post-tile:hover{opacity:1}post-tile{display:block;transition:.3s all ease;position:relative;transition:all .3s ease;border-radius:var(--border-radius-medium);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:transparent solid 2px}post-tile[focus]{outline:var(--secondary-color-9) solid 2px;transform:scale(1.02)}@media (hover: hover){post-tile:hover{transform:scale(1.02);z-index:1;box-shadow:0 0 10px color-mix(in srgb,var(--secondary-color-1) 50%,transparent)}}post-tile.loading{transition:none}post-tile:active{transform:scale(.95)}post-tile div.video-detail,post-tile div.gif-detail{position:absolute;background-color:var(--secondary-color-3);color:var(--primary-color);bottom:.3rem;right:.3rem;padding:.2em .4em;height:1rem;border-radius:var(--border-radius-small);font-size:12px;display:flex;align-items:center;gap:.2rem;z-index:2}post-tile div.video-detail ion-icon,post-tile div.gif-detail ion-icon{font-size:1.4rem}post-tile div.video-detail ion-icon[name=images-outline],post-tile div.gif-detail ion-icon[name=images-outline]{padding:.1rem;font-size:1rem}post-tile div.video-detail span.duration,post-tile div.gif-detail span.duration{text-transform:uppercase;z-index:2}post-tile a{background-color:transparent;padding:0;border-radius:0}post-tile a img{height:100%;width:100%;vertical-align:top;background-color:var(--secondary-color-1)}post-tile a video{height:100%;width:100%;object-fit:cover;position:absolute;z-index:1}searchbar{display:flex;align-items:center;flex-direction:column;width:100%;z-index:200;position:fixed;height:100%}searchbar div.input-container{margin-top:.4rem;background-color:color-mix(in srgb,var(--secondary-color-2) 100%,transparent);border-radius:var(--border-radius-small);font-size:1rem;width:500px;padding:.4rem;max-width:calc(100% - 2rem);box-sizing:border-box;z-index:201;display:flex;align-items:center;border:1px solid var(--secondary-color-4)}searchbar div.input-container:focus-within{outline:none}searchbar div.input-container tag-input{display:flex;gap:.4rem;width:100%;overflow:hidden;padding-inline:.4rem;box-sizing:border-box;cursor:text}searchbar div.input-container tag-input tag{display:inline-block;padding:.2rem .4rem;background-color:var(--secondary-color-4);color:var(--secondary-color-9);border-radius:var(--border-radius-small);cursor:pointer}searchbar div.input-container ion-icon{font-size:20px;color:var(--secondary-color-4);cursor:pointer}searchbar div.input-container ion-icon:hover{color:var(--secondary-color-9)}searchbar div.selection-list-container{overflow:hidden;border-radius:var(--border-radius-small);background-color:var(--secondary-color-1);z-index:201;max-width:calc(100% - 2rem);width:500px}searchbar div.selection-list-container selection-list{display:block;max-height:40vh;overflow-y:scroll;overflow-x:hidden;position:relative}searchbar div.selection-list-container selection-list::-webkit-scrollbar{width:4px}searchbar div.selection-list-container selection-list selection{display:flex;justify-content:space-between;align-items:center;padding:.4rem 1rem;cursor:pointer;gap:1rem}searchbar div.selection-list-container selection-list selection:hover{background-color:color-mix(in srgb,var(--secondary-color-3) 50%,transparent)}searchbar div.selection-list-container selection-list selection.active{background-color:var(--secondary-color-3)}searchbar div.selection-list-container selection-list selection div.selection-label{display:flex;flex-wrap:wrap;gap:.5rem}searchbar div.selection-list-container selection-list selection div.selection-label .label-container{display:flex;gap:.5rem;align-items:center}searchbar div.selection-list-container selection-list selection div.selection-label .label-container ion-icon{font-size:1rem}searchbar div.selection-list-container selection-list selection div.tag-detail{display:flex;align-items:center;gap:.5rem}searchbar div.selection-list-container selection-list selection div.tag-detail .tag-post-count{font-size:.8rem}searchbar div.selection-list-container selection-list selection .tag-category,searchbar div.selection-list-container selection-list selection .user-level{padding:.1rem .4rem;border-radius:var(--border-radius-small);font-size:.9rem;background-color:var(--secondary-color-4);color:var(--secondary-color-9)}searchbar div.filter{background-color:var(--secondary-color-1);opacity:.5;position:fixed;top:0;height:100%;width:100%;z-index:199}.input-wrapper{color:var(--primary-color);border:1px solid var(--secondary-color-9);border-radius:var(--border-radius-small);position:relative;box-sizing:border-box;line-height:1em;font-size:14px;padding:4px 8px;display:inline-block;max-width:100%;text-overflow:ellipsis}.input-wrapper span.sizer{font-family:inherit;white-space:pre;height:1em;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.input-wrapper input{height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;font-size:inherit;line-height:inherit;padding:inherit;position:absolute;box-sizing:border-box;width:100%;border:none;outline:none}button.icon{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.8rem 1.2rem}button.icon ion-icon{font-size:1.4rem;color:inherit}button.icon.vertical{flex-direction:column}ion-icon{font-size:24px;color:var(--primary-color);cursor:pointer}ion-icon:hover{color:var(--secondary-color-9)}ion-icon[disable=true]{color:var(--primary-color-darker);pointer-events:none}drawer{position:fixed;top:0;left:0;display:flex;z-index:300;height:100%;width:100%;box-sizing:border-box;justify-content:end;align-items:center;padding:1rem}drawer div.drawer-container{width:300px;max-width:70%;height:100%;background-color:var(--secondary-color-1);border-radius:var(--border-radius-large);z-index:1;overflow:hidden}drawer div.drawer-container div.user-info{background-color:var(--secondary-color-2);padding:2rem}drawer div.drawer-container div.user-info .username{margin:0;color:var(--secondary-color-9);cursor:pointer}drawer div.drawer-container div.user-info div.user-detail{display:flex;gap:.5rem;margin-top:.2rem}drawer div.drawer-container div.user-info div.user-detail span{font-size:.8rem;color:var(--primary-color-dark);display:block;cursor:pointer}drawer div.drawer-container div.user-info div.user-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}drawer div.drawer-container div.nav{padding:2rem;display:flex;gap:1rem;flex-direction:column}drawer div.drawer-container div.nav button.icon{justify-content:start}drawer div.filter{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--secondary-color-1) 50%,transparent),color-mix(in srgb,var(--secondary-color-0) 70%,transparent))}#post{padding:0;padding-top:var(--nav-height)}#post section{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px}#post div.viewer{height:calc(100dvh - 2rem - var(--nav-height));display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:var(--border-radius-large);overflow:hidden;width:calc(100vw - 300px - 4rem);margin:1rem;position:relative;transition:all .3s ease}@media (max-width: 800px){#post div.viewer{width:100%;height:calc(100dvh - var(--nav-height));border-radius:0;margin:0}}#post div.viewer img{max-width:100%;max-height:100%}#post div.viewer video{max-width:100%;max-height:100%;-webkit-user-drag:none;transition:all .3s ease}#post div.viewer div.viewer-panel{position:absolute;bottom:0;width:100%;z-index:1}#post div.viewer div.viewer-panel div.panel{width:100%;display:flex;justify-content:center;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box}#post div.viewer div.viewer-panel div.panel video-controller{display:flex;flex-direction:column;gap:1rem;align-items:center;width:100%}#post div.viewer div.viewer-panel div.panel video-controller div.video-details{display:flex;align-items:center;justify-content:space-between;width:100%}#post div.viewer div.viewer-panel div.panel video-controller div.video-details div{display:flex;align-items:center;gap:1rem}#post div.viewer div.viewer-panel div.panel video-controller div.progressbar-container{height:2rem;width:100%;display:flex;touch-action:none;align-items:center}#post div.viewer div.viewer-panel div.panel video-controller div.progressbar-container div.progressbar{height:.4rem;width:100%;background-color:var(--secondary-color-1);flex-shrink:1;cursor:pointer}#post div.viewer div.viewer-panel div.panel video-controller div.progressbar-container div.progressbar div.progress{height:100%;background-color:var(--secondary-color-3);width:100px}#post div.viewer div.viewer-panel div.panel video-controller .play{flex-shrink:0}#post div.viewer div.viewer-panel div.panel div.buttons{width:100%;display:flex;justify-content:center;gap:2rem}#post div.viewer div.viewer-panel div.overlay{position:absolute;bottom:0;width:100%;height:200%;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary-color-1) 0%,transparent),color-mix(in srgb,var(--secondary-color-0) 70%,transparent))}#post div.content{width:calc(100vw - 300px - 2rem);display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}@media (max-width: 800px){#post div.content{width:100%}}#post div.content::-webkit-scrollbar{background-color:#000;width:4px}#post div.content::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.content>h3{padding-left:1rem;margin-block:1rem}#post div.content section.commentary *{text-wrap:wrap;word-break:break-word}#post div.sidebar{--padding: 1rem;position:fixed;top:calc(var(--nav-height) + var(--padding));right:var(--padding);display:flex;flex-direction:column;gap:.4rem;width:300px;overflow:scroll;overflow-x:hidden;height:calc(100dvh - 2rem - var(--nav-height));border-radius:var(--border-radius-large);transition:all .3s ease}@media (max-width: 800px){#post div.sidebar{position:static;width:100%;overflow:visible;height:100%;padding:1rem;box-sizing:border-box}}#post div.sidebar::-webkit-scrollbar{background-color:#000;width:0px}#post div.sidebar::-webkit-scrollbar-thumb{background-color:#aeaeec}#post div.sidebar h3{padding-left:1rem;margin-block:.6rem}#post div.sidebar .post-info{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px;display:flex;flex-direction:column;gap:.4rem}#post div.sidebar .post-info .buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}#post div.sidebar div.property{display:flex;gap:.6rem;align-items:center;width:100%}#post div.sidebar div.property span.property-name{flex-shrink:0}#post div.sidebar div.property div.property-values{display:flex;gap:.4rem;width:100%;overflow:hidden}#post div.sidebar div.property div.property-values span.property-value{padding:.2rem .4rem;background-color:var(--secondary-color-1);color:var(--primary-color-dark);border-radius:var(--border-radius-small);justify-content:space-between;flex-shrink:1;display:flex;align-items:center;overflow:hidden}#post div.sidebar div.property div.property-values span.property-value:has(ion-icon){flex-shrink:0}#post div.sidebar div.property div.property-values span.property-value *{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis;flex-shrink:1}#post div.sidebar div.property div.property-values span.property-value ion-icon{font-size:1rem;padding:4px;box-sizing:border-box}#post div.sidebar div.inline{display:flex;gap:1rem}#post div.sidebar div.post-tags{display:flex;flex-direction:column;gap:.2rem}#post div.sidebar div.post-tags div.tag{align-items:center}#post div.sidebar div.post-tags div.tag a.tag-name{word-break:break-word;text-decoration:none}#post div.sidebar div.post-tags div.tag span.tag-post-count{background-color:var(--secondary-color-3);color:var(--secondary-color-8);padding:0 4px;border-radius:var(--border-radius-small);font-size:12px;margin-left:.4rem}route#login{display:flex;justify-content:center;align-items:center;margin-top:5rem}route#login .login-container{padding:2rem;border:1px solid var(--secondary-color-9);border-radius:var(--border-radius-large);display:flex;flex-direction:column;justify-content:center;gap:1rem;max-width:400px;width:100%;box-sizing:border-box}route#login .login-container h1{margin:0}route#login .login-container .input-container{display:flex;flex-direction:column;gap:.5rem}route#login .login-container .input-container input{display:block}:root{--primary-color: #d1d1ee;--primary-color-dark: #9696b3;--primary-color-darker: #72728d;--secondary-color-9: #aeaeec;--secondary-color-8: #9a9ad6;--secondary-color-7: #7c7cb8;--secondary-color-6: #646497;--secondary-color-5: #545486;--secondary-color-4: #424268;--secondary-color-3: #3b3b66;--secondary-color-2: #24243b;--secondary-color-1: #1e1e2c;--secondary-color-0: #07070c;--shadow-color: #09090e50;--border-radius-small: .4rem;--border-radius-medium: .8rem;--border-radius-large: 1.2rem;--nav-height: 50px}html{overflow-x:hidden;font-size:14px;scroll-behavior:smooth}html ::-webkit-scrollbar{background-color:var(--secondary-color-1);width:8px}html ::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}body{overflow-x:hidden;background-color:var(--secondary-color-1);color:var(--primary-color);margin:0;font-family:Microsoft Yahei}nav{display:flex;width:100%;height:var(--nav-height);position:fixed;top:0;z-index:100;background-color:color-mix(in srgb,var(--secondary-color-1) 70%,transparent);justify-content:space-between;align-items:center;padding-inline:1rem;box-sizing:border-box;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}nav a.title{display:flex;align-items:center;gap:.4rem;text-decoration:none}nav a.title .booru-name{color:var(--secondary-color-9);margin:0}nav a.title .app{display:flex;align-items:center;border-radius:var(--border-radius-small);margin:0;gap:.4rem}nav a.title .app .version{color:var(--secondary-color-1);background-color:var(--secondary-color-9);padding:.2em .4em;border-radius:var(--border-radius-small);font-size:.8rem;font-weight:700}nav a.title .app .app-name{display:none;font-size:1rem;color:var(--secondary-color-9)}nav div.searchbar{padding:.4rem 10%;max-width:500px;background-color:color-mix(in srgb,var(--secondary-color-2) 30%,transparent);border:1px solid var(--primary-color-darker);border-radius:var(--border-radius-small);color:var(--primary-color-dark);transition:.3s all ease;cursor:pointer}nav div.searchbar:hover{color:var(--primary-color)}nav div.buttons{display:flex;align-items:center;gap:1rem}nav div.buttons ion-icon{transition:all .3s ease;border-radius:1rem;padding:.4rem}nav div.buttons ion-icon:hover{background-color:color-mix(in srgb,var(--secondary-color-3) 50%,transparent)}nav div.buttons ion-icon.search{display:none}nav div.buttons a{display:flex;justify-content:center;align-items:center}nav div.buttons div.account{height:2rem;width:2rem;display:flex;justify-content:center;align-items:center;border-radius:2rem;font-weight:bolder;color:var(--secondary-color-9);background-color:var(--secondary-color-4);-webkit-user-select:none;user-select:none;cursor:pointer}@media (max-width: 800px){nav div.searchbar{display:none}nav div.buttons ion-icon.search{display:inline-block}}router{display:block;position:relative}router route{display:block;position:relative;padding-inline:1rem;padding-top:var(--nav-height)}route#posts header{margin-bottom:1rem}route#posts header h2{margin:0}route#posts header div.tags{display:flex;flex-wrap:wrap;gap:.5rem}button{background-color:var(--secondary-color-4);color:var(--secondary-color-9);padding:.8rem 1.2rem;border-radius:1rem;border:none;cursor:pointer}button:hover{background-color:var(--secondary-color-6);color:var(--primary-color)}a{text-decoration:none;color:var(--secondary-color-9)}input{background-color:var(--secondary-color-2);border-radius:var(--border-radius-small);border:1px solid var(--secondary-color-3);font-size:.9rem;padding:.8rem 1.2rem;color:var(--primary-color);outline:none}input:focus{border-color:var(--secondary-color-9)} diff --git a/dist/assets/index-C_KR8nb7.js b/dist/assets/index-C_KR8nb7.js new file mode 100644 index 0000000..59c6b3f --- /dev/null +++ b/dist/assets/index-C_KR8nb7.js @@ -0,0 +1 @@ +var Bt=Object.defineProperty;var xt=r=>{throw TypeError(r)};var Kt=(r,e,t)=>e in r?Bt(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var h=(r,e,t)=>Kt(r,typeof e!="symbol"?e+"":e,t),St=(r,e,t)=>e.has(r)||xt("Cannot "+t);var k=(r,e,t)=>(St(r,e,"read from private field"),t?t.call(r):e.get(r)),tt=(r,e,t)=>e.has(r)?xt("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t),et=(r,e,t,s)=>(St(r,e,"write to private field"),s?s.call(r,t):e.set(r,t),t);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))s(i);new MutationObserver(i=>{for(const n of i)if(n.type==="childList")for(const a of n.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&s(a)}).observe(document,{childList:!0,subtree:!0});function t(i){const n={};return i.integrity&&(n.integrity=i.integrity),i.referrerPolicy&&(n.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?n.credentials="include":i.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function s(i){if(i.ep)return;i.ep=!0;const n=t(i);fetch(i.href,n)}})();class R{constructor(){h(this,"eventMap",new Map)}fire(e,...t){var s;return(s=this.eventMap.get(e))==null||s.forEach(i=>i(...t)),this}on(e,t){const s=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return s==null||s.add(t),this}off(e,t){var s;return(s=this.eventMap.get(e))==null||s.delete(t),this}once(e,t){const s=(...n)=>{var a;(a=this.eventMap.get(e))==null||a.delete(s),t(...n)},i=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return i==null||i.add(s),this}}class Mt{constructor(){h(this,"domEvents",{});h(this,"events",new R)}on(e,t,s){e=$.orArrayResolve(e);for(const i of e){this.domEvents[i]||(this.domEvents[i]=new Map);const n=a=>{t(a,this)};this.domEvents[i].set(t,n),this.events.on(i,t),this.dom.addEventListener(i,n,s)}return this}off(e,t,s){var n;const i=(n=this.domEvents[e])==null?void 0:n.get(t);return i&&this.dom.removeEventListener(e,i,s),this.events.off(e,t),this}once(e,t,s){const i=n=>{this.dom.removeEventListener(e,i,s),t(n,this)};return this.dom.addEventListener(e,i,s),this.events.once(e,t),this}trigger(e){this.dom.dispatchEvent(new Event(e))}}class J extends Mt{constructor(){super(...arguments);h(this,"__$property__",{hidden:!1,coordinate:void 0});h(this,"parent")}hide(t,s=!0){return w.fluent(this,arguments,()=>this.__$property__.hidden,()=>{var i;if(t!==void 0)return t instanceof I?(this.__$property__.hidden=t.value,t.use(this,"hide")):this.__$property__.hidden=t,s&&((i=this.parent)==null||i.children.render()),this})}remove(){var t;return(t=this.parent)==null||t.children.remove(this).render(),this}replace(t){var s;return(s=this.parent)==null||s.children.replace(this,t).render(),this}contains(t){return t?t instanceof J?this.dom.contains(t.dom):t instanceof EventTarget?this.dom.contains(w(t).dom):this.dom.contains(t):!1}coordinate(t){return w.fluent(this,arguments,()=>this.__$property__.coordinate,()=>w.set(this.__$property__,"coordinate",t))}self(t){return w.orArrayResolve(t).forEach(s=>s(this)),this}inDOM(){return document.contains(this.dom)}isElement(){return this instanceof V}get element(){return this instanceof V?this:null}get htmlElement(){return this instanceof K?this:null}}class V extends J{constructor(t,s){super();h(this,"dom");h(this,"static_classes",new Set);this.dom=this.createDom(t,s),this.dom.$=this,this.setOptions(s)}createDom(t,s){return s!=null&&s.dom?s.dom:t==="svg"?document.createElementNS("http://www.w3.org/2000/svg","svg"):document.createElement((s==null?void 0:s.tagname)??t)}setOptions(t){return this.id(t==null?void 0:t.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(s=>this.static_classes.has(s)??this.dom.classList.remove(s)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.add(s)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.delete(s)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,s){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?t?(s===null?this.dom.removeAttribute(t):s!==void 0&&this.dom.setAttribute(t,`${s}`),this):this:this:null}tabIndex(t){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",t))}focus(t){return this.dom.focus(t),this}blur(){return this.dom.blur(),this}animate(t,s,i){const n=this.dom.animate(t,s);return i&&(n.onfinish=()=>i(n)),n}getAnimations(t){return this.dom.getAnimations(t)}get dataset(){return this.dom.dataset}domRect(t){const s=this.dom.getBoundingClientRect();if(!t)return s;const i=t instanceof V?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}}class it extends J{constructor(t){super();h(this,"dom");this.dom=t,this.dom.$=this}domRect(t){const s={bottom:innerHeight,height:innerHeight,left:0,right:innerWidth,top:0,width:innerWidth,x:0,y:0};if(!t)return s;const i=t instanceof V?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}static from(t){return t.$ instanceof it?t.$:new it(t)}}const Xt="modulepreload",qt=function(r){return"/"+r},Ot={},Qt=function(e,t,s){let i=Promise.resolve();if(t&&t.length>0){document.getElementsByTagName("link");const a=document.querySelector("meta[property=csp-nonce]"),o=(a==null?void 0:a.nonce)||(a==null?void 0:a.getAttribute("nonce"));i=Promise.allSettled(t.map(l=>{if(l=qt(l),l in Ot)return;Ot[l]=!0;const u=l.endsWith(".css"),c=u?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${l}"]${c}`))return;const d=document.createElement("link");if(d.rel=u?"stylesheet":Xt,u||(d.as="script"),d.crossOrigin="",d.href=l,o&&d.setAttribute("nonce",o),document.head.appendChild(d),u)return new Promise((p,b)=>{d.addEventListener("load",p),d.addEventListener("error",()=>b(new Error(`Unable to preload CSS for ${l}`)))})}))}function n(a){const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=a,window.dispatchEvent(o),!o.defaultPrevented)throw a}return i.then(a=>{for(const o of a||[])o.status==="rejected"&&n(o.reason);return e().catch(n)})};class Jt{constructor(e){h(this,"$container");h(this,"childList",new Set);this.$container=e}add(e,t=-1){if(t===-1||this.childList.size-1===t)this.childList.add(e);else{const s=[...this.childList];s.splice(t,0,e),this.childList.clear(),s.forEach(i=>this.childList.add(i))}e.parent=this.$container}remove(e){return this.childList.has(e)?(this.childList.delete(e),e.parent=void 0,this):this}removeAll(e=!0){this.childList.forEach(t=>this.remove(t)),e&&this.render()}replace(e,t){const s=this.array;return s.splice(s.indexOf(e),1,t),e.remove(),this.childList.clear(),s.forEach(i=>this.childList.add(i)),t.parent=this.$container,this}render(){const[e,t]=[this.array.map(i=>i.dom),Array.from(this.dom.childNodes)],s=[];for(;t.length||e.length;){const[i,n]=[t.at(0),e.at(0)];n?i?n!==i?(n.$.hide()||(this.dom.insertBefore(n,i),s.push(n)),e.shift()):(n.$.hide()&&this.dom.removeChild(n),e.shift(),t.shift()):(n.$.hide()||this.dom.append(n),e.shift()):(i&&!s.includes(i)&&i.remove(),t.shift())}}indexOf(e){return this.array.indexOf(e)}get array(){return[...this.childList.values()]}get dom(){return this.$container.dom}}class I extends R{constructor(t,s){super();h(this,"_value");h(this,"_convert");h(this,"attributes",new Map);h(this,"linkStates",new Set);h(this,"options",{});this.set(t),s&&(this.options=s)}set(t){this._value=t,t instanceof I&&t.linkStates.add(this),this.update(),this.linkStates.forEach(s=>s.update())}static toJSON(t){const s={};for(let[i,n]of Object.entries(t))n instanceof I?n=n.toJSON():n instanceof Object&&I.toJSON(n),Object.assign(s,{[i]:n});return s}update(){for(const[t,s]of this.attributes.entries())for(const i of s)t[i]instanceof Function?this.options.format?t[i](this.options.format(this.value)):t[i](this.value):i in t&&(t[i]=this.value);this.fire("update",{state$:this})}use(t,s){const i=this.attributes.get(t);i?i.add(s):this.attributes.set(t,new Set().add(s))}convert(t){const s=new I(this);return s._convert=t,s}get value(){return this._value instanceof I?this._convert?this._convert(this._value.value):this._value.value:this._value}toString(){return this.options.format?`${this.options.format(this.value)}`:this.value instanceof Object?JSON.stringify(this.toJSON()):`${this.value}`}toJSON(){return this.value instanceof I?this.value.toJSON():this.value instanceof Object?I.toJSON(this.value):this.toString()}}class X extends J{constructor(t){super();h(this,"dom");this.dom=new Text(t),this.dom.$=this}content(t){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",t))}}class K extends V{constructor(e,t){super(e,t)}autocapitalize(e){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",e))}innerText(e){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",e))}title(e){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",e))}dir(e){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",e))}translate(e){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",e))}popover(e){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",e))}spellcheck(e){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",e))}inert(e){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",e))}lang(e){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",e))}draggable(e){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",e))}hidden(e){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",e))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}}class f extends K{constructor(t,s){super(t,s);h(this,"children",new Jt(this));h(this,"__position_cursor",0)}content(t){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(t)})}insert(t,s=-1){return $.fluent(this,arguments,()=>this,async()=>{if(t instanceof Function){let i=t(this);i instanceof Promise?t=await i:t=i}else t instanceof Promise&&(t=await t);t=$.orArrayResolve(t),this.__position_cursor=s<0?this.children.array.length+s:s;for(const i of t)if(i!=null){if(i instanceof Array)this.insert(i,this.__position_cursor);else if(typeof i=="string")this.children.add(new X(i),s);else if(i instanceof I){const n=new X(i.toString());i.use(n,"content"),this.children.add(n,s)}else if(i instanceof Promise){const n=(await Qt(async()=>{const{$Async:o}=await Promise.resolve().then(()=>ne);return{$Async:o}},void 0)).$Async,a=new n().await(i);this.children.add(a,s)}else this.children.add(i,s);this.__position_cursor+=1}this.children.render()})}clear(){return this.children.removeAll(),this}$(t){if(t.startsWith("::"))return Array.from(document.querySelectorAll(t.replace(/^::/,""))).map(s=>$(s));if(t.startsWith(":"))return $(document.querySelector(t.replace(/^:/,"")))}get scrollHeight(){return this.dom.scrollHeight}get scrollWidth(){return this.dom.scrollWidth}scrollTop(t){return $.fluent(this,arguments,()=>this.dom.scrollTop,()=>$.set(this.dom,"scrollTop",t))}scrollLeft(t){return $.fluent(this,arguments,()=>this.dom.scrollLeft,()=>$.set(this.dom,"scrollLeft",t))}}class Lt extends f{constructor(e){super("a",e),this.dom.addEventListener("click",t=>{$.anchorHandler&&this.href()&&(t.preventDefault(),$.anchorHandler(this,t))})}href(e){return $.fluent(this,arguments,()=>this.dom.href,()=>$.set(this.dom,"href",e))}target(e){return $.fluent(this,arguments,()=>this.dom.target??void 0,()=>{e&&(this.dom.target=e)})}}class Yt extends V{constructor(e,t){super(e,t)}}var x;(r=>{function e(o,l,u,c){return l.length?(c(),o):u()}r.fluent=e;function t(o){return o instanceof Array?o:[o]}r.orArrayResolve=t;function s(o,l){return t(l).forEach(u=>{Object.getOwnPropertyNames(u.prototype).forEach(c=>{c!=="constructor"&&Object.defineProperty(o.prototype,c,Object.getOwnPropertyDescriptor(u.prototype,c)||Object.create(null))})}),o}r.mixin=s;function i(o,l,u){u!==void 0&&(o[l]=u)}r.set=i;function n(o){return new I(o)}r.state=n;function a(o){if(o.$)return o.$;if(o.nodeName.toLowerCase()==="body")return new f("body",{dom:o});if(o.nodeName.toLowerCase()==="head")return new f("head",{dom:o});if(o.nodeName.toLowerCase()==="#document")return it.from(o);if(o instanceof HTMLElement){const l=$.TagNameElementMap[o.tagName.toLowerCase()],u=l?l===f?new l(o.tagName,{dom:o}):new l({dom:o}):new f(o.tagName,{dom:o});if(u instanceof f)for(const c of Array.from(u.dom.childNodes))u.children.add($(c));return u}else if(o instanceof Text){const l=new X(o.textContent??"");return l.dom=o,l}else if(o instanceof SVGElement&&o.tagName.toLowerCase()==="svg")return new Yt("svg",{dom:o});throw`$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE (${o.nodeName})`}r.from=a})(x||(x={}));class P{static create(...e){const t=class{};return Object.getOwnPropertyNames(P.prototype).forEach(s=>{s!=="constructor"&&e.includes(s)&&Object.defineProperty(t.prototype,s,Object.getOwnPropertyDescriptor(P.prototype,s)||Object.create(null))}),t}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}formAction(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}formEnctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}formMethod(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}formNoValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}formTarget(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}name(e){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",e))}maxLength(e){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",e))}minLength(e){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}label(e){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",e))}get form(){return this.dom.form?$(this.dom.form):null}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}class wt extends f{constructor(e){super("button",e)}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}}x.mixin(wt,P.create("disabled","checkValidity","formAction","formEnctype","formMethod","formNoValidate","formTarget","reportValidity"));class Pt extends f{constructor(e){super("form",e)}action(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}enctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}method(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}noValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}acceptCharset(e){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",e))}target(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(e=>$(e))}}x.mixin(Pt,P.create("checkValidity","reportValidity","autocomplete"));class M extends K{constructor(e){super("input",e)}value(e){return $.fluent(this,arguments,()=>this.type()==="number"?Number(this.dom.value):this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}capture(e){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",e))}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}pattern(e){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}size(e){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}valueAsDate(e){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",e))}valueAsNumber(e){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",e))}webkitdirectory(e){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}showPicker(){return this.dom.showPicker(),this}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}x.mixin(M,P.create("checkValidity","reportValidity","autocomplete","name","form","required","validationMessage","validity","willValidate","formAction","formEnctype","formMethod","formNoValidate","formTarget"));class Zt extends M{constructor(e){super(e),this.type("number")}static from(e){return $.mixin(M,this)}stepDown(){return this.dom.stepDown(),this}stepUp(){return this.dom.stepUp(),this}max(e){return $.fluent(this,arguments,()=>this.dom.max===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"max",e==null?void 0:e.toString()))}min(e){return $.fluent(this,arguments,()=>this.dom.min===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"min",e==null?void 0:e.toString()))}step(e){return $.fluent(this,arguments,()=>Number(this.dom.step),()=>$.set(this.dom,"step",e==null?void 0:e.toString()))}}class te extends M{constructor(e){super(e),this.type("radio")}static from(e){return $.mixin(M,this)}checked(e){return $.fluent(this,arguments,()=>this.dom.checked,()=>$.set(this.dom,"checked",e))}defaultChecked(e){return $.fluent(this,arguments,()=>this.dom.defaultChecked,()=>$.set(this.dom,"defaultChecked",e))}}class ee extends M{constructor(e){super(e),this.type("file")}static from(e){return $.mixin(M,this)}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}accept(...e){return $.fluent(this,arguments,()=>this.dom.accept.split(","),()=>this.dom.accept=e.toString())}}x.mixin(M,[Zt,te,ee]);class At extends f{constructor(e){super("label",e)}for(e){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",e)})}get control(){return this.dom.control}}x.mixin(At,P.create("form"));class se extends K{constructor(e){super("img",e)}async load(e){return new Promise(t=>{const s=this.once("load",()=>{t(s)});typeof e=="string"?s.src(e):e.then(i=>s.src(i))})}static resize(e,t){return new Promise(s=>{const i=new Image;if(i.addEventListener("load",()=>{const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw"$Image.resize: context undefined";const o=i.width/i.height,[l,u,c]=[o>1,o<1,o===1],d=t instanceof Array?t[0]:u?t:t*o,p=t instanceof Array?t[1]:l?t:t/o;n.height=p,n.width=d,a.drawImage(i,0,0,d,p),s(n.toDataURL())},{once:!0}),e instanceof File){const n=new FileReader;n.addEventListener("load",()=>i.src=n.result),n.readAsDataURL(e)}else i.src=e})}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}decoding(e){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}isMap(e){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",e))}loading(e){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",e))}referrerPolicy(e){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",e))}sizes(e){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcset(e){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",e))}useMap(e){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class ie extends f{constructor(e){super("canvas",e)}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",e)})}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",e)})}captureStream(e){return this.dom.captureStream(e)}getContext(e,t){return this.dom.getContext(e)}toBlob(e,t,s){return this.dom.toBlob(e,t,s),this}toDataURL(e,t){return this.dom.toDataURL(e,t)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class re extends f{constructor(e){super("dialog",e)}open(e){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",e))}returnValue(e){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",e))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}class Ct extends f{constructor(e){super("select")}add(e){return this.insert(e),this}item(e){return $(this.dom.item(e))}namedItem(e){return $(this.dom.namedItem(e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(e=>$(e))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(e=>$(e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}x.mixin(Ct,P.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","validationMessage","validity","willValidate"));class Dt extends f{constructor(e){super("option",e)}defaultSelected(e){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",e))}selected(e){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",e))}text(e){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}x.mixin(Dt,P.create("form","disabled","label"));class Rt extends f{constructor(e){super("optgroup",e)}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}}x.mixin(Rt,P.create("disabled","label"));class Nt extends f{constructor(e){super("textarea",e)}cols(e){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",e))}wrap(e){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}x.mixin(Nt,P.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","minLength","maxLength","validationMessage","validity","willValidate"));var rt;class Ht extends f{constructor(t){super("async",t);tt(this,rt,!1)}await(t){return t instanceof Function?t(this).then(s=>this._loaded(s)):t.then(s=>this._loaded(s)),this}_loaded(t){if(et(this,rt,!0),typeof t=="string")this.replace(new X(t));else if(t instanceof I){const s=new X(t.toString());t.use(s,"content"),this.replace(s)}else t==null?this.replace(new X(String(t))):this.replace(t);this.dom.dispatchEvent(new Event("load"))}get loaded(){return k(this,rt)}}rt=new WeakMap;const ne=Object.freeze(Object.defineProperty({__proto__:null,$Async:Ht},Symbol.toStringTag,{value:"Module"}));class oe extends K{constructor(e,t){super(e,t)}autoplay(e){return $.fluent(this,arguments,()=>this.dom.autoplay,()=>$.set(this.dom,"autoplay",e))}get buffered(){return this.dom.buffered}controls(e){return $.fluent(this,arguments,()=>this.dom.controls,()=>$.set(this.dom,"controls",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}get currentSrc(){return this.dom.currentSrc}currentTime(e){return $.fluent(this,arguments,()=>this.dom.currentTime,()=>$.set(this.dom,"currentTime",e))}defaultMuted(e){return $.fluent(this,arguments,()=>this.dom.defaultMuted,()=>$.set(this.dom,"defaultMuted",e))}defaultPlaybackRate(e){return $.fluent(this,arguments,()=>this.dom.defaultPlaybackRate,()=>$.set(this.dom,"defaultPlaybackRate",e))}disableRemotePlayback(e){return $.fluent(this,arguments,()=>this.dom.disableRemotePlayback,()=>$.set(this.dom,"disableRemotePlayback",e))}get duration(){return this.dom.duration}get ended(){return this.dom.ended}get error(){return this.dom.error}loop(e){return $.fluent(this,arguments,()=>this.dom.loop,()=>$.set(this.dom,"loop",e))}mediaKeys(e){return $.fluent(this,arguments,()=>this.dom.mediaKeys,()=>$.set(this.dom,"setMediaKeys",[e]))}muted(e){return $.fluent(this,arguments,()=>this.dom.muted,()=>$.set(this.dom,"muted",e))}get networkState(){return this.dom.networkState}get paused(){return this.dom.paused}playbackRate(e){return $.fluent(this,arguments,()=>this.dom.playbackRate,()=>$.set(this.dom,"playbackRate",e))}get played(){return this.dom.played}preload(e){return $.fluent(this,arguments,()=>this.dom.preload,()=>$.set(this.dom,"preload",e))}preservesPitch(e){return $.fluent(this,arguments,()=>this.dom.preservesPitch,()=>$.set(this.dom,"preservesPitch",e))}get readyState(){return this.dom.readyState}get remote(){return this.dom.remote}get seekable(){return this.dom.seekable}get seeking(){return this.dom.seeking}sinkId(e){return $.fluent(this,arguments,()=>this.dom.sinkId,()=>$.set(this.dom,"setSinkId",[e]))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcObject(e){return $.fluent(this,arguments,()=>this.dom.srcObject,()=>$.set(this.dom,"srcObject",e))}get textTracks(){return this.dom.textTracks}volume(e){return $.fluent(this,arguments,()=>this.dom.volume,()=>$.set(this.dom,"volume",e))}addTextTrack(e,t,s){return this.dom.addTextTrack(e,t,s)}canPlayType(e){return this.dom.canPlayType(e)}fastSeek(e){return this.dom.fastSeek(e),this}load(){return this.dom.load(),this}pause(){return this.dom.pause(),this}async play(){return await this.dom.play(),this}get isPlaying(){return this.currentTime()>0&&!this.paused&&!this.ended&&this.readyState>2}}class ae extends oe{constructor(e){super("video",e)}disablePictureInPicture(e){return $.fluent(this,arguments,()=>this.dom.disablePictureInPicture,()=>$.set(this.dom,"disablePictureInPicture",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}playsInline(e){return $.fluent(this,arguments,()=>this.dom.playsInline,()=>$.set(this.dom,"playsInline",e))}poster(e){return $.fluent(this,arguments,()=>this.dom.poster,()=>$.set(this.dom,"poster",e))}get videoHeight(){return this.dom.videoHeight}get videoWidth(){return this.dom.videoWidth}cancelVideoFrameCallback(e){return this.dom.cancelVideoFrameCallback(e),this}getVideoPlaybackQuality(){return this.dom.getVideoPlaybackQuality()}requestPictureInPicture(){return this.dom.requestPictureInPicture()}requestVideoFrameCallback(e){return this.dom.requestVideoFrameCallback(e)}}const ut=class ut extends Mt{constructor(){super(...arguments);h(this,"dom",window)}};h(ut,"$",new ut);let ft=ut;class he{constructor(e){h(this,"keyMap",new Map);h(this,"conditional");e.on("keydown",t=>{var s;this.conditional&&!this.conditional(t)||(s=this.keyMap.get(t.key))==null||s.keydown.forEach(i=>i(t))}),e.on("keyup",t=>{var s;this.conditional&&!this.conditional(t)||(s=this.keyMap.get(t.key))==null||s.keyup.forEach(i=>i(t))}),e.on("keypress",t=>{var s;this.conditional&&!this.conditional(t)||(s=this.keyMap.get(t.key))==null||s.keypress.forEach(i=>i(t))})}if(e){return this.conditional=e,this}assigns(e,t,s){e=x.orArrayResolve(e),t=x.orArrayResolve(t);for(const i of e){const n=this.keyMap.get(i)??{keydown:new Set,keypress:new Set,keyup:new Set};for(const a of t)n[a].add(s);this.keyMap.set(i,n)}return this}unassign(e,t,s){e=x.orArrayResolve(e),t=t?x.orArrayResolve(t):["keydown","keypress","keyup"];for(const i of e){const n=this.keyMap.get(i)??{keydown:new Set,keypress:new Set,keyup:new Set};for(const a of t)s?n[a].delete(s):n[a].clear();this.keyMap.set(i,n)}return this}keydown(e,t){return this.assigns(e,"keydown",t),this}keyup(e,t){return this.assigns(e,"keyup",t),this}keypress(e,t){return this.assigns(e,"keypress",t),this}}function w(r){if(typeof r>"u"||r===null||r instanceof J)return r;if(typeof r=="string"){if(r.startsWith("::"))return Array.from(document.querySelectorAll(r.replace(/^::/,""))).map(e=>w(e));if(r.startsWith(":"))return w(document.querySelector(r.replace(/^:/,"")));if(r in w.TagNameElementMap){const e=w.TagNameElementMap[r];return e===K?new K(r):e===f?new f(r):new e}else return new f(r)}if(r instanceof Node)return r.$?r.$:x.from(r);if(r instanceof Window)return ft.$;throw`$: NOT SUPPORT TARGET ELEMENT TYPE ('${r}')`}(r=>{r.anchorHandler=null,r.TagNameElementMap={html:f,head:f,document:it,body:f,a:Lt,p:f,pre:f,code:f,blockquote:f,strong:f,h1:f,h2:f,h3:f,h4:f,h5:f,h6:f,div:f,ol:f,ul:f,dl:f,li:f,input:M,label:At,button:wt,form:Pt,img:se,dialog:re,canvas:ie,select:Ct,option:Dt,optgroup:Rt,textarea:Nt,video:ae,async:Ht};function e(m,y,T,S){return y.length?(S(),m):T()}r.fluent=e;function t(m,y,T,S){if(T!==void 0){if(T instanceof I){T.use(m,y),m[y]instanceof Function?m[y](...T.value):m[y]=T.value,S&&S(T);return}m[y]instanceof Function?m[y](...T):m[y]=T}}r.set=t;function s(m,y){return new I(m,y)}r.state=s;async function i(m,y){return new Promise(T=>{const S=new FileReader;S.onload=A=>{const N=r("img");if(N.once("load",nt=>{const G=r("canvas"),L=G.getContext("2d"),W=N.height()/N.width(),[Y,Z]=[W>1?y/W:y,W>1?y:y*W];G.height(Z).width(Y),L==null||L.drawImage(N.dom,0,0,Y,Z),T(G.toDataURL(m.type))}),!A.target)throw"$.resize(): e.target is null";N.src(A.target.result)},S.readAsDataURL(m)})}r.resize=i;function n(m){const y=new DOMParser().parseFromString(m,"text/html").body;return Array.from(y.children).map(T=>r(T))}r.html=n;function a(m,y){return Object.assign(r.TagNameElementMap,{[m]:y}),r.TagNameElementMap}r.registerTagName=a;function o(m){return m instanceof Array?m:[m]}r.orArrayResolve=o;function l(m,y){return x.mixin(m,y)}r.mixin=l;function u(m=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*m}r.rem=u;function c(m){return m()}r.call=c;function d(){return new R}r.events=d;function p(m){return new ue(m)}r.pointers=p;function b(m){return new he(m)}r.keys=b;function _(){return new le}r.focus=_})(w||(w={}));globalThis.$=w;class le extends R{constructor(){super();h(this,"layerMap",new Map);h(this,"currentLayer");h(this,"historyList",[])}layer(t){const s=this.layerMap.get(t)??new ce(t).on("blur",i=>this.fire("blur",i)).on("focus",i=>this.fire("focus",i));return this.layerMap.set(s.id,s),s}next(){return this.select(0)}prev(){return this.select(1)}up(){return this.select(2)}down(){return this.select(3)}right(){return this.select(4)}left(){return this.select(5)}blur(){var t;return(t=this.currentLayer)==null||t.blur(),this}select(t){var a;if(this.currentLayer=this.currentLayer??[...this.layerMap.values()].at(0),!this.currentLayer)return this;const s=this.currentLayer.currentFocus,i=this.currentLayer.elementSet.array;if(!s){const o=this.currentLayer.beforeBlur??i.at(0);return o?(this.currentLayer.focus(o),this):this}const n=i.indexOf(s);switch(t){case 0:case 1:{let o=t===0?n+1:n-1;(o===i.length&&this.currentLayer.loop()||o===-1&&!this.currentLayer.loop())&&(o=0);const l=i.at(o);if(!l)break;this.currentLayer.focus(l);break}case 3:case 5:case 4:case 2:{const o=s.coordinate();if(!o)break;const l=$.call(()=>{switch(t){case 2:return{y:o.y,x:o.x/2};case 3:return{y:o.y+o.height,x:o.x/2};case 5:return{y:o.y/2,x:o.x};case 4:return{y:o.y/2,x:o.x+o.width}}}),c=(a=i.map(d=>{if(d===s)return;const p=d.coordinate();if(!p)return;const b=$.call(()=>{switch(t){case 2:return{y:p.y+p.height,x:p.x/2};case 3:return{y:p.y,x:p.x/2};case 5:return{y:p.y/2,x:p.x+p.width};case 4:return{y:p.y/2,x:p.x}}});return{$ele:d,elePosition:p,distance:Math.sqrt((b.x-l.x)**2+(b.y-l.y)**2)}}).detype(void 0).filter(({elePosition:d})=>{switch(t){case 2:if(d.y+d.height>=o.y)return!1;break;case 3:if(d.y<=o.y+o.height)return!1;break;case 5:if(d.x+d.width>=o.x)return!1;break;case 4:if(d.x<=o.x+o.width)return!1;break}return!0}).sort((d,p)=>d.distance-p.distance).at(0))==null?void 0:a.$ele;if(!c)break;this.currentLayer.focus(c)}}return this}}class ce extends R{constructor(t){super();h(this,"id");h(this,"elementSet",new Set);h(this,"entrySet",new Set);h(this,"beforeBlur");h(this,"currentFocus");h(this,"focusHandler",(t,s)=>this.focus(s,!0));h(this,"blurHandler",(t,s)=>this.blur(s));h(this,"__$property__",{loop:!0,scrollThreshold:0});this.id=t,this.add=this.add.bind(this),this.entry=this.entry.bind(this)}add(t){return $.orArrayResolve(t).forEach(s=>{this.elementSet.has(s)||(this.elementSet.add(s),s.tabIndex(0).on("focus",this.focusHandler))}),this}remove(t){return this.elementSet.delete(t),t.off("focus",this.focusHandler),this}entry(t){return $.orArrayResolve(t).forEach(this.entrySet.add.bind(this.entrySet)),this}focus(t,s=!1){if(!t)return this;t.hide(!1);const{scrollTop:i,scrollLeft:n}=document.documentElement,a=$.call(()=>{const u=t.domRect();return{left:u.left+n,top:u.top+i,right:u.right+n,bottom:u.bottom+i,height:u.height,width:u.width}}),{scrollThreshold:o}=this.__$property__,l=this.currentFocus;return this.blur(),this.currentFocus=t,(i>a.top-o||i>a.bottom+o)&&document.documentElement.scrollTo({left:a.left-o,top:a.top-o}),(i+innerHeightthis.__$property__.loop,()=>$.set(this.__$property__,"loop",t))}scrollThreshold(t){return $.fluent(this,arguments,()=>this.__$property__.scrollThreshold,()=>$.set(this.__$property__,"scrollThreshold",t))}}class ue extends R{constructor(t){super();h(this,"$node");h(this,"map",new Map);this.$node=t,this.$node.on("pointerdown",s=>this.down(s)),this.$node.on("pointerup",s=>this.up(s)),this.$node.on("pointermove",s=>this.move(s)),this.$node.on("pointercancel",s=>this.cancel(s))}down(t){const s=new de(this,this.toData(t),$(t.target));this.map.set(s.id,s),this.fire("down",s,t)}up(t){const s=this.map.get(t.pointerId);s&&(this.map.delete(t.pointerId),this.fire("up",s,t))}move(t){const s=this.map.get(t.pointerId);s&&(this.map.set(s.id,s),s.update(this.toData(t)),this.fire("move",s,t))}cancel(t){const s=this.map.get(t.pointerId);s&&(s.update(this.toData(t)),this.map.delete(s.id),this.fire("cancel",s,t))}toData(t){return{id:t.pointerId,type:t.pointerType,width:t.width,height:t.height,x:t.x,y:t.y,movement_x:t.movementX,movement_y:t.movementY}}}class de{constructor(e,t,s){h(this,"initial_x");h(this,"initial_y");h(this,"$target");h(this,"manager");Object.assign(this,t),this.manager=e,this.$target=s,this.initial_x=t.x,this.initial_y=t.y}get move_x(){return this.x-this.initial_x}get move_y(){return this.y-this.initial_y}update(e){return Object.assign(this,e),this}delete(){return this.manager.map.delete(this.id),this}}Array.prototype.detype=function(...r){return this.filter(e=>{if(r.length)for(const t of r)return typeof e!=typeof t;else return e!==void 0})};Object.defineProperties(Set.prototype,{array:{get:function(){return Array.from(this)}}});Set.prototype.sort=function(r){return this.array.sort(r)};class Ft extends f{constructor(t){super("layout",t);h(this,"_property",{ROW_MAX_HEIGHT:200,GAP:0,IS_RENDERING:!1,RENDER_REQUEST:!1,COLUNM:1,TYPE:"justified",ROOT:null,ITEM_PROPERTIES:new Map});this.css({display:"block",position:"relative"}),new ResizeObserver(s=>{this.inDOM()&&(this.render(),this.dom.dispatchEvent(new Event("resize")))}).observe(this.dom),document.addEventListener("scroll",s=>{s.target===this.root().dom&&this.scrollCompute()},{passive:!0}),new IntersectionObserver(s=>{this.inDOM()&&this.render()}).observe(this.dom)}type(t){return $.fluent(this,arguments,()=>this._property.TYPE,()=>$.set(this._property,"TYPE",t))}maxHeight(t){return $.fluent(this,arguments,()=>this._property.ROW_MAX_HEIGHT,()=>$.set(this._property,"ROW_MAX_HEIGHT",t))}column(t){return $.fluent(this,arguments,()=>this._property.COLUNM,()=>$.set(this._property,"COLUNM",t))}gap(t){return $.fluent(this,arguments,()=>this._property.GAP,()=>$.set(this._property,"GAP",t))}root(t){return $.fluent(this,arguments,()=>this._property.ROOT??$(document),()=>$.set(this._property,"ROOT",t))}get COL_WIDTH(){return(this.offsetWidth-this._property.GAP*(this._property.COLUNM-1))/this._property.COLUNM}justifiedCompute(){const t=[],s=this.offsetWidth;for(const i of this.children.array){const n=$(i);if(!(n instanceof V))continue;const a=n.attribute("layout-item-ratio"),o=a?parseFloat(a):n.dom.offsetWidth/n.dom.offsetHeight,l={$node:n,ratio:o};let u=t.at(-1);(!u||u.heightc+=b.ratio);const d=c+o,p=(s-this._property.GAP*u.items.length)/d;u.items.push(l),u.ratio=d,u.height=p}return t}waterfallCompute(){const t=[],s=this.COL_WIDTH,i=()=>{if(t.lengthn.height-a.height)[0]};for(const n of this.children.array){const a=$(n);if(!(a instanceof V))continue;const o=a.attribute("layout-item-ratio"),l=o?parseFloat(o):a.dom.offsetWidth/a.dom.offsetHeight,u={$node:a,ratio:l},c=i();let d=0;c.items.forEach(_=>d+=_.ratio);const p=s/(c.height+s/l),b=s/p;c.items.push(u),c.ratio=p,c.height=b}return t}render(){if(!this.inDOM())return this;if(this.events.fire("beforeRender"),this._property.ITEM_PROPERTIES.clear(),this._property.TYPE==="justified"){const t=this.justifiedCompute();let s=0;for(const i of t){let n=0;i.height>this._property.ROW_MAX_HEIGHT&&(i.height=this._property.ROW_MAX_HEIGHT);for(const a of i.items){const o=a.ratio*i.height;a.$node.css({position:"absolute",height:`${i.height}px`,width:`${o}px`,top:`${s}px`,left:`${n}px`}),a.$node.attribute("layout-item-ratio",a.ratio),this._property.ITEM_PROPERTIES.set(a.$node,{height:i.height,width:o,top:s,left:n,ratio:a.ratio,$node:a.$node}),a.$node.coordinate({x:n,y:s,height:i.height,width:o}),n+=i.height*a.ratio+this._property.GAP}s+=i.height+this._property.GAP}this.css({height:`${s}px`})}else if(this._property.TYPE="waterfall"){const t=this.waterfallCompute(),s=this.COL_WIDTH;let i=0;for(const n of t){let a=0;for(const o of n.items){const l=s/o.ratio;o.$node.css({position:"absolute",height:`${l}px`,width:`${s}px`,top:`${a}px`,left:`${i}px`}),o.$node.attribute("layout-item-ratio",o.ratio),this._property.ITEM_PROPERTIES.set(o.$node,{height:l,width:s,top:a,left:i,ratio:o.ratio,$node:o.$node}),o.$node.coordinate({x:i,y:a,height:l,width:s}),a+=l+this._property.GAP}i+=s+this._property.GAP}if(t.length){const n=t.sort((a,o)=>o.height-a.height)[0];this.css({height:`${n.height+n.items.length*this._property.GAP}px`})}else this.css({height:""})}return this.scrollCompute(),this.events.fire("afterRender"),this}scrollCompute(){if(this.inDOM()===!1)return;const t=document.documentElement.scrollTop-this.dom.offsetTop;this._property.ITEM_PROPERTIES.forEach((s,i)=>{const n=s.top,a=s.top+s.height;i.attribute("focus")===""||document.activeElement===i.dom||(a>t&&n{this.contentId=t,this.events.fire("rendered",{$view:this,previousContent:i,nextContent:s})},o=()=>{this.events.fire("afterSwitch",{$view:this,previousId:t})};return this.events.fire("beforeSwitch",{$view:this,preventDefault:()=>n=!0,targetId:t,previousContent:i,nextContent:s,switched:o,rendered:a}),n||(this.content(s),a(),o()),this}get currentContent(){if(this.contentId)return this.viewCache.get(this.contentId)}}$.registerTagName("view",Vt);var j;const v=class v extends Vt{constructor(t){super({tagname:"router",...t});tt(this,j,"");h(this,"routes",new Map);v.routers.add(this)}base(t){return $.fluent(this,arguments,()=>k(this,j),()=>{et(this,j,t??k(this,j))})}map(t){t=$.orArrayResolve(t);for(const s of t)s instanceof Array?this.map(s):this.routes.set(s.path(),s);return this.resolve(),this}resolve(){return new Promise(t=>{if(!location.pathname.startsWith(k(this,j)))return t(2);const s=location.pathname.replace(k(this,j),"/").replace("//","/"),i=s.split("/").map(_=>`/${_}`),n=location.search,a=new Map(n.replace("?","").split("&").map(_=>_.split("="))),l=(()=>{const _=[];for(const[m,y]of this.routes){const T=$.orArrayResolve(m);for(const S of T){let A=0,N={},nt={};const G=S.split("/").map(L=>`/${L}`);if(!(i.length{const Tt=a.get(Z);Tt!==void 0&&A++,Object.assign(nt,{[Z]:Tt})}),W.startsWith("/:")){A++,Object.assign(N,{[W.replace("/:","")]:i[L].replace("/","")});continue}else if(S.startsWith("#")&&S===location.hash){A++;continue}else if(W===i[L]){A++;continue}else break}_.push({deep:A,$route:y,params:N,query:nt,routePath:S,pathId:Object.keys(nt).length!==0?s+n:Object.keys(N).length!==0?s:T[0]})}}}return _.sort((m,y)=>y.deep-m.deep).at(0)})();if(!l)return t(1);const{$route:u,params:c,pathId:d,query:p}=l;if(d===this.contentId)return t(0);this.events.once("rendered",({nextContent:_,previousContent:m})=>{m==null||m.events.fire("afterShift",{$route:m}),_.events.fire("rendered",{$route:_}),t(0)});const b=this.viewCache.get(d)??u.build({params:c,query:p});this.viewCache.has(d)||this.setView(d,b),this.events.once("beforeSwitch",()=>{var _;b.events.fire("beforeShift",{$route:b}),(_=this.currentContent)==null||_.events.fire("beforeShift",{$route:this.currentContent})}),this.events.once("afterSwitch",()=>b.events.fire("afterShift",{$route:b})),this.switchView(d)})}static init(){if(!history.state||!("index"in history.state)){const t={index:v.index};history.replaceState(t,"")}else v.index=history.state.index;return v.navigationDirection=0,v.resolve(),window.addEventListener("popstate",()=>v.popstate()),window.addEventListener("scroll",()=>{this.setScrollHistory(this.index,location.href,document.documentElement.scrollTop)},{passive:!0}),history.scrollRestoration="manual",this}static open(t,s){return t===void 0?this:(t=this.urlResolver(t),t.href===this.url.href?this:t.origin!==this.url.origin?(window.open(t,s),this):(v.clearForwardScrollHistory(),v.forwardIndex=0,v.index++,history.pushState(v.historyState,"",t),v.stateChange(0),v.resolve(),this))}static back(){return history.back(),this}static forward(){return this.forwardIndex===0?this:(history.forward(),this)}static replace(t){return t===void 0?this:(t=this.urlResolver(t),history.replaceState(v.historyState,"",t),this.stateChange(2),this.setScrollHistory(this.index,location.href,0),v.resolve(),this)}static urlResolver(t){return t instanceof URL?t:(t.startsWith("/")&&(t=`${location.origin}${t}`),t.startsWith("#")&&(t=`${location.origin}${location.pathname}${t}`),new URL(t))}static popstate(){const t=history.state.index>v.index?0:history.state.indext.resolve())),this.scrollRestoration(),this.setScrollHistory(this.index,location.href,document.documentElement.scrollTop)}static get historyState(){return{index:v.index}}static stateChange(t){const s=this.url,i=new URL(location.href);this.url=i,v.events.fire("stateChange",{beforeURL:s,afterURL:i,direction:t}),v.navigationDirection=t}static setScrollHistory(t,s,i){const n=this.getScrollHistory();if(!n)return sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify({[t]:{url:s,value:i}}));n[t]={url:s,value:i},sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(n))}static getScrollHistory(){const t=sessionStorage.getItem(this.scrollHistoryKey);if(t)return JSON.parse(t)}static clearForwardScrollHistory(){const t=this.getScrollHistory();if(t)for(const s in t)Number(s)>this.index&&delete t[s],sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(t))}static scrollRestoration(){const t=this.getScrollHistory();if(t&&t[this.index])document.documentElement.scrollTop=t[this.index].value??0;else if(location.hash.length){const s=$(document.body).$(`:${location.hash}`);s&&(document.documentElement.scrollTop=s.dom.offsetTop)}else document.documentElement.scrollTop=0}};j=new WeakMap,h(v,"routers",new Set),h(v,"events",new R),h(v,"navigationDirection"),h(v,"index",0),h(v,"forwardIndex",0),h(v,"url",new URL(location.href)),h(v,"scrollHistoryKey","$ROUTER_SCROLL_HISTORY");let O=v;var z=(r=>(r[r.Forward=0]="Forward",r[r.Back=1]="Back",r[r.Replace=2]="Replace",r))(z||{});O.init();var Q,U;const _t=class _t extends f{constructor(t){super("route",t);tt(this,Q,"");tt(this,U);h(this,"rendered",!1)}path(t){return $.fluent(this,arguments,()=>k(this,Q),()=>et(this,Q,t??k(this,Q)))}builder(t){return et(this,U,t),this}render(t){return k(this,U)&&this.content(k(this,U).call(this,{$route:this,params:t.params,query:t.query})),this.rendered=!0,this}build(t){return new _t({dom:this.dom.cloneNode()}).self(s=>{k(this,U)&&s.builder(k(this,U)).render({params:t.params,query:t.query})})}};Q=new WeakMap,U=new WeakMap;let mt=_t;class Wt extends Lt{constructor(e){super(e),Object.assign(this.__$property__,{preventDefault:!1}),this.on("click",t=>{t.preventDefault(),this.__$property__.preventDefault||$.open(this.href(),this.target())})}preventDefault(e){return $.fluent(this,arguments,()=>this.__$property__.preventDefault,()=>$.set(this.__$property__,"preventDefault",e))}}$.registerTagName("router",O);$.registerTagName("route",mt);$.registerTagName("router-a",Wt);Object.assign($,{open(r,e){return O.open(r,e)},replace(r){return O.replace(r)},back(){return O.back()},forward(){return O.forward()}});class fe{constructor(e,t){h(this,"booru");Object.assign(this,t),this.booru=e}static async fetchUserFavorites(e,t,s,i=100,n){return(await e.fetch(`/favorites.json?${s}&${`search[user_id]=${t.id}`}&limit=${i}&page=${n}`)).map(o=>(t.favorites.add(o.post_id),o.post_id))}update(e){return Object.assign(this,e),this}}class pt{constructor(e,t,s=!0){h(this,"name$",$.state("..."));h(this,"post_upload_count$",$.state(0));h(this,"level$",$.state(10));h(this,"level_string$",$.state("..."));h(this,"booru");h(this,"favorites",new Set);this.booru=e,Object.assign(this,t),s&&this.update$()}static async fetch(e,t){var n;let s;if(typeof t=="string"){const a=(await e.fetch(`/users.json?search[name]=${t}`)).at(0);if(!a)throw"User Not Found";return s=a}else s=await e.fetch(`/users/${t}.json`);const i=((n=e.users.get(s.id))==null?void 0:n.update(s))??new this(e,s);return e.users.set(i.id,i),i}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[o,l]of Object.entries(t))if(l instanceof Array)i+=`&search[${o}]=${l}`;else if(l instanceof Object)for(const[u,c]of Object.entries(l))i+=`&search[${o}${u}]=${c}`;else i+=`&search[${o}]=${l}`;return(await e.fetch(`/users.json?limit=${s}${i}`)).map(o=>{const l=new this(e,o);return e.users.set(l.id,l),l})}update(e){return Object.assign(this,e),this.update$(),this}update$(){this.name$.set(this.name),this.post_upload_count$.set(this.post_upload_count),this.level$.set(this.level),this.level_string$.set(this.level_string)}get booruURL(){return`${this.booru.origin}/users/${this.id}`}get url(){return`/users/${this.id}`}}const dt=class dt extends pt{constructor(t,s,i){super(t,i,!1);h(this,"apiKey");h(this,"favorite_count$",$.state(0));h(this,"forum_post_count$",$.state(0));this.apiKey=s,this.update$()}update$(){var t,s;super.update$(),(t=this.forum_post_count$)==null||t.set(this.forum_post_count),(s=this.favorite_count$)==null||s.set(this.favorite_count)}async init(){await this.fetchFavorites()}async fetchFavorites(){const t=Array.from(this.favorites.keys()).at(-1),s=await fe.fetchUserFavorites(this.booru,this,"",1e3,t?`b${t}`:1);return dt.events.fire("favoriteUpdate",this),s.length>=1e3&&this.fetchFavorites(),s}static get storageUserData(){const t=localStorage.getItem("user_data");return t?JSON.parse(t):null}static set storageUserData(t){localStorage.setItem("user_data",JSON.stringify(t))}};h(dt,"events",new R);let H=dt;const D=class D{constructor(e){h(this,"user");h(this,"posts",new Map);h(this,"tags",new Map);h(this,"users",new Map);h(this,"favorites",new Map);Object.assign(this,e),this.origin.endsWith("/")&&(this.origin=this.origin.slice(0,-1)),D.manager.set(this.name,this)}static set(e){this.used=e,this.name$.set(e.name),this.storageAPI=e.name;const t=H.storageUserData;return t&&e.login(t.username,t.apiKey),this.events.fire("set"),this}static get storageAPI(){return localStorage.getItem("booru_api")}static set storageAPI(e){e?localStorage.setItem("booru_api",e):localStorage.removeItem("booru_api")}async fetch(e,t="GET"){const s=this.user?`${e.includes("?")?"&":"?"}login=${this.user.name}&api_key=${this.user.apiKey}`:"",i=await fetch(`${this.origin}${e}${s}`,{method:t}).then(n=>n.json());if(i.success===!1)throw i.message;return i}async login(e,t){const s=await this.fetch(`/profile.json?login=${e}&api_key=${t}`);return this.user=new H(this,t,s),this.user.init(),D.events.fire("login",this.user),this.user}logout(){return this.user=void 0,H.storageUserData=null,D.events.fire("logout"),this}};h(D,"used"),h(D,"events",new R),h(D,"name$",$.state(D.name)),h(D,"manager",new Map);let g=D;class me{constructor(e,t){h(this,"post_count$",$.state(0));h(this,"name$",$.state(""));h(this,"booru");this.booru=e,Object.assign(this,t),this.$update()}static async fetch(e,t){var n;const s=await e.fetch(`/tags/${t}.json`),i=((n=e.tags.get(s.id))==null?void 0:n.update(s))??new this(e,s);return e.tags.set(i.id,i),i}static async fetchMultiple(e,t,s=1e3){let i="";if(t)for(const[o,l]of Object.entries(t))if(l instanceof Array)i+=`&search[${o}]=${l}`;else if(l instanceof Object)for(const[u,c]of Object.entries(l))i+=`&search[${o}${u}]=${c}`;else i+=`&search[${o}]=${l}`;return(await e.fetch(`/tags.json?limit=${s}${i}`)).map(o=>{var u;const l=((u=e.tags.get(o.id))==null?void 0:u.update(o))??new this(e,o);return e.tags.set(l.id,l),l})}update(e){return Object.assign(this,e),this.$update(),this}$update(){this.post_count$.set(this.post_count),this.name$.set(this.name)}}var B=(r=>(r[r.General=0]="General",r[r.Artist=1]="Artist",r[r.Copyright=3]="Copyright",r[r.Character=4]="Character",r[r.Meta=5]="Meta",r))(B||{});const bt=1e3,ht=bt*60,lt=ht*60,ct=lt*24,pe=ct*7,ot=new Intl.RelativeTimeFormat("en",{style:"long"});function gt(r){r=Math.floor(r);const e=r/bt,t=r/ht,s=r/lt,i=r/ct,n=r%1e3,a=Math.floor(r%6e4/1e3),o=Math.floor(r%36e5/6e4),l=Math.floor(r%(36e5*24)/36e5),u=a.toString().padStart(2,"0"),c=o.toString().padStart(2,"0"),d=l.toString().padStart(2,"0");return{seconds:e,minutes:t,hours:s,days:i,mil:n,s:a,min:o,h:l,ss:u,mm:c,hh:d}}function ge(r,e=Date.now()){const t=r-e,s=Math.abs(t);if(sthis.update$()),this}static async fetchMultiple(t,s,i=20,n){let a="";if(s){if(typeof s=="string")a=s;else for(const[c,d]of Object.entries(s))if(d!==void 0){if(c==="tags"){a+=`${d}`;continue}a.at(-1)!=="="&&(a+=" "),a+=`${c}:${d}`}}const o=await t.fetch(`/posts.json?limit=${i}&tags=${a}${n?`&page=${n}`:""}&_method=get`);if(!(o instanceof Array))return[];const l=o.map(c=>{var p;const d=((p=t.posts.get(c.id))==null?void 0:p.update(c))??new this(t,c.id,c);return t.posts.set(d.id,d),d});if(!l.length)return l;const u=[...new Set(o.map(c=>[c.approver_id,c.uploader_id].detype(null)).flat())];return pt.fetchMultiple(t,{id:u}).then(()=>l.forEach(c=>c.update$())),l}update$(){var t,s,i,n;this.uploader$.set(((t=this.uploader)==null?void 0:t.name$)??((s=this.uploader_id)==null?void 0:s.toString())),this.approver$.set(((i=this.approver)==null?void 0:i.name$)??((n=this.approver_id)==null?void 0:n.toString())??"None"),this.created_date$.set(ge(+new Date(this.created_at))),this.favcount$.set(this.fav_count),this.score$.set(this.score),this.file_size$.set($e(this.file_size)),this.file_ext$.set(this.file_ext),this.file_url$.set(this.file_url),this.source$.set(this.source),this.dimension$.set(`${this.image_width}x${this.image_height}`),this.booruUrl$.set(`${this.booruUrl}`),this.isUgoria&&this.webm_url$.set(this.large_file_url),this.createdDate=new Date(this.created_at),this.fire("update")}update(t){return Object.assign(this,t),this.update$(),this}async fetchTags(){return await this.ready,await me.fetchMultiple(this.booru,{name:{_space:this.tag_string}})}async createFavorite(){if(!this.booru.user)return;const t=await this.booru.fetch(`/favorites.json?post_id=${this.id}`,"POST");return this.update(t),this.booru.user.favorites.add(t.id),H.events.fire("favoriteUpdate",this.booru.user),t.id}async deleteFavorite(){!this.booru.user||await fetch(`/api/favorites/${this.id}?login=${this.booru.user.name}&api_key=${this.booru.user.apiKey}&origin=${this.booru.origin}`,{method:"DELETE"}).then(s=>s.json())===!1||(this.fav_count--,this.favcount$.set(this.fav_count),this.booru.user.favorites.delete(this.id),H.events.fire("favoriteUpdate",this.booru.user))}get pathname(){return`/posts/${this.id}`}get uploader(){return this.booru.users.get(this.uploader_id)}get approver(){return this.approver_id?this.booru.users.get(this.approver_id):null}get isVideo(){return this.file_ext==="mp4"||this.file_ext==="webm"||this.file_ext==="zip"}get isGif(){return this.file_ext==="gif"}get isUgoria(){return this.file_ext==="zip"}get hasSound(){return this.tag_string_meta.includes("sound")}get tags(){const t=this.tag_string.split(" ");return[...this.booru.tags.values()].filter(s=>t.includes(s.name))}get previewURL(){var t,s,i;return((i=(s=(t=this.media_asset)==null?void 0:t.variants)==null?void 0:s.find(n=>n.file_ext==="webp"))==null?void 0:i.url)??this.large_file_url}get booruUrl(){return`${this.booru.origin}/posts/${this.id}`}get url(){return`https://danbooru.defaultkavy.com/posts/${this.id}`}get isFileSource(){return this.source.startsWith("file://")}get isLargeFile(){return this.file_size>5e6}}class jt{constructor(e){Object.assign(this,e)}static async fetch(e,t){const s=await e.fetch(`/artist_commentaries/${t}.json`);return new this(s)}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[o,l]of Object.entries(t))if(l instanceof Array)i+=`&search[${o}]=${l}`;else if(l instanceof Object)for(const[u,c]of Object.entries(l))i+=`&search[${o}${u}]=${c}`;else i+=`&search[${o}]=${l}`;return(await e.fetch(`/artist_commentaries.json?limit=${s}${i}`)).map(o=>{const l=new this(o);return this.manager.set(l.id,l),l})}}h(jt,"manager",new Map);class ye extends f{constructor(t,s,i){super("video-controller");h(this,"$video");h(this,"$viewer");h(this,"duration$",$.state("00:00"));h(this,"post");this.$video=t,this.$viewer=s,this.post=i,this.build()}build(){const t=$.events();this.$video.on("timeupdate",()=>this.durationUpdate()),this.content([$("div").class("video-details").content([$("div").class("left").content([$("ion-icon").class("play").title("Play").name("play").self(s=>{this.$video.on("play",()=>s.name("pause")).on("pause",()=>s.name("play")),s.on("click",()=>this.$video.isPlaying?this.$video.pause():this.$video.play())}),$("div").class("duration").content([$("span").class("current-time").content(this.duration$),$("span").content("/"),$("span").class("total-time").content("00:00").self(s=>{this.$video.on("loadeddata",()=>{const i=gt(this.$video.duration*1e3);s.content(Number(i.hh)>0?`${i.hh}:${i.mm}:${i.ss}`:`${i.mm}:${i.ss}`)})})])]),$("div").class("right").content([$("ion-icon").class("volume").title("Volume").name("volume-high").disable(!this.post.hasSound).self(s=>{const i=()=>{this.$video.muted()?s.name("volume-mute"):s.name("volume-high")};s.on("click",()=>{this.$video.muted(!this.$video.muted()),i()})}),$("ion-icon").class("full-screen").title("Full-Screen").name("scan").self(s=>{s.on("click",()=>{document.fullscreenElement?document.exitFullscreen():this.$viewer.dom.requestFullscreen()})})])]),$("div").class("progressbar-container").content([$("div").class("progressbar").content([$("div").class("progress").self(s=>{this.$video.on("timeupdate",i=>{s.css({width:`${this.$video.currentTime()/this.$video.duration*100}%`})}),t.on("progressChange",i=>{s.css({width:`${i*100}%`})})})])]).self(s=>{const i=$.pointers($(document.body));let n=!1;i.on("down",(a,o)=>{if(!s.contains(a.$target))return a.delete();o.preventDefault(),this.$video.isPlaying&&(n=!0,this.$video.pause());const l=(a.x-s.domRect().x)/s.offsetWidth;this.$video.currentTime(l*this.$video.duration)}),i.on("move",(a,o)=>{o.preventDefault();const l=(a.x-s.domRect().x)/s.offsetWidth;this.$video.currentTime(l*this.$video.duration),t.fire("progressChange",l)}),i.on("up",(a,o)=>{n&&this.$video.play(),n=!1})})])}durationUpdate(){const t=gt(this.$video.currentTime()*1e3);this.duration$.set(Number(t.hh)>0?`${t.hh}:${t.mm}:${t.ss}`:`${t.mm}:${t.ss}`)}}class Ut extends f{constructor(t){super("detail-panel");h(this,"post",null);h(this,"options");this.options={preview:(t==null?void 0:t.preview)??!1,tagsType:(t==null?void 0:t.tagsType)??"detail"},this.build()}build(){this.post?this.content([this.options.preview?$("div").class("preview").content([$("img").src(this.post.previewURL)]):null,$("div").class("detail").content([$("section").class("post-info").content([new E("id").name("Post").content(`#${this.post.id}`),new E("uploader").name("Uploader").content(this.post.uploader$),new E("approver").name("Approver").content(this.post.approver$),new E("date").name("Date").content(this.post.created_date$),new E("size").name("Size").content([this.post.file_size$,this.post.dimension$]),new E("file-type").name("File Type").content(this.post.file_ext$),$("div").class("inline").content([new E("favorites").name("Favorites").content(this.post.favcount$),new E("score").name("Score").content(this.post.score$)]),new E("file-url").name("File").content([$("a").href(this.post.file_url$).content(this.post.file_url$.convert(t=>t.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(t,s)=>this.copyButtonHandler(s,this.post.file_url))]),new E("source-url").name("Source").content([$("a").href(this.post.source$).content(this.post.source$.convert(t=>t.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(t,s)=>this.copyButtonHandler(s,this.post.source))]),new E("booru-url").name(g.name$).content([$("a").href(this.post.booruUrl$).content(this.post.booruUrl$.convert(t=>t.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(t,s)=>this.copyButtonHandler(s,this.post.booruUrl))]),new E("webm-url").name("Webm").hide(!0).self(async t=>{await this.post.ready,this.post.isUgoria&&t.content($("a").href(this.post.webm_url$).content(this.post.webm_url$.convert(s=>s.replace("https://",""))).target("_blank")).hide(!1)})]),$("div").class("post-tags").content(async t=>{if(this.options.tagsType==="detail"){let s=function(c,d){return d.length?[$("h3").content(c),$("section").content([d.map(p=>$("div").class("tag").content([$("a").class("tag-name").content(p.name).href(`/posts?tags=${p.name}`),$("span").class("tag-post-count").content(p.post_count$.convert(st))]))])]:null};const i=await this.post.fetchTags(),[n,a,o,l,u]=[i.filter(c=>c.category===B.Artist),i.filter(c=>c.category===B.Character),i.filter(c=>c.category===B.General),i.filter(c=>c.category===B.Meta),i.filter(c=>c.category===B.Copyright)];return[s("Artist",n),s("Character",a),s("Copyright",u),s("Meta",l),s("General",o)]}else{let s=function(i,n){var a;return(a=n.at(0))!=null&&a.length?[$("h3").content(i),$("section").class("tag-name-only").content([n.map(o=>$("a").class("tag").content(o).href(`/posts?tags=${o}`))])]:null};return[s("Artist",this.post.tag_string_artist.split(" ")),s("Character",this.post.tag_string_character.split(" ")),s("Copyright",this.post.tag_string_copyright.split(" ")),s("Meta",this.post.tag_string_meta.split(" ")),s("General",this.post.tag_string_general.split(" "))]}})])]):this.content($("span").class("no-content").content("No Selected"))}update(t){return this.post=t,this.build(),this}copyButtonHandler(t,s){t.name("checkmark"),navigator.clipboard.writeText(s),setTimeout(()=>t.name("clipboard"),3e3)}position(t){let s=0;return addEventListener("scroll",()=>{this.inDOM()&&(s=document.documentElement.scrollTop)},{passive:!0}),t.on("beforeShift",()=>{innerWidth>800&&this.css({position:"absolute",top:`calc(${s}px + var(--nav-height) + var(--padding))`})}).on("afterShift",()=>this.css({position:"",top:""})),this}}class E extends f{constructor(t){super("div");h(this,"$name",$("span").class("property-name"));h(this,"$values",$("div").class("property-values"));this.staticClass("property").attribute("property-id",t),super.content([this.$name,this.$values.hide(!0)])}name(t){return this.$name.content(t),this}content(t){this.$values.hide(!1);const s=$.orArrayResolve(t);return this.$values.content(s.map(i=>$("span").staticClass("property-value").content(i))),this}}const we=$("route").path("/posts/:id").id("post").builder(({$route:r,params:e})=>{if(!Number(e.id))return $("h1").content("404: POST NOT FOUND");const t=q.get(g.used,+e.id),s=$("video"),i=$.events();return $.keys($(window)).if(n=>{if(!($(n.target)instanceof M)&&r.inDOM())return!0}).keydown(["f","F"],n=>{var a;(a=g.used.user)!=null&&a.favorites.has(t.id)?t.deleteFavorite():t.createFavorite()}).keydown(" ",n=>{n.preventDefault(),s.isPlaying?s.pause():s.play()}),[$("div").class("viewer").content(async n=>(i.on("video_play_pause",()=>{s.isPlaying?s.pause():s.play()}),await t.ready,n.on("pointermove",a=>{(a.pointerType==="mouse"||a.pointerType==="pen")&&i.fire("viewerPanel_show")}).on("pointerup",a=>{var o;(o=$(":.viewer-panel .panel"))!=null&&o.contains($(a.target))||(a.pointerType==="touch"&&i.fire("viewerPanel_switch"),a.pointerType==="mouse"&&i.fire("video_play_pause"))}).on("mouseleave",()=>{i.fire("viewerPanel_hide")}),[$("div").class("viewer-panel").hide(!1).content([$("div").class("panel").content([t.isVideo?new ye(s,n,t):null,$("div").class("buttons").content([$("ion-icon").title("Favorite").name("heart-outline").self(a=>{var o;H.events.on("favoriteUpdate",l=>{l.favorites.has(t.id)?a.name("heart"):a.name("heart-outline")}),(o=g.used.user)!=null&&o.favorites.has(t.id)&&a.name("heart"),a.on("click",()=>{var l;(l=g.used.user)!=null&&l.favorites.has(t.id)?t.deleteFavorite():t.createFavorite()})}),$("ion-icon").title("Original Size").name("resize-outline").self(a=>{a.on("click",()=>{i.fire("original_size"),a.disable(!0)}),(!t.isLargeFile||t.isVideo)&&a.disable(!0)})])]),$("div").class("overlay")]).self(a=>{i.on("viewerPanel_hide",()=>a.hide(!0)).on("viewerPanel_show",()=>a.hide(!1)).on("viewerPanel_switch",()=>a.hide(!a.hide()))}),t.isVideo?s.height(t.image_height).width(t.image_width).src(t.file_ext==="zip"?t.large_file_url:t.file_url).controls(!1).autoplay(!0).loop(!0).disablePictureInPicture(!0):$("img").src(t.isLargeFile?t.large_file_url:t.file_url).self(a=>{i.on("original_size",()=>a.src(t.file_url))})])),$("div").class("content").content([$("h3").content("Artist's Commentary"),$("section").class("commentary").content(async n=>{const a=(await jt.fetchMultiple(g.used,{post:{_id:t.id}})).at(0);return[a?[a.original_title?$("h3").content(a.original_title):null,$("pre").content(a.original_description)]:"No commentary"]})]),new Ut().position(r).update(t)]});class $t extends f{constructor(t){super("post-tile");h(this,"post");h(this,"$video");h(this,"$img");h(this,"duration$",$.state(""));this.post=t,this.$video=this.post.isVideo?$("video").width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(!0).loop(!0).muted(!0).hide(!0).on("mousedown",s=>s.preventDefault()):null,this.$img=$("img").draggable(!1).css({opacity:"0"}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading("lazy"),this.attribute("filetype",this.post.file_ext),this.durationUpdate(),this.build()}build(){var t;(t=this.$video)==null||t.on("timeupdate",(s,i)=>{this.durationUpdate()}),this.class("loading").content([this.post.isVideo?$("div").class("video-detail").content([this.post.hasSound?$("ion-icon").name("volume-medium-outline"):null,this.post.isUgoria?$("ion-icon").name("images-outline"):null,$("span").class("duration").content(this.duration$)]):null,this.post.isGif?$("div").class("gif-detail").content([$("span").content("GIF")]):null,$("a").href(this.post.pathname).preventDefault(F).content(()=>[this.$video,this.$img.on("mousedown",s=>s.preventDefault()).once("load",(s,i)=>{i.animate({opacity:[0,1]},{duration:300},()=>i.css({opacity:""})),this.removeClass("loading")})])]),this.on(["focus","mouseenter","touchstart"],()=>{var s,i;(s=this.$video)!=null&&s.isPlaying||(i=this.$video)==null||i.src(this.post.large_file_url).hide(!1).play().catch(n=>{}),this.post.isGif&&this.$img.src(this.post.large_file_url)},{passive:!0}).on(["blur","mouseleave","touchend","touchcancel"],()=>{var s;(s=this.$video)==null||s.pause().currentTime(0).hide(!0),this.post.isGif&&this.$img.src(this.post.previewURL)},{passive:!0}).on("click",()=>{if(F.value){if(innerWidth<=800)return $.open(this.post.pathname);$(document.activeElement)===this?$.open(this.post.pathname):this.focus()}})}durationUpdate(){if(!this.$video)return;const t=gt(this.post.media_asset.duration*1e3-this.$video.currentTime()*1e3);this.duration$.set(Number(t.hh)>0?`${t.hh}:${t.mm}:${t.ss}`:`${t.mm}:${t.ss}`)}}class be extends Ft{constructor(t){super();h(this,"posts",new Set);h(this,"$posts",new Map);h(this,"orderMap",new Map);h(this,"tags");h(this,"finished",!1);h(this,"limit",100);h(this,"$focus",$.focus());this.tags=t==null?void 0:t.tags,this.addStaticClass("post-grid"),this.type("waterfall").gap(10),this.init()}async init(){setInterval(()=>{this.inDOM()&&document.documentElement.scrollTop===0&&this.getPost("newer")},1e4),g.events.on("set",()=>{this.removeAll(),this.finished&&(this.finished=!1,this.events.fire("startLoad"),this.loader())}),this.on("resize",()=>this.resize()),this.on("afterRender",()=>{var t;(t=this.$focus.currentLayer)==null||t.focus(this.$focus.currentLayer.currentFocus)}),this.events.fire("startLoad"),this.loader(),this.$focus.layer(100).loop(!1).scrollThreshold($.rem(2)+60),$.keys($(window)).if(t=>{if(!($(t.target)instanceof M)&&this.inDOM())return!0}).keydown(["w","W"],t=>{t.preventDefault(),this.$focus.up()}).keydown(["s","S"],t=>{t.preventDefault(),this.$focus.down()}).keydown(["d","D"],t=>{t.preventDefault(),this.$focus.right()}).keydown(["a","A"],t=>{t.preventDefault(),this.$focus.left()}).keydown([" ","Enter"],t=>{var i;t.preventDefault();const s=(i=this.$focus.currentLayer)==null?void 0:i.currentFocus;s instanceof $t&&$.open(`/posts/${s.post.id}`)}).keydown(["Escape"],t=>{t.preventDefault(),this.$focus.blur()})}async loader(){if(!this.inDOM())return setTimeout(()=>this.loader(),100);for(;this.inDOM()&&document.documentElement.scrollHeight<=innerHeight*2;)if(!(await this.getPost("older")).length)return;document.documentElement.scrollTop+innerHeight>document.documentElement.scrollHeight-innerHeight*2&&!(await this.getPost("older")).length||setTimeout(()=>this.loader(),100)}resize(){const t=Math.round(this.dom.clientWidth/300);this.column(t>=2?t:2)}addPost(t){t=$.orArrayResolve(t);for(const i of t){if(!i.file_url||this.posts.has(i))continue;const n=new $t(i);this.$posts.set(i,n),this.posts.add(i)}this.$focus.layer(100).removeAll();const s=[...this.orderMap.values()].map(i=>{var n;return(n=this.$posts.get(i))==null?void 0:n.self(this.$focus.layer(100).add)});return this.content(s).render(),this}removeAll(){return this.posts.clear(),this.$posts.clear(),this.orderMap.clear(),this.animate({opacity:[1,0]},{duration:300,easing:"ease"},()=>this.clear().render()),this}async getPost(t){const s=this.tags?decodeURIComponent(this.tags).split("+"):void 0,i=[],n=[];let a=this.limit;if(s)for(const c of s)c.startsWith("ordfav:")||c.startsWith("order:")?n.push(c):c.startsWith("limit:")?a=Number(c.split(":")[1]):i.push(c);if(n.length){if(n.length>1)return this.events.fire("post_error",`Error: These query can't be used together [${n}].`),[];const c=n[0];if(c.startsWith("ordfav:")){const d=c.split(":")[1],p=i.length?`&search[post_tags_match]=${i.toString().replaceAll(",","+")}`:"",b=this.orderKeyList.length?t==="newer"?`&search[id]=>${this.orderKeyList.at(0)}`:`&search[id]=<${this.orderKeyList.at(-1)}`:void 0,_=await g.used.fetch(`/favorites.json?search[user_name]=${d}${b??""}${p}&limit=${a}`),m=await q.fetchMultiple(g.used,{tags:`id:${_.map(T=>T.post_id).toString()}`}),y=new Map;for(const T of _){const S=m.find(A=>A.id===T.post_id);S&&y.set(T.id,S)}return this.orderMap=new Map(t==="newer"?[...y,...this.orderMap]:[...this.orderMap,...y]),this.addPost(m),m}if(c.startsWith("order:")){const d=this.orderKeyList.length?t==="newer"?1:this.orderMap.size/a+1:void 0,p=await q.fetchMultiple(g.used,{tags:this.tags},a,d),b=new Map(p.map(_=>[_.id,_]));return b.forEach((_,m)=>{this.orderMap.has(m)&&b.delete(m)}),this.orderMap=new Map(t==="newer"?[...b,...this.orderMap]:[...this.orderMap,...b]),this.addPost(p),p}}const o=this.orderKeyList.length?t==="newer"?`a${this.orderKeyList.at(0)}`:`b${this.orderKeyList.at(-1)}`:void 0,l=await q.fetchMultiple(g.used,{tags:this.tags},a,o),u=new Map(l.map(c=>[c.id,c]));return this.orderMap=new Map(t==="newer"?[...u,...this.orderMap]:[...this.orderMap,...u]),this.addPost(l),l.length||(this.finished=!0,this.posts.size?this.events.fire("endPost"):this.events.fire("noPost")),l}get orderKeyList(){return[...this.orderMap.keys()]}}class Gt{static async fetch(e,t,s=20){if(!t.length)return this.searchQuery.map(a=>new It(a));const i=await e.fetch(`/autocomplete.json?search[query]=${t}&search[type]=tag_query&version=1&limit=${s}`);return[...t.length?this.searchQuery.filter(a=>a.value.startsWith(t)&&a.value!==t):this.searchQuery,...i].map(a=>new It(a))}}h(Gt,"searchQuery",[{value:"user:",label:"user:"},{value:"approver:",label:"approver:"},{value:"-approver:",label:"-approver:"},{value:"order:",label:"order:"},{value:"ordfav:",label:"ordfav:"},{value:"ordfavgroup:",label:"ordfavgroup:"},{value:"search:",label:"search:"},{value:"favgroup:",label:"favgroup:"},{value:"-favgroup:",label:"-favgroup:"},{value:"favcount:",label:"favcount:"},{value:"id:",label:"id:"},{value:"tagcount:",label:"tagcount:"},{value:"gentags:",label:"gentags:"},{value:"arttags:",label:"arttags:"},{value:"chartags:",label:"chartags:"},{value:"copytags:",label:"copytags:"},{value:"metatags:",label:"metatags:"},{value:"score:",label:"score:"},{value:"upvote:",label:"upvote:"},{value:"downvote:",label:"downvote:"},{value:"disapproved:",label:"disapproved:"},{value:"md5:",label:"md5:"},{value:"width:",label:"width:"},{value:"height:",label:"height:"},{value:"ratio:",label:"ratio:"},{value:"mpixels:",label:"mpixels:"},{value:"filesize:",label:"filesize:"},{value:"duration:",label:"duration:"},{value:"is:",label:"is:"},{value:"has:",label:"has:"},{value:"pool:",label:"pool:"},{value:"-pool:",label:"-pool:"},{value:"ordpool:",label:"ordpool:"},{value:"random:",label:"random:"},{value:"limit:",label:"limit:"},{value:"date:",label:"date:"},{value:"commenter:",label:"commenter:"},{value:"note:",label:"note:"},{value:"noter:",label:"noter:"},{value:"noteupdater:",label:"noteupdater:"},{value:"status:",label:"status:"},{value:"-status:",label:"-status:"},{value:"rating:",label:"rating:"},{value:"-rating:",label:"-rating:"},{value:"source:",label:"source:"},{value:"-source:",label:"-source:"},{value:"pixiv:",label:"pixiv:"},{value:"parent:",label:"parent:"},{value:"child:",label:"child:"},{value:"flagger:",label:"flagger:"},{value:"appealer:",label:"appealer:"},{value:"commentary:",label:"commentary:"},{value:"commentaryupdater:",label:"commentaryupdater:"}].map(e=>({type:"query",...e})));class It{constructor(e){Object.assign(this,e)}isTag(){return this.type==="tag"||this.type==="tag-autocorrect"||this.type==="tag-alias"||this.type==="tag-word"}isTagAutocorrect(){return this.type==="tag-autocorrect"}isTagAntecedent(){return!!this.antecedent}isTagWord(){return this.type==="tag-word"}isUser(){return this.type==="user"}}class _e extends f{constructor(){super("searchbar");h(this,"$tagInput",new Se(this));h(this,"$selectionList",new Te);h(this,"typingTimer",null);h(this,"$filter",$("div").class("filter"));this.build(),window.addEventListener("keyup",t=>{!this.inDOM()&&t.key==="/"&&this.open(),this.inDOM()&&t.key==="Escape"&&this.close()})}build(){this.content([$("div").class("input-container").content([this.$tagInput.on("input",()=>this.inputHandler()).on("keydown",t=>this.keyHandler(t)),$("ion-icon").name("close-circle-outline").title("Clear Input").on("click",()=>this.$tagInput.clearAll())]).on("click",t=>{t.target===this.$tagInput.dom&&this.$tagInput.addTag().input()}),$("div").class("selection-list-container").content([this.$selectionList]),this.$filter.on("click",()=>{location.hash==="#search"&&this.close()})])}open(){return location.hash!=="#search"&&$.open(location.href+"#search"),this}close(){return location.hash==="#search"&&$.back(),this}activate(){return this.hide(!1),this.$filter.animate({opacity:[0,.5]},{duration:300,easing:"ease"}),this.$tagInput.input(),this}inactivate(){return this.animate({opacity:[.5,0]},{duration:300,easing:"ease"},()=>this.hide(!0)),this}keyHandler(t){var n,a;const s=()=>{t.preventDefault(),this.$tagInput.addTag().input()},i=o=>{const l=this.$tagInput.children.indexOf(this.$tagInput.$inputor);if(this.$tagInput.$input.value().at(-1)===":")return this.getSearchSuggestions();const u=this.$tagInput.children.array.at(l+1);this.$tagInput.addTag(o.value()),u?this.$tagInput.editTag(u):this.$tagInput.input()};switch(t.key){case"ArrowUp":{t.preventDefault(),this.$selectionList.focusPrevSelection(),this.$tagInput.value((n=this.$selectionList.focused)==null?void 0:n.value());break}case"ArrowDown":{t.preventDefault(),this.$selectionList.focusNextSelection(),this.$tagInput.value((a=this.$selectionList.focused)==null?void 0:a.value());break}case" ":s();break;case"Enter":{t.preventDefault(),this.$selectionList.focused?i(this.$selectionList.focused):(this.$tagInput.addTag(),this.search());break}case"Tab":{t.preventDefault();const o=this.$tagInput.children.indexOf(this.$tagInput.$inputor);if(t.shiftKey){o-1>=0&&this.$tagInput.editTag(this.$tagInput.children.array.at(o-1));break}if(this.$selectionList.focused)i(this.$selectionList.focused);else{const l=this.$tagInput.children.array.at(o+1);l?this.$tagInput.editTag(l):this.$tagInput.addTag().input()}break}case"Backspace":{const o=this.$tagInput.children.indexOf(this.$tagInput.$inputor);o!==0&&!this.$tagInput.$input.value().length&&(t.preventDefault(),this.$tagInput.editTag(this.$tagInput.children.array.at(o-1)));break}}}inputHandler(){this.typingTimer&&(clearTimeout(this.typingTimer),this.typingTimer=null),this.typingTimer=setTimeout(async()=>{this.typingTimer=null,this.getSearchSuggestions()},200)}async getSearchSuggestions(){const t=this.$tagInput.$input.value(),s=await Gt.fetch(g.used,t,20);this.$selectionList.clearSelections().addSelections(s.map(i=>new xe().value(i.value).content([$("div").class("selection-label").content([i.isTagAntecedent()?$("span").class("tag-antecedent").self(n=>n.dom.innerHTML=i.antecedent.replaceAll(t,`${t}`)):null,$("div").class("label-container").content([i.isTagAntecedent()?$("ion-icon").name("arrow-forward-outline"):null,$("span").class("label").self(n=>n.dom.innerHTML=i.label.replaceAll(t,`${t}`))])]),i.isTag()?$("div").class("tag-detail").content([$("span").class("tag-post-count").content(st(i.post_count)),$("span").class("tag-category").content(B[i.category])]):null,i.isUser()?$("span").class("user-level").content(i.level):null]).on("click",()=>{this.$tagInput.addTag(i.value).input()})))}search(){return $.replace(`/posts?tags=${this.$tagInput.query.replace(":","%3A")}`),this.$tagInput.clearAll(),this.inactivate(),this}checkURL(t,s){if((t==null?void 0:t.hash)==="#search"&&this.inactivate(),s.hash==="#search"&&this.activate(),`${t==null?void 0:t.pathname}${t==null?void 0:t.search}`==`${s.pathname}${s.search}`)return;const i=s.searchParams.get("tags");this.$tagInput.clearAll(),i==null||i.split(" ").forEach(n=>this.$tagInput.addTag(n))}}class Te extends f{constructor(){super("selection-list");h(this,"focused",null);h(this,"selections",new Set)}addSelections(t){t=$.orArrayResolve(t);for(const s of t)this.selections.add(s);return this.insert(t),this}clearSelections(){return this.focused=null,this.selections.clear(),this.clear(),this}focusSelection(t){return this.blurSelection(),this.focused=t,t.focus(),t.offsetTopthis.scrollTop()+this.offsetHeight&&this.scrollTop(t.offsetTop+t.offsetHeight-this.offsetHeight),this}blurSelection(){var t;return(t=this.focused)==null||t.blur(),this.focused=null,this}focusNextSelection(){const t=this.selections.array,s=t.at(0);if(this.focused){const i=t.at(t.indexOf(this.focused)+1);i?this.focusSelection(i):s&&this.focusSelection(s)}else s&&this.focusSelection(s)}focusPrevSelection(){const t=this.selections.array;if(this.focused){const s=t.at(t.indexOf(this.focused)-1);s&&this.focusSelection(s)}else{const s=t.at(0);s&&this.focusSelection(s)}}}class xe extends f{constructor(){super("selection");h(this,"property",{value:""})}value(t){return $.fluent(this,arguments,()=>this.property.value,()=>$.set(this.property,"value",t))}focus(){return this.addClass("active"),this}blur(){return this.removeClass("active"),this}}class Se extends f{constructor(t){super("tag-input");h(this,"$input",$("input").type("text"));h(this,"$sizer",$("span").class("sizer"));h(this,"$inputor",$("div").class("input-wrapper").content([this.$sizer,this.$input.on("input",()=>{this.$sizer.content(this.$input.value())})]));h(this,"tags",new Set);h(this,"$seachbar");this.$seachbar=t}input(){return this.insert(this.$inputor),this.$input.focus(),this.$seachbar.$selectionList.clearSelections(),this.$seachbar.getSearchSuggestions(),this}addTag(t){if(t=t??this.$input.value(),!t.length)return this;const s=new Oe(t);return s.on("click",()=>this.editTag(s)),this.tags.add(s),this.value(""),this.$input.inDOM()?this.$inputor.replace(s):this.insert(s),this}editTag(t){return this.addTag(),this.tags.delete(t),t.replace(this.$inputor),this.value(t.name),this.$input.focus(),this.$seachbar.getSearchSuggestions(),this}clearAll(){return this.value(""),this.tags.clear(),this.clear(),this}value(t){return t===void 0?this:(this.$input.value(t),this.$sizer.content(t),this)}focus(){return this.$input.focus(),this}get query(){return this.tags.array.map(t=>t.name).toString().replace(",","+")}}class Oe extends f{constructor(t){super("tag");h(this,"name");this.name=t,this.build()}build(){this.content(this.name)}}class Ie extends f{constructor(){super("ion-icon")}name(e){return this.attribute("name",e),this}size(e){return this.attribute("size",e),this}disable(e){return this.attribute("disable",e),this}link(e,t=!1){return this.on("click",()=>t?$.replace(e):$.open(e)),this}}class ke extends wt{constructor(){super();h(this,"$icon",$("ion-icon"));h(this,"$label",$("span"));this.addStaticClass("icon"),this.build()}build(){super.content([this.$icon.hide(!0),this.$label])}content(t){return this.$label.content(t),this}icon(t){return this.$icon.name(t).hide(!1),this}link(t,s=!1){return this.on("click",()=>s?$.replace(t):$.open(t)),this}}const Ee=$("route").id("login").path("/login").builder(()=>{const[r,e]=[$.state(""),$.state("")];return[$("div").class("login-container").content([$("h1").content("Login"),$("div").class("username","input-container").content([$("label").for("username").content("Username"),$("input").type("text").id("username").value(r)]),$("div").class("api-key","input-container").content([$("label").for("api-key").content("API Key"),$("input").type("password").id("api-key").value(e)]),$("icon-button").content("Login").on("click",async()=>{await g.used.login(r.value,e.value),g.used.user&&(H.storageUserData={apiKey:e.value,username:r.value},r.set(""),e.set(""),$.replace("/"))}),$("icon-button").content("Create Account").icon("open-outline").on("click",()=>$.open("https://danbooru.donmai.us/users/new","_blank"))])]});class Me extends f{constructor(){super("drawer");h(this,"$filter",$("div").class("filter"));h(this,"$container",$("div").class("drawer-container"));h(this,"pointers",$.pointers($(document.body)));h(this,"opened",!1);this.hide(!0),this.build()}build(){this.content([this.$container.content([$("div").class("user-info").hide(!0).self(t=>[g.events.on("login",s=>{t.content([$("div").content([$("h3").class("username").content(s.name$),$("div").class("user-detail").content([$("span").class("userid").content(`ID: ${s.id}`),$("span").class("level").content(["Level: ",s.level_string$])])]),$("div").class("user-nav").content([$("icon-button").title("Uploaded Posts").icon("image").content(s.post_upload_count$.convert(st)).link(`/posts?tags=user:${s.name}`,!0),$("icon-button").title("Favorites").icon("heart").content(s.favorite_count$.convert(st)).link(`/posts?tags=ordfav:${s.name}`,!0),$("icon-button").title("Forum Posts").icon("document-text").content(s.forum_post_count$.convert(st)).hide(!0)])]).hide(!1)}).on("logout",()=>{t.clear().hide(!0)})]),$("div").class("nav").content([$("icon-button").icon("log-in-outline").content("Login").link("/login",!0).self(t=>g.events.on("login",()=>t.hide(!0)).on("logout",()=>t.hide(!1))),$("icon-button").icon("log-in-outline").content("Logout").on("dblclick",()=>g.used.logout()).hide(!0).self(t=>g.events.on("login",()=>t.hide(!1)).on("logout",()=>t.hide(!0))),$("icon-button").icon("swap-horizontal").class("switch").content("Switch Booru").on("click",()=>{g.used===vt?g.set(Le):g.set(vt),this.close()})])]),this.$filter.on("click",()=>$.back())]),this.pointers.on("move",t=>{var s;(s=$(":.viewer"))!=null&&s.contains(t.$target)||(t.$target.parent,!(t.type!=="pen"&&t.type!=="touch")&&(t.move_y>4||t.move_y<-4||(t.move_x<=-7&&(t.delete(),this.open()),t.move_x>=7&&(t.delete(),this.close()))))})}open(){return location.hash!=="#drawer"&&$.open(location.href+"#drawer"),this}close(){return location.hash==="#drawer"&&$.back(),this}activate(){this.opened=!0,this.hide(!1),this.$container.animate({transform:["translateX(100%)","translateX(0%)"]},{fill:"both",duration:300,easing:"ease"}),this.$filter.animate({opacity:[0,1]},{fill:"both",duration:300,easing:"ease"})}inactivate(){this.opened=!1,this.$container.animate({transform:["translateX(0%)","translateX(100%)"]},{fill:"both",duration:300,easing:"ease"},()=>this.hide(!this.opened)),this.$filter.animate({opacity:[1,0]},{fill:"both",duration:300,easing:"ease"})}checkURL(t,s){(t==null?void 0:t.hash)==="#drawer"&&this.inactivate(),s.hash==="#drawer"&&this.activate()}}class kt{static get detailPanelEnabled(){var e;return(e=this.localdata)==null?void 0:e.detailPanelEnabled}static set detailPanelEnabled(e){this.localdata={...this.localdata,detailPanelEnabled:e}}static get localdata(){const e=localStorage.getItem("local_settings_data");return e?JSON.parse(e):null}static set localdata(e){localStorage.setItem("local_settings_data",JSON.stringify(e))}}$.registerTagName("ion-icon",Ie);$.registerTagName("icon-button",ke);$.registerTagName("a",Wt);const[vt,Le]=[new g({origin:"https://danbooru.donmai.us",name:"Danbooru"}),new g({origin:"https://safebooru.donmai.us",name:"Safebooru"}),new g({origin:"https://testbooru.donmai.us",name:"Testbooru"})];g.set(g.manager.get(g.storageAPI??"")??vt);const at=new _e().hide(!0),yt=new Me,F=$.state(kt.detailPanelEnabled??!1).on("update",({state$:r})=>kt.detailPanelEnabled=r.value);$(document.body).content([$("nav").content([$("a").class("title").href("/").content([$("h1").class("booru-name").content(g.name$),$("h2").class("app").content([$("span").class("app-name").content("Viewer"),$("span").class("version").content("v0.10.0")])]),$("div").class("searchbar").content(["Search in ",g.name$]).self(r=>O.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&r.hide(!1),t.hash==="#search"&&r.hide(!0)})).on("click",()=>at.open()),$("div").class("buttons").content([$("ion-icon").class("search").name("search-outline").title("Search").self(r=>O.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&r.hide(!1),t.hash==="#search"&&r.hide(!0)})).on("click",()=>at.open()),$("ion-icon").class("detail-panel").name("reader-outline").title("Toggle Detail Panel").on("click",()=>F.set(!F.value)),$("a").content($("ion-icon").class("open").name("open-outline").title("Open in Original Site")).href(location.href.replace(location.origin,g.used.origin)).target("_blank"),$("ion-icon").class("copy").name("link-outline").title("Copy Page Link").hide(!1).on("click",(r,e)=>{navigator.clipboard.writeText(`${location.origin}${location.pathname}${location.search}`),e.name("checkmark-outline"),setTimeout(()=>{e.name("link-outline")},2e3)}),$("ion-icon").class("menu").name("menu-outline").title("Menu").hide(!1).self(r=>{g.events.on("login",()=>r.hide(!0)).on("logout",()=>r.hide(!1))}).on("click",()=>$.open(location.href+"#drawer")),$("div").class("account").hide(!0).title("Menu").self(r=>{g.events.on("login",e=>{r.content(e.name$.convert(t=>{var s;return((s=t.at(0))==null?void 0:s.toUpperCase())??""})).hide(!1)}).on("logout",()=>r.hide(!0))}).on("click",()=>yt.open())])]),at,yt,$("router").base("/").map([$("route").id("posts").path(["/","/posts"]).builder(({$route:r,query:e})=>{const{$postGrid:t,$detail:s}=Et(r,e);return[t,s]}),$("route").id("posts").path("/posts?tags").builder(({$route:r,query:e})=>{const{$postGrid:t,$detail:s}=Et(r,e);return[$("header").content([$("h2").content("Posts"),$("div").class("tags").self(i=>{e.tags.split("+").forEach(n=>{i.insert($("a").class("tag").content(decodeURIComponent(n)).href(`posts?tags=${n}`))})})]),$("div").class("no-post").hide(!0).self(i=>{i.on("startLoad",()=>i.hide(!0)),t.on("noPost",()=>i.hide(!1).content("No Posts")).on("post_error",n=>i.hide(!1).content(n))}),t,s]}),we,Ee]).on("beforeSwitch",r=>{r.preventDefault();function s(){var a;$(document.documentElement).css({scrollBehavior:"auto"});const n=$.call(()=>{switch(O.navigationDirection){case z.Forward:return["translateX(2%)","translateX(0%)"];case z.Back:return["translateX(-2%)","translateX(0%)"];case z.Replace:return""}});r.$view.content(r.nextContent),r.rendered(),(a=r.nextContent.element)==null||a.class("animated").animate({opacity:[0,1],transform:n},{duration:300,easing:"ease"},()=>{var o;r.switched(),$(document.documentElement).css({scrollBehavior:""}),(o=r.nextContent.element)==null||o.removeClass("animated")})}function i(){var a,o;$(document.documentElement).css({scrollBehavior:"auto"});const n=$.call(()=>{switch(O.navigationDirection){case z.Forward:return["translateX(0%)","translateX(-2%)"];case z.Back:return["translateX(0%)","translateX(2%)"];case z.Replace:return""}});(o=(a=r.previousContent)==null?void 0:a.element)==null||o.class("animated").animate({opacity:[1,0],transform:n},{duration:300,easing:"ease"},()=>{var l,u;(u=(l=r.previousContent)==null?void 0:l.element)==null||u.removeClass("animated"),s()})}r.previousContent?i():s()})]);O.events.on("stateChange",({beforeURL:r,afterURL:e})=>zt(r,e));zt(void 0,new URL(location.href));function zt(r,e){at.checkURL(r,e),yt.checkURL(r,e)}function Et(r,e){const t=new be(e),s=new Ut({preview:!0,tagsType:"name_only"}).hide(F.convert(n=>!n)).position(r);i(),F.on("update",i);function i(){F.value?t.addClass("detail-panel-enabled"):t.removeClass("detail-panel-enabled")}return t.$focus.on("focus",({$focused:n})=>{n instanceof $t&&s.update(n.post)}).on("blur",()=>s.update(null)),{$postGrid:t,$detail:s}}$.keys($(window)).if(r=>{if(!($(r.target)instanceof M))return!0}).keydown(["q","Q"],r=>{r.preventDefault(),O.index!==0&&$.back()}).keydown(["e","E"],r=>{r.preventDefault(),O.forwardIndex!==0&&$.forward()}).keydown("Tab",r=>{r.preventDefault(),F.set(!F.value)}); diff --git a/dist/index.html b/dist/index.html index 8665d9e..c5dc525 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,8 +16,8 @@ gtag('config', 'G-59HBGP98WR'); - - + + diff --git a/index.scss b/index.scss index c73c835..6434e77 100644 --- a/index.scss +++ b/index.scss @@ -5,6 +5,7 @@ @import '/src/component/IconButton/$IconButton'; @import '/src/component/IonIcon/$IonIcon'; @import '/src/component/Drawer/$Drawer'; +@import '/src/component/DetailPanel/$DetailPanel'; // routes @import '/src/route/post/$post_route'; @import '/src/route/login/$login_route'; @@ -154,8 +155,14 @@ nav { div.searchbar { display: none; } - div.buttons ion-icon.search { - display: inline-block; + div.buttons ion-icon { + &.search { + display: inline-block; + } + + &.detail-panel { + display: none; + } } } } @@ -173,7 +180,7 @@ router { } route#posts { - + header { margin-bottom: 1rem; h2 { @@ -185,6 +192,25 @@ route#posts { gap: 0.5rem; } } + + .post-grid.detail-panel-enabled { + width: calc(100vw - 300px - 4rem); + @media (max-width: 800px) { + width: 100%; + } + } + + @media (max-width: 800px) { + detail-panel { + display: none; + } + } +} + +section { + background-color: #2f2f45; + border-radius: var(--border-radius-large); + padding: 20px; } button { diff --git a/package.json b/package.json index 7b11695..d678eed 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "danbooru-viewer", "module": "index.ts", "type": "module", - "version": "0.9.0", + "version": "0.10.0", "scripts": { "dev": "bun x vite", "build": "bun x vite build", diff --git a/src/component/DetailPanel/$DetailPanel.ts b/src/component/DetailPanel/$DetailPanel.ts new file mode 100644 index 0000000..3a1fd54 --- /dev/null +++ b/src/component/DetailPanel/$DetailPanel.ts @@ -0,0 +1,162 @@ +import { $Container, type $ContainerContentType } from "elexis"; +import type { Post } from "../../structure/Post"; +import { Booru } from "../../structure/Booru"; +import { Tag, TagCategory } from "../../structure/Tag"; +import { numberFormat } from "../../structure/Util"; +import type { $IonIcon } from "../IonIcon/$IonIcon"; +import type { $Route } from "@elexis/router"; + +export class $DetailPanel extends $Container { + post: Post | null = null; + options: $DetailPanelOptions; + constructor(options?: $DetailPanelOptions) { + super('detail-panel'); + this.options = { + preview: options?.preview ?? false, + tagsType: options?.tagsType ?? 'detail' + }; + this.build(); + + } + + private build() { + if (this.post) { + this.content([ + this.options.preview ? $('div').class('preview').content([ + $('img').src(this.post.previewURL) + ]) : null, + $('div').class('detail').content([ + $('section').class('post-info').content([ + new $Property('id').name('Post').content(`#${this.post.id}`), + new $Property('uploader').name('Uploader').content(this.post.uploader$), + new $Property('approver').name('Approver').content(this.post.approver$), + new $Property('date').name('Date').content(this.post.created_date$), + new $Property('size').name('Size').content([this.post.file_size$, this.post.dimension$]), + new $Property('file-type').name('File Type').content(this.post.file_ext$), + $('div').class('inline').content([ + new $Property('favorites').name('Favorites').content(this.post.favcount$), + new $Property('score').name('Score').content(this.post.score$) + ]), + new $Property('file-url').name('File').content([ + $('a').href(this.post.file_url$).content(this.post.file_url$.convert((value) => value.replace('https://', ''))).target('_blank'), + $('ion-icon').name('clipboard').on('click', (e, $ion) => this.copyButtonHandler($ion, this.post!.file_url)) + ]), + new $Property('source-url').name('Source').content([ + $('a').href(this.post.source$).content(this.post.source$.convert((value) => value.replace('https://', ''))).target('_blank'), + $('ion-icon').name('clipboard').on('click', (e, $ion) => this.copyButtonHandler($ion, this.post!.source)) + ]), + new $Property('booru-url').name(Booru.name$).content([ + $('a').href(this.post.booruUrl$).content(this.post.booruUrl$.convert((value) => value.replace('https://', ''))).target('_blank'), + $('ion-icon').name('clipboard').on('click', (e, $ion) => this.copyButtonHandler($ion, this.post!.booruUrl)) + ]), + new $Property('webm-url').name('Webm').hide(true).self(async ($property) => { + await this.post!.ready; + if (this.post!.isUgoria) $property.content($('a').href(this.post!.webm_url$).content(this.post!.webm_url$.convert((value) => value.replace('https://', ''))).target('_blank')).hide(false); + }), + ]), + $('div').class('post-tags').content(async $tags => { + if (this.options.tagsType === 'detail') { + const tags = await this.post!.fetchTags(); + const [artist_tags, char_tags, gen_tags, meta_tags, copy_tags] = [ + tags.filter(tag => tag.category === TagCategory.Artist), + tags.filter(tag => tag.category === TagCategory.Character), + tags.filter(tag => tag.category === TagCategory.General), + tags.filter(tag => tag.category === TagCategory.Meta), + tags.filter(tag => tag.category === TagCategory.Copyright), + ] + + function $tag_category(category: string, tags: Tag[]) { + return tags.length ? [ + $('h3').content(category), + $('section').content([ + tags.map(tag => $('div').class('tag').content([ + $('a').class('tag-name').content(tag.name).href(`/posts?tags=${tag.name}`), + $('span').class('tag-post-count').content(tag.post_count$.convert(numberFormat)) + ])) + ]) + ] : null + } + + return [ + $tag_category('Artist', artist_tags), + $tag_category('Character', char_tags), + $tag_category('Copyright', copy_tags), + $tag_category('Meta', meta_tags), + $tag_category('General', gen_tags), + ] + } else { + function $tag_category(category: string, tags: string[]) { + return tags.at(0)?.length ? [ + $('h3').content(category), + $('section').class('tag-name-only').content([ + tags.map(tag => $('a').class('tag').content(tag).href(`/posts?tags=${tag}`)), + ]) + ] : null + } + return [ + $tag_category('Artist', this.post!.tag_string_artist.split(' ')), + $tag_category('Character', this.post!.tag_string_character.split(' ')), + $tag_category('Copyright', this.post!.tag_string_copyright.split(' ')), + $tag_category('Meta', this.post!.tag_string_meta.split(' ')), + $tag_category('General', this.post!.tag_string_general.split(' ')), + ] + } + }) + ]) + ]) + } else { + this.content($('span').class('no-content').content('No Selected')) + } + } + + update(post: Post | null) { + this.post = post; + this.build(); + return this; + } + + private copyButtonHandler($ion: $IonIcon, text: string) { + $ion.name('checkmark'); + navigator.clipboard.writeText(text); + setTimeout(() => $ion.name('clipboard'), 3000); + } + + position($route: $Route) { + let scrollTop = 0; + addEventListener('scroll', () => { if (this.inDOM()) scrollTop = document.documentElement.scrollTop }, {passive: true}) + $route + .on('beforeShift', () => { if (innerWidth > 800) this.css({position: `absolute`, top: `calc(${scrollTop}px + var(--nav-height) + var(--padding))`}) }) + .on('afterShift', () => this.css({position: '', top: ''})) + return this; + } +} + +export interface $DetailPanelOptions { + preview?: boolean; + tagsType?: 'detail' | 'name_only'; +} + +class $Property extends $Container { + $name = $('span').class('property-name') + $values = $('div').class('property-values') + constructor(id: string) { + super('div'); + this.staticClass('property').attribute('property-id', id); + super.content([ + this.$name, + this.$values.hide(true) + ]) + } + + name(content: $ContainerContentType) { + this.$name.content(content); + return this; + } + + content(content: OrMatrix<$ContainerContentType>) { + this.$values.hide(false); + const list = $.orArrayResolve(content); + this.$values.content(list.map($item => $('span').staticClass('property-value').content($item))); + return this; + } +} \ No newline at end of file diff --git a/src/component/DetailPanel/_$DetailPanel.scss b/src/component/DetailPanel/_$DetailPanel.scss new file mode 100644 index 0000000..b05e424 --- /dev/null +++ b/src/component/DetailPanel/_$DetailPanel.scss @@ -0,0 +1,162 @@ +detail-panel { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + --padding: 1rem; + position: fixed; + top: calc(var(--nav-height) + var(--padding)); + right: var(--padding); + width: 300px; + height: calc(100dvh - 2rem - var(--nav-height)); + // transition: all 0.3s ease; + background-color: var(--secondary-color-1); + + @media (max-width: 800px) { + position: static; + width: 100%; + overflow: visible; + height: 100%; + padding: 1rem; + box-sizing: border-box; + } + + span.no-content { + color: var(--secondary-color-3); + font-size: 1.6rem; + font-weight: 900; + } + + div.preview { + overflow: hidden; + border-radius: var(--border-radius-large); + height: 300px; + width: 300px; + background-color: var(--secondary-color-0); + img { + height: 100%; + width: 100%; + object-fit: contain; + } + } + + div.detail { + display: flex; + flex-direction: column; + gap: 0.4rem; + overflow: scroll; + overflow-x: hidden; + border-radius: var(--border-radius-large); + height: 100%; + width: 100%; + + &::-webkit-scrollbar { + background-color: #000000; + width: 0px; + } + + &::-webkit-scrollbar-thumb { + background-color: #aeaeec; + } + } + + + h3 { + padding-left: 1rem; + margin-block: 0.6rem; + } + .post-info { + background-color: #2f2f45; + border-radius: var(--border-radius-large); + padding: 20px; + display: flex; + flex-direction: column; + gap: 0.4rem; + + .buttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1rem; + margin-top: 1rem; + } + } + + div.property { + display: flex; + gap: 0.6rem; + align-items: center; + width: 100%; + span.property-name { + flex-shrink: 0; + } + div.property-values { + display: flex; + gap: 0.4rem; + width: 100%; + overflow: hidden; + span.property-value { + padding: 0.2rem 0.4rem; + background-color: var(--secondary-color-1); + color: var(--primary-color-dark); + border-radius: var(--border-radius-small); + justify-content: space-between; + flex-shrink: 1; + display: flex; + align-items: center; + overflow: hidden; + + &:has(ion-icon) { + flex-shrink: 0; + } + + * { + display: block; + overflow: hidden; + text-wrap: nowrap; + text-overflow: ellipsis; + flex-shrink: 1; + } + + ion-icon { + font-size: 1rem; + padding: 4px; + box-sizing: border-box; + } + } + } + } + div.inline { + display: flex; + gap: 1rem; + } + div.post-tags { + display: flex; + flex-direction: column; + gap: 0.2rem; + div.tag { + align-items: center; + a.tag-name { + word-break: break-word; + text-decoration: none; + } + span.tag-post-count { + background-color: var(--secondary-color-3); + color: var(--secondary-color-8); + padding: 0px 4px; + border-radius: var(--border-radius-small); + font-size: 12px; + margin-left: 0.4rem; + } + } + + section.tag-name-only { + display: flex; + flex-wrap: wrap; + column-gap: 0.5rem; + a.tag { + + } + } + } +} \ No newline at end of file diff --git a/src/component/PostGrid/$PostGrid.ts b/src/component/PostGrid/$PostGrid.ts index 040e8c1..d73d500 100644 --- a/src/component/PostGrid/$PostGrid.ts +++ b/src/component/PostGrid/$PostGrid.ts @@ -34,6 +34,9 @@ export class $PostGrid extends $Layout<$PostGridEventMap> { } }) this.on('resize', () => this.resize()) + this.on('afterRender', () => { + this.$focus.currentLayer?.focus(this.$focus.currentLayer.currentFocus); + }) this.events.fire('startLoad'); this.loader(); this.$focus.layer(100).loop(false).scrollThreshold($.rem(2) + 60); @@ -44,11 +47,11 @@ export class $PostGrid extends $Layout<$PostGridEventMap> { if (!this.inDOM()) return; return true; }) - .keydown('Tab', e => { - e.preventDefault(); - if (e.shiftKey) this.$focus.prev(); - else this.$focus.next(); - }) + // .keydown('Tab', e => { + // e.preventDefault(); + // if (e.shiftKey) this.$focus.prev(); + // else this.$focus.next(); + // }) .keydown(['w', 'W'], e => { e.preventDefault(); this.$focus.up(); }) .keydown(['s', 'S'], e => { e.preventDefault(); this.$focus.down(); }) .keydown(['d', 'D'], e => { e.preventDefault(); this.$focus.right(); }) @@ -169,7 +172,8 @@ interface $PostGridEventMap extends $LayoutEventMap { startLoad: []; noPost: []; endPost: []; - post_error: [message: string] + post_error: [message: string]; + } interface FavoritesData { diff --git a/src/component/PostGrid/_$PostGrid.scss b/src/component/PostGrid/_$PostGrid.scss index 7a62112..dccd82b 100644 --- a/src/component/PostGrid/_$PostGrid.scss +++ b/src/component/PostGrid/_$PostGrid.scss @@ -1,12 +1,19 @@ layout.post-grid { - margin-top: 0.4rem; + margin-block: 1rem; + a { + transition: 0.3s all ease; + } &:has(post-tile[focus]) { post-tile:not([focus]) { - opacity: 0.5; + a { + opacity: 0.5; + } } post-tile:hover { - opacity: 1; + a { + opacity: 1; + } } } } \ No newline at end of file diff --git a/src/component/PostTile/$PostTile.ts b/src/component/PostTile/$PostTile.ts index 4d47789..db663b0 100644 --- a/src/component/PostTile/$PostTile.ts +++ b/src/component/PostTile/$PostTile.ts @@ -1,28 +1,26 @@ import { $Container, $Image, $State, $Video } from "elexis"; import type { Post } from "../../structure/Post"; import { time } from "../../structure/Util"; +import { detailPanelEnable$ } from "../../main"; export class $PostTile extends $Container { post: Post; $video: $Video | null; + $img: $Image; duration$ = $.state(``); constructor(post: Post) { super('post-tile'); this.post = post; this.$video = this.post.isVideo ? $('video').width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(true).loop(true).muted(true).hide(true).on('mousedown', (e) => e.preventDefault()) : null; + this.$img = $('img').draggable(false).css({opacity: '0'}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading('lazy'); this.attribute('filetype', this.post.file_ext); this.durationUpdate(); this.build(); } build() { - let timer: Timer this.$video?.on('timeupdate', (e, $video) => { this.durationUpdate(); }) - this.$video?.on('pause', () => { - clearInterval(timer); - this.durationUpdate(); - }) this.class('loading').content([ // Video Detail this.post.isVideo @@ -37,22 +35,31 @@ export class $PostTile extends $Container { $('span').content('GIF') ]) : null, // Tile - $('a').href(this.post.pathname).content(() => [ + $('a').href(this.post.pathname).preventDefault(detailPanelEnable$).content(() => [ this.$video, - $('img').draggable(false).css({opacity: '0'}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading('lazy') - .on('mousedown', (e) => e.preventDefault()) - .once('load', (e, $img) => { - $img - .src(this.post.previewURL) - .on(['mouseenter', 'touchstart'], () => { if (this.post.isGif) { $img.src(this.post.large_file_url) } }, {passive: true}) - .on(['mouseleave', 'touchend', 'touchcancel'], () => { if (this.post.isGif) { $img.src(this.post.previewURL) } }, {passive: true}) - .animate({opacity: [0, 1]}, {duration: 300, fill: 'both'}); - this.removeClass('loading'); + this.$img.on('mousedown', (e) => e.preventDefault()) + .once('load', (e, $img) => { + $img.animate({opacity: [0, 1]}, {duration: 300}, () => $img.css({opacity: ''})); + this.removeClass('loading'); }) ]) - .on(['mouseenter', 'touchstart'], () => { if (!this.$video?.isPlaying) { this.$video?.src(this.post.large_file_url).hide(false).play().catch(err => undefined) } }, {passive: true}) - .on(['mouseleave', 'touchend', 'touchcancel'], () => { this.$video?.pause().currentTime(0).hide(true); }, {passive: true}) ]) + this.on(['focus', 'mouseenter', 'touchstart'], () => { + if (!this.$video?.isPlaying) { + this.$video?.src(this.post.large_file_url).hide(false).play().catch(err => undefined) + } + if (this.post.isGif) { this.$img.src(this.post.large_file_url) } + }, {passive: true} ) + .on(['blur', 'mouseleave', 'touchend', 'touchcancel'], () => { + this.$video?.pause().currentTime(0).hide(true); + if (this.post.isGif) { this.$img.src(this.post.previewURL) } + }, {passive: true} ) + .on('click', () => { + if (!detailPanelEnable$.value) return; + if (innerWidth <= 800) return $.open(this.post.pathname); + if ($(document.activeElement) === this) $.open(this.post.pathname); + else this.focus(); + }) } durationUpdate() { diff --git a/src/component/PostTile/_$PostTile.scss b/src/component/PostTile/_$PostTile.scss index 0def99e..19ba991 100644 --- a/src/component/PostTile/_$PostTile.scss +++ b/src/component/PostTile/_$PostTile.scss @@ -8,6 +8,7 @@ post-tile { -webkit-tap-highlight-color: transparent; user-select: none; outline: transparent solid 2px; + background-color: var(--secondary-color-1); &[focus] { outline: var(--secondary-color-9) solid 2px; diff --git a/src/main.ts b/src/main.ts index 34a77ce..62c401c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,25 +4,29 @@ import '@elexis/router'; import { Booru } from './structure/Booru'; import { post_route } from './route/post/$post_route'; import { $PostGrid } from './component/PostGrid/$PostGrid'; -import { $Router, $RouterNavigationDirection } from '@elexis/router'; +import { $Route, $Router, $RouterAnchor, $RouterNavigationDirection } from '@elexis/router'; import { $Searchbar } from './component/Searchbar/$Searchbar'; import { $IonIcon } from './component/IonIcon/$IonIcon'; import { $IconButton } from './component/IconButton/$IconButton'; import { $login_route } from './route/login/$login_route'; import { $Drawer } from './component/Drawer/$Drawer'; import { $Input } from 'elexis/lib/node/$Input'; +import { $DetailPanel } from './component/DetailPanel/$DetailPanel'; +import { $PostTile } from './component/PostTile/$PostTile'; +import { LocalSettings } from './structure/LocalSettings'; // declare elexis module declare module 'elexis' { export namespace $ { export interface TagNameElementMap { 'ion-icon': typeof $IonIcon; 'icon-button': typeof $IconButton; + 'a': typeof $RouterAnchor; } } } $.registerTagName('ion-icon', $IonIcon) $.registerTagName('icon-button', $IconButton) -$.anchorHandler = ($a) => { $.open($a.href(), $a.target())} +$.registerTagName('a', $RouterAnchor) // settings export const [danbooru, safebooru]: Booru[] = [ new Booru({ origin: 'https://danbooru.donmai.us', name: 'Danbooru' }), @@ -32,6 +36,7 @@ export const [danbooru, safebooru]: Booru[] = [ Booru.set(Booru.manager.get(Booru.storageAPI ?? '') ?? danbooru); const $searchbar = new $Searchbar().hide(true); const $drawer = new $Drawer(); +export const detailPanelEnable$ = $.state(LocalSettings.detailPanelEnabled ?? false).on('update', ({state$}) => LocalSettings.detailPanelEnabled = state$.value) // render $(document.body).content([ @@ -55,6 +60,8 @@ $(document.body).content([ $('ion-icon').class('search').name('search-outline').title('Search') .self($self => $Router.events.on('stateChange', ({beforeURL, afterURL}) => {if (beforeURL.hash === '#search') $self.hide(false); if (afterURL.hash === '#search') $self.hide(true)})) .on('click', () => $searchbar.open()), + // Detail Panel Button + $('ion-icon').class('detail-panel').name('reader-outline').title('Toggle Detail Panel').on('click', () => detailPanelEnable$.set(!detailPanelEnable$.value)), // Open Booru $('a').content($('ion-icon').class('open').name('open-outline').title('Open in Original Site')).href(location.href.replace(location.origin, Booru.used.origin)).target('_blank'), // Copy Button @@ -87,10 +94,13 @@ $(document.body).content([ // Base Router $('router').base('/').map([ // Home Page - $('route').id('posts').path(['/', '/posts']).builder(() => new $PostGrid()), + $('route').id('posts').path(['/', '/posts']).builder(({$route, query}) => { + const { $postGrid, $detail } = $postsPageComponents($route, query); + return [ $postGrid, $detail ] + }), // Posts Page - $('route').id('posts').path('/posts?tags').builder(({query}) => { - const $postGrid = new $PostGrid({tags: query.tags}); + $('route').id('posts').path('/posts?tags').builder(({$route, query}) => { + const { $postGrid, $detail } = $postsPageComponents($route, query) return [ $('header').content([ $('h2').content('Posts'), @@ -106,7 +116,8 @@ $(document.body).content([ .on('noPost', () => $div.hide(false).content('No Posts')) .on('post_error', message => $div.hide(false).content(message)) }), - $postGrid + $postGrid, + $detail ] }), // Post Page @@ -173,10 +184,24 @@ componentState(undefined, new URL(location.href)) function componentState(beforeURL: URL | undefined, afterURL: URL) { $searchbar.checkURL(beforeURL, afterURL); $drawer.checkURL(beforeURL, afterURL) } + +function $postsPageComponents($route: $Route, query: {tags?: string}) { + const $postGrid = new $PostGrid(query); + const $detail = new $DetailPanel({preview: true, tagsType: 'name_only'}).hide(detailPanelEnable$.convert(bool => !bool)).position($route); + detailPanelCheck(); + detailPanelEnable$.on('update', detailPanelCheck) + function detailPanelCheck() { detailPanelEnable$.value ? $postGrid.addClass('detail-panel-enabled') : $postGrid.removeClass('detail-panel-enabled') } + $postGrid.$focus + .on('focus', ({$focused: $target}) => {if ($target instanceof $PostTile) $detail.update($target.post) }) + .on('blur', () => $detail.update(null)) + return { $postGrid, $detail }; +} + $.keys($(window)) .if(e => { if ($(e.target) instanceof $Input) return; return true; }) .keydown(['q', 'Q'], e => { e.preventDefault(); if ($Router.index !== 0) $.back(); }) - .keydown(['e', 'E'], e => { e.preventDefault(); if ($Router.forwardIndex !== 0) $.forward(); }) \ No newline at end of file + .keydown(['e', 'E'], e => { e.preventDefault(); if ($Router.forwardIndex !== 0) $.forward(); }) + .keydown('Tab', e => { e.preventDefault(); detailPanelEnable$.set(!detailPanelEnable$.value) }) \ No newline at end of file diff --git a/src/route/post/$post_route.ts b/src/route/post/$post_route.ts index 071b560..375f93b 100644 --- a/src/route/post/$post_route.ts +++ b/src/route/post/$post_route.ts @@ -1,17 +1,15 @@ import { Post } from "../../structure/Post"; -import { $Container, type $ContainerContentType } from "elexis"; -import { Tag, TagCategory } from "../../structure/Tag"; import { ArtistCommentary } from "../../structure/Commentary"; import { Booru } from "../../structure/Booru"; -import type { $IonIcon } from "../../component/IonIcon/$IonIcon"; -import { numberFormat } from "../../structure/Util"; import { ClientUser } from "../../structure/ClientUser"; import { $VideoController } from "../../component/VideoController/$VideoController"; import { $Input } from "elexis/lib/node/$Input"; +import { $DetailPanel } from "../../component/DetailPanel/$DetailPanel"; export const post_route = $('route').path('/posts/:id').id('post').builder(({$route, params}) => { if (!Number(params.id)) return $('h1').content('404: POST NOT FOUND'); const post = Post.get(Booru.used, +params.id); + const $video = $('video'); const events = $.events<{ viewerPanel_hide: [], viewerPanel_show: [], @@ -29,9 +27,13 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro if (Booru.used.user?.favorites.has(post.id)) post.deleteFavorite(); else post.createFavorite(); }) + .keydown(' ', e => { + e.preventDefault(); + if ($video.isPlaying) $video.pause(); + else $video.play(); + }) return [ $('div').class('viewer').content(async ($viewer) => { - const $video = $('video'); events.on('video_play_pause', () => { if ($video.isPlaying) $video.pause(); else $video.play() }) await post.ready; $viewer @@ -95,103 +97,6 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro ] }) ]), - $('div').class('sidebar') - .self($sidebar => { - let scrollTop = 0; - addEventListener('scroll', () => { if ($sidebar.inDOM()) scrollTop = document.documentElement.scrollTop }, {passive: true}) - $route - .on('beforeShift', () => { if (innerWidth > 800) $sidebar.css({position: `absolute`, top: `calc(${scrollTop}px + var(--nav-height) + var(--padding))`}) }) - .on('afterShift', () => $sidebar.css({position: '', top: ''})) - }) - .content([ - $('section').class('post-info').content([ - new $Property('id').name('Post').content(`#${params.id}`), - new $Property('uploader').name('Uploader').content(post.uploader$), - new $Property('approver').name('Approver').content(post.approver$), - new $Property('date').name('Date').content(post.created_date$), - new $Property('size').name('Size').content([post.file_size$, post.dimension$]), - new $Property('file-type').name('File Type').content(post.file_ext$), - $('div').class('inline').content([ - new $Property('favorites').name('Favorites').content(post.favcount$), - new $Property('score').name('Score').content(post.score$) - ]), - new $Property('file-url').name('File').content([ - $('a').href(post.file_url$).content(post.file_url$.convert((value) => value.replace('https://', ''))).target('_blank'), - $('ion-icon').name('clipboard').on('click', (e, $ion) => copyButtonHandler($ion, post.file_url)) - ]), - new $Property('source-url').name('Source').content([ - $('a').href(post.source$).content(post.source$.convert((value) => value.replace('https://', ''))).target('_blank'), - $('ion-icon').name('clipboard').on('click', (e, $ion) => copyButtonHandler($ion, post.source)) - ]), - new $Property('booru-url').name(Booru.name$).content([ - $('a').href(post.booruUrl$).content(post.booruUrl$.convert((value) => value.replace('https://', ''))).target('_blank'), - $('ion-icon').name('clipboard').on('click', (e, $ion) => copyButtonHandler($ion, post.booruUrl)) - ]), - new $Property('webm-url').name('Webm').hide(true).self(async ($property) => { - await post.ready; - if (post.isUgoria) $property.content($('a').href(post.webm_url$).content(post.webm_url$.convert((value) => value.replace('https://', ''))).target('_blank')).hide(false); - }), - ]), - $('div').class('post-tags').content(async $tags => { - const tags = await post.fetchTags(); - const [artist_tags, char_tags, gen_tags, meta_tags, copy_tags] = [ - tags.filter(tag => tag.category === TagCategory.Artist), - tags.filter(tag => tag.category === TagCategory.Character), - tags.filter(tag => tag.category === TagCategory.General), - tags.filter(tag => tag.category === TagCategory.Meta), - tags.filter(tag => tag.category === TagCategory.Copyright), - ] - return [ - $tag_category('Artist', artist_tags), - $tag_category('Character', char_tags), - $tag_category('Copyright', copy_tags), - $tag_category('Meta', meta_tags), - $tag_category('General', gen_tags), - ] - - function $tag_category(category: string, tags: Tag[]) { - return tags.length ? [ - $('h3').content(category), - $('section').content([ - tags.map(tag => $('div').class('tag').content([ - $('a').class('tag-name').content(tag.name).href(`/posts?tags=${tag.name}`), - $('span').class('tag-post-count').content(tag.post_count$.convert(numberFormat)) - ])) - ]) - ] : null - } - }) - ]) + new $DetailPanel().position($route).update(post) ] -}) - -function copyButtonHandler($ion: $IonIcon, text: string) { - $ion.name('checkmark'); - navigator.clipboard.writeText(text); - setTimeout(() => $ion.name('clipboard'), 3000); -} - -class $Property extends $Container { - $name = $('span').class('property-name') - $values = $('div').class('property-values') - constructor(id: string) { - super('div'); - this.staticClass('property').attribute('property-id', id); - super.content([ - this.$name, - this.$values.hide(true) - ]) - } - - name(content: $ContainerContentType) { - this.$name.content(content); - return this; - } - - content(content: OrMatrix<$ContainerContentType>) { - this.$values.hide(false); - const list = $.orArrayResolve(content); - this.$values.content(list.map($item => $('span').staticClass('property-value').content($item))); - return this; - } -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/route/post/_$post_route.scss b/src/route/post/_$post_route.scss index abc08cd..7cffcea 100644 --- a/src/route/post/_$post_route.scss +++ b/src/route/post/_$post_route.scss @@ -1,11 +1,6 @@ #post { padding: 0; padding-top: var(--nav-height); - section { - background-color: #2f2f45; - border-radius: var(--border-radius-large); - padding: 20px; - } div.viewer { height: calc(100dvh - 2rem - var(--nav-height)); @@ -80,13 +75,13 @@ display: flex; touch-action: none; align-items: center; + cursor: pointer; div.progressbar { height: 0.4rem; width: 100%; background-color: var(--secondary-color-1); flex-shrink: 1; - cursor: pointer; div.progress { height: 100%; @@ -156,129 +151,6 @@ } } } - - div.sidebar { - --padding: 1rem; - position: fixed; - top: calc(var(--nav-height) + var(--padding)); - right: var(--padding); - display: flex; - flex-direction: column; - gap: 0.4rem; - width: 300px; - overflow: scroll; - overflow-x: hidden; - height: calc(100dvh - 2rem - var(--nav-height)); - border-radius: var(--border-radius-large); - transition: all 0.3s ease; - - @media (max-width: 800px) { - position: static; - width: 100%; - overflow: visible; - height: 100%; - padding: 1rem; - box-sizing: border-box; - } - - &::-webkit-scrollbar { - background-color: #000000; - width: 0px; - } - - &::-webkit-scrollbar-thumb { - background-color: #aeaeec; - } - - h3 { - padding-left: 1rem; - margin-block: 0.6rem; - } - .post-info { - background-color: #2f2f45; - border-radius: var(--border-radius-large); - padding: 20px; - display: flex; - flex-direction: column; - gap: 0.4rem; - - .buttons { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 1rem; - margin-top: 1rem; - } - } - - div.property { - display: flex; - gap: 0.6rem; - align-items: center; - width: 100%; - span.property-name { - flex-shrink: 0; - } - div.property-values { - display: flex; - gap: 0.4rem; - width: 100%; - overflow: hidden; - span.property-value { - padding: 0.2rem 0.4rem; - background-color: var(--secondary-color-1); - color: var(--primary-color-dark); - border-radius: var(--border-radius-small); - justify-content: space-between; - flex-shrink: 1; - display: flex; - align-items: center; - overflow: hidden; - - &:has(ion-icon) { - flex-shrink: 0; - } - - * { - display: block; - overflow: hidden; - text-wrap: nowrap; - text-overflow: ellipsis; - flex-shrink: 1; - } - - ion-icon { - font-size: 1rem; - padding: 4px; - box-sizing: border-box; - } - } - } - } - div.inline { - display: flex; - gap: 1rem; - } - div.post-tags { - display: flex; - flex-direction: column; - gap: 0.2rem; - div.tag { - align-items: center; - a.tag-name { - word-break: break-word; - text-decoration: none; - } - span.tag-post-count { - background-color: var(--secondary-color-3); - color: var(--secondary-color-8); - padding: 0px 4px; - border-radius: var(--border-radius-small); - font-size: 12px; - margin-left: 0.4rem; - } - } - } - } } // animated resolver diff --git a/src/structure/LocalSettings.ts b/src/structure/LocalSettings.ts new file mode 100644 index 0000000..b2911aa --- /dev/null +++ b/src/structure/LocalSettings.ts @@ -0,0 +1,11 @@ +export class LocalSettings { + static get detailPanelEnabled() { return this.localdata?.detailPanelEnabled } + static set detailPanelEnabled(boolean: boolean | undefined) { this.localdata = {...this.localdata, detailPanelEnabled: boolean }} + + static get localdata() { const data = localStorage.getItem('local_settings_data'); return data ? JSON.parse(data) as LocalSettingsStoreData : null } + static set localdata(data: LocalSettingsStoreData | null) { localStorage.setItem('local_settings_data', JSON.stringify(data)) } +} + +export interface LocalSettingsStoreData { + detailPanelEnabled?: boolean; +} \ No newline at end of file diff --git a/src/structure/Post.ts b/src/structure/Post.ts index 8401f42..33f6058 100644 --- a/src/structure/Post.ts +++ b/src/structure/Post.ts @@ -4,7 +4,6 @@ import { Tag } from "./Tag"; import { User } from "./User"; import { dateFrom, digitalUnit } from "./Util"; import { ClientUser } from "./ClientUser"; -import type { FavoriteData } from "./Favorite"; const LOADING_STRING = '...' @@ -132,7 +131,7 @@ export class Post extends $EventManager<{update: []}> { const tag_list = this.tag_string.split(' '); return [...this.booru.tags.values()].filter(tag => tag_list.includes(tag.name)) } - get previewURL() { return this.media_asset.variants?.find(variant => variant.file_ext === 'webp')?.url ?? this.large_file_url } + get previewURL() { return this.media_asset?.variants?.find(variant => variant.file_ext === 'webp')?.url ?? this.large_file_url } get booruUrl() { return `${this.booru.origin}/posts/${this.id}` } get url() { return `https://danbooru.defaultkavy.com/posts/${this.id}` } get isFileSource() { return this.source.startsWith('file://') }