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 2 var lastParagraph = [];
3 3 var lastSelectedArea = [];
4 4 var sideCommentForm=null;
  5 +var firstTimeOpenParagraph = Array();
  6 +var commentParagraphIds = Array();
5 7  
6 8 function getIdCommentParagraph(paragraphId){
7 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 19 function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
... ... @@ -36,16 +44,12 @@ function buildSideCommentBox(id, commentCount ){
36 44 //Search to top of the respective paragraph
37 45 var top = $('#comment_paragraph_' + id).offset().top;
38 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 53 return boxComments;
50 54 }
51 55  
... ... @@ -54,36 +58,97 @@ function putSideComments(){
54 58  
55 59 $(".comment-count").each(function(index){
56 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 67 var commentCount = $(this).text().trim();
65 68 commentCount = parseInt(commentCount);
66 69 var box = buildSideCommentBox(id_number, commentCount);
67 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 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 88 rangy.init();
77 89 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
78 90  
79 91 //Add marked text bubble
80 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 94 <div align="center" class="triangle-right" >Comentar<br>+</div>\
83 95 </a>');
84 96 //buildSideCommentBlock();
  97 + //
85 98 //Creates a side bubble for each paragraph with the amount of comments
86 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 153 $("#comment-bubble").hide();
89 154 //Undo previous highlight from the paragraph
... ... @@ -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 172 //highlight area from the paragraph
107 173 $('.comment_paragraph').mouseup(function(event){
... ... @@ -134,32 +200,30 @@ jQuery(document).ready(function($) {
134 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 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 229 function processAnchor(){
... ... @@ -174,12 +238,19 @@ jQuery(document).ready(function($) {
174 238  
175 239 comment_paragraph_anchor = anchor;
176 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 32 background: #FFFF66; /* Gecko Browsers */
33 33 }
34 34  
  35 +.comment_paragraph{
  36 + padding: 0px;
  37 +}
  38 +
35 39 .triangle-right {
36 40 position:relative;
37 41 padding:15px;
... ... @@ -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 104 position: absolute;
66 105 top: 0px;
67 106 border-style: solid;
68 107 border-width: 1px;
69 108 border-color: black;
70 109 z-index: 99;
71   - width: 200px;
  110 + width: 350px;
  111 + height: auto;
72 112 overflow-y: auto;
73   -}
  113 + display: none;
  114 + background: #FFFFFF;
  115 +}*/
74 116  
75   -.side-comments-counter{
76   - width: 20px;
77   -}
78 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 +*/
... ...