Alt text in image viewer
This commit is contained in:
parent
04a15f1c76
commit
0e6852bbee
2 changed files with 64 additions and 2 deletions
|
@ -13,7 +13,7 @@
|
||||||
:href="image.url"
|
:href="image.url"
|
||||||
:title="image.name"
|
:title="image.name"
|
||||||
>
|
>
|
||||||
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
|
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :cover="false"/>
|
||||||
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
||||||
</a>
|
</a>
|
||||||
<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button>
|
<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button>
|
||||||
|
|
|
@ -46,7 +46,8 @@ onMounted(() => {
|
||||||
src: media.url,
|
src: media.url,
|
||||||
w: media.properties.width,
|
w: media.properties.width,
|
||||||
h: media.properties.height,
|
h: media.properties.height,
|
||||||
alt: media.name,
|
alt: media.comment || media.name,
|
||||||
|
comment: media.comment,
|
||||||
};
|
};
|
||||||
if (media.properties.orientation != null && media.properties.orientation >= 5) {
|
if (media.properties.orientation != null && media.properties.orientation >= 5) {
|
||||||
[item.w, item.h] = [item.h, item.w];
|
[item.w, item.h] = [item.h, item.w];
|
||||||
|
@ -89,9 +90,39 @@ onMounted(() => {
|
||||||
[itemData.w, itemData.h] = [itemData.h, itemData.w];
|
[itemData.w, itemData.h] = [itemData.h, itemData.w];
|
||||||
}
|
}
|
||||||
itemData.msrc = file.thumbnailUrl;
|
itemData.msrc = file.thumbnailUrl;
|
||||||
|
itemData.alt = file.comment || file.name;
|
||||||
|
itemData.comment = file.comment;
|
||||||
itemData.thumbCropped = true;
|
itemData.thumbCropped = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
lightbox.on('uiRegister', () => {
|
||||||
|
lightbox.pswp.ui.registerElement({
|
||||||
|
name: 'altText',
|
||||||
|
className: 'pwsp__alt-text-container',
|
||||||
|
appendTo: 'wrapper',
|
||||||
|
onInit: (el, pwsp) => {
|
||||||
|
let textBox = document.createElement('p');
|
||||||
|
textBox.className = 'pwsp__alt-text';
|
||||||
|
el.appendChild(textBox);
|
||||||
|
|
||||||
|
let preventProp = function(ev: Event): void {
|
||||||
|
ev.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Allow scrolling/text selection
|
||||||
|
el.onwheel = preventProp;
|
||||||
|
el.onclick = preventProp;
|
||||||
|
el.onpointerdown = preventProp;
|
||||||
|
el.onpointercancel = preventProp;
|
||||||
|
el.onpointermove = preventProp;
|
||||||
|
|
||||||
|
pwsp.on('change', () => {
|
||||||
|
textBox.textContent = pwsp.currSlide.data.comment?.trim();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
lightbox.init();
|
lightbox.init();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -193,4 +224,35 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
||||||
//z-index: v-bind(pswpZIndex);
|
//z-index: v-bind(pswpZIndex);
|
||||||
z-index: 2000000;
|
z-index: 2000000;
|
||||||
}
|
}
|
||||||
|
.pwsp__alt-text-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pwsp__alt-text {
|
||||||
|
color: white;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
max-height: 10vh;
|
||||||
|
overflow-x: clip;
|
||||||
|
overflow-y: auto;
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pwsp__alt-text:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue