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

media assets: refactor media asset component.

Browse Source
This commit is contained in:
evazion
2022-12-09 15:17:45 -06:00
parent f3a1b42d10
commit aefa7586fd
5 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,19 @@
export default class MediaAssetComponent {
static initialize() {
$(".media-asset-container").toArray().forEach(element => {
$(".media-asset-component").toArray().forEach(element => {
new MediaAssetComponent(element);
});
}
constructor(element) {
this.$container = $(element);
this.$component = this.$container.find(".media-asset-component");
this.$component = $(element);
this.$container = this.$component.find(".media-asset-container");
this.$image = this.$component.find(".media-asset-image");
this.$zoomLevel = this.$component.find(".media-asset-zoom-level");
if (this.$container.attr("data-dynamic-height") === "true") {
if (this.$component.attr("data-dynamic-height") === "true") {
this.updateHeight();
$(window).on("scroll.danbooru", element => {
this.updateHeight();
});
$(window).on("scroll.danbooru", e => this.updateHeight());
}
if (this.$image.length) {
@@ -26,8 +26,10 @@ export default class MediaAssetComponent {
}
toggleFit() {
if (this.canZoom) {
this.$container.toggleClass("media-asset-container-fit-height");
if (this.canZoomOut) {
this.$component.addClass("media-asset-component-fit-height media-asset-component-fit-width");
} else if (this.canZoomHeight) {
this.$component.removeClass("media-asset-component-fit-height");
}
this.updateZoom();
@@ -46,19 +48,19 @@ export default class MediaAssetComponent {
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");
this.$component.css("--header-visible-height", Math.min(115, Math.max(0, this.$component.offset().top - $(window).scrollTop())) + "px");
}
get zoomLevel() {
return this.$image.width() / Number(this.$image.attr("width"));
}
get canZoom() {
return this.canZoomIn || this.canZoomOut;
get canZoomIn() {
return this.canZoomHeight;
}
get canZoomIn() {
return !this.isZoomed && this.$image.height() < this.$image.get(0).naturalHeight && Math.round(this.$image.width()) < Math.round(this.$container.width());
get canZoomHeight() {
return !this.isZoomed && this.$image.height() < this.$image.get(0).naturalHeight && Math.round(this.$image.width()) < Math.round(this.$component.width());
}
get canZoomOut() {
@@ -66,15 +68,7 @@ export default class MediaAssetComponent {
}
get isZoomed() {
return !this.$container.is(".media-asset-container-fit-height");
}
get $image() {
return this.$component.find(".media-asset-image");
}
get $zoomLevel() {
return this.$component.find(".media-asset-zoom-level");
return !this.$component.is(".media-asset-component-fit-height.media-asset-component-fit-width");
}
}

1
app/javascript/src/styles/common/utilities.scss
View File

@@ -47,6 +47,7 @@ $spacer: 0.25rem; /* 4px */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.break-all { word-break: break-all; overflow-wrap: anywhere; }
.break-words { word-break: break-word; overflow-wrap: anywhere; }