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

media assets: scroll to position on zoom.

Browse Source 
On the media asset show page, make it so that when you click an image to zoom in, the page scrolls
to the clicked position. For example, if you click on the bottom of an image, scroll down so that
the bottom of the zoomed image is in view.

This makes it easier to view very tall images by letting you click on the part of the image you want
to see.
This commit is contained in:
evazion
2022-12-09 18:18:42 -06:00
parent aefa7586fd
commit 16c9e906b2
4 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/media_asset_component.rb
View File

@@ -2,19 +2,20 @@
# A component for showing a full-sized image or video for a media asset.
class MediaAssetComponent < ApplicationComponent
attr_reader :media_asset, :current_user, :outer_classes, :inner_classes, :dynamic_height
attr_reader :media_asset, :current_user, :outer_classes, :inner_classes, :dynamic_height, :scroll_on_zoom
delegate :image_width, :image_height, :variant, :is_image?, :is_video?, :is_ugoira?, :is_flash?, to: :media_asset
renders_one :header
renders_one :footer
def initialize(media_asset:, current_user:, outer_classes: "", inner_classes: "", dynamic_height: false)
def initialize(media_asset:, current_user:, outer_classes: "", inner_classes: "", dynamic_height: false, scroll_on_zoom: false)
super
@media_asset = media_asset
@current_user = current_user
@outer_classes = outer_classes
@inner_classes = inner_classes
@dynamic_height = dynamic_height
@scroll_on_zoom = scroll_on_zoom
end
end

2
app/components/media_asset_component/media_asset_component.html.erb
View File

@@ -1,4 +1,4 @@
<div class="media-asset-component media-asset-component-fit-height media-asset-component-fit-width flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
<div class="media-asset-component media-asset-component-fit-height media-asset-component-fit-width flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" data-scroll-on-zoom="<%= scroll_on_zoom %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
<%= header %>
<div class="media-asset-container relative max-h-inherit overflow-hidden <%= inner_classes %>">