erudit 3.0.0-dev.2 → 3.0.0-dev.20

package/app/components/aside/minor/topic/TopicToc.vue

@@ -1,203 +1,213 @@
-<script lang="ts" setup>
-import { headingName } from '@erudit-js/bitran-elements/heading/shared';
-
-import { stringifyBitranLocation } from '@shared/bitran/location';
-import type { TocItem } from '@erudit/shared/bitran/toc';
-import { topicLocation } from '@app/scripts/aside/minor/topic';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-import type { AsideMinorTopic } from '@shared/aside/minor';
-
-import TopicTocItem from './TopicTocItem.vue';
-
-interface RuntimeTocItem extends TocItem {
-    /**
-     * * `0` — Not active
-     * * `1` — Active for `window` events
-     * * `2` — Active for Intersection Observer and currently in viewport
-     */
-    _active: 0 | 1 | 2;
-    _position: number;
-}
-
-type RuntimeToc = RuntimeTocItem[];
-
-const topicData = injectAsideData<AsideMinorTopic>();
-const phrase = await usePhrases('empty_toc');
-const runtimeToc = ref<RuntimeToc>();
-const tocStateKey = ref(0);
-
-watch(topicData, setupRuntimeToc);
-setupRuntimeToc();
-
-function setupRuntimeToc() {
-    const _newToc: RuntimeToc = [];
-
-    for (let i = 0; i < topicData.value.toc.length; i++) {
-        _newToc.push({
-            ...topicData.value.toc[i]!,
-            _active: 0,
-            _position: i,
-        });
-    }
-
-    tocStateKey.value++;
-    runtimeToc.value = _newToc;
-}
-
-//
-// Live TOC
-//
-
-let observer: IntersectionObserver;
-let id2TocItemIndex: Record<string, number> = {};
-
-const windowEvents = ['DOMContentLoaded', 'load', 'resize', 'scroll'];
-let headings: RuntimeTocItem[];
-let closestAboveHeading: RuntimeTocItem;
-
-function disableLiveToc() {
-    // Live TOC heading with `window` events
-
-    for (const event of windowEvents)
-        window.removeEventListener(event, updateActiveTopHeading);
-
-    headings = closestAboveHeading = null;
-
-    // Live TOC with Intersection Observer
-
-    id2TocItemIndex = null;
-
-    observer?.disconnect();
-    observer = null;
-
-    //
-
-    if (runtimeToc.value?.length) {
-        for (const tocItem of runtimeToc.value) tocItem._active = 0;
-    }
-}
-
-function enableLiveToc() {
-    if (!runtimeToc.value?.length) return;
-
-    // Live TOC heading with `window` events
-
-    headings = runtimeToc.value.filter(
-        (item) => item.productName === headingName,
-    );
-
-    for (const event of windowEvents)
-        window.addEventListener(event, updateActiveTopHeading);
-
-    updateActiveTopHeading();
-
-    // Live TOC with Intersection Observer
-
-    observer = new IntersectionObserver(intersectionTrigger);
-    id2TocItemIndex = {};
-
-    for (const tocItem of runtimeToc.value) {
-        const id = tocItem.id;
-        id2TocItemIndex[id] = tocItem._position;
-        observer.observe(document.getElementById(id));
-    }
-}
-
-function updateActiveTopHeading() {
-    function getBottom(id: string) {
-        const defaultBottom = 1;
-        const element = document.getElementById(id);
-        return element ? element.getBoundingClientRect().bottom : defaultBottom;
-    }
-
-    if (closestAboveHeading) {
-        closestAboveHeading._active = closestAboveHeading._active === 2 ? 2 : 0;
-        closestAboveHeading = null;
-    }
-
-    if (runtimeToc.value?.length) {
-        let topIndex = 0;
-        let bottomIndex = headings.length;
-        let targetIndex = 0;
-
-        while (topIndex < bottomIndex) {
-            const middleIndex = ((topIndex + bottomIndex) / 2) | 0;
-            const middleHeading = headings[middleIndex];
-            const middleHeadingTop = getBottom(middleHeading.id);
-
-            if (middleHeadingTop <= 0) {
-                targetIndex = middleIndex;
-                topIndex = middleIndex + 1;
-            } else {
-                bottomIndex = middleIndex;
-            }
-        }
-
-        closestAboveHeading = headings[targetIndex];
-        if (closestAboveHeading && closestAboveHeading._active < 2)
-            closestAboveHeading._active =
-                getBottom(closestAboveHeading.id) <= 0 ? 1 : 0;
-    }
-}
-
-function intersectionTrigger(entries: IntersectionObserverEntry[]) {
-    for (const entry of entries) {
-        const tocItem = runtimeToc.value[id2TocItemIndex[entry.target.id]];
-        tocItem._active = entry.isIntersecting
-            ? 2
-            : tocItem._active === 1
-              ? 1
-              : 0;
-    }
-}
-
-onMounted(() => {
-    watch(
-        [topicData, topicLocation],
-        () => {
-            disableLiveToc();
-
-            if (!topicData.value.location || !topicLocation.value) return;
-
-            if (
-                stringifyBitranLocation(topicData.value.location) ===
-                stringifyBitranLocation(topicLocation.value)
-            )
-                enableLiveToc();
-        },
-        { immediate: true },
-    );
-});
-
-onUnmounted(() => {
-    disableLiveToc();
-});
-</script>
-
-<template>
-    <section :class="$style.topicToc">
-        <TreeContainer v-if="runtimeToc.length > 0">
-            <TopicTocItem
-                v-for="tocItem of runtimeToc"
-                v-memo="[tocStateKey, tocItem.id, tocItem._active]"
-                :active="!!tocItem._active"
-                :tocItem
-            />
-        </TreeContainer>
-        <div v-else :class="$style.tocEmpty">{{ phrase.empty_toc }}</div>
-    </section>
-</template>
-
-<style lang="scss" module>
-.topicToc {
-    flex: 1;
-    overflow: auto;
-    @include scroll();
-}
-
-.tocEmpty {
-    padding: var(--gap);
-    text-align: center;
-    color: var(--textMuted);
-}
-</style>
+<script lang="ts" setup>
+import { headingName } from '@erudit-js/bitran-elements/heading/shared';
+
+import type { TocItem } from '@erudit/shared/bitran/toc';
+import { topicLocation } from '@app/scripts/aside/minor/topic';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+import type { AsideMinorTopic } from '@shared/aside/minor';
+
+import TopicTocItem from './TopicTocItem.vue';
+
+interface RuntimeTocItem extends TocItem {
+    /**
+     * * `0` — Not active
+     * * `1` — Active for `window` events
+     * * `2` — Active for Intersection Observer and currently in viewport
+     */
+    _active: 0 | 1 | 2;
+    _position: number;
+}
+
+type RuntimeToc = RuntimeTocItem[];
+
+const topicData = injectAsideData<AsideMinorTopic>();
+const phrase = await usePhrases('empty_toc');
+const runtimeToc = ref<RuntimeToc>([]);
+const tocStateKey = ref(0);
+
+watch(topicData, setupRuntimeToc);
+setupRuntimeToc();
+
+function setupRuntimeToc(): void {
+    const _newToc: RuntimeToc = [];
+
+    for (let i = 0; i < topicData.value.toc.length; i++) {
+        _newToc.push({
+            ...topicData.value.toc[i]!,
+            _active: 0,
+            _position: i,
+        });
+    }
+
+    runtimeToc.value = _newToc;
+    tocStateKey.value++;
+}
+
+//
+// Live TOC
+//
+
+let observer: IntersectionObserver | null = null;
+let id2TocItemIndex: Record<string, number> = {};
+
+const windowEvents = ['DOMContentLoaded', 'load', 'resize', 'scroll'] as const;
+let headings: RuntimeTocItem[] = [];
+let closestAboveHeading: RuntimeTocItem | null = null;
+
+function disableLiveToc(): void {
+    // Skip if not in client-side
+    if (import.meta.server) return;
+
+    // Live TOC heading with `window` events
+    for (const event of windowEvents) {
+        window.removeEventListener(event, updateActiveTopHeading);
+    }
+
+    headings = [];
+    closestAboveHeading = null;
+
+    // Live TOC with Intersection Observer
+    id2TocItemIndex = {};
+
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+
+    // Reset active state
+    if (runtimeToc.value?.length) {
+        for (const tocItem of runtimeToc.value) {
+            tocItem._active = 0;
+        }
+    }
+}
+
+function enableLiveToc(): void {
+    // Skip if not in client-side
+    if (import.meta.server) return;
+    if (!runtimeToc.value?.length) return;
+
+    // Live TOC heading with `window` events
+    headings = runtimeToc.value.filter(
+        (item) => item.productName === headingName,
+    );
+
+    for (const event of windowEvents) {
+        window.addEventListener(event, updateActiveTopHeading);
+    }
+
+    updateActiveTopHeading();
+
+    // Live TOC with Intersection Observer
+    observer = new IntersectionObserver(intersectionTrigger);
+    id2TocItemIndex = {};
+
+    for (const tocItem of runtimeToc.value) {
+        const id = tocItem.id;
+        id2TocItemIndex[id] = tocItem._position;
+        const element = document.getElementById(id);
+        if (element) {
+            observer.observe(element);
+        }
+    }
+}
+
+function updateActiveTopHeading(): void {
+    function getBottom(id: string): number {
+        const defaultBottom = 1;
+        const element = document.getElementById(id);
+        return element ? element.getBoundingClientRect().bottom : defaultBottom;
+    }
+
+    if (closestAboveHeading) {
+        closestAboveHeading._active = closestAboveHeading._active === 2 ? 2 : 0;
+        closestAboveHeading = null;
+    }
+
+    if (!runtimeToc.value?.length || !headings.length) return;
+
+    let topIndex = 0;
+    let bottomIndex = headings.length;
+    let targetIndex = 0;
+
+    while (topIndex < bottomIndex) {
+        const middleIndex = ((topIndex + bottomIndex) / 2) | 0;
+        const middleHeading = headings[middleIndex]!;
+        const middleHeadingTop = getBottom(middleHeading.id);
+
+        if (middleHeadingTop <= 0) {
+            targetIndex = middleIndex;
+            topIndex = middleIndex + 1;
+        } else {
+            bottomIndex = middleIndex;
+        }
+    }
+
+    closestAboveHeading = headings[targetIndex]!;
+    if (closestAboveHeading && closestAboveHeading._active < 2) {
+        closestAboveHeading._active =
+            getBottom(closestAboveHeading.id) <= 0 ? 1 : 0;
+    }
+}
+
+function intersectionTrigger(entries: IntersectionObserverEntry[]): void {
+    for (const entry of entries) {
+        const itemIndex = id2TocItemIndex[entry.target.id]!;
+        const tocItem = runtimeToc.value?.[itemIndex];
+
+        if (tocItem) {
+            tocItem._active = entry.isIntersecting
+                ? 2
+                : tocItem._active === 1
+                  ? 1
+                  : 0;
+        }
+    }
+}
+
+onMounted(() => {
+    watch(
+        [topicData, topicLocation],
+        () => {
+            disableLiveToc();
+
+            if (!topicData.value.part || !topicLocation.value) return;
+
+            enableLiveToc();
+        },
+        { immediate: true },
+    );
+});
+
+onUnmounted(() => {
+    disableLiveToc();
+});
+</script>
+
+<template>
+    <section :class="$style.topicToc">
+        <TreeContainer v-if="runtimeToc?.length > 0" :key="tocStateKey">
+            <TopicTocItem
+                v-for="tocItem of runtimeToc"
+                v-memo="[tocStateKey, tocItem.id, tocItem._active]"
+                :active="!!tocItem._active"
+                :tocItem
+            />
+        </TreeContainer>
+        <div v-else :class="$style.tocEmpty">{{ phrase.empty_toc }}</div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.topicToc {
+    flex: 1;
+    overflow: auto;
+    @include scroll();
+}
+
+.tocEmpty {
+    padding: var(--gap);
+    text-align: center;
+    color: var(--textMuted);
+}
+</style>

package/app/components/aside/minor/topic/TopicTocItem.vue

@@ -1,31 +1,32 @@
-<script lang="ts" setup>
-import type { TocItem } from '@erudit/shared/bitran/toc';
-
-const { tocItem } = defineProps<{ tocItem: TocItem; active: boolean }>();
-
-const productName = tocItem.productName;
-const productIcon = await useBitranElementIcon(productName);
-const productPhrase = await useBitranElementLanguage(productName);
-
-function tocItemClick(event: Event) {
-    navigateTo({
-        query: {
-            element: tocItem.id,
-        },
-    });
-    event.preventDefault();
-    event.stopPropagation();
-    return false;
-}
-</script>
-
-<template>
-    <TreeItem
-        :label="tocItem.title || productPhrase('_element_title')"
-        :level="tocItem.level"
-        :link="`?element=${tocItem.id}` /* Apply page hash! */"
-        :svg="productIcon"
-        :active
-        @click="tocItemClick"
-    />
-</template>
+<script lang="ts" setup>
+import type { TocItem } from '@erudit/shared/bitran/toc';
+
+const props = defineProps<{ tocItem: TocItem; active: boolean }>();
+const productName = props.tocItem.productName;
+const productIcon = await useBitranElementIcon(productName);
+const productPhrase = await useBitranElementLanguage(productName);
+
+const pretty = useFormatText();
+
+function tocItemClick(event: MouseEvent): void {
+    navigateTo({
+        query: {
+            element: props.tocItem.id,
+        },
+        //hash: props.tocItem.id, // Apply page hash as requested in the comment
+    });
+    event.preventDefault();
+    event.stopPropagation();
+}
+</script>
+
+<template>
+    <TreeItem
+        :label="pretty(tocItem.title || productPhrase('_element_title'))"
+        :level="tocItem.level"
+        :link="`?element=${tocItem.id}`"
+        :svg="productIcon"
+        :active
+        @click="tocItemClick"
+    />
+</template>

package/app/components/aside/utils/AsideOverlayPane.vue

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-const props = defineProps<{ stick?: 'top' | 'bottom' }>();
-const style = useCssModule();
-
-const classes = computed(() => {
-    const _classes: string[] = [style.asideOverlayPane];
-
-    if (props.stick === 'bottom') _classes.push(style.stickBottom);
-
-    return _classes;
-});
-</script>
-
-<template>
-    <section :class="classes">
-        <slot></slot>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.asideOverlayPane {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--bgAside);
-
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-
-    &.stickBottom {
-        justify-content: end;
-    }
-}
-</style>
+<script lang="ts" setup>
+const props = defineProps<{ stick?: 'top' | 'bottom' }>();
+const style = useCssModule();
+
+const classes = computed(() => {
+    const _classes: string[] = [style.asideOverlayPane];
+
+    if (props.stick === 'bottom') _classes.push(style.stickBottom);
+
+    return _classes;
+});
+</script>
+
+<template>
+    <section :class="classes">
+        <slot></slot>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.asideOverlayPane {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bgAside);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+
+    &.stickBottom {
+        justify-content: end;
+    }
+}
+</style>