Commit 32233ccb authored by Steffen van Bergerem's avatar Steffen van Bergerem

Merge pull request #7482 from cmrd-senya/markdown-editor-conversations-comments

Add markdown editor on conversations and comments
parents f83fb6f4 621d2697
......@@ -37,6 +37,7 @@ If so, please delete it since it will prevent the federation from working proper
* Add support for mentions in comments to the front-end [#7386](https://github.com/diaspora/diaspora/pull/7386)
* Support direct links to comments on mobile [#7508](https://github.com/diaspora/diaspora/pull/7508)
* Add inviter first and last name in the invitation e-mail [#7484](https://github.com/diaspora/diaspora/pull/7484)
* Add markdown editor for comments and conversations [#7482](https://github.com/diaspora/diaspora/pull/7482)
# 0.6.8.0
......
......@@ -9,7 +9,7 @@ app.Router = Backbone.Router.extend({
"commented(/)": "stream",
"community_spotlight(/)": "spotlight",
"contacts(/)": "contacts",
"conversations(/)(:id)(/)": "conversations",
"conversations(/)(:id)(?conversation_id=:conversation_id)(/)": "conversations",
"followed_tags(/)": "followed_tags",
"getting_started(/)": "gettingStarted",
"help(/)": "help",
......@@ -93,8 +93,8 @@ app.Router = Backbone.Router.extend({
app.page = new app.pages.Contacts({stream: stream});
},
conversations: function(id) {
app.conversations = app.conversations || new app.views.ConversationsInbox();
conversations: function(id, conversationId) {
app.conversations = app.conversations || new app.views.ConversationsInbox(conversationId);
if (parseInt("" + id, 10)) {
app.conversations.renderConversation(id);
}
......
......@@ -9,8 +9,8 @@ app.views.CommentStream = app.views.Base.extend({
events: {
"keydown .comment_box": "keyDownOnCommentBox",
"submit form": "createComment",
"focus .comment_box": "commentTextareaFocused",
"click .toggle_post_comments": "expandComments"
"click .toggle_post_comments": "expandComments",
"click form": "openForm"
},
initialize: function() {
......@@ -21,6 +21,7 @@ app.views.CommentStream = app.views.Base.extend({
setupBindings: function() {
this.model.comments.bind("add", this.appendComment, this);
this.model.comments.bind("remove", this.removeComment, this);
$(document.body).click(this.onFormBlur.bind(this));
},
postRenderTemplate : function() {
......@@ -28,6 +29,11 @@ app.views.CommentStream = app.views.Base.extend({
this.commentBox = this.$(".comment_box");
this.commentSubmitButton = this.$("input[name='commit']");
new app.views.CommentMention({el: this.$el, postId: this.model.get("id")});
this.mdEditor = new Diaspora.MarkdownEditor(this.$(".comment_box"), {
onPreview: Diaspora.MarkdownEditor.simplePreview,
onFocus: this.openForm.bind(this)
});
},
presenter: function(){
......@@ -53,11 +59,14 @@ app.views.CommentStream = app.views.Base.extend({
success: function() {
this.commentBox.val("");
this.enableCommentBox();
this.mdEditor.hidePreview();
this.closeForm();
autosize.update(this.commentBox);
}.bind(this),
error: function() {
this.enableCommentBox();
this.commentBox.focus();
this.mdEditor.hidePreview();
this.openForm();
}.bind(this)
});
},
......@@ -122,10 +131,6 @@ app.views.CommentStream = app.views.Base.extend({
this.$("#" + comment.get("guid")).closest(".comment.media").remove();
},
commentTextareaFocused: function(){
this.$("form").removeClass('hidden').addClass("open");
},
expandComments: function(evt){
this.$(".loading-comments").removeClass("hidden");
if(evt){ evt.preventDefault(); }
......@@ -135,6 +140,37 @@ app.views.CommentStream = app.views.Base.extend({
this.$(".loading-comments").addClass("hidden");
}.bind(this)
});
},
openForm: function() {
this.$("form").addClass("open");
this.$(".md-editor").addClass("active");
},
closeForm: function() {
this.$("form").removeClass("open");
this.$(".md-editor").removeClass("active");
this.commentBox.blur();
autosize.update(this.commentBox);
},
isCloseAllowed: function() {
if (this.mdEditor === undefined) {
return true;
}
return !this.mdEditor.isPreviewMode() && this.mdEditor.userInputEmpty();
},
onFormBlur: function(evt) {
if (!this.isCloseAllowed()) {
return;
}
var $target = $(evt.target);
var isForm = $target.hasClass("new-comment") || $target.parents(".new-comment").length !== 0;
if (!isForm && !$target.hasClass("focus_comment_textarea")) {
this.closeForm();
}
}
});
// @license-end
......@@ -24,6 +24,8 @@ app.views.ConversationsForm = app.views.Base.extend({
remoteRoute: {url: "/contacts", extraParameters: "mutual=true"}
});
this.newConversationMdEditor = this.renderMarkdownEditor("#new-message-text");
this.bindTypeaheadEvents();
this.tagListElement.empty();
......@@ -31,10 +33,16 @@ app.views.ConversationsForm = app.views.Base.extend({
this.prefill(opts.prefill);
}
this.$("form#new-conversation").on("ajax:success", this.conversationCreateSuccess);
this.$("form#new-conversation").on("ajax:success", this.conversationCreateSuccess.bind(this));
this.$("form#new-conversation").on("ajax:error", this.conversationCreateError);
},
renderMarkdownEditor: function(element) {
return new Diaspora.MarkdownEditor($(element), {
onPreview: Diaspora.MarkdownEditor.simplePreview
});
},
addRecipient: function(person) {
this.conversationRecipients.push(person);
this.updateContactIdsListInput();
......@@ -84,6 +92,7 @@ app.views.ConversationsForm = app.views.Base.extend({
},
conversationCreateSuccess: function(evt, data) {
this.newConversationMdEditor.hidePreview();
app._changeLocation(Routes.conversation(data.id));
},
......
......@@ -8,11 +8,21 @@ app.views.ConversationsInbox = app.views.Base.extend({
"click .new-conversation-btn": "displayNewConversation"
},
initialize: function() {
new app.views.ConversationsForm();
initialize: function(conversationId) {
this.conversationForm = new app.views.ConversationsForm();
// Creates markdown editor in case of displaying preloaded conversation
if (conversationId != null) {
this.renderMarkdownEditor();
}
this.setupConversation();
},
renderMarkdownEditor: function() {
this.conversationForm.renderMarkdownEditor("#conversation-show .conversation-message-text");
},
renderConversation: function(conversationId) {
var self = this;
$.ajax({
......@@ -23,6 +33,8 @@ app.views.ConversationsInbox = app.views.Base.extend({
self.$el.find("#conversation-show").removeClass("hidden").html(data);
self.selectConversation(conversationId);
self.setupConversation();
self.renderMarkdownEditor();
autosize(self.$("#conversation-show textarea"));
}
});
},
......
......@@ -130,6 +130,14 @@ Diaspora.MarkdownEditor.prototype = {
}
},
isPreviewMode: function() {
return this.instance !== undefined && this.instance.$editor.find(".md-preview").length > 0;
},
userInputEmpty: function() {
return this.instance === undefined || this.instance.getContent().length === 0;
},
localize: function() {
var locale = Diaspora.I18n.language;
......@@ -160,3 +168,7 @@ Diaspora.MarkdownEditor.prototype = {
return locale;
}
};
Diaspora.MarkdownEditor.simplePreview = function($mdInstance) {
return "<div class='preview-content'>" + app.helpers.textFormatter($mdInstance.getContent()) + "</div>";
};
......@@ -35,7 +35,7 @@
self.scrollToOffset(commentContainer);
});
this.stream().on("submit", ".new_comment", this.submitComment);
this.stream().on("submit", ".new-comment", this.submitComment);
},
submitComment: function(evt){
......
......@@ -11,13 +11,15 @@ body {
#publisher_textarea_wrapper { background-color: $gray; }
.btn.btn-link.question_mark:hover .entypo-cog { color: $gray-light; }
}
.write-preview-tabs > li.active * { color: $text-color; }
.md-preview { background-color: $gray; }
.md-cancel:hover .entypo-cross { color: $gray-light; }
.publisher-buttonbar .btn.btn-link:hover i { color: $gray-light; }
}
.write-preview-tabs > li.active * { color: $text-color; }
.md-cancel:hover .entypo-cross { color: $gray-light; }
.md-input,
.md-preview { background-color: $gray; }
.aspect_dropdown li a .text { color: $dropdown-link-color; }
.info .tag { background-color: $gray-light; }
......@@ -95,6 +97,7 @@ body {
#welcome-to-diaspora { background: $orange; }
.md-editor,
.block-form fieldset .form-control:focus { border-color: $input-border; }
&.page-registrations.action-new,
......
......@@ -52,7 +52,6 @@
float: right;
}
padding-left: 12px;
display: none;
}
.comment_box {
height: 35px;
......@@ -60,8 +59,6 @@
}
textarea.comment_box:focus, textarea.comment_box:valid, textarea.comment_box:active {
border-color: $border-dark-grey;
~ .submit-button { display: block; }
min-height: 35px;
box-shadow: none;
}
......@@ -73,3 +70,16 @@
// scss-lint:enable ImportantRule
}
}
.new-comment {
&:not(.open) .submit-button,
&:not(.open) .md-header {
display: none;
}
// The rule for .md-preview is required until we switch to the newer release of bootstrap-markdown with
// the following commit in:
// https://github.com/toopay/bootstrap-markdown/commit/14a21c3837140144b27efc19c795d1a37fad70fb
.md-preview,
&.open .md-editor textarea { min-height: 70px; }
}
......@@ -238,3 +238,9 @@
}
.new-conversation.form-horizontal .form-group:last-of-type { margin-bottom: 0; }
// This rule is required until we switch to the newer release of bootstrap-markdown with
// the following commit in: https://github.com/toopay/bootstrap-markdown/commit/14a21c3837140144b27efc19c795d1a37fad70fb
.conversations-form-container .md-preview {
min-height: 105px;
}
.md-editor {
border: 1px solid $border-grey;
border-radius: $border-radius-small;
overflow: hidden;
&.active { border: 1px solid $border-dark-grey; }
textarea,
textarea:focus {
border: 0;
box-shadow: none;
margin: 0;
}
}
.md-footer,
.md-header {
background: $white;
......@@ -77,13 +92,11 @@
.md-preview {
background: $white;
color: $text-color;
// !important is needed to override the CSS rules dynamically added to the element
// scss-lint:disable ImportantRule
height: auto !important;
// scss-lint:enable ImportantRule
min-height: 90px;
overflow: auto;
position: relative;
// !important is needed to override the CSS rules dynamically added to the element
......@@ -91,6 +104,8 @@
width: 100% !important;
// scss-lint:enable ImportantRule
z-index: 10;
.preview-content { padding: 10px; }
}
.md-controls {
......
......@@ -78,9 +78,7 @@
textarea {
background: transparent;
border: 0 solid $light-grey;
box-shadow: none;
height: 50px;
margin: 0;
resize: none;
}
......@@ -193,6 +191,16 @@
margin-bottom: 0;
}
}
.md-editor,
.md-editor.active {
border: 0;
}
// This rule is required until we switch to the newer release of bootstrap-markdown with
// the following commit in:
// https://github.com/toopay/bootstrap-markdown/commit/14a21c3837140144b27efc19c795d1a37fad70fb
.md-preview { min-height: 90px; }
}
.publisher-textarea-wrapper {
......
......@@ -25,7 +25,8 @@
{{/with}}
<div class="bd">
<form accept-charset="UTF-8" action="/posts/{{id}}/comments" class="new_comment" id="new_comment_on_{{id}}" method="post">
<form accept-charset="UTF-8" action="/posts/{{id}}/comments"
class="new-comment" id="new-comment-on-{{id}}" method="post">
<textarea class="comment_box form-control mention-textarea"
id="comment_text_on_{{id}}" name="text" rows="1" required placeholder="{{t "stream.comment"}}" />
......
......@@ -5,7 +5,7 @@
.add_comment_bottom_link_container
- if user_signed_in?
= form_tag(post_comments_path(post_id), id: "new-comment-on-#{post_id}",
class: "new_comment", autocomplete: "off") do
class: "new-comment", autocomplete: "off") do
%fieldset
= hidden_field_tag :post_id, post_id, id: "post-id-on-#{post_id}"
.form-group.clearfix
......
......@@ -3,12 +3,12 @@ When /^I focus the comment field$/ do
end
Then /^the first comment field should be open/ do
find("#main_stream .stream-element .new_comment").should be_visible
find("#main_stream .stream-element .new-comment").should be_visible
end
Then /^the first comment field should be closed$/ do
page.should have_css(".stream-element .media")
page.should_not have_selector("#main_stream .stream-element .new_comment", match: :first)
page.should_not have_selector("#main_stream .stream-element .new-comment", match: :first)
end
When /^I make a show page comment "([^"]*)"$/ do |comment_text|
......
......@@ -112,6 +112,13 @@ describe('app.Router', function () {
this.router.conversations("12");
expect(app.views.ConversationsInbox.prototype.renderConversation).toHaveBeenCalledWith("12");
});
it("passes conversation_id parameter to ConversationsInbox initializer when passed in URL", function() {
app.conversations = undefined;
spyOn(app.views.ConversationsInbox.prototype, "initialize");
this.router.navigate("/conversations?conversation_id=45", {trigger: true});
expect(app.views.ConversationsInbox.prototype.initialize).toHaveBeenCalledWith("45");
});
});
describe("stream", function() {
......
......@@ -19,6 +19,16 @@ describe("app.views.CommentStream", function(){
this.view.model.comments.pop();
expect(this.view.removeComment).toHaveBeenCalled();
});
it("calls onFormBlur when clicking outside the comment box", function() {
// remove existing event handlers
$(document.body).off("click");
spyOn(this.view, "onFormBlur");
this.view.setupBindings();
$(document.body).click();
expect(this.view.onFormBlur).toHaveBeenCalled();
});
});
describe("postRenderTemplate", function() {
......@@ -57,6 +67,14 @@ describe("app.views.CommentStream", function(){
var call = app.views.CommentMention.prototype.initialize.calls.mostRecent();
expect(call.args[0]).toEqual({el: this.view.$el, postId: this.view.model.id});
});
it("creates the markdown editor", function() {
spyOn(Diaspora.MarkdownEditor.prototype, "initialize");
this.view.mdEditor = undefined;
this.view.postRenderTemplate();
expect(Diaspora.MarkdownEditor.prototype.initialize).toHaveBeenCalled();
expect(this.view.mdEditor).toBeDefined();
});
});
describe("createComment", function() {
......@@ -117,6 +135,18 @@ describe("app.views.CommentStream", function(){
this.request.respondWith({status: 200, responseText: "[]"});
expect(autosize.update).toHaveBeenCalledWith(this.view.commentBox);
});
it("hides the markdown preview", function() {
spyOn(this.view.mdEditor, "hidePreview");
this.request.respondWith({status: 200, responseText: "[]"});
expect(this.view.mdEditor.hidePreview).toHaveBeenCalled();
});
it("closes the form", function() {
spyOn(this.view, "closeForm");
this.request.respondWith({status: 200, responseText: "[]"});
expect(this.view.closeForm).toHaveBeenCalled();
});
});
context("on error", function() {
......@@ -135,6 +165,18 @@ describe("app.views.CommentStream", function(){
this.request.respondWith({status: 500});
expect(this.view.enableCommentBox).toHaveBeenCalled();
});
it("hides the markdown preview", function() {
spyOn(this.view.mdEditor, "hidePreview");
this.request.respondWith({status: 500, responseText: "[]"});
expect(this.view.mdEditor.hidePreview).toHaveBeenCalled();
});
it("opens the form", function() {
spyOn(this.view, "openForm");
this.request.respondWith({status: 500, responseText: "[]"});
expect(this.view.openForm).toHaveBeenCalled();
});
});
});
});
......@@ -283,6 +325,84 @@ describe("app.views.CommentStream", function(){
});
});
describe("openForm", function() {
beforeEach(function() {
this.view.render();
});
it("adds the 'open' class to form", function() {
this.view.$("form").removeClass("open");
this.view.openForm();
expect(this.view.$("form")).toHaveClass("open");
});
it("adds the 'active' class to markdown editor", function() {
this.view.$(".md-editor").removeClass("active");
this.view.openForm();
expect(this.view.$(".md-editor")).toHaveClass("active");
});
});
describe("closeForm", function() {
beforeEach(function() {
this.view.render();
});
it("removes the 'open' class to form", function() {
this.view.$("form").addClass("open");
this.view.closeForm();
expect(this.view.$("form")).not.toHaveClass("open");
});
it("removes the 'active' class to markdown editor", function() {
this.view.$(".md-editor").addClass("active");
this.view.closeForm();
expect(this.view.$(".md-editor")).not.toHaveClass("active");
});
});
describe("onFormBlur", function() {
beforeEach(function() {
this.view.render();
this.view.postRenderTemplate();
spec.content().html("<div class='new-comment'/><div class='focus_comment_textarea'/>");
});
it("does not call closeForm if markdown editor is in preview mode", function() {
spyOn(this.view, "closeForm");
spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(true);
spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(true);
this.view.onFormBlur();
expect(this.view.closeForm).not.toHaveBeenCalled();
});
it("does not call closeForm if markdown editor contains text", function() {
spyOn(this.view, "closeForm");
spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(false);
spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(false);
this.view.onFormBlur();
expect(this.view.closeForm).not.toHaveBeenCalled();
});
it("does not call closeForm when the form is clicked", function() {
spyOn(this.view, "closeForm");
spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(false);
spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(true);
this.view.onFormBlur($.Event("click", {target: $(".new-comment")}));
expect(this.view.closeForm).not.toHaveBeenCalled();
this.view.onFormBlur($.Event("click", {target: $(".focus_comment_textarea")}));
expect(this.view.closeForm).not.toHaveBeenCalled();
});
it("calls closeForm when the user clicks outside of the form", function() {
spyOn(this.view, "closeForm");
spyOn(this.view.mdEditor, "isPreviewMode").and.returnValue(false);
spyOn(this.view.mdEditor, "userInputEmpty").and.returnValue(true);
this.view.onFormBlur($.Event("click", {target: $("body")}));
expect(this.view.closeForm).toHaveBeenCalled();
});
});
describe("pressing a key when typing on the new comment box", function(){
var submitCallback;
......
......@@ -35,6 +35,21 @@ describe("app.views.ConversationsForm", function() {
this.target.initialize({prefill: {}});
expect(app.views.ConversationsForm.prototype.prefill).toHaveBeenCalledWith({});
});
it("creates markdown editor for new conversations", function() {
spyOn(this.target, "renderMarkdownEditor");
this.target.initialize();
expect(this.target.renderMarkdownEditor).toHaveBeenCalledWith("#new-message-text");
});
});
describe("renderMarkdownEditor", function() {
it("creates MarkdownEditor", function() {
spec.content().html("<form><textarea id='new-message-text'/></form>");
var mdEditor = this.target.renderMarkdownEditor("#new-message-text");
expect(mdEditor).toEqual(jasmine.any(Diaspora.MarkdownEditor));
expect($("#new-message-text")).toHaveClass("md-input");
});
});
describe("addRecipient", function() {
......@@ -253,6 +268,12 @@ describe("app.views.ConversationsForm", function() {
$("#new-conversation").trigger("ajax:success", [{id: 23}]);
expect(app._changeLocation).toHaveBeenCalledWith(Routes.conversation(23));
});
it("hides the preview", function() {
spyOn(Diaspora.MarkdownEditor.prototype, "hidePreview");
$("#new-conversation").trigger("ajax:success", [{id: 23}]);
expect(Diaspora.MarkdownEditor.prototype.hidePreview).toHaveBeenCalled();
});
});
describe("conversationCreateError", function() {
......
......@@ -17,6 +17,14 @@ describe("app.views.ConversationsInbox", function() {
new app.views.ConversationsInbox();
expect(app.views.ConversationsInbox.prototype.setupConversation).toHaveBeenCalled();
});
it("creates markdown editor for an existing conversation", function() {
spyOn(app.views.ConversationsForm.prototype, "renderMarkdownEditor");
new app.views.ConversationsInbox(1);
expect(app.views.ConversationsForm.prototype.renderMarkdownEditor).toHaveBeenCalledWith(
"#conversation-show .conversation-message-text"
);
});
});
describe("renderConversation", function() {
......@@ -34,6 +42,8 @@ describe("app.views.ConversationsInbox", function() {
spyOn($, "ajax").and.callThrough();
spyOn(app.views.ConversationsInbox.prototype, "selectConversation");
spyOn(app.views.ConversationsInbox.prototype, "setupConversation");
spyOn(app.views.ConversationsForm.prototype, "renderMarkdownEditor");
spyOn(window, "autosize");
this.target.renderConversation(this.conversationId);
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
......@@ -44,6 +54,9 @@ describe("app.views.ConversationsInbox", function() {
expect(jasmine.Ajax.requests.mostRecent().url).toBe("/conversations/" + this.conversationId + "/raw");
expect(app.views.ConversationsInbox.prototype.selectConversation).toHaveBeenCalledWith(this.conversationId);
expect(app.views.ConversationsInbox.prototype.setupConversation).toHaveBeenCalled();
expect(app.views.ConversationsForm.prototype.renderMarkdownEditor).toHaveBeenCalled();
expect(window.autosize).toHaveBeenCalled();
expect(window.autosize.calls.mostRecent().args[0].is($("#conversation-show textarea")));
expect($("#conversation-new")).toHaveClass("hidden");
expect($("#conversation-show")).not.toHaveClass("hidden");
expect($("#conversation-show #fake-conversation-content").length).toBe(1);
......
......@@ -220,6 +220,48 @@ describe("Diaspora.MarkdownEditor", function() {
});
});
describe("isPreviewMode", function() {
beforeEach(function() {
this.target = new Diaspora.MarkdownEditor(this.$el, {onPreview: $.noop, onPostPreview: $.noop()});
});
it("return false if editor is not visible yet", function() {
this.target.instance = undefined;
expect(this.target.isPreviewMode()).toBe(false);
});
it("returns false if the editor is in write (default) mode", function() {
expect(this.target.instance).toBeDefined();
expect(this.target.isPreviewMode()).toBe(false);
});
it("returns true if editor is in preview mode", function() {
this.target.showPreview();
expect(this.target.isPreviewMode()).toBe(true);
});
});
describe("userInputEmpty", function() {
beforeEach(function() {
this.target = new Diaspora.MarkdownEditor(this.$el, {onPreview: $.noop, onPostPreview: $.noop()});
});
it("return true if editor is not visible yet", function() {
this.target.instance = undefined;
expect(this.target.userInputEmpty()).toBe(true);
});
it("returns true if editor has no content", function() {
$("textarea").text("");
expect(this.target.userInputEmpty()).toBe(true);
});
it("returns false if editor has content", function() {
$("textarea").text("Yolo");
expect(this.target.userInputEmpty()).toBe(false);
});
});
describe("localize", function() {
beforeEach(function() {