mirror of
https://bitbucket.org/skobkin/chrome_point_plus.git
synced 2024-11-23 18:56:04 +00:00
Comment DOM generation moved to separate function. Some bugs fixed. Some optimizations done.
This commit is contained in:
Alexey Skobkin
parent
b49ecaf937
commit
fadfc43aa1
|
|
@ -432,108 +432,42 @@ $(document).ready(function() {
|
||||||
|
|
||||||
// Check we are in specified post
|
// Check we are in specified post
|
||||||
if (wsMessage.post_id != postId) {
|
if (wsMessage.post_id != postId) {
|
||||||
console.log('The comment is for #%s but current page is for #%s', wsMessage.post_id, postId);
|
console.log('The comment is not for this post');
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
var $anchor = $('<a>').attr('name', wsMessage.comment_id);
|
// Generating comment from websocket message
|
||||||
|
create_comment_elements({
|
||||||
// Initializing comment element
|
id: wsMessage.comment_id,
|
||||||
var $commentTemplate = $('<div>').attr({
|
toId: wsMessage.to_comment_id,
|
||||||
'class': 'post',
|
postId: wsMessage.post_id,
|
||||||
'data-id': postId,
|
author: wsMessage.author,
|
||||||
'data-comment-id': wsMessage.comment_id,
|
text: wsMessage.text,
|
||||||
'data-to-comment-id': (wsMessage.to_comment_id != null) ? wsMessage.to_comment_id : ''
|
fadeOut: options.is('option_ws_comments_color_fadeout')
|
||||||
});
|
}, function($comment) {
|
||||||
|
|
||||||
// @todo: Вынести в отдельную функцию
|
|
||||||
// Loading HTML template
|
|
||||||
$commentTemplate.load(chrome.extension.getURL('includes/comment.html'), function() {
|
|
||||||
// Load complete
|
|
||||||
console.info('comment.html loaded');
|
|
||||||
|
|
||||||
// Date and time of comment
|
|
||||||
var date = new Date();
|
|
||||||
|
|
||||||
// @todo: унести наверх
|
|
||||||
// Data for template
|
|
||||||
var userLink = '//' + wsMessage.author + '.point.im/';
|
|
||||||
var postAuthorLink = $('#top-post .info a').attr('href');
|
|
||||||
var postLink = postAuthorLink + wsMessage.post_id;
|
|
||||||
var userAvatar = '//point.im/avatar/' + wsMessage.author;
|
|
||||||
var commentLink = '//point.im/' + wsMessage.post_id + '#' + wsMessage.comment_id;
|
|
||||||
var csRfToken = $('.reply-form input[name="csrf_token"').val();
|
|
||||||
|
|
||||||
// Filling template
|
|
||||||
console.info('Changing data in the comment element');
|
|
||||||
// Date and time
|
|
||||||
$commentTemplate.find('.info .created')
|
|
||||||
.append($('<span>').html(((date.getDate().toString.length < 2) ? ('0' + date.getDate().toString()) : (date.getDate().toString())) + ' ' + months[date.getMonth()]))
|
|
||||||
// Crutchy fix
|
|
||||||
.append($('<br>'))
|
|
||||||
///Crutchy fix
|
|
||||||
.append($('<span>').html(date.getHours() + ':' + ((date.getMinutes().toString().length < 2) ? ('0' + date.getMinutes().toString()) : (date.getMinutes().toString()))));
|
|
||||||
// Comment text
|
|
||||||
$commentTemplate.find('.text').append($('<p>').html(escapeHtml(wsMessage.text)));
|
|
||||||
// Author
|
|
||||||
$commentTemplate.find('.author a.user').attr('href', userLink).html(wsMessage.author);
|
|
||||||
// Avatar and link
|
|
||||||
$commentTemplate.find('.info a').attr('href', userLink).children('img.avatar').attr('src', userAvatar + '/24');
|
|
||||||
// Post and comment ID's link
|
|
||||||
$commentTemplate.find('.clearfix .post-id a').attr('href', commentLink).html('#' + wsMessage.post_id + '/' + wsMessage.comment_id)
|
|
||||||
// Adding answer label
|
|
||||||
.after((wsMessage.to_comment_id !== null) ? (' в ответ на <a href="#' + wsMessage.to_comment_id + '">/' + wsMessage.to_comment_id + '</a>') : (''));
|
|
||||||
// Setting action labels and other attributes
|
|
||||||
$commentTemplate.find('.action-labels .reply-label').attr('for', 'reply-' + wsMessage.post_id + '_' + wsMessage.comment_id);
|
|
||||||
$commentTemplate.find('.action-labels .more-label').attr('for', 'action-' + wsMessage.post_id + '_' + wsMessage.comment_id);
|
|
||||||
$commentTemplate.find('.post-content input[name="action-radio"]').attr('id', 'action-' + wsMessage.post_id + '_' + wsMessage.comment_id);
|
|
||||||
// Bookmark link
|
|
||||||
$commentTemplate.find('.action-buttons a.bookmark').attr('href', postLink + '/b?comment_id=' + wsMessage.comment_id + '&csrf_token=' + csRfToken);
|
|
||||||
// Reply form
|
|
||||||
$commentTemplate.find('.post-content input.reply-radio').attr('id', 'reply-' + wsMessage.post_id + '_' + wsMessage.comment_id);
|
|
||||||
$commentTemplate.find('.post-content form.reply-form').attr('action', '/' + wsMessage.post_id);
|
|
||||||
$commentTemplate.find('.post-content form.reply-form textarea[name="text"]').html('@' + wsMessage.author + ', ');
|
|
||||||
$commentTemplate.find('.post-content form.reply-form input[name="comment_id"]').val(wsMessage.comment_id);
|
|
||||||
$commentTemplate.find('.post-content form.reply-form input[name="csrf_token"]').val(csRfToken);
|
|
||||||
///Filling template
|
|
||||||
|
|
||||||
// It's time to DOM
|
// It's time to DOM
|
||||||
console.info('Inserting comment');
|
console.info('Inserting comment');
|
||||||
// If list mode or not addressed to other comment
|
|
||||||
if ((treeSwitch == '?tree=0') || (wsMessage.to_comment_id == null)) {
|
// Search for parent comment
|
||||||
// List mode
|
|
||||||
$('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000));
|
|
||||||
} else {
|
|
||||||
// Tree mode
|
|
||||||
// Search parent comment
|
|
||||||
$parentComment = $('.post[data-comment-id="' + wsMessage.to_comment_id + '"]');
|
$parentComment = $('.post[data-comment-id="' + wsMessage.to_comment_id + '"]');
|
||||||
if ($parentComment.length > 0) {
|
|
||||||
console.log('Parent comment: %O', $parentComment);
|
console.log('Parent comment: %O', $parentComment);
|
||||||
|
|
||||||
|
// If list mode or not addressed to other comment
|
||||||
|
if ($('#comments #tree-switch a').eq(0).hasClass('active') || (wsMessage.to_comment_id === null) || (!$parentComment.length)) {
|
||||||
|
// Adding to the end of the list
|
||||||
|
$('.content-wrap #comments #post-reply').before($comment);
|
||||||
|
} else {
|
||||||
// Check for children
|
// Check for children
|
||||||
$parentCommentChildren = $parentComment.next('.comments');
|
$parentCommentChildren = $parentComment.next('.comments');
|
||||||
// If child comment already exist
|
// If child comment already exist
|
||||||
if ($parentCommentChildren.length > 0) {
|
if ($parentCommentChildren.length > 0) {
|
||||||
console.log('Child comments found. Appending...');
|
console.log('Child comments found. Appending...');
|
||||||
$parentCommentChildren.append($commentTemplate.hide().fadeIn(2000));
|
$parentCommentChildren.append($comment);
|
||||||
} else {
|
} else {
|
||||||
console.log('No child comments found. Creating...');
|
console.log('No child comments found. Creating...');
|
||||||
$parentComment.after($('<div>').addClass('comments').append($commentTemplate.hide().fadeIn(2000)));
|
$parentComment.after($('<div>').addClass('comments').append($comment));
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
console.log('Parent comment not found');
|
|
||||||
// FIXME: Double code
|
|
||||||
$('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adding anchor
|
|
||||||
$commentTemplate.before($anchor);
|
|
||||||
|
|
||||||
// Fading out highlight if needed
|
|
||||||
if (options.is('option_ws_comments_color_fadeout')) {
|
|
||||||
console.log('Fading out the highlight');
|
|
||||||
$commentTemplate.children('.pp-highlight').fadeOut(20000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Desktop notifications
|
// Desktop notifications
|
||||||
|
|
@ -551,11 +485,12 @@ $(document).ready(function() {
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
// Posts
|
// Posts
|
||||||
case 'post':
|
case 'post':
|
||||||
console.group('ws-post #%s', wsMessage.post_id);
|
console.groupCollapsed('ws-post #%s', wsMessage.post_id);
|
||||||
|
|
||||||
console.debug(wsMessage);
|
console.debug(wsMessage);
|
||||||
|
|
||||||
|
|
@ -564,7 +499,7 @@ $(document).ready(function() {
|
||||||
|
|
||||||
// Recommendation
|
// Recommendation
|
||||||
case 'ok':
|
case 'ok':
|
||||||
console.group('ws-recommendation #%s/%s', wsMessage.post_id, wsMessage.comment_id);
|
console.groupCollapsed('ws-recommendation #%s/%s', wsMessage.post_id, wsMessage.comment_id);
|
||||||
|
|
||||||
console.debug(wsMessage);
|
console.debug(wsMessage);
|
||||||
|
|
||||||
|
|
@ -572,7 +507,7 @@ $(document).ready(function() {
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
console.group('ws-other');
|
console.groupCollapsed('ws-other');
|
||||||
|
|
||||||
console.log(wsMessage);
|
console.log(wsMessage);
|
||||||
|
|
||||||
|
|
@ -585,7 +520,7 @@ $(document).ready(function() {
|
||||||
|
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log('WebSocket exception:')
|
console.log('WebSocket exception:');
|
||||||
console.log(e);
|
console.log(e);
|
||||||
console.log(evt.data);
|
console.log(evt.data);
|
||||||
}
|
}
|
||||||
|
|
@ -662,6 +597,92 @@ var months = [
|
||||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creating new comment elements for dynamic injection into the DOM
|
||||||
|
*
|
||||||
|
* @param {object} commentData Comment data
|
||||||
|
* @param {string|number} commentData.id ID of the created comment
|
||||||
|
* @param {string|number} commentData.toId ID of the comment replying to
|
||||||
|
* @param {string} commentData.postId ID of the post
|
||||||
|
* @param {string} commentData.author Author of the comment
|
||||||
|
* @param {string} commentData.text Text of the comment
|
||||||
|
* @param {boolean} commentData.fadeOut Is fadeout enabled or not
|
||||||
|
* @param {function} onCommentCreated Callback which is called when comment is ready
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
function create_comment_elements(commentData, onCommentCreated) {
|
||||||
|
var $anchor = $('<a>').attr('name', commentData.id);
|
||||||
|
|
||||||
|
// Initializing comment element
|
||||||
|
var $commentTemplate = $('<div>').attr({
|
||||||
|
'class': 'post',
|
||||||
|
'data-id': commentData.postId,
|
||||||
|
'data-comment-id': commentData.id,
|
||||||
|
'data-to-comment-id': commentData.id || ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// Loading HTML template
|
||||||
|
$commentTemplate.load(chrome.extension.getURL('includes/comment.html'), function() {
|
||||||
|
// Load complete
|
||||||
|
console.info('comment.html loaded');
|
||||||
|
|
||||||
|
// Date and time of comment
|
||||||
|
var date = new Date();
|
||||||
|
|
||||||
|
// Data for template
|
||||||
|
var userLink = '//' + commentData.author + '.point.im/';
|
||||||
|
var postAuthorLink = $('#top-post .info a').attr('href');
|
||||||
|
var postLink = postAuthorLink + commentData.postId;
|
||||||
|
var userAvatar = '//point.im/avatar/' + commentData.author;
|
||||||
|
var commentLink = '//point.im/' + commentData.postId + '#' + commentData.id;
|
||||||
|
var csRfToken = $('.reply-form:first input[name="csrf_token"]').val();
|
||||||
|
|
||||||
|
// Filling template
|
||||||
|
// Date and time
|
||||||
|
$commentTemplate.find('.info .created')
|
||||||
|
.append($('<span>').html(((date.getDate().toString.length < 2) ? ('0' + date.getDate().toString()) : (date.getDate().toString())) + ' ' + months[date.getMonth()]))
|
||||||
|
// Crutchy fix
|
||||||
|
.append($('<br>'))
|
||||||
|
///Crutchy fix
|
||||||
|
.append($('<span>').html(date.getHours() + ':' + ((date.getMinutes().toString().length < 2) ? ('0' + date.getMinutes().toString()) : (date.getMinutes().toString()))));
|
||||||
|
// Comment text
|
||||||
|
$commentTemplate.find('.text').append($('<p>').text(commentData.text));
|
||||||
|
// Author
|
||||||
|
$commentTemplate.find('.author a.user').attr('href', userLink).text(commentData.author);
|
||||||
|
// Avatar and link
|
||||||
|
$commentTemplate.find('.info a').attr('href', userLink).children('img.avatar').attr('src', userAvatar + '/24');
|
||||||
|
// Post and comment ID's link
|
||||||
|
$commentTemplate.find('.clearfix .post-id a').attr('href', commentLink).html('#' + commentData.postId + '/' + commentData.id)
|
||||||
|
// Adding answer label
|
||||||
|
.after((commentData.toId !== null) ? (' в ответ на <a href="#' + commentData.toId + '">/' + commentData.toId + '</a>') : (''));
|
||||||
|
// Setting action labels and other attributes
|
||||||
|
$commentTemplate.find('.action-labels .reply-label').attr('for', 'reply-' + commentData.postId + '_' + commentData.id);
|
||||||
|
$commentTemplate.find('.action-labels .more-label').attr('for', 'action-' + commentData.postId + '_' + commentData.id);
|
||||||
|
$commentTemplate.find('.post-content input[name="action-radio"]').attr('id', 'action-' + commentData.postId + '_' + commentData.id);
|
||||||
|
// Bookmark link
|
||||||
|
$commentTemplate.find('.action-buttons a.bookmark').attr('href', postLink + '/b?comment_id=' + commentData.id + '&csrf_token=' + csRfToken);
|
||||||
|
// Reply form
|
||||||
|
$commentTemplate.find('.post-content input.reply-radio').attr('id', 'reply-' + commentData.postId + '_' + commentData.id);
|
||||||
|
$commentTemplate.find('.post-content form.reply-form').attr('action', '/' + commentData.postId);
|
||||||
|
$commentTemplate.find('.post-content form.reply-form textarea[name="text"]').html('@' + commentData.author + ', ');
|
||||||
|
$commentTemplate.find('.post-content form.reply-form input[name="comment_id"]').val(commentData.id);
|
||||||
|
$commentTemplate.find('.post-content form.reply-form input[name="csrf_token"]').val(csRfToken);
|
||||||
|
///Filling template
|
||||||
|
|
||||||
|
// Fading out highlight if needed
|
||||||
|
if (commentData.fadeOut) {
|
||||||
|
console.log('Fading out the highlight');
|
||||||
|
$commentTemplate.children('.pp-highlight').fadeOut(20000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hiding and fading in
|
||||||
|
$commentTemplate.hide().fadeIn(2000);
|
||||||
|
|
||||||
|
// Triggering callback
|
||||||
|
onCommentCreated([$anchor, $commentTemplate]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Картинки с бурятников
|
// Картинки с бурятников
|
||||||
var booru_picture_count = 0;
|
var booru_picture_count = 0;
|
||||||
function load_all_booru_images() {
|
function load_all_booru_images() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue