Merge pull request #3207 from evazion/feat-note-links

Fix #3205: Add ability to link to individual notes

app/assets/javascripts/notes.js

@@ -137,6 +137,14 @@ Danbooru.Note = {
       return $("#note-container div.note-box[data-id=" + id + "]");
     },
 
+    show_highlighted: function($note_box) {
+      var note_id = $note_box.data("id");
+
+      Danbooru.Note.Body.show(note_id);
+      $note_box.addClass("note-box-highlighted");
+      Danbooru.scroll_to($note_box);
+    },
+
     resize_inner_border: function($note_box) {
       var $inner_border = $note_box.find("div.note-box-inner-border");
       $inner_border.css({
@@ -361,6 +369,8 @@ Danbooru.Note = {
 
   Edit: {
     show: function($note_body) {
+      var id = $note_body.data("id");
+
       if (Danbooru.Note.editing) {
         return;
       }
@@ -385,7 +395,7 @@ Danbooru.Note = {
 
       $dialog = $('<div></div>');
       $dialog.append($textarea);
-      $dialog.data("id", $note_body.data("id"));
+      $dialog.data("id", id);
       $dialog.dialog({
         width: 360,
         height: 210,
@@ -407,7 +417,7 @@ Danbooru.Note = {
       $dialog.data("uiDialog")._title = function(title) {
         title.html(this.options.title); // Allow unescaped html in dialog title
       }
-      $dialog.dialog("option", "title", 'Edit note (<a href="/wiki_pages/help:notes">view help</a>)');
+      $dialog.dialog("option", "title", 'Edit note #' + id + ' (<a href="/wiki_pages/help:notes">view help</a>)');
 
       $dialog.on("dialogclose", function() {
         Danbooru.Note.editing = false;
@@ -778,17 +788,39 @@ Danbooru.Note = {
         Danbooru.Note.Box.resize_inner_border($(note_box));
       });
     }
-  }
+  },
-}
 
-$(function() {
+  initialize_all: function() {
-  if ($("#c-posts").length && $("#a-show").length && $("#image").length && !$("video#image").length) {
+    if ($("#c-posts #a-show #image").length == 0 || $("video#image").length) {
+      return;
+    }
+
+    Danbooru.Note.embed = (Danbooru.meta("post-has-embedded-notes") === "true");
+    Danbooru.Note.load_all();
+
+    this.initialize_shortcuts();
+    this.initialize_highlight();
+  },
+
+  initialize_shortcuts: function() {
     if ($("#note-locked-notice").length == 0) {
       $("#translate").click(Danbooru.Note.TranslationMode.toggle);
       Danbooru.keydown("n", "translation_mode", Danbooru.Note.TranslationMode.toggle);
     }
-    Danbooru.Note.embed = (Danbooru.meta("post-has-embedded-notes") === "true");
+
-    Danbooru.Note.load_all();
     $("#image").click(Danbooru.Note.Box.toggle_all);
-  }
+  },
+
+  initialize_highlight: function() {
+    var matches = window.location.hash.match(/^#note-(\d+)$/);
+
+    if (matches) {
+      var $note_box = Danbooru.Note.Box.find(matches[1]);
+      Danbooru.Note.Box.show_highlighted($note_box);
+    }
+  },
+}
+
+$(function() {
+  Danbooru.Note.initialize_all();
 });

app/assets/stylesheets/common/000_vars.scss

@@ -27,6 +27,8 @@ $preview_flagged_color: #F00;
 $preview_sample_warning_color:  hsl(0,  100%, 90%); // light red
 $preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
 
+$note_highlight_color: $preview_pending_color;
+
 $error_color: hsl(0, 100%, 95%); // light red
 $success_color: hsl(120, 100%, 95%); // light green
 

app/assets/stylesheets/specific/notes.scss

@@ -92,6 +92,10 @@ div#note-container {
         vertical-align: middle;
       }
     }
+
+    &.note-box-highlighted {
+      outline: 2px solid $note_highlight_color;
+    }
   }
 }
 

app/controllers/notes_controller.rb

@@ -17,7 +17,9 @@ class NotesController < ApplicationController
 
   def show
     @note = Note.find(params[:id])
-    respond_with(@note)
+    respond_with(@note) do |format|
+      format.html { redirect_to(post_path(@note.post, anchor: "note-#{@note.id}")) }
+    end
   end
 
   def create

app/views/note_versions/index.html.erb

@@ -2,7 +2,7 @@
   <div id="a-index">
     <h1>Note Changes</h1>
 
-    <table width="100%" class="striped">
+    <table width="100%" class="striped autofit">
       <thead>
         <tr>
           <th></th>
@@ -25,8 +25,11 @@
           <tr>
             <td></td>
             <td><%= link_to note_version.post_id, post_path(note_version.post_id) %></td>
-            <td><%= link_to "#{note_version.note_id}.#{note_version.version}", note_versions_path(:search => {:note_id => note_version.note_id}) %></td>
             <td>
+              <%= link_to "#{note_version.note_id}.#{note_version.version}", post_path(note_version.post_id, anchor: "note-#{note_version.note_id}") %>
+              <%= link_to "»", note_versions_path(search: {note_id: note_version.note_id}) %>
+            </td>
+            <td class="col-expand">
               <%= h(note_version.body) %>
               <% unless note_version.is_active? %>
                 <span class="inactive">(deleted)</span>

app/views/notes/index.html.erb

@@ -2,10 +2,11 @@
   <div id="a-index">
     <h1>Notes</h1>
 
-    <table width="100%" class="striped">
+    <table width="100%" class="striped autofit">
       <thead>
         <tr>
           <th>Post</th>
+          <th>Note</th>
           <th>Created by</th>
           <th>Created at</th>
           <th>Body</th>
@@ -15,9 +16,13 @@
         <% @notes.each do |note| %>
           <tr>
             <td><%= link_to note.post_id, post_path(note.post_id) %></td>
+            <td>
+              <%= link_to "#{note.id}.#{note.version}", post_path(note.post_id, anchor: "note-#{note.id}") %>
+              <%= link_to "»", note_versions_path(search: {note_id: note.id}) %>
+            </td>
             <td><%= link_to_user note.creator %></td>
             <td><%= compact_time(note.created_at) %></td>
-            <td>
+            <td class="col-expand">
               <%= h(note.body) %>
               <% unless note.is_active? %>
                 <span class="inactive">(deleted)</span>