erudit 3.0.0-dev.17 → 3.0.0-dev.18

package/app/components/aside/major/panes/nav/Nav.vue

@@ -1,92 +1,92 @@
-<script lang="ts" setup>
-import type { FrontNav } from '@shared/frontNav';
-import { detectContentBookId } from '@shared/content/bookId';
-
-import {
-    getAsideMajorNavPayload,
-    insideNavBook,
-    navBookId,
-    navBookVisible,
-} from '@app/scripts/aside/major/nav';
-
-import NavGlobal from './NavGlobal.vue';
-import NavBook from './NavBook.vue';
-
-const contentRoute = useContentRoute();
-const asideMajorNav = getAsideMajorNavPayload();
-
-asideMajorNav.booksIds ||= (await $fetch('/api/aside/major/nav/bookIds', {
-    responseType: 'json',
-})) as string[];
-
-asideMajorNav.globalNav ||= (await $fetch('/api/aside/major/nav/global', {
-    responseType: 'json',
-})) as FrontNav;
-
-const checkIfInsideBook = () => {
-    if (contentRoute.value) {
-        const bookId = detectContentBookId(
-            contentRoute.value.contentId,
-            asideMajorNav.booksIds,
-        );
-
-        if (bookId) {
-            navBookId.value = bookId;
-            insideNavBook.value = true;
-            return;
-        }
-    }
-
-    // If we get here, we're not in any book
-    navBookId.value = undefined;
-    insideNavBook.value = false;
-};
-
-checkIfInsideBook();
-
-onMounted(() => {
-    watch(contentRoute, () => {
-        checkIfInsideBook();
-    });
-});
-</script>
-
-<template>
-    <div :class="[$style.navHolder, navBookVisible && $style.navBookVisible]">
-        <NavGlobal :class="$style.navGlobal" />
-        <NavBook :class="$style.navBook" />
-    </div>
-</template>
-
-<style lang="scss" module>
-.navHolder {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .navGlobal,
-    .navBook {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 1;
-        @include transition(left, opacity);
-    }
-
-    &.navBookVisible {
-        .navGlobal {
-            left: calc(-1 * var(--wAside));
-            opacity: 0;
-        }
-    }
-
-    &:not(.navBookVisible) {
-        .navBook {
-            left: calc(1 * var(--wAside));
-            opacity: 0;
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { FrontNav } from '@shared/frontNav';
+import { detectContentBookId } from '@shared/content/bookId';
+
+import {
+    getAsideMajorNavPayload,
+    insideNavBook,
+    navBookId,
+    navBookVisible,
+} from '@app/scripts/aside/major/nav';
+
+import NavGlobal from './NavGlobal.vue';
+import NavBook from './NavBook.vue';
+
+const contentRoute = useContentRoute();
+const asideMajorNav = getAsideMajorNavPayload();
+
+asideMajorNav.booksIds ||= (await $fetch('/api/aside/major/nav/bookIds', {
+    responseType: 'json',
+})) as string[];
+
+asideMajorNav.globalNav ||= (await $fetch('/api/aside/major/nav/global', {
+    responseType: 'json',
+})) as FrontNav;
+
+const checkIfInsideBook = () => {
+    if (contentRoute.value) {
+        const bookId = detectContentBookId(
+            contentRoute.value.contentId,
+            asideMajorNav.booksIds,
+        );
+
+        if (bookId) {
+            navBookId.value = bookId;
+            insideNavBook.value = true;
+            return;
+        }
+    }
+
+    // If we get here, we're not in any book
+    navBookId.value = undefined;
+    insideNavBook.value = false;
+};
+
+checkIfInsideBook();
+
+onMounted(() => {
+    watch(contentRoute, () => {
+        checkIfInsideBook();
+    });
+});
+</script>
+
+<template>
+    <div :class="[$style.navHolder, navBookVisible && $style.navBookVisible]">
+        <NavGlobal :class="$style.navGlobal" />
+        <NavBook :class="$style.navBook" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.navHolder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .navGlobal,
+    .navBook {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        @include transition(left, opacity);
+    }
+
+    &.navBookVisible {
+        .navGlobal {
+            left: calc(-1 * var(--wAside));
+            opacity: 0;
+        }
+    }
+
+    &:not(.navBookVisible) {
+        .navBook {
+            left: calc(1 * var(--wAside));
+            opacity: 0;
+        }
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/NavBook.vue

@@ -1,95 +1,95 @@
-<script lang="ts" setup>
-import type { FrontNavBook } from '@shared/frontNav';
-import { insideNavBook, navBookId } from '@app/scripts/aside/major/nav';
-
-import PaneContentScroll from '../../PaneContentScroll.vue';
-import FNav from './fnav/FNav.vue';
-import FNavFlags from './fnav/FNavFlags.vue';
-import NavBookLoading from './NavBookLoading.vue';
-
-const loading = ref(true);
-
-const nuxtApp = useNuxtApp();
-const contentRoute = useContentRoute();
-const book = shallowRef<FrontNavBook>();
-
-async function setupNavBook() {
-    loading.value = true;
-
-    if (!navBookId.value) return;
-
-    nuxtApp.runWithContext(() =>
-        prerenderRoutes(`/api/aside/major/nav/bookNav/${navBookId.value}`),
-    );
-    book.value = await $fetch(
-        `/api/aside/major/nav/bookNav/${navBookId.value}`,
-        { responseType: 'json' },
-    );
-
-    loading.value = false;
-}
-
-watch(navBookId, setupNavBook);
-await setupNavBook();
-const pharse = await usePhrases('to_index', 'about_book');
-</script>
-
-<template>
-    <div>
-        <PaneContentScroll v-if="book">
-            <section :class="$style.bookHeader">
-                <div :class="$style.title">{{ book.label }}</div>
-                <FNavFlags
-                    v-if="book.flags"
-                    :flags="book.flags"
-                    :class="$style.flags"
-                />
-            </section>
-            <FNav :nav="book.children!" :contentId="contentRoute?.contentId">
-                <template v-slot:before>
-                    <section :class="$style.bookActions">
-                        <TreeItem
-                            icon="arrow-left"
-                            :label="pharse.to_index"
-                            @click="insideNavBook = false"
-                        />
-                        <TreeItem
-                            icon="book-question"
-                            :label="pharse.about_book"
-                            :active="contentRoute?.contentId === book.id"
-                            :link="`/book/${book.id}`"
-                        />
-                    </section>
-                </template>
-            </FNav>
-        </PaneContentScroll>
-        <TransitionFade>
-            <NavBookLoading v-if="loading" />
-        </TransitionFade>
-    </div>
-</template>
-
-<style lang="scss" module>
-.bookHeader {
-    display: flex;
-    align-items: center;
-    padding: var(--gap);
-    border-bottom: 1px solid var(--border);
-
-    .title {
-        flex: 1;
-        font-weight: 600;
-        color: var(--text);
-    }
-
-    .flags {
-        flex-shrink: 0;
-    }
-}
-
-.bookActions {
-    border-bottom: 1px solid var(--border);
-    padding-bottom: calc(var(--gap) / 2);
-    margin-bottom: calc(var(--gap) / 2);
-}
-</style>
+<script lang="ts" setup>
+import type { FrontNavBook } from '@shared/frontNav';
+import { insideNavBook, navBookId } from '@app/scripts/aside/major/nav';
+
+import PaneContentScroll from '../../PaneContentScroll.vue';
+import FNav from './fnav/FNav.vue';
+import FNavFlags from './fnav/FNavFlags.vue';
+import NavBookLoading from './NavBookLoading.vue';
+
+const loading = ref(true);
+
+const nuxtApp = useNuxtApp();
+const contentRoute = useContentRoute();
+const book = shallowRef<FrontNavBook>();
+
+async function setupNavBook() {
+    loading.value = true;
+
+    if (!navBookId.value) return;
+
+    nuxtApp.runWithContext(() =>
+        prerenderRoutes(`/api/aside/major/nav/bookNav/${navBookId.value}`),
+    );
+    book.value = await $fetch(
+        `/api/aside/major/nav/bookNav/${navBookId.value}`,
+        { responseType: 'json' },
+    );
+
+    loading.value = false;
+}
+
+watch(navBookId, setupNavBook);
+await setupNavBook();
+const pharse = await usePhrases('to_index', 'about_book');
+</script>
+
+<template>
+    <div>
+        <PaneContentScroll v-if="book">
+            <section :class="$style.bookHeader">
+                <div :class="$style.title">{{ book.label }}</div>
+                <FNavFlags
+                    v-if="book.flags"
+                    :flags="book.flags"
+                    :class="$style.flags"
+                />
+            </section>
+            <FNav :nav="book.children!" :contentId="contentRoute?.contentId">
+                <template v-slot:before>
+                    <section :class="$style.bookActions">
+                        <TreeItem
+                            icon="arrow-left"
+                            :label="pharse.to_index"
+                            @click="insideNavBook = false"
+                        />
+                        <TreeItem
+                            icon="book-question"
+                            :label="pharse.about_book"
+                            :active="contentRoute?.contentId === book.id"
+                            :link="`/book/${book.id}`"
+                        />
+                    </section>
+                </template>
+            </FNav>
+        </PaneContentScroll>
+        <TransitionFade>
+            <NavBookLoading v-if="loading" />
+        </TransitionFade>
+    </div>
+</template>
+
+<style lang="scss" module>
+.bookHeader {
+    display: flex;
+    align-items: center;
+    padding: var(--gap);
+    border-bottom: 1px solid var(--border);
+
+    .title {
+        flex: 1;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .flags {
+        flex-shrink: 0;
+    }
+}
+
+.bookActions {
+    border-bottom: 1px solid var(--border);
+    padding-bottom: calc(var(--gap) / 2);
+    margin-bottom: calc(var(--gap) / 2);
+}
+</style>

package/app/components/aside/major/panes/nav/NavBookLoading.vue

@@ -1,24 +1,24 @@
-<template>
-    <div :class="$style.navBookLoading">
-        <Loading />
-    </div>
-</template>
-
-<style lang="scss" module>
-.navBookLoading {
-    position: absolute;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--bgAside);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 60px;
-
-    @include transition(opacity, box-shadow);
-}
-</style>
+<template>
+    <div :class="$style.navBookLoading">
+        <Loading />
+    </div>
+</template>
+
+<style lang="scss" module>
+.navBookLoading {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bgAside);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 60px;
+
+    @include transition(opacity, box-shadow);
+}
+</style>

package/app/components/aside/major/panes/nav/NavGlobal.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-import { getAsideMajorNavPayload } from '@app/scripts/aside/major/nav';
-
-import FNav from './fnav/FNav.vue';
-import PaneContentScroll from '../../PaneContentScroll.vue';
-
-const contentRoute = useContentRoute();
-const asideMajorNav = getAsideMajorNavPayload();
-const globalNav = asideMajorNav.globalNav;
-</script>
-
-<template>
-    <PaneContentScroll>
-        <FNav :nav="globalNav" :contentId="contentRoute?.contentId" />
-    </PaneContentScroll>
-</template>
+<script lang="ts" setup>
+import { getAsideMajorNavPayload } from '@app/scripts/aside/major/nav';
+
+import FNav from './fnav/FNav.vue';
+import PaneContentScroll from '../../PaneContentScroll.vue';
+
+const contentRoute = useContentRoute();
+const asideMajorNav = getAsideMajorNavPayload();
+const globalNav = asideMajorNav.globalNav;
+</script>
+
+<template>
+    <PaneContentScroll>
+        <FNav :nav="globalNav" :contentId="contentRoute?.contentId" />
+    </PaneContentScroll>
+</template>

package/app/components/aside/major/panes/nav/fnav/FNav.vue

@@ -1,105 +1,105 @@
-<script lang="ts" setup>
-import type {
-    FrontNav,
-    FrontNavContainer,
-    FrontNavItem,
-} from '@shared/frontNav';
-import { navStateKey, type NavState } from '@app/scripts/aside/major/nav';
-
-import FNavItem from './FNavItem.vue';
-
-const props = defineProps<{ nav: FrontNav; contentId?: string }>();
-const hashNav = shallowRef<Record<string, FrontNavItem>>();
-const navState = shallowRef<NavState>();
-
-function setupHashNav() {
-    hashNav.value = {};
-
-    if (!props.nav) return;
-
-    function addNavItem(navItem: FrontNavItem) {
-        hashNav.value![navItem.fullId] = navItem;
-        for (const child of (navItem as FrontNavContainer).children || [])
-            addNavItem(child);
-    }
-
-    for (const topNavItem of props.nav) addNavItem(topNavItem);
-}
-
-function setupNavState() {
-    // We create a ref for every nav item to check wheter it is active or not.
-    // Yes, it uses a lot of memory, but it is still better than messing with recursive tree recreations.
-
-    navState.value = {};
-
-    for (const navItem of Object.values(hashNav.value!))
-        navState.value[navItem.id] = shallowRef(null);
-}
-
-function updateNavState() {
-    // We watch current content route and update navigation state for each item.
-    // United watcher here instead of watcher on each navigation item instance.
-
-    if (!hashNav.value || !navState.value) return;
-
-    let currentFullId: string | undefined;
-
-    for (const navItem of Object.values(hashNav.value)) {
-        navState.value[navItem.id]!.value = null;
-        if (props.contentId?.startsWith(navItem.id))
-            currentFullId = navItem.fullId;
-    }
-
-    if (!currentFullId) return;
-
-    const idParts = currentFullId.split('/');
-    while (idParts.length) {
-        const _fullId = idParts.join('/');
-        const navItem = hashNav.value[_fullId];
-
-        if (navItem)
-            navState.value[navItem.id]!.value =
-                _fullId === currentFullId ? 'active' : 'activePart';
-
-        idParts.pop();
-    }
-}
-
-setupHashNav();
-setupNavState();
-updateNavState();
-
-watch(
-    () => props.nav,
-    () => {
-        setupHashNav();
-        setupNavState();
-        updateNavState();
-    },
-);
-
-watch(() => props.contentId, updateNavState);
-
-// @ts-ignore
-provide(navStateKey, navState);
-
-const phrase = await usePhrases('empty_nav');
-</script>
-
-<template>
-    <TreeContainer v-if="nav && nav.length > 0">
-        <slot name="before"></slot>
-        <FNavItem v-for="navItem of nav" :navItem />
-    </TreeContainer>
-    <div v-else :class="$style.emptyNav">
-        {{ phrase.empty_nav }}
-    </div>
-</template>
-
-<style lang="scss" module>
-.emptyNav {
-    padding: var(--gap);
-    color: var(--textMuted);
-    text-align: center;
-}
-</style>
+<script lang="ts" setup>
+import type {
+    FrontNav,
+    FrontNavContainer,
+    FrontNavItem,
+} from '@shared/frontNav';
+import { navStateKey, type NavState } from '@app/scripts/aside/major/nav';
+
+import FNavItem from './FNavItem.vue';
+
+const props = defineProps<{ nav: FrontNav; contentId?: string }>();
+const hashNav = shallowRef<Record<string, FrontNavItem>>();
+const navState = shallowRef<NavState>();
+
+function setupHashNav() {
+    hashNav.value = {};
+
+    if (!props.nav) return;
+
+    function addNavItem(navItem: FrontNavItem) {
+        hashNav.value![navItem.fullId] = navItem;
+        for (const child of (navItem as FrontNavContainer).children || [])
+            addNavItem(child);
+    }
+
+    for (const topNavItem of props.nav) addNavItem(topNavItem);
+}
+
+function setupNavState() {
+    // We create a ref for every nav item to check wheter it is active or not.
+    // Yes, it uses a lot of memory, but it is still better than messing with recursive tree recreations.
+
+    navState.value = {};
+
+    for (const navItem of Object.values(hashNav.value!))
+        navState.value[navItem.id] = shallowRef(null);
+}
+
+function updateNavState() {
+    // We watch current content route and update navigation state for each item.
+    // United watcher here instead of watcher on each navigation item instance.
+
+    if (!hashNav.value || !navState.value) return;
+
+    let currentFullId: string | undefined;
+
+    for (const navItem of Object.values(hashNav.value)) {
+        navState.value[navItem.id]!.value = null;
+        if (props.contentId?.startsWith(navItem.id))
+            currentFullId = navItem.fullId;
+    }
+
+    if (!currentFullId) return;
+
+    const idParts = currentFullId.split('/');
+    while (idParts.length) {
+        const _fullId = idParts.join('/');
+        const navItem = hashNav.value[_fullId];
+
+        if (navItem)
+            navState.value[navItem.id]!.value =
+                _fullId === currentFullId ? 'active' : 'activePart';
+
+        idParts.pop();
+    }
+}
+
+setupHashNav();
+setupNavState();
+updateNavState();
+
+watch(
+    () => props.nav,
+    () => {
+        setupHashNav();
+        setupNavState();
+        updateNavState();
+    },
+);
+
+watch(() => props.contentId, updateNavState);
+
+// @ts-ignore
+provide(navStateKey, navState);
+
+const phrase = await usePhrases('empty_nav');
+</script>
+
+<template>
+    <TreeContainer v-if="nav && nav.length > 0">
+        <slot name="before"></slot>
+        <FNavItem v-for="navItem of nav" :navItem />
+    </TreeContainer>
+    <div v-else :class="$style.emptyNav">
+        {{ phrase.empty_nav }}
+    </div>
+</template>
+
+<style lang="scss" module>
+.emptyNav {
+    padding: var(--gap);
+    color: var(--textMuted);
+    text-align: center;
+}
+</style>