lipre

Stream text files for live (coding) representations
Log | Files | Refs

index-vanilla.html (3501B)

      1 <html>
      2 <head>
      3     <title>lipre</title>
      4 </head>
      5 <body>
      6     <div id="roomEntry">
      7         <input id="roomCode"/>
      8         <button onclick="present(getRoomCode())">Present</button>
      9         <button onclick="view(getRoomCode())">View</button>
     10         <div id="statusMessage"></div>
     11     </div>
     12     <textarea id="editor" style="display:none;height:100%; width:100%"></textarea>
     13     <pre><code id="viewer" style="display:none;height:100%; width:100%; white-space: pre"></code></pre>
     14     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
     15     <script>
     16         let getRoomCode = element => document.getElementById("roomCode").value
     17         let setStatus = (message) => document.getElementById("statusMessage").innerText = message
     18         let setCode = (message) => document.getElementById("viewer").innerText = message
     19         let getCode = (message) => document.getElementById("editor").value
     20         let hide = element => document.getElementById(element).style.display = "none"
     21         let show = element => document.getElementById(element).style.display = "inline"
     22         function connect(roomCode, present, openCallback) {
     23             let url = "ws://" + document.location.host + (present ? "/pres/" : "/view/") + roomCode
     24             window.ws = new WebSocket(url)
     25             window.files = {}
     26             ws.onclose = () => {
     27                 setStatus("No connection to the given room")
     28             }
     29             ws.onopen = () => {
     30                 setStatus("Connected")
     31                 openCallback()
     32             }
     33             ws.onmessage = (msg) => {
     34                 let fileReceived = JSON.parse(msg.data)
     35                 window.files[fileReceived.name] = fileReceived.contents
     36                 setCode(fileReceived.contents)
     37                 hljs.highlightBlock(document.getElementById("viewer"))
     38             }
     39         }
     40         function present(roomCode) {
     41             connect(roomCode, true, () => {
     42                 hide("roomEntry")
     43                 hide("viewer")
     44                 show("editor")
     45             })
     46         }
     47         function view(roomCode) {
     48             connect(roomCode, false, () => {
     49                 hide("roomEntry")
     50                 hide("editor")
     51                 show("viewer")
     52             })
     53         }
     54         // Allow direct connection with room code
     55         let qParams = new URLSearchParams(window.location.search)
     56         let roomCode = qParams.get("room")
     57         let presentFlag = qParams.get("present")
     58         if (roomCode) {
     59             if (presentFlag) {
     60                 present(roomCode)
     61             } else {
     62                 view(roomCode)
     63             }
     64         }
     65         let editor = document.getElementById("editor")
     66         editor.addEventListener("keyup", function(e) {
     67             if (e.keyCode === 13) {
     68                 window.ws.send(getCode())
     69             }
     70         })
     71         editor.addEventListener("keydown", function(e) {
     72             if (e.keyCode === 9 || e.which === 9) {
     73                 console.log("arsiontarst")
     74                 e.preventDefault();
     75                 var start = this.selectionStart;
     76                 var end = this.selectionEnd;
     77 
     78                 // set textarea value to: text before caret + tab + text after caret
     79                 this.value = this.value.substring(0, start) + "\t" + this.value.substring(end);
     80 
     81                 // put caret at right position again
     82                 this.selectionStart = this.selectionEnd = start + 1;
     83             }
     84         })
     85 
     86     </script>
     87 </body>
     88 </html>