comment liking

app.rb

@@ -120,6 +120,7 @@ get '/?' do
 end
 
 get '/plan/?' do
+  @title = 'Supporter'
   erb :'plan/index'
 end
 
@@ -233,6 +234,7 @@ get '/browse' do
 end
 
 get '/api' do
+  @title = 'Developers API'
   erb :'api'
 end
 
@@ -896,6 +898,14 @@ post '/event/:event_id/delete' do |event_id|
   return {result: 'error'}.to_json
 end
 
+post '/comment/:comment_id/toggle_like' do |comment_id|
+  require_login
+  content_type :json
+  comment = Comment[id: comment_id]
+  liked_response = comment.toggle_site_like(current_site) ? 'liked' : 'unliked'
+  {result: liked_response, comment_like_count: comment.comment_likes_dataset.count, liking_site_names: comment.liking_site_names}.to_json
+end
+
 post '/comment/:comment_id/delete' do |comment_id|
   require_login
   content_type :json
@@ -1014,4 +1024,4 @@ end
 
 def api_not_found
   api_error 404, 'not_found', 'the requested api call does not exist'
-end
+end

migrations/027_add_comment_likes.rb

@@ -0,0 +1,15 @@
+Sequel.migration do
+  up {
+    DB.create_table! :comment_likes do
+      primary_key :id
+      Integer  :comment_id
+      Integer  :site_id
+      Integer  :actioning_site_id
+      DateTime :created_at
+    end
+  }
+
+  down {
+    DB.drop_table :comment_likes
+  }
+end

migrations/028_remove_comment_like_site_id.rb

@@ -0,0 +1,9 @@
+Sequel.migration do
+  up {
+    DB.drop_column :comment_likes, :site_id
+  }
+
+  down {
+    DB.add_column :comment_likes, :site_id, :integer
+  }
+end

models/comment.rb

@@ -2,4 +2,31 @@ class Comment < Sequel::Model
   include Sequel::ParanoidDelete
   many_to_one :event
   many_to_one :actioning_site, class: :Site
-end
+  one_to_many :comment_likes
+
+  def liking_site_names
+    comment_likes.collect {|comment_like| comment_like.actioning_site.username }
+  end
+
+  def site_likes?(site)
+    comment_likes_dataset.filter(actioning_site_id: site.id).count > 0
+  end
+
+  def site_like(site)
+    add_comment_like actioning_site_id: site.id
+  end
+
+  def site_unlike(site)
+    comment_likes_dataset.filter(actioning_site_id: site.id).delete
+  end
+
+  def toggle_site_like(site)
+    if site_likes? site
+      site_unlike site
+      false
+    else
+      site_like site
+      true
+    end
+  end
+end

models/comment_like.rb

@@ -0,0 +1,4 @@
+class CommentLike < Sequel::Model
+  many_to_one :comment
+  many_to_one :actioning_site, class: :Site
+end

public/assets/scripts/news/comment.js

@@ -15,5 +15,24 @@ var Comment = {
       console.log(res)
       location.reload()
     })
+  },
+
+  toggleLike: function(commentId, csrfToken) {
+    var link = $('#comment_'+commentId+'_like')
+
+    $.post('/comment/'+commentId+'/toggle_like', {csrf_token: csrfToken}, function(res) {
+      if(res.result == 'liked')
+        link.text('Unlike ('+res.comment_like_count+')')
+
+      if(res.result == 'unliked') {
+        var linkText = 'Like'
+
+        if(res.comment_like_count > 0)
+          linkText += ' ('+res.comment_like_count+')'
+
+        link.text(linkText)
+      }
+      link.attr('data-original-title', res.liking_site_names.join('<br>'))
+    })
   }
-}
+}

views/_news.erb

@@ -8,9 +8,9 @@
     <div class="news-item comment for-me" id="event_<%= event.id %>">
       <%== erb :'_news_profile_comment', layout: false, locals: {profile_comment: event.profile_comment} %>
   <% end %>
-  
+
   <%== erb :'_news_actions', layout: false, locals: {event: event} %>
-  
+
   <% if event.comments_dataset.count > 0 %>
     <div class="content">
       <div class="comments">
@@ -22,9 +22,20 @@
             <p><%= comment.message %></p>
           </div>
           <div class="actions">
-            <a id="like" href="#" onclick="Comment.toggleLike(<%= comment.id %>, '<%= csrf_token %>)">Like (1)</a>
-            <% if event.site_id == current_site.id || comment.actioning_site_id == current_site.id %>
-              <a href="#" onclick="Comment.delete(<%= comment.id %>, '<%= csrf_token %>'); return false">Delete</a>
+
+            <% if current_site %>
+              <a href="#" class="comment_like" id="comment_<%= comment.id %>_like" data-placement="bottom" data-toggle="tooltip" data-original-title="<%= comment.liking_site_names.join('<br>') %>" onclick="Comment.toggleLike(<%= comment.id %>, '<%= csrf_token %>'); return false"><%= comment.site_likes?(current_site) ? 'Unlike' : 'Like' %><%= comment.comment_likes_dataset.count > 0 ? " (#{comment.comment_likes_dataset.count})" : '' %></a>
+            <% else %>
+              <% comment_like_count = comment.comment_likes_dataset.count %>
+              <% if comment_like_count > 0 %>
+                <%= comment_like_count %> <%= comment_like_count == 1 ? 'like' : 'likes' %>
+              <% end %>
+            <% end %>
+
+            <% if current_site %>
+              <% if event.site_id == current_site.id || comment.actioning_site_id == current_site.id %>
+                <a href="#" onclick="Comment.delete(<%= comment.id %>, '<%= csrf_token %>'); return false">Delete</a>
+              <% end %>
             <% end %>
           </div>
         <% end %>
@@ -45,14 +56,14 @@
         <a href="" class="user">Derp</a> followed <a href="" class="user">Foo's</a> website<span class="date">7h</span>
       </div>
     </div>
-    
+
     <div class="news-item tip">
       <div class="title">
         <div class="icon"></div>
         <a href="" class="user">Derp</a> tipped <a href="" class="user">Foo's</a> website: <a href="" class="comment">Wow, great work here! Please keep updating :)</a><span class="date">Apr 23</span>
       </div>
     </div>
-    
+
     <div class="news-item comment">
       <div class="title">
         <div class="icon"></div>
@@ -60,14 +71,14 @@
         <span class="date">Apr 20</span>
       </div>
     </div>
-    
+
     <div class="news-item follow">
       <div class="title">
         <div class="icon"></div>
         <a href="" class="user">Derp</a> followed <a href="" class="user">victoria's</a> website<span class="date">Apr 7</span>
       </div>
     </div>
-    
+
     <div class="news-item update">
       <div class="title">
         <div class="icon"></div>
@@ -94,11 +105,11 @@
         <div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
       </div>
     </div>
-    
+
     <div class="news-item comment for-me">
       <div class="title">
         <div class="icon" style="background-image:url(https://neocities.org/site_screenshots/codeventurer.jpg);"></div>
-        <a href="" class="user">Foo</a> 
+        <a href="" class="user">Foo</a>
         <span class="date">Apr 7</span>
         <div class="comment">Your site is amazing. Very helpful information. Would love to see more updates if you have time. Your site is amazing. Very helpful information. Would love to see more updates if you have time. </div>
       </div>
@@ -109,11 +120,11 @@
             <img class="avatar" src="https://neocities.org/site_screenshots/victoria.jpg">
             <a href="" class="user">victoria</a> Indeed, it's great!<span class="date">Apr 7</span>
             <div class="actions"><a href="">Like (1)</a></div>
-          </div>  
+          </div>
         </div>
       </div>
     </div>
-    
+
     <div class="news-item comment">
       <div class="title">
         <div class="icon"></div>
@@ -121,7 +132,7 @@
         <span class="date">Apr 7</span>
       </div>
     </div>
-    
+
     <div class="news-item tip for-me">
       <div class="title">
         <div class="icon" style="background-image:url(https://neocities.org/site_screenshots/victoria.jpg);"></div>
@@ -133,4 +144,4 @@
         <div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
       </div>
     </div>
--->
+-->

views/_news_actions.erb

@@ -9,13 +9,13 @@
   <% end %>
   <% if current_site %>
     <a id="reply" href="#" onclick="Template.renderComment(<%= event.id %>); return false">Reply</a>
-  <% end %>
-  <% if event.created_by? current_site %>
-    <% if event.profile_comment_id %>
-      <a id="editLink" href="#" onclick="ProfileComment.displayEditor('<%= event.id %>'); return false">Edit</a>
+    <% if event.created_by? current_site %>
+      <% if event.profile_comment_id %>
+        <a id="editLink" href="#" onclick="ProfileComment.displayEditor('<%= event.id %>'); return false">Edit</a>
+      <% end %>
+    <% end %>
+    <% if event.created_by?(current_site) || event.site_id == current_site.id %>
+      <a href="#" onclick="Event.delete(<%= event.id %>, '<%= csrf_token %>'); return false">Delete</a>
     <% end %>
   <% end %>
-  <% if event.created_by?(current_site) || event.site_id == current_site.id %>
-    <a href="#" onclick="Event.delete(<%= event.id %>, '<%= csrf_token %>'); return false">Delete</a>
-  <% end %>
-</div>
+</div>

views/layout.erb

@@ -13,11 +13,11 @@
     <meta property="og:image"       content="/assets/img/cat-larger.png">
     <meta property="og:url"         content="https://www.neocities.org">
     <meta property="og:description" content="Neocities is the new Geocities. Create your own free home page, and do whatever you want with it.">
-  
+
     <!--
     <meta content="<%= csrf_token %>" name="csrf-token" />
     -->
- 
+
     <link href="/css/bootstrap.min.css" rel="stylesheet">
     <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
     <link href="/assets/css/neo.css" rel="stylesheet" type="text/css" media="all"/>
@@ -32,7 +32,7 @@
     <meta name="viewport"         content="width=device-width, minimum-scale=1, initial-scale=1" />
     <link rel="author" type="text/plain" href="humans.txt" />
 
-    <!--[if lt IE 9]> 
+    <!--[if lt IE 9]>
       <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
@@ -57,6 +57,7 @@
 
     <script>
       $("a#like").tooltip({html: true})
+      $("a.comment_like").tooltip({html: true})
     </script>
   </body>
 </html>