Merge pull request #1543 from zatchii/notespeed

Fixes to note rendering

app/assets/javascripts/notes.js

@@ -89,25 +89,36 @@ Danbooru.Note = {
 
     scale: function($note_box) {
       var $image = $("#image");
-      var ratio = $image.width() / parseFloat($("#image").data("original-width"));
+      var ratio = $image.width() / parseFloat($image.data("original-width"));
-      var $note = $("#notes > article[data-id=" + $note_box.data("id") + "]");
+      var MIN_SIZE = 5;
       $note_box.css({
-        top: Math.ceil(parseFloat($note.data("y")) * ratio),
+        top: Math.ceil(parseFloat($note_box.data("y")) * ratio),
-        left: Math.ceil(parseFloat($note.data("x")) * ratio),
+        left: Math.ceil(parseFloat($note_box.data("x")) * ratio),
-        width: Math.ceil(parseFloat($note.data("width")) * ratio),
+        width: Math.max(MIN_SIZE, Math.ceil(parseFloat($note_box.data("width")) * ratio)),
-        height: Math.ceil(parseFloat($note.data("height")) * ratio)
+        height: Math.max(MIN_SIZE, Math.ceil(parseFloat($note_box.data("height")) * ratio))
       });
       Danbooru.Note.Box.resize_inner_border($note_box);
     },
 
     scale_all: function() {
+      var container = document.getElementById('note-container');
+      // Hide notes while rescaling, to prevent unnecessary reflowing
+      var was_visible = container.style.display != 'none';
+      if (was_visible) container.style.display = 'none';
       $(".note-box").each(function(i, v) {
         Danbooru.Note.Box.scale($(v));
       });
+      if (was_visible) container.style.display = 'block';
     },
 
     toggle_all: function() {
-      $(".note-box").toggle();
+      // Ignore the click event when adding a note
+      if ((new Date).getTime() < Danbooru.Note.ignore_click_until) {
+        return;
+      }
+      var is_hidden = document.getElementById('note-container').style.display == 'none';
+      // Why does toggle() not work here?
+      $("#note-container").toggle(is_hidden);
     }
   },
 
@@ -158,6 +169,10 @@ Danbooru.Note = {
       Danbooru.Note.Body.hide_all();
       Danbooru.Note.clear_timeouts();
       var $note_body = Danbooru.Note.Body.find(id);
+      if (!$note_body.data('resized')) {
+        Danbooru.Note.Body.resize($note_body);
+        $note_body.data('resized', 'true');
+      }
       $note_body.show();
       Danbooru.Note.Body.initialize($note_body);
     },
@@ -212,7 +227,7 @@ Danbooru.Note = {
           }
         } while ((hi - lo) > 4)
         if ($note_body.height() > h) {
-          $note_body.css("minWidth", hi);
+          $note_body.css("min-width", hi);
         }
       }
     },
@@ -419,7 +434,6 @@ Danbooru.Note = {
 
       Danbooru.Note.TranslationMode.active = true;
       $("#original-file-link").click();
-      $("#image").one("click", function() { $(".note-box").show() }); /* override the 'hide all note boxes' click event */
       $("#image").one("mousedown", Danbooru.Note.TranslationMode.Drag.start);
       $(window).bind("mouseup", Danbooru.Note.TranslationMode.Drag.stop);
       Danbooru.notice('Click or drag on the image to create a note (shortcut is <span class="key">n</span>)');
@@ -449,6 +463,10 @@ Danbooru.Note = {
       $(".note-box").show();
       e.stopPropagation();
       e.preventDefault();
+
+      // Hack to ignore clicks for some milliseconds
+      // The mouseup event is executed before the click event, so it's hard to do this properly
+      Danbooru.Note.ignore_click_until = (new Date).getTime() + 200;
     },
     
     Drag: {
@@ -546,24 +564,21 @@ Danbooru.Note = {
   editing: false,
   timeouts: [],
   pending: {},
+  ignore_click_until: 0,
 
-  add: function(id, x, y, w, h, text) {
+  add: function(container, id, x, y, w, h, text) {
     var $note_box = Danbooru.Note.Box.create(id);
     var $note_body = Danbooru.Note.Body.create(id);
 
-    $note_box.css({
+    $note_box.data('x', x);
-      left: x,
+    $note_box.data('y', y);
-      top: y,
+    $note_box.data('width', w);
-      width: w,
+    $note_box.data('height', h);
-      height: h,
+    container.appendChild($note_box[0]);
-      display: 'none'
+    container.appendChild($note_body[0]);
-    });
-
-    $("#note-container").append($note_box);
-    $("#note-container").append($note_body);
     $note_body.data("original-body", text);
     Danbooru.Note.Box.scale($note_box);
-    Danbooru.Note.Body.set_text($note_body, text);
+    Danbooru.Note.Body.display_text($note_body, text);
   },
 
   new: function(x, y, w, h) {
@@ -593,9 +608,11 @@ Danbooru.Note = {
   },
 
   load_all: function() {
+    var fragment = document.createDocumentFragment();
     $.each($("#notes article"), function(i, article) {
       var $article = $(article);
       Danbooru.Note.add(
+        fragment,
         $article.data("id"),
         $article.data("x"),
         $article.data("y"),
@@ -604,12 +621,7 @@ Danbooru.Note = {
         $article.html()
       );
     });
-    
+    $("#note-container").append(fragment);
-    $('#note-container').css('display','none');
-    $('.note-box').each(function(i, v) {
-      $(v).css('display','block')
-    });
-    $('#note-container').css('display','block');
   }
 }