diff --git a/etc/routes.js b/etc/routes.js index 1cd11ca..7bc9c20 100644 --- a/etc/routes.js +++ b/etc/routes.js @@ -13,8 +13,9 @@ module.exports.setRoutes = function(app, BASE_VIEW_OPTIONS) { , _.defaults( { scripts: [ 'libs/jqdnr.js' - , 'client.js' + , 'libs/twitter-text-1.4.2.js' , '/socket.io/socket.io.js' + , 'client.js' ] } , BASE_VIEW_OPTIONS diff --git a/package.json b/package.json index e839e41..f0b33c4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "author": "AD (http://gaarf.info)", "name": "socket-twitchat", "description": "A nodejs experiment", - "version": "0.7.3", + "version": "0.7.4", "repository": { "type": "git", "url": "https://github.com/gaarf/socket-twitchat" diff --git a/public/javascripts/client.js b/public/javascripts/client.js index 5aa374a..072b236 100644 --- a/public/javascripts/client.js +++ b/public/javascripts/client.js @@ -5,22 +5,25 @@ jQuery(document).ready(function($) { $convo = $page.find('.chatroom ol.conversation'), $compose = $page.find('.chatroom form.compose'), $input = $compose.find('input'), - $twitstream = $page.find('.twitstream ol.tweets'); + $twitstream = $page.find('.twitstream ol.tweets'); var socket = new io.Socket(); socket.connect(); + $convo.delegate('.disconnect a', 'click', function(e) { e.preventDefault(); window.location.reload(); }); + $roster.delegate('a', 'click', function(e) { e.preventDefault(); socket.send(JSON.stringify({'slash':['help','nick']})); $input.val("/nick ").focus(); }); + socket.on('connect', function(){ console.info('socket connected'); @@ -83,8 +86,10 @@ jQuery(document).ready(function($) { }); }); + socket.on('message', function(str){ - var mySessionId = this.transport.sessionid; + var mySessionId = this.transport.sessionid, + doAlert = false; $.each(JSON.parse(str), function(k,obj) { // console.log(k,obj) @@ -106,6 +111,7 @@ jQuery(document).ready(function($) { case 'join': if(mySessionId != obj.id) { appendSystem(''+obj.name+' has joined.', 'join'); + doAlert = k; } else { appendSystem('You are now named '+obj.name+'.'); @@ -115,11 +121,12 @@ jQuery(document).ready(function($) { case 'gone': if(mySessionId != obj.id) { appendSystem(''+obj.name+' is gone.', 'gone'); + doAlert = k; } break; case 'topic': - setTitle(obj.what); + setTitleAndHeader(obj.what); if(obj.who) { $twitstream.empty(); if(obj.what) { @@ -128,12 +135,14 @@ jQuery(document).ready(function($) { else { appendSystem( 'The topic was cleared by '+obj.who.name+'.', 'topic' ); } + doAlert = k; } break; case 'stop': if(obj.who) { appendSystem( 'The stream was stopped by '+obj.who.name+'.', 'stop' ); + doAlert = k; } break; @@ -143,6 +152,7 @@ jQuery(document).ready(function($) { case 'speech': appendSpeech(obj, mySessionId); + doAlert = k; break; case 'buffer': @@ -161,19 +171,59 @@ jQuery(document).ready(function($) { } }); + + if(doAlert) { + if($('body').is('.blurred')) { + blinkTitle("["+doAlert+"]") + } + } + }); + + socket.on('disconnect', function(){ $roster.empty(); $compose.children().attr('disabled', true); appendSystem('Socket disconnected. reload', 'disconnect'); }); - function setTitle(str) { + + $(window).bind({ + focus: function() { + $('body').removeClass('blurred'); + blinkTitle(false); + }, + blur: function() { $('body').addClass('blurred'); } + }); + + var BLINK_TITLE_INTERVAL; + + function blinkTitle(blinkTxt) { + clearInterval(BLINK_TITLE_INTERVAL); + + var $title = $('title'), + originalTxt = $title.data('originalTxt') || $title.text(); + + $title + .data('originalTxt', originalTxt) + .text(originalTxt) + .removeClass('blink'); + + if(blinkTxt) { + BLINK_TITLE_INTERVAL = setInterval(function() { + if($title.is('.blink')) { $title.removeClass('blink').text($title.data('originalTxt')); } + else { $title.addClass('blink').text(blinkTxt); } + }, 1000); + } + } + + function setTitleAndHeader(str) { $('title').text('TwitChat'+(str?' / '+str:'')); $('header')[str?'text':'html'](str||'use /topic!'); } + function appendSystem(msg, addCls) { $('
  • ') .addClass('system '+(addCls||''))