Dynamic buttons

js/term/buttons.js

@@ -0,0 +1,59 @@
+const { qs } = require('../utils')
+
+module.exports = function initButtons (input) {
+  let container = qs('#action-buttons')
+
+  // button labels
+  let labels = []
+
+  // button elements
+  let buttons = []
+
+  // add a button element
+  let pushButton = function pushButton () {
+    let button = document.createElement('button')
+    button.classList.add('action-button')
+    button.setAttribute('data-n', buttons.length)
+    buttons.push(button)
+    container.appendChild(button)
+
+    button.addEventListener('click', e => {
+      // might as well use the attribute ¯\_(ツ)_/¯
+      let index = +button.getAttribute('data-n')
+      input.sendButton(index)
+    })
+
+    return button
+  }
+
+  // remove a button element
+  let popButton = function popButton () {
+    let button = buttons.pop()
+    button.parentNode.removeChild(button)
+  }
+
+  // sync with DOM
+  let update = function updateButtons () {
+    console.log(labels)
+    if (labels.length > buttons.length) {
+      for (let i = buttons.length; i < labels.length; i++) {
+        pushButton()
+      }
+    } else if (buttons.length > labels.length) {
+      for (let i = labels.length; i < buttons.length; i++) {
+        popButton()
+      }
+    }
+
+    for (let i = 0; i < labels.length; i++) {
+      let label = labels[i].trim()
+      let button = buttons[i]
+      button.textContent = label || '\u00a0' // label or nbsp
+      if (!label) {
+        button.classList.add('inactive')
+      }
+    }
+  }
+
+  return { update, labels }
+}

js/term/index.js

@@ -6,6 +6,7 @@ const TermInput = require('./input')
 const TermUpload = require('./upload')
 const initSoftKeyboard = require('./soft_keyboard')
 const attachDebugScreen = require('./debug_screen')
+const initButtons = require('./buttons')
 
 /** Init the terminal sub-module - called from HTML */
 module.exports = function (opts) {
@@ -17,6 +18,13 @@ module.exports = function (opts) {
   screen.conn = conn
   input.termUpload = termUpload
 
+  const buttons = initButtons(input)
+  screen.on('button-labels', labels => {
+    // TODO: don't use pointers for this
+    buttons.labels.splice(0, buttons.labels.length, ...labels)
+    buttons.update()
+  })
+
   let showSplashTimeout = null
   let showSplash = (obj, delay = 250) => {
     clearTimeout(showSplashTimeout)

js/term/input.js

@@ -242,8 +242,8 @@ module.exports = function (conn, screen) {
   }
 
   /** Send a button event */
-  function sendButton (n) {
-    conn.send('b' + String.fromCharCode(n))
+  function sendButton (index) {
+    conn.send('b' + String.fromCharCode(index + 1))
   }
 
   const shouldAcceptEvent = function () {
@@ -354,13 +354,6 @@ module.exports = function (conn, screen) {
   function init (opts) {
     initKeys(opts)
 
-    // Button presses
-    $('#action-buttons button').forEach(s => {
-      s.addEventListener('click', function (evt) {
-        sendButton(+this.dataset['n'])
-      })
-    })
-
     // global mouse state tracking - for motion reporting
     window.addEventListener('mousedown', evt => {
       if (evt.button === 0) mb1 = 1
@@ -404,6 +397,7 @@ module.exports = function (conn, screen) {
 
     /** Send a literal string message */
     sendString,
+    sendButton,
 
     /** Enable alternate key modes (cursors, numpad, fn) */
     setAlts: function (cu, np, fn, crlf) {

js/term/screen_parser.js

@@ -193,11 +193,9 @@ module.exports = class ScreenParser {
         qs('title').textContent = `${text} :: ESPTerm`
 
       } else if (topic === TOPIC_BUTTONS) {
-
-        // TODO optimize this
         const count = du(strArray[ci++])
 
-        let buttons = []
+        let labels = []
         for (let j = 0; j < count; j++) {
           text = ''
           while (ci < strArray.length) {
@@ -205,17 +203,10 @@ module.exports = class ScreenParser {
             if (c === '\x01') break
             text += c
           }
-          buttons.push(text)
+          labels.push(text)
         }
 
-        $('#action-buttons button').forEach((button, i) => {
-          let label = buttons[i].trim()
-          // if empty string, use the "dim" effect and put nbsp instead to
-          // stretch the button vertically
-          button.innerHTML = label.length ? $.htmlEscape(label) : '&nbsp;'
-          button.style.opacity = label.length ? 1 : 0.2
-        })
-
+        this.screen.emit('button-labels', labels)
       } else if (topic === TOPIC_BELL) {
 
         this.screen.beep()

pages/term.php

@@ -55,13 +55,7 @@
 		<div class="screen-margin bottom"></div>
 	</div>
 
-	<div id="action-buttons">
-		<button data-n="1"></button><!--
-		--><button data-n="2"></button><!--
-		--><button data-n="3"></button><!--
-		--><button data-n="4"></button><!--
-		--><button data-n="5"></button>
-	</div>
+	<div id="action-buttons"></div>
 </div>
 
 <nav id="term-nav">

sass/pages/_term.scss

@@ -128,6 +128,10 @@ body.term {
 		&:focus {
 			outline: 0 none !important;
 		}
+
+		&.inactive {
+			opacity: 0.2;
+		}
 	}
 }