From 7fc3d20f6f4a9f0a4b7b6aa6dd624c208496e76e Mon Sep 17 00:00:00 2001 From: zatchii Date: Sun, 5 May 2013 00:57:09 +0000 Subject: [PATCH 1/5] Ignore click event when adding note Instead of double-toggling, ignore click events for some milliseconds after adding a note. --- app/assets/javascripts/notes.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 2d49d888e..3e004be7a 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -107,6 +107,10 @@ Danbooru.Note = { }, toggle_all: function() { + // Ignore the click event when adding a note + if ((new Date).getTime() < Danbooru.Note.ignore_click_until) { + return; + } $(".note-box").toggle(); } }, @@ -419,7 +423,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)'); @@ -444,6 +447,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: { @@ -541,6 +548,7 @@ Danbooru.Note = { editing: false, timeouts: [], pending: {}, + ignore_click_until: 0, add: function(id, x, y, w, h, text) { var $note_box = Danbooru.Note.Box.create(id); From bfb58f94557022633841d4c50e9a32d1f8a2ca5f Mon Sep 17 00:00:00 2001 From: zatchii Date: Sun, 5 May 2013 01:11:44 +0000 Subject: [PATCH 2/5] Toggle note container instead of note boxes --- app/assets/javascripts/notes.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 3e004be7a..003cf4be2 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -111,7 +111,9 @@ Danbooru.Note = { if ((new Date).getTime() < Danbooru.Note.ignore_click_until) { return; } - $(".note-box").toggle(); + var is_hidden = document.getElementById('note-container').style.display == 'none'; + // Why does toggle() not work here? + $("#note-container").toggle(is_hidden); } }, From 9903d153dfa40bde60600e8f88c0a338349dc603 Mon Sep 17 00:00:00 2001 From: zatchii Date: Sun, 5 May 2013 01:14:21 +0000 Subject: [PATCH 3/5] Hide notes in scale_all --- app/assets/javascripts/notes.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 003cf4be2..18c28487a 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -101,9 +101,14 @@ Danbooru.Note = { }, 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() { From 7d495e28a13d255ea165fc0ee8f40bace64287f8 Mon Sep 17 00:00:00 2001 From: zatchii Date: Sun, 5 May 2013 01:17:28 +0000 Subject: [PATCH 4/5] Use document fragment when loading notes --- app/assets/javascripts/notes.js | 49 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 18c28487a..78bcf773d 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -89,13 +89,13 @@ 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); }, @@ -139,6 +139,10 @@ Danbooru.Note = { top: $note_box.position().top + $note_box.height() + 5, left: $note_box.position().left }); + if (!$note_body.data('resized')) { + Danbooru.Note.Body.resize($note_body); + $note_body.data('resized', 'true'); + } Danbooru.Note.Body.bound_position($note_body); }, @@ -169,8 +173,8 @@ Danbooru.Note = { Danbooru.Note.Body.hide_all(); Danbooru.Note.clear_timeouts(); var $note_body = Danbooru.Note.Body.find(id); - $note_body.show(); Danbooru.Note.Body.initialize($note_body); + $note_body.show(); }, find: function(id) { @@ -223,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); } } }, @@ -557,23 +561,19 @@ Danbooru.Note = { 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) { @@ -603,9 +603,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"), @@ -614,12 +616,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); } } From e6e3d315226e965e985b58da45e1560cb145d6e1 Mon Sep 17 00:00:00 2001 From: zatchii Date: Sun, 5 May 2013 13:40:42 +0000 Subject: [PATCH 5/5] Fix note bounding on left edge bound_position must be called after the body is shown, while resize must be called before. --- app/assets/javascripts/notes.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 78bcf773d..bf0594b6a 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -139,10 +139,6 @@ Danbooru.Note = { top: $note_box.position().top + $note_box.height() + 5, left: $note_box.position().left }); - if (!$note_body.data('resized')) { - Danbooru.Note.Body.resize($note_body); - $note_body.data('resized', 'true'); - } Danbooru.Note.Body.bound_position($note_body); }, @@ -173,8 +169,12 @@ Danbooru.Note = { Danbooru.Note.Body.hide_all(); Danbooru.Note.clear_timeouts(); var $note_body = Danbooru.Note.Body.find(id); - Danbooru.Note.Body.initialize($note_body); + 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); }, find: function(id) {