From 7441a8b8ac3a6e8cbfa80bbd699f8b6cf569aec5 Mon Sep 17 00:00:00 2001 From: Evandro Jr Date: Wed, 27 Aug 2014 20:13:06 -0300 Subject: [PATCH] needs bugfixes --- public/comment_paragraph_macro.js | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------- public/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 183 insertions(+), 62 deletions(-) diff --git a/public/comment_paragraph_macro.js b/public/comment_paragraph_macro.js index 67ffe36..397a403 100644 --- a/public/comment_paragraph_macro.js +++ b/public/comment_paragraph_macro.js @@ -2,10 +2,18 @@ var comment_paragraph_anchor; var lastParagraph = []; var lastSelectedArea = []; var sideCommentForm=null; +var firstTimeOpenParagraph = Array(); +var commentParagraphIds = Array(); function getIdCommentParagraph(paragraphId){ var idx = paragraphId.lastIndexOf('_'); - return paragraphId.substring(idx+1, paragraphId.length) + return paragraphId.substring(idx+1, paragraphId.length); +} + +function teleportToBody(element){ + var $ = jQuery; + element.detach(); + $('body').append(element); } function moveCommentsToTheSide(paragraphId, mouseX, mouseY){ @@ -36,16 +44,12 @@ function buildSideCommentBox(id, commentCount ){ //Search to top of the respective paragraph var top = $('#comment_paragraph_' + id).offset().top; var right = $('#comment_paragraph_' + id).offset().left + $('#comment_paragraph_' + id).width() + 20; - var height = $('#comment_paragraph_' + id).height() + 20; - console.log(top); - var boxComments="\ -
\n\ -
+
\n\ - Icons and formzczk
asakdlsk
ajsijiasjia
jkpoafdpasj
papdiasp
\n\\n\ - Icons and formzczk
asakdlsk
ajsijiasjia
jkpoafdpasj
papdiasp
\n\\n\\n\ - Icons and formzczk
asakdlsk
ajsijiasjia
jkpoafdpasj
papdiasp
\n\\n\ -
"; + + var boxComments="\n\ +
+
\n\ + "; + //
"; return boxComments; } @@ -54,36 +58,97 @@ function putSideComments(){ $(".comment-count").each(function(index){ //Include all comments except the last - var id = $(this).attr('id'); - if(id != undefined ){ - var n = id.lastIndexOf('-'); - var id_number = id.substr(n + 1, id.length - n +1); -// console.log(index); -// console.log(this); -// console.log($(this).text()); + var idElement = $(this).attr('id'); + if(idElement != undefined ){ + var n = idElement.lastIndexOf('-'); + var id_number = idElement.substr(n + 1, idElement.length - n +1); + firstTimeOpenParagraph[id_number] = true; + commentParagraphIds.push(id_number); var commentCount = $(this).text().trim(); commentCount = parseInt(commentCount); var box = buildSideCommentBox(id_number, commentCount); $('body').append(box); + if(commentCount > 0){ + $('#side_comment_counter_' + id_number).text(commentCount); +// $('#side_comment_counter_' + id_number).show(); + } + $('#side_comment_counter_' + id_number).show(); } - }); - - } + + jQuery(document).ready(function($) { + //Hides old style ballons + $("img[alt|=Comments]").hide(); + //Hides old style counter + $(".comment-count").hide(); + rangy.init(); cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false}); //Add marked text bubble $("body").append('\ - \ + \
Comentar
+
\ '); //buildSideCommentBlock(); + // //Creates a side bubble for each paragraph with the amount of comments putSideComments(); + + $('.comment_paragraph').mouseover(function(){ + var paragraphId = getIdCommentParagraph($(this)[0].id); + $('#side_comment_counter_' + paragraphId).show(); + }); + + $('.comment_paragraph').mouseleave(function(){ + var paragraphId = getIdCommentParagraph($(this)[0].id); +// if($('#side_comment_counter_' + paragraphId).text() == '+'){ +// $('#side_comment_counter_' + paragraphId).hide(); +// } + }); + + $('.side-comments-counter').click(function(){ + hideAllComments(); + var paragraphId = getIdCommentParagraph($(this).attr('id')); + $('#side_comment_box_' + paragraphId).toggle(); + //Loads the comments + var url = $('#link_to_ajax_comments_' + paragraphId).data('url'); + $('.comments_list_toggle_paragraph_' + paragraphId).show(); + if(firstTimeOpenParagraph[paragraphId]===true ){ + firstTimeOpenParagraph[paragraphId]=false; + $.ajax({ + dataType: "script", + url: url + }).done(function() { + var button = $('#page-comment-form-' + paragraphId + ' a').get(0); + button.click(); + //teleportToBody($('.comments_list_toggle_paragraph_' + paragraphId)); + var top = $('#comment_paragraph_' + paragraphId).offset().top; + var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width(); + top += -120; + right+= -500; + $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute'); + $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top); + $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right); + $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF'); + $('label[for|=comment_title]').hide(); + $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'}); + $('.comment_form p').hide(); + $('.comments_list_toggle_paragraph_' + paragraphId).width('250px'); + }); + } + }); + + + function hideAllComments(){ + for (index = 0; index < commentParagraphIds.length; ++index) { + $('.comments_list_toggle_paragraph_' + commentParagraphIds[index]).hide(); + } + } + $("#comment-bubble").hide(); //Undo previous highlight from the paragraph @@ -98,10 +163,11 @@ jQuery(document).ready(function($) { } }); - $('#comment-bubble').mouseleave(function(){ - //this.hide(); - $("#comment-bubble").css({top: 0, left: 0, position:'absolute'}); - }); + +// $('#comment-bubble').mouseleave(function(){ +// this.hide(); +// $("#comment-bubble").css({top: 0, left: 0, position:'absolute'}); +// }); //highlight area from the paragraph $('.comment_paragraph').mouseup(function(event){ @@ -134,32 +200,30 @@ jQuery(document).ready(function($) { rootElement.focus(); }); - - - $('#comment-bubble').click(function(event){ - // this.hide(); - $("#comment-bubble").css({top: 0, left: 0, position:'absolute'}); - var url = $("#comment-bubble").data('url'); - var paragraphId = $("#comment-bubble").data("paragraphId"); - - $('.comments_list_toggle_paragraph_' + paragraphId).show(); - $.ajax({ - dataType: "script", - url: url - }).done(function() { - - +// $('#comment-bubble').click(function(event){ +// this.hide(); +// hideAllComments(); +// $("#comment-bubble").css({top: 0, left: 0, position:'absolute'}); +// var url = $("#comment-bubble").data('url'); +// var paragraphId = $("#comment-bubble").data("paragraphId"); +// +// $('.comments_list_toggle_paragraph_' + paragraphId).show(); +// $.ajax({ +// dataType: "script", +// url: url +// }).done(function() { +// var button = $('#page-comment-form-' + paragraphId + ' a').get(0) // button.click(); -//// window.location="#page-comment-form-" + paragraphId; -// //Move comments -// sideCommentForm = $('#side_comment_form'); -// sideCommentForm.hide(); -// sideCommentForm = $('.comment_form').first(); -// sideCommentForm.attr("id",'side_comment_form'); - moveCommentsToTheSide(paragraphId, event.pageX, event.pageY); - }); - }); +// window.location="#page-comment-form-" + paragraphId; +//// //Move comments +//// sideCommentForm = $('#side_comment_form'); +//// sideCommentForm.hide(); +//// sideCommentForm = $('.comment_form').first(); +//// sideCommentForm.attr("id",'side_comment_form'); +//// moveCommentsToTheSide(paragraphId, event.pageX, event.pageY); +// }); +// }); function processAnchor(){ @@ -174,12 +238,19 @@ jQuery(document).ready(function($) { comment_paragraph_anchor = anchor; var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id; - $.getJSON(url, function(data) { - if(data.paragraph_id!=null) { - var button = $('div.comment_paragraph_'+ data.paragraph_id + ' a'); - button.click(); - $.scrollTo(button); - } + $.ajax({ + dataType: "script", + url: url + }).done(function() { + var button = $('#page-comment-form-' + comment_id + ' a').get(0) + button.click(); +//// window.location="#page-comment-form-" + paragraphId; +// //Move comments +// sideCommentForm = $('#side_comment_form'); +// sideCommentForm.hide(); +// sideCommentForm = $('.comment_form').first(); +// sideCommentForm.attr("id",'side_comment_form'); +// moveCommentsToTheSide(paragraphId, event.pageX, event.pageY); }); } diff --git a/public/style.css b/public/style.css index d14365d..e11c793 100644 --- a/public/style.css +++ b/public/style.css @@ -32,6 +32,10 @@ div.article-comments-list-more{ background: #FFFF66; /* Gecko Browsers */ } +.comment_paragraph{ + padding: 0px; +} + .triangle-right { position:relative; padding:15px; @@ -61,17 +65,63 @@ div.article-comments-list-more{ } -.side-comments-box{ +.side-comments-counter{ + width: 20px; + top: 10px; + border-style: solid; + border-width: 1px; + position: absolute; + left: -5px; + background: #075698; + z-index: 199; + color: #FFFFFF; + display: none; + padding: 5px; +} + +#comment_title{ + display: none; +} + +div[class^='comments_list_toggle_paragraph_'] { + border-style: solid; + border-width: 1px; + border-color: black; + padding: 5px; +} + + + +/*.comment-details{ + width: 365px; +}*/ + +/*.side-comments-text{ + word-wrap: break-word; +}*/ + +/*.side-comments-box{ position: absolute; top: 0px; border-style: solid; border-width: 1px; border-color: black; z-index: 99; - width: 200px; + width: 350px; + height: auto; overflow-y: auto; -} + display: none; + background: #FFFFFF; +}*/ -.side-comments-counter{ - width: 20px; -} \ No newline at end of file + +/* +element.style { +position: relative; +right: -442px; +width: 365px; +top: -56px; +background: gray; +border: 1px solid; +} +*/ -- libgit2 0.21.2