From 145ee74c69aee745fee8641889062074f1e7e2fc Mon Sep 17 00:00:00 2001 From: "byte[]" Date: Wed, 29 Mar 2023 10:59:28 -0400 Subject: [PATCH] Fix embedded image views for small images --- assets/css/views/_images.scss | 2 +- assets/js/image_expansion.js | 27 +++++++++---------- assets/js/preview.js | 2 ++ lib/philomena_web/markdown_renderer.ex | 6 ++--- .../templates/image/_image_target.html.slime | 2 +- lib/philomena_web/views/image_view.ex | 12 +++++++++ 6 files changed, 32 insertions(+), 19 deletions(-) diff --git a/assets/css/views/_images.scss b/assets/css/views/_images.scss index a4db1b9d..0f9a0f44 100644 --- a/assets/css/views/_images.scss +++ b/assets/css/views/_images.scss @@ -168,7 +168,7 @@ span.spoiler div.image-container { /* This and the one above needed for older browsers for some reason, appears to be a bug */ -#image_target { +.image-target { max-width: 100%; } diff --git a/assets/js/image_expansion.js b/assets/js/image_expansion.js index 819dec93..d7bab189 100644 --- a/assets/js/image_expansion.js +++ b/assets/js/image_expansion.js @@ -1,4 +1,4 @@ -import { clearEl } from './utils/dom'; +import { $$, clearEl } from './utils/dom'; import store from './utils/store'; const imageVersions = { @@ -157,20 +157,19 @@ function bindImageForClick(target) { }); } -function bindImageTarget() { - const target = document.getElementById('image_target'); - if (!target) return; - - pickAndResize(target); - - if (target.dataset.mimeType === 'video/webm') { - // Don't interfere with media controls on video - return; - } - - bindImageForClick(target); - window.addEventListener('resize', () => { +function bindImageTarget(node = document) { + $$('.image-target', node).forEach(target => { pickAndResize(target); + + if (target.dataset.mimeType === 'video/webm') { + // Don't interfere with media controls on video + return; + } + + bindImageForClick(target); + window.addEventListener('resize', () => { + pickAndResize(target); + }); }); } diff --git a/assets/js/preview.js b/assets/js/preview.js index 6cbdad03..a3968762 100644 --- a/assets/js/preview.js +++ b/assets/js/preview.js @@ -3,6 +3,7 @@ */ import { fetchJson } from './utils/requests'; +import { bindImageTarget } from './image_expansion'; import { filterNode } from './imagesclientside'; import { hideEl, showEl } from './utils/dom'; @@ -49,6 +50,7 @@ function getPreview(body, anonymous, previewLoading, previewIdle, previewContent .then(data => { previewContent.innerHTML = data; filterNode(previewContent); + bindImageTarget(previewContent); showEl(previewIdle); hideEl(previewLoading); }); diff --git a/lib/philomena_web/markdown_renderer.ex b/lib/philomena_web/markdown_renderer.ex index 97c63fb4..8890335a 100644 --- a/lib/philomena_web/markdown_renderer.ex +++ b/lib/philomena_web/markdown_renderer.ex @@ -81,7 +81,7 @@ defmodule PhilomenaWeb.MarkdownRenderer do [_id, "p"] when not img.hidden_from_users and img.approved -> Phoenix.View.render(@image_view, "_image_target.html", image: img, - size: :medium, + size: @image_view.select_version(img, :medium), conn: conn ) |> safe_to_string() @@ -89,7 +89,7 @@ defmodule PhilomenaWeb.MarkdownRenderer do [_id, "t"] when not img.hidden_from_users and img.approved -> Phoenix.View.render(@image_view, "_image_target.html", image: img, - size: :small, + size: @image_view.select_version(img, :small), conn: conn ) |> safe_to_string() @@ -97,7 +97,7 @@ defmodule PhilomenaWeb.MarkdownRenderer do [_id, "s"] when not img.hidden_from_users and img.approved -> Phoenix.View.render(@image_view, "_image_target.html", image: img, - size: :thumb_small, + size: @image_view.select_version(img, :thumb_small), conn: conn ) |> safe_to_string() diff --git a/lib/philomena_web/templates/image/_image_target.html.slime b/lib/philomena_web/templates/image/_image_target.html.slime index 36a4ab22..f38526b6 100644 --- a/lib/philomena_web/templates/image/_image_target.html.slime +++ b/lib/philomena_web/templates/image/_image_target.html.slime @@ -11,7 +11,7 @@ ' . = if size == :full do - #image_target.hidden.image-show data-scaled=scaled_value(@conn.assigns.current_user) data-uris=Jason.encode!(thumb_urls(@image, can?(@conn, :hide, @image))) data-width=@image.image_width data-height=@image.image_height data-image-size=@image.image_size data-mime-type=@image.image_mime_type + .image-target.hidden.image-show data-scaled=scaled_value(@conn.assigns.current_user) data-uris=Jason.encode!(thumb_urls(@image, can?(@conn, :hide, @image))) data-width=@image.image_width data-height=@image.image_height data-image-size=@image.image_size data-mime-type=@image.image_mime_type = if @image.image_mime_type == "video/webm" do video controls=true - else diff --git a/lib/philomena_web/views/image_view.ex b/lib/philomena_web/views/image_view.ex index 071e3b8b..f6368458 100644 --- a/lib/philomena_web/views/image_view.ex +++ b/lib/philomena_web/views/image_view.ex @@ -58,6 +58,18 @@ defmodule PhilomenaWeb.ImageView do |> append_gif_urls(image, show_hidden) end + def select_version(image, version_name) do + Thumbnailer.thumbnail_versions() + |> Map.new(fn {name, {width, height}} -> + if image.image_width > width or image.image_height > height do + {name, version_name} + else + {name, :full} + end + end) + |> Map.get(version_name, :full) + end + defp append_full_url(urls, %{hidden_from_users: false} = image, _show_hidden), do: Map.put(urls, :full, pretty_url(image, true, false))