Skip to content

Commit 7b2c298

Browse files
committed
re-named "lib" folder to "utils", word and design types are now stored in LS, made some design changes
1 parent fa04276 commit 7b2c298

21 files changed

+111
-67
lines changed

src/App.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
2-
import "./lib/userSettings";
3-
import { userSettingsStore } from "./lib/stores";
2+
import "./utils/userSettings";
3+
import { userSettingsStore } from "./utils/stores";
44
import { Router, Link, Route } from "svelte-routing";
55
import Home from "./views/Home.svelte";
66
import Chapter from "./views/Chapter.svelte";

src/components/Selectors.svelte

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
<script>
22
import { Link } from "svelte-routing";
3-
import { currentPageStore, chapterNumberStore, wordTypeStore, displayTypeStore, pageURLStore } from "../lib/stores";
4-
import { quranMetaData } from "../lib/quranMeta";
5-
import { displayOptions } from "../lib/options";
3+
import { currentPageStore, chapterNumberStore, wordTypeStore, displayTypeStore, pageURLStore } from "../utils/stores";
4+
import { quranMetaData } from "../utils/quranMeta";
5+
import { displayOptions } from "../utils/options";
6+
import { updateSettings } from "../utils/updateSettings";
67
78
// manually toggling dropdowns with Svelte because for some reason Flowbite JS isn't working, will figure it out later
8-
let chaptersDropdownVisible = false;
9-
let versesDropdownVisible = false;
9+
let isChaptersDropdownVisible = false;
10+
let isVersesDropdownVisible = false;
1011
1112
const buttonCSS = "text-white bg-gray-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-1.5 text-center inline-flex items-center daark:bg-blue-600 daark:hover:bg-blue-700 daark:focus:ring-blue-800";
12-
13-
$: selectedDisplay = displayOptions[$displayTypeStore];
1413
</script>
1514

1615
<div class="flex flex-col md:flex-row justify-between py-8 space-y-4 md:space-y-0">
1716
<div class="flex flex-row space-x-2 {$currentPageStore === 'chapter' ? 'block' : 'hidden'}">
1817
<!-- chapters selector -->
1918
<div>
20-
<button on:click={() => (chaptersDropdownVisible = !chaptersDropdownVisible)} id="chaptersDropdownButton" class={buttonCSS} type="button"
19+
<button on:click={() => (isChaptersDropdownVisible = !isChaptersDropdownVisible)} id="chaptersDropdownButton" class={buttonCSS} type="button"
2120
>{$chapterNumberStore}. {quranMetaData[$chapterNumberStore].transliteration}
2221
<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
2322
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
2423
</svg>
2524
</button>
2625

2726
<!-- Dropdown menu -->
28-
<div id="chaptersDropdown" class="z-10 absolute {chaptersDropdownVisible === true ? 'block' : 'hidden'} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 daark:bg-gray-700">
27+
<div id="chaptersDropdown" class="z-10 absolute {isChaptersDropdownVisible === true ? 'block' : 'hidden'} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 daark:bg-gray-700">
2928
<ul class="py-2 text-sm text-gray-700 overflow-y-scroll max-h-80 daark:text-gray-200" aria-labelledby="chaptersDropdownButton">
3029
{#each { length: 114 } as _, i}
3130
<li>
@@ -38,22 +37,21 @@
3837

3938
<!-- verses selector -->
4039
<div>
41-
<button on:click={() => (versesDropdownVisible = !versesDropdownVisible)} id="versesDropdownButton" data-dropdown-toggle="versesDropdown" class={buttonCSS} type="button"
40+
<button on:click={() => (isVersesDropdownVisible = !isVersesDropdownVisible)} id="versesDropdownButton" data-dropdown-toggle="versesDropdown" class={buttonCSS} type="button"
4241
>Verses
4342
<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
4443
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
4544
</svg>
4645
</button>
4746

4847
<!-- Dropdown menu -->
49-
<div id="versesDropdown" class="z-10 absolute {versesDropdownVisible === true ? 'block' : 'hidden'} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 daark:bg-gray-700">
48+
<div id="versesDropdown" class="z-10 absolute {isVersesDropdownVisible === true ? 'block' : 'hidden'} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 daark:bg-gray-700">
5049
<ul class="py-2 text-sm text-gray-700 overflow-y-scroll max-h-80 daark:text-gray-200" aria-labelledby="versesDropdownButton">
5150
<li>
5251
<Link to="/{$chapterNumberStore}" on:click={() => pageURLStore.set(Math.random())} class="block px-4 py-2 hover:bg-gray-100 daark:hover:bg-gray-600 daark:hover:text-white">All Verses</Link>
5352
</li>
5453
{#each { length: quranMetaData[$chapterNumberStore].verses } as _, verse}
5554
<li>
56-
<!-- <a href="#{$chapterNumberStore}:{i + 1}" class="block px-4 py-2 hover:bg-gray-100 daark:hover:bg-gray-600 daark:hover:text-white">Verse {i + 1}</a> -->
5755
<Link to="/{$chapterNumberStore}/{verse + 1}" on:click={() => pageURLStore.set(Math.random())} class="block px-4 py-2 hover:bg-gray-100 daark:hover:bg-gray-600 daark:hover:text-white">Verse {verse + 1}</Link>
5856
</li>
5957
{/each}
@@ -64,15 +62,17 @@
6462

6563
<div class="flex flex-row space-x-2">
6664
<!-- word type selector -->
67-
<select on:change={(event) => wordTypeStore.set(event.target.value)} bind:value={$wordTypeStore} class={buttonCSS}>
68-
<option value="1" class="bg-black text-white">Uthmani</option>
69-
<option value="2" class="bg-black text-white">IndoPak</option>
65+
<select on:change={(event) => updateSettings("wordType", Number(event.target.value))} bind:value={$wordTypeStore} class={buttonCSS}>
66+
<option value={1} class="bg-black text-white">Uthmani</option>
67+
<option value={2} class="bg-black text-white">IndoPak</option>
7068
</select>
7169

7270
<!-- display type selector -->
73-
<select bind:value={selectedDisplay} on:change={(event) => displayTypeStore.set(event.target.selectedIndex)} class={buttonCSS}>
71+
<select bind:value={$displayTypeStore} on:change={(event) => updateSettings("displayType", Number(event.target.selectedIndex) + 1)} class={buttonCSS}>
7472
{#each displayOptions as displayOption}
75-
<option value={displayOption}>{displayOption.displayName}</option>
73+
{#if displayOption.displayType > 0}
74+
<option value={displayOption.displayType}>{displayOption.displayName}</option>
75+
{/if}
7676
{/each}
7777
</select>
7878
</div>

src/components/verses/DisplayChapterVerses.svelte

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
import NormalDisplay from "./displays/NormalDisplay.svelte";
77
import ContinuousNormalDisplay from "./displays/ContinuousNormalDisplay.svelte";
88
import SideBySideDisplay from "./displays/SideBySideDisplay.svelte";
9-
10-
import { quranMetaData } from "../../lib/quranMeta";
11-
import { displayTypeStore, chapterNumberStore, chapterDataStore } from "../../lib/stores";
9+
import { quranMetaData } from "../../utils/quranMeta";
10+
import { displayTypeStore, chapterNumberStore, chapterDataStore } from "../../utils/stores";
1211
1312
const displayComponents = [
14-
{ displayType: 0, displayComponent: WBWDisplay, displayStyle: "" },
15-
{ displayType: 1, displayComponent: NormalDisplay, displayStyle: "" },
16-
{ displayType: 2, displayComponent: ContinuousNormalDisplay, displayStyle: "text-align: center; direction: rtl;" },
17-
{ displayType: 3, displayComponent: SideBySideDisplay, displayStyle: "" },
13+
{ displayType: 0, displayComponent: null },
14+
{ displayType: 1, displayComponent: WBWDisplay },
15+
{ displayType: 2, displayComponent: NormalDisplay },
16+
{ displayType: 3, displayComponent: ContinuousNormalDisplay },
17+
{ displayType: 4, displayComponent: SideBySideDisplay },
1818
];
1919
2020
const chapterTotalVerses = quranMetaData[$chapterNumberStore].verses;
@@ -30,14 +30,17 @@
3030
// importing the same component to be re-used when the "Load Next Verses" button is pressed
3131
import("./DisplayChapterVerses.svelte").then((res) => (DisplayChapterVerses = res.default));
3232
33+
// max verses to load when the next set is requested
34+
const versesToLoad = 20;
35+
3336
// get the last verse number from last prop value
3437
const lastVerseOnPage = endVerse;
3538
3639
// remove the existing button
3740
document.getElementById("loadNextVersesButton").remove();
3841
3942
// define the new starting and ending range
40-
(start = lastVerseOnPage + 1), (end = start + 10);
43+
(start = lastVerseOnPage + 1), (end = start + versesToLoad);
4144
4245
// if the end verse set above is greater than total verses, then set it as total verses
4346
if (end > chapterTotalVerses) end = chapterTotalVerses;
@@ -50,11 +53,9 @@
5053
}
5154
</script>
5255

53-
<div style={displayComponents[$displayTypeStore].displayStyle}>
54-
{#each Array.from(Array(endVerse + 1).keys()).slice(startVerse) as verse}
55-
<svelte:component this={displayComponents[$displayTypeStore].displayComponent} key={`${$chapterNumberStore}:${verse}`} value={$chapterDataStore[`${$chapterNumberStore}:${verse}`]} />
56-
{/each}
57-
</div>
56+
{#each Array.from(Array(endVerse + 1).keys()).slice(startVerse) as verse}
57+
<svelte:component this={displayComponents[$displayTypeStore].displayComponent} key={`${$chapterNumberStore}:${verse}`} value={$chapterDataStore[`${$chapterNumberStore}:${verse}`]} />
58+
{/each}
5859

5960
<!-- only show the button when the last verse on page is less than total verses in chapter -->
6061
{#if endVerse < chapterTotalVerses}

src/components/verses/DisplayIndividualVerses.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import WBWDisplay from "./displays/WBWDisplay.svelte";
66
import NormalDisplay from "./displays/NormalDisplay.svelte";
77
8-
import { displayTypeStore } from "../../lib/stores";
8+
import { displayTypeStore } from "../../utils/stores";
99
</script>
1010

11-
<svelte:component this={$displayTypeStore === 0 ? WBWDisplay : NormalDisplay} {key} {value} />
11+
<svelte:component this={$displayTypeStore === 1 ? WBWDisplay : NormalDisplay} {key} {value} />

src/components/verses/VersesButtons.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
22
export let key;
33
4-
import { userSettingsStore } from "../../lib/stores";
5-
import { updateBookmarks } from "../../lib/updateBookmarks";
4+
import { userSettingsStore } from "../../utils/stores";
5+
import { updateBookmarks } from "../../utils/updateBookmarks";
66
77
// update userBookmarks whenever the userSettingsStore changes
88
$: userBookmarks = JSON.parse($userSettingsStore)["userBookmarks"];

src/components/verses/displays/ContinuousNormalDisplay.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
22
export let key, value;
33
4-
import { wordTypeStore } from "../../../lib/stores";
5-
import { pageNumberKeys } from "../../../lib/quranMeta";
4+
import { wordTypeStore } from "../../../utils/stores";
5+
import { pageNumberKeys } from "../../../utils/quranMeta";
66
77
let pageNumber,
88
isFirstOfPage = false;

src/components/verses/displays/NormalDisplay.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
export let key, value;
33
44
import VersesButtons from "../VersesButtons.svelte";
5-
import { wordTypeStore } from "../../../lib/stores";
6-
import { selectableVerseTranslations } from "../../../lib/options";
5+
import { wordTypeStore } from "../../../utils/stores";
6+
import { selectableVerseTranslations } from "../../../utils/options";
77
</script>
88

99
<div id={key} class="flex flex-col py-8 space-y-8 border-b">

src/components/verses/displays/SideBySideDisplay.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script>
22
export let key, value;
33
4-
import { wordTypeStore } from "../../../lib/stores";
5-
import { selectableVerseTranslations } from "../../../lib/options";
4+
import { wordTypeStore } from "../../../utils/stores";
5+
import { selectableVerseTranslations } from "../../../utils/options";
66
</script>
77

8-
<div id={key} class="flex flex-row-reverse justify-between py-8 space-x-4 border-b">
8+
<div id={key} class="grid grid-cols-2 gap-x-8 py-8 border-b">
99
<!-- words -->
10-
<div class="flex flex-row-reverse flex-wrap">
10+
<div class="flex flex-row-reverse flex-wrap order-last">
1111
{#each { length: value.meta.words } as _, word}
1212
<span class="arabic-font-{$wordTypeStore} text-4xl leading-normal py-2 pl-2">{value.words.arabic.split("|")[word]}</span>
1313
{/each}

src/components/verses/displays/WBWDisplay.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
export let key, value;
33
44
import VersesButtons from "../VersesButtons.svelte";
5-
import { wordTypeStore } from "../../../lib/stores";
6-
import { selectableVerseTranslations } from "../../../lib/options";
5+
import { wordTypeStore } from "../../../utils/stores";
6+
import { selectableVerseTranslations } from "../../../utils/options";
77
</script>
88

99
<div id={key} class="flex flex-col py-8 space-y-8 border-b">

src/lib/options.js renamed to src/utils/options.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
export const displayOptions = [
2-
{ displayType: 0, displayName: "WBW", displayComponent: "WBWDisplay" },
3-
{ displayType: 1, displayName: "Normal", displayComponent: "NormalDisplay" },
4-
{ displayType: 2, displayName: "Continuous", displayComponent: "ContinuousNormalDisplay" },
5-
{ displayType: 3, displayName: "Side By Side", displayComponent: "SideBySideDisplay" },
2+
{ displayType: 0, displayComponent: null },
3+
{ displayType: 1, displayName: "WBW", displayComponent: "WBWDisplay" },
4+
{ displayType: 2, displayName: "Normal", displayComponent: "NormalDisplay" },
5+
{ displayType: 3, displayName: "Continuous", displayComponent: "ContinuousNormalDisplay" },
6+
{ displayType: 4, displayName: "Side By Side", displayComponent: "SideBySideDisplay" },
67
];
78

89
export const selectableVerseTranslations = {
File renamed without changes.
File renamed without changes.
Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { writable } from "svelte/store";
22

3+
const localSettings = JSON.parse(localStorage.getItem("userSettings"));
4+
35
// to store the current page
46
export const currentPageStore = writable("home");
57

@@ -10,13 +12,13 @@ export const chapterNumberStore = writable(1);
1012
export const chapterDataStore = writable(null);
1113

1214
// to store the word type - Uthmani, IndoPak, etc...
13-
export const wordTypeStore = writable(1);
15+
export const wordTypeStore = writable(localSettings.displaySettings.wordType);
1416

1517
// to store the display type - WBW, Normal, Continuous, etc...
16-
export const displayTypeStore = writable(0);
18+
export const displayTypeStore = writable(localSettings.displaySettings.displayType);
1719

1820
// to store the local user settings from LocalStorage
19-
export const userSettingsStore = writable(JSON.stringify(JSON.parse(localStorage.getItem("userSettings"))));
21+
export const userSettingsStore = writable(JSON.stringify(localSettings));
2022

2123
// to store a random number (for now) when changing verses due to some issues while re-rendering the component (probably because I'm still learning Svelte)
2224
export const pageURLStore = writable(null);

src/lib/updateBookmarks.js renamed to src/utils/updateBookmarks.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { userSettingsStore } from "../lib/stores";
1+
import { userSettingsStore } from "../utils/stores";
22

33
// function to add/remove a bookmark
44
export function updateBookmarks(event) {

src/utils/updateSettings.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { wordTypeStore, displayTypeStore } from "./stores";
2+
3+
// function to update website settings
4+
export function updateSettings(type, value) {
5+
// get the settings from localStorage
6+
const localSettings = JSON.parse(localStorage.getItem("userSettings"));
7+
8+
switch (type) {
9+
case "wordType":
10+
wordTypeStore.set(value);
11+
localSettings.displaySettings.wordType = value;
12+
break;
13+
case "displayType":
14+
displayTypeStore.set(value);
15+
localSettings.displaySettings.displayType = value;
16+
break;
17+
}
18+
19+
// update the settings back into localStorage
20+
localStorage.setItem("userSettings", JSON.stringify(localSettings));
21+
}

src/lib/userSettings.js renamed to src/utils/userSettings.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
// default user settings
22
const defaultLocalSettings = {
3+
displaySettings: {
4+
displayType: 1, // normal
5+
wordType: 1, // uthmani
6+
},
37
userBookmarks: [], // no bookmarks by default,
48
};
59

610
// setting default user settings in localStorage
711
(async function () {
8-
let userSettings = localStorage.getItem("userSettings");
12+
const userSettings = localStorage.getItem("userSettings");
913
if (userSettings === undefined || userSettings === null || userSettings === "") {
1014
localStorage.setItem("userSettings", JSON.stringify(defaultLocalSettings));
1115
}
File renamed without changes.

src/views/Bookmarks.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
22
import Selectors from "../components/Selectors.svelte";
33
import DisplayIndividualVerses from "../components/verses/DisplayIndividualVerses.svelte";
4-
import { websiteTitle, apiEndpoint } from "../lib/websiteSettings";
5-
import { currentPageStore, wordTypeStore, displayTypeStore } from "../lib/stores";
4+
import { websiteTitle, apiEndpoint } from "../utils/websiteSettings";
5+
import { currentPageStore, wordTypeStore, displayTypeStore } from "../utils/stores";
66
77
let userSettings = JSON.parse(localStorage.getItem("userSettings"));
88
let userBookmarks = userSettings["userBookmarks"];

src/views/Chapter.svelte

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
// props from router
33
export let chapter, startVerse, endVerse;
44
5+
import { onMount } from "svelte";
56
import Selectors from "../components/Selectors.svelte";
67
import DisplayChapterVerses from "../components/verses/DisplayChapterVerses.svelte";
7-
import { parseURL } from "../lib/parseURL";
8-
import { websiteTitle, apiEndpoint } from "../lib/websiteSettings";
9-
import { quranMetaData } from "../lib/quranMeta";
10-
import { currentPageStore, chapterNumberStore, chapterDataStore, wordTypeStore, displayTypeStore, pageURLStore } from "../lib/stores";
8+
import { parseURL } from "../utils/parseURL";
9+
import { websiteTitle, apiEndpoint } from "../utils/websiteSettings";
10+
import { quranMetaData } from "../utils/quranMeta";
11+
import { currentPageStore, chapterNumberStore, chapterDataStore, wordTypeStore, displayTypeStore, pageURLStore } from "../utils/stores";
1112
1213
// max verses to load if total verses in chapter are more than this
1314
let maxVersesThreshold = 10;
@@ -43,6 +44,19 @@
4344
console.log($pageURLStore, $displayTypeStore);
4445
}
4546
47+
// auto-load the next set of verses when the user almost reaches the bottom
48+
onMount(() => {
49+
try {
50+
document.addEventListener("scroll", function (e) {
51+
if (window.innerHeight + window.pageYOffset >= document.body.scrollHeight - 2000) {
52+
// document.querySelector("#loadNextVersesButton > button").click();
53+
}
54+
});
55+
} catch (error) {
56+
// we know the error... but can make this better.
57+
}
58+
});
59+
4660
currentPageStore.set("chapter");
4761
</script>
4862

@@ -56,7 +70,8 @@
5670
{#await fetchData}
5771
<div class="flex items-center justify-center pt-28">loading...</div>
5872
{:then}
59-
<div>
73+
<!-- need custom stylings if display type is continuous -->
74+
<div style={$displayTypeStore === 3 ? "text-align: center; direction: rtl;" : ""}>
6075
<DisplayChapterVerses {startVerse} {endVerse} />
6176
</div>
6277
{:catch error}

src/views/Home.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
22
import { Link } from "svelte-routing";
3-
import { websiteTitle } from "../lib/websiteSettings";
4-
import { quranMetaData } from "../lib/quranMeta";
5-
import { currentPageStore } from "../lib/stores";
3+
import { websiteTitle } from "../utils/websiteSettings";
4+
import { quranMetaData } from "../utils/quranMeta";
5+
import { currentPageStore } from "../utils/stores";
66
77
currentPageStore.set("home");
88
</script>

src/views/Supplications.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script>
22
import Selectors from "../components/Selectors.svelte";
33
import DisplayIndividualVerses from "../components/verses/DisplayIndividualVerses.svelte";
4-
import { websiteTitle, apiEndpoint } from "../lib/websiteSettings";
5-
import { currentPageStore, wordTypeStore, displayTypeStore } from "../lib/stores";
4+
import { websiteTitle, apiEndpoint } from "../utils/websiteSettings";
5+
import { currentPageStore, wordTypeStore, displayTypeStore } from "../utils/stores";
66
77
const supplicationVerses = "2:127,2:128,2:201,2:250,2:286,3:8,3:9,3:16,3:53,3:147,3:191,3:192,3:193,3:194,5:83,5:114,7:23,7:47,7:89,7:126,10:85,10:86,14:38,14:40,14:41,17:24,18:10,18:14,20:45,21:83,21:87,23:109,23:118,25:65,25:66,25:74,28:24,40:7,40:8,40:9,46:15,59:10,60:4,60:5,66:8";
88

0 commit comments

Comments
 (0)