@bagelink/vue 0.0.1218 → 0.0.1220

package/src/components/Calendar/components/week/DayEvent.vue

@@ -0,0 +1,585 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { ConfigInterface } from '../../typings/config.interface'
+import type { EventInterface } from '../../typings/interfaces/event.interface'
+import type { DayInfo, modeType } from '../../typings/types'
+import { Icon } from '@bagelink/vue'
+
+import { ref, computed, onMounted, watch } from 'vue'
+import { EVENT_COLORS } from '../../constants'
+import { EventChange } from '../../helpers/EventChange'
+import Helpers from '../../helpers/Helpers'
+import { DRAG_N_RESIZE_DIRECTION } from '../../typings/types'
+
+const props = defineProps({
+	eventProp: {
+		type: Object as PropType<EventInterface>,
+		required: true,
+	},
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	config: {
+		type: Object as PropType<ConfigInterface>,
+		required: true,
+	},
+	dayInfo: {
+		type: Object as PropType<DayInfo>,
+		required: true,
+	},
+	mode: {
+		type: String as PropType<modeType>,
+		required: true,
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'eventWasClicked', data: { clickedEvent: EventInterface, eventElement: HTMLElement }): void
+	(e: 'eventWasResized', event: EventInterface): void
+	(e: 'eventWasDragged', event: EventInterface): void
+	(e: 'dragStart'): void
+	(e: 'dragEnd'): void
+}>()
+
+const event = ref(props.eventProp)
+const icons = ref({
+	clock: 'clock',
+	user: 'user',
+	description: 'description',
+	location: 'location_on',
+	topic: 'topic',
+})
+
+const showResizeElements = ref(false)
+const eventTransformValue = ref('initial')
+const eventZIndexValue = ref<'initial' | number>('initial')
+const dayElement = ref<Element | null>(null)
+
+// Resizing events
+const resizingStartingPoint = ref<undefined | number>(undefined)
+const resizingStartingPointEndOfTime = ref(props.eventProp.time.end)
+const resizingStartingPointStartOfTime = ref(props.eventProp.time.start)
+const resizingDirection = ref('')
+const changeInQuarterHoursEventStart = ref(0)
+const changeInQuarterHoursEventEnd = ref(0)
+const isEditable = ref(props.eventProp.isEditable || false)
+const colors = ref(EVENT_COLORS as { [key: string]: string })
+const eventColor = ref('#fff')
+const eventBackgroundColor = ref('')
+const isResizing = ref(false)
+
+// Dragging events
+const canDrag = ref(false)
+const clientYDragStart = ref<null | number>(null)
+const clientXDragStart = ref<null | number>(null)
+const changeInQuartersOnDrag = ref(0)
+const changeInDaysOnDrag = ref(0)
+const isDragging = ref(false)
+const timeStartDragStart = ref(props.eventProp.time.start)
+const timeEndDragStart = ref(props.eventProp.time.end)
+
+const dragMoveListenerNameAndCallbacks = [
+	['mousemove', handleDrag],
+	['touchmove', handleDrag],
+	['mouseup', onMouseUpWhenDragging],
+	['touchend', onMouseUpWhenDragging],
+] as const
+
+const eventChangeHelper = computed(() => {
+	const eventCurrentDay = props.time.addDaysToDateTimeString(changeInDaysOnDrag.value, props.dayInfo.dateTimeString)
+	return new EventChange(props.time, props.time.dateStringFrom(eventCurrentDay))
+})
+
+const isCustomEvent = computed(() => {
+	if (Array.isArray(props.eventProp.isCustom)) {
+		return props.eventProp.isCustom.includes(props.mode)
+	}
+	return props.eventProp.isCustom || false
+})
+
+const getEventTime = computed(() => {
+	return `${props.time.getLocalizedTime(event.value.time.start)} - ${props.time.getLocalizedTime(event.value.time.end)}`
+})
+
+const timePointsInDay = computed(() => props.time.HOURS_PER_DAY * 100)
+const timePointsInOneMinute = computed(() => 100 / 60)
+
+const getLeftRule = computed(() => {
+	if (!event.value.totalConcurrentEvents || !event.value.nOfPreviousConcurrentEvents) {
+		return 0
+	}
+	return (event.value.nOfPreviousConcurrentEvents / event.value.totalConcurrentEvents) * 100
+})
+
+const getWidthRule = computed(() => 100 - getLeftRule.value)
+const getBorderRule = computed(() => !event.value.nOfPreviousConcurrentEvents ? 'none' : '1px solid #fff')
+
+const eventIsLongerThan30Minutes = computed(() => {
+	const { hour: startHour, minutes: startMinutes } = props.time.getAllVariablesFromDateTimeString(event.value.time.start)
+	const { hour: endHour, minutes: endMinutes } = props.time.getAllVariablesFromDateTimeString(event.value.time.end)
+	const startDateMS = new Date(0, 0, 0, startHour, startMinutes).getTime()
+	const endDateMS = new Date(0, 0, 0, endHour, endMinutes).getTime()
+	return endDateMS - startDateMS >= 1800000
+})
+
+const hasDisabledDragAndDrop = computed(() => {
+	return !!(props.eventProp.disableDnD && props.eventProp.disableDnD.includes(props.mode))
+})
+
+const hasDisabledResize = computed(() => {
+	return !!(props.eventProp.disableResize && props.eventProp.disableResize.includes(props.mode))
+})
+
+const requiredStyles = computed(() => ({
+	top: getPositionInDay(event.value.time.start),
+	height: getLengthOfEvent(event.value.time.start, event.value.time.end),
+	left: `${getLeftRule.value}%`,
+	width: `${getWidthRule.value}%`,
+	transform: eventTransformValue.value,
+	zIndex: eventZIndexValue.value,
+}))
+
+// Methods
+function getPositionInDay(dateTimeString: string) {
+	return `${props.time.getPercentageOfDayFromDateTimeString(dateTimeString, props.time.DAY_START, props.time.DAY_END).toString()}%`
+}
+
+function getLengthOfEvent(start: string, end: string) {
+	const startOfEvent = props.time.getPercentageOfDayFromDateTimeString(start, props.time.DAY_START, props.time.DAY_END)
+	const endOfEvent = props.time.getPercentageOfDayFromDateTimeString(end, props.time.DAY_START, props.time.DAY_END)
+	const length = Math.abs(endOfEvent - startOfEvent)
+	return `${length}%`
+}
+
+function handleClickOnEvent(event: any) {
+	const eventElement = getEventElementFromChildElement(event)
+	if (!eventElement) return
+	emit('eventWasClicked', {
+		clickedEvent: props.eventProp,
+		eventElement,
+	})
+}
+
+function getEventElementFromChildElement(event: any) {
+	const eventTarget = event.target
+	if (!eventTarget || typeof eventTarget.className.includes !== 'function') return null
+	if (eventTarget.className.includes('.calendar-week__event')) return event.target
+	return eventTarget.closest('.calendar-week__event')
+}
+
+function onMouseMoveResize(event: MouseEvent) {
+	const eventsContainer = document.querySelector('.calendar-week__events')
+	if (!eventsContainer) return
+
+	if (typeof resizingStartingPoint.value === 'undefined') {
+		resizingStartingPoint.value = event.clientY
+	}
+
+	const cursorPositionY = event.clientY
+	const nOfPixelsDistance = cursorPositionY - resizingStartingPoint.value
+	const eventsContainerHeight = eventsContainer.clientHeight
+	const percentageOfDayChanged = (nOfPixelsDistance / eventsContainerHeight) * 100
+	const changeInTimePoints = (timePointsInDay.value / 100) * percentageOfDayChanged
+	const changeInMinutes = getMinutesFromTimePoints(changeInTimePoints)
+
+	if (resizingDirection.value === 'down') {
+		changeInQuarterHoursEventEnd.value = Math.floor(changeInMinutes / 15)
+	} else {
+		changeInQuarterHoursEventStart.value = Math.floor(changeInMinutes / 15)
+	}
+}
+
+function onMouseUpWhenResizing() {
+	stopResizing()
+}
+
+function resizeEvent(direction: 'down' | 'up') {
+	isResizing.value = true
+	resizingDirection.value = direction
+	document.addEventListener('mousemove', onMouseMoveResize)
+	document.addEventListener('mouseup', onMouseUpWhenResizing)
+}
+
+function stopResizing() {
+	document.removeEventListener('mousemove', onMouseMoveResize)
+	document.removeEventListener('mouseup', onMouseUpWhenResizing)
+	resetResizingValues()
+	emit('eventWasResized', event.value)
+	isResizing.value = false
+}
+
+function resetResizingValues() {
+	resizingStartingPoint.value = undefined
+	resizingStartingPointStartOfTime.value = props.eventProp.time.start
+	resizingStartingPointEndOfTime.value = props.eventProp.time.end
+	changeInQuarterHoursEventEnd.value = 0
+}
+
+function getMinutesFromTimePoints(timePoints: number) {
+	return timePoints / timePointsInOneMinute.value
+}
+
+function setColors() {
+	if (
+		event.value.colorScheme
+		&& props.config.style?.colorSchemes
+		&& props.config.style.colorSchemes[event.value.colorScheme]
+	) {
+		eventColor.value = props.config.style.colorSchemes[event.value.colorScheme].color
+		eventBackgroundColor.value = props.config.style.colorSchemes[event.value.colorScheme].backgroundColor
+		return
+	}
+
+	if (event.value.color) {
+		eventColor.value = '#fff'
+		eventBackgroundColor.value = colors.value[event.value.color]
+		return
+	}
+
+	eventBackgroundColor.value = colors.value.blue
+}
+
+function initDrag(domEvent: UIEvent) {
+	if (!event.value.isEditable || hasDisabledDragAndDrop.value) return
+
+	emit('dragStart')
+
+	dragMoveListenerNameAndCallbacks.forEach(([name, callback]) => {
+		document.addEventListener(name, callback)
+	})
+
+	if (Helpers.isUIEventTouchEvent(domEvent)) {
+		setInitialDragValues(
+			(domEvent as TouchEvent).touches[0].clientX,
+			(domEvent as TouchEvent).touches[0].clientY
+		)
+	} else {
+		setInitialDragValues((domEvent as MouseEvent).clientX, (domEvent as MouseEvent).clientY)
+	}
+}
+
+function setInitialDragValues(clientX: number, clientY: number) {
+	canDrag.value = true
+	eventZIndexValue.value = 10
+	clientYDragStart.value = clientY
+	clientXDragStart.value = clientX
+	timeStartDragStart.value = event.value.time.start
+	timeEndDragStart.value = event.value.time.end
+}
+
+function onMouseUpWhenDragging() {
+	emit('dragEnd')
+	handleDragEnd()
+}
+
+function handleDragEnd() {
+	canDrag.value = false
+	eventZIndexValue.value = 'initial'
+	dragMoveListenerNameAndCallbacks.forEach(([name, callback]) => {
+		document.removeEventListener(name, callback)
+	})
+	const dayChanged = changeInDaysOnDrag.value <= -1 || changeInDaysOnDrag.value > 0
+	const timeChanged = changeInQuartersOnDrag.value <= -1 || changeInQuartersOnDrag.value > 0
+	if (dayChanged || timeChanged) emit('eventWasDragged', event.value)
+}
+
+function handleDrag(mouseEvent: UIEvent) {
+	if (isResizing.value || !canDrag.value || !clientYDragStart.value) return
+
+	if (Helpers.isUIEventTouchEvent(mouseEvent)) {
+		handleVerticalDrag((mouseEvent as TouchEvent).touches[0].clientY)
+		handleHorizontalDrag((mouseEvent as TouchEvent).touches[0].clientX)
+	} else {
+		handleVerticalDrag((mouseEvent as MouseEvent).clientY)
+		handleHorizontalDrag((mouseEvent as MouseEvent).clientX)
+	}
+}
+
+function handleVerticalDrag(clientY: number) {
+	const eventsContainer = document.querySelector('.calendar-week__events')
+	if (!eventsContainer || !clientYDragStart.value) return
+
+	const nOfPixelsDistance = clientY - clientYDragStart.value
+	const eventsContainerHeight = eventsContainer.clientHeight
+	const percentageOfDayChanged = (nOfPixelsDistance / eventsContainerHeight) * 100
+	const changeInTimePoints = (timePointsInDay.value / 100) * percentageOfDayChanged
+	const changeInMinutes = getMinutesFromTimePoints(changeInTimePoints)
+	changeInQuartersOnDrag.value = changeInMinutes < 0
+		? Math.ceil(changeInMinutes / 15)
+		: Math.floor(changeInMinutes / 15)
+}
+
+function handleHorizontalDrag(clientX: number) {
+	if (!dayElement.value || !clientXDragStart.value) return
+
+	const dayWidth = dayElement.value.clientWidth
+	const changeInPixelsX = clientX - clientXDragStart.value
+	changeInDaysOnDrag.value = changeInPixelsX < 0
+		? Math.ceil(changeInPixelsX / dayWidth)
+		: Math.floor(changeInPixelsX / dayWidth)
+}
+
+function updatePositionOnDrag() {
+	const minutesChangedVertically = changeInQuartersOnDrag.value * 15
+	const minutesChangedHorizontally = changeInDaysOnDrag.value * 1440
+
+	event.value.time.start = props.time.addMinutesToDateTimeString(
+		minutesChangedVertically + minutesChangedHorizontally,
+		timeStartDragStart.value
+	)
+
+	event.value.time.end = props.time.addMinutesToDateTimeString(
+		minutesChangedVertically + minutesChangedHorizontally,
+		timeEndDragStart.value
+	)
+}
+
+// Watch effects
+watch(changeInQuarterHoursEventStart, (newValue: number, oldValue: number) => {
+	const newStartOfTimeDateTimeString = props.time.addMinutesToDateTimeString(
+		15 * newValue,
+		resizingStartingPointStartOfTime.value
+	)
+	const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS
+	const eventCanBeResizedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction)
+
+	if (newStartOfTimeDateTimeString < event.value.time.end && eventCanBeResizedFurther) {
+		event.value.time.start = newStartOfTimeDateTimeString
+	}
+})
+
+watch(changeInQuarterHoursEventEnd, (newValue: number, oldValue: number) => {
+	const newEndOfTimeDateTimeString = props.time.addMinutesToDateTimeString(
+		15 * newValue,
+		resizingStartingPointEndOfTime.value
+	)
+	const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS
+	const eventCanBeResizedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction)
+
+	if (newEndOfTimeDateTimeString > event.value.time.start && eventCanBeResizedFurther) {
+		event.value.time.end = newEndOfTimeDateTimeString
+	}
+})
+
+watch(changeInQuartersOnDrag, (newValue: number, oldValue: number) => {
+	const direction = newValue > oldValue ? DRAG_N_RESIZE_DIRECTION.FORWARDS : DRAG_N_RESIZE_DIRECTION.BACKWARDS
+	const eventCanBeDraggedFurther = eventChangeHelper.value.canEventBeMoved(event.value, direction)
+	if (!eventCanBeDraggedFurther) return
+	updatePositionOnDrag()
+})
+
+watch(changeInDaysOnDrag, (newValue: number) => {
+	if (!dayElement.value) return
+	const upcomingDaysInWeek = props.dayInfo.daysTotalN - (props.dayInfo.thisDayIndex + 1)
+	const previousDaysInWeek = 0 - props.dayInfo.thisDayIndex
+	if (newValue > upcomingDaysInWeek || newValue < previousDaysInWeek) return
+
+	const pixelsToTransform = newValue * dayElement.value.clientWidth
+	eventTransformValue.value = `translateX(${pixelsToTransform}px)`
+	updatePositionOnDrag()
+})
+
+onMounted(() => {
+	dayElement.value = document.querySelector('.calendar-week__day')
+	setColors()
+})
+
+// Accessibility handlers
+function handleFocus() {
+	if (isEditable.value && !hasDisabledResize.value) {
+		showResizeElements.value = true
+	}
+}
+
+function handleBlur() {
+	showResizeElements.value = false
+}
+</script>
+
+<template>
+	<div
+		class="calendar-week__event is-event"
+		:class="{
+			'is-editable': isEditable,
+			'has-disabled-dnd': hasDisabledDragAndDrop,
+		}"
+		:style="{
+			...requiredStyles,
+			border: getBorderRule,
+		}"
+		:data-ref="`event-${event.id}`"
+		tabindex="0"
+		@click="handleClickOnEvent"
+		@mouseenter="handleFocus"
+		@mouseleave="handleBlur"
+		@focus="handleFocus"
+		@blur="handleBlur"
+		@mousedown="initDrag"
+		@touchstart="initDrag"
+	>
+		<div
+			v-if="!isCustomEvent"
+			class="calendar-week__event-info-wrapper p-05"
+			:style="{
+				color: eventColor,
+				width: '100%',
+				height: '100%',
+				backgroundColor: eventBackgroundColor,
+			}"
+		>
+			<div class="calendar-week__event-row is-title">
+				{{ event.title }}
+			</div>
+
+			<div class="calendar-week__event-row is-time">
+				<Icon
+					:icon="icons.clock"
+					class="calendar-week__event-icon"
+				/>
+				<span>{{ getEventTime }}</span>
+			</div>
+
+			<div
+				v-if="event.location"
+				class="calendar-week__event-row is-location"
+			>
+				<Icon
+					:icon="icons.location"
+					class="calendar-week__event-icon"
+				/>
+				<span>{{ event.location }}</span>
+			</div>
+
+			<div
+				v-if="event.with"
+				class="calendar-week__event-row is-with"
+			>
+				<Icon
+					:icon="icons.user"
+					class="calendar-week__event-icon"
+				/>
+				<span>{{ event.with }}</span>
+			</div>
+
+			<div
+				v-if="event.topic"
+				class="calendar-week__event-row is-topic"
+			>
+				<Icon
+					:icon="icons.topic"
+					class="calendar-week__event-icon"
+				/>
+				<span>{{ event.topic }}</span>
+			</div>
+
+			<div
+				v-if="event.description"
+				class="calendar-week__event-row is-description"
+			>
+				<Icon
+					:icon="icons.description"
+					class="calendar-week__event-icon"
+				/>
+				<!-- eslint-disable vue/no-v-html -->
+				<p v-html="event.description" />
+				<!-- eslint-enable -->
+			</div>
+
+			<div
+				v-if="eventIsLongerThan30Minutes"
+				class="calendar-week__event-blend-out"
+				:style="{
+					backgroundImage: `linear-gradient(to bottom, transparent, ${eventBackgroundColor})`,
+				}"
+			/>
+		</div>
+
+		<slot
+			v-else
+			name="weekDayEvent"
+			:event-data="event"
+		/>
+
+		<div
+			v-if="showResizeElements"
+			class="calendar-week__event-resize calendar-week__event-resize-up"
+			@mousedown="resizeEvent('up')"
+		/>
+
+		<div
+			v-if="showResizeElements"
+			class="calendar-week__event-resize calendar-week__event-resize-down"
+			@mousedown="resizeEvent('down')"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.calendar-week__event {
+	position: absolute;
+	width: 100%;
+	border-radius: 4px;
+	cursor: pointer;
+	box-sizing: content-box;
+	user-select: none;
+	overflow: hidden;
+}
+
+.calendar-week__event.is-editable {
+	cursor: grab;
+}
+
+.calendar-week__event.has-disabled-dnd {
+	cursor: initial;
+}
+
+.calendar-week__event .calendar-week__event-row {
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 0.25em;
+}
+
+.calendar-week__event .calendar-week__event-row p {
+	margin: 0;
+	padding: 0;
+}
+
+.calendar-week__event .calendar-week__event-info-wrapper {
+	position: relative;
+	padding: var(--qalendar-spacing-half);
+	font-size: var(--qalendar-font-xs);
+	height: 100%;
+	box-sizing: border-box;
+	user-select: none;
+}
+
+.calendar-week__event .calendar-week__event-blend-out {
+	position: absolute;
+	bottom: 0;
+	height: 20px;
+	width: 100%;
+	transform: translateX(calc(var(--qalendar-spacing-half) * -1));
+}
+
+.calendar-week__event .calendar-week__event-icon {
+	margin: 2px 4px 0 0;
+	font-size: var(--qalendar-font-xs);
+}
+
+.calendar-week__event .calendar-week__event-resize {
+	position: absolute;
+	width: 100%;
+	cursor: ns-resize;
+	height: 5px;
+}
+
+.calendar-week__event .calendar-week__event-resize-up {
+	top: 0;
+}
+
+.calendar-week__event .calendar-week__event-resize-down {
+	bottom: 0;
+}
+</style>

package/src/components/Calendar/components/week/DayTimeline.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type Time from '../../helpers/Time'
+import type { DAY_TIME_POINT } from '../../typings/config.interface'
+import { ref, onMounted } from 'vue'
+
+const props = defineProps({
+	time: {
+		type: Object as PropType<Time>,
+		required: true,
+	},
+	weekHeight: {
+		type: String,
+		required: true,
+	},
+})
+
+// const availableHours = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300] as DAY_TIME_POINT[]
+const timelineHours = ref<DAY_TIME_POINT[]>([])
+
+onMounted(() => {
+	timelineHours.value = props.time.getTimelineHours()
+})
+
+function getLocaleTimeString(time: DAY_TIME_POINT): string {
+	const { hour } = props.time.getHourAndMinutesFromTimePoints(time)
+	return props.time.getLocalizedHour(new Date(2100, 1, 1, hour))
+}
+</script>
+
+<template>
+	<div class="day-timeline">
+		<div
+			v-for="hour in timelineHours"
+			:key="hour"
+			class="day-timeline__hour"
+		>
+			<span class="day-timeline__hour-text">
+				{{ getLocaleTimeString(hour) }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.day-timeline {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: calc(100% + 10px);
+	height: v-bind(weekHeight);
+	transform: translateX(-10px);
+	display: flex;
+	flex-flow: column;
+	justify-content: space-evenly;
+}
+
+.day-timeline__hour {
+	padding-left: 4px;
+	display: flex;
+	flex-flow: column;
+	justify-content: flex-start;
+	height: 100%;
+	font-size: clamp(10px, 0.625rem, 14px);
+	color: var(--qalendar-gray-quite-dark);
+}
+
+.day-timeline__hour-text {
+	line-height: 0;
+	transform: translate(-40px, 0);
+}
+
+.day-timeline__hour:first-child .day-timeline__hour-text {
+	display: none;
+}
+
+.day-timeline__hour:not(:last-child) {
+	border-bottom: var(--qalendar-border-gray-thin);
+}
+
+@media (prefers-color-scheme: dark) {
+	.day-timeline__hour:not(:last-child) {
+		border-color: var(--qalendar-dark-mode-line-color);
+	}
+}
+</style>