From fadfc43aa18dcbc9ece59614a63c9804f91fb7ad Mon Sep 17 00:00:00 2001 From: Alexey Skobkin Date: Wed, 14 Jan 2015 13:34:04 +0400 Subject: [PATCH] Comment DOM generation moved to separate function. Some bugs fixed. Some optimizations done. --- chrome_point_plus/js/point-plus.js | 215 ++++++++++++++++------------- 1 file changed, 118 insertions(+), 97 deletions(-) diff --git a/chrome_point_plus/js/point-plus.js b/chrome_point_plus/js/point-plus.js index d0be6df..2464831 100644 --- a/chrome_point_plus/js/point-plus.js +++ b/chrome_point_plus/js/point-plus.js @@ -432,110 +432,44 @@ $(document).ready(function() { // Check we are in specified post 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(); break; } - - var $anchor = $('').attr('name', wsMessage.comment_id); - - // Initializing comment element - var $commentTemplate = $('
').attr({ - 'class': 'post', - 'data-id': postId, - 'data-comment-id': wsMessage.comment_id, - 'data-to-comment-id': (wsMessage.to_comment_id != null) ? wsMessage.to_comment_id : '' - }); - - // @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($('').html(((date.getDate().toString.length < 2) ? ('0' + date.getDate().toString()) : (date.getDate().toString())) + ' ' + months[date.getMonth()])) - // Crutchy fix - .append($('
')) - ///Crutchy fix - .append($('').html(date.getHours() + ':' + ((date.getMinutes().toString().length < 2) ? ('0' + date.getMinutes().toString()) : (date.getMinutes().toString())))); - // Comment text - $commentTemplate.find('.text').append($('

').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) ? (' в ответ на /' + wsMessage.to_comment_id + '') : ('')); - // 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 - + + // Generating comment from websocket message + create_comment_elements({ + id: wsMessage.comment_id, + toId: wsMessage.to_comment_id, + postId: wsMessage.post_id, + author: wsMessage.author, + text: wsMessage.text, + fadeOut: options.is('option_ws_comments_color_fadeout') + }, function($comment) { // It's time to DOM console.info('Inserting comment'); + + // Search for parent comment + $parentComment = $('.post[data-comment-id="' + wsMessage.to_comment_id + '"]'); + console.log('Parent comment: %O', $parentComment); + // If list mode or not addressed to other comment - if ((treeSwitch == '?tree=0') || (wsMessage.to_comment_id == null)) { - // List mode - $('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000)); + 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 { - // Tree mode - // Search parent comment - $parentComment = $('.post[data-comment-id="' + wsMessage.to_comment_id + '"]'); - if ($parentComment.length > 0) { - console.log('Parent comment: %O', $parentComment); - // Check for children - $parentCommentChildren = $parentComment.next('.comments'); - // If child comment already exist - if ($parentCommentChildren.length > 0) { - console.log('Child comments found. Appending...'); - $parentCommentChildren.append($commentTemplate.hide().fadeIn(2000)); - } else { - console.log('No child comments found. Creating...'); - $parentComment.after($('

').addClass('comments').append($commentTemplate.hide().fadeIn(2000))); - } + // Check for children + $parentCommentChildren = $parentComment.next('.comments'); + // If child comment already exist + if ($parentCommentChildren.length > 0) { + console.log('Child comments found. Appending...'); + $parentCommentChildren.append($comment); } else { - console.log('Parent comment not found'); - // FIXME: Double code - $('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000)); + console.log('No child comments found. Creating...'); + $parentComment.after($('
').addClass('comments').append($comment)); } } - // 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 if (options.is('option_ws_comments_notifications')) { console.log('Showing desktop notification'); @@ -551,11 +485,12 @@ $(document).ready(function() { console.groupEnd(); }); + break; // Posts case 'post': - console.group('ws-post #%s', wsMessage.post_id); + console.groupCollapsed('ws-post #%s', wsMessage.post_id); console.debug(wsMessage); @@ -564,7 +499,7 @@ $(document).ready(function() { // Recommendation 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); @@ -572,7 +507,7 @@ $(document).ready(function() { break; default: - console.group('ws-other'); + console.groupCollapsed('ws-other'); console.log(wsMessage); @@ -585,7 +520,7 @@ $(document).ready(function() { } } catch (e) { - console.log('WebSocket exception:') + console.log('WebSocket exception:'); console.log(e); console.log(evt.data); } @@ -662,6 +597,92 @@ var months = [ '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 = $('').attr('name', commentData.id); + + // Initializing comment element + var $commentTemplate = $('
').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($('').html(((date.getDate().toString.length < 2) ? ('0' + date.getDate().toString()) : (date.getDate().toString())) + ' ' + months[date.getMonth()])) + // Crutchy fix + .append($('
')) + ///Crutchy fix + .append($('').html(date.getHours() + ':' + ((date.getMinutes().toString().length < 2) ? ('0' + date.getMinutes().toString()) : (date.getMinutes().toString())))); + // Comment text + $commentTemplate.find('.text').append($('

').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) ? (' в ответ на /' + commentData.toId + '') : ('')); + // 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; function load_all_booru_images() {