248 lines
7 KiB
Vue
248 lines
7 KiB
Vue
<template>
|
|
<div
|
|
class="glow-dot"
|
|
:class="{
|
|
'glow-dot--ghost': isGhost,
|
|
'glow-dot--selected': selected,
|
|
'glow-dot--dimmed': isDimmed,
|
|
'glow-dot--label-above': labelAbove
|
|
}"
|
|
:style="dotStyle"
|
|
:role="isGhost ? undefined : 'button'"
|
|
:tabindex="isGhost ? -1 : 0"
|
|
:aria-label="dotAriaLabel"
|
|
@click.stop="onSelect"
|
|
@keydown.enter.prevent.stop="onSelect"
|
|
@keydown.space.prevent.stop="onSelect"
|
|
>
|
|
<div class="glow-dot__inner" :style="innerStyle">
|
|
<img
|
|
v-if="imageSrc"
|
|
:src="imageSrc"
|
|
class="glow-dot__image"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-if="!isGhost && event.title" class="glow-dot__label" :style="labelStyle">
|
|
<span class="glow-dot__connector" :style="connectorStyle"></span>
|
|
<span class="glow-dot__title" :style="titleStyle">{{ event.title }}</span>
|
|
<span class="glow-dot__date" :style="dateStyle">{{ formattedDate }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useEventsStore } from 'stores/events'
|
|
import { useSettingsStore } from 'stores/settings'
|
|
import { useImageCache } from 'composables/useImageCache'
|
|
|
|
const props = defineProps({
|
|
event: { type: Object, required: true },
|
|
x: { type: Number, default: 0 },
|
|
isGhost: { type: Boolean, default: false },
|
|
selected: { type: Boolean, default: false }
|
|
})
|
|
|
|
const emit = defineEmits(['select'])
|
|
const eventsStore = useEventsStore()
|
|
const settingsStore = useSettingsStore()
|
|
|
|
// Resolve image: cached thumbnail from IndexedDB or fetch & cache
|
|
const imageUrl = computed(() => props.event.image || null)
|
|
const eventId = computed(() => props.event.id)
|
|
const { resolvedSrc: imageSrc } = useImageCache(imageUrl, eventId)
|
|
|
|
const fl = computed(() => settingsStore.floatingLines)
|
|
const glowColor = computed(() => eventsStore.getGlowColor(props.event))
|
|
|
|
// CSS diameter derived from settings (circleRadius is half-size in px)
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
|
const dotSize = computed(() => 2 * fl.value.circleRadius / dpr)
|
|
|
|
// Y position: emotion +1 → top (20%), 0 → middle (47%), -1 → bottom (74%)
|
|
|
|
const yPercent = computed(() => 48 - props.event.emotion * 30)
|
|
|
|
// Label above dot when dot is in lower half, below when in upper half
|
|
const labelAbove = computed(() => yPercent.value > 48)
|
|
|
|
// Format date as "12. Feb 2024"
|
|
const MONTH_SHORT = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
|
const formattedDate = computed(() => {
|
|
const d = new Date(props.event.date)
|
|
return `${d.getDate()}. ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`
|
|
})
|
|
const dotAriaLabel = computed(() => {
|
|
if (props.isGhost) return undefined
|
|
const title = props.event.title || 'Event'
|
|
return `${title}, ${formattedDate.value}`
|
|
})
|
|
|
|
// Label font sizes per setting
|
|
const LABEL_FONT = {
|
|
small: { title: 10, date: 9 },
|
|
medium: { title: 12, date: 11 },
|
|
large: { title: 14, date: 13 },
|
|
xlarge: { title: 18, date: 16 }
|
|
}
|
|
const labelFont = computed(() => LABEL_FONT[fl.value.labelSize] ?? LABEL_FONT.small)
|
|
const labelColor = computed(() => fl.value.labelColor ?? '#ffffff')
|
|
const labelOpacity = computed(() => Math.max(0.5, Math.min(1, fl.value.labelOpacity ?? 0.75)))
|
|
const connectorLengthScale = computed(() => Math.max(0, Math.min(1, fl.value.labelConnectorLength ?? 0.2)))
|
|
// 0 -> no connector, 1 -> ~5x current connector length (about 70px)
|
|
const connectorLengthPx = computed(() => connectorLengthScale.value * 70)
|
|
const labelGapPx = computed(() => 4 + connectorLengthPx.value)
|
|
|
|
const labelStyle = computed(() => ({
|
|
maxWidth: labelFont.value.title >= 18 ? '150px' : labelFont.value.title >= 14 ? '120px' : '90px',
|
|
'--label-gap': `${labelGapPx.value}px`,
|
|
'--label-connector-len': `${connectorLengthPx.value}px`,
|
|
'--label-opacity': labelOpacity.value.toFixed(2),
|
|
'--label-connector-color': labelColor.value,
|
|
'--label-connector-opacity': Math.max(0.45, labelOpacity.value * 0.9).toFixed(2)
|
|
}))
|
|
const connectorStyle = computed(() => ({
|
|
display: connectorLengthPx.value <= 0.5 ? 'none' : 'block'
|
|
}))
|
|
const titleStyle = computed(() => ({
|
|
fontSize: `${labelFont.value.title}px`,
|
|
color: labelColor.value,
|
|
maxWidth: labelFont.value.title >= 18 ? '150px' : labelFont.value.title >= 14 ? '120px' : '90px'
|
|
}))
|
|
const dateStyle = computed(() => ({
|
|
fontSize: `${labelFont.value.date}px`,
|
|
color: labelColor.value
|
|
}))
|
|
|
|
const dotStyle = computed(() => ({
|
|
left: `${props.x}px`,
|
|
top: `${yPercent.value}%`,
|
|
width: `${dotSize.value}px`,
|
|
height: `${dotSize.value}px`
|
|
}))
|
|
|
|
const innerStyle = computed(() => {
|
|
const size = fl.value.glowSize
|
|
const strength = fl.value.glowStrength
|
|
const color = glowColor.value
|
|
const core = alphaHex(Math.min(strength / 3, 1))
|
|
const halo = alphaHex(Math.min(strength / 7, 1))
|
|
const shadow = `0 0 ${size}px 0px ${color}${core}, 0 0 ${size * 2.5}px ${size * 0.3}px ${color}${halo}`
|
|
const bw = fl.value.dotBorderWidth ?? 0
|
|
return {
|
|
boxShadow: shadow,
|
|
border: bw > 0 ? `${bw}px solid ${fl.value.dotBorderColor ?? '#ffffff'}` : 'none'
|
|
}
|
|
})
|
|
|
|
function alphaHex(a) {
|
|
return Math.round(Math.min(1, Math.max(0, a)) * 255).toString(16).padStart(2, '0')
|
|
}
|
|
|
|
const isDimmed = computed(() =>
|
|
eventsStore.selectedEventId !== null && !props.selected && !props.isGhost
|
|
)
|
|
|
|
function onSelect() {
|
|
if (!props.isGhost) emit('select')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.glow-dot {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
transition: opacity 0.3s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.glow-dot__inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
}
|
|
|
|
.glow-dot__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* States */
|
|
.glow-dot--ghost {
|
|
opacity: 1;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
|
|
.glow-dot--selected {
|
|
transform: translate(-50%, -50%) scale(1.15);
|
|
z-index: 15;
|
|
}
|
|
|
|
.glow-dot--dimmed {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Event label (title + date) */
|
|
.glow-dot__label {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: calc(100% + var(--label-gap, 18px));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1px;
|
|
max-width: 90px;
|
|
pointer-events: none;
|
|
opacity: var(--label-opacity, 0.75);
|
|
}
|
|
|
|
/* When dot is in lower half, show label above */
|
|
.glow-dot--label-above .glow-dot__label {
|
|
top: auto;
|
|
bottom: calc(100% + var(--label-gap, 18px));
|
|
}
|
|
|
|
.glow-dot__connector {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 1px;
|
|
height: var(--label-connector-len, 14px);
|
|
top: calc(-1 * var(--label-connector-len, 14px));
|
|
transform: translateX(-50%);
|
|
background: var(--label-connector-color, #ffffff);
|
|
opacity: var(--label-connector-opacity, 0.65);
|
|
}
|
|
|
|
.glow-dot--label-above .glow-dot__connector {
|
|
top: auto;
|
|
bottom: calc(-1 * var(--label-connector-len, 14px));
|
|
}
|
|
|
|
.glow-dot__title {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 90px;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.glow-dot__date {
|
|
font-size: 9px;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
line-height: 1.2;
|
|
}
|
|
</style>
|