selection working but with bug after changing paragraph

Evandro Jr
1 parent 02b24442
Showing 6 changed files with 89 additions and 23 deletions Show diff stats
controllers/profile/comment_paragraph_plugin_profile_controller.rb
lib/comment_paragraph_plugin.rb
lib/ext/comment.rb
public/comment_paragraph_macro.js
views/comment/comment_extra.html.erb
views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -11,7 +11,6 @@ class CommentParagraphPluginProfileController &lt; ProfileController
     @comments = article.comments.without_spam.in_paragraph(@paragraph_id)
     @comments_count = @comments.count
     @comments = @comments.without_reply.paginate(:per_page => per_page, :page => @paragraph_comment_page )
-
     @no_more_pages = @comments_count <= @paragraph_comment_page * per_page
   end
@@ -23,6 +23,13 @@ class CommentParagraphPlugin &lt; Noosfero::Plugin
       arr
     }
   end
+  
+  def comment_extra_contents(args)
+    comment = args[:comment]
+    proc {
+      render :file => 'comment/comment_extra', :locals => {:comment => comment}
+    }
+  end
   def js_files
     ['comment_paragraph_macro', 'rangy-core', 'rangy-cssclassapplier', 'rangy-serializer']
@@ -5,7 +5,7 @@ class Comment
   scope :without_paragraph, :conditions => {:paragraph_id => nil }
   settings_items :comment_paragraph_selected_area, :type => :string
-  
+    
   scope :in_paragraph, proc { |paragraph_id| {
       :conditions => ['paragraph_id = ?', paragraph_id]
     }
 var comment_paragraph_anchor;
+
+var ParagraphSelectionCache = {};
+
 jQuery(document).ready(function($) {
   rangy.init();
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
@@ -7,15 +10,28 @@ jQuery(document).ready(function($) {
     $(this).find('.commented-area').replaceWith(function() {
       return $(this).html();
     });
+      var rootElement = $(this).get(0);
+      if(ParagraphSelectionCache.last_paragraph){
+        rootElement.innerHTML = ParagraphSelectionCache.last_paragraph;
+      }
   }); 
    //highlight area from the paragraph
   $('.comment_paragraph').mouseup(function(){
-    rootElement = $(this).get(0);
-    console.log(rootElement)
-    cssApplier.toggleSelection();
+    var rootElement = $(this).get(0);
+    
+    ParagraphSelectionCache.last_paragraph = rootElement.innerHTML;
+    
+    console.log(rootElement)   ;
+   
     var selObj = rangy.getSelection();
     var selected_area = rangy.serializeSelection(selObj, true,rootElement);  
+    
+    cssApplier.toggleSelection();
+    
+    ParagraphSelectionCache.last_selected_area = selected_area;    
+    //cssApplier.toggleSelection();
+    
     form = jQuery(this).parent().find('form');
     if (form.find('input.selected_area').length === 0){
       jQuery('<input>').attr({
@@ -32,14 +48,14 @@ jQuery(document).ready(function($) {
 // em <li id="comment-31" class="article-comment"> colocar um data-paragraph e data-selected-area
- //highlight area from the paragraph
-  $('.article-comment').mouseover(function(){
-    rootElement = $('#comment_paragraph_' + this).get(0);
-    var selObj = rangy.getSelection();
-    var se = $('#result').val();
-    rangy.deserializeSelection(se, rootElement);
-    cssApplier.toggleSelection();
-  });
+// //highlight area from the paragraph
+//  $('.article-comment').mouseover(function(){
+//    rootElement = $('#comment_paragraph_' + this).get(0);
+//    var selObj = rangy.getSelection();
+//    var se = $('#result').val();
+//    rangy.deserializeSelection(se, rootElement);
+//    cssApplier.toggleSelection();
+//  });
   function processSomething(){
     var anchor = window.location.hash;
@@ -64,6 +80,57 @@ jQuery(document).ready(function($) {
   processSomething();
+  $(document).on('mouseover', 'li.article-comment', function(){
+    var selected_area = $(this).find('input.paragraph_comment_area').val();
+    var paragraph_id =  $(this).find('input.paragraph_id').val();
+    var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
+    
+    if(ParagraphSelectionCache.last_paragraph == null || ParagraphSelectionCache.last_paragraph == 'undefined'){
+      console.log(rootElement.innerHTML);
+      ParagraphSelectionCache.last_paragraph = rootElement.innerHTML;
+    }
+    else {
+      rootElement.innerHTML = ParagraphSelectionCache.last_paragraph ;
+    }
+    
+    //console.log(rootElement.innerHTML);
+    console.log(selected_area);
+    rangy.deserializeSelection(selected_area, rootElement);
+    cssApplier.toggleSelection();
+  });
+  
+  $(document).on('mouseout', 'li.article-comment', function(){
+    var paragraph_id =  $(this).find('input.paragraph_id').val();
+    var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
+    console.log(ParagraphSelectionCache.last_paragraph);
+    
+//    cssApplier.undoToSelection();
+//
+//    cssApplier.toggleSelection();
+    
+    
+    if(ParagraphSelectionCache.last_selected_area != null && ParagraphSelectionCache.last_selected_area != 'undefined' ){
+      rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
+      rootElement.innerHTML = ParagraphSelectionCache.last_paragraph ;
+      rangy.deserializeSelection(ParagraphSelectionCache.last_selected_area, rootElement);
+      cssApplier.toggleSelection();
+    } else {
+      cssApplier.toggleSelection();
+      var sel = rangy.getSelection();
+      sel.removeAllRanges();
+    }
+    
+//var selected_area = $(this).find('input.paragraph_comment_area').val();
+    //var paragraph_id =  $(this).find('input.paragraph_id').val();
+    //var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
+    //console.log(rootElement.innerHTML);
+    //console.log(selected_area);
+    //rangy.deserializeSelection(selected_area, rootElement);
+    //cssApplier.toggleSelection();
+    //window.last_paragraph
+    //if(last_selected_area)
+  });
+  
 });
 function selectAreaForComment(paragraph){
@@ -0,0 +1,2 @@
+<input type="hidden" value="<%=  comment.comment_paragraph_selected_area%>" class="paragraph_comment_area" />
+<input type="hidden" value="<%=  comment.paragraph_id%>" class="paragraph_id" />
@@ -28,13 +28,4 @@
     </div>
   </div>
-</div>
-  
-<script>
-  jQuery(document).ready(function($) {
-    //if($(".article-comment").find("comment-<%#= id %>").length > 0){
-     // alert("achou comentario");
-    //}
-  });
-</script>
-    
 \ No newline at end of file
+</div>
 \ No newline at end of file
	@@ -11,7 +11,6 @@ class CommentParagraphPluginProfileController < ProfileController		@@ -11,7 +11,6 @@ class CommentParagraphPluginProfileController < ProfileController
11	@comments = article.comments.without_spam.in_paragraph(@paragraph_id)	11	@comments = article.comments.without_spam.in_paragraph(@paragraph_id)
12	@comments_count = @comments.count	12	@comments_count = @comments.count
13	@comments = @comments.without_reply.paginate(:per_page => per_page, :page => @paragraph_comment_page )	13	@comments = @comments.without_reply.paginate(:per_page => per_page, :page => @paragraph_comment_page )
14	-
15	@no_more_pages = @comments_count <= @paragraph_comment_page * per_page	14	@no_more_pages = @comments_count <= @paragraph_comment_page * per_page
16	end	15	end
17		16
	@@ -23,6 +23,13 @@ class CommentParagraphPlugin < Noosfero::Plugin		@@ -23,6 +23,13 @@ class CommentParagraphPlugin < Noosfero::Plugin
23	arr	23	arr
24	}	24	}
25	end	25	end
		26	+
		27	+ def comment_extra_contents(args)
		28	+ comment = args[:comment]
		29	+ proc {
		30	+ render :file => 'comment/comment_extra', :locals => {:comment => comment}
		31	+ }
		32	+ end
26		33
27	def js_files	34	def js_files
28	['comment_paragraph_macro', 'rangy-core', 'rangy-cssclassapplier', 'rangy-serializer']	35	['comment_paragraph_macro', 'rangy-core', 'rangy-cssclassapplier', 'rangy-serializer']
	@@ -5,7 +5,7 @@ class Comment		@@ -5,7 +5,7 @@ class Comment
5	scope :without_paragraph, :conditions => {:paragraph_id => nil }	5	scope :without_paragraph, :conditions => {:paragraph_id => nil }
6		6
7	settings_items :comment_paragraph_selected_area, :type => :string	7	settings_items :comment_paragraph_selected_area, :type => :string
8	-	8	+
9	scope :in_paragraph, proc { \|paragraph_id\| {	9	scope :in_paragraph, proc { \|paragraph_id\| {
10	:conditions => ['paragraph_id = ?', paragraph_id]	10	:conditions => ['paragraph_id = ?', paragraph_id]
11	}	11	}
1	var comment_paragraph_anchor;	1	var comment_paragraph_anchor;
		2	+
		3	+var ParagraphSelectionCache = {};
		4	+
2	jQuery(document).ready(function($) {	5	jQuery(document).ready(function($) {
3	rangy.init();	6	rangy.init();
4	cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});	7	cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
	@@ -7,15 +10,28 @@ jQuery(document).ready(function($) {		@@ -7,15 +10,28 @@ jQuery(document).ready(function($) {
7	$(this).find('.commented-area').replaceWith(function() {	10	$(this).find('.commented-area').replaceWith(function() {
8	return $(this).html();	11	return $(this).html();
9	});	12	});
		13	+ var rootElement = $(this).get(0);
		14	+ if(ParagraphSelectionCache.last_paragraph){
		15	+ rootElement.innerHTML = ParagraphSelectionCache.last_paragraph;
		16	+ }
10	});	17	});
11		18
12	//highlight area from the paragraph	19	//highlight area from the paragraph
13	$('.comment_paragraph').mouseup(function(){	20	$('.comment_paragraph').mouseup(function(){
14	- rootElement = $(this).get(0);
15	- console.log(rootElement)
16	- cssApplier.toggleSelection();	21	+ var rootElement = $(this).get(0);
		22	+
		23	+ ParagraphSelectionCache.last_paragraph = rootElement.innerHTML;
		24	+
		25	+ console.log(rootElement) ;
		26	+
17	var selObj = rangy.getSelection();	27	var selObj = rangy.getSelection();
18	var selected_area = rangy.serializeSelection(selObj, true,rootElement);	28	var selected_area = rangy.serializeSelection(selObj, true,rootElement);
		29	+
		30	+ cssApplier.toggleSelection();
		31	+
		32	+ ParagraphSelectionCache.last_selected_area = selected_area;
		33	+ //cssApplier.toggleSelection();
		34	+
19	form = jQuery(this).parent().find('form');	35	form = jQuery(this).parent().find('form');
20	if (form.find('input.selected_area').length === 0){	36	if (form.find('input.selected_area').length === 0){
21	jQuery('<input>').attr({	37	jQuery('<input>').attr({
	@@ -32,14 +48,14 @@ jQuery(document).ready(function($) {		@@ -32,14 +48,14 @@ jQuery(document).ready(function($) {
32		48
33		49
34	// em <li id="comment-31" class="article-comment"> colocar um data-paragraph e data-selected-area	50	// em <li id="comment-31" class="article-comment"> colocar um data-paragraph e data-selected-area
35	- //highlight area from the paragraph
36	- $('.article-comment').mouseover(function(){
37	- rootElement = $('#comment_paragraph_' + this).get(0);
38	- var selObj = rangy.getSelection();
39	- var se = $('#result').val();
40	- rangy.deserializeSelection(se, rootElement);
41	- cssApplier.toggleSelection();
42	- });	51	+// //highlight area from the paragraph
		52	+// $('.article-comment').mouseover(function(){
		53	+// rootElement = $('#comment_paragraph_' + this).get(0);
		54	+// var selObj = rangy.getSelection();
		55	+// var se = $('#result').val();
		56	+// rangy.deserializeSelection(se, rootElement);
		57	+// cssApplier.toggleSelection();
		58	+// });
43		59
44	function processSomething(){	60	function processSomething(){
45	var anchor = window.location.hash;	61	var anchor = window.location.hash;
	@@ -64,6 +80,57 @@ jQuery(document).ready(function($) {		@@ -64,6 +80,57 @@ jQuery(document).ready(function($) {
64		80
65	processSomething();	81	processSomething();
66		82
		83	+ $(document).on('mouseover', 'li.article-comment', function(){
		84	+ var selected_area = $(this).find('input.paragraph_comment_area').val();
		85	+ var paragraph_id = $(this).find('input.paragraph_id').val();
		86	+ var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
		87	+
		88	+ if(ParagraphSelectionCache.last_paragraph == null \|\| ParagraphSelectionCache.last_paragraph == 'undefined'){
		89	+ console.log(rootElement.innerHTML);
		90	+ ParagraphSelectionCache.last_paragraph = rootElement.innerHTML;
		91	+ }
		92	+ else {
		93	+ rootElement.innerHTML = ParagraphSelectionCache.last_paragraph ;
		94	+ }
		95	+
		96	+ //console.log(rootElement.innerHTML);
		97	+ console.log(selected_area);
		98	+ rangy.deserializeSelection(selected_area, rootElement);
		99	+ cssApplier.toggleSelection();
		100	+ });
		101	+
		102	+ $(document).on('mouseout', 'li.article-comment', function(){
		103	+ var paragraph_id = $(this).find('input.paragraph_id').val();
		104	+ var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
		105	+ console.log(ParagraphSelectionCache.last_paragraph);
		106	+
		107	+// cssApplier.undoToSelection();
		108	+//
		109	+// cssApplier.toggleSelection();
		110	+
		111	+
		112	+ if(ParagraphSelectionCache.last_selected_area != null && ParagraphSelectionCache.last_selected_area != 'undefined' ){
		113	+ rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
		114	+ rootElement.innerHTML = ParagraphSelectionCache.last_paragraph ;
		115	+ rangy.deserializeSelection(ParagraphSelectionCache.last_selected_area, rootElement);
		116	+ cssApplier.toggleSelection();
		117	+ } else {
		118	+ cssApplier.toggleSelection();
		119	+ var sel = rangy.getSelection();
		120	+ sel.removeAllRanges();
		121	+ }
		122	+
		123	+//var selected_area = $(this).find('input.paragraph_comment_area').val();
		124	+ //var paragraph_id = $(this).find('input.paragraph_id').val();
		125	+ //var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
		126	+ //console.log(rootElement.innerHTML);
		127	+ //console.log(selected_area);
		128	+ //rangy.deserializeSelection(selected_area, rootElement);
		129	+ //cssApplier.toggleSelection();
		130	+ //window.last_paragraph
		131	+ //if(last_selected_area)
		132	+ });
		133	+
67	});	134	});
68		135
69	function selectAreaForComment(paragraph){	136	function selectAreaForComment(paragraph){
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+<input type="hidden" value="<%= comment.comment_paragraph_selected_area%>" class="paragraph_comment_area" />
	2	+<input type="hidden" value="<%= comment.paragraph_id%>" class="paragraph_id" />
	@@ -28,13 +28,4 @@		@@ -28,13 +28,4 @@
28	</div>	28	</div>
29		29
30	</div>	30	</div>
31	-</div>
32	-
33	-<script>
34	- jQuery(document).ready(function($) {
35	- //if($(".article-comment").find("comment-<%#= id %>").length > 0){
36	- // alert("achou comentario");
37	- //}
38	- });
39	-</script>
40	-
41	\ No newline at end of file	31	\ No newline at end of file
		32	+</div>
42	\ No newline at end of file	33	\ No newline at end of file