Skip to content

Commit

Permalink
wip: morphology modal (#216)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marwan
marwan authored Dec 3, 2024
1 parent 1490c44 commit 69857c2
Show file tree
Hide file tree
Showing 15 changed files with 249 additions and 209 deletions.
4 changes: 2 additions & 2 deletions src/components/display/verses/SingleArabicVerse.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
export let key;
import Spinner from '$svgs/Spinner.svelte';
import { fetchSingleVerseData } from '$utils/fetchData';
import { fetchVersesData } from '$utils/fetchData';
import { __fontType } from '$utils/stores';
import { splitDelimiter } from '$data/websiteSettings';
$: fontType = [1, 2, 3].includes($__fontType) ? 1 : 4;
$: fetchData = fetchSingleVerseData(key, fontType);
$: fetchData = fetchVersesData({ verses: key, fontType: fontType, skipSave: true });
</script>

{#await fetchData}
Expand Down
14 changes: 12 additions & 2 deletions src/components/display/verses/WordsBlock.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import Tooltip from '$ui/FlowbiteSvelte/tooltip/Tooltip.svelte';
import { goto } from '$app/navigation';
import { selectableDisplays, selectableThemes } from '$data/options';
import { __currentPage, __fontType, __displayType, __userSettings, __audioSettings, __morphologyKey, __verseKey, __websiteTheme } from '$utils/stores';
import { __currentPage, __fontType, __displayType, __userSettings, __audioSettings, __morphologyKey, __verseKey, __websiteTheme, __morphologyModalVisible } from '$utils/stores';
import { loadFont } from '$utils/loadFont';
import { wordAudioController } from '$utils/audioController';
import { updateSettings } from '$utils/updateSettings';
Expand Down Expand Up @@ -33,10 +33,20 @@
// 2. On other pages, play word's audio
// 3. On any page, show verse options dropdown for end verse icon
function wordClickHandler(props) {
// For morphology page
if ($__currentPage === 'morphology' && props.type === 'word') {
__morphologyKey.set(props.key);
goto(`/morphology/${props.key}`, { replaceState: false });
} else {
}
// If the user clicks on a word in a non-Morphology page
// else if ($__currentPage !== 'morphology' && props.type === 'word') {
// __morphologyKey.set(props.key);
// __morphologyModalVisible.set(true);
// }
// All other options
else {
__verseKey.set(props.key);
if (props.type === 'word') {
wordAudioController({
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/HomepageTabs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import { buttonClasses, buttonOutlineClasses } from '$data/commonClasses';
import { checkTimeSpecificChapters } from '$utils/checkTimeSpecificChapters';
import { term } from '$utils/terminologies';
import { fetchSingleVerseData } from '$utils/fetchData';
import { fetchVersesData } from '$utils/fetchData';
import { splitDelimiter } from '$data/websiteSettings';
// CSS classes for chapter cards and tabs
Expand All @@ -33,7 +33,7 @@
}
// Reactive variable to fetch bookmarks data when on the bookmarks tab
$: fetchData = activeTab === 3 && totalBookmarks !== 0 ? fetchSingleVerseData($__userBookmarks.toString(), 1) : null;
$: fetchData = activeTab === 3 && totalBookmarks !== 0 ? fetchVersesData({ verses: $__userBookmarks.toString(), fontType: 1 }) : null;
$: totalBookmarks = $__userBookmarks.length;
$: totalNotes = Object.keys($__userNotes).length;
Expand Down
15 changes: 15 additions & 0 deletions src/components/ui/Modals/MorphologyModal.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script>
import Modal from '$ui/FlowbiteSvelte/modal/Modal.svelte';
import MorphologyView from '$src/routes/morphology/[key]/MorphologyView.svelte';
import { __morphologyModalVisible, __morphologyKey } from '$utils/stores';
$: wordKeyData = {
key: $__morphologyKey
};
</script>

<Modal id="morphologyModal" bind:open={$__morphologyModalVisible} size="lg" class="rounded-3xl text-black theme" bodyClass="p-6" dialogClass="fixed top-0 start-0 end-0 h-[-webkit-fill-available] md:inset-0 md:h-full z-50 w-full p-4 flex" center outsideclose>
<div class="flex flex-col space-y-4 text-sm max-h-[80vh] overflow-y-scroll pr-2">
<MorphologyView data={wordKeyData} />
</div>
</Modal>
17 changes: 0 additions & 17 deletions src/components/ui/SettingsDrawer/QuranFontSelector.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,8 @@
import { selectableFontTypes } from '$data/options';
import { updateSettings } from '$utils/updateSettings';
import { selectedRadioClasses } from '$data/commonClasses';
// fetching verse data
// $: fetchData = fetchVersesData('1:1', $__fontType, 1, 1, true);
</script>

<!-- <div id="exampleVerse" class="scale-70 my-6 justify-center">
{#await fetchData}
<Spinner size="10" />
{:then fetchData}
<div class="flex flex-wrap justify-center direction-rtl">
{#each Object.entries(fetchData) as [key, value]}
<WordsBlock {key} {value} exampleVerse="true" />
{/each}
</div>
{:catch error}
<p>Error fetching the example verse.</p>
{/await}
</div> -->

<div class="grid gap-3 w-full theme-grayscale">
{#each Object.entries(selectableFontTypes) as [id, font]}
{#if !font.disallowedIn.includes($__currentPage)}
Expand Down
2 changes: 2 additions & 0 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
import SettingsSelectorModal from '$ui/Modals/SettingsSelectorModal.svelte';
import NewSiteChangelogModal from '$ui/Modals/NewSiteChangelogModal.svelte';
import VerseTranslationModal from '$ui/Modals/VerseTranslationModal.svelte';
import MorphologyModal from '$ui/Modals/MorphologyModal.svelte';
import { __websiteOnline, __currentPage, __chapterNumber, __settingsDrawerHidden, __wakeLockEnabled, __userToken, __fontType, __wordTranslation, __verseTranslations, __selectedDisplayId, __mushafMinimalModeEnabled, __topNavbarVisible, __bottomToolbarVisible } from '$utils/stores';
import { checkOldBookmarks } from '$utils/checkOldBookmarks';
Expand Down Expand Up @@ -154,6 +155,7 @@
<!-- <LexiconModal /> -->
<NewSiteChangelogModal />
<VerseTranslationModal />
<MorphologyModal />
<BottomToolbar />
<slot />
</div>
12 changes: 10 additions & 2 deletions src/routes/bookmarks/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@
import PageHead from '$misc/PageHead.svelte';
import Individual from '$display/verses/modes/Individual.svelte';
import Spinner from '$svgs/Spinner.svelte';
import { __currentPage, __fontType, __displayType, __wordTranslation, __verseTranslations, __wordTransliteration, __userBookmarks } from '$utils/stores';
import { __currentPage, __fontType, __displayType, __userBookmarks, __wordTranslation, __wordTransliteration, __verseTranslations } from '$utils/stores';
import { fetchVersesData } from '$utils/fetchData';
import { errorLoadingDataMessage } from '$data/websiteSettings';
// fetch verses whenever there's a change
$: fetchData = $__userBookmarks.length > 0 && fetchVersesData($__userBookmarks.toString(), $__fontType, $__wordTranslation, $__wordTransliteration, $__verseTranslations);
$: fetchData =
$__userBookmarks.length > 0 &&
fetchVersesData({
verses: $__userBookmarks.toString(),
fontType: $__fontType,
wordTranslation: $__wordTranslation,
wordTransliteration: $__wordTransliteration,
verseTranslations: $__verseTranslations
});
// only allow display type 1 & 2, and don't save the layout in settings
if ([3, 4, 5].includes($__displayType)) $__displayType = 1;
Expand Down
159 changes: 3 additions & 156 deletions src/routes/morphology/[key]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,69 +2,8 @@
export let data;
import PageHead from '$misc/PageHead.svelte';
import Spinner from '$svgs/Spinner.svelte';
import WordsBlock from '$display/verses/WordsBlock.svelte';
import Table from '$display/morphology/Table.svelte';
import { quranMetaData } from '$data/quranMeta';
import { apiEndpoint, errorLoadingDataMessage } from '$data/websiteSettings';
import { __currentPage, __fontType, __wordTranslation, __wordTransliteration, __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, fetchWordsData1, fetchWordSummary;
let chapter, verse, word;
// Split the key to get chapter, verse, and word numbers
$: {
const keySplit = data.key.split(':');
chapter = +keySplit[0];
verse = +keySplit[1];
word = keySplit.length === 2 ? 1 : +keySplit[2];
if (isNaN(word)) word = 1;
__morphologyKey.set(`${chapter}:${verse}:${word}`);
}
// Fetch verse data based on chapter and verse
$: fetchData = fetchVersesData(`${chapter}:${verse}`, $__fontType, $__wordTranslation, $__wordTransliteration);
// Fetch words data for morphology
$: {
fetchWordsData = (async () => {
try {
const response = await fetch(`${apiEndpoint}/morphology?words=${$__morphologyKey}&word_translation=${$__wordTranslation}`);
const data = await response.json();
fetchWordsData1 = data.data;
return data.data;
} catch (error) {
console.error(errorLoadingDataMessage, error);
return [];
}
})();
// Fetch word summary data
fetchWordSummary = (async () => {
try {
const response = await fetch(`${apiEndpoint}/morphology/summary?word=${$__morphologyKey}&version=2`);
const data = await response.json();
return data.data;
} catch (error) {
console.error(errorLoadingDataMessage, error);
return {};
}
})();
}
// Set the word root and show the lexicon modal
function showLexiconModal() {
const root = fetchWordsData1?.[0]?.morphology?.root?.root;
if (root) {
__wordRoot.set(root);
__lexiconModalVisible.set(true);
}
}
import MorphologyView from './MorphologyView.svelte';
import { __currentPage, __morphologyKey, __displayType } from '$utils/stores';
// Restrict display types to 1 or 2
if (![1, 2].includes($__displayType)) $__displayType = 1;
Expand All @@ -75,96 +14,4 @@

<PageHead title={`Morphology ${$__morphologyKey}`} />

<div class="space-y-12 my-8">
<div id="verse-navigator" class="flex flex-row justify-center space-x-8 text-sm theme">
<!-- previous chapter -->
{#if verse === 1 && chapter > 1}
<a href="/morphology/{+chapter - 1}:1" class={buttonOutlineClasses}>{@html '&#x2190;'} {term('chapter')} {+chapter - 1}</a>
{/if}
<!-- next verse -->
{#if verse > 1}
<a href="/morphology/{chapter}:{+verse - 1}" class={buttonOutlineClasses}>{@html '&#x2190;'} {term('verse')} {chapter}:{+verse - 1}</a>
{/if}
<!-- previous verse -->
{#if verse < quranMetaData[chapter].verses}
<a href="/morphology/{chapter}:{+verse + 1}" class={buttonOutlineClasses}>{term('verse')} {chapter}:{+verse + 1} {@html '&#x2192;'}</a>
{/if}
<!-- next chapter -->
{#if verse === quranMetaData[chapter].verses && chapter < 114}
<a href="/morphology/{+chapter + 1}:1" class={buttonOutlineClasses}>{term('chapter')} {+chapter + 1} {@html '&#x2192;'}</a>
{/if}
</div>
<div id="verse">
{#await fetchData}
<Spinner />
{:then fetchData}
<div class="flex flex-wrap justify-center direction-rtl">
{#each Object.entries(fetchData) as [key, value]}
<WordsBlock {key} {value} />
{/each}
</div>
{:catch error}
<p>{errorLoadingDataMessage}</p>
{/await}
</div>
<div id="word-summary" class="text-center opacity-70 mx-auto md:w-3/4 text-sm pb-6 border-b-2 border-black/10 md:text-lg theme">
{#await fetchWordSummary}
<span>...</span>
{:then fetchWordSummary}
<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}
</div>
<div id="word-details" class="flex flex-col space-y-6">
{#await fetchWordsData}
<Spinner />
{:then fetchWordsData}
{#if !Object.values(fetchWordsData[0].morphology.verbs).every((o) => o === null)}
<div id="word-forms" class="pb-8 border-b-2 border-black/10 theme">
{#if Object.keys(fetchWordsData[0].morphology.root.words_with_same_root).length > 0}
<div class="flex flex-col">
<div id="different-verbs" class="theme-grayscale">
<div class="mx-auto text-center">
<div class="relative grid gap-8 grid-cols-2 row-gap-5 md:row-gap-8 md:grid-cols-6">
{#each Object.entries(fetchWordsData[0].morphology.verbs) as [key, value]}
{#if value !== null}
<div class="flex flex-col py-5 duration-300 transform bg-white border rounded-3xl shadow-sm text-center hover:-translate-y-2">
<div class="flex items-center justify-center mb-2">
<p id="verb-1" class="text-xl md:text-2xl pb-4 leading-5 arabic-font-{$__fontType}">{value}</p>
</div>
<p class="text-xs text-gray-900 capitalize">{key.replace('_', ' ')}</p>
</div>
{/if}
{/each}
</div>
</div>
</div>
</div>
{:else}
<div class="text-center my-8 text-sm opacity-70">Root data for this word is not available.</div>
{/if}
</div>
{/if}
<div id="word-root-data" class="pb-8 border-b-2 border-black/10 theme">
<Table wordData={fetchWordsData[0].morphology.root.words_with_same_root} tableType={1} />
</div>
<div id="exact-word-data" class="pb-8 border-b-2 border-black/10 theme">
<Table wordData={fetchWordsData[0].morphology.exact_words_in_quran} tableType={2} />
</div>
{:catch error}
<p>{errorLoadingDataMessage}</p>
{/await}
</div>
</div>
<MorphologyView {data} />
Loading

0 comments on commit 69857c2

Please sign in to comment.