updated the search page to include more translations (#214)

Author: marwan

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?version=17" />
+		<link crossorigin="anonymous" rel="stylesheet" href="%sveltekit.assets%/css/global.css?version=19" />
 
 		<!-- 
 		If the user's browser do not support Optional chaining (?.), redirect to old v3 website

src/components/display/verses/translations/Layout.svelte

@@ -7,6 +7,10 @@
 	import { __userSettings, __verseTranslations, __currentPage } from '$utils/stores';
 	import { selectableVerseTranslations, rightToLeftVerseTranslations } from '$data/options';
 
+	// Retrieve URL parameters
+	const params = new URLSearchParams(window.location.search);
+	const searchQuery = params.get('query') === null ? '' : params.get('query');
+
 	const translationFootnoteClasses = `hidden my-2 footnote-block px-2 py-2 border-2 border-gray-200 rounded-2xl theme-grayscale footnote-${value.meta.chapter}-${value.meta.verse}-${verseTranslationID}`;
 	const footnoteSupClasses = 'ml-1 mt-1 px-2 py-1 bg-gray-200 rounded-full font-semibold cursor-pointer system-font';
 
@@ -65,6 +69,26 @@
 		return rightToLeftVerseTranslations.includes(selectableVerseTranslations[id].resource_id);
 	}
 
+	// Function to highlight the searched text in verse text
+	function highlightSearchedText(searchQuery, verseText) {
+		const regex = new RegExp(`(?<!<[^>]*)\\b(${searchQuery})\\b(?![^<]*>)`, 'gi');
+		const result = verseText.replace(regex, (match) => `<b>${match}</b>`);
+		return result;
+	}
+
+	// Function to modify the verse text
+	function verseTextModifier(verseText) {
+		let updatedVerseText = verseText;
+
+		// If query parameter was set (from the search page), highlight the query in the verse translation
+		if (params.get('query') !== null) {
+			updatedVerseText = highlightSearchedText(searchQuery, updatedVerseText);
+		}
+
+		updatedVerseText = updatedVerseText.replace(/<sup/g, `<sup onclick='supClick(this)' title='Show footnote' data-chapter='${value.meta.chapter}' data-verse='${value.meta.verse}' data-translation=${verseTranslationID} class='${footnoteSupClasses}'`);
+		return updatedVerseText;
+	}
+
 	// function detectVersesInFootnote(footnote) {
 	// 	const regex = /\d{0,9}(:\d{0,9})*/g;
 	// 	let matches = footnote.match(regex);
@@ -79,7 +103,7 @@
 
 <div class="flex flex-col print:break-inside-avoid">
 	<span class="{isTranslationRTL(verseTranslation.resource_id) && 'direction-rtl'} {isTranslationUrduOrPersian(verseTranslation.resource_id) && 'font-Urdu'}">
-		{@html verseTranslation.text.replace(/<sup/g, `<sup onclick='supClick(this)' title='Show footnote' data-chapter='${value.meta.chapter}' data-verse='${value.meta.verse}' data-translation=${verseTranslationID} class='${footnoteSupClasses}' `)}
+		{@html verseTextModifier(verseTranslation.text)}
 	</span>
 
 	<!-- translation footnotes -->

src/components/display/verses/translations/Translations.svelte

@@ -7,22 +7,20 @@
 	import { __currentPage, __verseKey, __verseTranslations, __verseTranslationData, __chapterData, __userSettings } from '$utils/stores';
 	import { fetchVerseTranslationData } from '$utils/fetchData';
 
-	$: fontSizes = JSON.parse($__userSettings).displaySettings.fontSizes;
 	let verseTranslationData;
 
+	$: fontSizes = JSON.parse($__userSettings).displaySettings.fontSizes;
 	$: verseTranslationClasses = `verseTranslationText flex flex-col space-y-4 leading-normal ${isBody ? 'theme' : ''} ${fontSizes.verseTranslationText}`;
 
 	// Setting the variables depending on the page
 	$: chapterData = $__currentPage === 'mushaf' ? JSON.parse(localStorage.getItem('pageData')) : $__chapterData;
 	$: chapterToFetch = $__currentPage === 'mushaf' ? parseInt($__verseKey.split(':')[0], 10) : value.meta.chapter;
 
 	// Fetch verse translations for pages other than chapter
-	$: {
-		if ($__currentPage !== 'chapter') {
-			(async () => {
-				verseTranslationData = await fetchVerseTranslationData(chapterToFetch);
-			})();
-		}
+	$: if ($__currentPage !== 'chapter') {
+		(async () => {
+			verseTranslationData = await fetchVerseTranslationData(chapterToFetch, $__verseTranslations.toString());
+		})();
 	}
 </script>
 

src/components/svgs/Translation.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let size = 4;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" class="w-{size} h-{size}" fill="currentColor"  id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="M10,15h-.33l-.219,1.655c-.327,2.477-2.458,4.345-4.957,4.345h-.494c0,1.654-1.346,3-3,3-.552,0-1-.447-1-1s.448-1,1-1,1-.448,1-1v-1c0-.553,.448-1,1-1h1.494c1.499,0,2.778-1.12,2.974-2.606l.334-2.524c.065-.497,.49-.869,.991-.869h1.207c-.082-.807-2.458-5.722-3.777-7.353C4.774,3.715,2.806,2.389,.8,1.979,.259,1.869-.09,1.342,.02,.8,.13,.259,.659-.092,1.2,.021,3.68,.525,6.085,2.129,7.8,4.419c1.268,1.566,4.2,7.161,4.2,8.581,0,.97-.701,2-2,2ZM18.441,2.9c-.038,0-.071,.026-.079,.063l-.787,3.437h1.757l-.811-3.437c-.009-.037-.041-.063-.079-.063Zm5.559,.1v5c0,1.657-1.343,3-3,3h-5c-1.657,0-3-1.343-3-3v-3.853l-1.818-2.459c-.488-.686,.064-1.715,.904-1.688h8.914c1.657,0,3,1.343,3,3Zm-2.696,5.644l-1.363-5.948c-.267-1.569-2.627-1.535-2.898-.049l-1.413,5.993c-.104,.439,.23,.86,.681,.86h0c.324,0,.606-.223,.681-.539l.274-1.161h2.409l.265,1.157c.073,.318,.356,.543,.682,.543h.002c.449,0,.782-.418,.682-.856Zm2.696,7.356v5c0,1.657-1.343,3-3,3H12.086c-.841,.027-1.392-1.003-.904-1.688l1.818-2.459v-3.853c0-1.657,1.343-3,3-3h5c1.657,0,3,1.343,3,3Zm-2,.116c0-.34-.276-.616-.616-.616h-2.257v-.384c0-.34-.276-.616-.616-.616h-.021c-.34,0-.616,.276-.616,.616v.384h-2.257c-.34,0-.616,.276-.616,.616v.021c0,.34,.276,.616,.616,.616h4.191c-.111,.963-.484,2.151-1.303,3.071-.276-.31-.507-.648-.692-1-.106-.202-.318-.325-.545-.325-.464,0-.769,.492-.553,.903,.225,.43,.501,.843,.83,1.22-.539,.328-1.189,.559-1.977,.635-.32,.031-.568,.293-.568,.614v.021c0,.365,.316,.648,.679,.614,1.146-.107,2.079-.485,2.832-1.022,.749,.533,1.671,.913,2.808,1.022,.364,.035,.68-.248,.68-.613v-.021c0-.316-.24-.583-.555-.613-.792-.075-1.442-.31-1.984-.639,.99-1.135,1.485-2.591,1.607-3.866h.316c.34,0,.616-.276,.616-.616v-.021Z"/>
+</svg>

src/components/ui/BottomToolbar/DisplayChangeButton.svelte

@@ -1,14 +1,12 @@
 <script>
 	import Eye from '$svgs/Eye.svelte';
 	import Tooltip from '$ui/FlowbiteSvelte/tooltip/Tooltip.svelte';
+	import DisplayTypeSelector from '$ui/SettingsDrawer/DisplayTypeSelector.svelte';
 	import { __chapterNumber, __displayType, __currentPage, __selectedDisplayId, __settingsSelectorModal } from '$utils/stores';
 	import { disabledClasses } from '$data/commonClasses';
-
-	const radioClasses = 'font-normal';
-	const dropdownClasses = 'w-52 p-3 space-y-3 text-sm max-h-64 overflow-y-scroll theme-grayscale';
 </script>
 
-<button id="changeDisplayButton" type="button" title="Display Type" class="inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-lightGray group {['chapter', 'mushaf'].includes($__currentPage) ? 'opacity-70' : disabledClasses}" on:click={() => __settingsSelectorModal.set({ visible: true, title: 'Display Type' })}>
+<button id="changeDisplayButton" type="button" title="Display Type" class="inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-lightGray group {['chapter', 'mushaf'].includes($__currentPage) ? 'opacity-70' : disabledClasses}" on:click={() => __settingsSelectorModal.set({ component: DisplayTypeSelector, visible: true, title: 'Display Type' })}>
 	<Eye />
 	<span class="sr-only">Display Type</span>
 </button>

src/components/ui/Modals/QuranNavigationModal.svelte

@@ -250,7 +250,7 @@
 							<span class="text-xs font-semibold {searchResults && 'pt-2'}">Search Quran</span>
 							<div class={linkClasses}>
 								<span>{@html '&#10230'}</span>
-								<a href="/search?text={searchedKey}&translation=0" class={linkTextClasses}>"{searchedKey}"</a>
+								<a href="/search?query={searchedKey}" class={linkTextClasses}>"{searchedKey}"</a>
 							</div>
 						{/if}
 					</div>

src/components/ui/Modals/SettingsSelectorModal.svelte

@@ -1,11 +1,10 @@
 <script>
 	import Modal from '$ui/FlowbiteSvelte/modal/Modal.svelte';
-	import DisplayTypeSelector from '$ui/SettingsDrawer/DisplayTypeSelector.svelte';
 	import { __settingsSelectorModal } from '$utils/stores';
 	import { getModalTransition } from '$utils/getModalTransition';
 </script>
 
 <Modal id="settingsSelectorModal" bind:open={$__settingsSelectorModal.visible} transitionParams={getModalTransition('bottom')} size="xs" class="!rounded-b-none md:!rounded-3xl theme" bodyClass="p-6" position="bottom" center outsideclose>
 	<h3 id="modal-title" class="mb-8 text-xl font-medium text-black">{$__settingsSelectorModal.title}</h3>
-	<div class="max-h-[70vh] overflow-y-scroll pr-2"><DisplayTypeSelector /></div>
+	<div class="max-h-[70vh] w-full overflow-y-scroll pr-2"><svelte:component this={$__settingsSelectorModal.component} /></div>
 </Modal>

src/components/ui/SettingsDrawer/VerseTranslationSelector.svelte

@@ -16,7 +16,7 @@
 					{#each Object.values(selectableVerseTranslations) as translation}
 						{#if translation.language_id === language.language_id}
 							<div class="flex items-center w-full">
-								<Checkbox on:click={() => updateSettings({ type: 'verseTranslation', value: translation.resource_id })} custom>
+								<Checkbox class="w-full" on:click={() => updateSettings({ type: 'verseTranslation', value: translation.resource_id })} custom>
 									<div class="inline-flex justify-between items-center p-5 w-full text-gray-500 bg-white rounded-lg border border-gray-200 cursor-pointer peer-checked:border-primary-600 peer-checked:text-primary-600 hover:text-gray-600 hover:bg-gray-100 {$__verseTranslations.includes(translation.resource_id) && selectedRadioClasses}">
 										<div class="w-full">{translation.resource_name}</div>