slidershim/src-tauri/res/www/app.js

const throttle=(e,t)=>{var a=!0,s=null;return function n(){var o=this;a?(a=!1,setTimeout(function(){a=!0,s&&n.apply(o)},t),s?(e.apply(this,s),s=null):e.apply(this,arguments)):s=arguments}};var keys=document.getElementsByClassName("key"),airKeys=[],midline=0,touchKeys=[],allKeys=[],topKeys=airKeys,bottomKeys=touchKeys;const compileKey=e=>{const t=e.previousElementSibling,a=e.nextElementSibling;return{top:e.offsetTop,bottom:e.offsetTop+e.offsetHeight,left:e.offsetLeft,right:e.offsetLeft+e.offsetWidth,almostLeft:t?e.offsetLeft+e.offsetWidth/4:-99999,almostRight:a?e.offsetLeft+3*e.offsetWidth/4:99999,kflag:parseInt(e.dataset.kflag)+(parseInt(e.dataset.air)?32:0),isAir:!!parseInt(e.dataset.air),prevKeyRef:t,prevKeyKflag:t?parseInt(t.dataset.kflag)+(parseInt(t.dataset.air)?32:0):null,nextKeyRef:a,nextKeyKflag:a?parseInt(a.dataset.kflag)+(parseInt(a.dataset.air)?32:0):null,ref:e}},isInside=(e,t,a)=>a.left<=e&&e<a.right&&a.top<=t&&t<a.bottom,compileKeys=()=>{keys=document.getElementsByClassName("key"),airKeys=[],touchKeys=[];for(var e=0;e<keys.length;e++){const t=compileKey(keys[e]);t.isAir?airKeys.push(t):touchKeys.push(t),allKeys.push(t)}config.invert?(topKeys=touchKeys,bottomKeys=airKeys,midline=touchKeys[0].bottom):(topKeys=airKeys,bottomKeys=touchKeys,midline=touchKeys[0].top)},getKey=(e,t)=>{if(t<midline){for(var a=0;a<topKeys.length;a++)if(isInside(e,t,topKeys[a]))return topKeys[a]}else for(a=0;a<bottomKeys.length;a++)if(isInside(e,t,bottomKeys[a]))return bottomKeys[a];return null};var lastState=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];function updateTouches(e){try{e.preventDefault();var t=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];throttledRequestFullscreen();for(var a=0;a<e.touches.length;a++){const s=e.touches[a],n=s.clientX,o=s.clientY,r=getKey(n,o);r&&(setKey(t,r.kflag,r.isAir),r.isAir||(n<r.almostLeft&&setKey(t,r.prevKeyKflag,!1),r.almostRight<n&&setKey(t,r.nextKeyKflag,!1)))}for(a=0;a<allKeys.length;a++){const e=allKeys[a],s=e.kflag;t[s]!==lastState[s]&&(t[s]?e.ref.setAttribute("data-active",""):e.ref.removeAttribute("data-active"))}t!==lastState&&throttledSendKeys(t),lastState=t}catch(e){alert(e)}}const throttledUpdateTouches=throttle(updateTouches,10),setKey=(e,t,a)=>{var s=t;e[s]&&!a&&s++,e[s]=1},sendKeys=e=>{wsConnected&&ws.send("b"+e.join(""))},throttledSendKeys=throttle(sendKeys,10);var ws=null,wsTimeout=0,wsConnected=!1;const wsConnect=()=>{(ws=new WebSocket("ws://"+location.host+"/ws")).binaryType="arraybuffer",ws.onopen=(()=>{ws.send("alive?")}),ws.onmessage=(e=>{e.data.byteLength?updateLed(e.data):"alive"==e.data&&(wsTimeout=0,wsConnected=!0)})},wsWatch=()=>{if(wsTimeout++>2)return wsTimeout=0,ws.close(),wsConnected=!1,void wsConnect();wsConnected&&ws.send("alive?")};var canvas=document.getElementById("canvas"),canvasCtx=canvas.getContext("2d"),canvasData=canvasCtx.getImageData(0,0,33,1);const setupLed=()=>{for(var e=0;e<33;e++)canvasData.data[4*e+3]=255};setupLed();const updateLed=e=>{const t=new Uint8Array(e);for(var a=0;a<31;a++)canvasData.data[4*a+4]=t[3*a],canvasData.data[4*a+5]=t[3*a+1],canvasData.data[4*a+6]=t[3*a+2];canvasData.data[0]=t[0],canvasData.data[1]=t[1],canvasData.data[2]=t[2],canvasData.data[128]=t[90],canvasData.data[129]=t[91],canvasData.data[130]=t[92],canvasCtx.putImageData(canvasData,0,0)},fs=document.getElementById("fullscreen"),requestFullscreen=()=>{!document.fullscreenElement&&screen.height<=1024&&(fs.requestFullscreen?fs.requestFullscreen():fs.mozRequestFullScreen?fs.mozRequestFullScreen():fs.webkitRequestFullScreen&&fs.webkitRequestFullScreen())},throttledRequestFullscreen=throttle(requestFullscreen,3e3),cnt=document.getElementById("main");cnt.addEventListener("touchstart",updateTouches),cnt.addEventListener("touchmove",updateTouches),cnt.addEventListener("touchend",updateTouches);const readConfig=e=>{var t="";e.invert&&(t+=".container, .air-container {flex-flow: column-reverse nowrap;} ");var a=e.bgColor||"rbga(0, 0, 0, 0.9)";e.bgImage?t+=`#fullscreen {background: ${a} url("${e.bgImage}") fixed center / cover!important; background-repeat: no-repeat;} `:t+=`#fullscreen {background: ${a};} `,"number"==typeof e.ledOpacity&&(0===e.ledOpacity?t+="#canvas {display: none} ":t+=`#canvas {opacity: ${e.ledOpacity}} `),"string"==typeof e.keyColor&&(t+=`.key[data-active] {background-color: ${e.keyColor};} `),"string"==typeof e.keyColor&&(t+=`.key.air[data-active] {background-color: ${e.lkeyColor};} `),"string"==typeof e.keyBorderColor&&(t+=`.key {border: 1px solid ${e.keyBorderColor};} `),e.keyColorFade&&"number"==typeof e.keyColorFade&&(t+=`.key:not([data-active]) {transition: background ${e.keyColorFade}ms ease-out;} `),"number"==typeof e.keyHeight&&(0===e.keyHeight?t+=".touch-container {display: none;} ":t+=`.touch-container {flex: ${e.keyHeight};} `),"number"==typeof e.lkeyHeight&&(0===e.lkeyHeight?t+=".air-container {display: none;} ":t+=`.air-container {flex: ${e.keyHeight};} `);var s=document.createElement("style");s.innerHTML=t,document.head.appendChild(s)},initialize=()=>{readConfig(config),compileKeys(),wsConnect(),setInterval(wsWatch,1e3)};readConfig(config),compileKeys(),wsConnect(),setInterval(wsWatch,1e3),window.onresize=compileKeys;