Mobile terminal improvements

Fixes #2814 Closes #2478

TNE committed Aug 20, 2021 at 14:41 UTC 89196091b9924d2ec022d80182aa23a4642393e4
1 file changed +38 -15
views/default-mobile.handlebars
+38 -15
@@ -1,4 +1,4 @@
1 -<!DOCTYPE html>
1 +<!DOCTYPE html>
2 <html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8">
@@ -866,7 +866,7 @@
866 <img id="deskkeybutton2a" src="images/mobile-desk-keyboard-open.png" class="deskButton" style="top:210px;display:none" onclick="toggleKeyboard()" />
867 <img id="deskkeybutton2b" src="images/mobile-desk-keyboard-close.png" class="deskButton" style="top:210px;display:none" onclick="toggleKeyboard()" />
868 <div style="position:absolute;top:0;left:0;z-index:200;opacity:0;width:1px;height:1px">
869 - <input id="softKeyboard" autocomplete="off" type="password" style="z-index:200;opacity:0;width:1px;height:1px" onfocus="keyboardFocusChange()" onblur="keyboardFocusChange()" onkeypress="return ondeskkeypress(event,1)" onkeydown="return ondeskkeydown(event,1)" onkeyup="return ondeskkeyup(event,1)" />
869 + <input id="softKeyboard" autocapitalize="off" autocomplete="off" type="text" spellcheck="false" style="z-index:200;opacity:0;width:1px;height:1px" onfocus="keyboardFocusChange()" onblur="keyboardFocusChange()" />
870 </div>
871 <div id="deskButtonMenu" style="display:none;position:absolute;top:10px;left:10px;right:55px;bottom:10px;z-index:1000"></div>
872 <div id=p10desktop style="overflow:hidden;position:absolute;top:55px;bottom:0px;width:100%;display:none">
@@ -912,7 +912,7 @@
912 <div id="termButtonMenu" style="display:none;position:absolute;top:10px;left:10px;right:55px;bottom:10px;z-index:1000"></div>
913 <div id=p10terminal style="overflow:hidden;position:absolute;top:55px;bottom:0px;width:100%;display:none;background-color:#333">
914 <div id=termTable style="position:absolute;top:0;bottom:0;left:0;right:0">
915 - <div id="termarea1" style="position:absolute;top:0;height:32px;left:0;right:0">
915 + <div id="termarea1">
916 <div class="areaHead" style="line-height:24px">
917 <div class="toright2">
918 <input type=button id=termFullScreen value="Full Screen" onclick=deskToggleFull(event) onkeypress="return false" onkeydown="return false" disabled="disabled" style="height:28px;margin-right:3px;">
@@ -925,12 +925,12 @@
925 </div>
926 </div>
927 </div>
928 - <div id="termarea3" style="position:absolute;top:32px;left:0;bottom:32px" cellpadding=0 cellspacing=0>
929 - <div id="termarea3x">
930 - <div id="termarea3xdiv" style="overflow:hidden"></div>
928 + <div id="termarea3" style="width:100%;height: calc(100% - 60px);" cellpadding=0 cellspacing=0>
929 + <div id="termarea3x" style="width:100%;height:100%">
930 + <div style="width:100%;height:100%" id="termarea3xdiv"></div>
931 </div>
932 </div>
933 - <div id="termarea4" style="position:absolute;bottom:0;height:32px;left:0;right:0">
933 + <div id="termarea4" style="position:relative;height:32px;">
934 <div class="areaFoot">
935 <div class="toright2"></div>
936 <div style="height:28px">
@@ -1243,8 +1243,8 @@
1243 var deskKeyboardShortcuts = [];
1244 var nightMode = setNightMode();
1245 var xterm = null;
1246 - //var xtermfit = null;
1247 - //var xtermResizeTimer = null;
1246 + var xtermfit = null;
1247 + var xtermResizeTimer = null;
1248
1249 // Console Message Display Timers
1250 var p11DeskConsoleMsgTimer = null;
@@ -2871,14 +2871,16 @@
2871 }
2872 if (terminal && !xxdialogMode && (xxcurrentView == 10) && (currentDevicePanel == 5) && (gotKeyPressEvent == false) && (t !== 1)) {
2873 if (e.altKey == true) { return true; }
2874 + var inputStr = Q('softKeyboard').value;
2875 + Q('softKeyboard').value = '';
2876 if (terminal.urlname == 'sshterminalrelay.ashx') {
2877 // SSH
2876 - terminal.socket.send('~' + Q('softKeyboard').value);
2878 + terminal.socket.send('~' + inputStr);
2879 } else {
2880 // Agent
2879 - terminal.sendText(Q('softKeyboard').value);
2881 + if (inputStr)
2882 + terminal.sendText(inputStr);
2883 }
2881 - Q('softKeyboard').value = '';
2884 return false;
2885 }
2886 }
@@ -4429,6 +4431,7 @@
4431 QS('termarea3').bottom = null;
4432 QS('termarea3').right = null;
4433 QS('termarea3')['padding-right'] = '55px';
4434 + QS('termarea3')['height'] = '100%';
4435 }
4436 QS('body')['background-color'] = '#000';
4437 QS('p10')['background-color'] = '#000';
@@ -4457,6 +4460,7 @@
4460 QS('termarea3').bottom = '32px';
4461 //QS('termarea3').right = '0px';
4462 QS('termarea3')['padding-right'] = null;
4463 + QS('termarea3')['height'] = 'calc(100% - 60px)';
4464 }
4465 QS('body')['background-color'] = nightMode ? '#000' : '#FFF';
4466 QS('p10')['background-color'] = null;
@@ -4694,6 +4698,18 @@
4698 }
4699 }
4700
4701 + // Send the new terminal size to the agent
4702 + function xTermSendResize() {
4703 + xtermResizeTimer = null;
4704 + if ((xterm != null) && (terminal != null) && (terminal.sendCtrlMsg != null)) {
4705 + if (terminal.urlname == 'sshterminalrelay.ashx') {
4706 + terminal.socket.send(JSON.stringify({ action: 'resize', cols: xterm.cols, rows: xterm.rows, width: Q('termarea3xdiv').offsetWidth, height: Q('termarea3xdiv').offsetHeight }));
4707 + } else {
4708 + terminal.sendCtrlMsg(JSON.stringify({ ctrlChannel: '102938', type: 'termsize', cols: xterm.cols, rows: xterm.rows }));
4709 + }
4710 + }
4711 + }
4712 +
4713 function connectTerminal(e, contype, options) {
4714 p12clearConsoleMsg();
4715 if (!terminal) {
@@ -4736,14 +4752,21 @@
4752 // Setup the terminal with auto-fit
4753 if (xterm != null) { xterm.dispose(); }
4754 xterm = new Terminal();
4755 + xtermfit = new FitAddon.FitAddon();
4756 + if (xtermfit) { xterm.loadAddon(xtermfit); }
4757 xterm.setOption('scrollback', 0);
4758 //xterm.setOption('fontSize', 15);
4759 xterm.open(Q('termarea3xdiv'));
4760 xterm.onData(function (data) { if (terminal.urlname == 'sshterminalrelay.ashx') { terminal.socket.send('~' + data); } else { terminal.sendText(data); } })
4743 - xterm.resize(80,34);
4761 + if (xtermfit) { xtermfit.fit(); }
4762 + xterm.onResize(function (size) {
4763 + // Despam resize
4764 + if (xtermResizeTimer) clearTimeout(xtermResizeTimer);
4765 + xtermResizeTimer = setTimeout(xTermSendResize, 200);
4766 + });
4767
4768 // Remove terminal textarea and scrollbar.
4746 - document.getElementsByClassName('xterm-helper-textarea')[0].style.display = 'none';
4769 + document.getElementsByClassName('xterm-helper-textarea')[0].onfocus = () => { xterm.blur(); if (!fullscreen) toggleKeyboard(); };
4770 document.getElementsByClassName('xterm-viewport')[0].style.overflow = 'hidden';
4771
4772 // Setup a terminal tunnel to the agent
@@ -6451,7 +6474,7 @@
6474 function getNodeAmtVersion(node) { if ((node == null) || (node.intelamt == null) || (typeof node.intelamt.ver != 'string')) return 0; var verSplit = node.intelamt.ver.split('.'); if (verSplit.length < 2) return 0; return parseInt(verSplit[0]) + (parseInt(verSplit[1]) / 100); }
6475 function putstore(name, val) { try { if ((typeof (localStorage) === 'undefined') || (localStorage.getItem(name) == val)) return; if (val == null) { localStorage.removeItem(name); } else { localStorage.setItem(name, val); } } catch (e) { } if (name[0] != '_') { var s = {}; for (var i = 0, len = localStorage.length; i < len; ++i) { var k = localStorage.key(i); if (k[0] != '_') { s[k] = localStorage.getItem(k); } } meshserver.send({ action: 'userWebState', state: JSON.stringify(s) }); } }
6476 function getstore(name, val) { try { if (typeof (localStorage) === 'undefined') return val; var v = localStorage.getItem(name); if ((v == null) || (v == null)) return val; return v; } catch (e) { return val; } }
6454 - function center() { onDevicesScroll(); QS('dialog').left = ((((getDocWidth() - 300) / 2)) + 'px'); deskAdjust(); if (currentNode != null) { drawDeviceTimeline(); } }
6477 + function center() { if (xtermfit) xtermfit.fit(); onDevicesScroll(); QS('dialog').left = ((((getDocWidth() - 300) / 2)) + 'px'); deskAdjust(); if (currentNode != null) { drawDeviceTimeline(); } }
6478 function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
6479 function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
6480 function getDocWidth() { if (window.innerWidth) return window.innerWidth; if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientWidth != 0) return document.documentElement.clientWidth; return document.getElementsByTagName('body')[0].clientWidth; }