adding a menu to display comment actions

Victor Costa
1 parent e22e8356
Showing 5 changed files with 109 additions and 19 deletions Show diff stats
app/helpers/application_helper.rb
app/helpers/comment_helper.rb
app/views/comment/_comment.rhtml
public/javascripts/application.js
public/stylesheets/application.css
@@ -30,6 +30,8 @@ module ApplicationHelper
  
   include AccountHelper
  
+  include CommentHelper
+
   def locale
     (@page && !@page.language.blank?) ? @page.language : FastGettext.locale
   end
@@ -21,5 +21,44 @@ module CommentHelper
     end
     title
   end
+  
+  #FIXME make this test
+  def comment_actions(comment)
+    links = links_for_comment_actions(comment)
+    content_tag(:li, link_to(content_tag(:span, _('Contents menu')), '#', :onclick => "toggleSubmenu(this,'',#{links.to_json}); return false", :class => 'menu-submenu-trigger'), :class=> 'vcard') unless links.empty?
+  end
+
+  private
+
+  def links_for_comment_actions(comment)
+    [link_for_report_abuse(comment), link_for_spam(comment), link_for_edit(comment), link_for_remove(comment)].compact
+  end
+
+  def link_for_report_abuse(comment)
+    if comment.author
+      report_abuse_link = report_abuse(comment.author, :comment_link, comment)
+      {:link => report_abuse_link} if report_abuse_link
+    end
+  end
+
+  def link_for_spam(comment)
+    if comment.spam?
+      {:link => link_to_function(_('Mark as NOT SPAM'), 'remove_comment(this, %s); return false;' % url_for(:profile => profile.identifier, :mark_comment_as_ham => comment.id).to_json, :class => 'comment-footer comment-footer-link comment-footer-hide')}
+    elsif (logged_in? && (user == profile || user.has_permission?(:moderate_comments, profile)))
+      {:link => link_to_function(_('Mark as SPAM'), 'remove_comment(this, %s, %s); return false;' % [url_for(:profile => profile.identifier, :controller => 'comment', :action => :mark_as_spam, :id => comment.id).to_json, _('Are you sure you want to mark this comment as SPAM?').to_json], :class => 'comment-footer comment-footer-link comment-footer-hide')}
+    end
+  end
+
+  def link_for_edit(comment)
+    if comment.author && comment.author == user 
+      {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'colorbox')}
+    end
+  end
+
+  def link_for_remove(comment)
+    if logged_in? && (user == profile || user == comment.author || user.has_permission?(:moderate_comments, profile))
+      {:link => link_to_function(_('Remove'), 'remove_comment(this, %s, %s); return false ;' % [url_for(:profile => profile.identifier, :controller => 'comment', :action => :destroy, :id => comment.id).to_json, _('Are you sure you want to remove this comment and all its replies?').to_json], :class => 'comment-footer comment-footer-link comment-footer-hide remove-children')}
+    end
+  end
  
 end
@@ -31,6 +31,21 @@
   <% comment_balloon do %>
  
     <div class="comment-details">
+      <div class="comment-header">
+        <ul>
+          <div class="comment-actions">
+            <%= comment_actions(comment) %>
+          </div>
+        </ul>
+      <% unless comment.spam? %>
+        <%= link_to_function '',
+          "var f = add_comment_reply_form(this, %s); f.find('comment_title, textarea').val(''); return false" % comment.id,
+          :class => 'comment-footer comment-footer-link comment-footer-hide comment-actions-reply button',
+          :id => 'comment-reply-to-' + comment.id.to_s
+        %>
+      <% end %>
+      </div>
+
       <div class="comment-created-at">
         <%= show_time(comment.created_at) %>
       </div>
@@ -41,7 +56,7 @@
       </div>
     </div>
  
-    <div class="comment_reply post_comment_box closed">
+    <div class="comment_reply post_comment_box closed" id="comment_reply_to_<%= comment.id %>">
       <% if @comment && @comment.errors.any? && @comment.reply_of_id.to_i == comment.id %>
         <%= error_messages_for :comment %>
         <script type="text/javascript">
@@ -295,11 +295,17 @@ function toggleSubmenu(trigger, title, link_list) {
   content.append('<h4>' + title + '</h4>');
   jQuery.each(link_list, function(index, link_hash) {
     for (label in link_hash) {
-      options = "";
-      jQuery.each(link_hash[label], function(option, value){
-        options += option +'="'+ value + '" ';
-      })
-      list.append('<li><a '+ options +'>' + label + '</a></li>');
+      if(link_hash[label]!=null) {
+        if(label=='link' && jQuery.type(link_hash[label])=="string") {
+          list.append('<li>' + link_hash[label] + '</li>');
+        } else {
+          options = "";
+          jQuery.each(link_hash[label], function(option, value){
+            options += option +'="'+ value + '" ';
+          })
+          list.append('<li><a '+ options +'>' + label + '</a></li>');
+        }
+      }
     }
   });
   content.append(list);
@@ -323,9 +329,9 @@ function hideAllSubmenus() {
 // Hide visible ballons when clicked outside them
 jQuery(document).ready(function() {
   jQuery('body').live('click', function() { hideAllSubmenus(); });
-  jQuery('.menu-submenu-trigger').click(function(e) { e.stopPropagation(); });
-  jQuery('.simplemenu-trigger').click(function(e) { e.stopPropagation(); });
-  jQuery('#chat-online-users').click(function(e) { e.stopPropagation(); });
+  jQuery('.menu-submenu-trigger').live('click', function(e) { e.stopPropagation(); });
+  jQuery('.simplemenu-trigger').live('click', function(e) { e.stopPropagation(); });
+  jQuery('#chat-online-users').live('click', function(e) { e.stopPropagation(); });
 });
  
 function input_javascript_ordering_stuff() {
@@ -689,8 +695,8 @@ jQuery(function($) {
 });
  
 function add_comment_reply_form(button, comment_id) {
-  var container = jQuery(button).parents('.comment_reply');
-
+  //var container = jQuery(button).parents('.comment_reply');
+  var container = jQuery('#comment_reply_to_'+comment_id);
   var f = container.find('.comment_form');
   if (f.length == 0) {
     comments_div = jQuery(button).parents('.comments');
@@ -1755,13 +1755,31 @@ a.button.disabled, input.disabled {
 #content .profile-list-block ul {
   width: 200px;
 }
-#content .common-profile-list-block li {
-  margin: 0px;
+#content .comment-header .comment-actions-reply {
+  float: right;
+  background-image: url(/designs/icons/tango/Tango/16x16/actions/go-jump.png);
+  height: 12px;
+}
+#content .comment-header ul {
+  float: right;
+}
+#content .comment-actions .menu-submenu-header, #content .comment-actions .menu-submenu-footer, #content .comment-actions .menu-submenu h4 {
+  display: none;
+}
+#content .comment-actions .menu-submenu ul {
+  border: 1px solid #888a85;
+  background-color: #efefef;
+  padding-right: 2px;
+  height: auto;
+  display: block;
+}
+#content .common-profile-list-block li, #content .comment-actions li {
+  margin: 0px !important;
   padding: 0px;
   list-style: none;
   position: relative;
 }
-.common-profile-list-block .vcard a {
+.common-profile-list-block .vcard a, .comment-actions .vcard a {
   display: block;
   height: 112px;
   max-height: 112px;
@@ -1772,7 +1790,7 @@ a.button.disabled, input.disabled {
   text-align: center;
   overflow: hidden;
   font-size: 11px;
-  text-decoration: none;
+  text-decoration: none !important;
   color: #000;
   position: relative;
   cursor: pointer; /* work arround bug for MSIE */
@@ -4458,11 +4476,17 @@ h1#agenda-title {
 }
 /* Profile balloon */
  
-.common-profile-list-block .vcard {
+.common-profile-list-block .vcard, .comment-actions .vcard {
   position: relative !important;
   float: left;
 }
-.common-profile-list-block .vcard .menu-submenu-trigger, .menu-submenu-trigger {
+#content .comment-actions .vcard {
+  padding-right: 20px;
+}
+#content .comment-actions .vcard .menu-submenu-trigger {
+  display: block;
+}
+.common-profile-list-block .vcard .menu-submenu-trigger, .menu-submenu-trigger, .comment-actions .vcard .menu-submenu-trigger {
   display: none;
   width: 16px;
   height: 16px;
@@ -4476,7 +4500,7 @@ h1#agenda-title {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
 }
-.common-profile-list-block .vcard .menu-submenu-trigger:hover, .menu-submenu-trigger:hover {
+.common-profile-list-block .vcard .menu-submenu-trigger:hover, .menu-submenu-trigger:hover, .comment-actions .vcard .menu-submenu-trigger:hover {
   background: #fff url(/images/top-arrow.png) center center no-repeat;
   border: 1px solid #ccc;
 }
@@ -4495,6 +4519,10 @@ h1#agenda-title {
   padding: 0;
   text-align: left;
 }
+.comment-details .menu-submenu {
+  bottom: 0px;
+  right: -134px;
+}
 .box-2 .menu-submenu, .box-3 .menu-submenu {
   bottom: 78px;
   right: -44px;
@@ -4529,7 +4557,7 @@ h1#agenda-title {
 .msie7 #search-results .menu-submenu-trigger {
   width: 20px !important;
 }
-.common-profile-list-block .vcard .menu-submenu a {
+.common-profile-list-block .vcard .menu-submenu a, .comment-actions .vcard .menu-submenu a {
   float: none;
   display: block;
   height: auto;
...	...	@@ -30,6 +30,8 @@ module ApplicationHelper
30	30
31	31	include AccountHelper
32	32
	33	+ include CommentHelper
	34	+
33	35	def locale
34	36	(@page && !@page.language.blank?) ? @page.language : FastGettext.locale
35	37	end
...	...
...	...	@@ -21,5 +21,44 @@ module CommentHelper
21	21	end
22	22	title
23	23	end
	24	+
	25	+ #FIXME make this test
	26	+ def comment_actions(comment)
	27	+ links = links_for_comment_actions(comment)
	28	+ content_tag(:li, link_to(content_tag(:span, _('Contents menu')), '#', :onclick => "toggleSubmenu(this,'',#{links.to_json}); return false", :class => 'menu-submenu-trigger'), :class=> 'vcard') unless links.empty?
	29	+ end
	30	+
	31	+ private
	32	+
	33	+ def links_for_comment_actions(comment)
	34	+ [link_for_report_abuse(comment), link_for_spam(comment), link_for_edit(comment), link_for_remove(comment)].compact
	35	+ end
	36	+
	37	+ def link_for_report_abuse(comment)
	38	+ if comment.author
	39	+ report_abuse_link = report_abuse(comment.author, :comment_link, comment)
	40	+ {:link => report_abuse_link} if report_abuse_link
	41	+ end
	42	+ end
	43	+
	44	+ def link_for_spam(comment)
	45	+ if comment.spam?
	46	+ {:link => link_to_function(_('Mark as NOT SPAM'), 'remove_comment(this, %s); return false;' % url_for(:profile => profile.identifier, :mark_comment_as_ham => comment.id).to_json, :class => 'comment-footer comment-footer-link comment-footer-hide')}
	47	+ elsif (logged_in? && (user == profile \|\| user.has_permission?(:moderate_comments, profile)))
	48	+ {:link => link_to_function(_('Mark as SPAM'), 'remove_comment(this, %s, %s); return false;' % [url_for(:profile => profile.identifier, :controller => 'comment', :action => :mark_as_spam, :id => comment.id).to_json, _('Are you sure you want to mark this comment as SPAM?').to_json], :class => 'comment-footer comment-footer-link comment-footer-hide')}
	49	+ end
	50	+ end
	51	+
	52	+ def link_for_edit(comment)
	53	+ if comment.author && comment.author == user
	54	+ {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'colorbox')}
	55	+ end
	56	+ end
	57	+
	58	+ def link_for_remove(comment)
	59	+ if logged_in? && (user == profile \|\| user == comment.author \|\| user.has_permission?(:moderate_comments, profile))
	60	+ {:link => link_to_function(_('Remove'), 'remove_comment(this, %s, %s); return false ;' % [url_for(:profile => profile.identifier, :controller => 'comment', :action => :destroy, :id => comment.id).to_json, _('Are you sure you want to remove this comment and all its replies?').to_json], :class => 'comment-footer comment-footer-link comment-footer-hide remove-children')}
	61	+ end
	62	+ end
24	63
25	64	end
...	...
...	...	@@ -31,6 +31,21 @@
31	31	<% comment_balloon do %>
32	32
33	33	<div class="comment-details">
	34	+ <div class="comment-header">
	35	+ <ul>
	36	+ <div class="comment-actions">
	37	+ <%= comment_actions(comment) %>
	38	+ </div>
	39	+ </ul>
	40	+ <% unless comment.spam? %>
	41	+ <%= link_to_function '',
	42	+ "var f = add_comment_reply_form(this, %s); f.find('comment_title, textarea').val(''); return false" % comment.id,
	43	+ :class => 'comment-footer comment-footer-link comment-footer-hide comment-actions-reply button',
	44	+ :id => 'comment-reply-to-' + comment.id.to_s
	45	+ %>
	46	+ <% end %>
	47	+ </div>
	48	+
34	49	<div class="comment-created-at">
35	50	<%= show_time(comment.created_at) %>
36	51	</div>
...	...	@@ -41,7 +56,7 @@
41	56	</div>
42	57	</div>
43	58
44		- <div class="comment_reply post_comment_box closed">
	59	+ <div class="comment_reply post_comment_box closed" id="comment_reply_to_<%= comment.id %>">
45	60	<% if @comment && @comment.errors.any? && @comment.reply_of_id.to_i == comment.id %>
46	61	<%= error_messages_for :comment %>
47	62	<script type="text/javascript">
...	...
...	...	@@ -295,11 +295,17 @@ function toggleSubmenu(trigger, title, link_list) {
295	295	content.append('<h4>' + title + '</h4>');
296	296	jQuery.each(link_list, function(index, link_hash) {
297	297	for (label in link_hash) {
298		- options = "";
299		- jQuery.each(link_hash[label], function(option, value){
300		- options += option +'="'+ value + '" ';
301		- })
302		- list.append('<li><a '+ options +'>' + label + '</a></li>');
	298	+ if(link_hash[label]!=null) {
	299	+ if(label=='link' && jQuery.type(link_hash[label])=="string") {
	300	+ list.append('<li>' + link_hash[label] + '</li>');
	301	+ } else {
	302	+ options = "";
	303	+ jQuery.each(link_hash[label], function(option, value){
	304	+ options += option +'="'+ value + '" ';
	305	+ })
	306	+ list.append('<li><a '+ options +'>' + label + '</a></li>');
	307	+ }
	308	+ }
303	309	}
304	310	});
305	311	content.append(list);
...	...	@@ -323,9 +329,9 @@ function hideAllSubmenus() {
323	329	// Hide visible ballons when clicked outside them
324	330	jQuery(document).ready(function() {
325	331	jQuery('body').live('click', function() { hideAllSubmenus(); });
326		- jQuery('.menu-submenu-trigger').click(function(e) { e.stopPropagation(); });
327		- jQuery('.simplemenu-trigger').click(function(e) { e.stopPropagation(); });
328		- jQuery('#chat-online-users').click(function(e) { e.stopPropagation(); });
	332	+ jQuery('.menu-submenu-trigger').live('click', function(e) { e.stopPropagation(); });
	333	+ jQuery('.simplemenu-trigger').live('click', function(e) { e.stopPropagation(); });
	334	+ jQuery('#chat-online-users').live('click', function(e) { e.stopPropagation(); });
329	335	});
330	336
331	337	function input_javascript_ordering_stuff() {
...	...	@@ -689,8 +695,8 @@ jQuery(function($) {
689	695	});
690	696
691	697	function add_comment_reply_form(button, comment_id) {
692		- var container = jQuery(button).parents('.comment_reply');
693		-
	698	+ //var container = jQuery(button).parents('.comment_reply');
	699	+ var container = jQuery('#comment_reply_to_'+comment_id);
694	700	var f = container.find('.comment_form');
695	701	if (f.length == 0) {
696	702	comments_div = jQuery(button).parents('.comments');
...	...
...	...	@@ -1755,13 +1755,31 @@ a.button.disabled, input.disabled {
1755	1755	#content .profile-list-block ul {
1756	1756	width: 200px;
1757	1757	}
1758		-#content .common-profile-list-block li {
1759		- margin: 0px;
	1758	+#content .comment-header .comment-actions-reply {
	1759	+ float: right;
	1760	+ background-image: url(/designs/icons/tango/Tango/16x16/actions/go-jump.png);
	1761	+ height: 12px;
	1762	+}
	1763	+#content .comment-header ul {
	1764	+ float: right;
	1765	+}
	1766	+#content .comment-actions .menu-submenu-header, #content .comment-actions .menu-submenu-footer, #content .comment-actions .menu-submenu h4 {
	1767	+ display: none;
	1768	+}
	1769	+#content .comment-actions .menu-submenu ul {
	1770	+ border: 1px solid #888a85;
	1771	+ background-color: #efefef;
	1772	+ padding-right: 2px;
	1773	+ height: auto;
	1774	+ display: block;
	1775	+}
	1776	+#content .common-profile-list-block li, #content .comment-actions li {
	1777	+ margin: 0px !important;
1760	1778	padding: 0px;
1761	1779	list-style: none;
1762	1780	position: relative;
1763	1781	}
1764		-.common-profile-list-block .vcard a {
	1782	+.common-profile-list-block .vcard a, .comment-actions .vcard a {
1765	1783	display: block;
1766	1784	height: 112px;
1767	1785	max-height: 112px;
...	...	@@ -1772,7 +1790,7 @@ a.button.disabled, input.disabled {
1772	1790	text-align: center;
1773	1791	overflow: hidden;
1774	1792	font-size: 11px;
1775		- text-decoration: none;
	1793	+ text-decoration: none !important;
1776	1794	color: #000;
1777	1795	position: relative;
1778	1796	cursor: pointer; /* work arround bug for MSIE */
...	...	@@ -4458,11 +4476,17 @@ h1#agenda-title {
4458	4476	}
4459	4477	/* Profile balloon */
4460	4478
4461		-.common-profile-list-block .vcard {
	4479	+.common-profile-list-block .vcard, .comment-actions .vcard {
4462	4480	position: relative !important;
4463	4481	float: left;
4464	4482	}
4465		-.common-profile-list-block .vcard .menu-submenu-trigger, .menu-submenu-trigger {
	4483	+#content .comment-actions .vcard {
	4484	+ padding-right: 20px;
	4485	+}
	4486	+#content .comment-actions .vcard .menu-submenu-trigger {
	4487	+ display: block;
	4488	+}
	4489	+.common-profile-list-block .vcard .menu-submenu-trigger, .menu-submenu-trigger, .comment-actions .vcard .menu-submenu-trigger {
4466	4490	display: none;
4467	4491	width: 16px;
4468	4492	height: 16px;
...	...	@@ -4476,7 +4500,7 @@ h1#agenda-title {
4476	4500	-moz-border-radius: 5px;
4477	4501	-webkit-border-radius: 5px;
4478	4502	}
4479		-.common-profile-list-block .vcard .menu-submenu-trigger:hover, .menu-submenu-trigger:hover {
	4503	+.common-profile-list-block .vcard .menu-submenu-trigger:hover, .menu-submenu-trigger:hover, .comment-actions .vcard .menu-submenu-trigger:hover {
4480	4504	background: #fff url(/images/top-arrow.png) center center no-repeat;
4481	4505	border: 1px solid #ccc;
4482	4506	}
...	...	@@ -4495,6 +4519,10 @@ h1#agenda-title {
4495	4519	padding: 0;
4496	4520	text-align: left;
4497	4521	}
	4522	+.comment-details .menu-submenu {
	4523	+ bottom: 0px;
	4524	+ right: -134px;
	4525	+}
4498	4526	.box-2 .menu-submenu, .box-3 .menu-submenu {
4499	4527	bottom: 78px;
4500	4528	right: -44px;
...	...	@@ -4529,7 +4557,7 @@ h1#agenda-title {
4529	4557	.msie7 #search-results .menu-submenu-trigger {
4530	4558	width: 20px !important;
4531	4559	}
4532		-.common-profile-list-block .vcard .menu-submenu a {
	4560	+.common-profile-list-block .vcard .menu-submenu a, .comment-actions .vcard .menu-submenu a {
4533	4561	float: none;
4534	4562	display: block;
4535	4563	height: auto;
...	...