From 8071cfe45442fce8a789ceeb86e10e50c5e677fa Mon Sep 17 00:00:00 2001
From: Akhmad Salafudin <axmad386@gmail.com>
Date: Sat, 23 Oct 2021 12:00:11 +0700
Subject: [PATCH] fix: tolltip toggle description

---
 src/component/TajweedView.svelte | 178 ++++++++++++++++++-------------
 1 file changed, 102 insertions(+), 76 deletions(-)

diff --git a/src/component/TajweedView.svelte b/src/component/TajweedView.svelte
index c875f42..1a6a7ba 100644
--- a/src/component/TajweedView.svelte
+++ b/src/component/TajweedView.svelte
@@ -9,6 +9,8 @@
 	export let surah: IAya[];
 	interface IToolTip {
 		tajweed: ITajweed;
+		showDesc: boolean;
+		disableDismiss: boolean;
 		position: {
 			x: number;
 			y: number;
@@ -16,6 +18,8 @@
 		};
 	}
 	let tooltip: IToolTip = {
+		disableDismiss: false,
+		showDesc: false,
 		tajweed: null,
 		position: {
 			x: 0,
@@ -30,6 +34,8 @@
 
 	const showToolTip = (e: MouseEvent, tajweed: ITajweed) => {
 		tooltip = {
+			disableDismiss: false,
+			showDesc: false,
 			tajweed,
 			position: {
 				x: e.clientX,
@@ -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[] = [
 			{
@@ -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}