Add iOS keyboard shortcut bar

7 years ago · cc28a69d85
parent 6c6424877c
commit cc28a69d85
4 changed files with 65 additions and 4 deletions
--- a/js/term/soft_keyboard.js
+++ b/js/term/soft_keyboard.js
@ -4,6 +4,12 @@ module.exports = function (screen, input) {
  const keyInput = qs('#softkb-input')
  if (!keyInput) return // abort, we're not on the terminal page

+  const shortcutBar = document.createElement('div')
+  shortcutBar.id = 'keyboard-shortcut-bar'
+  if (navigator.userAgent.match(/iPad|iPhone|iPod/)) {
+    qs('#screen').appendChild(shortcutBar)
+  }
+
  let keyboardOpen = false

  // moves the input to where the cursor is on the canvas.
@ -19,9 +25,13 @@ module.exports = function (screen, input) {
  keyInput.addEventListener('focus', () => {
    keyboardOpen = true
    updateInputPosition()
+    shortcutBar.classList.add('open')
  })

-  keyInput.addEventListener('blur', () => (keyboardOpen = false))
+  keyInput.addEventListener('blur', () => {
+    keyboardOpen = false
+    shortcutBar.classList.remove('open')
+  })

  screen.on('cursor-moved', updateInputPosition)

@ -104,4 +114,30 @@ module.exports = function (screen, input) {
  })

  screen.on('open-soft-keyboard', () => keyInput.focus())
+
+  // shortcut bar
+  const shortcuts = {
+    Tab: 0x09,
+    '←': 0x25,
+    '↓': 0x28,
+    '↑': 0x26,
+    '→': 0x27,
+    '^C': { which: 0x43, ctrlKey: true }
+  }
+
+  for (const shortcut in shortcuts) {
+    const button = document.createElement('button')
+    button.classList.add('shortcut-button')
+    button.textContent = shortcut
+    shortcutBar.appendChild(button)
+
+    const key = shortcuts[shortcut]
+    button.addEventListener('click', e => {
+      e.preventDefault()
+      let fakeEvent = key
+      if (typeof key === 'number') fakeEvent = { which: key }
+      fakeEvent.preventDefault = () => {}
+      input.handleKeyDown(fakeEvent)
+    })
+  }
 }
--- a/pages/_head.php
+++ b/pages/_head.php
@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
 	<title><?= $_GET['PAGE_TITLE'] ?></title>
 	<link href="/css/app.<?= GIT_HASH ?>.css" rel="stylesheet">
 	<script src="/js/app.<?= GIT_HASH ?>.js"></script>
--- a/pages/term.php
+++ b/pages/term.php
@ -41,6 +41,7 @@
 </div>

 <h1 id="screen-title"><!-- Screen title is loaded here by JS --></h1>
+<a href="#" id="term-fit-screen" class="mq-tablet-max"><i id="resize-button-icon" class="icn-resize-small"></i></a>

 <div id="term-wrap">
 	<div id="screen">
@ -60,8 +61,7 @@
 </div>

 <nav id="term-nav">
-	<a href="#" id="term-fit-screen" class="mq-tablet-max"><i id="resize-button-icon" class="icn-resize-small"></i></a><!--
-	--><a href="#" id="term-kb-open" class="mq-tablet-max"><i class="icn-keyboard"></i><span><?= tr('term_nav.keybd') ?></span></a><!--
+	<a href="#" id="term-kb-open" class="mq-tablet-max"><i class="icn-keyboard"></i><span><?= tr('term_nav.keybd') ?></span></a><!--
 	--><a href="#" id="term-fu-open"><i class="icn-download"></i><span><?= tr('term_nav.upload') ?></span></a><!--
 	--><a href="<?= url('cfg_term') ?>" class="x-term-conf-btn"><i class="icn-configure"></i><span><?= tr('term_nav.config') ?></span></a><!--
 	--><a href="<?= url('cfg_wifi') ?>" class="x-term-conf-btn"><i class="icn-wifi"></i><span><?= tr('term_nav.wifi') ?></span></a><!--
--- a/sass/pages/_term.scss
+++ b/sass/pages/_term.scss
@ -207,6 +207,31 @@ body.term {
 	}
 }

+// shortcut bar on iOS
+#keyboard-shortcut-bar {
+	border-radius: 4px;
+	width: calc(100vw - 20px);
+	background: #d1d5db;
+	padding: 5px 10px;
+	overflow-x: auto;
+
+	&:not(.open) {
+		display: none;
+	}
+
+	.shortcut-button {
+		background: #fff;
+		color: #000;
+		padding: 10px 20px;
+		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+		text-shadow: none;
+		border-radius: 4px;
+		margin: 0 10px 0 0;
+		font-family: -apple-system, sans-serif;
+		min-width: 2em;
+	}
+}
+
 // Attributes
 .bold {
 	font-weight: bold !important;