diff --git a/src/snek/static/container.js b/src/snek/static/container.js index a17b37a..edcdf4d 100644 --- a/src/snek/static/container.js +++ b/src/snek/static/container.js @@ -36,6 +36,11 @@ export class Container extends EventHandler{ this._container.classList.toggle("hidden") this.refresh() } + fit(){ + this._fitAddon.fit(); + + } + constructor(channelUid,log){ super() diff --git a/src/snek/templates/app.html b/src/snek/templates/app.html index b9baa0d..d3c35ef 100644 --- a/src/snek/templates/app.html +++ b/src/snek/templates/app.html @@ -60,7 +60,59 @@ import { app } from "/app.js"; import { Container } from "/container.js"; let prevKey = null; - document.addEventListener("keydown", () => { + + function toggleDevelopmentMode(){ + const headerElement = document.querySelector('header'); + headerElement.style.display = 'none'; + const sidebarElement = document.querySelector('aside'); + + sidebarElement.style.position = 'fixed' + sidebarElement.style.width= '10%' + sidebarElement.style.top = '0px' + sidebarElement.style.left='0px' + sidebarElement.style.height='100%' + + // sidebarElement.style.display = 'none'; +const containerElement = document.querySelector('#terminal'); +containerElement.style.position = 'fixed'; +containerElement.style.width = '40%'; +containerElement.style.height = '100%'; +containerElement.style.left = '10%'; +containerElement.style.top = '0px'; +//window.container.resizeToPercentage(document.body,'50%','100%') + +const messagesElement = document.querySelector('.chat-area'); +messagesElement.style.position = 'fixed'; +messagesElement.style.width = '40%'; +messagesElement.style.height = '100%'; +messagesElement.style.left = '50%'; +messagesElement.style.top = '0px'; + +const messageList = document.querySelector('message-list') +messageList.scrollToBottom() + +window.container.fit() + +app.starField.renderWord("H4x0r 1337") +} + + {% if channel %} + app.channelUid = '{{ channel.uid.value }}' + window.getContainer = async function (){ + if(window.c) return window.c + window.c = new Container(app.channelUid,false) + window.c.start() + window.t = document.querySelector("#terminal") + window.t.classList.toggle("hidden") + window.c.render(window.t) + + + return window.c + } + {% endif %} + + + document.addEventListener("keydown", async() => { if(prevKey == "Escape"){ document.querySelector("chat-input").querySelector("textarea").value = ""; } @@ -70,10 +122,15 @@ } if(event.key == "." && event.ctrlKey){ event.preventDefault(); - if(window.container){ - - window.container.terminal.element.hidden = !window.container.terminal.element.hidden + if(!window.c) + { + window.getContainer() + } + if(window.c){ + toggleDevelopmentMode() + //window.container.terminal.element.hidden = !window.container.terminal.element.hidden + } } @@ -84,17 +141,11 @@ let textAreas = document.querySelectorAll("textarea") textAreas.forEach(textArea => { if(document.activeElement != textArea) - setTimeout(() => textArea.focus(), 300) + setTimeout(() => textArea.focus(), 10) }) } }) - {% if channel %} - app.channelUid = '{{ channel.uid.value }}' - window.getContainer = function(){ - return new Container(app.channelUid,false) - } - {% endif %} let installPrompt = null window.addEventListener("beforeinstallprompt", (e) => { //e.preventDefault(); diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html index 74791a7..89ca4cc 100644 --- a/src/snek/templates/web.html +++ b/src/snek/templates/web.html @@ -30,7 +30,6 @@ {{ message.html }} {% endautoescape %} {% endfor %} -