From da235cec0526e122641012d6fc4102e7c10c9e57 Mon Sep 17 00:00:00 2001 From: evazion Date: Fri, 27 Mar 2020 20:58:51 -0500 Subject: [PATCH] uploads: fix preview image resizing. * Fix preview images not being resized to fit the screen when using the bookmarklet. * Fit images to both screen width and height by default. Previously we fit to screen width only, so tall images were hard to see. * Allow clicking on the image or pressing Z to toggle image size. * Move size information to above the image and add resize links: ** small: fit width and height ** large: fit width ** full: fit none * Bind the image error handler in an onerror attribute on the image itself so that it will always fire. Before it wouldn't fire if the image failed immediately on pageload before we could bind the error handler. --- app/javascript/src/javascripts/uploads.js.erb | 98 ++++++++++++------- .../src/styles/specific/uploads.scss | 44 +++++++++ app/views/uploads/_image.html.erb | 31 +++--- app/views/uploads/new.html.erb | 2 +- 4 files changed, 122 insertions(+), 53 deletions(-) diff --git a/app/javascript/src/javascripts/uploads.js.erb b/app/javascript/src/javascripts/uploads.js.erb index 7520e6b2e..c445ffe0f 100644 --- a/app/javascript/src/javascripts/uploads.js.erb +++ b/app/javascript/src/javascripts/uploads.js.erb @@ -19,16 +19,7 @@ Upload.initialize_all = function() { } if ($("#c-uploads").length) { - if ($("#image").prop("complete")) { - this.initialize_image(); - } else { - $("#image").on("error.danbooru", (e) => { - $("#upload-image").hide(); - $("#scale-link").hide(); - $("#iqdb-similar").hide(); - }); - $("#image").on("load.danbooru", this.initialize_image); - } + this.initialize_image(); this.initialize_similar(); this.initialize_submit(); $("#similar-button").click(); @@ -93,14 +84,69 @@ Upload.initialize_similar = function() { }); } -Upload.update_scale = function() { - var $image = $("#image"); - var ratio = $image.data("scale-factor"); - if (ratio < 1) { - $("#scale").html("Scaled " + parseInt(100 * ratio) + "% (original: " + $image.data("original-width") + "x" + $image.data("original-height") + ")"); +Upload.initialize_image = function() { + let $image = $("#image"); + + if ($image.prop("complete")) { + Upload.update_scale(); } else { - $("#scale").html("Original: " + $image.data("original-width") + "x" + $image.data("original-height")); + $image.on("load.danbooru", Upload.update_scale); } + + $(window).on("resize.danbooru", Upload.update_scale); + $(document).on("click.danbooru", "#image", Upload.toggle_size); + $(document).on("click.danbooru", "#upload-image-view-small", Upload.view_small); + $(document).on("click.danbooru", "#upload-image-view-large", Upload.view_large); + $(document).on("click.danbooru", "#upload-image-view-full", Upload.view_full); +} + +Upload.no_image_available = function(e) { + $("#a-new").addClass("no-image-available"); +} + +Upload.view_small = function(e) { + $("#image").addClass("fit-width fit-height"); + $("#a-new").attr("data-image-size", "small"); + Upload.update_scale(); + e.preventDefault(); +} + +Upload.view_large = function(e) { + $("#image").removeClass("fit-height").addClass("fit-width"); + $("#a-new").attr("data-image-size", "large"); + Upload.update_scale(); + e.preventDefault(); +} + +Upload.view_full = function(e) { + $("#image").removeClass("fit-width fit-height"); + $("#a-new").attr("data-image-size", "full"); + Upload.update_scale(); + e.preventDefault(); +} + +Upload.toggle_size = function(e) { + let window_aspect_ratio = $(window).width() / $(window).height(); + let image_aspect_ratio = $("#image").width() / $("#image").height(); + let image_size = $("#a-new").attr("data-image-size"); + + if (image_size === "small" && image_aspect_ratio >= window_aspect_ratio) { + Upload.view_full(e); + } else if (image_size === "small" && image_aspect_ratio < window_aspect_ratio) { + Upload.view_large(e); + } else if (image_size === "large") { + Upload.view_small(e); + } else if (image_size === "full") { + Upload.view_small(e); + } +} + +Upload.update_scale = function() { + let $image = $("#image"); + let natural_width = $image.get(0).naturalWidth; + let natural_height = $image.get(0).naturalHeight; + let scale_percentage = Math.round(100 * $image.width() / natural_width); + $("#upload-image-metadata-resolution").html(`(${natural_width}x${natural_height}, resized to ${scale_percentage}%)`); } Upload.fetch_data_manual = function(e) { @@ -115,26 +161,6 @@ Upload.fetch_data_manual = function(e) { e.preventDefault(); } -Upload.initialize_image = function() { - var $image = $("#image"); - if (!$image.length) { - return; - } - var width = $image.width(); - var height = $image.height(); - if (!width || !height) { - // we errored out - return; - } - $("#no-image-available").hide(); - $image.data("original-width", width); - $image.data("original-height", height); - Post.resize_image_to_window($image); - Post.initialize_post_image_resize_to_window_link(); - Upload.update_scale(); - $("#image-resize-to-window-link").on("click.danbooru", Upload.update_scale); -} - Upload.toggle_commentary = function() { if ($(".artist-commentary").is(":visible")) { $("#toggle-artist-commentary").text("show ยป"); diff --git a/app/javascript/src/styles/specific/uploads.scss b/app/javascript/src/styles/specific/uploads.scss index c1c6ef63a..aeb5226ad 100644 --- a/app/javascript/src/styles/specific/uploads.scss +++ b/app/javascript/src/styles/specific/uploads.scss @@ -1,5 +1,49 @@ div#c-uploads { div#a-new { + #no-image-available { + display: none; + } + + &.no-image-available { + #upload-image-metadata, #image, #iqdb-similar { + display: none; + } + + #no-image-available { + display: block !important; + } + } + + &[data-image-size="small"] { + #image { + cursor: zoom-in; + } + + a#upload-image-view-small { + font-weight: bold; + } + } + + &[data-image-size="large"] { + #image { + cursor: zoom-out; + } + + a#upload-image-view-large { + font-weight: bold; + } + } + + &[data-image-size="full"] { + #image { + cursor: zoom-out; + } + + a#upload-image-view-full { + font-weight: bold; + } + } + .artist-commentary { margin-top: 1em; } diff --git a/app/views/uploads/_image.html.erb b/app/views/uploads/_image.html.erb index c43a18560..7b0a2208e 100644 --- a/app/views/uploads/_image.html.erb +++ b/app/views/uploads/_image.html.erb @@ -1,23 +1,22 @@ <% if params[:url] %> +

+ Size + <% if @remote_size %> + <%= number_to_human_size(@remote_size) %> + <% end %> + + + (small | large | full) + +

+
<% if ImageProxy.needs_proxy?(@source.image_url) %> - <%= tag.img src: image_proxy_uploads_path(url: @source.image_url), title: "Preview", id: "image" %> + <%= tag.img src: image_proxy_uploads_path(url: @source.image_url), title: "Preview", id: "image", class: "fit-width fit-height", onerror: "Danbooru.Upload.no_image_available()", "data-shortcut": "z" %> <% elsif @source.image_url.present? %> - <%= tag.img src: @source.image_url, title: "Preview", id: "image", referrerpolicy: "no-referrer" %> + <%= tag.img src: @source.image_url, title: "Preview", id: "image", referrerpolicy: "no-referrer", class: "fit-width fit-height", onerror: "Danbooru.Upload.no_image_available()", "data-shortcut": "z" %> <% end %> + +
No image preview available
- - <% end %> diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb index a09e3e1dc..981e90edd 100644 --- a/app/views/uploads/new.html.erb +++ b/app/views/uploads/new.html.erb @@ -1,5 +1,5 @@
-
+

Upload

<% if !CurrentUser.user.upload_limit.limited? %>