stream.js now semi-split into functions (still needs work); specs for toggling comments
This commit is contained in:
Dan Hansen & Sarah Mei
parent
bfcb7b48b3
commit
b2f4e064fc
3 changed files with 160 additions and 98 deletions
|
|
@ -1,112 +1,115 @@
|
||||||
/* Copyright (c) 2010, Diaspora Inc. This file is
|
/* Copyright (c) 2010, Diaspora Inc. This file is
|
||||||
* licensed under the Affero General Public License version 3 or later. See
|
* licensed under the Affero General Public License version 3 or later. See
|
||||||
* the COPYRIGHT file.
|
* the COPYRIGHT file.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
var Stream = {
|
||||||
|
initialize: function() {
|
||||||
|
var $stream = $(".stream");
|
||||||
|
var $publisher = $("#publisher");
|
||||||
|
|
||||||
$(document).ready(function(){
|
$stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments);
|
||||||
var $stream = $(".stream");
|
|
||||||
var $publisher = $("#publisher");
|
|
||||||
|
|
||||||
// comment toggle action
|
// comment submit action
|
||||||
$stream.not(".show").delegate("a.show_post_comments", "click", function(evt) {
|
$stream.delegate("a.comment_submit", "click", function(evt) {
|
||||||
|
$(this).closest("form").children(".comment_box").attr("rows", 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
$stream.delegate("textarea.comment_box", "focus", function(evt) {
|
||||||
|
var commentBox = $(this);
|
||||||
|
commentBox.attr("rows", 2)
|
||||||
|
.closest("form").find(".comment_submit").fadeIn(200);
|
||||||
|
});
|
||||||
|
|
||||||
|
$stream.delegate("textarea.comment_box", "blur", function(evt) {
|
||||||
|
var commentBox = $(this);
|
||||||
|
if (!commentBox.val()) {
|
||||||
|
commentBox.attr("rows", 1)
|
||||||
|
.closest("form").find(".comment_submit").hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// reshare button action
|
||||||
|
$stream.delegate(".reshare_button", "click", function(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
button = $(this)
|
||||||
|
box = button.siblings(".reshare_box");
|
||||||
|
if (box.length > 0) {
|
||||||
|
button.toggleClass("active");
|
||||||
|
box.toggle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$stream.delegate("a.video-link", "click", function(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
var $this = $(this),
|
||||||
|
container = document.createElement("div"),
|
||||||
|
$container = $(container).attr("class", "video-container"),
|
||||||
|
$videoContainer = $this.parent().siblings("div.video-container");
|
||||||
|
|
||||||
|
if ($videoContainer.length > 0) {
|
||||||
|
$videoContainer.slideUp('fast', function () {
|
||||||
|
$videoContainer.detach();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($("div.video-container").length > 0) {
|
||||||
|
$("div.video-container").slideUp("fast", function() {
|
||||||
|
$(this).detach();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($this.data("host") === "youtube.com") {
|
||||||
|
$container.html(
|
||||||
|
'<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
|
||||||
|
'<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id") + '"></iframe>'
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
$container.html('Invalid videotype <i>' + $this.data("host") + '</i> (ID: ' + $this.data("video-id") + ')');
|
||||||
|
}
|
||||||
|
|
||||||
|
$container.hide()
|
||||||
|
.insertAfter($this.parent())
|
||||||
|
.slideDown('fast');
|
||||||
|
|
||||||
|
$this.click(function() {
|
||||||
|
$container.slideUp('fast', function() {
|
||||||
|
$(this).detach();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".new_status_message").bind('ajax:success', function(data, json, xhr) {
|
||||||
|
json = $.parseJSON(json);
|
||||||
|
WebSocketReceiver.addPostToStream(json['post_id'], json['html']);
|
||||||
|
});
|
||||||
|
$(".new_status_message").bind('ajax:failure', function(data, html, xhr) {
|
||||||
|
alert('failed to post message!');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".new_comment").live('ajax:success', function(data, json, xhr) {
|
||||||
|
json = $.parseJSON(json);
|
||||||
|
WebSocketReceiver.processComment(json['post_id'], json['comment_id'], json['html'], false);
|
||||||
|
});
|
||||||
|
$(".new_comment").live('ajax:failure', function(data, html, xhr) {
|
||||||
|
alert('failed to post message!');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleComments: function(evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
var $this = $(this),
|
var $this = $(this),
|
||||||
text = $this.html(),
|
text = $this.html(),
|
||||||
commentBlock = $this.closest("li").find("ul.comments", ".content"),
|
commentBlock = $this.closest("li").find("ul.comments", ".content"),
|
||||||
show = (text.indexOf("show") != -1);
|
show = (text.indexOf("show") != -1);
|
||||||
|
|
||||||
commentBlock.fadeToggle(150, function(){
|
commentBlock.fadeToggle(150, function() {
|
||||||
commentBlock.toggleClass("hidden");
|
commentBlock.toggleClass("hidden");
|
||||||
});
|
});
|
||||||
$this.html(text.replace((show) ? "show" : "hide", (show) ? "hide" : "show"));
|
$this.html(text.replace((show) ? "show" : "hide", (show) ? "hide" : "show"));
|
||||||
});
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// comment submit action
|
$(document).ready(Stream.initialize);
|
||||||
$stream.delegate("a.comment_submit", "click", function(evt){
|
|
||||||
$(this).closest("form").children(".comment_box").attr("rows", 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
$stream.delegate("textarea.comment_box", "focus", function(evt){
|
|
||||||
var commentBox = $(this);
|
|
||||||
commentBox.attr("rows", 2)
|
|
||||||
.closest("form").find(".comment_submit").fadeIn(200);
|
|
||||||
});
|
|
||||||
|
|
||||||
$stream.delegate("textarea.comment_box", "blur", function(evt){
|
|
||||||
var commentBox = $(this);
|
|
||||||
if( !commentBox.val() ) {
|
|
||||||
commentBox.attr("rows", 1)
|
|
||||||
.closest("form").find(".comment_submit").hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// reshare button action
|
|
||||||
$stream.delegate(".reshare_button", "click", function(evt){
|
|
||||||
evt.preventDefault();
|
|
||||||
button = $(this)
|
|
||||||
box = button.siblings(".reshare_box");
|
|
||||||
if(box.length > 0){
|
|
||||||
button.toggleClass("active");
|
|
||||||
box.toggle();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$stream.delegate("a.video-link", "click", function(evt) {
|
|
||||||
evt.preventDefault();
|
|
||||||
|
|
||||||
var $this = $(this),
|
|
||||||
container = document.createElement("div"),
|
|
||||||
$container = $(container).attr("class", "video-container"),
|
|
||||||
$videoContainer = $this.parent().siblings("div.video-container");
|
|
||||||
|
|
||||||
if($videoContainer.length > 0) {
|
|
||||||
$videoContainer.slideUp('fast', function () {
|
|
||||||
$videoContainer.detach();
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if($("div.video-container").length > 0) {
|
|
||||||
$("div.video-container").slideUp("fast", function() {
|
|
||||||
$(this).detach();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if($this.data("host") === "youtube.com") {
|
|
||||||
$container.html(
|
|
||||||
'<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
|
|
||||||
'<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id")+ '"></iframe>'
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
$container.html('Invalid videotype <i>'+$this.data("host")+'</i> (ID: '+$this.data("video-id")+')');
|
|
||||||
}
|
|
||||||
|
|
||||||
$container.hide()
|
|
||||||
.insertAfter($this.parent())
|
|
||||||
.slideDown('fast');
|
|
||||||
|
|
||||||
$this.click(function() {
|
|
||||||
$container.slideUp('fast', function() {
|
|
||||||
$(this).detach();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".new_status_message").bind('ajax:success', function(data, json, xhr){
|
|
||||||
json = $.parseJSON(json);
|
|
||||||
WebSocketReceiver.addPostToStream(json['post_id'],json['html']);
|
|
||||||
});
|
|
||||||
$(".new_status_message").bind('ajax:failure', function(data, html, xhr){
|
|
||||||
alert('failed to post message!');
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".new_comment").live('ajax:success', function(data, json, xhr){
|
|
||||||
json = $.parseJSON(json);
|
|
||||||
WebSocketReceiver.processComment(json['post_id'],json['comment_id'],json['html'],false);
|
|
||||||
});
|
|
||||||
$(".new_comment").live('ajax:failure', function(data, html, xhr){
|
|
||||||
alert('failed to post message!');
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
|
||||||
58
spec/javascripts/stream-spec.js
Normal file
58
spec/javascripts/stream-spec.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
/* Copyright (c) 2010, Diaspora Inc. This file is
|
||||||
|
* licensed under the Affero General Public License version 3 or later. See
|
||||||
|
* the COPYRIGHT file.
|
||||||
|
*/
|
||||||
|
|
||||||
|
describe("Stream", function() {
|
||||||
|
|
||||||
|
describe("initialize", function() {
|
||||||
|
it("attaches a click event to show_post_comments links", function() {
|
||||||
|
spyOn($.fn, "delegate");
|
||||||
|
Stream.initialize();
|
||||||
|
expect($.fn.delegate).toHaveBeenCalledWith(
|
||||||
|
"a.show_post_comments", "click", Stream.toggleComments);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("toggleComments", function() {
|
||||||
|
|
||||||
|
beforeEach(function() {
|
||||||
|
$('#jasmine_content').html(
|
||||||
|
'<li class="message" data-guid="4ceef7ba2367bc2e4d0001e9">' +
|
||||||
|
'<div class="content">' +
|
||||||
|
'<div class="info">' +
|
||||||
|
'<a href="#" class="show_post_comments">show comments (0)</a>' +
|
||||||
|
'</div>' +
|
||||||
|
'<ul class="comments hidden" id="4ceef7ba2367bc2e4d0001e9">' +
|
||||||
|
'<li class="comment show">' +
|
||||||
|
'<form accept-charset="UTF-8" action="/comments" class="new_comment" data-remote="true" id="new_comment_on_4ceef7ba2367bc2e4d0001e9" method="post">' +
|
||||||
|
'<div style="margin:0;padding:0;display:inline">' +
|
||||||
|
'<p>' +
|
||||||
|
'<label for="comment_text_on_4ceef7ba2367bc2e4d0001e9">Comment</label>' +
|
||||||
|
'<textarea class="comment_box" id="comment_text_on_4ceef7ba2367bc2e4d0001e9" name="text" rows="1"></textarea>' +
|
||||||
|
'</p>' +
|
||||||
|
'<input id="post_id_on_4ceef7ba2367bc2e4d0001e9" name="post_id" type="hidden" value="4ceef7ba2367bc2e4d0001e9">' +
|
||||||
|
'<input class="comment_submit button" data-disable-with="Commenting..." id="comment_submit_4ceef7ba2367bc2e4d0001e9" name="commit" type="submit" value="Comment">' +
|
||||||
|
'</div>' +
|
||||||
|
'</form>' +
|
||||||
|
'</li>' +
|
||||||
|
'</ul>' +
|
||||||
|
'</div>' +
|
||||||
|
'</li>'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it("toggles class hidden on the comment block", function () {
|
||||||
|
expect($('ul.comments')).toHaveClass("hidden");
|
||||||
|
$("a.show_post_comments").click();
|
||||||
|
setTimeout(function() {
|
||||||
|
expect($('ul.comments')).not.toHaveClass("hidden");
|
||||||
|
}, 250);
|
||||||
|
});
|
||||||
|
it("changes the text on the show comments link", function() {
|
||||||
|
$("a.show_post_comments").click();
|
||||||
|
setTimeout(function() {
|
||||||
|
expect($("a.show_post_comments").text()).toEqual("hide comments (0)");
|
||||||
|
}, 250);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -19,6 +19,7 @@ src_files:
|
||||||
- public/javascripts/aspect-edit.js
|
- public/javascripts/aspect-edit.js
|
||||||
- public/javascripts/aspect-contacts.js
|
- public/javascripts/aspect-contacts.js
|
||||||
- public/javascripts/web-socket-receiver.js
|
- public/javascripts/web-socket-receiver.js
|
||||||
|
- public/javascripts/stream.js
|
||||||
|
|
||||||
# stylesheets
|
# stylesheets
|
||||||
#
|
#
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue