diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index cd15da39e..01aaa8559 100644 --- a/app/assets/javascripts/notes.js +++ b/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 $note = $("#notes > article[data-id=" + $note_box.data("id") + "]"); + var ratio = $image.width() / parseFloat($image.data("original-width")); + var MIN_SIZE = 5; $note_box.css({ - top: Math.ceil(parseFloat($note.data("y")) * ratio), - left: Math.ceil(parseFloat($note.data("x")) * ratio), - width: Math.ceil(parseFloat($note.data("width")) * ratio), - height: Math.ceil(parseFloat($note.data("height")) * ratio) + top: Math.ceil(parseFloat($note_box.data("y")) * ratio), + left: Math.ceil(parseFloat($note_box.data("x")) * ratio), + width: Math.max(MIN_SIZE, Math.ceil(parseFloat($note_box.data("width")) * 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 n)'); @@ -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({ - left: x, - top: y, - width: w, - height: h, - display: 'none' - }); - - $("#note-container").append($note_box); - $("#note-container").append($note_body); + $note_box.data('x', x); + $note_box.data('y', y); + $note_box.data('width', w); + $note_box.data('height', h); + container.appendChild($note_box[0]); + container.appendChild($note_body[0]); $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').css('display','none'); - $('.note-box').each(function(i, v) { - $(v).css('display','block') - }); - $('#note-container').css('display','block'); + $("#note-container").append(fragment); } }