ws shit

7 files changed, 324 insertions, 63 deletions

diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..81e952f
--- /dev/null
+++ b/Procfile
@@ -0,0 +1 @@
+web: node server
diff --git a/public/js/index.js b/public/js/index.js
index d1af979..560a2a1 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -2,7 +2,10 @@ var app = (function(){
   var app = {}
   
   app.init = function(){
-    // app.socket =
+    // ws.connect()
+
+    $(window).on("focus", app.focus)
+    $(window).on("blur", app.blur)
   }
   
   document.addEventListener('DOMContentLoaded', app.init)  
diff --git a/public/js/lib/chat.js b/public/js/lib/chat.js
index 05592c4..0968418 100644
--- a/public/js/lib/chat.js
+++ b/public/js/lib/chat.js
@@ -3,30 +3,46 @@ var ChatView = View.extend({
   template: $("#collaborator-template").html(),
 
   events: {
-    "submit form": "send"
+    "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 = this.$msg.val()
+    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/socket.js b/public/js/lib/socket.js
deleted file mode 100644
index 4fd11a5..0000000
--- a/public/js/lib/socket.js
+++ /dev/null
@@ -1,59 +0,0 @@
-var socket = function(){
-  var socket = {}
-	socket.connect: function () {
-			if (this.socket) return;
-			var socketPath = window.location.origin + '/' + posthang.room.subdomain
-	
-			this.socket = io(socketPath);
-			// this.socket.on('connect', function(){ console.log(new Date(), "connected")});
-			this.socket.on('ready', $.proxy(this.socketReady, this));
-			this.socket.on('error', $.proxy(this.socketError, this));
-			this.socket.on('connect', $.proxy(this.socketConnected, this));
-			this.socket.on('reconnect', $.proxy(this.socketReconnected, this));
-			this.socket.on('disconnect', $.proxy(this.disconnected, this))
-
-			this.socket.on('users', $.proxy(this.updateUsers, this));
-			this.socket.on('message', $.proxy(this.chatView.append, this.chatView));
-			this.socket.on('info', $.proxy(this.chatView.appendInfo, this.chatView));
-			this.socket.on('mediaId', $.proxy(this.mediaView.updateMediaId, this.mediaView));
-			this.socket.on('messageId', $.proxy(this.chatView.updateMessageId, this.chatView));
-			this.socket.on('roomDeleted', $.proxy(this.roomDeleted, this));
-			this.socket.on('userBanned', $.proxy(this.userBanned, this));
-			this.socket.on('fave', $.proxy(this.faveView.faved, this.faveView))
-			
-			$(window).on("scroll", $.proxy(this.didScroll, this))
-			$(window).on("focus", $.proxy(this.focus, this))
-			$(window).on("blur", $.proxy(this.blur, this))
-			
-			this.chatView.fetchMessages();
-			this.mediaView.fetchMedia();
-		},
-		
-		socketReady: function (obj) {
-			console.log(new Date(), "ready")
-			
-			// presumably we might have reconnected?
-			if (this.socketIsReady) {
-				this.chatView.fetchAndDedupe()
-			}
-			else {
-				this.socketIsReady = true
-				this.checkIfLoaded()
-			}			
-		},
-
-		socketError: function (a,b,c){
-			console.log(new Date(), "error", a, b, c)
-		},
-		socketConnected: function (){
-			console.log(new Date(), "connected")
-		},
-		socketReconnected: function (){
-			console.log(new Date(), "reconnected")
-		},
-				
-		socketDisconnected: function (){
-			this.chatView.appendInfo({ content: "Disconnected." })
-		}
-	}
-}
\ No newline at end of file
diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js
new file mode 100644
index 0000000..37a8248
--- /dev/null
+++ b/public/js/lib/ws.js
@@ -0,0 +1,43 @@
+var ws = function(){
+  var ws = {}
+  var socket, socketIsReady
+	ws.connect = function () {
+    if (this.socket) return;
+    var socketPath = window.location.origin + '/' + posthang.room.subdomain
+
+    ws.socket = socket = io(socketPath)
+    // this.socket.on('connect', function(){ console.log(new Date(), "connected")})
+    socket.on('ready', ws.ready)
+    socket.on('error', ws.error)
+    socket.on('connect', ws.connected)
+    socket.on('reconnect', ws.reconnected)
+    socket.on('disconnect', ws.disconnected)
+  }
+  
+  ws.ready = function (obj) {
+    console.log(new Date(), "ready")
+    
+    // presumably we might have reconnected?
+    if (socketIsReady) {
+      this.chatView.fetchAndDedupe()
+    }
+    else {
+      socketIsReady = true
+      this.checkIfLoaded()
+    }
+  }
+
+  ws.error = function (a,b,c){
+    console.log(new Date(), "error", a, b, c)
+  }
+  ws.connected = function (){
+    console.log(new Date(), "connected")
+  }
+  ws.reconnected = function (){
+    console.log(new Date(), "reconnected")
+  }
+  ws.disconnected = function (){
+    console.log(new Date(), "disconnected")
+    // this.chatView.appendInfo({ content: "Disconnected." })
+  }
+}
\ No newline at end of file
diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js
new file mode 100644
index 0000000..0f5c6ed
--- /dev/null
+++ b/public/js/vendor/util.js
@@ -0,0 +1,256 @@
+if (window.$) {
+  $.fn.int = function() { return parseInt($(this).val(),10) }
+  $.fn.float = function() { return parseFloat($(this).val()) }
+  $.fn.string = function() { return trim($(this).val()) }
+  $.fn.enable = function() { return $(this).attr("disabled",null) }
+  $.fn.disable = function() { return $(this).attr("disabled","disabled") }
+  $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) }
+  $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) }
+  $.fn.toDollars = function(i) { return $(this).html((i/100).toFixed(2)) }
+}
+
+function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
+function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
+function stripHTML (s){ return (s || "").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,"-") }
+function rgb_string (rgb) { return "rgb(" + rgb.map(Math.round).join(",") + ")" }
+function rgba_string (rgb,a) { return "rgba(" + rgb.map(Math.round).join(",") + "," + a + ")" }
+function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ var s = n.toString(16); return s.length == 1 ? "0"+s : s }).join("") }
+function parse_rgba_string (s) { return s.match(/(\d+)/g).slice(0,3) }
+
+var E = Math.E
+var PI = Math.PI
+var PHI = (1+Math.sqrt(5))/2
+var TWO_PI = PI*2
+var HALF_PI = PI/2
+var LN10 = Math.LN10
+function clamp(n,a,b){ return n<a?a:n<b?n:b }
+function norm(n,a,b){ return (n-a) / (b-a) }
+function lerp(n,a,b){ return (b-a)*n+a }
+function mix(n,a,b){ return a*(1-n)+b*n }
+function ceil(n){ return Math.ceil(n) }
+function floor(n){ return Math.floor(n) }
+function round(n){ return Math.round(n) }
+function quantize(n,a){ return round(n / a) * a }
+function max(a,b){ return Math.max(a,b) }
+function min(a,b){ return Math.min(a,b) }
+function abs(n){ return Math.abs(n) }
+function sign(n){ return n ? Math.abs(n)/n : 0 }
+function pow(n,b) { return Math.pow(n,b) }
+function exp(n) { return Math.exp(n) }
+function log(n){ return Math.log(n) }
+function ln(n){ return Math.log(n)/LN10 }
+function sqrt(n) { return Math.sqrt(n) }
+function cos(n){ return Math.cos(n) }
+function sin(n){ return Math.sin(n) }
+function tan(n){ return Math.tan(n) }
+function acos(n){ return Math.cos(n) }
+function asin(n){ return Math.sin(n) }
+function atan(n){ return Math.atan(n) }
+function atan2(a,b){ return Math.atan2(a,b) }
+function sec(n){ return 1/cos(n) }
+function csc(n){ return 1/sin(n) }
+function cot(n){ return 1/tan(n) }
+function cosp(n){ return (1+Math.cos(n))/2 } // cos^2
+function sinp(n){ return (1+Math.sin(n))/2 }
+function random(){ return Math.random() }
+function rand(n){ return (Math.random()*n) }
+function randint(n){ return rand(n)|0 }
+function randrange(a,b){ return a + rand(b-a) }
+function choice(a){ return a[randint(a.length)] }
+function deg(n){ return n*180/PI }
+function rad(n){ return n*PI/180 }
+function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) }
+function mod(n,m){ return n-(m * floor(n/m)) }
+function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) }
+function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) }
+function avg(m,n,a){ return (m*(a-1)+n)/a }
+function noop(){}
+
+function pixel(x,y){ return 4*(mod(y,actual_h)*actual_w+mod(x,actual_w)) }
+function rgbpixel(d,x,y){
+  var p = pixel(~~x,~~y)
+  r = d[p]
+  g = d[p+1]
+  b = d[p+2]
+  a = d[p+3]
+}
+function fit(d,x,y){ rgbpixel(d,x*actual_w/w,y*actual_h/h) }
+
+function step(a, b){
+  return (b >= a) + 0 
+               // ^^ bool -> int
+}
+
+function julestep (a,b,n) {
+  return clamp(norm(n,a,b), 0.0, 1.0);
+}
+
+// hermite curve apparently
+function smoothstep(min,max,n){
+  var t = clamp((n - min) / (max - min), 0.0, 1.0);
+  return t * t * (3.0 - 2.0 * t)
+}
+
+function shuffle(a){
+  var r, swap
+  for (var i = a.length; i > 0; i--){
+    r = randint(i)
+    swap = a[i-1]
+    a[i-1] = a[r]
+    a[r] = swap
+  }
+  return a
+}
+function reverse(a){
+  var reversed = []
+  for (var i = 0, _len = a.length-1; i <= _len; i++){
+    reversed[i] = a[_len-i]
+  }
+  return reversed
+}
+function deinterlace(a){
+  var odd = [], even = []
+  for (var i = 0, _len = a.length; i < _len; i++) {
+    if (i % 2) even.push(a[i])
+    else odd.push(a[i])
+  }
+  return [even, odd]
+}
+function weave(a){
+  var aa = deinterlace(a)
+  var b = []
+  aa[0].forEach(function(el){ b.push(el) })
+  reverse(aa[1]).forEach(function(el){ b.push(el) })
+  return b
+}
+function range(m,n,s){
+	var a = []
+	s = s || 1
+	for (var i = m; i <= n; i += s) {
+		a.push(i)
+	}
+	return a
+}
+
+var guid_syllables = "iz az ez or iv ex baz el lo lum ot un no".split(" ")
+var guid_n = 0
+function guid(n){
+	var len = guid_syllables.length
+	return ((++guid_n*(len-1)*(~~log(guid_n))).toString(len)).split("").map(function(s){
+		return guid_syllables[parseInt(s, len) % len--]
+	}).join("")
+}
+
+function defaults (dest, src) {
+	dest = dest || {}
+	for (var i in src) {
+		dest[i] = typeof dest[i] == 'undefined' ? src[i] : dest[i]
+	}
+	return dest
+}
+
+// Change straight quotes to curly and double hyphens to em-dashes.
+function smarten(a) {
+  a = a.replace(/(^|[-\u2014\s(\["])'/g, "$1\u2018");       // opening singles
+  a = a.replace(/'/g, "\u2019");                            // closing singles & apostrophes
+  a = a.replace(/(^|[-\u2014/\[(\u2018\s])"/g, "$1\u201c"); // opening doubles
+  a = a.replace(/"/g, "\u201d");                            // closing doubles
+  a = a.replace(/--/g, "\u2014");                           // em-dashes
+  return a
+};
+
+
+function pairs(h){
+	var a = []
+	for (var i in h) {
+		if(h.hasOwnProperty(i)) {
+			a.push([i, h[i]])
+		}
+	}
+	return a
+}
+function invert_hash (h) {
+	var k = {}
+	for (var i in h) { if (h.hasOwnProperty(i)) k[h[i]] = i }
+	return k
+}
+function filenameFromUrl (url) {
+  var partz = url.split( "/" )
+  return partz[partz.length-1].split(".")[0]
+}
+
+function bitcount(v) {
+  v = v - ((v >>> 1) & 0x55555555);
+  v = (v & 0x33333333) + ((v >>> 2) & 0x33333333);
+  return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24;
+}
+
+// Function.bind polyfill
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP && oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+
+// rAF polyfill
+(function() {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
+                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+ 
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
+              timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+ 
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
+
+
+function selectElementContents(el) {
+  if (window.getSelection && document.createRange) {
+    var sel = window.getSelection();
+    var range = document.createRange();
+    range.selectNodeContents(el);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  } else if (document.selection && document.body.createTextRange) {
+    var textRange = document.body.createTextRange();
+    textRange.moveToElementText(el);
+    textRange.select();
+  }
+}
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index d11ca9b..d946f86 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -7,14 +7,15 @@
 <script src="js/vendor/mx/mx.youtube.js"></script>
 <script src="js/vendor/oktween.js"></script>
 <script src="js/vendor/parser.js"></script>
+<script src="js/vendor/util.js"></script>
 <script src="js/vendor/view/view.js"></script>
 <script src="js/vendor/view/formview.js"></script>
 <script src="js/vendor/view/router.js"></script>
 <script src="js/lib/bg.js"></script>
 <script src="js/lib/chat.js"></script>
-<script src="js/lib/socket.js"></script>
 <script src="js/lib/user.js"></script>
 <script src="js/lib/video.js"></script>
+<script src="js/lib/ws.js"></script>
 <script src="js/index.js"></script>
 
 <script type="text/javascript" src="http://www.youtube.com/player_api"></script>