Skip to content

Commit

Permalink
feat: add cross references
Browse files Browse the repository at this point in the history
  • Loading branch information
altrusl committed Jun 16, 2024
1 parent ff5cbc0 commit 66e671f
Show file tree
Hide file tree
Showing 9 changed files with 136 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/components/ui/pagination/pb.css
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@

.v-pagination {
align-items: center;
.mobile &, .tablet & {
.mobile &, .tablet &, .notebook & {
flex-direction: column;
}
}
70 changes: 53 additions & 17 deletions src/components/verse/CrossReferences.vue
Original file line number Diff line number Diff line change
@@ -1,35 +1,71 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import VerseComponent from "./VerseComponent.vue";
import { api } from "@/services/api";
// import type { PropType } from "vue";
import { buildVerseFromString } from "@/composables/useVerseUtils";
import { useAppLoader } from "@/composables/useAppLoader";
import { onMounted, ref, watch } from "vue";
import BaseButton from "../ui/BaseButton.vue";
// import VerseComponent from "./VerseComponent.vue";
import VerseList from "./VerseList.vue";
import { loadXr } from "@/utils/crossReferensesUtils";
import { loadVerse } from "@/composables/useVerseUtils";
const props = defineProps({
vid: String,
});
const verse = ref();
const { startLoading, stopLoading } = useAppLoader();
const xrs = ref();
const currentXr = ref();
const verses = ref();
onMounted(async () => {
startLoading();
const data = await api.bible.loadVerse(props.vid);
verse.value = buildVerseFromString(props.vid, data.translations[1].tokens);
console.log(verse.value);
watch(currentXr, async () => {
verses.value = [];
currentXr.value?.vids.forEach(async (vid: string) => {
const v = await loadVerse(vid);
if (v) {
verses.value.push(v);
}
});
// console.log(verses.value);
});
stopLoading();
onMounted(async () => {
xrs.value = await loadXr(props.vid);
});
</script>

<template>
CrossReferences
<!-- {{ xrs }} -->
<ul>
<li v-for="(xr, index) in xrs" :key="index">
<BaseButton
class="item"
@click="currentXr = xr"
>
{{ xr.title }}
</BaseButton>
</li>
</ul>
<div v-if="currentXr" class="details">
<VerseList :verses="verses" :show-pagination="false" />
</div>
<!-- <VerseComponent :verse="verse" class="cross-references" /> -->
</template>

<style scoped>
.masoretic-text :deep(.token > .lemma) {
display: none;
ul {
display: flex;
white-space: nowrap;
flex-wrap: wrap;
column-gap: 1em;
row-gap: 0.5em;
margin-bottom: 1em;
li {
.item {
width: 9em;
padding: 0 0.3em;
}
}
}
.details {
margin-top: 2em;
color: var(--bbl-c-text-2);
font-size: 0.9em;
}
</style>
5 changes: 3 additions & 2 deletions src/components/verse/VerseComponent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ function displayWord(sn: string) {
flex-wrap: wrap;
flex-grow: 1;
row-gap: 0.3em;
margin-bottom: 18px;
padding-bottom: 1em;
margin-bottom: 1em;
padding-bottom: 0.6em;
border-bottom: 1px solid var(--bbl-c-divider);
.verse-list & {
Expand All @@ -74,6 +74,7 @@ function displayWord(sn: string) {
.anchor {
margin-left: 0.5em;
margin-top: 0.5em;
color: var(--bbl-c-text-3);
&:hover {
Expand Down
7 changes: 6 additions & 1 deletion src/components/verse/VerseList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ const props = defineProps({
type: String,
default: null,
},
showPagination: {
type: Boolean,
default: true,
},
});
const page = ref(1);
Expand All @@ -26,6 +30,7 @@ function changePagination(data) {
<template>
<div class="verse-list">
<PaginationBar
v-if="showPagination"
v-model="page"
:total-row="verses.length"
:page-size-menu="[5, 10, 20, 50]"
Expand All @@ -46,7 +51,7 @@ function changePagination(data) {
)"
:key="verse.vid"
>
<VerseComponent :verse="verse" mode="short" :highlighted-sn="props.sn" />
<VerseComponent :verse="verse" :highlighted-sn="props.sn" />
</template>
</div>
</div>
Expand Down
17 changes: 16 additions & 1 deletion src/components/verse/VerseSection.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import BaseTabs from "../ui/BaseTabs.vue";
import MasoreticText from "./MasoreticText.vue";
import CrossReferences from "./CrossReferences.vue";
Expand All @@ -25,6 +26,14 @@ watch(() => props.vid, () => {
selected.value = -1;
});
const route = useRoute();
watch(() => route.name, () => {
if (route.name !== "verse") {
selected.value = -1;
}
});
const sections = [
{ title: "Масоретский текст", component: MasoreticText },
{ title: "Перекрестные ссылки", component: CrossReferences },
Expand All @@ -34,7 +43,7 @@ const sections = [
<template>
<div v-if="verse">
<VerseHeader :vid="verse.vid" />
<VerseComponent :verse="verse" />
<VerseComponent :verse="verse" class="main-verse" />
<BaseTabs v-model="selected" :sections="sections">
<template #tabTitle="{ section }">
{{ section.title }}
Expand All @@ -50,4 +59,10 @@ const sections = [
button {
border: 0;
}
:deep(.tabs-header) {
margin-bottom: 1em;
}
:deep(.tab-title.active) {
border-bottom: 1px solid var(--bbl-c-border) !important;
}
</style>
2 changes: 1 addition & 1 deletion src/composables/useVerseUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function rebuildVerse() {
// }
}

export async function loadVerse(vid) {
export async function loadVerse(vid): Promise<Verse> {
let verse = verseCache.get(vid);
if (!verse) {
const data = await api.bible.loadChapter(vid);
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/TwoColumnLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@
grid-column: 1 / 5;
grid-row: 1;
& :deep(.verse .uri) {
& :deep(.main-verse .uri) {
display: none;
}
& :deep(.verse .anchor) {
& :deep(.main-verse .anchor) {
display: none;
}
Expand Down
5 changes: 5 additions & 0 deletions src/services/api/bible.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ const bible = {
return await (await http.get(`/bible/${bookId}/${chapterId}.syn.txt`, true)).text();
},

async loadCrossReferences(vid: string) {
const [bookId, chapterId] = vid.split(":");
return await (await http.get(`/bible/${bookId}/${chapterId}.xr.txt`, true)).text();
},

async loadStrongsConcordance() {
return await (await http.get("/strongs-dictionary.txt", true)).text();
},
Expand Down
49 changes: 49 additions & 0 deletions src/utils/crossReferensesUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { api } from "@/services/api";
import { useAppLoader } from "@/composables/useAppLoader";

const xrCache: Map<string, Object> = new Map();

const { startLoading, stopLoading } = useAppLoader();

export async function loadXr(vid) {
let xr = xrCache.get(vid);
if (!xr) {
startLoading();
const data = await api.bible.loadCrossReferences(vid);
stopLoading();
const lines = data.split("\n");
for (let i = 0; i < lines.length; i++) {
const [bookId, chapterId] = vid.split(":");
const _vid = `${bookId}:${chapterId}:${i + 1}`;
xrCache.set(
_vid,
parseLine(lines[i]),
);
}
xr = xrCache.get(vid);
}
return xr;
}
function parseLine(line: string) {
const [, ...tokens] = line.split("🞍");
const xrs = [];
if (tokens) {
tokens.forEach((xr) => {
xrs.push(parseXr(xr));
});
}
return xrs;
}
export function parseXr(xr) {
const tokens = xr.split("₋");
const vids = [];
if (tokens.length > 1) {
tokens[3].split(",").forEach((verseId) => {
vids.push(`${tokens[1]}:${tokens[2]}:${verseId}`);
});
}
return {
title: tokens[0],
vids,
};
}

0 comments on commit 66e671f

Please sign in to comment.