jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: add back "resize to window" link.

Browse Source 
* Add back "Resize to window" link.
* Add Z shortcut for resize to window link (mnemonic: Z for zoom image).
* Resize images to screen width by default on both desktop and mobile.
* Make it so that notes are nested directly inside the .image-container
  element with the image, instead of inside a separate .note-container
  element. This means .image-container and .note-container are now the
  same element. This is so that the size of the .note-container is
  driven by the size of the image, which ensures that notes are
  automatically resized as the image is resized.
This commit is contained in:
evazion
2020-03-26 00:22:18 -05:00
parent 1126147dee
commit 87a51129b8
12 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/javascript/src/javascripts/notes.js
View File

@@ -414,8 +414,6 @@ let Note = {
return;
}
let $image = $("#image");
$container.height($image.height());
$container.width($image.width());
if (Note.embed) {
let large_width = parseFloat($image.data('large-width'));
let ratio = $image.width() / large_width;
@@ -843,15 +841,13 @@ let Note = {
},
create_note: function(e, x, y, w, h) {
var offset = $("#image").offset();
if (w > 9 || h > 9) { /* minimum note size: 10px */
if (w <= 9) {
w = 10;
} else if (h <= 9) {
h = 10;
}
Note.create(x - offset.left, y - offset.top, w, h);
Note.create(x, y, w, h);
}
$(".note-container").css('visibility', 'visible');
@@ -907,18 +903,18 @@ let Note = {
}
if (Note.TranslationMode.Drag.dragging) {
if (Note.TranslationMode.Drag.dragDistanceX >= 0) {
Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX;
Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX - offset.left;
Note.TranslationMode.Drag.w = Note.TranslationMode.Drag.dragDistanceX;
} else {
Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX + Note.TranslationMode.Drag.dragDistanceX;
Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX - offset.left + Note.TranslationMode.Drag.dragDistanceX;
Note.TranslationMode.Drag.w = -Note.TranslationMode.Drag.dragDistanceX;
}
if (Note.TranslationMode.Drag.dragDistanceY >= 0) {
Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY;
Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY - offset.top;
Note.TranslationMode.Drag.h = Note.TranslationMode.Drag.dragDistanceY;
} else {
Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY + Note.TranslationMode.Drag.dragDistanceY;
Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY - offset.top + Note.TranslationMode.Drag.dragDistanceY;
Note.TranslationMode.Drag.h = -Note.TranslationMode.Drag.dragDistanceY;
}

12
app/javascript/src/javascripts/posts.js.erb
View File

@@ -300,7 +300,7 @@ Post.initialize_favlist = function() {
});
}
Post.expand_image = function(e) {
Post.view_original = function(e) {
if (Utility.test_max_width(660)) {
// Do the default behavior (navigate to image)
return;
@@ -347,9 +347,17 @@ Post.view_large = function(e) {
e.preventDefault();
}
Post.toggle_fit_window = function(e) {
$("#image").toggleClass("fit-width");
Note.Box.scale_all();
Post.resize_ugoira_controls();
e.preventDefault();
};
Post.initialize_post_image_resize_links = function() {
$("#image-resize-link").on("click.danbooru", Post.expand_image);
$("#image-resize-link").on("click.danbooru", Post.view_original);
$("#image-view-large-link").on("click.danbooru", Post.view_large);
$(document).on("click.danbooru", ".image-resize-to-window-link", Post.toggle_fit_window);
if ($("#image-resize-notice").length) {
Utility.keydown("v", "resize", function(e) {