@bagelink/vue 0.0.726 → 0.0.732

package/src/components/lightbox/Lightbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Btn, Icon } from '@bagelink/vue'
+import { BglVideo, Btn, Icon } from '@bagelink/vue'
 import { watch } from 'vue'
 import type { LightboxItem } from './lightbox.types'
 
@@ -66,153 +66,134 @@ defineExpose({ open, close })
 </script>
 
 <template>
-	<div
-		v-if="isOpen"
-		class="lightbox-overlay"
-		@keydown.esc="close"
-		@keydown.left="prev"
-		@keydown.right="next"
-		@click="close"
-	>
-		<div class="lightbox" @click.stop>
-			<Btn flat class="close-button color-white" icon="close" @click="close" />
-			<div class="lightbox-item">
-				<template v-if="currentItem?.type === 'image'">
-					<img :src="currentItem?.src" alt="Preview">
-				</template>
-				<template v-else-if="currentItem?.type === 'video'">
-					<video controls autoplay>
-						<source :src="currentItem?.src" type="video/mp4">
-						<track kind="captions" src="#" srclang="en" label="English">
-					</video>
-				</template>
-				<template v-else-if="currentItem?.type === 'pdf'">
-					<embed
-						:src="normalizeURL(currentItem?.src)"
-						type="application/pdf"
-						width="100%"
-						height="1080"
-						:title="currentItem?.name"
-					>
-				</template>
-				<template v-else>
-					<div class="file-info txt-white">
-						<p>File: {{ currentItem?.name }}</p>
-						<p>Type: {{ currentItem?.type }}</p>
-						<a :href="currentItem?.src" target="_blank">Open file</a>
-					</div>
-				</template>
-			</div>
-			<div class="navigation">
-				<Btn
-					class="navigation-btn"
-					icon="arrow_back"
-					@click="prev"
-				/>
-				<Btn
-					class="navigation-btn"
-					icon="arrow_forward"
-					@click="next"
-				/>
-			</div>
-			<div v-if="group && group.length > 1" class="thumbnails">
-				<template
-					v-for="(item, index) in group"
-					:key="index"
+	<transition name="fade">
+		<div
+			v-if="isOpen"
+			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-999 inset mx-auto"
+			@keydown.esc="close"
+			@keydown.left="prev"
+			@keydown.right="next"
+			@click="close"
+		>
+			<div class="bgl-lightbox relative vw90 txt-center" @click.stop>
+				<Btn flat class="fixed top-1 end-1 color-white" icon="close" @click="close" />
+				<div class="bgl-lightbox-item">
+					<template v-if="currentItem?.type === 'image'">
+						<img :src="currentItem?.src" alt="Preview">
+					</template>
+					<template v-else-if="currentItem?.type === 'video'">
+						<BglVideo
+							:src="currentItem?.src"
+							autoplay
+							controls
+						/>
+					</template>
+					<template v-else-if="currentItem?.type === 'pdf'">
+						<embed
+							:src="normalizeURL(currentItem?.src)"
+							type="application/pdf"
+							width="100%"
+							height="1080"
+							:title="currentItem?.name"
+						>
+					</template>
+					<template v-else>
+						<div class="file-info txt-white">
+							<p>File: {{ currentItem?.name }}</p>
+							<p>Type: {{ currentItem?.type }}</p>
+							<a :href="currentItem?.src" target="_blank">Open file</a>
+						</div>
+					</template>
+				</div>
+				<div v-if="group && group.length > 1" class="navigation flex space-between w-100 absolute">
+					<Btn
+						class="navigation-btn oval user-select-none"
+						icon="arrow_back"
+						@click="prev"
+					/>
+					<Btn
+						class="navigation-btn oval user-select-none"
+						icon="arrow_forward"
+						@click="next"
+					/>
+				</div>
+				<div
+					v-if="group && group.length > 1"
+					class="flex justify-content-center mt-2 overflow
+					 p-1 fixed bottom start end gap-1 m_justify-content-start"
 				>
-					<img
-						v-if="item.type === 'image'"
-						class="thumbnail"
-						:src="item.src"
-						alt=""
-						@click="selectItem(index)"
+					<template
+						v-for="(item, index) in group"
+						:key="index"
 					>
-					<Icon
-						v-else
-						class="thumbnail"
-						icon="description"
-						@click="selectItem(index)"
-					/>
-				</template>
+						<img
+							v-if="item.type === 'image'"
+							class="thumbnail object-fit-cover hover
+							 opacity-5 round flex bg-white justify-content-center align-items-center flex-shrink-0"
+							:src="item.src"
+							alt=""
+							:class="{ active: currentIndex === index }"
+							@click="selectItem(index)"
+						>
+						<Icon
+							v-else
+							class="thumbnail object-fit-cover hover
+							 opacity-5 round flex bg-white justify-content-center align-items-center flex-shrink-0"
+							icon="description"
+							:class="{ active: currentIndex === index }"
+							@click="selectItem(index)"
+						/>
+					</template>
+				</div>
 			</div>
 		</div>
-	</div>
+	</transition>
 </template>
 
 <style scoped>
-.lightbox-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+.bgl-lightbox-overlay {
 	background: rgba(0, 0, 0, 0.8);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1000;
 }
 
-.lightbox {
-	position: relative;
+.bgl-lightbox {
 	max-height: 90%;
-	width: 90vw;
-	text-align: center;
 }
 
-.close-button {
-	position: fixed;
-	top: 1rem;
-	inset-inline-end: 1rem;
+.bgl-lightbox-item{
+	animation: 500ms ease bgl-lightbox-load;
 }
+@keyframes bgl-lightbox-load {
+  from {
+    scale:0.7;
+  }
 
-.lightbox-item * {
+  to {
+	scale:1;
+
+  }
+}
+
+.bgl-lightbox-item * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
+	margin: auto;
+	animation: 200ms ease bgl-lightbox-load;
 }
 
 .navigation {
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
-	position: absolute;
 	top: 50%;
 	transform: translateY(-50%);
 }
 
 .navigation-btn {
-	user-select: none;
 	width: var(--input-height);
 	height: var(--input-height);
-	border-radius: 100%;
-}
-
-.thumbnails {
-	display: flex;
-	justify-content: center;
-	margin-top: 10px;
-	overflow: auto;
-	padding: 1rem;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
 }
 
 .thumbnail {
 	height: 50px;
 	width: 50px;
-	object-fit: cover;
-	margin: 0 5px;
-	cursor: pointer;
-	opacity: 0.5;
-	border-radius: 3px;
-	transition: all 200ms ease;
-	background-color: white;
-	display: flex;
-	justify-content: center;
-	align-items: center;
 }
 .thumbnail:hover {
 	opacity: 1;

package/src/components/lightbox/index.ts

@@ -1,4 +1,4 @@
-import type { App, DirectiveBinding } from 'vue'
+import type { App, Directive, DirectiveBinding } from 'vue'
 import { createApp } from 'vue'
 import { IMAGE_FORMATS_REGEXP, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
 import Lightbox from './Lightbox.vue'
@@ -6,44 +6,46 @@ import type { LightboxItem } from './lightbox.types'
 
 type OpenFunction = (item: LightboxItem, groupItems?: LightboxItem[]) => void
 const groups: Record<string, LightboxItem[]> = {}
-const lightboxDirective = {
-	mounted(el: HTMLElement, binding: DirectiveBinding) {
-		const lightboxInstance = createLightboxInstance()
-		if (!lightboxInstance || !lightboxInstance.open) return
-		if (binding.value.group) {
-			if (!groups[binding.value.group]) groups[binding.value.group] = []
-			const src = binding.value.src || binding.value || el.getAttribute('src') || ''
-			groups[binding.value.group].push({
-				src,
-				type: binding.value.type || determineFileType(src),
-				name: binding.value.name || ''
-			})
+const lightboxDirective: Directive = {
+	mounted(el: HTMLElement, binding) {
+		el.classList.add('hover')
+		const item = bindingToItem(binding, el)
+		if (item.group) {
+			if (!groups[item.group]) groups[item.group] = []
+			const currentIndex = groups[item.group].findIndex(i => i.src === item.src)
+			if (currentIndex === -1) groups[item.group].push(item)
 		}
-		el.addEventListener('click', (e) => {
-			e.stopPropagation()
-			const group = binding.value.group || null
-			const item: LightboxItem = {
-				src: binding.value.src || binding.value,
-				type: binding.value.type || determineFileType(binding.value.src || binding.value),
-				name: binding.value.name || '',
-				thumbnail: binding.value.thumbnail || '',
-			}
-			const lightboxInstance = createLightboxInstance()
-			if (!lightboxInstance || !lightboxInstance.open) return
-			if (binding.value.group) {
-				if (!groups[binding.value.group]) groups[binding.value.group] = []
-				groups[binding.value.group].push(item)
-			}
-			const open = lightboxInstance.open as OpenFunction
-			open(item, groups[group])
-		})
+		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
 	},
+	unmounted(el: HTMLElement, binding) {
+		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
+	}
 }
 
+function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBinding) {
+	e.stopPropagation()
+	const item = bindingToItem(binding, el)
+	const lightboxInstance = createLightboxInstance()
+	if (!lightboxInstance || !lightboxInstance.open) return
+	const open = lightboxInstance.open as OpenFunction
+	const group = item && item.group ? groups[item.group] : undefined
+	open(item, group)
+}
+
+function bindingToItem(binding: DirectiveBinding, el: HTMLElement): LightboxItem {
+	let { group, src, type, name, thumbnail } = binding.value || {}
+	src = src || binding.value || el.getAttribute('src') || ''
+	type = type || determineFileType(src)
+	return { src, type, name, thumbnail, group }
+}
+
+const youtubeRegex = /youtube\.com|youtu\.be/
+const vimeoRegex = /vimeo\.com/
+
 function determineFileType(url: string): string {
 	const extension = url.split('.').pop()?.toLowerCase() || ''
 	if (IMAGE_FORMATS_REGEXP.test(extension)) return 'image'
-	if (VIDEO_FORMATS_REGEXP.test(extension)) return 'video'
+	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return 'video'
 	if (['pdf'].includes(extension)) return 'pdf'
 	return 'unknown'
 }

package/src/components/lightbox/lightbox.types.ts

@@ -3,4 +3,5 @@ export interface LightboxItem {
 	type: string
 	name: string
 	thumbnail?: string
+	group?: string
 }

package/src/styles/modal.css

@@ -34,6 +34,24 @@
     height: fit-content;
 }
 
+.is-active .modal {
+    animation: 200ms ease bgl-modal-animation;
+
+}
+
+@keyframes bgl-modal-animation {
+    from {
+        scale: 0.7;
+        transform: translateY(2rem);
+    }
+
+    to {
+        scale: 1;
+        transform: translateY(0);
+
+    }
+}
+
 .small-modal .modal {
     max-width: 300px;
     text-align: center;