From cb83129916525a0caa633527564961d7472490c6 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Tue, 12 Jul 2016 21:02:17 +0000 Subject: [PATCH 01/39] make a ui --- client/css/client.css | 106 +++++++++++++++++++++++++++++++++++++++++ client/index.html | 37 +++++++++++++- client/js/client-ui.js | 87 +++++++++++++++++++++++++++++++++ 3 files changed, 228 insertions(+), 2 deletions(-) create mode 100644 client/css/client.css create mode 100644 client/js/client-ui.js diff --git a/client/css/client.css b/client/css/client.css new file mode 100644 index 00000000..6eee490b --- /dev/null +++ b/client/css/client.css @@ -0,0 +1,106 @@ +html, body { + padding: 0; + margin: 0; + background: #00F; + font-family: Arial, sans-serif; + overflow: hidden; +} + +/* Main Content */ + +.main_container { + position: absolute; + background-color: #F00; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.main_container > * { + /* TODO: Remove this once side panels can be hidden. */ + padding-left: 20%; + padding-right: 20%; +} + +.header { + height: 64px; + background-color: #333; +} +.main_panel { + background-color: #666; + overflow-y: scroll; + flex: 1; + white-space: pre; +} +.input_region { + background-color: #F00; +} +.input_text { + width: 100%; +} + +/* Settings and related screens */ + +.settings { + position: absolute; + background-color: #F00; + height: 100%; + width: 100%; +} + +.settings_hidden { + visibility: hidden; +} + +.host_connection_hidden { + visibility: hidden; +} + +.server_connection { + visibility: hidden; +} + +.server_connection_visible { + visibility: visible; +} + +/* SIDE PANELS */ + +.nav_panel { + position: absolute; + left: 0; + top: 0; + width: 90%; + background-color: #0F0; + height: 100%; + transform: translateX(-102%); +} +.nav_panel_first_pass { + position: absolute; + left: 0; + top: 0; + width: 10%; + background-color: #0F0; + height: 100%; +} +.nav_panel_visible { + transform: translateX(0); +} +.nick_panel { + position: absolute; + right: 0; + top: 0; + width: 90%; + background-color: #00F; + height: 100%; + transform: translateX(102%); +} +.nick_panel_first_pass { + position: absolute; + right: 0; + top: 0; + width: 10%; + background-color: #00F; + height: 100%; +} diff --git a/client/index.html b/client/index.html index 7d10c2db..f9a862da 100644 --- a/client/index.html +++ b/client/index.html @@ -5,6 +5,7 @@ + + + -
- +
+
+ TEST + +
+
+
+
+
+ + +
+
+ Username:
+ +
+
+ Address:
+ Port:
+ Nick:
+ +
+
+
+
+ + \ No newline at end of file diff --git a/client/js/client-ui.js b/client/js/client-ui.js new file mode 100644 index 00000000..c3d31ce7 --- /dev/null +++ b/client/js/client-ui.js @@ -0,0 +1,87 @@ +'use strict'; + +window.client = null; +// TODO(flackr): Support multiple connected hosts. +window.hostId = 0; + +class SlideNav { + constructor() { + this.nav_panel = document.querySelector('.nav_panel'); + + this.show_nav = document.querySelector('.show_nav'); + this.show_nav.addEventListener('click', this.showSideNav.bind(this)); + } + + showSideNav () { + console.log("HEY LISTEN"); + this.nav_panel.classList.add('nav_panel_visible'); + } +} + +class HostConnection { + constructor(elem) { + this.elem = elem; + this.connect = this.elem.querySelector('.connect'); + this.connect.addEventListener('click', this.applyConnection.bind(this)); + } + + applyConnection() { + client = new circ.CircClient( + window.location.origin.replace(/^http/, 'ws'), + this.elem.querySelector('input').value); + new BaseUI(document.querySelector('.main_container'), client); + client.addEventListener('connection', this.onConnection.bind(this)); + } + + onConnection(hostId) { + this.elem.classList.add('host_connection_hidden'); + this.server_dialog = document.querySelector('.server_connection'); + this.server_dialog.classList.add('server_connection_visible'); + window.hostId = hostId; + } +} + +class ServerConnection { + constructor(elem) { + this.elem = elem; + this.connect = this.elem.querySelector('.connect'); + this.connect.addEventListener('click', this.applyConnection.bind(this)); + } + + applyConnection() { + var server_address = this.elem.querySelector('.server_address').value; + var server_port = this.elem.querySelector('.server_port').value; + var server_nick = this.elem.querySelector('.server_nick').value; + client.connect(hostId, server_address, server_port, {'nick': server_nick}) + .then(function() { + // Show main UI. + this.elem.classList.remove('server_connection_visible'); + document.querySelector('.settings').classList.add('settings_hidden'); + }.bind(this)); + } +} + +class BaseUI { + constructor(elem, client) { + this.elem = elem; + this.client = client; + this.client.addEventListener('message', this.onMessage.bind(this)); + this.elem.querySelector('.input_text').addEventListener('keypress', this.onKeyPress.bind(this)); + } + + onMessage(host, server, data) { + // |host| may not be user visible. + this.elem.querySelector('.main_panel').textContent += server + " " + data + '\n'; + this.elem.querySelector('.main_panel').scrollTop = this.elem.querySelector('.main_panel').scrollHeight; + } + + onKeyPress(evt) { + if (evt.keyCode == 13) { + this.client.send(); + } + } +} + +new HostConnection(document.querySelector('.host_connection')); +new ServerConnection(document.querySelector('.server_connection')); +//new SlideNav(); \ No newline at end of file From 4fc89b602388b0b425861e4f3c3379bf2967f215 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Tue, 12 Jul 2016 21:10:21 +0000 Subject: [PATCH 02/39] rawr irc --- client/js/client-ui.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/js/client-ui.js b/client/js/client-ui.js index c3d31ce7..a9a303bf 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -3,6 +3,7 @@ window.client = null; // TODO(flackr): Support multiple connected hosts. window.hostId = 0; +window.serverName = 'irc'; class SlideNav { constructor() { @@ -52,11 +53,13 @@ class ServerConnection { var server_address = this.elem.querySelector('.server_address').value; var server_port = this.elem.querySelector('.server_port').value; var server_nick = this.elem.querySelector('.server_nick').value; - client.connect(hostId, server_address, server_port, {'nick': server_nick}) + var server_name = 'irc'; + client.connect(hostId, server_address, server_port, {'name': server_name, 'nick': server_nick}) .then(function() { // Show main UI. this.elem.classList.remove('server_connection_visible'); document.querySelector('.settings').classList.add('settings_hidden'); + // TODO update side panel }.bind(this)); } } @@ -77,7 +80,9 @@ class BaseUI { onKeyPress(evt) { if (evt.keyCode == 13) { - this.client.send(); + var elem = this.elem.querySelector('.input_text') + this.client.send(hostId, serverName, elem.value); + elem.value = ''; } } } From b179782b6d025ada5c7968f8c27d9e8a98f948b4 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Tue, 12 Jul 2016 21:51:23 +0000 Subject: [PATCH 03/39] focus passing and enter commits --- client/css/client.css | 8 ++++--- client/index.html | 2 +- client/js/client-ui.js | 50 +++++++++++++++++++++++++++++++++++++----- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index 6eee490b..402c7671 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -6,6 +6,11 @@ html, body { overflow: hidden; } +/* General Styles */ +.input_text { + width: 100%; +} + /* Main Content */ .main_container { @@ -36,9 +41,6 @@ html, body { .input_region { background-color: #F00; } -.input_text { - width: 100%; -} /* Settings and related screens */ diff --git a/client/index.html b/client/index.html index f9a862da..047bbab8 100644 --- a/client/index.html +++ b/client/index.html @@ -43,7 +43,7 @@
- Username:
+ Username:
diff --git a/client/js/client-ui.js b/client/js/client-ui.js index a9a303bf..7d055575 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -24,6 +24,15 @@ class HostConnection { this.elem = elem; this.connect = this.elem.querySelector('.connect'); this.connect.addEventListener('click', this.applyConnection.bind(this)); + var input_text = this.elem.querySelector('.input_text'); + input_text.addEventListener('keypress', this.onKeyPress.bind(this)); + input_text.focus(); + } + + onKeyPress(evt) { + if (evt.keyCode == 13) { + this.applyConnection(); + } } applyConnection() { @@ -39,6 +48,8 @@ class HostConnection { this.server_dialog = document.querySelector('.server_connection'); this.server_dialog.classList.add('server_connection_visible'); window.hostId = hostId; + + new ServerConnection(document.querySelector('.server_connection')); } } @@ -47,18 +58,47 @@ class ServerConnection { this.elem = elem; this.connect = this.elem.querySelector('.connect'); this.connect.addEventListener('click', this.applyConnection.bind(this)); + + this.server_address_el = this.elem.querySelector('.server_address'); + this.server_address_el.addEventListener('keypress', this.serverAddressKeyPress.bind(this)); + this.server_address_el.focus(); + + this.server_port_el = this.elem.querySelector('.server_port'); + this.server_port_el.addEventListener('keypress', this.serverPortKeyPress.bind(this)); + + this.server_nick_el = this.elem.querySelector('.server_nick'); + this.server_nick_el.addEventListener('keypress', this.serverNickKeyPress.bind(this)); + } + + serverAddressKeyPress(evt) { + if (evt.keyCode == 13) { + this.server_port_el.focus(); + } + } + + serverPortKeyPress(evt) { + if (evt.keyCode == 13) { + this.server_nick_el.focus(); + } + } + + serverNickKeyPress(evt) { + if (evt.keyCode == 13) { + this.applyConnection(); + } } applyConnection() { - var server_address = this.elem.querySelector('.server_address').value; - var server_port = this.elem.querySelector('.server_port').value; - var server_nick = this.elem.querySelector('.server_nick').value; + var server_address = this.server_address_el.value; + var server_port = this.server_port_el.value; + var server_nick = this.server_nick_el.value; var server_name = 'irc'; client.connect(hostId, server_address, server_port, {'name': server_name, 'nick': server_nick}) .then(function() { // Show main UI. this.elem.classList.remove('server_connection_visible'); document.querySelector('.settings').classList.add('settings_hidden'); + document.querySelector('.main_container').querySelector('.input_text').focus(); // TODO update side panel }.bind(this)); } @@ -87,6 +127,4 @@ class BaseUI { } } -new HostConnection(document.querySelector('.host_connection')); -new ServerConnection(document.querySelector('.server_connection')); -//new SlideNav(); \ No newline at end of file +new HostConnection(document.querySelector('.host_connection')); \ No newline at end of file From cd99d0006bf47666ec4a8d468ae902d652b80a70 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 13:40:13 +0000 Subject: [PATCH 04/39] beginning to style forms --- client/css/client.css | 25 ++++++++++++++++++++++++- client/index.html | 8 +++++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index 402c7671..b0f4822a 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + html, body { padding: 0; margin: 0; @@ -7,10 +11,26 @@ html, body { } /* General Styles */ -.input_text { + +.horizontal_fields { + padding: 0; + margin: 0; width: 100%; } +.label_text { + display: inline-block; + *display: inline; + width: 20%; + background-color: #0F0; +} + +.input_text { + display: inline-block; + *display: inline; + width: 80%; +} + /* Main Content */ .main_container { @@ -60,6 +80,9 @@ html, body { } .server_connection { + position: absolute; + top: 0; + width: 100%; visibility: hidden; } diff --git a/client/index.html b/client/index.html index 047bbab8..a80cca32 100644 --- a/client/index.html +++ b/client/index.html @@ -43,13 +43,15 @@
+

Host Connection:

Username:
- Address:
- Port:
- Nick:
+

Server Connection:

+
+
+
From 243f6a574971c46062239e4b8b1a7f676515f5e2 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 14:10:10 +0000 Subject: [PATCH 05/39] submit on enter, styling forms --- client/index.html | 6 +++--- client/js/client-ui.js | 23 +++++++---------------- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/client/index.html b/client/index.html index a80cca32..60eaf29f 100644 --- a/client/index.html +++ b/client/index.html @@ -43,12 +43,12 @@
-

Host Connection:

- Username:
+
Host Connection:
+
-

Server Connection:

+
Server Connection:



diff --git a/client/js/client-ui.js b/client/js/client-ui.js index 7d055575..95deead9 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -36,6 +36,7 @@ class HostConnection { } applyConnection() { + this.connect.disabled = true; client = new circ.CircClient( window.location.origin.replace(/^http/, 'ws'), this.elem.querySelector('input').value); @@ -60,35 +61,24 @@ class ServerConnection { this.connect.addEventListener('click', this.applyConnection.bind(this)); this.server_address_el = this.elem.querySelector('.server_address'); - this.server_address_el.addEventListener('keypress', this.serverAddressKeyPress.bind(this)); + this.server_address_el.addEventListener('keypress', this.onKeyPress.bind(this)); this.server_address_el.focus(); this.server_port_el = this.elem.querySelector('.server_port'); - this.server_port_el.addEventListener('keypress', this.serverPortKeyPress.bind(this)); + this.server_port_el.addEventListener('keypress', this.onKeyPress.bind(this)); this.server_nick_el = this.elem.querySelector('.server_nick'); - this.server_nick_el.addEventListener('keypress', this.serverNickKeyPress.bind(this)); + this.server_nick_el.addEventListener('keypress', this.onKeyPress.bind(this)); } - serverAddressKeyPress(evt) { - if (evt.keyCode == 13) { - this.server_port_el.focus(); - } - } - - serverPortKeyPress(evt) { - if (evt.keyCode == 13) { - this.server_nick_el.focus(); - } - } - - serverNickKeyPress(evt) { + onKeyPress(evt) { if (evt.keyCode == 13) { this.applyConnection(); } } applyConnection() { + this.connect.disabled = true; var server_address = this.server_address_el.value; var server_port = this.server_port_el.value; var server_nick = this.server_nick_el.value; @@ -119,6 +109,7 @@ class BaseUI { } onKeyPress(evt) { + //TODO parse irc commands here if (evt.keyCode == 13) { var elem = this.elem.querySelector('.input_text') this.client.send(hostId, serverName, elem.value); From 96918c4776caf2d77f71ba45bd331a550bad404d Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 14:36:46 +0000 Subject: [PATCH 06/39] start building server/channel panel --- client/css/client.css | 13 +++++++++++-- client/index.html | 10 +++++++--- client/js/client-ui.js | 28 ++++++++++++++++++++++++++-- 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index b0f4822a..585f6704 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -44,8 +44,8 @@ html, body { .main_container > * { /* TODO: Remove this once side panels can be hidden. */ - padding-left: 20%; - padding-right: 20%; + padding-left: 10%; + padding-right: 10%; } .header { @@ -62,6 +62,10 @@ html, body { background-color: #F00; } +.main_input_text { + width: 100%; +} + /* Settings and related screens */ .settings { @@ -112,6 +116,11 @@ html, body { .nav_panel_visible { transform: translateX(0); } + +.room_item { + background-color: #F00; +} + .nick_panel { position: absolute; right: 0; diff --git a/client/index.html b/client/index.html index 60eaf29f..097a4feb 100644 --- a/client/index.html +++ b/client/index.html @@ -35,14 +35,18 @@
-
+
-
-
+
+
Host Connection:

diff --git a/client/js/client-ui.js b/client/js/client-ui.js index 95deead9..921e80ec 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -111,11 +111,35 @@ class BaseUI { onKeyPress(evt) { //TODO parse irc commands here if (evt.keyCode == 13) { - var elem = this.elem.querySelector('.input_text') + var elem = this.elem.querySelector('.main_input_text') this.client.send(hostId, serverName, elem.value); elem.value = ''; } } } -new HostConnection(document.querySelector('.host_connection')); \ No newline at end of file +class RoomList { + constructor(room_el, initial_rooms) { + this.room_el = room_el; + this.list = document.createElement('ul'); + this.insertRooms(initial_rooms); + this.room_el.appendChild(this.list); + } + + // TODO call this on each update to server/channels + insertRooms(room_list) { + for(var i = 0; i < room_list.length; i++) { + var item = document.createElement('li'); + item.appendChild(document.createTextNode(room_list[i])); + item.classList.add('room_item'); + // TODO add click handlers + this.list.appendChild(item); + } + } + +} + +new HostConnection(document.querySelector('.host_connection')); + +var rooms = ["Hey Listen", "Look", "HEY!"] +new RoomList(document.querySelector('.rooms'), rooms); \ No newline at end of file From 259b78de41e05026d8b3b3d84ff82337afb39a83 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 15:36:28 +0000 Subject: [PATCH 07/39] testing --- client/js/client-ui.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/client/js/client-ui.js b/client/js/client-ui.js index 921e80ec..eb71f34b 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -122,15 +122,24 @@ class RoomList { constructor(room_el, initial_rooms) { this.room_el = room_el; this.list = document.createElement('ul'); - this.insertRooms(initial_rooms); + this.insertRooms(initial_rooms["servers"]); this.room_el.appendChild(this.list); } // TODO call this on each update to server/channels insertRooms(room_list) { - for(var i = 0; i < room_list.length; i++) { + //console.log(room_list.keys()); + /* + room_list.forEach(function(value, key) { + console.log(key + " = " + value); +}, room_list) + */ + for(var key in room_list) { + console.log(key); + //} + //for(var i = 0; i < room_list.length; i++) { var item = document.createElement('li'); - item.appendChild(document.createTextNode(room_list[i])); + item.appendChild(document.createTextNode(room_list[key])); item.classList.add('room_item'); // TODO add click handlers this.list.appendChild(item); @@ -142,4 +151,10 @@ class RoomList { new HostConnection(document.querySelector('.host_connection')); var rooms = ["Hey Listen", "Look", "HEY!"] -new RoomList(document.querySelector('.rooms'), rooms); \ No newline at end of file +var serverData = { "hostId" : "id", + "servers" : { "server_name 1" : { "chanel_name_1": "channel 1", + "chanel_name_2": "channel 2" }, + "server_name 2" : { "channel_name_3": "channel 3"} + } + }; +new RoomList(document.querySelector('.rooms'), serverData); \ No newline at end of file From 038b9fb91bf1133863e1df1fee9d048d7c67173a Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 15:44:28 +0000 Subject: [PATCH 08/39] fixing merge --- client/index.html | 22 ++-------------------- client/js/client-ui.js | 32 -------------------------------- 2 files changed, 2 insertions(+), 52 deletions(-) diff --git a/client/index.html b/client/index.html index 3012a4df..deda8aa5 100644 --- a/client/index.html +++ b/client/index.html @@ -35,7 +35,6 @@
-<<<<<<< HEAD
-
-
+
+
Host Connection:

@@ -57,23 +56,6 @@


-======= -
-
- - -
-
- Username:
- -
-
- Address:
- Port:
- Nick:
->>>>>>> server
diff --git a/client/js/client-ui.js b/client/js/client-ui.js index 65dd76d5..f01d5357 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -24,7 +24,6 @@ class HostConnection { this.elem = elem; this.connect = this.elem.querySelector('.connect'); this.connect.addEventListener('click', this.applyConnection.bind(this)); -<<<<<<< HEAD var input_text = this.elem.querySelector('.input_text'); input_text.addEventListener('keypress', this.onKeyPress.bind(this)); input_text.focus(); @@ -38,11 +37,6 @@ class HostConnection { applyConnection() { this.connect.disabled = true; -======= - } - - applyConnection() { ->>>>>>> server client = new circ.CircClient( window.location.origin.replace(/^http/, 'ws'), this.elem.querySelector('input').value); @@ -55,11 +49,8 @@ class HostConnection { this.server_dialog = document.querySelector('.server_connection'); this.server_dialog.classList.add('server_connection_visible'); window.hostId = hostId; -<<<<<<< HEAD new ServerConnection(document.querySelector('.server_connection')); -======= ->>>>>>> server } } @@ -68,7 +59,6 @@ class ServerConnection { this.elem = elem; this.connect = this.elem.querySelector('.connect'); this.connect.addEventListener('click', this.applyConnection.bind(this)); -<<<<<<< HEAD this.server_address_el = this.elem.querySelector('.server_address'); this.server_address_el.addEventListener('keypress', this.onKeyPress.bind(this)); @@ -92,24 +82,13 @@ class ServerConnection { var server_address = this.server_address_el.value; var server_port = this.server_port_el.value; var server_nick = this.server_nick_el.value; -======= - } - - applyConnection() { - var server_address = this.elem.querySelector('.server_address').value; - var server_port = this.elem.querySelector('.server_port').value; - var server_nick = this.elem.querySelector('.server_nick').value; ->>>>>>> server var server_name = 'irc'; client.connect(hostId, server_address, server_port, {'name': server_name, 'nick': server_nick}) .then(function() { // Show main UI. this.elem.classList.remove('server_connection_visible'); document.querySelector('.settings').classList.add('settings_hidden'); -<<<<<<< HEAD document.querySelector('.main_container').querySelector('.input_text').focus(); -======= ->>>>>>> server // TODO update side panel }.bind(this)); } @@ -130,21 +109,15 @@ class BaseUI { } onKeyPress(evt) { -<<<<<<< HEAD //TODO parse irc commands here if (evt.keyCode == 13) { var elem = this.elem.querySelector('.main_input_text') -======= - if (evt.keyCode == 13) { - var elem = this.elem.querySelector('.input_text') ->>>>>>> server this.client.send(hostId, serverName, elem.value); elem.value = ''; } } } -<<<<<<< HEAD class RoomList { constructor(room_el, initial_rooms) { this.room_el = room_el; @@ -185,8 +158,3 @@ var serverData = { "hostId" : "id", } }; new RoomList(document.querySelector('.rooms'), serverData); -======= -new HostConnection(document.querySelector('.host_connection')); -new ServerConnection(document.querySelector('.server_connection')); -//new SlideNav(); ->>>>>>> server From 9c5304fdd9a7eae6d6d008c7aef26da2abe21823 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 17:25:04 +0000 Subject: [PATCH 09/39] jump to main if connected --- client/css/client.css | 21 --------------------- client/js/client-ui.js | 19 ++++++++++++++----- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index 3904542c..585f6704 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -1,10 +1,7 @@ -<<<<<<< HEAD * { box-sizing: border-box; } -======= ->>>>>>> server html, body { padding: 0; margin: 0; @@ -13,7 +10,6 @@ html, body { overflow: hidden; } -<<<<<<< HEAD /* General Styles */ .horizontal_fields { @@ -35,8 +31,6 @@ html, body { width: 80%; } -======= ->>>>>>> server /* Main Content */ .main_container { @@ -50,13 +44,8 @@ html, body { .main_container > * { /* TODO: Remove this once side panels can be hidden. */ -<<<<<<< HEAD padding-left: 10%; padding-right: 10%; -======= - padding-left: 20%; - padding-right: 20%; ->>>>>>> server } .header { @@ -72,12 +61,8 @@ html, body { .input_region { background-color: #F00; } -<<<<<<< HEAD .main_input_text { -======= -.input_text { ->>>>>>> server width: 100%; } @@ -99,12 +84,9 @@ html, body { } .server_connection { -<<<<<<< HEAD position: absolute; top: 0; width: 100%; -======= ->>>>>>> server visibility: hidden; } @@ -134,14 +116,11 @@ html, body { .nav_panel_visible { transform: translateX(0); } -<<<<<<< HEAD .room_item { background-color: #F00; } -======= ->>>>>>> server .nick_panel { position: absolute; right: 0; diff --git a/client/js/client-ui.js b/client/js/client-ui.js index f01d5357..daa957e6 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -46,11 +46,20 @@ class HostConnection { onConnection(hostId) { this.elem.classList.add('host_connection_hidden'); - this.server_dialog = document.querySelector('.server_connection'); - this.server_dialog.classList.add('server_connection_visible'); window.hostId = hostId; - - new ServerConnection(document.querySelector('.server_connection')); + var isConnectedToServer = false; + for (var server in client.state[hostId]) { + isConnectedToServer = true; + break; + } + if (isConnectedToServer) { + document.querySelector('.settings').classList.add('settings_hidden'); + document.querySelector('.main_container').querySelector('.input_text').focus(); + } else { + this.server_dialog = document.querySelector('.server_connection'); + this.server_dialog.classList.add('server_connection_visible'); + new ServerConnection(document.querySelector('.server_connection')); + } } } @@ -99,7 +108,7 @@ class BaseUI { this.elem = elem; this.client = client; this.client.addEventListener('message', this.onMessage.bind(this)); - this.elem.querySelector('.input_text').addEventListener('keypress', this.onKeyPress.bind(this)); + this.elem.querySelector('.main_input_text').addEventListener('keypress', this.onKeyPress.bind(this)); } onMessage(host, server, data) { From f5484300fae0494cb03d248965f3451b00f3aca1 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 19:41:40 +0000 Subject: [PATCH 10/39] checkpoint --- client/css/client.css | 4 ++++ client/js/client-ui.js | 41 +++++++++++++++++++++++++---------------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index 585f6704..4aec1c9a 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -121,6 +121,10 @@ html, body { background-color: #F00; } +.channel_list { + padding-left: 10px; +} + .nick_panel { position: absolute; right: 0; diff --git a/client/js/client-ui.js b/client/js/client-ui.js index daa957e6..2da0c664 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -5,6 +5,16 @@ window.client = null; window.hostId = 0; window.serverName = 'irc'; +function transitionToMainUI() { + document.querySelector('.settings').classList.add('settings_hidden'); + document.querySelector('.main_container').querySelector('.main_input_text').focus(); + for (var server in client.state[hostId]) { + console.log(server); + new RoomList(document.querySelector('.rooms'), client.state[hostId]); + + } +} + class SlideNav { constructor() { this.nav_panel = document.querySelector('.nav_panel'); @@ -53,8 +63,7 @@ class HostConnection { break; } if (isConnectedToServer) { - document.querySelector('.settings').classList.add('settings_hidden'); - document.querySelector('.main_container').querySelector('.input_text').focus(); + transitionToMainUI(); } else { this.server_dialog = document.querySelector('.server_connection'); this.server_dialog.classList.add('server_connection_visible'); @@ -96,8 +105,7 @@ class ServerConnection { .then(function() { // Show main UI. this.elem.classList.remove('server_connection_visible'); - document.querySelector('.settings').classList.add('settings_hidden'); - document.querySelector('.main_container').querySelector('.input_text').focus(); + transitionToMainUI(); // TODO update side panel }.bind(this)); } @@ -131,25 +139,27 @@ class RoomList { constructor(room_el, initial_rooms) { this.room_el = room_el; this.list = document.createElement('ul'); - this.insertRooms(initial_rooms["servers"]); + this.insertRooms(initial_rooms); this.room_el.appendChild(this.list); } // TODO call this on each update to server/channels insertRooms(room_list) { - //console.log(room_list.keys()); - /* - room_list.forEach(function(value, key) { - console.log(key + " = " + value); -}, room_list) - */ for(var key in room_list) { console.log(key); - //} - //for(var i = 0; i < room_list.length; i++) { var item = document.createElement('li'); - item.appendChild(document.createTextNode(room_list[key])); + item.appendChild(document.createTextNode(key));//room_list[key])); item.classList.add('room_item'); + + var channel_list = document.createElement('ul'); + // channel_list.classList.add('channel_list'); + for (var channel in room_list[key]) { + var channel_item = document.createElement('li'); + channel_item.appendChild(document.createTextNode(channel)); + channel_list.appendChild(channel_item); + } + item.appendChild(channel_list); + // TODO add click handlers this.list.appendChild(item); } @@ -159,11 +169,10 @@ class RoomList { new HostConnection(document.querySelector('.host_connection')); -var rooms = ["Hey Listen", "Look", "HEY!"] var serverData = { "hostId" : "id", "servers" : { "server_name 1" : { "chanel_name_1": "channel 1", "chanel_name_2": "channel 2" }, "server_name 2" : { "channel_name_3": "channel 3"} } }; -new RoomList(document.querySelector('.rooms'), serverData); + From 2f91c37e13737a8f5cdfcbf028886f3335eda71f Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 19:47:15 +0000 Subject: [PATCH 11/39] fix for host --- client/js/circ-state.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/js/circ-state.js b/client/js/circ-state.js index cf4f629b..f3be5c19 100644 --- a/client/js/circ-state.js +++ b/client/js/circ-state.js @@ -1,4 +1,5 @@ -window.exports = window.exports || {}; +if (typeof window !== 'undefined') + window.exports = window.exports || {}; exports.CircState = function() { @@ -9,7 +10,7 @@ exports.CircState = function() { return source[0].substring(1); } - function CircState(state = {}) { + function CircState(state/* = {}*/) { state['channels'] = state['channels'] || {} this.state = state; } From 361cf153cf81ec6e7652fcf96d45798c8a1d4b64 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 20:14:25 +0000 Subject: [PATCH 12/39] update list to handle new client state format --- client/js/client-ui.js | 34 ++++++++++------------------------ 1 file changed, 10 insertions(+), 24 deletions(-) diff --git a/client/js/client-ui.js b/client/js/client-ui.js index 2da0c664..a73cbd4b 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -8,11 +8,7 @@ window.serverName = 'irc'; function transitionToMainUI() { document.querySelector('.settings').classList.add('settings_hidden'); document.querySelector('.main_container').querySelector('.main_input_text').focus(); - for (var server in client.state[hostId]) { - console.log(server); - new RoomList(document.querySelector('.rooms'), client.state[hostId]); - - } + new RoomList(document.querySelector('.rooms')); } class SlideNav { @@ -58,7 +54,7 @@ class HostConnection { this.elem.classList.add('host_connection_hidden'); window.hostId = hostId; var isConnectedToServer = false; - for (var server in client.state[hostId]) { + for (var server in client.state_[hostId]) { isConnectedToServer = true; break; } @@ -136,24 +132,23 @@ class BaseUI { } class RoomList { - constructor(room_el, initial_rooms) { + constructor(room_el) { this.room_el = room_el; this.list = document.createElement('ul'); - this.insertRooms(initial_rooms); + this.insertRooms(); this.room_el.appendChild(this.list); } // TODO call this on each update to server/channels - insertRooms(room_list) { - for(var key in room_list) { - console.log(key); + insertRooms() { + for (var server in client.state_[hostId]) { + console.log(server); var item = document.createElement('li'); - item.appendChild(document.createTextNode(key));//room_list[key])); + item.appendChild(document.createTextNode(server)); item.classList.add('room_item'); var channel_list = document.createElement('ul'); - // channel_list.classList.add('channel_list'); - for (var channel in room_list[key]) { + for (var channel in client.state_[hostId][server].state.channels) { var channel_item = document.createElement('li'); channel_item.appendChild(document.createTextNode(channel)); channel_list.appendChild(channel_item); @@ -164,15 +159,6 @@ class RoomList { this.list.appendChild(item); } } - } -new HostConnection(document.querySelector('.host_connection')); - -var serverData = { "hostId" : "id", - "servers" : { "server_name 1" : { "chanel_name_1": "channel 1", - "chanel_name_2": "channel 2" }, - "server_name 2" : { "channel_name_3": "channel 3"} - } - }; - +new HostConnection(document.querySelector('.host_connection')); \ No newline at end of file From 1ccf3404ec4f19fe03074cc030ee9ed5a1db9608 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 20:27:38 +0000 Subject: [PATCH 13/39] add channels as they are joined --- client/js/client-ui.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/client/js/client-ui.js b/client/js/client-ui.js index a73cbd4b..94eebbfc 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -20,7 +20,6 @@ class SlideNav { } showSideNav () { - console.log("HEY LISTEN"); this.nav_panel.classList.add('nav_panel_visible'); } } @@ -139,24 +138,31 @@ class RoomList { this.room_el.appendChild(this.list); } + insertChannel(channel_list, channel) { + var channel_item = document.createElement('li'); + channel_item.appendChild(document.createTextNode(channel)); + channel_list.appendChild(channel_item); + } + // TODO call this on each update to server/channels + // TODO add click handlers insertRooms() { for (var server in client.state_[hostId]) { - console.log(server); var item = document.createElement('li'); item.appendChild(document.createTextNode(server)); item.classList.add('room_item'); var channel_list = document.createElement('ul'); for (var channel in client.state_[hostId][server].state.channels) { - var channel_item = document.createElement('li'); - channel_item.appendChild(document.createTextNode(channel)); - channel_list.appendChild(channel_item); + insertChannel(channel_list, channel); } item.appendChild(channel_list); - - // TODO add click handlers this.list.appendChild(item); + + // Listen for new channels + client.state_[hostId][server].onjoin = function(channel_list, channel_joined) { + insertChannel(channel_list, channel_joined) + }.bind(this, channel_list); } } } From 4d6b5bfffba1b4df819ee9c23ebdcb78d6576480 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 20:35:40 +0000 Subject: [PATCH 14/39] fix list creation --- client/js/client-ui.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/js/client-ui.js b/client/js/client-ui.js index 94eebbfc..f0ebb2f0 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -154,14 +154,14 @@ class RoomList { var channel_list = document.createElement('ul'); for (var channel in client.state_[hostId][server].state.channels) { - insertChannel(channel_list, channel); + this.insertChannel(channel_list, channel); } item.appendChild(channel_list); this.list.appendChild(item); // Listen for new channels client.state_[hostId][server].onjoin = function(channel_list, channel_joined) { - insertChannel(channel_list, channel_joined) + this.insertChannel(channel_list, channel_joined) }.bind(this, channel_list); } } From 94a1d84b02d3bfa3996a852087b7617ed924ec4d Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Wed, 13 Jul 2016 22:04:39 +0000 Subject: [PATCH 15/39] set spot to trigger channel changes --- client/css/client.css | 4 ++-- client/js/client-ui.js | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index 4aec1c9a..c7884256 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -44,7 +44,7 @@ html, body { .main_container > * { /* TODO: Remove this once side panels can be hidden. */ - padding-left: 10%; + padding-left: 20%; padding-right: 10%; } @@ -109,7 +109,7 @@ html, body { position: absolute; left: 0; top: 0; - width: 10%; + width: 20%; background-color: #0F0; height: 100%; } diff --git a/client/js/client-ui.js b/client/js/client-ui.js index f0ebb2f0..b3fdd3e7 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -138,9 +138,15 @@ class RoomList { this.room_el.appendChild(this.list); } + switchChannel(channel) { + //TODO update scroll region with history for channel + document.querySelector('.main_container').querySelector('.header').textContent = channel; + } + insertChannel(channel_list, channel) { var channel_item = document.createElement('li'); channel_item.appendChild(document.createTextNode(channel)); + channel_item.addEventListener('click', this.switchChannel.bind(this, channel)); channel_list.appendChild(channel_item); } From 8d04a48d0a92e88df978222d66331c06338bb4e1 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Thu, 14 Jul 2016 13:55:54 +0000 Subject: [PATCH 16/39] cleanup of testing styles --- client/css/client.css | 21 +++------------------ client/index.html | 6 +++--- 2 files changed, 6 insertions(+), 21 deletions(-) diff --git a/client/css/client.css b/client/css/client.css index df6006aa..d857a5a3 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -5,7 +5,6 @@ html, body { padding: 0; margin: 0; - background: #00F; font-family: Arial, sans-serif; overflow: hidden; } @@ -42,18 +41,12 @@ html, body { width: 100%; } -.main_container > * { - /* TODO: Remove this once side panels can be hidden. */ - padding-left: 20%; - padding-right: 10%; -} - .header { height: 64px; background-color: #333; } .main_panel { - background-color: #666; + background-color: #FFF; overflow-y: scroll; flex: 1; white-space: pre; @@ -94,7 +87,7 @@ html, body { visibility: visible; } -/* SIDE PANELS */ +/* Right Side User List Panel */ .nick_panel { position: absolute; @@ -105,16 +98,8 @@ html, body { height: 100%; transform: translateX(102%); } -.nick_panel_first_pass { - position: absolute; - right: 0; - top: 0; - width: 10%; - background-color: #00F; - height: 100%; -} -/* Trust Me */ +/* Left Side Servers + Channels Panel */ .side-nav { position: fixed; left: 0; diff --git a/client/index.html b/client/index.html index 941cd488..7b7b8f13 100644 --- a/client/index.html +++ b/client/index.html @@ -6,21 +6,21 @@ +
- -
+
-
+
+
+ +
+ Settings +
+
+
+ + +
+
+ Logout +
+
Host Connection:
diff --git a/client/js/client-ui.js b/client/js/client-ui.js index fdf72cde..5b6054cd 100644 --- a/client/js/client-ui.js +++ b/client/js/client-ui.js @@ -39,9 +39,16 @@ constructor () { this.supportsPassive = undefined; this.addEventListeners(); + document.querySelector('.settings_launcher').addEventListener('click', this.launchSettings.bind(this)); document.querySelector('.join_server').addEventListener('click', this.joinServer.bind(this)); } + launchSettings() { + this.hideSideNav(); + document.querySelector('.settings_container').style.display = "block"; + document.querySelector('.settings_main').style.display = "block"; + } + joinServer() { this.hideSideNav(); server_connection_screen.show(); @@ -414,6 +421,20 @@ class RoomList { } } +class SettingsScreen { + constructor() { + this.elem = document.querySelector('.settings_main'); + this.elem.querySelector('.header__menu-toggle').addEventListener('click',this.close.bind(this)); + } + + close() { + this.elem.display = "none"; + transitionToMainUI(); + } +} + +new SettingsScreen(); + var server_connection_screen = new ServerConnection(document.querySelector('.server_connection')); var room_list = new RoomList(document.querySelector('.rooms')); From d244c7d37282147804872d541b9a2e95b18854e3 Mon Sep 17 00:00:00 2001 From: Jonathan Ross Date: Fri, 15 Jul 2016 19:17:09 +0000 Subject: [PATCH 39/39] set background on new settings page --- client/css/client.css | 1 + 1 file changed, 1 insertion(+) diff --git a/client/css/client.css b/client/css/client.css index b366f3d1..8408136e 100644 --- a/client/css/client.css +++ b/client/css/client.css @@ -234,6 +234,7 @@ input:checked + .slider:before { display: none; height: 100%; width: 100%; + background: var(--main-bg-color); } /* Right Side User List Panel */