Make badge and debug extend ui

Permits further ui extension
This commit is contained in:
Arlo Breault 2019-05-07 14:36:23 -04:00
parent 5b18729e77
commit 2b1852c1a5
6 changed files with 49 additions and 52 deletions

View file

@ -44,17 +44,23 @@ snowflake = null
# log to console. # log to console.
log = (msg) -> log = (msg) ->
console.log 'Snowflake: ' + msg console.log 'Snowflake: ' + msg
snowflake?.ui?.log msg snowflake?.ui.log msg
dbg = (msg) -> log msg if DEBUG or snowflake.ui?.debug dbg = (msg) -> log msg if DEBUG or (snowflake?.ui instanceof DebugUI)
### ###
Entry point. Entry point.
### ###
init = (isNode) -> init = () ->
# Hook up to the debug UI if available. ui = null
ui = if isNode then null else new UI() if (document.getElementById('badge') != null)
ui = new BadgeUI()
else if (document.getElementById('status') != null)
ui = new DebugUI()
else
ui = new UI()
silenceNotifications = Params.getBool(query, 'silent', false) silenceNotifications = Params.getBool(query, 'silent', false)
broker = new Broker BROKER broker = new Broker BROKER
snowflake = new Snowflake broker, ui snowflake = new Snowflake broker, ui
@ -80,4 +86,4 @@ window.onunload = ->
pair.close() for pair in snowflake.proxyPairs pair.close() for pair in snowflake.proxyPairs
null null
window.onload = init.bind null, false window.onload = init

View file

@ -4,6 +4,8 @@ WebRTC shims for multiple browsers.
if module?.exports if module?.exports
window = {} window = {}
document =
getElementById: () -> null,
location = '' location = ''
if not TESTING? or not TESTING if not TESTING? or not TESTING
@ -16,10 +18,11 @@ if module?.exports
WebSocket = require 'ws' WebSocket = require 'ws'
{ XMLHttpRequest } = require 'xmlhttprequest' { XMLHttpRequest } = require 'xmlhttprequest'
process.nextTick () -> init true process.nextTick () -> init
else else
window = this window = this
document = window.document
location = window.location.search.substr(1) location = window.location.search.substr(1)
PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||

View file

@ -55,11 +55,11 @@ class Snowflake
countdown = (msg, sec, skip) => countdown = (msg, sec, skip) =>
if not skip then dbg msg if not skip then dbg msg
if sec > 0 if sec > 0
@ui?.setStatus msg + ' (Polling in ' + sec + ' seconds...)' @ui.setStatus msg + ' (Polling in ' + sec + ' seconds...)'
sec-- sec--
setTimeout((-> countdown(msg, sec, true)), 1000) setTimeout((-> countdown(msg, sec, true)), 1000)
else else
@ui?.setStatus msg @ui.setStatus msg
findClients() findClients()
# Poll broker for clients. # Poll broker for clients.
findClients = => findClients = =>
@ -70,7 +70,7 @@ class Snowflake
return return
msg = 'Polling for client ... ' msg = 'Polling for client ... '
msg += '[retries: ' + @retries + ']' if @retries > 0 msg += '[retries: ' + @retries + ']' if @retries > 0
@ui?.setStatus msg @ui.setStatus msg
recv = @broker.getClientOffer pair.id recv = @broker.getClientOffer pair.id
recv.then (desc) => recv.then (desc) =>
@receiveOffer pair, desc @receiveOffer pair, desc

View file

@ -17,11 +17,7 @@ class WebSocket
@bufferedAmount = 0 @bufferedAmount = 0
send: (data) -> send: (data) ->
log = -> log = ->
class FakeUI fakeUI = new UI()
log: ->
setActive: ->
setStatus: ->
fakeUI = new FakeUI()
class FakeBroker class FakeBroker
getClientOffer: -> new Promise((F,R) -> {}) getClientOffer: -> new Promise((F,R) -> {})
# Fake snowflake to interact with # Fake snowflake to interact with

View file

@ -3,7 +3,7 @@ jasmine tests for Snowflake UI
### ###
document = document =
getElementById: (id) -> getElementById: (id) -> {}
describe 'UI', -> describe 'UI', ->
@ -11,9 +11,8 @@ describe 'UI', ->
spyOn(document, 'getElementById').and.callFake (id) -> spyOn(document, 'getElementById').and.callFake (id) ->
return null if 'badge' == id return null if 'badge' == id
return {} return {}
u = new UI() u = new DebugUI()
expect(u.debug).toBe true expect(document.getElementById.calls.count()).toEqual 2
expect(document.getElementById.calls.count()).toEqual 3
expect(u.$status).not.toBeNull() expect(u.$status).not.toBeNull()
expect(u.$msglog).not.toBeNull() expect(u.$msglog).not.toBeNull()
@ -21,49 +20,35 @@ describe 'UI', ->
spyOn(document, 'getElementById').and.callFake (id) -> spyOn(document, 'getElementById').and.callFake (id) ->
return {} if 'badge' == id return {} if 'badge' == id
return null return null
u = new UI() u = new BadgeUI()
expect(u.debug).toBe false
expect(document.getElementById).toHaveBeenCalled() expect(document.getElementById).toHaveBeenCalled()
expect(document.getElementById.calls.count()).toEqual 1 expect(document.getElementById.calls.count()).toEqual 1
expect(u.$status).toBeNull() expect(u.$badge).not.toBeNull()
expect(u.$msglog).toBeNull()
it 'sets status message only when in debug mode', -> it 'sets status message when in debug mode', ->
u = new UI() u = new DebugUI()
u.$status = { innerHTML: '' } u.$status = { innerHTML: '' }
u.debug = false
u.setStatus('test')
expect(u.$status.innerHTML).toEqual ''
u.debug = true
u.setStatus('test') u.setStatus('test')
expect(u.$status.innerHTML).toEqual 'Status: test' expect(u.$status.innerHTML).toEqual 'Status: test'
it 'sets message log css correctly for debug mode', -> it 'sets message log css correctly for debug mode', ->
u = new UI() u = new DebugUI()
u.debug = true
u.$msglog = {}
u.setActive true u.setActive true
expect(u.$msglog.className).toEqual 'active' expect(u.$msglog.className).toEqual 'active'
u.setActive false u.setActive false
expect(u.$msglog.className).toEqual '' expect(u.$msglog.className).toEqual ''
it 'sets badge css correctly for non-debug mode', -> it 'sets badge css correctly for non-debug mode', ->
u = new UI() u = new BadgeUI()
u.debug = false
u.$badge = {} u.$badge = {}
u.setActive true u.setActive true
expect(u.$badge.className).toEqual 'active' expect(u.$badge.className).toEqual 'active'
u.setActive false u.setActive false
expect(u.$badge.className).toEqual '' expect(u.$badge.className).toEqual ''
it 'logs to the textarea correctly, only when debug mode', -> it 'logs to the textarea correctly when debug mode', ->
u = new UI() u = new DebugUI()
u.$msglog = { value: '', scrollTop: 0, scrollHeight: 1337 } u.$msglog = { value: '', scrollTop: 0, scrollHeight: 1337 }
u.debug = false
u.log 'test'
expect(u.$msglog.value).toEqual ''
expect(u.$msglog.scrollTop).toEqual 0
u.debug = true
u.log 'test' u.log 'test'
expect(u.$msglog.value).toEqual 'test\n' expect(u.$msglog.value).toEqual 'test\n'
expect(u.$msglog.scrollTop).toEqual 1337 expect(u.$msglog.scrollTop).toEqual 1337

View file

@ -3,17 +3,29 @@ All of Snowflake's DOM manipulation and inputs.
### ###
class UI class UI
debug: false # True when there's no badge setStatus: (msg) =>
setActive: (connected) =>
log: (msg) =>
class BadgeUI extends UI
$badge: null
constructor: ->
@$badge = document.getElementById('badge')
setActive: (connected) =>
@$badge.className = if connected then 'active' else ''
class DebugUI extends UI
# DOM elements references. # DOM elements references.
$msglog: null $msglog: null
$status: null $status: null
constructor: -> constructor: ->
@$badge = document.getElementById('badge')
@debug = null == @$badge
return if !@debug
# Setup other DOM handlers if it's debug mode. # Setup other DOM handlers if it's debug mode.
@$status = document.getElementById('status') @$status = document.getElementById('status')
@$msglog = document.getElementById('msglog') @$msglog = document.getElementById('msglog')
@ -21,17 +33,12 @@ class UI
# Status bar # Status bar
setStatus: (msg) => setStatus: (msg) =>
return if !@debug
@$status.innerHTML = 'Status: ' + msg @$status.innerHTML = 'Status: ' + msg
setActive: (connected) => setActive: (connected) =>
if @debug @$msglog.className = if connected then 'active' else ''
@$msglog.className = if connected then 'active' else ''
else
@$badge.className = if connected then 'active' else ''
log: (msg) => log: (msg) =>
return if !@debug
# Scroll to latest # Scroll to latest
@$msglog.value += msg + '\n' @$msglog.value += msg + '\n'
@$msglog.scrollTop = @$msglog.scrollHeight @$msglog.scrollTop = @$msglog.scrollHeight