Download as
Browse Code »

Commit 7441a8b8ac3a6e8cbfa80bbd699f8b6cf569aec5

Authored by Evandro Jr
1 parent c490a48f
Exists in master

needs bugfixes

Showing 2 changed files with 183 additions and 62 deletions   Show diff stats
public/comment_paragraph_macro.js
  Diff comments   View file @7441a8b
@@ -2,10 +2,18 @@ var comment_paragraph_anchor; @@ -2,10 +2,18 @@ var comment_paragraph_anchor;
2 var lastParagraph = []; 2 var lastParagraph = [];
3 var lastSelectedArea = []; 3 var lastSelectedArea = [];
4 var sideCommentForm=null; 4 var sideCommentForm=null;
  5 +var firstTimeOpenParagraph = Array();
  6 +var commentParagraphIds = Array();
5 7
6 function getIdCommentParagraph(paragraphId){ 8 function getIdCommentParagraph(paragraphId){
7 var idx = paragraphId.lastIndexOf('_'); 9 var idx = paragraphId.lastIndexOf('_');
8 - return paragraphId.substring(idx+1, paragraphId.length) 10 + return paragraphId.substring(idx+1, paragraphId.length);
  11 +}
  12 +
  13 +function teleportToBody(element){
  14 + var $ = jQuery;
  15 + element.detach();
  16 + $('body').append(element);
9 } 17 }
10 18
11 function moveCommentsToTheSide(paragraphId, mouseX, mouseY){ 19 function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
@@ -36,16 +44,12 @@ function buildSideCommentBox(id, commentCount ){ @@ -36,16 +44,12 @@ function buildSideCommentBox(id, commentCount ){
36 //Search to top of the respective paragraph 44 //Search to top of the respective paragraph
37 var top = $('#comment_paragraph_' + id).offset().top; 45 var top = $('#comment_paragraph_' + id).offset().top;
38 var right = $('#comment_paragraph_' + id).offset().left + $('#comment_paragraph_' + id).width() + 20; 46 var right = $('#comment_paragraph_' + id).offset().left + $('#comment_paragraph_' + id).width() + 20;
39 - var height = $('#comment_paragraph_' + id).height() + 20;  
40 - console.log(top);  
41 - var boxComments="\  
42 - <div class='side-comments-box'\n\  
43 - id='side_comment_box_" + id + "' style='top: " + top + "px; left: " + right + "px; height: " + height + "px; ' >\n\  
44 - <div class='triangle-right'>+</div> \n\  
45 - Icons and formzczk<BR> asakdlsk<BR> ajsijiasjia<BR> jkpoafdpasj<BR>papdiasp <BR> \n\\n\  
46 - Icons and formzczk<BR> asakdlsk<BR> ajsijiasjia<BR> jkpoafdpasj<BR>papdiasp <BR> \n\\n\\n\  
47 - Icons and formzczk<BR> asakdlsk<BR> ajsijiasjia<BR> jkpoafdpasj<BR>papdiasp <BR> \n\\n\  
48 -</div>"; 47 +
  48 + var boxComments="\n\
  49 + <div class='side-comments-counter'\n\
  50 + id='side_comment_counter_" + id + "' style='top: " + top + "px; left: " + (right - 20) + "px;' >+</div> \n\
  51 + </div>";
  52 + //<div class='side-comments-box' id='side_comment_box_" + id + "' style='top: " + top + "px; left: " + right + "px;' ></div>";
49 return boxComments; 53 return boxComments;
50 } 54 }
51 55
@@ -54,36 +58,97 @@ function putSideComments(){ @@ -54,36 +58,97 @@ function putSideComments(){
54 58
55 $(".comment-count").each(function(index){ 59 $(".comment-count").each(function(index){
56 //Include all comments except the last 60 //Include all comments except the last
57 - var id = $(this).attr('id');  
58 - if(id != undefined ){  
59 - var n = id.lastIndexOf('-');  
60 - var id_number = id.substr(n + 1, id.length - n +1);  
61 -// console.log(index);  
62 -// console.log(this);  
63 -// console.log($(this).text()); 61 + var idElement = $(this).attr('id');
  62 + if(idElement != undefined ){
  63 + var n = idElement.lastIndexOf('-');
  64 + var id_number = idElement.substr(n + 1, idElement.length - n +1);
  65 + firstTimeOpenParagraph[id_number] = true;
  66 + commentParagraphIds.push(id_number);
64 var commentCount = $(this).text().trim(); 67 var commentCount = $(this).text().trim();
65 commentCount = parseInt(commentCount); 68 commentCount = parseInt(commentCount);
66 var box = buildSideCommentBox(id_number, commentCount); 69 var box = buildSideCommentBox(id_number, commentCount);
67 $('body').append(box); 70 $('body').append(box);
  71 + if(commentCount > 0){
  72 + $('#side_comment_counter_' + id_number).text(commentCount);
  73 +// $('#side_comment_counter_' + id_number).show();
  74 + }
  75 + $('#side_comment_counter_' + id_number).show();
68 } 76 }
69 -  
70 }); 77 });
71 -  
72 -  
73 } 78 }
74 79
  80 +
  81 +
75 jQuery(document).ready(function($) { 82 jQuery(document).ready(function($) {
  83 + //Hides old style ballons
  84 + $("img[alt|=Comments]").hide();
  85 + //Hides old style counter
  86 + $(".comment-count").hide();
  87 +
76 rangy.init(); 88 rangy.init();
77 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false}); 89 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
78 90
79 //Add marked text bubble 91 //Add marked text bubble
80 $("body").append('\ 92 $("body").append('\
81 - <a href="#" id="comment-bubble" style="width:120px;height:105px;text-decoration: none">\ 93 + <a href="#" id="comment-bubble" style="width:120px;text-decoration: none">\
82 <div align="center" class="triangle-right" >Comentar<br>+</div>\ 94 <div align="center" class="triangle-right" >Comentar<br>+</div>\
83 </a>'); 95 </a>');
84 //buildSideCommentBlock(); 96 //buildSideCommentBlock();
  97 + //
85 //Creates a side bubble for each paragraph with the amount of comments 98 //Creates a side bubble for each paragraph with the amount of comments
86 putSideComments(); 99 putSideComments();
  100 +
  101 + $('.comment_paragraph').mouseover(function(){
  102 + var paragraphId = getIdCommentParagraph($(this)[0].id);
  103 + $('#side_comment_counter_' + paragraphId).show();
  104 + });
  105 +
  106 + $('.comment_paragraph').mouseleave(function(){
  107 + var paragraphId = getIdCommentParagraph($(this)[0].id);
  108 +// if($('#side_comment_counter_' + paragraphId).text() == '+'){
  109 +// $('#side_comment_counter_' + paragraphId).hide();
  110 +// }
  111 + });
  112 +
  113 + $('.side-comments-counter').click(function(){
  114 + hideAllComments();
  115 + var paragraphId = getIdCommentParagraph($(this).attr('id'));
  116 + $('#side_comment_box_' + paragraphId).toggle();
  117 + //Loads the comments
  118 + var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
  119 + $('.comments_list_toggle_paragraph_' + paragraphId).show();
  120 + if(firstTimeOpenParagraph[paragraphId]===true ){
  121 + firstTimeOpenParagraph[paragraphId]=false;
  122 + $.ajax({
  123 + dataType: "script",
  124 + url: url
  125 + }).done(function() {
  126 + var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
  127 + button.click();
  128 + //teleportToBody($('.comments_list_toggle_paragraph_' + paragraphId));
  129 + var top = $('#comment_paragraph_' + paragraphId).offset().top;
  130 + var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width();
  131 + top += -120;
  132 + right+= -500;
  133 + $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute');
  134 + $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top);
  135 + $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right);
  136 + $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
  137 + $('label[for|=comment_title]').hide();
  138 + $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
  139 + $('.comment_form p').hide();
  140 + $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
  141 + });
  142 + }
  143 + });
  144 +
  145 +
  146 + function hideAllComments(){
  147 + for (index = 0; index < commentParagraphIds.length; ++index) {
  148 + $('.comments_list_toggle_paragraph_' + commentParagraphIds[index]).hide();
  149 + }
  150 + }
  151 +
87 152
88 $("#comment-bubble").hide(); 153 $("#comment-bubble").hide();
89 //Undo previous highlight from the paragraph 154 //Undo previous highlight from the paragraph
@@ -98,10 +163,11 @@ jQuery(document).ready(function($) { @@ -98,10 +163,11 @@ jQuery(document).ready(function($) {
98 } 163 }
99 }); 164 });
100 165
101 - $('#comment-bubble').mouseleave(function(){  
102 - //this.hide();  
103 - $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});  
104 - }); 166 +
  167 +// $('#comment-bubble').mouseleave(function(){
  168 +// this.hide();
  169 +// $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
  170 +// });
105 171
106 //highlight area from the paragraph 172 //highlight area from the paragraph
107 $('.comment_paragraph').mouseup(function(event){ 173 $('.comment_paragraph').mouseup(function(event){
@@ -134,32 +200,30 @@ jQuery(document).ready(function($) { @@ -134,32 +200,30 @@ jQuery(document).ready(function($) {
134 rootElement.focus(); 200 rootElement.focus();
135 }); 201 });
136 202
137 -  
138 -  
139 203
140 - $('#comment-bubble').click(function(event){  
141 - // this.hide();  
142 - $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});  
143 - var url = $("#comment-bubble").data('url');  
144 - var paragraphId = $("#comment-bubble").data("paragraphId");  
145 -  
146 - $('.comments_list_toggle_paragraph_' + paragraphId).show();  
147 - $.ajax({  
148 - dataType: "script",  
149 - url: url  
150 - }).done(function() {  
151 -  
152 - 204 +// $('#comment-bubble').click(function(event){
  205 +// this.hide();
  206 +// hideAllComments();
  207 +// $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
  208 +// var url = $("#comment-bubble").data('url');
  209 +// var paragraphId = $("#comment-bubble").data("paragraphId");
  210 +//
  211 +// $('.comments_list_toggle_paragraph_' + paragraphId).show();
  212 +// $.ajax({
  213 +// dataType: "script",
  214 +// url: url
  215 +// }).done(function() {
  216 +// var button = $('#page-comment-form-' + paragraphId + ' a').get(0)
153 // button.click(); 217 // button.click();
154 -//// window.location="#page-comment-form-" + paragraphId;  
155 -// //Move comments  
156 -// sideCommentForm = $('#side_comment_form');  
157 -// sideCommentForm.hide();  
158 -// sideCommentForm = $('.comment_form').first();  
159 -// sideCommentForm.attr("id",'side_comment_form');  
160 - moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);  
161 - });  
162 - }); 218 +// window.location="#page-comment-form-" + paragraphId;
  219 +//// //Move comments
  220 +//// sideCommentForm = $('#side_comment_form');
  221 +//// sideCommentForm.hide();
  222 +//// sideCommentForm = $('.comment_form').first();
  223 +//// sideCommentForm.attr("id",'side_comment_form');
  224 +//// moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
  225 +// });
  226 +// });
163 227
164 228
165 function processAnchor(){ 229 function processAnchor(){
@@ -174,12 +238,19 @@ jQuery(document).ready(function($) { @@ -174,12 +238,19 @@ jQuery(document).ready(function($) {
174 238
175 comment_paragraph_anchor = anchor; 239 comment_paragraph_anchor = anchor;
176 var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id; 240 var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
177 - $.getJSON(url, function(data) {  
178 - if(data.paragraph_id!=null) {  
179 - var button = $('div.comment_paragraph_'+ data.paragraph_id + ' a');  
180 - button.click();  
181 - $.scrollTo(button);  
182 - } 241 + $.ajax({
  242 + dataType: "script",
  243 + url: url
  244 + }).done(function() {
  245 + var button = $('#page-comment-form-' + comment_id + ' a').get(0)
  246 + button.click();
  247 +//// window.location="#page-comment-form-" + paragraphId;
  248 +// //Move comments
  249 +// sideCommentForm = $('#side_comment_form');
  250 +// sideCommentForm.hide();
  251 +// sideCommentForm = $('.comment_form').first();
  252 +// sideCommentForm.attr("id",'side_comment_form');
  253 +// moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
183 }); 254 });
184 } 255 }
185 256
public/style.css
  Diff comments   View file @7441a8b
@@ -32,6 +32,10 @@ div.article-comments-list-more{ @@ -32,6 +32,10 @@ div.article-comments-list-more{
32 background: #FFFF66; /* Gecko Browsers */ 32 background: #FFFF66; /* Gecko Browsers */
33 } 33 }
34 34
  35 +.comment_paragraph{
  36 + padding: 0px;
  37 +}
  38 +
35 .triangle-right { 39 .triangle-right {
36 position:relative; 40 position:relative;
37 padding:15px; 41 padding:15px;
@@ -61,17 +65,63 @@ div.article-comments-list-more{ @@ -61,17 +65,63 @@ div.article-comments-list-more{
61 } 65 }
62 66
63 67
64 -.side-comments-box{ 68 +.side-comments-counter{
  69 + width: 20px;
  70 + top: 10px;
  71 + border-style: solid;
  72 + border-width: 1px;
  73 + position: absolute;
  74 + left: -5px;
  75 + background: #075698;
  76 + z-index: 199;
  77 + color: #FFFFFF;
  78 + display: none;
  79 + padding: 5px;
  80 +}
  81 +
  82 +#comment_title{
  83 + display: none;
  84 +}
  85 +
  86 +div[class^='comments_list_toggle_paragraph_'] {
  87 + border-style: solid;
  88 + border-width: 1px;
  89 + border-color: black;
  90 + padding: 5px;
  91 +}
  92 +
  93 +
  94 +
  95 +/*.comment-details{
  96 + width: 365px;
  97 +}*/
  98 +
  99 +/*.side-comments-text{
  100 + word-wrap: break-word;
  101 +}*/
  102 +
  103 +/*.side-comments-box{
65 position: absolute; 104 position: absolute;
66 top: 0px; 105 top: 0px;
67 border-style: solid; 106 border-style: solid;
68 border-width: 1px; 107 border-width: 1px;
69 border-color: black; 108 border-color: black;
70 z-index: 99; 109 z-index: 99;
71 - width: 200px; 110 + width: 350px;
  111 + height: auto;
72 overflow-y: auto; 112 overflow-y: auto;
73 -} 113 + display: none;
  114 + background: #FFFFFF;
  115 +}*/
74 116
75 -.side-comments-counter{  
76 - width: 20px;  
77 -}  
78 \ No newline at end of file 117 \ No newline at end of file
  118 +
  119 +/*
  120 +element.style {
  121 +position: relative;
  122 +right: -442px;
  123 +width: 365px;
  124 +top: -56px;
  125 +background: gray;
  126 +border: 1px solid;
  127 +}
  128 +*/