144 tunocent enhancements 6 2024 (#156)

Fixes #149 
Fixes #151 
Fixes #154  
Fixes #153 
Also adds Point 1 of #152

components/app-header.vue

@@ -64,7 +64,7 @@ function onSelectMenuItem(item: ItemType) {
 			newWindowState = {
 				targetType: "CorpusQuery",
 				params: {
-					queryString: "Two wrongs don't make a right, but three lefts do.", // TODO: pass this value from the backend and replace the string with item.params
+					queryString: "", // TODO: pass this value from the backend and replace the string with item.params
 				} as CorpusQueryWindowItem["params"],
 				title: item.label ?? "",
 			};

components/corpus-query-window-content.vue

@@ -3,9 +3,8 @@ import type { CorpusSearchHits } from "@/lib/api-client";
 import type { CorpusQuerySchema } from "@/types/global";
 
 const api = useApiClient();
-
+const { simpleItems } = useTEIHeaders();
 const props = defineProps<{ params: Zod.infer<typeof CorpusQuerySchema>["params"] }>();
-
 const queryString = ref(props.params.queryString);
 const hits = ref<Array<CorpusSearchHits> | undefined>([]);
 
@@ -20,33 +19,16 @@ async function searchCorpus() {
 		return;
 	}
 	hits.value = result.data.hits;
+	hits.value.forEach((hit) => {
+		const teiHeader = simpleItems.value.find((header) => header.id === hit.doc);
+		hit.label = teiHeader.label;
+	});
 }
 
 const openNewWindowFromAnchor = useAnchorClickHandler();
 
-const specialCharacters: Array<string> = [
-	"ē",
-	"ṛ",
-	"ṯ",
-	"ẓ",
-	"ū",
-	"ī",
-	"ō",
-	"ā",
-	"š",
-	"ḏ",
-	"ṭ",
-	"ǧ",
-	"ḥ",
-	"ž",
-	"ṣ",
-	"ḏ̣",
-	"ʕ",
-	"ʔ",
-	"ġ",
-	"ḅ",
-	"ṃ",
-];
+const { data: config } = useProjectInfo();
+const specialCharacters = config.value?.projectConfig?.specialCharacters as Array<string>;
 </script>
 
 <template>
@@ -72,25 +54,26 @@ const specialCharacters: Array<string> = [
 			<br />
 		</form>
 		<div>
-			<div v-if="hits === undefined || hits.length > 0">
-				TODO write the CQL here: "{{ queryString }}"
+			<div v-if="hits === undefined || hits.length > 0" class="my-2">
+				Query: "{{ queryString }}"
 			</div>
 			<table>
 				<tr v-for="hit in hits" :key="hit.u">
-					<td class="p-0 pe-3">
+					<td class="p-0">
 						<a
 							href="#"
 							data-target-type="CorpusText"
 							:data-hits="hit.docHits"
-							:data-doc="hit.doc"
-							:data-uid="hit.u"
-							@click.self="openNewWindowFromAnchor"
+							:data-text-id="hit.doc"
+							:data-u="hit.u"
+							:data-label="hit.label"
+							@click="openNewWindowFromAnchor"
 						>
 							<strong>{{ hit.u }}</strong>
 						</a>
 					</td>
-					<td class="p-0 text-right" v-html="hit.content?.left"></td>
-					<td class="bg-[beige] p-0 text-center" v-html="hit.content?.kwic"></td>
+					<td class="pl-5 text-right" v-html="hit.content?.left"></td>
+					<td class="max-w-fit bg-[beige] px-[2px] text-center" v-html="hit.content?.kwic"></td>
 					<td class="p-0" v-html="hit.content?.right"></td>
 				</tr>
 			</table>

components/corpus-text-window-content.vue

@@ -11,18 +11,22 @@ const props = defineProps<{
 	params: Zod.infer<typeof CorpusTextSchema>["params"];
 }>();
 
+const { simpleItems } = useTEIHeaders();
 const utterances = ref<Array<CorpusTextUtterances>>([]);
+const utterancesWrapper = ref<HTMLDivElement>(null);
 const utteranceElements = ref<Array<Element>>([]);
 const currentPage = ref(1);
 const api = useApiClient();
-
+const scrollComplete = ref<boolean>(false);
+const teiHeader = simpleItems.value.find((header) => header.id === props.params.textId);
 const loadNextPage = async function () {
 	let text: HttpResponse<CorpusText, string>;
 	text = await api.vicav.getCorpusText(
 		{
 			id: props.params.textId,
 			hits: props.params.hits,
 			page: currentPage.value,
+			size: 10,
 		},
 		{ headers: { Accept: "application/json" } },
 	);
@@ -36,10 +40,18 @@ const loadNextPage = async function () {
 const handleInfiniteScroll = async function ($state: StateHandler) {
 	try {
 		const text = await loadNextPage();
-		currentPage.value = currentPage.value + 1;
 		$state.loaded();
-		if (text.data.utterances !== undefined && text.data.utterances.length < 10) $state.complete();
+		if (text.data.utterances !== undefined && text.data.utterances.length < 10) {
+			scrollComplete.value = true;
+			$state.complete();
+		}
 	} catch (e) {
+		if (e.status === 404 && e.error.detail.indexOf("does not have page") !== -1) {
+			scrollComplete.value = true;
+			$state.complete();
+			return;
+		}
+
 		$state.error();
 	}
 };
@@ -55,47 +67,92 @@ const getText = async function () {
 	);
 };
 
+const scrollParentToChild = function (parent, child) {
+	// Where is the parent on page
+	var parentRect = parent.getBoundingClientRect();
+	// What can you see?
+	var parentViewableArea = {
+		height: parent.clientHeight,
+		width: parent.clientWidth,
+	};
+
+	// Where is the child
+	var childRect = child.getBoundingClientRect();
+	// Is the child viewable?
+	var isViewable =
+		childRect.top >= parentRect.top &&
+		childRect.bottom <= parentRect.top + parentViewableArea.height;
+	// if you can't see the child try to scroll parent
+	if (!isViewable) {
+		// Should we scroll using top or bottom? Find the smaller ABS adjustment
+		const scrollTop = childRect.top - parentRect.top;
+		const scrollBot = childRect.bottom - parentRect.bottom;
+		if (Math.abs(scrollTop) < Math.abs(scrollBot)) {
+			// we're near the top of the list
+			parent.scrollTop += scrollTop;
+		} else {
+			// we're near the bottom of the list
+			parent.scrollTop += scrollBot;
+		}
+	}
+};
+
 onMounted(async () => {
 	await getText();
 	const u = utteranceElements.value.find((u) => u.id === props.params.u);
-	if (u !== undefined) u.scrollIntoView({ behavior: "smooth" });
+	const window = utterancesWrapper.value.parentElement;
+	if (u !== undefined) scrollParentToChild(window, u);
 });
 </script>
 
 <template>
 	<!-- eslint-disable tailwindcss/no-custom-classname, vue/no-v-html -->
-	<div :id="params.textId" class="p-4">
-		<h2>{{ params.textId }}</h2>
+	<div :id="params.textId" ref="utterancesWrapper" class="p-4">
+		<h2 class="m-3 text-lg">{{ props.params.label }}</h2>
+
+		<table class="m-3 border border-gray-300">
+			<tr>
+				<th>Contributed by:</th>
+				<td>{{ teiHeader.resp }}</td>
+			</tr>
+			<tr>
+				<th>Speaker:</th>
+				<td>
+					{{ teiHeader.person.name }} (age: {{ teiHeader.person.age }}, sex:
+					{{ teiHeader.person.sex }})
+				</td>
+			</tr>
+		</table>
 		<div
 			v-for="u in utterances"
 			:id="u.id"
 			:key="u.id"
 			ref="utteranceElements"
-			class="corpus-utterance"
+			class="corpus-utterance table-row"
 			v-html="u.content"
 		/>
-		<InfiniteLoading @infinite="handleInfiniteScroll" />
+		<InfiniteLoading
+			v-if="utterances.length > 0 && !scrollComplete"
+			@infinite="handleInfiniteScroll"
+		/>
 	</div>
 </template>
 
 <style>
 .u {
-	display: flex;
+	@apply flex gap-2;
 
 	.xml-id {
-		min-width: fit-content;
-		padding: 0 20px;
-		font-weight: 700;
+		@apply min-w-fit px-3 font-bold;
 	}
 
 	.speaker {
-		padding: 20px;
-		font-weight: 700;
+		@apply font-bold;
 	}
 
 	.content {
 		.hit {
-			font-weight: 700;
+			@apply font-bold;
 		}
 	}
 }

components/explore-samples-form-window-content.vue

@@ -1,23 +1,4 @@
 <script lang="ts" setup>
-// import {
-// 	ComboboxAnchor,
-// 	ComboboxContent,
-// 	ComboboxEmpty,
-// 	ComboboxGroup,
-// 	ComboboxInput,
-// 	ComboboxItem,
-// 	ComboboxItemIndicator,
-// 	ComboboxLabel,
-// 	ComboboxRoot,
-// 	ComboboxTrigger,
-// 	ComboboxViewport,
-// 	TagsInputInput,
-// 	TagsInputItem,
-// 	TagsInputItemDelete,
-// 	TagsInputItemText,
-// 	TagsInputRoot,
-// } from "radix-vue";
-
 import { Icon } from "@iconify/vue";
 import {
 	CheckboxIndicator,
@@ -41,31 +22,6 @@ interface Props {
 
 const props = defineProps<Props>();
 const { params } = toRefs(props);
-
-// const specialCharacters: Array<string> = [
-// 	"ē",
-// 	"ṛ",
-// 	"ṯ",
-// 	"ẓ",
-// 	"ū",
-// 	"ī",
-// 	"ō",
-// 	"ā",
-// 	"š",
-// 	"ḏ",
-// 	"ṭ",
-// 	"ǧ",
-// 	"ḥ",
-// 	"ž",
-// 	"ṣ",
-// 	"ḏ̣",
-// 	"ʕ",
-// 	"ʔ",
-// 	"ġ",
-// 	"ḅ",
-// 	"ṃ",
-// ];
-
 const { simpleItems } = useTEIHeaders();
 const windowsStore = useWindowsStore();
 const { addWindow } = windowsStore;

components/input-extended.vue

@@ -52,8 +52,8 @@ const restoreCursorPosition = (pos: number) => {
 			<button
 				v-for="(c, i) in stringSnippets"
 				:key="i"
-				@click.prevent="InsertSnippet(c)"
-				v-text="c"
+				@click.prevent="InsertSnippet(c.value)"
+				v-html="c.text ? c.text : c.value"
 			></button>
 		</div>
 		<div class="ie-textinput">

components/profile-window-content.vue

@@ -44,6 +44,11 @@ watch(content, () => {
 <style>
 /* stylelint-disable selector-class-pattern */
 
+.profileHeader img,
+.figure img {
+	@apply m-0;
+}
+
 .tbProfile {
 	@apply border border-solid border-[#59533c];
 }
@@ -121,4 +126,28 @@ a:hover {
 
 	height: 450px;
 }
+
+.pFigure.fig-col-3 {
+	@apply grid grid-cols-3 gap-2;
+}
+
+.pFigure.fig-col-4 {
+	@apply grid grid-cols-4 gap-2;
+}
+
+.pFigure.fig-col-1 {
+	@apply flex justify-center;
+}
+
+.pFigure .figure {
+	@apply content-end flex flex-col flex-wrap gap-3 justify-start;
+}
+
+.grid .figure img {
+	@apply aspect-square object-cover;
+}
+
+.lg-item .lg-sub-html {
+	@apply bg-opacity-40 bg-black;
+}
 </style>

composables/use-anchor-click-handler.ts

@@ -8,15 +8,17 @@ export function useAnchorClickHandler() {
 	 * Intercept anchor clicks to open window instead of navigating.
 	 */
 	function openNewWindowFromAnchor(event: MouseEvent) {
+		console.log(event);
 		const element = event.target as HTMLElement;
 
 		let item: Record<string, string> | null = null;
-
+		console.log(element);
 		if (element instanceof HTMLAnchorElement) {
 			item = element.dataset as Record<string, string>;
 		} else if (element.parentElement instanceof HTMLAnchorElement) {
 			item = element.parentElement.dataset as Record<string, string>;
 		}
+		console.log(item);
 
 		if (item.targetType) {
 			if (item.targetType === "External-link") return;

composables/use-image-gallery-processor.ts

@@ -18,6 +18,7 @@ export function useImageGalleryProcessor(element: Ref<HTMLDivElement>) {
 					};
 				},
 			);
+			console.log(data, galleryElement);
 			galleryElement.replaceChildren("");
 			const gallery = lightGallery(galleryElement as HTMLElement, {
 				container: galleryElement as HTMLElement,