Move all DOM related stuff into ui.coffee

This commit is contained in:
Serene Han 2016-02-03 20:59:13 -08:00
parent 7677707249
commit caba2cc8f8
4 changed files with 77 additions and 62 deletions

View file

@ -8,6 +8,7 @@ FILES = [
'proxypair.coffee' 'proxypair.coffee'
'websocket.coffee' 'websocket.coffee'
'broker.coffee' 'broker.coffee'
'ui.coffee'
'snowflake.coffee' 'snowflake.coffee'
] ]
FILES_TEST = [ FILES_TEST = [
@ -33,12 +34,6 @@ task 'test', 'snowflake unit tests', ->
throw err if err throw err if err
console.log stdout + stderr console.log stdout + stderr
# task 'build:embed', 'build the snowflake badge', ->
# exec 'mkdir -p build'
# concatCoffeeFiles()
# copyStaticFiles()
# compileCoffee()
task 'build', 'build the snowflake proxy', -> task 'build', 'build the snowflake proxy', ->
exec 'mkdir -p build' exec 'mkdir -p build'
concatCoffeeFiles() concatCoffeeFiles()
@ -54,4 +49,4 @@ task 'lint', 'ensure idiomatic coffeescript', ->
task 'clean', 'remove all built files', -> task 'clean', 'remove all built files', ->
exec 'rm -r build' exec 'rm -r build'
exec 'rm -r test' exec 'rm -r test/snowflake.bundle.coffee'

View file

@ -59,15 +59,15 @@ class ProxyPair
channel.onopen = => channel.onopen = =>
log 'Data channel opened!' log 'Data channel opened!'
snowflake.state = MODE.WEBRTC_READY snowflake.state = MODE.WEBRTC_READY
$msglog.className = 'active' if $msglog ui.setActive true
# This is the point when the WebRTC datachannel is done, so the next step # This is the point when the WebRTC datachannel is done, so the next step
# is to establish websocket to the server. # is to establish websocket to the server.
@connectRelay() @connectRelay()
channel.onclose = -> channel.onclose = ->
log 'Data channel closed.' log 'Data channel closed.'
Status.set 'disconnected.' ui.setStatus 'disconnected.'
snowflake.state = MODE.INIT snowflake.state = MODE.INIT
$msglog.className = '' if $msglog ui.setActive false
# Change this for multiplexing. # Change this for multiplexing.
snowflake.reset() snowflake.reset()
channel.onerror = -> log 'Data channel error!' channel.onerror = -> log 'Data channel error!'
@ -80,7 +80,7 @@ class ProxyPair
@relay.label = 'websocket-relay' @relay.label = 'websocket-relay'
@relay.onopen = => @relay.onopen = =>
log '\nRelay ' + @relay.label + ' connected!' log '\nRelay ' + @relay.label + ' connected!'
Status.set 'connected' ui.setStatus 'connected'
@relay.onclose = @onClose @relay.onclose = @onClose
@relay.onerror = @onError @relay.onerror = @onError
@relay.onmessage = @onRelayToClientMessage @relay.onmessage = @onRelayToClientMessage

View file

@ -102,7 +102,7 @@ class Snowflake
timer = null timer = null
# Temporary countdown. # Temporary countdown.
countdown = (msg, sec) -> countdown = (msg, sec) ->
Status.set msg + ' (Retrying in ' + sec + ' seconds...)' ui.setStatus msg + ' (Retrying in ' + sec + ' seconds...)'
sec-- sec--
if sec >= 0 if sec >= 0
setTimeout((-> countdown(msg, sec)), 1000) setTimeout((-> countdown(msg, sec)), 1000)
@ -113,7 +113,7 @@ class Snowflake
clearTimeout timer clearTimeout timer
msg = 'polling for client... ' msg = 'polling for client... '
msg += '[retries: ' + @retries + ']' if @retries > 0 msg += '[retries: ' + @retries + ']' if @retries > 0
Status.set msg ui.setStatus msg
recv = broker.getClientOffer() recv = broker.getClientOffer()
@retries++ @retries++
recv.then (desc) => recv.then (desc) =>
@ -176,32 +176,8 @@ class Snowflake
snowflake = null snowflake = null
broker = null broker = null
ui = null
#
## -- DOM & Inputs -- #
#
# DOM elements references.
$msglog = null
$send = null
$input = null
$status = null
Interface =
# Local input from keyboard into message window.
acceptInput: ->
msg = $input.value
if !COPY_PASTE_ENABLED
log 'No input expected - Copy Paste Signalling disabled.'
else switch snowflake.state
when MODE.WEBRTC_CONNECTING
Signalling.receive msg
when MODE.WEBRTC_READY
log 'No input expected - WebRTC connected.'
else
log 'ERROR: ' + msg
$input.value = ''
$input.focus()
# Signalling channel - just tells user to copy paste to the peer. # Signalling channel - just tells user to copy paste to the peer.
# Eventually this should go over the broker. # Eventually this should go over the broker.
@ -224,37 +200,20 @@ Signalling =
return false return false
snowflake.receiveOffer recv if desc snowflake.receiveOffer recv if desc
log = (msg) -> # Log to the message window. # Log to both console and UI if applicable.
log = (msg) ->
console.log msg console.log msg
if $msglog # Scroll to latest ui.log msg
$msglog.value += msg + '\n'
$msglog.scrollTop = $msglog.scrollHeight
# Status bar
Status =
set: (msg) ->
$status.innerHTML = 'Status: ' + msg if $status
init = -> init = ->
$badge = document.getElementById('badge') ui = new UI()
if !badge log '== snowflake proxy =='
$status = document.getElementById('status')
$msglog = document.getElementById('msglog')
$msglog.value = ''
$send = document.getElementById('send')
$send.onclick = Interface.acceptInput
$input = document.getElementById('input')
$input.focus()
$input.onkeydown = (e) -> $send.onclick() if 13 == e.keyCode # enter
log '== snowflake browser proxy =='
log 'Copy-Paste mode detected.' if COPY_PASTE_ENABLED log 'Copy-Paste mode detected.' if COPY_PASTE_ENABLED
brokerUrl = Params.getString(query, 'broker', DEFAULT_BROKER) brokerUrl = Params.getString(query, 'broker', DEFAULT_BROKER)
broker = new Broker brokerUrl broker = new Broker brokerUrl
snowflake = new Snowflake(broker) snowflake = new Snowflake(broker)
window.snowflake = snowflake # window.snowflake = snowflake
# window.ui = ui
relayAddr = Params.getAddress(query, 'relay', DEFAULT_RELAY) relayAddr = Params.getAddress(query, 'relay', DEFAULT_RELAY)
snowflake.setRelayAddr relayAddr snowflake.setRelayAddr relayAddr

61
proxy/ui.coffee Normal file
View file

@ -0,0 +1,61 @@
###
All of Snowflake's DOM manipulation and inputs.
###
class UI
debug = false # True when there's no badge
# DOM elements references.
$msglog = null
$send = null
$input = null
$status = null
constructor: ->
@$badge = document.getElementById('badge')
debug = !@$badge
return if !debug
# Setup other DOM handlers if it's debug mode.
@$status = document.getElementById('status')
@$msglog = document.getElementById('msglog')
@$msglog.value = ''
@$send = document.getElementById('send')
@$send.onclick = => { @acceptInput }
@$input = document.getElementById('input')
@$input.focus()
@$input.onkeydown = (e) -> @$send.onclick() if 13 == e.keyCode # enter
# Status bar
setStatus: (msg) =>
return if !debug
@$status.innerHTML = 'Status: ' + msg
setActive: (connected) =>
if debug
@$msglog.className = if connected then 'active' else ''
else
# magic
# Local input from keyboard into message window.
acceptInput: =>
msg = @$input.value
if !COPY_PASTE_ENABLED
@log 'No input expected - Copy Paste Signalling disabled.'
else switch snowflake.state
when MODE.WEBRTC_CONNECTING
Signalling.receive msg
when MODE.WEBRTC_READY
@log 'No input expected - WebRTC connected.'
else
@log 'ERROR: ' + msg
@$input.value = ''
@$input.focus()
log: (msg) =>
return if !debug
# Scroll to latest
@$msglog.value += msg + '\n'
@$msglog.scrollTop = @$msglog.scrollHeight