diff --git a/client/assets/js/main.js b/client/assets/js/main.js index 1455f0f..a7e3307 100644 --- a/client/assets/js/main.js +++ b/client/assets/js/main.js @@ -1,14 +1,175 @@ -$(function() { - var ws = new WebSocket('ws://' + window.location.hostname + ':14598'); - var $pointer = $('#pointer'); - var $scroller = $('#scrollbar'); - var mouseInitPosX = null; - var mouseInitPosY = null; - var mousePosX = null; - var mousePosY = null; - var scrollLastTimestamp = null; - var scrollLastValue = null; +var ws; +var $pointer, $scroller; +var scrollLastTimestamp, scrollLastValue; +var mousePosX, mousePosY, mouseInitPosX, mouseInitPosY; +var createWebSocketConnection = function() { + ws = new WebSocket('ws://' + window.location.hostname + ':14598'); + + ws.onopen = function(event) { + $('#disconneced').fadeOut(); + } + + ws.onclose = function(event) { + $('#disconneced').fadeIn(); + + window.setTimeout(createWebSocketConnection, 5000); + } + + ws.onmessage = function(event) {} +} + +var navigationClickHandler = function(e) { + $('.pane').hide(); + + var target = $(this).attr('href'); + $(target).show(); + + $('#nav a').removeClass('active'); + $(this).addClass('active'); +} + +var buttonClickHandler = function(e) { + var msg = $(this).attr('data-msg'); + ws.send(msg); +} + +var shortcutClearClickHandler = function(e) { + $('#shortcut-key').val(''); + $('#shortcuts_special_keys input:checked').each(function() { + $(this).prop('checked', false).trigger('change'); + }); +} + +var shortcutSendClickHandler = function(e) { + var keys = []; + + $('#shortcuts_special_keys input:checked').each(function() { + keys.push($(this).val()); + }); + + var key = $('#shortcut-key').val(); + + if (keys.length) { + if (key) { + keys.push(key); + } + + var msg = '{"type":"keys","value": "' + (keys.join(',').replace('"', '\\"')) + '"}'; + ws.send(msg); + } +} + +var textClearClickHandler = function(e) { + $('#text').val(''); +} + +var textSendClickHandler = function(e) { + var keys = $('#text').val(); + + if (keys.length) { + var msg = '{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}'; + ws.send(msg); + } +} + +var textKeyUpHandler = function(e) { + var keys = $('#text').val(); + + if (e.keyCode === 13) { + var msg = '{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}'; + ws.send(msg); + } +} + +var liveTextKeyUpHandler = function(e) { + var value = $(this).val(); + var live = false; + + if (e.keyCode === 8) { + var msg = '{"type":"key","value": "backspace"}'; + ws.send(msg); + } else if (e.keyCode === 13) { + var msg = '{"type":"key","value": "enter"}'; + ws.send(msg); + } else if (value.length) { + if (value === ' ') { + var msg = '{"type":"key","value": "space"}'; + ws.send(msg); + } else { + var msg = '{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}'; + ws.send(msg); + } + + $(this).val(''); + } +} + +var shortcutsSpecialKeysOnChangeHandler = function(e) { + $('#shortcuts_special_keys input:checked').each(function() { + $(this).parent().addClass('btn-primary').removeClass('btn-secondary'); + }) + + $('#shortcuts_special_keys input:not(:checked)').each(function() { + $(this).parent().addClass('btn-secondary').removeClass('btn-primary'); + }) +} + +var pointerClickHandler = function(e) { + var msg = '{"type":"pointer","click":"left"}'; + ws.send(msg); +} + +var scrollerTouchStartHandler = function(e) { + var touch = e.targetTouches[0]; + mouseInitPosY = touch.pageY; +} + +var scrollerTouchMoveHandler = function(e) { + var touch = e.changedTouches[0]; + var value = ((touch.pageY - mouseInitPosY > 0) ? 'down' : 'up'); + var now = new Date().getTime(); + + if (value === scrollLastValue && scrollLastTimestamp !== null && now - scrollLastTimestamp < 200) { + return; + } + + scrollLastTimestamp = now; + scrollLastValue = value; + + var msg = '{"type":"scroll","value": "' + value + '"}'; + + mouseInitPosY = touch.pageY; + ws.send(msg); +} + +var pointerTouchStartHandler = function(e) { + var touch = e.targetTouches[0]; + mouseInitPosX = touch.pageX; + mouseInitPosY = touch.pageY; +} + +var pointerTouchMoveHandler = function(e) { + if (e.changedTouches.length === 2) { + return scrollerTouchMoveHandler(e); + } + + var touch = e.changedTouches[0]; + mousePosX = touch.pageX; + mousePosY = touch.pageY; + + var newX = mousePosX - mouseInitPosX; + var newY = mousePosY - mouseInitPosY; + + mouseInitPosX = mousePosX; + mouseInitPosY = mousePosY; + + var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}'; + + ws.send(msg); +} + +var documentHashHandler = function() { var hash = window.location.hash; if (hash) { @@ -18,164 +179,41 @@ $(function() { $('#pane-keyboard').show(); $('#nav a').first().addClass('active'); } +} - $('#nav a').click(function(e) { - $('.pane').hide(); +var addListeners = function() { + $('#nav a').click(navigationClickHandler); + $('button[data-msg]').click(buttonClickHandler); - var target = $(this).attr('href'); - $(target).show(); + $('#shortcut-clear').click(shortcutClearClickHandler); + $('#shortcuts_special_keys input').change(shortcutsSpecialKeysOnChangeHandler); + $('#shortcut-send').click(shortcutSendClickHandler); - $('#nav a').removeClass('active'); - $(this).addClass('active'); - }); + $('#text-clear').click(textClearClickHandler); + $('#text-send').click(textSendClickHandler); + $('#text').on('keyup', textKeyUpHandler); + $('#live-text').on('keyup', liveTextKeyUpHandler); - ws.onopen = function(event) { - $('#disconneced').hide(); - } + $scroller + .on('touchstart', scrollerTouchStartHandler) + .on('touchmove', scrollerTouchMoveHandler); - ws.onclose = function(event) { - $('#disconneced').show(); - } + $pointer + .on('click', pointerClickHandler) + .on('touchstart', pointerTouchStartHandler) + .on('touchmove', pointerTouchMoveHandler); +} - ws.onmessage = function(event) {} +var bootstrap = function() { + documentHashHandler(); + shortcutsSpecialKeysOnChangeHandler(); + createWebSocketConnection(); + addListeners(); +} - $('button[data-msg]').click(function() { - var msg = $(this).attr('data-msg'); - ws.send(msg); - }); +$(function() { + $pointer = $('#pointer'); + $scroller = $('#scrollbar'); - $('#shortcut-clear').click(function() { - $('#shortcut-key').val(''); - $('#shortcuts_special_keys input:checked').each(function() { - $(this).prop('checked', false).trigger('change'); - }); - }); - - var shortcutsSpecialKeysOnChange = function() { - $('#shortcuts_special_keys input:checked').each(function() { - $(this).parent().addClass('btn-primary').removeClass('btn-secondary'); - }) - - $('#shortcuts_special_keys input:not(:checked)').each(function() { - $(this).parent().addClass('btn-secondary').removeClass('btn-primary'); - }) - } - - $('#shortcuts_special_keys input').change(shortcutsSpecialKeysOnChange); - shortcutsSpecialKeysOnChange(); - - $('#shortcut-send').click(function() { - var keys = []; - - $('#shortcuts_special_keys input:checked').each(function() { - keys.push($(this).val()); - }); - - var key = $('#shortcut-key').val(); - - if (keys.length) { - if (key) { - keys.push(key); - } - - var msg = '{"type":"keys","value": "' + (keys.join(',').replace('"', '\\"')) + '"}'; - ws.send(msg); - } - }); - - $('#text-clear').click(function() { - $('#text').val(''); - }); - - $pointer.on('click', function(e) { - var msg = '{"type":"pointer","click":"left"}'; - ws.send(msg); - }); - - $('#text-send').click(function() { - var keys = $('#text').val(); - - if (keys.length) { - var msg = '{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}'; - ws.send(msg); - } - }); - - $('#text').on('keyup', function(e) { - var keys = $('#text').val(); - - if (e.keyCode === 13) { - var msg = '{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}'; - ws.send(msg); - } - }); - - - $('#live-text').on('keyup', function(e) { - var value = $(this).val(); - var live = false; - - if (e.keyCode === 8) { - var msg = '{"type":"key","value": "backspace"}'; - ws.send(msg); - } else if (e.keyCode === 13) { - var msg = '{"type":"key","value": "enter"}'; - ws.send(msg); - } else if (value.length) { - if (value === ' ') { - var msg = '{"type":"key","value": "space"}'; - ws.send(msg); - } else { - var msg = '{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}'; - ws.send(msg); - } - - $(this).val(''); - } - }); - - $scroller.on('touchstart', function(e) { - var touch = e.targetTouches[0]; - mouseInitPosY = touch.pageY; - }); - - $scroller.on('touchmove', function(e) { - var touch = e.changedTouches[0]; - var value = ((touch.pageY - mouseInitPosY > 0) ? 'down' : 'up'); - var now = new Date().getTime(); - - if (value === scrollLastValue && scrollLastTimestamp !== null && now - scrollLastTimestamp < 200) { - return; - } - - scrollLastTimestamp = now; - scrollLastValue = value; - - var msg = '{"type":"scroll","value": "' + value + '"}'; - - mouseInitPosY = touch.pageY; - ws.send(msg); - }); - - $pointer.on('touchstart', function(e) { - var touch = e.targetTouches[0]; - mouseInitPosX = touch.pageX; - mouseInitPosY = touch.pageY; - }); - - $pointer.on('touchmove', function(e) { - var touch = e.changedTouches[0]; - mousePosX = touch.pageX; - mousePosY = touch.pageY; - - var newX = mousePosX - mouseInitPosX; - var newY = mousePosY - mouseInitPosY; - - mouseInitPosX = mousePosX; - mouseInitPosY = mousePosY; - - var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}'; - - ws.send(msg); - }); + bootstrap(); }); diff --git a/client/index.html b/client/index.html index 32fc57d..714a478 100644 --- a/client/index.html +++ b/client/index.html @@ -2,7 +2,7 @@
- +