Download as
Browse Code »

Commit 7b17befe337e35f4eaed5b3d53d0ba9c18077c33

Authored by Evandro Jr
1 parent eaef089c
Exists in master

trying to put the comment block to the side

Showing 3 changed files with 63 additions and 40 deletions   Show diff stats
public/comment_paragraph.js
  Diff comments   View file @7b17bef
... ... @@ -16,7 +16,7 @@ function makeCommentable() {
16 16 //Wraps the paragraph using the chosen class
17 17 jQuery('#article_body_ifr').contents().find('body').children('p').each(function( index ) {
18 18 text = jQuery(this).html().trim();
19   - if(text!="" && text!="<br>"){
  19 + if(text!="" && text!=" " && text!="<br>"){
20 20 paragraphsTxt+='<p><div class="macro article_comments" data-macro="comment_paragraph_plugin/allow_comment" data-macro-paragraph_id="' + index + '">' + text + '</div></p><br>'
21 21 }
22 22 });
... ...
public/comment_paragraph_macro.js
  Diff comments   View file @7b17bef
1 1 var comment_paragraph_anchor;
2 2 var lastParagraph = [];
3 3 var lastSelectedArea = [];
  4 +var sideCommentForm=null;
4 5  
5 6 function getIdCommentParagraph(paragraphId){
6 7 var idx = paragraphId.lastIndexOf('_');
7 8 return paragraphId.substring(idx+1, paragraphId.length)
8 9 }
9 10  
  11 +function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
  12 + $ = jQuery;
  13 + var element = sideCommentForm;
  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'});
  19 +}
  20 +
10 21 jQuery(document).ready(function($) {
11 22 rangy.init();
12 23 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
13 24  
  25 +
14 26 //Add marked text bubble
15 27 $("body").append('\
16 28 <a href="#" id="comment-bubble" style="width:120px;height:105px;text-decoration: none">\
17   - <div align="center" class="triangle-right" >Comentar<br>+</div>\
  29 + <div align="center" class="triangle-right" >Comentar<br>+</div>\
18 30 </a>');
19 31 $("#comment-bubble").hide();
20 32 //Undo previous highlight from the paragraph
... ... @@ -30,55 +42,65 @@ jQuery(document).ready(function($) {
30 42 });
31 43  
32 44 $('#comment-bubble').mouseleave(function(){
33   - this.hide();
34   - $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
  45 + //this.hide();
  46 + $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
35 47 });
36 48  
37 49 //highlight area from the paragraph
38 50 $('.comment_paragraph').mouseup(function(event){
39   - var paragraphId = getIdCommentParagraph($(this)[0].id);
40   - var currentMousePos = { x: -1, y: -1 };
41   - currentMousePos.x = event.pageX;
42   - currentMousePos.y = event.pageY;
43   - $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});
44   - $("#comment-bubble").data("paragraphId", paragraphId)
45   - var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
46   - $("#comment-bubble").data("url", url)
47   - $("#comment-bubble").show();
48   - var rootElement = $(this).get(0);
49   - lastParagraph[paragraphId] = rootElement.innerHTML;
50   - var selObj = rangy.getSelection();
51   - var selected_area = rangy.serializeSelection(selObj, true,rootElement);
52   - cssApplier.toggleSelection();
53   - lastSelectedArea[paragraphId] = selected_area;
54   - form = jQuery(this).parent().find('form');
55   - if (form.find('input.selected_area').length === 0){
56   - jQuery('<input>').attr({
57   - class: 'selected_area',
58   - type: 'hidden',
59   - name: 'comment[comment_paragraph_selected_area]',
60   - value: selected_area
61   - }).appendTo(form)
62   - }else{
63   - form.find('input.selected_area').val(selected_area)
64   - }
65   - rootElement.focus();
  51 + var paragraphId = getIdCommentParagraph($(this)[0].id);
  52 + var currentMousePos = { x: -1, y: -1 };
  53 + currentMousePos.x = event.pageX;
  54 + currentMousePos.y = event.pageY;
  55 + $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});
  56 + $("#comment-bubble").data("paragraphId", paragraphId)
  57 + var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
  58 + $("#comment-bubble").data("url", url)
  59 + $("#comment-bubble").show();
  60 + var rootElement = $(this).get(0);
  61 + lastParagraph[paragraphId] = rootElement.innerHTML;
  62 + var selObj = rangy.getSelection();
  63 + var selected_area = rangy.serializeSelection(selObj, true,rootElement);
  64 + cssApplier.toggleSelection();
  65 + lastSelectedArea[paragraphId] = selected_area;
  66 + form = jQuery(this).parent().find('form');
  67 + if (form.find('input.selected_area').length === 0){
  68 + jQuery('<input>').attr({
  69 + class: 'selected_area',
  70 + type: 'hidden',
  71 + name: 'comment[comment_paragraph_selected_area]',
  72 + value: selected_area
  73 + }).appendTo(form)
  74 + }else{
  75 + form.find('input.selected_area').val(selected_area)
  76 + }
  77 + rootElement.focus();
66 78 });
  79 +
  80 +
  81 +
67 82  
68   - $('#comment-bubble').click(function(){
69   - this.hide();
  83 + $('#comment-bubble').click(function(event){
  84 + // this.hide();
70 85 $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
71 86 var url = $("#comment-bubble").data('url');
72 87 var paragraphId = $("#comment-bubble").data("paragraphId");
73   - console.log(url);
  88 +
74 89 $('.comments_list_toggle_paragraph_' + paragraphId).show();
75 90 $.ajax({
76 91 dataType: "script",
77 92 url: url
78 93 }).done(function() {
79   - var button = jQuery('#page-comment-form-' + paragraphId + ' a')[0];
80   - button.click();
81   - window.location="#page-comment-form-" + paragraphId;
  94 +
  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');
  103 + moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
82 104 });
83 105 });
84 106  
... ...
public/style.css
  Diff comments   View file @7b17bef
... ... @@ -24,10 +24,11 @@ div.article-comments-list-more{
24 24 background-color: #FFFF66;
25 25 }
26 26  
27   -::selection {
  27 +.comment_paragraph ::selection {
28 28 background: #FFFF66; /* WebKit/Blink Browsers */
29 29 }
30   -::-moz-selection {
  30 +
  31 +.comment_paragraph ::-moz-selection {
31 32 background: #FFFF66; /* Gecko Browsers */
32 33 }
33 34  
... ... @@ -57,4 +58,4 @@ div.article-comments-list-more{
57 58 border-color: #075698 transparent;
58 59 display: block;
59 60 width: 0;
60   -}
61 61 \ No newline at end of file
  62 +}
... ...