- Comments tree view mode support

- WebSocket code refactoring
- More useful logs
- Some fixes
This commit is contained in:
Alexey Skobkin 2014-04-04 04:21:01 +04:00
parent 9f55bff748
commit 0d5e0449a3
1 changed files with 138 additions and 51 deletions

View File

@ -1,15 +1,18 @@
$(document).ready(function() {
// Grouping console log
console.group('point-plus');
// Loading options
chrome.storage.sync.get(ppOptions, function(options) {
// Options debug
console.debug('Options loaded: %O', options);
// Fancybox
if (options.option_fancybox == true) {
// Images
if (options.option_fancybox_images == true) {
// Linking images in posts to the galleries
$('.post-content .text').each(function(idxPost){
$('.post-content .text').each(function(idxPost) {
$(this).find('a.postimg:not(.youtube)').attr('rel', 'post' + idxPost);
});
// Init fancybox
@ -67,7 +70,7 @@ $(document).ready(function() {
// Image resizing
if (options.option_images_load_original == true) {
// Setting new image source
$('.postimg:not(.youtube) img').each(function(){
$('.postimg:not(.youtube) img').each(function() {
console.log($(this).parent('.postimg').attr('href'));
$(this).attr('src', $(this).parent('.postimg').attr('href'));
});
@ -85,7 +88,7 @@ $(document).ready(function() {
$('#new-post-form #text-input, .post-content #text-input').addClass('markitup').css('height', '20em');
// Init
$('.markitup').markItUp(mySettings);
// Send by CTRL+Enter
if (options.option_ctrl_enter == true) {
// New post
@ -108,46 +111,73 @@ $(document).ready(function() {
}
// WebSocket
if (options.option_ws == true) {
// Comments
if (options.option_ws_comments == true) {
// If we are in the post page
if ($('#top-post').length > 0) {
// SSL or plain
ws = new WebSocket(((location.protocol == 'https:') ? 'wss' : 'ws') + '://point.im/ws');
console.log('WebSocket created: %O', ws);
// Detecting post id if presented
var postId = $('#top-post').attr('data-id');
console.debug('Current post id detected as #%s', postId);
// Detecting view mode
treeSwitch = $('#tree-switch a.active').attr('href');
console.debug('Comments view mode: %s', treeSwitch);
// Error handler
ws.onerror = function(err) {
console.error('WebSocket error: %O', err);
};
// Message handler
ws.onmessage = function(evt) {
try {
// ping :)
if (evt.data == 'ping') {
console.debug('ws-ping');
} else {
var wsMessage = JSON.parse(evt.data);
// Comments view mode
treeSwitch = $('#tree-switch a.active').attr('href');
if (wsMessage.hasOwnProperty('a') && wsMessage.a != '') {
switch (wsMessage.a) {
// Comments
case 'comment':
console.groupCollapsed('ws-comment #%s/%s', wsMessage.post_id, wsMessage.comment_id);
console.debug(wsMessage);
// WS connection
console.log('Starting WebSocket connection');
ws = new WebSocket('wss://point.im/ws');
// Message handler
ws.onmessage = function(evt) {
try {
// ping :)
if (evt.data == 'ping') {
console.log('WS ping received');
} else {
var wsMessage = JSON.parse(evt.data);
console.log(wsMessage);
// Check option
if (options.option_ws_comments != true) {
console.log('Comments processing disabled');
console.groupEnd();
break;
}
// Post id
var postId = $('#top-post').attr('data-id');
// If this is a comment for this post
if ((wsMessage.a == 'comment') && (wsMessage.post_id == postId)) {
// Check we are in the post
if ($('#top-post').length < 1) {
console.log('Not in the post, skipping');
console.groupEnd();
break;
}
// 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.groupEnd();
break;
}
var $anchor = $('<a>').attr('name', wsMessage.comment_id);
// Initializing comment element
var $commentTemplate = $('<div>').attr({
'class': 'post',
'data-id': postId,
'data-comment-id': wsMessage.comment_id
'data-comment-id': wsMessage.comment_id,
'data-to-comment-id': (wsMessage.to_comment_id != null) ? wsMessage.to_comment_id : ''
});
console.log(chrome.extension.getURL('includes/comment.html'));
// Loading HTML template
$commentTemplate.load(chrome.extension.getURL('includes/comment.html'), function() {
// Load complete
console.log('comment.html loaded');
console.info('comment.html loaded');
// Date and time of comment
var date = new Date();
@ -161,7 +191,7 @@ $(document).ready(function() {
var csRfToken = $('.reply-form input[name="csrf_token"').val();
// Filling template
console.log('Changing data in the comment element');
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())) + '&nbsp;' + months[date.getMonth()]))
@ -193,24 +223,81 @@ $(document).ready(function() {
$commentTemplate.find('.post-content form.reply-form input[name="csrf_token"]').val(csRfToken);
///Filling template
console.log('Inserting new comment into the DOM');
// Insert new comment in the list
$('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000).css('background-color', '#FFFFBB'));
// It's time to DOM
console.info('Inserting comment');
// 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).css('background-color', '#FFFFBB'));
} 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).css('background-color', '#FFFFBB'));
} else {
console.log('No child comments found. Creating...');
$parentComment.after($('<div>').addClass('comments').append($commentTemplate.hide().fadeIn(2000).css('background-color', '#FFFFBB')));
}
} else {
console.log('Parent comment not found');
// FIXME: Double code
$('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000).css('background-color', '#FFFFBB'));
}
}
// Adding anchor
$commentTemplate.before($anchor);
console.groupEnd();
});
}
}
} catch(e) {
console.log('WebSocket exception:')
console.log(e);
console.log(evt.data);
};
};
} else {
break;
// Posts
case 'post':
console.group('ws-post #%s', wsMessage.post_id);
console.debug(wsMessage);
console.groupEnd();
break;
// Recommendation
case 'ok':
console.group('ws-recommendation #%s/%s', wsMessage.post_id, wsMessage.comment_id);
console.debug(wsMessage);
console.groupEnd();
break;
default:
console.group('ws-other');
console.log(wsMessage);
console.groupEnd();
break;
}
}
}
} catch (e) {
console.log('WebSocket exception:')
console.log(e);
console.log(evt.data);
}
}
;
};
}
});
@ -220,13 +307,13 @@ $(document).ready(function() {
});
function escapeHtml(text) {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
//.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;")
.replace(/\n/g, "<br>");
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
//.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;")
.replace(/\n/g, "<br>");
}
// Monts for Date.getMonth()