KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[images] no scrolling in lightbox

This commit is contained in:
Avris 2021-01-07 23:27:28 +01:00
parent 77e5a828e1
commit 0d1710d514
1 changed files with 3 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/Lightbox.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="['lightbox-wrapper', currentUrl === null ? 'd-none' : '']" ref="wrapper" @click.self="hide">
<div :class="['lightbox-inner', center ? 'align-items-center' : '']" ref="inner" @click.self="hide">
<img class="lightbox-image" :src="currentUrl" ref="image" @load="loaded">
<div :class="['lightbox-inner', 'align-items-center']" ref="inner" @click.self="hide">
<img class="lightbox-image" :src="currentUrl" ref="image">
</div>
<span class="lightbox-menu">
<span class="lightbox-close fal fa-times" @click="hide"></span>
@ -14,7 +14,6 @@
data() {
return {
currentUrl: null,
center: false,
};
},
mounted() {
@ -24,13 +23,6 @@
return;
}
document.addEventListener('resize', e => {
if (!this.currentUrl) {
return;
}
this.center = this.$refs.image.offsetHeight < this.$refs.inner.offsetHeight;
});
document.body.addEventListener('keyup', e => {
if (!this.currentUrl) {
return;
@ -52,12 +44,6 @@
hide() {
this.currentUrl = null;
this.$refs.inner.blur();
this.center = false;
},
loaded() {
if (this.$refs.image.offsetHeight < this.$refs.inner.offsetHeight) {
this.center = true;
}
},
},
};
@ -90,6 +76,7 @@
img {
max-width: 100%;
max-height: 100%;
}
}