From 2f0d0187a130be0a1a224b9f148a024956e9866d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Mon, 11 Sep 2017 18:22:22 +0200 Subject: [PATCH] add js error handler with notify balloon, fix file upload --- js/notif.js | 52 ++++++++++++++++++++++++++++++++--------- js/soft_keyboard.js | 7 +++++- js/term.js | 21 +++++++++++++---- js/term_upload.js | 50 ++++++++++++++++++++++++--------------- pages/term.php | 10 ++++---- sass/layout/_modal.scss | 2 +- 6 files changed, 100 insertions(+), 42 deletions(-) diff --git a/js/notif.js b/js/notif.js index a3ea609..38cbd4e 100644 --- a/js/notif.js +++ b/js/notif.js @@ -1,34 +1,64 @@ window.Notify = (function () { let nt = {} const sel = '#notif' + let $balloon - let hideTmeo1 // timeout to start hiding (transition) - let hideTmeo2 // timeout to add the hidden class + let timerHideBegin // timeout to start hiding (transition) + let timerHideEnd // timeout to add the hidden class + let timerCanCancel + let canCancel = false - nt.show = function (message, timeout) { - $(sel).html(message) - Modal.show(sel) + let stopTimeouts = function () { + clearTimeout(timerHideBegin) + clearTimeout(timerHideEnd) + } + + nt.show = function (message, timeout, isError) { + $balloon.toggleClass('error', isError === true) + $balloon.html(message) + Modal.show($balloon) + stopTimeouts() - clearTimeout(hideTmeo1) - clearTimeout(hideTmeo2) + if (undef(timeout) || timeout === null || timeout <= 0) { + timeout = 2500 + } - if (undef(timeout)) timeout = 2500 + timerHideBegin = setTimeout(nt.hide, timeout) - hideTmeo1 = setTimeout(nt.hide, timeout) + canCancel = false + timerCanCancel = setTimeout(function () { + canCancel = true + }, 500) } nt.hide = function () { let $m = $(sel) $m.removeClass('visible') - hideTmeo2 = setTimeout(function () { + timerHideEnd = setTimeout(function () { $m.addClass('hidden') }, 250) // transition time } nt.init = function () { - $(sel).on('click', function () { + $balloon = $(sel) + + // close by click outside + $(document).on('click', function () { + if (!canCancel) return nt.hide(this) }) + + // click caused by selecting, prevent it from bubbling + $balloon.on('click', function (e) { + e.stopImmediatePropagation() + return false + }) + + // stop fading if moused + $balloon.on('mouseenter', function () { + stopTimeouts() + $balloon.removeClass('hidden').addClass('visible') + }) } return nt diff --git a/js/soft_keyboard.js b/js/soft_keyboard.js index 5519468..5829033 100644 --- a/js/soft_keyboard.js +++ b/js/soft_keyboard.js @@ -20,13 +20,18 @@ window.initSoftKeyboard = function (screen, input) { screen.on('cursor-moved', updateInputPosition) - window.kbOpen = function openSoftKeyboard (open) { + let kbOpen = function (open) { keyboardOpen = open updateInputPosition() if (open) keyInput.focus() else keyInput.blur() } + qs('#term-kb-open').addEventListener('click', function () { + kbOpen(true) + return false + }) + // Chrome for Android doesn't send proper keydown/keypress events with // real key values instead of 229 “Unidentified,” so here's a workaround // that deals with the input composition events. diff --git a/js/term.js b/js/term.js index 8a336aa..ed5c36e 100644 --- a/js/term.js +++ b/js/term.js @@ -1,15 +1,21 @@ /** Init the terminal sub-module - called from HTML */ window.termInit = function (labels, theme) { - const screen = new window.TermScreen() - const conn = window.Conn(screen) - const input = window.Input(conn) - const termUpload = window.TermUpl(conn, input) + const screen = new TermScreen() + const conn = Conn(screen) + const input = Input(conn) + const termUpload = TermUpl(conn, input) screen.input = input conn.init() input.init() termUpload.init() + Notify.init() + + window.onerror = function (errorMsg, file, line, col) { + Notify.show(`JS ERROR!
${errorMsg}
at ${file}:${line}:${col}`, 10000, true) + return false + } qs('#screen').appendChild(screen.canvas) screen.load(labels, theme) // load labels and theme @@ -23,7 +29,7 @@ window.termInit = function (labels, theme) { fitScreenIfNeeded() window.addEventListener('resize', fitScreenIfNeeded) - window.toggleFitScreen = function () { + let toggleFitScreen = function () { fitScreen = !fitScreen const resizeButtonIcon = qs('#resize-button-icon') if (fitScreen) { @@ -35,6 +41,11 @@ window.termInit = function (labels, theme) { } fitScreenIfNeeded() } + + qs('#term-fit-screen').addEventListener('click', function () { + toggleFitScreen() + return false + }) } window.initSoftKeyboard(screen, input) diff --git a/js/term_upload.js b/js/term_upload.js index 0c188f2..c010c55 100644 --- a/js/term_upload.js +++ b/js/term_upload.js @@ -12,25 +12,25 @@ window.TermUpl = function (conn, input) { // sending a super-ling string through the socket is not a good idea const MAX_LINE_LEN = 128 - function fuOpen () { - fuStatus('Ready...') - Modal.show('#fu_modal', onClose) + function openUploadDialog () { + updateStatus('Ready...') + Modal.show('#fu_modal', onDialogClose) $('#fu_form').toggleClass('busy', false) input.blockKeys(true) } - function onClose () { + function onDialogClose () { console.log('Upload modal closed.') clearTimeout(fuTout) line_i = 0 input.blockKeys(false) } - function fuStatus (msg) { + function updateStatus (msg) { qs('#fu_prog').textContent = msg } - function fuSend () { + function startUpload () { let v = qs('#fu_text').value if (!v.length) { fuClose() @@ -55,11 +55,11 @@ window.TermUpl = function (conn, input) { }[qs('#fu_crlf').value] $('#fu_form').toggleClass('busy', true) - fuStatus('Starting...') - fuSendLine() + updateStatus('Starting...') + uploadLine() } - function fuSendLine () { + function uploadLine () { if (!$('#fu_modal').hasClass('visible')) { // Modal is closed, cancel return @@ -67,7 +67,7 @@ window.TermUpl = function (conn, input) { if (!conn.canSend()) { // postpone - fuTout = setTimeout(fuSendLine, 1) + fuTout = setTimeout(uploadLine, 1) return } @@ -85,16 +85,16 @@ window.TermUpl = function (conn, input) { } if (!input.sendString(chunk)) { - fuStatus('FAILED!') + updateStatus('FAILED!') return } let all = lines.length - fuStatus(line_i + ' / ' + all + ' (' + (Math.round((line_i / all) * 1000) / 10) + '%)') + updateStatus(line_i + ' / ' + all + ' (' + (Math.round((line_i / all) * 1000) / 10) + '%)') if (lines.length > line_i || inline_pos > 0) { - fuTout = setTimeout(fuSendLine, send_delay_ms) + fuTout = setTimeout(uploadLine, send_delay_ms) } else { closeWhenReady() } @@ -103,10 +103,10 @@ window.TermUpl = function (conn, input) { function closeWhenReady () { if (!conn.canSend()) { // stuck in XOFF still, wait to process... - fuStatus('Waiting for Tx buffer...') + updateStatus('Waiting for Tx buffer...') setTimeout(closeWhenReady, 100) } else { - fuStatus('Done.') + updateStatus('Done.') // delay to show it setTimeout(function () { fuClose() @@ -138,9 +138,21 @@ window.TermUpl = function (conn, input) { console.log('Loading file...') reader.readAsText(file) }, false) - }, - close: fuClose, - start: fuSend, - open: fuOpen + + qs('#term-fu-open').addEventListener('click', function () { + openUploadDialog() + return false + }) + + qs('#term-fu-start').addEventListener('click', function () { + startUpload() + return false + }) + + qs('#term-fu-close').addEventListener('click', function () { + fuClose() + return false + }) + } } } diff --git a/pages/term.php b/pages/term.php index 85de910..16130c8 100644 --- a/pages/term.php +++ b/pages/term.php @@ -33,8 +33,8 @@

-   -   +   +   Upload:
@@ -60,9 +60,9 @@