fix(client): photoswipe(画像の拡大表示)がなんか変 (#10138)
* fix(client): photoswipe(画像の拡大表示)がなんか変 Fix #10037 * important --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
4ea978000d
commit
17d0bde50e
1 changed files with 14 additions and 11 deletions
|
@ -13,7 +13,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref, useCssModule } from 'vue';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||||||
import PhotoSwipe from 'photoswipe';
|
import PhotoSwipe from 'photoswipe';
|
||||||
|
@ -29,8 +29,11 @@ const props = defineProps<{
|
||||||
raw?: boolean;
|
raw?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const $style = useCssModule();
|
||||||
|
|
||||||
const gallery = ref(null);
|
const gallery = ref(null);
|
||||||
const pswpZIndex = os.claimZIndex('middle');
|
const pswpZIndex = os.claimZIndex('middle');
|
||||||
|
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
|
||||||
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
|
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -54,17 +57,18 @@ onMounted(() => {
|
||||||
return item;
|
return item;
|
||||||
}),
|
}),
|
||||||
gallery: gallery.value,
|
gallery: gallery.value,
|
||||||
|
mainClass: $style.pswp,
|
||||||
children: '.image',
|
children: '.image',
|
||||||
thumbSelector: '.image',
|
thumbSelector: '.image',
|
||||||
loop: false,
|
loop: false,
|
||||||
padding: window.innerWidth > 500 ? {
|
padding: window.innerWidth > 500 ? {
|
||||||
top: 32,
|
top: 32,
|
||||||
bottom: 32,
|
bottom: 90,
|
||||||
left: 32,
|
left: 32,
|
||||||
right: 32,
|
right: 32,
|
||||||
} : {
|
} : {
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 78,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
},
|
},
|
||||||
|
@ -82,6 +86,7 @@ onMounted(() => {
|
||||||
|
|
||||||
const id = element.dataset.id;
|
const id = element.dataset.id;
|
||||||
const file = props.mediaList.find(media => media.id === id);
|
const file = props.mediaList.find(media => media.id === id);
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
itemData.src = file.url;
|
itemData.src = file.url;
|
||||||
itemData.w = Number(file.properties.width);
|
itemData.w = Number(file.properties.width);
|
||||||
|
@ -198,16 +203,14 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
||||||
overflow: hidden; // clipにするとバグる
|
overflow: hidden; // clipにするとバグる
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pswp {
|
||||||
|
--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
|
||||||
|
--pswp-bg: var(--modalBg) !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.pswp {
|
|
||||||
// なぜか機能しない
|
|
||||||
//z-index: v-bind(pswpZIndex);
|
|
||||||
z-index: 2000000;
|
|
||||||
--pswp-bg: var(--modalBg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pswp__bg {
|
.pswp__bg {
|
||||||
background: var(--modalBg);
|
background: var(--modalBg);
|
||||||
backdrop-filter: var(--modalBgFilter);
|
backdrop-filter: var(--modalBgFilter);
|
||||||
|
@ -219,7 +222,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 30px;
|
bottom: 20px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue