Skip to content

Commit

Permalink
fix: tolltip toggle description
Browse files Browse the repository at this point in the history
  • Loading branch information
@axmad386
axmad386 committed Oct 23, 2021
1 parent 0d404b0 commit 8071cfe
Showing 1 changed file with 102 additions and 76 deletions.
178 changes: 102 additions & 76 deletions src/component/TajweedView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,17 @@
export let surah: IAya[];
interface IToolTip {
tajweed: ITajweed;
showDesc: boolean;
disableDismiss: boolean;
position: {
x: number;
y: number;
inverseX: boolean;
};
}
let tooltip: IToolTip = {
disableDismiss: false,
showDesc: false,
tajweed: null,
position: {
x: 0,
Expand All @@ -30,6 +34,8 @@
const showToolTip = (e: MouseEvent, tajweed: ITajweed) => {
tooltip = {
disableDismiss: false,
showDesc: false,
tajweed,
position: {
x: e.clientX,
Expand All @@ -39,6 +45,20 @@
};
};
const hideToolTip = () => {
if (!tooltip.disableDismiss) {
tooltip.tajweed = null;
}
};
const showDescription = () => {
tooltip.disableDismiss = true;
tooltip.showDesc = true;
setTimeout(() => {
tooltip.disableDismiss = false;
}, 500);
};
$: surah = surah.map((aya) => {
let sliceAya: ITajweed[] = [
{
Expand Down Expand Up @@ -113,90 +133,96 @@
{#if tooltip?.tajweed?.class}
<div
class="fixed flex justify-center items-center bg-black bg-opacity-25 inset-0"
on:click={() => (tooltip.tajweed = null)}
on:click={hideToolTip}
>
<div class="relative h-full w-full">
<div
class="capitalize font-semibold border rounded bg-white p-4 whitespace-nowrap shadow absolute {tooltip
<button
on:click={showDescription}
class="inline-flex flex-row items-center capitalize font-semibold border rounded bg-white p-4 whitespace-nowrap shadow absolute {tooltip
.position.inverseX
? '-translate-x-full'
: ''} -translate-y-full"
style={`top: ${tooltip.position.y}px; left: ${tooltip.position.x}px; border-color: var(--color-${tooltip.tajweed.class})`}
>
{tooltip.tajweed.class.replace(/-/g, ' ')}
</div>
<div
class="capitalize border rounded bg-white p-4 shadow fixed bottom-0 left-0 right-0"
style={`border-color: var(--color-${tooltip.tajweed.class})`}
>
<p class="whitespace-nowrap font-semibold">
Cara Membaca {tooltip.tajweed.class.replace(/-/g, ' ')} :
</p>

{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'madd wajib' || tooltip.tajweed.class.replace(/-/g, ' ') === 'madd-jaiz'}
<p>
mad bermakna memanjangkan suara dengan lanjutan menurut kedudukan salah satu dari huruf
mad.
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'madd arid lissukun'}
<p>
bacaan panjang disebabkan huruf mad yakni ya, wawu dan alif bertemu waqaf sehingga harus
berhenti. Panjang mad arid lissukun yaitu boleh dibaca 1 alif ( 2 harakat ), 2 alif ( 4
harakat ) atau 3 alif ( 6 harakat ).
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'ghunnah'}
<p>
Dengungkanlah mim dan nun yang bertasydid.. dan namakanlah kedua huruf tersebut dengan
huruf ghunnah dan tampakkanlah
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'idgham mimi'}
<p>
Apabila mim sukun(مْ) bertemu dengan mim yang berharokat (م), maka cara membacanya
adalah seperti menyuarakan mim rangkap atau ditasyidkan dan wajib dibaca dengung.
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'ikhfa syafawi'}
<p>
Apabila mim mati (مْ) bertemu dengan ba (ب), maka cara membacanya harus dibunyikan
samar-samar di bibir dan didengungkan.
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'idgham bighunnah'}
<p>
Jika nun mati atau tanwin bertemu huruf huruf seperti: mim (م), nun (ن) wau (و), dan ya'
(ي), ia harus dibaca dengan ditahan.
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'idgham bilaghunnah'}
<p>
Jika nun mati atau tanwin bertemu huruf huruf seperti: mim (م), nun (ن) wau (و), dan ya'
(ي), ia harus dibaca dengan ditahan. Jika nun mati atau tanwin bertemu huruf-huruf
seperti ra' (ر) dan lam (ل), maka ia dibaca tanpa ditahan.
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'ikhfa'}
<p>
Jika nun mati atau tanwin bertemu dengan huruf-huruf seperti ta'(ت), tsa' (ث), jim (ج),
dal (د), żal (ذ), zai (ز), sin (س), syin (ش), sad (ص), dad (ض), tha (ط), zha (ظ), fa'
(ﻑ), qaf (ق), dan kaf (ك), ia harus dibaca samar-samar
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'iqlab'}
<p>
Hukum ini terjadi apabila nun mati atau tanwin bertemu dengan huruf ba' (ب). Dalam
bacaan ini, bacaan nun mati atau tanwin berubah menjadi bunyi mim.
</p>
{/if}
{#if tooltip.tajweed.class.replace(/-/g, ' ') === 'qalqalah'}
<p>
bacaan pada huruf-huruf qalqalah dengan bunyi seakan-akan berdetik atau memantul. Huruf
qalqalah ada lima yaitu ba (ب), jim (ج), dal (د), ta (ط), dan qaf (ق).
{tooltip.tajweed.class.replace(/-/g, ' ')} &nbsp;<Icon
icon="bi:question-circle-fill"
inline
/>
</button>
{#if tooltip.showDesc}
<div
class="capitalize border rounded bg-white p-4 shadow fixed bottom-0 left-0 right-0"
style={`border-color: var(--color-${tooltip.tajweed.class})`}
>
<p class="whitespace-nowrap font-semibold">
Cara Membaca {tooltip.tajweed.class.replace(/-/g, ' ')} :
</p>
{/if}
</div>

{#if tooltip.tajweed.class === 'madd-wajib' || tooltip.tajweed.class === 'madd-jaiz'}
<p>
mad bermakna memanjangkan suara dengan lanjutan menurut kedudukan salah satu dari
huruf mad.
</p>
{/if}
{#if tooltip.tajweed.class === 'madd-arid-lissukun'}
<p>
bacaan panjang disebabkan huruf mad yakni ya, wawu dan alif bertemu waqaf sehingga
harus berhenti. Panjang mad arid lissukun yaitu boleh dibaca 1 alif ( 2 harakat ), 2
alif ( 4 harakat ) atau 3 alif ( 6 harakat ).
</p>
{/if}
{#if tooltip.tajweed.class === 'ghunnah'}
<p>
Dengungkanlah mim dan nun yang bertasydid.. dan namakanlah kedua huruf tersebut dengan
huruf ghunnah dan tampakkanlah
</p>
{/if}
{#if tooltip.tajweed.class === 'idgham-mimi'}
<p>
Apabila mim sukun(مْ) bertemu dengan mim yang berharokat (م), maka cara membacanya
adalah seperti menyuarakan mim rangkap atau ditasyidkan dan wajib dibaca dengung.
</p>
{/if}
{#if tooltip.tajweed.class === 'ikhfa-syafawi'}
<p>
Apabila mim mati (مْ) bertemu dengan ba (ب), maka cara membacanya harus dibunyikan
samar-samar di bibir dan didengungkan.
</p>
{/if}
{#if tooltip.tajweed.class === 'idgham-bighunnah'}
<p>
Jika nun mati atau tanwin bertemu huruf huruf seperti: mim (م), nun (ن) wau (و), dan
ya' (ي), ia harus dibaca dengan ditahan.
</p>
{/if}
{#if tooltip.tajweed.class === 'idgham-bilaghunnah'}
<p>
Jika nun mati atau tanwin bertemu huruf huruf seperti: mim (م), nun (ن) wau (و), dan
ya' (ي), ia harus dibaca dengan ditahan. Jika nun mati atau tanwin bertemu huruf-huruf
seperti ra' (ر) dan lam (ل), maka ia dibaca tanpa ditahan.
</p>
{/if}
{#if tooltip.tajweed.class === 'ikhfa'}
<p>
Jika nun mati atau tanwin bertemu dengan huruf-huruf seperti ta'(ت), tsa' (ث), jim
(ج), dal (د), żal (ذ), zai (ز), sin (س), syin (ش), sad (ص), dad (ض), tha (ط), zha (ظ),
fa' (ﻑ), qaf (ق), dan kaf (ك), ia harus dibaca samar-samar
</p>
{/if}
{#if tooltip.tajweed.class === 'iqlab'}
<p>
Hukum ini terjadi apabila nun mati atau tanwin bertemu dengan huruf ba' (ب). Dalam
bacaan ini, bacaan nun mati atau tanwin berubah menjadi bunyi mim.
</p>
{/if}
{#if tooltip.tajweed.class === 'qalqalah'}
<p>
bacaan pada huruf-huruf qalqalah dengan bunyi seakan-akan berdetik atau memantul.
Huruf qalqalah ada lima yaitu ba (ب), jim (ج), dal (د), ta (ط), dan qaf (ق).
</p>
{/if}
</div>
{/if}
</div>
</div>
{/if}
Expand Down

0 comments on commit 8071cfe

Please sign in to comment.