From 4514c2c49f0e0ec7cf9911dc254a8d20644d5def Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 21:28:20 -0400 Subject: pushing messages into a div --- public/js/lib/chat.js | 48 --------------------------- public/js/lib/views/index.js | 13 ++++---- public/js/lib/views/lobby/index.js | 17 ---------- public/js/lib/views/lobby/lobby.js | 23 +++++++++++++ public/js/lib/views/login.js | 6 +++- public/js/lib/views/room/chat.js | 63 ++++++++++++++++++++++++++++++++++++ public/js/lib/views/room/index.js | 10 ------ public/js/lib/views/room/room.js | 29 +++++++++++++++++ public/js/lib/views/room/userlist.js | 15 +++++++++ public/js/lib/ws.js | 2 +- 10 files changed, 143 insertions(+), 83 deletions(-) delete mode 100644 public/js/lib/chat.js delete mode 100644 public/js/lib/views/lobby/index.js create mode 100644 public/js/lib/views/lobby/lobby.js create mode 100644 public/js/lib/views/room/chat.js delete mode 100644 public/js/lib/views/room/index.js create mode 100644 public/js/lib/views/room/room.js create mode 100644 public/js/lib/views/room/userlist.js (limited to 'public/js/lib') diff --git a/public/js/lib/chat.js b/public/js/lib/chat.js deleted file mode 100644 index 0968418..0000000 --- a/public/js/lib/chat.js +++ /dev/null @@ -1,48 +0,0 @@ -var ChatView = View.extend({ - - template: $("#collaborator-template").html(), - - events: { - "submit form": "send", - "scroll #messages": "scroll", - }, - - initialize: function(){ - this.$msg = this.$("#message") - this.$messages = this.$("#messages") - this.messages = this.$messages.get(0) - }, - - add: function(msg){ - var $el = $( this.template ) - $el.find(".nick").html(msg.nick) - $el.find(".msg").html(msg.msg) - this.$messages.append($el) - if (! this.scrolled) { - this.scrollToBottom() - } - }, - - send: function(){ - var val = this.$msg.sanitize() - if (! val) return - var msg = {} - msg.room = room.name() - msg.msg = val - msg.nick = user.username - // app.socket.send("message", msg) - }, - - empty: function(){ - this.$messages.empty() - }, - - scrolled: false, - scroll: function(){ - this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100) - }, - scrollToBottom: function(){ - this.messages.scrollTop = document.body.scrollHeight - } - -}) diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js index d5ec35d..a333b45 100644 --- a/public/js/lib/views/index.js +++ b/public/js/lib/views/index.js @@ -1,9 +1,9 @@ +var lobby, room + var SiteRouter = Router.extend({ + el: "body", - events: { - }, - routes: { "/": 'lobby', "/v/:name": 'room', @@ -11,7 +11,7 @@ var SiteRouter = Router.extend({ initialize: function(){ if (! user.username) { - $("#login").show() + app.view = new LoginView() } else { this.route() @@ -19,11 +19,12 @@ var SiteRouter = Router.extend({ }, lobby: function(){ - this.view = new LobbyView () + lobby = app.view = new LobbyView () }, room: function(name){ - this.view = new RoomView (name) + console.log("hi") + room = app.view = new RoomView (name) }, }) \ No newline at end of file diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/index.js deleted file mode 100644 index 0306445..0000000 --- a/public/js/lib/views/lobby/index.js +++ /dev/null @@ -1,17 +0,0 @@ -var LobbyView = View.extend({ - - events: { - "form submit": "join" - }, - - initialize: function(){ - this.$createRoom = this.$("#create-room") - }, - - join: function(){ - var name = this.$createRoom.sanitizeName() - if (! name) { return } - window.location.href = "/v/" + name - } - -}) \ No newline at end of file diff --git a/public/js/lib/views/lobby/lobby.js b/public/js/lib/views/lobby/lobby.js new file mode 100644 index 0000000..6821436 --- /dev/null +++ b/public/js/lib/views/lobby/lobby.js @@ -0,0 +1,23 @@ +var LobbyView = View.extend({ + + el: "#lobby", + + events: { + "submit form": "join" + }, + + initialize: function(){ + this.$createRoom = this.$("#create-room") + }, + + join: function(e){ + console.log("hwat") + e && e.preventDefault() + var name = this.$createRoom.sanitizeName() + console.log("name") + + if (! name) { return } + window.location.href = "/v/" + name + } + +}) diff --git a/public/js/lib/views/login.js b/public/js/lib/views/login.js index 325d22d..280f051 100644 --- a/public/js/lib/views/login.js +++ b/public/js/lib/views/login.js @@ -1,12 +1,16 @@ var LoginView = View.extend({ + el: "#login", events: { - "form submit": "save", + "submit form": "save", }, initialize: function(){ this.$el.show() + this.$username = this.$("#username") + this.$username.focus() + console.log(this.$username) }, save: function(e){ diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js new file mode 100644 index 0000000..2c1140e --- /dev/null +++ b/public/js/lib/views/room/chat.js @@ -0,0 +1,63 @@ +var ChatView = View.extend({ + + el: "#chat", + + template: $("#message_template").html(), + + events: { + "submit form": "send", + "scroll #messages": "scroll", + }, + + initialize: function(){ + var $msg = this.$msg = this.$("#message") + this.$messages = this.$("#messages") + this.messages = this.$messages.get(0) + this.$msg.focus() + $(window).focus(function(){ $msg.focus() }) + }, + + seen: {}, + add: function(msg){ + var key = msg.date + "_" + msg.nick + if (key in this.seen) return + this.seen[key] = true + + var $el = $( this.template ) + $el.find(".nick").html(msg.nick) + $el.find(".msg").html(msg.msg) + this.$messages.append($el) + if (! this.scrolled) { + this.scrollToBottom() + } + }, + + send: function(e){ + e && e.preventDefault() + console.log("hi") + var val = this.$msg.sanitize() + this.$msg.focus() + if (! val) return + this.$msg.val("") + var msg = {} + msg.room = room.name + msg.msg = val + msg.nick = user.username + msg.date = +new Date + this.add(msg) + app.socket.send("message", msg) + }, + + empty: function(){ + this.$messages.empty() + }, + + scrolled: false, + scroll: function(){ + this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100) + }, + scrollToBottom: function(){ + this.messages.scrollTop = document.body.scrollHeight + } + +}) diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js deleted file mode 100644 index 58d7449..0000000 --- a/public/js/lib/views/room/index.js +++ /dev/null @@ -1,10 +0,0 @@ -var RoomView = View.extend({ - - events: { - }, - - initialize: function(name){ - app.socket = ws.connect(name) - } - -}) \ No newline at end of file diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js new file mode 100644 index 0000000..c8d7f3f --- /dev/null +++ b/public/js/lib/views/room/room.js @@ -0,0 +1,29 @@ +var chat + +var RoomView = View.extend({ + + events: { + }, + + initialize: function(name){ + this.name = name + chat = this.chatView = new ChatView () + this.userlist = new UserlistView () + + app.socket = ws.connect(name) + + app.socket.on("joined", function(msgs){ + msgs && msgs.forEach(chat.add) + }) + + app.socket.on("messages", function(msgs){ + msgs && msgs.forEach(chat.add) + }) + + app.socket.on("message", function(msg){ + chat.add(msg) + }) + + } + +}) \ No newline at end of file diff --git a/public/js/lib/views/room/userlist.js b/public/js/lib/views/room/userlist.js new file mode 100644 index 0000000..d638a02 --- /dev/null +++ b/public/js/lib/views/room/userlist.js @@ -0,0 +1,15 @@ +var UserlistView = View.extend({ + + el: "#userlist", + + events: { + }, + + initialize: function(){ + }, + + update: function(users){ + + }, + +}) \ No newline at end of file diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js index 3d62ef0..7d784ba 100644 --- a/public/js/lib/ws.js +++ b/public/js/lib/ws.js @@ -2,7 +2,7 @@ var ws = (function(){ var ws = {} var socket, ready ws.connect = function (room) { - if (this.socket) return; + if (ws.socket) return; var path = window.location.origin + '/' + room -- cgit v1.2.3-70-g09d2 From 0809c1c3a02943d51c6882039004365daa3e3920 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 21:40:04 -0400 Subject: functioning chat --- public/js/lib/views/room/chat.js | 2 +- public/js/lib/views/room/room.js | 2 ++ server/ws.js | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) (limited to 'public/js/lib') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js index 2c1140e..058d02d 100644 --- a/public/js/lib/views/room/chat.js +++ b/public/js/lib/views/room/chat.js @@ -45,7 +45,7 @@ var ChatView = View.extend({ msg.nick = user.username msg.date = +new Date this.add(msg) - app.socket.send("message", msg) + app.socket.emit("message", msg) }, empty: function(){ diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js index c8d7f3f..10c4d08 100644 --- a/public/js/lib/views/room/room.js +++ b/public/js/lib/views/room/room.js @@ -11,6 +11,8 @@ var RoomView = View.extend({ this.userlist = new UserlistView () app.socket = ws.connect(name) + + app.socket.emit("join", { nick: user.username }) app.socket.on("joined", function(msgs){ msgs && msgs.forEach(chat.add) diff --git a/server/ws.js b/server/ws.js index 75f430c..7199ac3 100644 --- a/server/ws.js +++ b/server/ws.js @@ -14,6 +14,7 @@ ws.add = function(name){ var messages = room.messages = [] room.users = {} sockets = {} + console.log("new room >> " + name) var ns = ws.io.of('/' + name) @@ -21,8 +22,10 @@ ws.add = function(name){ var nick + console.log("new connection ...") socket.on('join', function(data){ nick = data.nick + console.log("joined >> " + nick) if (sockets[nick]) { // already connected? sockets[nick].disconnect() @@ -33,6 +36,8 @@ ws.add = function(name){ }) socket.on('message', function(data){ + console.log(data) + console.log("<" + data.nick + "> " + data.msg) if (messages.length > 20) { messages.shift() } messages.push(data) ns.emit('message', data) -- cgit v1.2.3-70-g09d2 From 78f7f5ae58d9357e240873c137e8940e0647fbbd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 6 Aug 2015 01:15:05 -0400 Subject: userlist stuph --- public/js/lib/views/room/chat.js | 2 +- public/js/lib/views/room/room.js | 19 ++++++++++--------- public/js/lib/views/room/userlist.js | 20 +++++++++++++++++--- server/ws.js | 8 +++----- 4 files changed, 31 insertions(+), 18 deletions(-) (limited to 'public/js/lib') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js index 058d02d..222522f 100644 --- a/public/js/lib/views/room/chat.js +++ b/public/js/lib/views/room/chat.js @@ -9,7 +9,7 @@ var ChatView = View.extend({ "scroll #messages": "scroll", }, - initialize: function(){ + initialize: function(socket){ var $msg = this.$msg = this.$("#message") this.$messages = this.$("#messages") this.messages = this.$messages.get(0) diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js index 10c4d08..3b3b253 100644 --- a/public/js/lib/views/room/room.js +++ b/public/js/lib/views/room/room.js @@ -6,20 +6,21 @@ var RoomView = View.extend({ }, initialize: function(name){ - this.name = name - chat = this.chatView = new ChatView () - this.userlist = new UserlistView () app.socket = ws.connect(name) + + var base = this + this.name = name + chat = this.chatView = new ChatView (socket) + this.userlist = new UserlistView (socket) + app.socket.emit("join", { nick: user.username }) - - app.socket.on("joined", function(msgs){ - msgs && msgs.forEach(chat.add) - }) - app.socket.on("messages", function(msgs){ - msgs && msgs.forEach(chat.add) + app.socket.on("welcome", function(room){ + room.messages.forEach(chat.add) + base.userlist.users = room.users + base.userlist.update() }) app.socket.on("message", function(msg){ diff --git a/public/js/lib/views/room/userlist.js b/public/js/lib/views/room/userlist.js index d638a02..600f647 100644 --- a/public/js/lib/views/room/userlist.js +++ b/public/js/lib/views/room/userlist.js @@ -5,11 +5,25 @@ var UserlistView = View.extend({ events: { }, - initialize: function(){ + users: {}, + initialize: function(socket){ + var base = this + app.socket.on("joined", function(data){ + base.users[data.nick] = true + base.update() + }) + app.socket.on("parted", function(data){ + delete base.users[data.nick] + base.update() + }) }, - update: function(users){ - + update: function(){ + base.el.empty() + Object.keys(base.users).sort().forEach(function(nick){ + var el = document.createElement("div") + base.el.appendChild(el) + }) }, }) \ No newline at end of file diff --git a/server/ws.js b/server/ws.js index 7199ac3..92c7d5a 100644 --- a/server/ws.js +++ b/server/ws.js @@ -22,22 +22,19 @@ ws.add = function(name){ var nick - console.log("new connection ...") socket.on('join', function(data){ nick = data.nick - console.log("joined >> " + nick) if (sockets[nick]) { // already connected? sockets[nick].disconnect() sockets[nick] = socket room.users[nick] = true - socket.emit("messages", messages) + socket.emit("welcome", room) + ns.emit('joined', data) } }) socket.on('message', function(data){ - console.log(data) - console.log("<" + data.nick + "> " + data.msg) if (messages.length > 20) { messages.shift() } messages.push(data) ns.emit('message', data) @@ -46,6 +43,7 @@ ws.add = function(name){ socket.on('disconnect', function(){ delete sockets[nick] delete room.users[nick] + ns.emit('parted', {nick:nick}) }) }) -- cgit v1.2.3-70-g09d2 From 3c3a30c3676c1abef87b8faaf7921f9a7244730d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 6 Aug 2015 02:20:00 -0400 Subject: relocating events --- public/js/lib/views/room/chat.js | 5 ++--- public/js/lib/views/room/room.js | 9 +++------ public/js/vendor/util.js | 1 + 3 files changed, 6 insertions(+), 9 deletions(-) (limited to 'public/js/lib') diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js index 222522f..0932e47 100644 --- a/public/js/lib/views/room/chat.js +++ b/public/js/lib/views/room/chat.js @@ -24,8 +24,8 @@ var ChatView = View.extend({ this.seen[key] = true var $el = $( this.template ) - $el.find(".nick").html(msg.nick) - $el.find(".msg").html(msg.msg) + $el.find(".nick").html(sanitize(msg.nick)) + $el.find(".msg").html(sanitizeHTML(msg.msg)) this.$messages.append($el) if (! this.scrolled) { this.scrollToBottom() @@ -34,7 +34,6 @@ var ChatView = View.extend({ send: function(e){ e && e.preventDefault() - console.log("hi") var val = this.$msg.sanitize() this.$msg.focus() if (! val) return diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js index 3b3b253..13f08ce 100644 --- a/public/js/lib/views/room/room.js +++ b/public/js/lib/views/room/room.js @@ -1,5 +1,3 @@ -var chat - var RoomView = View.extend({ events: { @@ -11,20 +9,19 @@ var RoomView = View.extend({ var base = this this.name = name - chat = this.chatView = new ChatView (socket) + this.chatView = new ChatView (socket) this.userlist = new UserlistView (socket) - app.socket.emit("join", { nick: user.username }) app.socket.on("welcome", function(room){ - room.messages.forEach(chat.add) + room.messages.forEach(base.chat.add) base.userlist.users = room.users base.userlist.update() }) app.socket.on("message", function(msg){ - chat.add(msg) + base.chat.add(msg) }) } diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js index 73a25ad..3637f49 100644 --- a/public/js/vendor/util.js +++ b/public/js/vendor/util.js @@ -14,6 +14,7 @@ function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } function sanitizeName (s){ return (s || "").replace(new RegExp("[^-_a-zA-Z0-9]", 'g'), "") } function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") } +function sanitizeHTML (s){ return (s || "").replace(/&/g, "&").replace(//g, ">") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") } -- cgit v1.2.3-70-g09d2 From 18ebdc7abb9982ceeba1aac651b1c874fad2b6c0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 6 Aug 2015 11:11:54 -0400 Subject: refactor video as view --- public/js/lib/video.js | 102 +++++++++++++++++++++++++------------------------ 1 file changed, 53 insertions(+), 49 deletions(-) (limited to 'public/js/lib') diff --git a/public/js/lib/video.js b/public/js/lib/video.js index 2eb5c82..aa01d23 100644 --- a/public/js/lib/video.js +++ b/public/js/lib/video.js @@ -1,12 +1,16 @@ -var video = (function(){ - var video = {} - var mx - - video.init = function(media){ - video.build() - } +var VideoView = View.extend({ + + events: { + }, + + initialize: function(media){ + this.media = media + this.mx + this.build(media) + }, - video.build = function(media){ + build: function(media){ + var mxType switch (media.type) { case 'video': mxType = MX.Video @@ -21,71 +25,71 @@ var video = (function(){ if (app.muted) { media.mute = true } - mx = new mxType({ + this.mx = new mxType({ media: media, backface: false, }) - video.el.innerHTML = "" - video.el.appendChild(mx.el) + this.el.innerHTML = "" + this.el.appendChild(this.mx.el) - mx.load() - } + this.mx.load() + }, - video.play = function(){ - mx.play() - } + play: function(){ + this.mx.play() + }, - video.pause = function(){ - mx.pause() - } + pause: function(){ + this.mx.pause() + }, - video.toggle = function(shouldPause){ + toggle: function(shouldPause){ if (typeof shouldPause !== "boolean") { - shouldPause = ! mx.paused + shouldPause = ! this.mx.paused } - shouldPause ? mx.pause() : mx.play() + shouldPause ? this.mx.pause() : this.mx.play() return shouldPause - } + }, - video.toggleMuted = function(shouldMute){ + toggleMuted: function(shouldMute){ if (typeof shouldMute !== "boolean") { - shouldMute = ! mx.muted + shouldMute = ! this.mx.muted } - shouldMute ? mx.mute() : mx.unmute() + shouldMute ? this.mx.mute() : this.mx.unmute() return shouldMute - } + }, - video.paused = function(){ - return mx.paused - } + paused: function(){ + return this.mx.paused + }, - video.muted = function(){ - return mx.muted - } + muted: function(){ + return this.mx.muted + }, - video.seek = function(n){ - mx.seek(n) - } + seek: function(n){ + this.mx.seek(n) + }, - video.setLoop = function(shouldLoop){ - mx.setLoop(shouldLoop) - } + setLoop: function(shouldLoop){ + this.mx.setLoop(shouldLoop) + }, - video.mute = function(muted){ + mute: function(muted){ if (muted) { - mx.mute() + this.mx.mute() } else { - mx.unmute() + this.mx.unmute() } - } + }, - video.unmute = function(){ - mx.unmute() - } + unmute: function(){ + this.mx.unmute() + }, - video.setVolume = function(n){ - mx.setVolume(n) + setVolume: function(n){ + this.mx.setVolume(n) } -})() +}) -- cgit v1.2.3-70-g09d2