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	11	@comments = article.comments.without_spam.in_paragraph(@paragraph_id)
12	12	@comments_count = @comments.count
13	13	@comments = @comments.without_reply.paginate(:per_page => per_page, :page => @paragraph_comment_page )
14		-
15	14	@no_more_pages = @comments_count <= @paragraph_comment_page * per_page
16	15	end
17	16
...	...
...	...	@@ -23,6 +23,13 @@ class CommentParagraphPlugin < Noosfero::Plugin
23	23	arr
24	24	}
25	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	34	def js_files
28	35	['comment_paragraph_macro', 'rangy-core', 'rangy-cssclassapplier', 'rangy-serializer']
...	...
...	...	@@ -5,7 +5,7 @@ class Comment
5	5	scope :without_paragraph, :conditions => {:paragraph_id => nil }
6	6
7	7	settings_items :comment_paragraph_selected_area, :type => :string
8		-
	8	+
9	9	scope :in_paragraph, proc { \|paragraph_id\| {
10	10	:conditions => ['paragraph_id = ?', paragraph_id]
11	11	}
...	...
1	1	var comment_paragraph_anchor;
	2	+
	3	+var ParagraphSelectionCache = {};
	4	+
2	5	jQuery(document).ready(function($) {
3	6	rangy.init();
4	7	cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
...	...	@@ -7,15 +10,28 @@ jQuery(document).ready(function($) {
7	10	$(this).find('.commented-area').replaceWith(function() {
8	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	19	//highlight area from the paragraph
13	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	27	var selObj = rangy.getSelection();
18	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	35	form = jQuery(this).parent().find('form');
20	36	if (form.find('input.selected_area').length === 0){
21	37	jQuery('<input>').attr({
...	...	@@ -32,14 +48,14 @@ jQuery(document).ready(function($) {
32	48
33	49
34	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	60	function processSomething(){
45	61	var anchor = window.location.hash;
...	...	@@ -64,6 +80,57 @@ jQuery(document).ready(function($) {
64	80
65	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	136	function selectAreaForComment(paragraph){
...	...
...	...	@@ -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	28	</div>
29	29
30	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	31	\ No newline at end of file
	32	+</div>
42	33	\ No newline at end of file
...	...