Skip to content

Commit 8232806

Browse files
johndjamesonjohndjameson
committed
Implement editing on Ajax-genated comments
1 parent e44a1da commit 8232806

1 file changed

Lines changed: 69 additions & 69 deletions

File tree

‎client/javascripts/components/modules/createComment.js‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -56,110 +56,110 @@ JS.Modules.CreateComment = (function() {
5656
};
5757

5858
// -------------------------------------
59-
// Post Comment
60-
// -------------------------------------
61-
62-
var _postComment = function(form) {
63-
var url = form.attr('action');
64-
65-
$.post(url, form.serialize(), function(data) {
66-
var comment = '';
67-
68-
_firstComment = false;
69-
70-
if (_settings.$container.hasClass('is-empty')) {
71-
_firstComment = true;
72-
comment = _addFirstComment(data);
73-
} else {
74-
if (data.comment.isSpam) {
75-
comment = _addModerationComment(data);
76-
} else {
77-
comment = _addRegularComment(data);
78-
}
79-
}
80-
81-
_appendComment(comment);
82-
_updateCommentNumber();
83-
});
84-
};
85-
86-
// -------------------------------------
87-
// Add Moderation Comment
59+
// Append Comment
8860
// -------------------------------------
8961

90-
var _addModerationComment = function(data) {
91-
var comment = '';
92-
93-
comment +=
94-
'<li class="list-item">' +
95-
'<p class="mbf tac tce tsi">Hang tight! Your comment needs to be moderated.</p>' +
96-
'</li>';
62+
var _appendComment = function(comment) {
63+
if (_firstComment) {
64+
_settings.$emptyContainer.remove();
65+
_settings.$list.removeClass('is-hidden');
66+
}
9767

98-
return comment;
68+
_settings.$list.append(comment);
69+
_settings.$element.find('textarea').val('');
9970
};
10071

10172
// -------------------------------------
102-
// Add Regular Comment
73+
// Build Comment
10374
// -------------------------------------
10475

105-
var _addRegularComment = function(data) {
76+
var _buildComment = function(data) {
10677
var comment = '';
10778

10879
comment+=
109-
'<li id="comment-' + data.comment.id + '" class="list-item is-added">' +
80+
'<li id="comment-' + data.comment.id + '" class="list-item is-added js-editComment" data-id="' + data.comment.id + '">' +
11081
'<div class="bucket">' +
11182
'<div class="bucket-media">' +
11283
'<img class="thumb" src="' + data.comment.avatar_url + '" width="50">' +
11384
'</div>' +
11485
'<div class="bucket-content">' +
115-
'<p class="tfh">' +
116-
'<span class="mrs twb">' + data.comment.name + '</span>' +
117-
'<time class="tcs tsi">Today</time>' +
118-
'</p>' +
119-
'<p class="mbf">' + data.comment.body + '</p>' +
86+
'<div class="split mbm tfh">' +
87+
'<div class="split-item">' +
88+
'<div class="split-cell">' +
89+
'<span class="mrs twb">' + data.comment.name + '</span>' +
90+
'<time class="tcs tsi">Today</time>' +
91+
'</div>' +
92+
'<div class="split-cell">' +
93+
'<button class="link js-editComment-editBtn">Edit</button>' +
94+
'</div>' +
95+
'</div>' +
96+
'</div>' +
97+
'<p class="mbf js-editComment-comment">' + data.comment.body + '</p>' +
98+
'<form class="form js-editComment-form is-hidden" action="">' +
99+
'<textarea class="form-input form-textarea js-autosize js-editComment-textarea">' + data.comment.body + '</textarea>' +
100+
'<div class="split split--center">' +
101+
'<div class="split-item">' +
102+
'<div class="split-cell">' +
103+
'<button class="link link--error js-editComment-deleteBtn">Delete</button>' +
104+
'</div>' +
105+
'<div class="split-cell">' +
106+
'<div class="has-btn">' +
107+
'<button class="btn btn--a--bordered js-editComment-cancelBtn">Cancel</button>' +
108+
'<button class="btn js-editComment-saveBtn">Save Changes</button>' +
109+
'</div>' +
110+
'</div>' +
111+
'</div>' +
112+
'</div>' +
113+
'</form>' +
120114
'</div>' +
115+
'</div>' +
121116
'</li>';
122117

123118
return comment;
124119
};
125120

126121
// -------------------------------------
127-
// Add First Comment
122+
// Build Moderation Comment
128123
// -------------------------------------
129124

130-
var _addFirstComment = function(data) {
125+
var _buildModerationComment = function(data) {
131126
var comment = '';
132127

133-
comment+=
134-
'<li id="comment-' + data.comment.id + '" class="list-item is-added">' +
135-
'<div class="bucket">' +
136-
'<div class="bucket-media">' +
137-
'<img class="thumb" src="' + data.comment.avatar_url + '" width="50">' +
138-
'</div>' +
139-
'<div class="bucket-content">' +
140-
'<p class="tfh">' +
141-
'<span class="mrs twb">' + data.comment.name + '</span>' +
142-
'<time class="tcs tsi">Today</time>' +
143-
'</p>' +
144-
'<p class="mbf">' + data.comment.body + '</p>' +
145-
'</div>' +
146-
'</li>';
128+
comment +=
129+
'<li class="list-item">' +
130+
'<p class="mbf tac tce tsi">Hang tight! Your comment needs to be moderated.</p>' +
131+
'</li>';
147132

148133
return comment;
149134
};
150135

151136
// -------------------------------------
152-
// Append Comment
137+
// Post Comment
153138
// -------------------------------------
154139

155-
var _appendComment = function(comment) {
156-
if (_firstComment) {
157-
_settings.$emptyContainer.remove();
158-
_settings.$list.removeClass('is-hidden');
159-
}
140+
var _postComment = function(form) {
141+
var url = form.attr('action');
160142

161-
_settings.$list.append(comment);
162-
_settings.$element.find('textarea').val('');
143+
$.post(url, form.serialize(), function(data) {
144+
var comment = '';
145+
146+
_firstComment = false;
147+
148+
if (_settings.$container.hasClass('is-empty')) {
149+
_firstComment = true;
150+
comment = _buildComment(data);
151+
} else {
152+
if (data.comment.isSpam) {
153+
comment = _buildModerationComment(data);
154+
} else {
155+
comment = _buildComment(data);
156+
}
157+
}
158+
159+
_appendComment(comment);
160+
_updateCommentNumber();
161+
JS.Modules.EditComment.init();
162+
});
163163
};
164164

165165
// -------------------------------------

0 commit comments

Comments
 (0)