|
| 1 | +<script setup lang="ts"> |
| 2 | +import { nextTick, onMounted, reactive, ref } from 'vue' |
| 3 | +import { themeVars } from '../env' |
| 4 | +import { rawRoutes } from '../logic/nav' |
| 5 | +import { useFixedClicks } from '../composables/useClicks' |
| 6 | +import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark' |
| 7 | +import { getSlideClass } from '../utils' |
| 8 | +import SlideContainer from '../internals/SlideContainer.vue' |
| 9 | +import SlideWrapper from '../internals/SlideWrapper' |
| 10 | +import DrawingPreview from '../internals/DrawingPreview.vue' |
| 11 | +import NoteDisplay from '../internals/NoteDisplay.vue' |
| 12 | +import IconButton from '../internals/IconButton.vue' |
| 13 | +
|
| 14 | +const cardWidth = 450 |
| 15 | +
|
| 16 | +const blocks: Map<number, HTMLElement> = reactive(new Map()) |
| 17 | +const activeBlocks = ref<number[]>([]) |
| 18 | +
|
| 19 | +function isElementInViewport(el: HTMLElement) { |
| 20 | + const rect = el.getBoundingClientRect() |
| 21 | + const delta = 20 |
| 22 | + return ( |
| 23 | + rect.top >= 0 - delta |
| 24 | + && rect.left >= 0 - delta |
| 25 | + && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + delta |
| 26 | + && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + delta |
| 27 | + ) |
| 28 | +} |
| 29 | +
|
| 30 | +function checkActiveBlocks() { |
| 31 | + const active: number[] = [] |
| 32 | + Array.from(blocks.entries()) |
| 33 | + .forEach(([idx, el]) => { |
| 34 | + if (isElementInViewport(el)) |
| 35 | + active.push(idx) |
| 36 | + }) |
| 37 | + activeBlocks.value = active |
| 38 | +} |
| 39 | +
|
| 40 | +function openSlideInNewTab(path: string) { |
| 41 | + const a = document.createElement('a') |
| 42 | + a.target = '_blank' |
| 43 | + a.href = path |
| 44 | + a.click() |
| 45 | +} |
| 46 | +
|
| 47 | +function scrollToSlide(idx: number) { |
| 48 | + const el = blocks.get(idx) |
| 49 | + if (el) |
| 50 | + el.scrollIntoView({ behavior: 'smooth', block: 'start' }) |
| 51 | +} |
| 52 | +
|
| 53 | +onMounted(() => { |
| 54 | + nextTick(() => { |
| 55 | + checkActiveBlocks() |
| 56 | + }) |
| 57 | +}) |
| 58 | +</script> |
| 59 | + |
| 60 | +<template> |
| 61 | + <div class="h-screen w-screen of-hidden flex"> |
| 62 | + <nav class="h-full flex flex-col border-r border-main p2"> |
| 63 | + <div class="of-auto flex flex-col flex-auto items-center"> |
| 64 | + <button |
| 65 | + v-for="(route, idx) of rawRoutes" |
| 66 | + :key="route.path" |
| 67 | + class="relative transition duration-300 w-8 h-8 rounded hover:bg-gray:10 hover:op100" |
| 68 | + :class="[ |
| 69 | + activeBlocks.includes(idx) ? 'op100 text-primary' : 'op20', |
| 70 | + ]" |
| 71 | + @click="scrollToSlide(idx)" |
| 72 | + > |
| 73 | + <div>{{ idx + 1 }}</div> |
| 74 | + </button> |
| 75 | + </div> |
| 76 | + <IconButton |
| 77 | + v-if="!isColorSchemaConfigured" |
| 78 | + :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'" |
| 79 | + @click="toggleDark()" |
| 80 | + > |
| 81 | + <carbon-moon v-if="isDark" /> |
| 82 | + <carbon-sun v-else /> |
| 83 | + </IconButton> |
| 84 | + </nav> |
| 85 | + <main |
| 86 | + class="flex-1 h-full of-auto" |
| 87 | + :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`" |
| 88 | + @scroll="checkActiveBlocks" |
| 89 | + > |
| 90 | + <div class="px4 py2 text-orange bg-orange:5"> |
| 91 | + <span font-bold>List Overview</span> is in beta, feedback is welcome! |
| 92 | + </div> |
| 93 | + <div |
| 94 | + v-for="(route, idx) of rawRoutes" |
| 95 | + :key="route.path" |
| 96 | + :ref="el => blocks.set(idx, el)" |
| 97 | + class="relative border-t border-main of-hidden flex gap-4 min-h-50" |
| 98 | + > |
| 99 | + <div class="select-none text-3xl op25 my4 w-13 text-right"> |
| 100 | + {{ idx + 1 }} |
| 101 | + </div> |
| 102 | + <div |
| 103 | + class="border rounded border-main overflow-hidden bg-main my5" |
| 104 | + :style="themeVars" |
| 105 | + @dblclick="openSlideInNewTab(route.path)" |
| 106 | + > |
| 107 | + <SlideContainer |
| 108 | + :key="route.path" |
| 109 | + :width="cardWidth" |
| 110 | + :clicks-disabled="true" |
| 111 | + class="pointer-events-none" |
| 112 | + > |
| 113 | + <SlideWrapper |
| 114 | + :is="route.component" |
| 115 | + v-if="route?.component" |
| 116 | + :clicks-context="useFixedClicks(route, 99999)[1]" |
| 117 | + :class="getSlideClass(route)" |
| 118 | + :route="route" |
| 119 | + render-context="overview" |
| 120 | + /> |
| 121 | + <DrawingPreview :page="+route.path" /> |
| 122 | + </SlideContainer> |
| 123 | + </div> |
| 124 | + <NoteDisplay |
| 125 | + :note="route.meta?.slide?.note" |
| 126 | + :note-html="route.meta?.slide?.noteHTML" |
| 127 | + /> |
| 128 | + </div> |
| 129 | + </main> |
| 130 | + </div> |
| 131 | +</template> |
0 commit comments