Simplify lightbox

src/components/project.vue

@@ -4,7 +4,7 @@ import { Map, NavigationControl, Marker, LngLatBounds, LngLat, Popup } from 'map
 import { createApp, ref, provide, inject } from 'vue';
 import Simplebar from 'simplebar-vue';
 
-import lightbox from '@scripts/lightbox';
+import Lightbox from '@scripts/lightbox';
 import { getOuterWidth } from '@scripts/common';
 
 import SpotIcon from '@components/spotIcon';
@@ -44,6 +44,7 @@ export default {
 			baseMaps: {},
 			baseMap: null,
 			map: null,
+			lightbox: null,
 			hikes: {
 				colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
 				width: 4
@@ -120,9 +121,8 @@ export default {
 			*/
 		},
 		async init() {
-			let bFirstLoad = (typeof this.currProject.codename == 'undefined');
 			this.initProject();
-			if(bFirstLoad) this.initLightbox();
+			this.initLightbox();
 
 			await Promise.all([
 				this.initFeed(),
@@ -133,7 +133,7 @@ export default {
 			if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]);
 		},
 		quit() {
-			lightbox.end();
+			this.lightbox?.end();
 			this.$refs.feedSimpleBar.scrollElement.removeEventListener('scroll', this.onFeedScroll);
 			this.setFeedUpdateTimer(-1);
 			this.map.remove();
@@ -147,7 +147,7 @@ export default {
 			this.baseMaps = {};
 		},
 		initLightbox() {
-			lightbox.option({
+			this.lightbox = new Lightbox({
 				alwaysShowNavOnTouchDevices: true,
 				albumLabel: 'Media %1 / %2',
 				fadeDuration: 300,

src/components/spotIcon.vue

@@ -23,7 +23,7 @@ export default {
 				'spot-icon',
 				this.icon,
 				...(this.classes || '').split(/\s+/),
-				this.margin?'margin-'+this.margin:null || this.hasText?'margin-right':null
+				this.margin?'margin-'+this.margin:null
 			].filter(Boolean).join(' ');
 		},
 		resolvedFixedWidth() {
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-	<span :title="title" v-if="title || hasText">
+	<span :title="title" v-if="title || hasText" class="spot-icon-box">
 		<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
 		<span v-if="hasText" :class="textClasses">{{ text }}</span>
 	</span>
@@ -59,6 +59,16 @@ export default {
 <style lang="scss" scoped>
 @use "@styles/var";
 
+.spot-icon-box {
+	display: flex;
+	gap: var.$elem-spacing;
+	align-items: center;
+
+	span {
+		flex: 1 1 auto;
+	}
+}
+
 .spot-icon {
 	&.margin-right {
 		margin-right: var.$elem-spacing;