trying to put the comment block to the side

Evandro Jr
1 parent f0dbd60f
Showing 3 changed files with 63 additions and 40 deletions Show diff stats
plugins/comment_paragraph/public/comment_paragraph.js
plugins/comment_paragraph/public/comment_paragraph_macro.js
plugins/comment_paragraph/public/style.css
@@ -16,7 +16,7 @@ function makeCommentable() {
   //Wraps the paragraph using the chosen class
   jQuery('#article_body_ifr').contents().find('body').children('p').each(function( index ) {
     text = jQuery(this).html().trim();
-    if(text!="" && text!="<br>"){
+    if(text!="" && text!=" " && text!="<br>"){
       paragraphsTxt+='<p><div class="macro article_comments" data-macro="comment_paragraph_plugin/allow_comment" data-macro-paragraph_id="' + index + '">' + text + '</div></p><br>'
     }
   });
 var comment_paragraph_anchor;
 var lastParagraph = [];
 var lastSelectedArea = [];
+var sideCommentForm=null;
  
 function getIdCommentParagraph(paragraphId){
   var idx = paragraphId.lastIndexOf('_');
   return paragraphId.substring(idx+1, paragraphId.length)
 }
  
+function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
+  $ = jQuery;
+  var element = sideCommentForm;
+  //element.detach();
+  if ( $('body #side_comment_form').size == 0){
+    $('body').append(element);
+  }
+  element.css({top: mouseY-50, left: $( window ).width()-490, position:'absolute'});
+}
+
 jQuery(document).ready(function($) {
   rangy.init();
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
  
+  
   //Add marked text bubble
   $("body").append('\
       <a href="#" id="comment-bubble" style="width:120px;height:105px;text-decoration: none">\
-          <div  align="center"  class="triangle-right" >Comentar<br>+</div>\
+          <div align="center"  class="triangle-right" >Comentar<br>+</div>\
       </a>');
   $("#comment-bubble").hide();
   //Undo previous highlight from the paragraph
@@ -30,55 +42,65 @@ jQuery(document).ready(function($) {
   });
  
   $('#comment-bubble').mouseleave(function(){
-      this.hide();
-      $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
+    //this.hide();
+    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
   });
  
    //highlight area from the paragraph
   $('.comment_paragraph').mouseup(function(event){
-      var paragraphId = getIdCommentParagraph($(this)[0].id);
-      var currentMousePos = { x: -1, y: -1 };
-      currentMousePos.x = event.pageX;
-      currentMousePos.y = event.pageY;
-      $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});      
-      $("#comment-bubble").data("paragraphId", paragraphId)
-      var url = $('#link_to_ajax_comments_' + paragraphId).data('url');      
-      $("#comment-bubble").data("url", url)
-      $("#comment-bubble").show();
-      var rootElement = $(this).get(0);
-      lastParagraph[paragraphId] = rootElement.innerHTML;
-      var selObj = rangy.getSelection();
-      var selected_area = rangy.serializeSelection(selObj, true,rootElement); 
-      cssApplier.toggleSelection();
-      lastSelectedArea[paragraphId] = selected_area;   
-      form = jQuery(this).parent().find('form');
-      if (form.find('input.selected_area').length === 0){
-        jQuery('<input>').attr({
-          class: 'selected_area',
-          type: 'hidden',
-          name: 'comment[comment_paragraph_selected_area]',
-          value: selected_area
-        }).appendTo(form)
-      }else{
-        form.find('input.selected_area').val(selected_area)
-      }   
-      rootElement.focus();
+    var paragraphId = getIdCommentParagraph($(this)[0].id);
+    var currentMousePos = { x: -1, y: -1 };
+    currentMousePos.x = event.pageX;
+    currentMousePos.y = event.pageY;
+    $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});      
+    $("#comment-bubble").data("paragraphId", paragraphId)
+    var url = $('#link_to_ajax_comments_' + paragraphId).data('url');      
+    $("#comment-bubble").data("url", url)
+    $("#comment-bubble").show();
+    var rootElement = $(this).get(0);
+    lastParagraph[paragraphId] = rootElement.innerHTML;
+    var selObj = rangy.getSelection();
+    var selected_area = rangy.serializeSelection(selObj, true,rootElement); 
+    cssApplier.toggleSelection();
+    lastSelectedArea[paragraphId] = selected_area;   
+    form = jQuery(this).parent().find('form');
+    if (form.find('input.selected_area').length === 0){
+      jQuery('<input>').attr({
+        class: 'selected_area',
+        type: 'hidden',
+        name: 'comment[comment_paragraph_selected_area]',
+        value: selected_area
+      }).appendTo(form)
+    }else{
+      form.find('input.selected_area').val(selected_area)
+    }
+    rootElement.focus();
   });
+  
+
+  
  
-  $('#comment-bubble').click(function(){
-    this.hide();
+  $('#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");
-    console.log(url);
+
     $('.comments_list_toggle_paragraph_' + paragraphId).show();
     $.ajax({
       dataType: "script",
       url: url
     }).done(function() {
-        var button = jQuery('#page-comment-form-' + paragraphId +  ' a')[0];
-        button.click();
-        window.location="#page-comment-form-" + paragraphId;
+      
+      var button = jQuery('#page-comment-form-' + paragraphId +  ' a')[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);
     });
   });
  
@@ -24,10 +24,11 @@ div.article-comments-list-more{
   background-color: #FFFF66;
 }
  
-::selection {
+.comment_paragraph ::selection {
   background: #FFFF66; /* WebKit/Blink Browsers */
 }
-::-moz-selection {
+
+.comment_paragraph ::-moz-selection {
   background: #FFFF66; /* Gecko Browsers */
 }
  
@@ -57,4 +58,4 @@ div.article-comments-list-more{
     border-color: #075698 transparent;
     display: block;
     width: 0;
-}
 \ No newline at end of file
+}
...	...	@@ -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	});
...	...
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
...	...
...	...	@@ -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	+}
...	...