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

media assets: redesign show page.

Browse Source 
Redesign the media assets show page to:

* Include sidebar with AI tags and image metadata.
* Include next and previous image buttons.
* Make the image use 100% of the available screen space and to scroll with the window.
This commit is contained in:
evazion
2022-11-27 21:19:05 -06:00
parent 8a2f59172b
commit a5d4af332d
8 changed files with 258 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/src/javascripts/media_asset_component.js
View File

@@ -1,47 +1,72 @@
export default class MediaAssetComponent {
static initialize() {
$(".media-asset-component").toArray().forEach(element => {
$(".media-asset-container").toArray().forEach(element => {
new MediaAssetComponent(element);
});
}
constructor(element) {
this.$component = $(element);
this.$container = $(element);
this.$component = this.$container.find(".media-asset-component");
if (this.$container.attr("data-dynamic-height") === "true") {
this.updateHeight();
$(window).on("scroll.danbooru", element => {
this.updateHeight();
});
}
if (this.$image.length) {
this.$image.on("click.danbooru", e => this.toggleFit());
this.$image.on("load.danbooru", e => this.updateZoom());
this.$image.on("load.danbooru", e => this.updateHeight());
new ResizeObserver(() => this.updateZoom()).observe(this.$image.get(0));
this.updateZoom();
}
}
toggleFit() {
this.$component.toggleClass("fit-screen");
if (this.canZoom) {
this.$container.toggleClass("media-asset-container-fit-height");
}
this.updateZoom();
}
updateZoom() {
this.$image.removeClass("cursor-zoom-in cursor-zoom-out");
this.$zoomLevel.addClass("hidden").text(`${Math.round(100 * this.zoomLevel)}%`);
this.$zoomLevel.removeClass("hidden").text(`${Math.round(100 * this.zoomLevel)}%`);
if (this.isDownscaled) {
this.$image.addClass("cursor-zoom-out");
this.$zoomLevel.removeClass("hidden");
} else if (this.isTooBig) {
if (this.canZoomIn) {
this.$image.addClass("cursor-zoom-in");
} else if (this.canZoomOut) {
this.$image.addClass("cursor-zoom-out");
}
}
updateHeight() {
// XXX 115 = header height (hardcoded to prevent height glitches as page loads)
this.$container.css("--header-visible-height", Math.min(115, Math.max(0, this.$container.offset().top - $(window).scrollTop())) + "px");
}
get zoomLevel() {
return this.$image.width() / Number(this.$image.attr("width"));
}
get isDownscaled() {
return this.$image.width() < Number(this.$image.attr("width"));
get canZoom() {
return this.canZoomIn || this.canZoomOut;
}
get isTooBig() {
return this.$image.width() > this.$component.width();
get canZoomIn() {
return !this.isZoomed && this.$image.height() < this.$image.get(0).naturalHeight && Math.round(this.$image.width()) < Math.round(this.$container.width());
}
get canZoomOut() {
return this.isZoomed;
}
get isZoomed() {
return !this.$container.is(".media-asset-container-fit-height");
}
get $image() {