skobkin/chrome_point_plus
1
0
Fork 0
mirror of https://bitbucket.org/skobkin/chrome_point_plus.git synced 2024-11-23 18:56:04 +00:00
Code Issues Projects Releases Wiki Activity

- Comments tree view mode support

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

189
chrome_point_plus/js/point-plus.js
View file

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