FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

client: Merge PR 'enhance: Alt text in image viewer' (#178)
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/lint-foundkey-js Pipeline was successful
Details
ci/woodpecker/push/lint-client Pipeline was successful
Details
ci/woodpecker/push/lint-backend Pipeline was successful
Details
ci/woodpecker/push/test Pipeline was successful
Details

Browse source 
Reviewed-on: #178
Changelog: Added
This commit is contained in:
Norm 2022-10-01 10:29:27 -04:00
parent 36a0e48e49 e995bd5673
commit 40c2e8f846
Signed by: norm
GPG key ID: 7123E30E441E80DE
2 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/media-image.vue
View file

@ -13,7 +13,7 @@
:href="image.url"
: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>
</a>
<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="fas fa-eye-slash"></i></button>

64
packages/client/src/components/media-list.vue
View file

@ -43,7 +43,8 @@ onMounted(() => {
src: media.url,
w: media.properties.width,
h: media.properties.height,
alt: media.name,
alt: media.comment || media.name,
comment: media.comment,
};
if (media.properties.orientation != null && media.properties.orientation >= 5) {
[item.w, item.h] = [item.h, item.w];
@ -86,9 +87,39 @@ onMounted(() => {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
itemData.alt = file.comment || file.name;
itemData.comment = file.comment;
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();
});
@ -183,4 +214,35 @@ const previewable = (file: foundkey.entities.DriveFile): boolean => {
// なぜか機能しない
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>