Merge branch 'AI3205-comment-paragraph' into stable

Evandro Jr
2 parents 0eb620f0 bec3e0ec
Showing 7 changed files with 124 additions and 38 deletions Show diff stats
plugins/comment_paragraph/lib/comment_paragraph_plugin.rb
plugins/comment_paragraph/lib/ext/comment.rb
plugins/comment_paragraph/public/comment_paragraph_macro.js
plugins/comment_paragraph/public/style.css
plugins/comment_paragraph/test/unit/comment_paragraph_plugin_test.rb
plugins/comment_paragraph/views/comment/comment_extra.html.erb
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -19,7 +19,8 @@ class CommentParagraphPlugin &lt; Noosfero::Plugin
       arr = []
       arr << hidden_field_tag('comment[id]', comment.id)
       arr << hidden_field_tag('comment[paragraph_id]', paragraph_id) if paragraph_id
-      arr << hidden_field_tag('comment[comment_paragraph_selected_area]', comment.comment_paragraph_selected_area) if comment.comment_paragraph_selected_area
+      arr << hidden_field_tag('comment[comment_paragraph_selected_area]', comment.comment_paragraph_selected_area) unless comment.comment_paragraph_selected_area.blank?
+      arr << hidden_field_tag('comment[comment_paragraph_selected_content]', comment.comment_paragraph_selected_content) unless comment.comment_paragraph_selected_content.blank?
       arr
     }
   end
@@ -3,14 +3,20 @@ require_dependency &#39;comment&#39;
 class Comment
   scope :without_paragraph, :conditions => {:paragraph_id => nil }
- 
+
   settings_items :comment_paragraph_selected_area, :type => :string
-   
+  settings_items :comment_paragraph_selected_content, :type => :string
+
   scope :in_paragraph, proc { |paragraph_id| {
       :conditions => ['paragraph_id = ?', paragraph_id]
     }
   }
-  attr_accessible :paragraph_id, :comment_paragraph_selected_area, :id
+  attr_accessible :paragraph_id, :comment_paragraph_selected_area, :id, :comment_paragraph_selected_content
+
+  before_validation do |comment|
+    comment.comment_paragraph_selected_area = nil if comment.comment_paragraph_selected_area.blank?
+    comment.comment_paragraph_selected_content = nil if comment_paragraph_selected_content.blank?
+  end
 end
 var comment_paragraph_anchor;
 var lastSelectedArea = [];
 var original_paragraphs = [];
+var originalArticleHeight = 0
 function setPlusIfZeroComments($){
   $('.comment-count').each(function(){
@@ -15,6 +16,8 @@ jQuery(document).ready(function($) {
   if($('.comment_paragraph').size() < 1)
     return;
+  originalArticleHeight = $('.article-body').height();
+
   all_paragraphs = $('.comment_paragraph');
   all_paragraphs.each( function(paragraph) {
     var paragraph_id = $( all_paragraphs.get(paragraph) ).attr('data-paragraph');
@@ -40,6 +43,12 @@ jQuery(document).ready(function($) {
     return false;
   });
+  //Clears all old selected_area and selected_content after submit comment
+  $('[name|=commit]').click(function(){
+      $('.selected_area').val("");
+      $('.selected_content').val("");
+  });
+
   $('#cancel-comment').die();
   $(document.body).on("click", '#cancel-comment', function(){
     $("div.side-comment").hide();
@@ -51,7 +60,7 @@ jQuery(document).ready(function($) {
       div.addClass('opened');
     }
   }
-  
+
   rangy.init();
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
   //Add marked text bubble
@@ -60,14 +69,27 @@ jQuery(document).ready(function($) {
           <div align="center"  class="triangle-right" >Comentar</div>\
       </a>');
+  function resizeArticle(paragraphId){
+    var commentHeigh = $('#side_comment_' + paragraphId).height();
+    if(commentHeigh > 0){
+      $('.article-body').height(originalArticleHeight + commentHeigh + 50);
+    }else{
+       $('.article-body').height(originalArticleHeight);
+    }
+  }
   $('.side-comments-counter').click(function(){
     var paragraphId = $(this).data('paragraph');
     hideAllCommentsExcept(paragraphId);
     hideAllSelectedAreasExcept(paragraphId);
+    if($('.comment-paragraph-slide-left').size()==0){
+      $('.article-body').addClass('comment-paragraph-slide-left');
+      $('#side_comment_' + paragraphId).show();
+    }else{
+      $('.article-body').removeClass('comment-paragraph-slide-left');
+      $('.side-comment').hide();
+    }
     $('#comment-bubble').hide();
-    $('#side_comment_' + paragraphId).toggle();
-    $('#side_comment_' + paragraphId).find().toggle();
     //Loads the comments
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $.ajax({
@@ -76,12 +98,16 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
+      resizeArticle(paragraphId);
     });
   });
   $('#comment-bubble').click(function(event){
     $(this).hide();
+    if($('.comment-paragraph-slide-left').size()==0){
+      $('.article-body').addClass('comment-paragraph-slide-left');
+    }
     $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
     var url = $("#comment-bubble").data('url');
     var paragraphId = $("#comment-bubble").data("paragraphId");
@@ -93,6 +119,7 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
+      resizeArticle(paragraphId);
     });
   });
@@ -101,7 +128,7 @@ jQuery(document).ready(function($) {
       paragraph = $(this).data('paragraph');
       if(paragraph != clickedParagraph){
         $(this).hide();
-        $(this).find().hide();
+        //$(this).find().hide();
       }
     });
   }
@@ -139,6 +166,11 @@ jQuery(document).ready(function($) {
   $('.comment_paragraph').mouseup(function(event) {
     $('#comment-bubble').hide();
+    if($('.comment-paragraph-slide-left').size() > 0){
+      $('.article-body').removeClass('comment-paragraph-slide-left');
+      $('.side-comment').hide();
+      //$('.side-comment').find().hide();
+    }
     //Don't do anything if there is no selected text
     if (getSelectionText().length == 0) {
@@ -164,9 +196,9 @@ jQuery(document).ready(function($) {
     } catch(e) {
       return;
     }
+    form = $('#page-comment-form-' + paragraphId).find('form');
     //Register the area the has been selected at input.selected_area
-    form = $('#page-comment-form-' + paragraphId).find('form');
     if (form.find('input.selected_area').length === 0){
       $('<input>').attr({
         class: 'selected_area',
@@ -177,8 +209,20 @@ jQuery(document).ready(function($) {
     }else{
       form.find('input.selected_area').val(selected_area)
     }
+    //Register the content being selected at input.comment_paragraph_selected_content
+    var selected_content = getSelectionText();
+    if(selected_content.length > 0)
+    if (form.find('input.selected_content').length === 0){
+      $('<input>').attr({
+        class: 'selected_content',
+        type: 'hidden',
+        name: 'comment[comment_paragraph_selected_content]',
+        value: selected_content
+      }).appendTo(form)
+    }else{
+      form.find('input.selected_content').val(selected_content)
+    }
     rootElement.focus();
-
   });
   function processAnchor(){
@@ -7,7 +7,7 @@ div.article-comments-list-more{
 }
 .popBox_comment_paragraph {
-  position: absolute;
+/*  position: absolute;*/
   z-index: 2;
   background: #cccccc;
   width: 60px;
@@ -34,9 +34,6 @@ div.article-comments-list-more{
 .comment_paragraph{
   padding: 0px;
-  position: relative;
-  left: -20px;
-  width: 450px;
   font-weight: bold;
   text-align: justify;
 }
@@ -92,12 +89,10 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] {
  border-color: #ccc;
  padding: 5px;
  background-color: whitesmoke;
- width: 270px;
+ width: 300px;
 }
 div[class^='comment-paragraph-loading-'] {
- position: relative;
- left: 470px;
  z-index: 99;
 }
@@ -167,6 +162,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   padding: 0;
   width: 100%;
   text-align: left;
+  overflow:  visible;
+  line-break: loose;
 }
 .side-comment .comment-text p {
   margin: 0;
@@ -188,7 +185,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   padding-left: 25px;
 }
 #article .side-comment .comment-picture {
-  width: 75%;
+  width: 100%;
   height: auto;
 }
 #article .side-comment .article-comment .comment-details > h4 {
@@ -212,6 +209,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   bg-color: #b3b2d4;
 }
+/*
 .comment-paragraph-rowset{
   padding: 0;
   margin: 0;
@@ -225,8 +223,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   -webkit-flex-flow: row wrap;
   justify-content: space-around;
+}*/
-}
 .comment-paragraph-comments{
   background: lightblue;
   padding: 5px;
@@ -235,4 +233,21 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   color: white;
   font-weight: bold;
   text-align: center;
+}
+
+.single-border{
+  border-style:  solid;
+  border-width: 2px;
+}
+
+.comment-paragraph-group-comments{
+  position: absolute;
+  background-color: white;
+  z-index: 9999;
+}
+
+.comment-paragraph-slide-left{
+  position: relative;
+  width: 80%;
+  transition: 0.6s;
 }
 \ No newline at end of file
 require File.dirname(__FILE__) + '/../test_helper'
+include ActionView::Helpers::FormTagHelper
 class CommentParagraphPluginTest < ActiveSupport::TestCase
@@ -25,4 +26,13 @@ class CommentParagraphPluginTest &lt; ActiveSupport::TestCase
     assert plugin.stylesheet?
   end
+  should 'not add comment_paragraph_selected_area if comment_paragraph_selected_area is blank' do
+    comment = Comment.new
+    comment.comment_paragraph_selected_area = ""
+    comment.paragraph_id = 2
+    cpp = CommentParagraphPlugin.new
+    prok = cpp.comment_form_extra_contents({:comment=>comment, :paragraph_id=>4})
+    assert_nil /comment_paragraph_selected_area/.match(prok.call.inspect)
+  end
+
 end
 <input type="hidden" value="<%=  comment.comment_paragraph_selected_area%>" class="paragraph_comment_area" />
-<input type="hidden" value="<%=  comment.paragraph_id%>" class="paragraph_id" />
+<input type="hidden" value="<%=  comment.paragraph_id%>" class="paragraph_id" /><input type="hidden" value="<%=  comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
+<input type="hidden" value="<%=  comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
-<ul class="comments comment-paragraph-rowset">
-  <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
-    <%= inner_html %>
-  </li>
-
-  <li  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
-    <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
-      <%= count %>
-    </span>
-  </li>
-  
-  <div align="center">
+<table class="comments">
+  <tr>
+    <td>
+      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
+        <%= inner_html %>
+      </div>
+    </td>
+    <td>
+      <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
+        <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
+          <%= count %>
+        </span>
+      </div>
+    </td>
+    <td>
+<div class="comment-paragraph-group-comments">
      <%=
        url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
        link_to_remote(
@@ -25,10 +29,9 @@
          :'data-url' => url_for(url)
        }
      )%>
-   </div>
-  
-   <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
-     <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
+
+  <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
+     <div class="comment-paragraph-loading-<%= paragraph_id %>">
        <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
          <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
          <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
@@ -37,7 +40,13 @@
          </div>
        </div>
      </div>
-   </div>
- </ul>
+  </div>
+</div>
+    </td>
+  </tr>
+</table>
+
+
+
1	require File.dirname(__FILE__) + '/../test_helper'	1	require File.dirname(__FILE__) + '/../test_helper'
		2	+include ActionView::Helpers::FormTagHelper
2		3
3	class CommentParagraphPluginTest < ActiveSupport::TestCase	4	class CommentParagraphPluginTest < ActiveSupport::TestCase
4		5
	@@ -25,4 +26,13 @@ class CommentParagraphPluginTest < ActiveSupport::TestCase		@@ -25,4 +26,13 @@ class CommentParagraphPluginTest < ActiveSupport::TestCase
25	assert plugin.stylesheet?	26	assert plugin.stylesheet?
26	end	27	end
27		28
		29	+ should 'not add comment_paragraph_selected_area if comment_paragraph_selected_area is blank' do
		30	+ comment = Comment.new
		31	+ comment.comment_paragraph_selected_area = ""
		32	+ comment.paragraph_id = 2
		33	+ cpp = CommentParagraphPlugin.new
		34	+ prok = cpp.comment_form_extra_contents({:comment=>comment, :paragraph_id=>4})
		35	+ assert_nil /comment_paragraph_selected_area/.match(prok.call.inspect)
		36	+ end
		37	+
28	end	38	end
1	<input type="hidden" value="<%= comment.comment_paragraph_selected_area%>" class="paragraph_comment_area" />	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" />	2	+<input type="hidden" value="<%= comment.paragraph_id%>" class="paragraph_id" /><input type="hidden" value="<%= comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
		3	+<input type="hidden" value="<%= comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />