-
Notifications
You must be signed in to change notification settings - Fork 1
/
WindowManager.html
24 lines (21 loc) · 8.2 KB
/
WindowManager.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" crossorigin>
(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))o(n);new MutationObserver(n=>{for(const s of n)if(s.type==="childList")for(const b of s.addedNodes)b.tagName==="LINK"&&b.rel==="modulepreload"&&o(b)}).observe(document,{childList:!0,subtree:!0});function r(n){const s={};return n.integrity&&(s.integrity=n.integrity),n.referrerpolicy&&(s.referrerPolicy=n.referrerpolicy),n.crossorigin==="use-credentials"?s.credentials="include":n.crossorigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function o(n){if(n.ep)return;n.ep=!0;const s=r(n);fetch(n.href,s)}})();var u=(e=>(e[e.Quarter=0]="Quarter",e[e.QuarterCenter=1]="QuarterCenter",e[e.Half=2]="Half",e[e.OneThird=3]="OneThird",e[e.TwoThird=4]="TwoThird",e[e.Full=5]="Full",e[e.FullBright=6]="FullBright",e[e.PercentSquare60=7]="PercentSquare60",e))(u||{}),i=(e=>(e.Top="top",e.Right="right",e.Bottom="bottom",e.Left="left",e.MiddleX="middleX",e.MiddleY="middleY",e.Next="next",e.ResizeX="resizeX",e.ResizeY="resizeY",e.IncreaseCenter="increaseCenter",e.DecreaseCenter="decreaseCenter",e))(i||{});const Q=["top","right","bottom","left"],k=e=>Q.map(t=>[e,t]),l=k(0),f=[...k(1),[1,"middleX"]],h=[...k(2),[2,"middleX"],[2,"middleY"]],y=k(3),d=k(4),T={twoThirdCenter:[4,"middleX"],increaseCenter:[7,"increaseCenter"],decreaseCenter:[7,"decreaseCenter"]},a=[[5,"top"],[6,"next"],[5,"next"],[6,"resizeX"],[6,"resizeY"]],v={ALL:[...l,...f,...h,...y,...d,...a],horizontal:[a[0],f[4],a[1],a[2],a[3],h[4],T.twoThirdCenter,a[4],l[0],h[3],h[1],l[1],l[3],d[3],d[1],l[2]],vertical:[a[0],f[4],a[1],a[2],l[0],y[0],h[5],f[0],l[1],y[2],a[3],f[2],l[3],l[2],f[3],f[1]],advanced:[T.increaseCenter,f[4],a[1],a[2],T.decreaseCenter,h[4],T.twoThirdCenter,a[4],l[0],h[3],h[1],l[1],l[3],d[3],d[1],l[2]],size32:[a[0],f[4],h[4],T.twoThirdCenter,a[1],a[3],a[2],a[4],l[0],h[3],h[1],l[1],l[3],d[3],d[1],l[2]]},S=()=>{const{width:e,height:t}=window.screen,r=v[{BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}.VITE_DISPLAY_STYLE];return r||(t*.7>e?v.vertical:v.horizontal)},Y=S(),M=e=>e===i.Left||e===i.Right||e===i.MiddleX,U=e=>e===i.Top||e===i.Bottom||e===i.MiddleY,j=([e,t])=>{const r=[];switch(e){case u.Quarter:switch(r.push("quarter"),r.push(t),t){case i.Top:r.push("left");break;case i.Right:r.push("top");break;case i.Bottom:r.push("right");break;case i.Left:r.push("bottom");break}break;case u.QuarterCenter:r.push("quarter"),r.push(t),r.push("center");break;case u.Half:r.push("half"),r.push(t);break;case u.OneThird:r.push("one_third"),r.push(t);break;case u.TwoThird:r.push("two_third"),r.push(t);break;case u.Full:{t===i.Next?r.push("next_monitor_full"):t===i.Top&&r.push("maximize");break}case u.FullBright:{r.push(t===i.Next?"next_monitor":t);break}}return t===i.IncreaseCenter?r.push("increase_center"):t===i.DecreaseCenter&&r.push("decrease_center"),r.join("_")},G=e=>{const t=e+1;if(t<1||t>16)return{row:0,column:0};const r=Math.ceil(t/4),o=t%4===0?4:t%4;return{row:r,column:o}};let g=!1;const K=()=>{if({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}.VITE_DISPLAY_SHORTCUTS==="true")g=!0;else{const e=localStorage.getItem("isVisible");e&&(g=e==="true")}},E={BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}.VITE_KEYBOARD_SIDE==="right",_=E?"j":"s",R=E?"k":"d",D=E?"l":"f",O=E?";":"g";function F(e){const t=e!=null?e:document.querySelector("#list");t!=null&&(g?t.classList.add("letter-visible"):t.classList.remove("letter-visible"))}function W(){K()}function J(){g=!g,localStorage.setItem("isVisible",g.toString()),F()}const A=e=>{switch(e){case 1:return _;case 2:return R;case 3:return D;case 4:return O;default:return""}},Z=new Set([_,R,D,O]),B=new Map([[_,1],[R,2],[D,3],[O,4]]);let m=[];function x(e){const t=Z.has(e);return!t&&m.length!==0&&(m=[]),t}function z(e){var t,r;if(m.push(e),m.length===2){const[o,n]=m;m=[];const s=(t=B.get(o))!=null?t:0,b=(r=B.get(n))!=null?r:0;return(s-1)*4+b}return null}function ee(e,t){const r=G(t),o=A(r.row),n=A(r.column);return e===o?n:e!==""?"":o+n}function te(e,t){const r=ee(e,t);return r?`<span class="letter">${r}</span>`:""}const P="ArrowUp",V="ArrowDown",X="ArrowLeft",$="ArrowRight",re=[P,V,X,$];let c=null;const L=Y.length,I="active",ne=e=>!(e==="increase_center"||e==="decrease_center"),C=()=>document.querySelector(`.${I}`);let p="";const q=()=>{var e;return(e=C())==null?void 0:e.classList.remove(I)};window.bttHandler=async e=>{await window.callBTT("trigger_named",{trigger_name:e,closeFloatingHTMLMenu:ne(e)?1:0}),c=null,q()};const H=()=>{q();const e=document.querySelector(`#list button:nth-child(${c})`);e&&e.classList.add(I)},N=e=>{switch(e){case $:{c=c?c<L?c+1:1:7;break}case X:{c=c?c>1?c-1:L:10;break}case P:c=c?c-4:6,c<1&&(c+=L);break;case V:c=c?c+4:11,c>L&&(c-=L);break}H()};document.addEventListener("keydown",e=>{var o,n;!((e.key==="Escape"||e.key==="Backspace")&&p==="")&&(e.preventDefault(),e.stopImmediatePropagation()),re.includes(e.key)&&N(e.key),e.key==="Enter"&&((o=C())==null||o.click());const r=e.key.toLowerCase();if(r==="a")J();else if(x(r)){const s=z(r);s?(c=s,H(),(n=C())==null||n.click(),p="",w()):(p=r,w())}p!==""&&(e.key==="Escape"||e.key==="Backspace"||!x(r))&&(p="",w())});const se=([e,t])=>{let r="",o="";const n=["icon",t];let s=[0,0];switch(e){case u.Quarter:s=[50,50];break;case u.QuarterCenter:s=[50,50],M(t)?o+="top: 25%;":o+="left: 25%;";break;case u.Half:{s=[100,50],n.push("s1/2");break}case u.TwoThird:s=[100,75],n.push("s2/3");break;case u.OneThird:s=[100,25],n.push("s1/3");break;case u.PercentSquare60:s=[60,60];break;case u.Full:s=[100,100];break;case u.FullBright:s=[100,100],n.push("bright");break}switch(t){case i.Next:r="\u2B05";break;case i.ResizeX:r="\u2194";break;case i.ResizeY:r="\u2195";break}return M(t)?s.reverse():!U(t)&&t!==i.IncreaseCenter&&t!==i.DecreaseCenter&&(o+="left: 0; top: 0;"),o+=`width: ${s[0]}%; height: ${s[1]}%;`,`<span class="${n.join(" ")}" style="${o}">${r}</span>`},oe=(e,t)=>{const r=t.map((o,n)=>`
<button onclick="bttHandler('${j(o)}')">
${se(o)}
${te(p,n)}
</button>
`);e.innerHTML=`<div id="list">${r.join("")}</div>`,F(e)};function w(){const e=document.getElementById("app");if(!(e instanceof HTMLDivElement)){alert("App element not found");return}oe(e,Y)}function ce(){W(),w(),N(P)}document.addEventListener("DOMContentLoaded",ce);
</script>
<style>
:root{--size: 50px;--padding: 3px}*{margin:0;padding:0}body{padding:0;margin:0;color:#eee;overflow:hidden;display:flex;justify-content:center;background:#f3f3f3}#list{display:grid;margin:var(--padding);grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-column-gap:var(--padding);grid-row-gap:var(--padding)}#list button{box-sizing:content-box;display:inline-flex;position:relative;background:transparent;width:calc(var(--size) - 2px);height:calc(var(--size) - 2px);border:2px solid #1a1a1a;font-size:calc(4px + var(--size) / 2)}#settings .icon-wrap{position:relative;width:calc(var(--size) / 2);height:calc(var(--size) / 2);border:1px solid #1a1a1a;font-size:14px}.icon{position:absolute;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center}.icon.bright{color:#1a1a1a;background:#fff}.top{left:0;top:0}.left{left:0;bottom:0}.right{right:0;top:0}.bottom{right:0;bottom:0}.middleX{left:25%;top:0}.increaseCenter,.decreaseCenter{left:20%;top:20%}.increaseCenter:before{content:"";position:absolute;width:2px;height:60%;background:#fff}.increaseCenter:after,.decreaseCenter:after{content:"";position:absolute;margin:2px;height:2px;width:60%;background:#fff}.middleX.s2\/3{left:12.5%}.middleX.s1\/3{left:37.5%}.middleX.s1\/2{left:25%}.middleY{top:25%;left:0}.middleY.s2\/3{top:12.5%}.middleY.s1\/3{top:37.5%}.middleY.s2\/3{top:25%}#list .active .icon,#list button:hover .icon{background:#2b719c;color:#2b719c!important}#settings{left:0;position:absolute}.settings-item{display:flex;margin-bottom:5px}.settings-item input{margin-left:10px}span.letter{position:absolute;background:#ffff00b5;font-size:10px;bottom:0;right:0;opacity:0;text-transform:uppercase}.letter-visible span.letter{opacity:1}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>