Download as
Browse Code »

Commit 46bc4c4dc54ba9489f6a0905ee3e834ef652c7bc

Authored by Evandro Jr
1 parent 66623b1c
Exists in theme-brasil-digital-from-staging and in 9 other branches angular_poc, api-article-archived, backup-7-jan-2016, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email, staging, staging_rails3

including side comments

Showing 3 changed files with 94 additions and 17 deletions   Show diff stats
plugins/comment_paragraph/public/comment_paragraph_macro.js
  Diff comments   View file @46bc4c4
... ... @@ -9,25 +9,82 @@ function getIdCommentParagraph(paragraphId){
9 9 }
10 10  
11 11 function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
12   - $ = jQuery;
13   - var element = sideCommentForm;
  12 + var $ = jQuery;
  13 + //var element = sideCommentForm;
14 14 //element.detach();
15   - if ( $('body #side_comment_form').size == 0){
16   - $('body').append(element);
17   - }
18   - element.css({top: mouseY-50, left: $( window ).width()-490, position:'absolute'});
  15 + //if ( $('body #side_comment_form').size === 0){
  16 +// $('body').append(element);
  17 +// }
  18 + //element.css({top: 0, border-right: 20, position:'absolute'});
  19 +}
  20 +
  21 +//function buildSideCommentBlock(){
  22 +// var $ = jQuery;
  23 +// $("body").append('\
  24 +// <div align="left" id="side_comments_box" class="side-comments-box">\n\
  25 +// [side comments collumn]<BR>\n\
  26 +// [side comments collumn]<BR>\n\
  27 +// </div>\n\
  28 +// ');
  29 +// //Detects if there is any comment paragraph
  30 +//
  31 +// // var button = jQuery('#page-comment-form-' + paragraphId + ' a')[0];
  32 +//}
  33 +
  34 +function buildSideCommentBox(id, commentCount ){
  35 + var $ = jQuery;
  36 + //Search to top of the respective paragraph
  37 + var top = $('#comment_paragraph_' + id).offset().top;
  38 + 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>";
  49 + return boxComments;
  50 +}
  51 +
  52 +function putSideComments(){
  53 + var $ = jQuery;
  54 +
  55 + $(".comment-count").each(function(index){
  56 + //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());
  64 + var commentCount = $(this).text().trim();
  65 + commentCount = parseInt(commentCount);
  66 + var box = buildSideCommentBox(id_number, commentCount);
  67 + $('body').append(box);
  68 + }
  69 +
  70 + });
  71 +
  72 +
19 73 }
20 74  
21 75 jQuery(document).ready(function($) {
22 76 rangy.init();
23 77 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
24 78  
25   -
26 79 //Add marked text bubble
27 80 $("body").append('\
28 81 <a href="#" id="comment-bubble" style="width:120px;height:105px;text-decoration: none">\
29 82 <div align="center" class="triangle-right" >Comentar<br>+</div>\
30 83 </a>');
  84 + //buildSideCommentBlock();
  85 + //Creates a side bubble for each paragraph with the amount of comments
  86 + putSideComments();
  87 +
31 88 $("#comment-bubble").hide();
32 89 //Undo previous highlight from the paragraph
33 90 $('.comment_paragraph').mousedown(function(){
... ... @@ -92,14 +149,14 @@ jQuery(document).ready(function($) {
92 149 url: url
93 150 }).done(function() {
94 151  
95   - var button = jQuery('#page-comment-form-' + paragraphId + ' a')[0];
96   - button.click();
97   -// window.location="#page-comment-form-" + paragraphId;
98   - //Move comments
99   - sideCommentForm = $('#side_comment_form');
100   - sideCommentForm.hide();
101   - sideCommentForm = $('.comment_form').first();
102   - sideCommentForm.attr("id",'side_comment_form');
  152 +
  153 +// 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');
103 160 moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
104 161 });
105 162 });
... ... @@ -166,7 +223,7 @@ function toggleParagraph(paragraph) {
166 223 var div = jQuery('div.comments_list_toggle_paragraph_'+paragraph);
167 224 var visible = div.is(':visible');
168 225 if(!visible)
169   - jQuery('div.comment-paragraph-loading-'+paragraph).addClass('comment-button-loading');
  226 + jQuery('div.comment-paragraph-loading-' + paragraph).addClass('comment-button-loading');
170 227 div.toggle('fast');
171 228 return visible;
172 229 }
... ...
plugins/comment_paragraph/public/style.css
  Diff comments   View file @46bc4c4
... ... @@ -59,3 +59,19 @@ div.article-comments-list-more{
59 59 display: block;
60 60 width: 0;
61 61 }
  62 +
  63 +
  64 +.side-comments-box{
  65 + position: absolute;
  66 + top: 0px;
  67 + border-style: solid;
  68 + border-width: 1px;
  69 + border-color: black;
  70 + z-index: 99;
  71 + width: 200px;
  72 + overflow-y: auto;
  73 +}
  74 +
  75 +.side-comments-counter{
  76 + width: 20px;
  77 +}
62 78 \ No newline at end of file
... ...
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @46bc4c4
... ... @@ -19,7 +19,11 @@
19 19 }
20 20 )%>
21 21 <!-- FIXME: css file -->
22   - <div align="center" id="comments_paragraph_count_<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC"><span id="comment-count-<%= paragraph_id %>" class='comment-count'><%= count %></span></div>
  22 + <div align="center" id="comments_paragraph_count_<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC">
  23 + <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
  24 + <%= count %>
  25 + </span>
  26 + </div>
23 27 </div>
24 28 <div class="comment-paragraph-loading-<%= paragraph_id %>"/>
25 29 <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" style="display:none">
... ...