diff --git a/app/views/js/_websocket_js.haml b/app/views/js/_websocket_js.haml index dd409da08..cab56c5a1 100644 --- a/app/views/js/_websocket_js.haml +++ b/app/views/js/_websocket_js.haml @@ -4,157 +4,7 @@ :javascript WebSocket.__swfLocation = "#{javascript_path 'vendor/WebSocketMain.swf'}"; - - var WebSocketReceiver = { - initialize: function() { - ws = new WebSocket("#{(APP_CONFIG[:socket_secure])?'wss':'ws'}://#{request.host}:#{APP_CONFIG[:socket_port]}/"); - - //Attach onmessage to websocket - ws.onmessage = WSR.onMessage; - ws.onclose = function() { debug("socket closed"); }; - ws.onopen = function() { - ws.send(location.pathname); - WSR.debug("connected..."); - }; - }, - - onMessage: function(evt) { - var obj = jQuery.parseJSON(evt.data); - if(obj['notice']){ - WebSocketReceiver.processNotification(obj['notice']); - - }else if (obj['class'] == 'people'){ - WSR.debug("got a " + obj['class']); - WebSocketReceiver.processPerson(obj); - - }else{ - WSR.debug("got a " + obj['class'] + " for aspects " + obj['aspect_ids']); - - if (obj['class']=="retractions"){ - WebSocketReceiver.processRetraction(obj['post_id']); - - }else if (obj['class']=="comments"){ - WebSocketReceiver.processComment(obj['post_id'], obj['html'], {'notification':obj['notification'], 'mine?':obj['mine?'], 'my_post?':obj['my_post?']}) - - }else if (obj['class']=='photos' && WebSocketReceiver.onPageForClass('albums')){ - WebSocketReceiver.processPhotoInAlbum(obj['photo_hash']) - }else{ - WebSocketReceiver.processPost(obj['class'], obj['html'], obj['aspect_ids']) - } - } - }, - - processPerson: function(response){ - form = $('.webfinger_form:visible'); - form.siblings('.spinner').hide(); - result_ul = form.siblings('.webfinger_result'); - if(response['status'] == 'fail'){ - result_ul.children('.error').show(); - result_ul.children('.webfinger_error').text(response['response']).show(); - }else{ - $('#people_stream').prepend(response['html']).slideDown('slow', function(){}); - var first_li = result_ul.find('li:first'); - first_li.after(response['html']); - result_ul.find("[name='request[into]']").val(result_ul.attr('aspect_id')); - result_ul.children(':nth-child(2)').slideDown('fast', function(){}); - } - }, - - processNotification: function(html){ - $('#notification').html(html).fadeIn(200).delay(4000).fadeOut(200, function(){ $(this).html("");}); - }, - - processRetraction: function(post_id){ - $("*[data-guid='"+post_id+"']").fadeOut(400, function(){$(this).remove()}); - if($("#main_stream")[0].childElementCount == 0){ - $("#no_posts").fadeIn(200); - } - }, - - processComment: function(post_id, html, opts){ - post = $("*[data-guid='"+post_id+"']'"); - $('.comments li:last', post ).before( - $(html).fadeIn("fast", function(){}) - ); - toggler = $('.show_post_comments', post); - - if(toggler.length > 0){ - toggler.html( - toggler.html().replace(/\d+/,$('.comments', post)[0].childElementCount -1) - ); - - if( !$(".comments", post).is(':visible') ){ - toggler.click(); - } - } - - if( !opts['mine?'] && opts['my_post?']) { - WebSocketReceiver.processNotification(opts['notification']); - } - }, - - processPost: function(className, html, aspectIds){ - if(WebSocketReceiver.onPageForAspects(aspectIds)){ - if( $("#no_posts").is(":visible") ){ - $("#no_posts").fadeOut(400, WebSocketReceiver.addPostToStream(html)).hide(); - } else { - WebSocketReceiver.addPostToStream(html); - } - } - }, - - addPostToStream: function(html){ - $("#main_stream:not('.show')").prepend( - $(html).fadeIn("fast", function(){ - $("#main_stream").find("label").first().inFieldLabels(); - }) - ); - }, - - processPhotoInAlbum: function(photoHash){ - if (location.href.indexOf(photoHash['album_id']) == -1){ - return ; - } - - html = "
\ - \ - \"New \ -
" - $("#thumbnails").append( $(html) ) - $("#"+ photoHash['id'] + " img").load( function() { - $(this).fadeIn("slow"); - }); - }, - - onPageForClass: function(className){ - return (location.href.indexOf(className) != -1 ); - }, - - onPageForAspects: function(aspectIds){ - if(location.pathname == '/' && WebSocketReceiver.onPageOne()){ - return true - } - var found = false; - $.each(aspectIds, function(index, value) { - if(WebSocketReceiver.onPageForAspect(value)){ found = true }; - }); - return found; - }, - - onPageForAspect: function(aspectId){ - return (location.href.indexOf(aspectId) != -1 ) - }, - - onPageOne: function() { - var c = document.location.search.charAt(document.location.search.length-1); - return ((c =='') || (c== '1')); - }, - debug: function(str){ - $("#debug").append("

" + str); - } - }; - var WSR = WebSocketReceiver - $(document).ready(function(){ - WSR.initialize(); + WSR.initialize("#{(APP_CONFIG[:socket_secure])?'wss':'ws'}://#{request.host}:#{APP_CONFIG[:socket_port]}/"); }); + diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 450465f0c..c073ea9bf 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -35,6 +35,7 @@ - if current_user = include_javascripts :flash_socket unless modern_browser? + = javascript_include_tag 'web-socket-receiver' = render 'js/websocket_js' = csrf_meta_tag @@ -70,8 +71,8 @@ .span-24.last = yield - /.span-24.last - /= render "posts/debug" + .span-24.last + = render "posts/debug" .clearfix %footer diff --git a/public/javascripts/web-socket-receiver.js b/public/javascripts/web-socket-receiver.js new file mode 100644 index 000000000..5eb270446 --- /dev/null +++ b/public/javascripts/web-socket-receiver.js @@ -0,0 +1,149 @@ +var WebSocketReceiver = { + initialize: function(url) { + ws = new WebSocket(url); + + //Attach onmessage to websocket + ws.onmessage = WSR.onMessage; + ws.onclose = function() { debug("socket closed"); }; + ws.onopen = function() { + ws.send(location.pathname); + WSR.debug("connected..."); + }; + }, + + onMessage: function(evt) { + var obj = jQuery.parseJSON(evt.data); + if(obj['notice']){ + WebSocketReceiver.processNotification(obj['notice']); + + }else if (obj['class'] == 'people'){ + WSR.debug("got a " + obj['class']); + WebSocketReceiver.processPerson(obj); + + }else{ + WSR.debug("got a " + obj['class'] + " for aspects " + obj['aspect_ids']); + + if (obj['class']=="retractions"){ + WebSocketReceiver.processRetraction(obj['post_id']); + + }else if (obj['class']=="comments"){ + WebSocketReceiver.processComment(obj['post_id'], obj['html'], {'notification':obj['notification'], 'mine?':obj['mine?'], 'my_post?':obj['my_post?']}) + + }else if (obj['class']=='photos' && WebSocketReceiver.onPageForClass('albums')){ + WebSocketReceiver.processPhotoInAlbum(obj['photo_hash']) + }else{ + WebSocketReceiver.processPost(obj['class'], obj['html'], obj['aspect_ids']) + } + } + }, + + processPerson: function(response){ + form = $('.webfinger_form:visible'); + form.siblings('.spinner').hide(); + result_ul = form.siblings('.webfinger_result'); + if(response['status'] == 'fail'){ + result_ul.children('.error').show(); + result_ul.children('.webfinger_error').text(response['response']).show(); + }else{ + $('#people_stream').prepend(response['html']).slideDown('slow', function(){}); + var first_li = result_ul.find('li:first'); + first_li.after(response['html']); + result_ul.find("[name='request[into]']").val(result_ul.attr('aspect_id')); + result_ul.children(':nth-child(2)').slideDown('fast', function(){}); + } + }, + + processNotification: function(html){ + $('#notification').html(html).fadeIn(200).delay(4000).fadeOut(200, function(){ $(this).html("");}); + }, + + processRetraction: function(post_id){ + $("*[data-guid='"+post_id+"']").fadeOut(400, function(){$(this).remove()}); + if($("#main_stream")[0].childElementCount == 0){ + $("#no_posts").fadeIn(200); + } + }, + + processComment: function(post_id, html, opts){ + post = $("*[data-guid='"+post_id+"']'"); + $('.comments li:last', post ).before( + $(html).fadeIn("fast", function(){}) + ); + toggler = $('.show_post_comments', post); + + if(toggler.length > 0){ + toggler.html( + toggler.html().replace(/\d+/,$('.comments', post)[0].childElementCount -1) + ); + + if( !$(".comments", post).is(':visible') ){ + toggler.click(); + } + } + + if( !opts['mine?'] && opts['my_post?']) { + WebSocketReceiver.processNotification(opts['notification']); + } + }, + + processPost: function(className, html, aspectIds){ + if(WebSocketReceiver.onPageForAspects(aspectIds)){ + if( $("#no_posts").is(":visible") ){ + $("#no_posts").fadeOut(400, WebSocketReceiver.addPostToStream(html)).hide(); + } else { + WebSocketReceiver.addPostToStream(html); + } + } + }, + + addPostToStream: function(html){ + $("#main_stream:not('.show')").prepend( + $(html).fadeIn("fast", function(){ + $("#main_stream").find("label").first().inFieldLabels(); + }) + ); + }, + + processPhotoInAlbum: function(photoHash){ + if (location.href.indexOf(photoHash['album_id']) == -1){ + return ; + } + + html = "

\ + \ + \"New \ +
" + $("#thumbnails").append( $(html) ) + $("#"+ photoHash['id'] + " img").load( function() { + $(this).fadeIn("slow"); + }); + }, + + onPageForClass: function(className){ + return (location.href.indexOf(className) != -1 ); + }, + + onPageForAspects: function(aspectIds){ + if(location.pathname == '/' && WebSocketReceiver.onPageOne()){ + return true + } + var found = false; + $.each(aspectIds, function(index, value) { + if(WebSocketReceiver.onPageForAspect(value)){ found = true }; + }); + return found; + }, + + onPageForAspect: function(aspectId){ + return (location.href.indexOf(aspectId) != -1 ) + }, + + onPageOne: function() { + var c = document.location.search.charAt(document.location.search.length-1); + return ((c =='') || (c== '1')); + }, + debug: function(str){ + $("#debug").append("

" + str); + } +}; +var WSR = WebSocketReceiver diff --git a/spec/javascripts/web-socket-receiver-spec.js b/spec/javascripts/web-socket-receiver-spec.js new file mode 100644 index 000000000..6e25c669a --- /dev/null +++ b/spec/javascripts/web-socket-receiver-spec.js @@ -0,0 +1,6 @@ +describe("WebSocketReceiver", function() { + it("sets a shortcut", function() { + expect(WebSocketReceiver).toEqual(WSR); + expect(WSR).toEqual(WebSocketReceiver); + }); +});