WIP: Lanes Lexicon (#180)

marwan · Sep 14, 2024 · 44aa3a1 · 44aa3a1
1 parent 799ed9b
commit 44aa3a1
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 11 deletions.
diff --git a/src/app.css b/src/app.css
@@ -51,6 +51,14 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "lexicon";
+  src: url("../fonts/lexicon/lexicon.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -302,3 +310,49 @@ svg {
   font-palette: --palette1;
 }
 
+/* for lexicon modal because the data is fetched externally and it has it's own classes */
+#lexiconModal .entryFree {
+  padding-bottom: 2rem;
+  line-height: 2rem;
+}
+
+#lexiconModal .entryFree::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 1rem;
+  width: 50%;
+  left: 25%;
+  border-top: 1px solid black;
+}
+
+#lexiconModal .hi {
+  font-weight: 500;
+}
+
+#lexiconModal .pageHeading {
+  display: none;
+  font-size: 2rem;
+}
+
+#lexiconModal .Arabic {
+  font-family: 'lexicon';
+  font-weight: 500;
+  direction: rtl;
+  font-size: 24px;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+#lexiconModal .itype {
+  font-weight: 600;
+}
+
+#lexiconModal .itype::after {
+  content: ': ';
+}
+
+#lexiconModal .orthdal {
+  display: none;
+  color: rgb(0, 255, 0);
+}
diff --git a/src/app.html b/src/app.html
@@ -16,7 +16,7 @@
 		<link crossorigin="anonymous" rel="manifest" href="%sveltekit.assets%/manifest.json" />
 		<link crossorigin="anonymous" rel="icon" type="image/png" href="%sveltekit.assets%/images/favicon.png" />
 		<link crossorigin="anonymous" href="%sveltekit.assets%/images/apple-touch-icon.png" rel="apple-touch-icon" />
-		<link crossorigin="anonymous" rel="stylesheet" href="%sveltekit.assets%/css/global.css?4" />
+		<link crossorigin="anonymous" rel="stylesheet" href="%sveltekit.assets%/css/global.css?5" />
 
 		<!-- setting background colors for themes -->
 		<script>

diff --git a/src/components/ui/modals/LexiconModal.svelte b/src/components/ui/modals/LexiconModal.svelte
@@ -0,0 +1,41 @@
+<script>
+	import Modal from '$ui/flowbite-svelte/modal/Modal.svelte';
+	import Spinner from '$svgs/Spinner.svelte';
+	import { staticEndpoint, errorLoadingDataMessage } from '$data/websiteSettings';
+	import { __lexiconModalVisible, __wordRoot } from '$utils/stores';
+
+	let lexiconData;
+
+	$: {
+		lexiconData = (async () => {
+			// getting indexes file
+			const indexesResponse = await fetch(`${staticEndpoint}/v4/lexicon/indexes.json`);
+			const indexesData = await indexesResponse.json();
+
+			if (indexesData[$__wordRoot] === undefined) return 'No data for this word.';
+
+			const lexiconFile = indexesData[$__wordRoot].file;
+			const lexiconIndex = indexesData[$__wordRoot].index;
+
+			// getting lexicon data for the root
+			const lexiconResponse = await fetch(`${staticEndpoint}/v4/lexicon/${lexiconFile}.json`);
+			const lexiconData = await lexiconResponse.json();
+
+			return lexiconData[lexiconIndex];
+		})();
+	}
+</script>
+
+<Modal title={$__wordRoot} id="lexiconModal" bind:open={$__lexiconModalVisible} class="!rounded-b-none md:!rounded-3xl theme" bodyClass="p-6 space-y-4 flex-1 overflow-y-auto overscroll-contain" headerClass="flex justify-between items-center p-6 rounded-t-3xl text-black theme-grayscale" classFooter="rounded-b-3xl flex flex-row justify-between" size="lg" position="bottom" center outsideclose>
+	{#await lexiconData}
+		<Spinner />
+	{:then lexiconData}
+		<div class="text-sm text-black flex flex-col space-y-6">
+			<div class="flex flex-col space-y-4">
+				{@html lexiconData}
+			</div>
+		</div>
+	{:catch error}
+		<p>{errorLoadingDataMessage}</p>
+	{/await}
+</Modal>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -18,6 +18,7 @@
 	import QuranNavigationModal from '$ui/modals/QuranNavigationModal.svelte';
 	import SiteNavigationModal from '$ui/modals/SiteNavigationModal.svelte';
 	import SettingsSelectorModal from '$ui/modals/SettingsSelectorModal.svelte';
+	import LexiconModal from '$ui/modals/LexiconModal.svelte';
 	import { __websiteOnline, __currentPage, __chapterNumber, __settingsDrawerHidden, __wakeLockEnabled, __userToken, __fontType, __wordTranslation, __verseTranslations, __selectedDisplayId } from '$utils/stores';
 	import { checkOldBookmarks } from '$utils/checkOldBookmarks';
 	import { debounce } from '$utils/debounce';
@@ -124,6 +125,7 @@
 	<TafsirModal />
 	<SiteNavigationModal />
 	<SettingsSelectorModal />
+	<LexiconModal />
 	<BottomToolbar />
 	<slot />
 </div>
diff --git a/src/routes/morphology/[key]/+page.svelte b/src/routes/morphology/[key]/+page.svelte
@@ -7,12 +7,12 @@
 	import Table from '$display/morphology/Table.svelte';
 	import { quranMetaData } from '$data/quranMeta';
 	import { apiEndpoint, errorLoadingDataMessage } from '$data/websiteSettings';
-	import { __currentPage, __fontType, __wordTranslation, __verseTranslations, __morphologyKey, __pageURL, __displayType } from '$utils/stores';
+	import { __currentPage, __fontType, __wordTranslation, __verseTranslations, __morphologyKey, __pageURL, __displayType, __lexiconModalVisible, __wordRoot } from '$utils/stores';
 	import { buttonOutlineClasses } from '$data/commonClasses';
 	import { fetchVersesData } from '$utils/fetchData';
 	import { term } from '$utils/terminologies';
 
-	let fetchWordsData, fetchWordSummary;
+	let fetchWordsData, fetchWordsData1, fetchWordSummary;
 	let chapter, verse, word;
 
 	$: {
@@ -34,6 +34,7 @@
 		fetchWordsData = (async () => {
 			const response = await fetch(`${apiEndpoint}/morphology?words=${$__morphologyKey}&word_translation=${$__wordTranslation}`);
 			const data = await response.json();
+			fetchWordsData1 = data.data;
 			return data.data;
 		})();
 
@@ -45,6 +46,12 @@
 		})();
 	}
 
+	// set the word root and show the modal
+	function showLexiconModal() {
+		__wordRoot.set(fetchWordsData1[0].morphology.root.root);
+		__lexiconModalVisible.set(true);
+	}
+
 	// only allow display type 1 & 2, and don't save the layout in settings
 	if ([3, 4, 5].includes($__displayType)) $__displayType = 1;
 
@@ -94,7 +101,10 @@
 		{#await fetchWordSummary}
 			<span>...</span>
 		{:then fetchWordSummary}
-			<span>{@html fetchWordSummary.summary}</span>
+			<div class="flex flex-col space-y-4">
+				<span>{@html fetchWordSummary.summary}</span>
+				<!-- <button class="text-lg font-bold underline" on:click={() => showLexiconModal()}>View Lanes Lexicon Data &rarr;</button> -->
+			</div>
 		{:catch error}
 			<p>{errorLoadingDataMessage}</p>
 		{/await}

diff --git a/src/utils/stores.js b/src/utils/stores.js
@@ -50,12 +50,14 @@ let __websiteOnline,
 	__quranNavigationModalVisible,
 	__siteNavigationModalVisible,
 	__settingsSelectorModal,
+	__lexiconModalVisible,
 	__wakeLockEnabled,
 	__quizCorrectAnswers,
 	__quizWrongAnswers,
 	__timeSpecificChapters,
 	__englishTerminology,
-	__hideNonDuaPart;
+	__hideNonDuaPart,
+	__wordRoot;
 
 if (browser) {
 	const userSettings = JSON.parse(localStorage.getItem('userSettings'));
@@ -201,6 +203,7 @@ if (browser) {
 	__settingsSelectorModal = writable({
 		visible: false
 	});
+	__lexiconModalVisible = writable(false);
 
 	// wake lock settings
 	__wakeLockEnabled = writable(userSettings.displaySettings.wakeLockEnabled);
@@ -220,6 +223,9 @@ if (browser) {
 
 	// show/hide non-dua words
 	__hideNonDuaPart = writable(userSettings.displaySettings.hideNonDuaPart);
+
+	// to store the word root for showing lexicon data
+	__wordRoot = writable(null);
 }
 
 export {
@@ -272,10 +278,12 @@ export {
 	__quranNavigationModalVisible,
 	__siteNavigationModalVisible,
 	__settingsSelectorModal,
+	__lexiconModalVisible,
 	__wakeLockEnabled,
 	__quizCorrectAnswers,
 	__quizWrongAnswers,
 	__timeSpecificChapters,
 	__englishTerminology,
-	__hideNonDuaPart
+	__hideNonDuaPart,
+	__wordRoot
 };
diff --git a/static/css/global.css b/static/css/global.css
@@ -2867,6 +2867,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   color: rgb(0 0 0 / var(--tw-placeholder-opacity));
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-10 {
   opacity: 0.1;
 }
@@ -2891,10 +2895,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   opacity: 0.7;
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3117,6 +3117,18 @@ input[type="range"].range-lg::-moz-range-thumb {
   font-display: swap;
 }
 
+@font-face {
+  font-family: "lexicon";
+
+  src: url("../fonts/lexicon/lexicon.ttf") format("truetype");
+
+  font-weight: normal;
+
+  font-style: normal;
+
+  font-display: swap;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -3383,6 +3395,54 @@ svg {
   font-palette: --palette1;
 }
 
+/* for lexicon modal because the data is fetched externally and it has it's own classes */
+
+#lexiconModal .entryFree {
+  padding-bottom: 2rem;
+  line-height: 2rem;
+}
+
+#lexiconModal .entryFree::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 1rem;
+  width: 50%;
+  left: 25%;
+  border-top: 1px solid black;
+}
+
+#lexiconModal .hi {
+  font-weight: 500;
+}
+
+#lexiconModal .pageHeading {
+  display: none;
+  font-size: 2rem;
+}
+
+#lexiconModal .Arabic {
+  font-family: 'lexicon';
+  font-weight: 500;
+  direction: rtl;
+  font-size: 24px;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+#lexiconModal .itype {
+  font-weight: 600;
+}
+
+#lexiconModal .itype::after {
+  content: ': ';
+}
+
+#lexiconModal .orthdal {
+  display: none;
+  color: rgb(0, 255, 0);
+}
+
 .after\:absolute::after {
   content: var(--tw-content);
   position: absolute;
@@ -3631,6 +3691,10 @@ svg {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
 .focus\:border-black\/10:focus {
   border-color: rgb(0 0 0 / 0.1);
 }
@@ -4459,4 +4523,3 @@ svg {
          break-inside: avoid;
   }
 }
-
diff --git a/static/fonts/lexicon/lexicon.ttf b/static/fonts/lexicon/lexicon.ttf