From 85eda69bebc3a4150f64df112fb9874b4ee801f9 Mon Sep 17 00:00:00 2001
From: Tio <sangvictim@gmail.com>
Date: Fri, 6 May 2022 20:05:45 +0700
Subject: [PATCH] feat: add share button (#67)

* feat: add share button

* fix: adjust icon size

Co-authored-by: Akhmad Salafudin <axmad386@gmail.com>
---
 src/component/TajweedView.svelte            | 61 +++++++++++-------
 src/component/button/share.svelte           | 71 +++++++++++++++++----
 src/routes/[source]/surah/[surah_id].svelte |  8 +--
 src/routes/index.svelte                     |  8 ++-
 src/store/Setting.ts                        |  2 +-
 5 files changed, 103 insertions(+), 47 deletions(-)

diff --git a/src/component/TajweedView.svelte b/src/component/TajweedView.svelte
index 86c58e3..5969e51 100644
--- a/src/component/TajweedView.svelte
+++ b/src/component/TajweedView.svelte
@@ -94,26 +94,30 @@
 </script>
 
 {#each surah as aya}
-	<div class="group border-b py-2">
+	<div class="group flex flex-row border-b py-2">
 		{#if aya.sura_id != 1 || aya.aya_number != 1}
 			<div
-				class="font-arab text-xl overscroll-auto dark:text-white "
+				class="font-arab text-xl overscroll-auto dark:text-white pr-5 flex flex-1 flex-col"
 				id={aya.aya_number.toString()}
 			>
-				<span
-					style="font-size: {$Setting$.ukuranAyat}px; line-height: {Number($Setting$.ukuranAyat) +
-						50}px "
-				>
-					{#each aya.tajweed as tajweed}
-						<i
-							class={tajweed.class ? 'cursor-pointer ' + tajweed.class : ''}
-							title={tajweed.class}
-							on:click={(e) => showToolTip(e, tajweed)}
-							>{aya.aya_text.slice(tajweed.start, tajweed.end)}</i
-						>
-					{/each}
-				</span>
-				<AyaNumber number={aya.aya_number} />
+				<div class="flex flex-row align-middle">
+					<span
+						style="font-size: {$Setting$.ukuranAyat}px; line-height: {Number($Setting$.ukuranAyat) +
+							50}px "
+					>
+						{#each aya.tajweed as tajweed}
+							<i
+								class={tajweed.class ? 'cursor-pointer ' + tajweed.class : ''}
+								title={tajweed.class}
+								on:click={(e) => showToolTip(e, tajweed)}
+								>{aya.aya_text.slice(tajweed.start, tajweed.end)}</i
+							>
+						{/each}
+					</span>
+					<div class="p-2">
+						<AyaNumber number={aya.aya_number} />
+					</div>
+				</div>
 				<p
 					class="font-sans mt-2 pt-2 dark:text-white  {$Setting$.showTranslate
 						? 'h-auto leading-normal'
@@ -124,19 +128,28 @@
 				</p>
 			</div>
 			{#if surahDetail}
-				<div class="hidden group-hover:flex mt-2 justify-between">
-					<Share
-						text={decodeURIComponent(
-							`${aya.aya_text} %0A${aya.translation_aya_text} (${surahDetail.surat_name}:${aya.aya_number})`
-						)}
-					/>
+				<div class="flex flex-col items-center space-y-2">
+					<button on:click={() => alert('fitur masih dalam tahap pengembangan')}>
+						<!-- ini kondisi nonaktif -->
+						<Icon icon="uit:bookmark" color="#626262" width="24" height="24" />
+
+						<!-- ini ketika di bookmark -->
+						<!-- <Icon icon="bi:bookmark-check-fill" width="24" height="24" /> -->
+					</button>
+
 					<button on:click={() => saveLastReading(aya)}>
 						{#if $Setting$.last_read_surah == aya.sura_id.toString() && $Setting$.last_read_aya == aya.aya_number.toString()}
-							<Icon icon="emojione-monotone:open-book" color="#5C7AEA" width="30" height="30" />
+							<Icon icon="emojione-monotone:open-book" color="#5C7AEA" width="24" height="24" />
 						{:else}
-							<Icon icon="emojione-monotone:open-book" color="#B2B1B9" width="30" height="30" />
+							<Icon icon="emojione-monotone:open-book" color="#626262" width="24" height="24" />
 						{/if}
 					</button>
+
+					<Share
+						text={decodeURIComponent(
+							`${aya.aya_text} %0A${aya.translation_aya_text} (${surahDetail.surat_name}:${aya.aya_number})`
+						)}
+					/>
 				</div>
 			{/if}
 		{/if}
diff --git a/src/component/button/share.svelte b/src/component/button/share.svelte
index 459c706..5abe75a 100644
--- a/src/component/button/share.svelte
+++ b/src/component/button/share.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { onMount } from 'svelte';
+	import { scale } from 'svelte/transition';
 	import Icon from '@iconify/svelte';
 	export let text;
 	export let link = '';
@@ -8,6 +10,33 @@
 	export let related = '';
 
 	let url_whatsapp, url_telegram, url_facebook, url_twitter;
+
+	let show = false; // menu state
+	let menu = null; // menu wrapper DOM reference
+
+	onMount(() => {
+		const handleOutsideClick = (event) => {
+			if (show && !menu.contains(event.target)) {
+				show = false;
+			}
+		};
+
+		const handleEscape = (event) => {
+			if (show && event.key === 'Escape') {
+				show = false;
+			}
+		};
+
+		// add events when element is added to the DOM
+		document.addEventListener('click', handleOutsideClick, false);
+		document.addEventListener('keyup', handleEscape, false);
+
+		// remove events when element is removed from the DOM
+		return () => {
+			document.removeEventListener('click', handleOutsideClick, false);
+			document.removeEventListener('keyup', handleEscape, false);
+		};
+	});
 	$: {
 		url_whatsapp = encodeURI(`https://api.whatsapp.com/send/?text=${text}`);
 		url_telegram = encodeURI(`https://t.me/share/url?url=${link}&text=${text}`);
@@ -18,18 +47,32 @@
 	}
 </script>
 
-<div class="flex space-x-3 items-center">
-	<span class="dark:text-white text-sm">Share:</span>
-	<a href={url_whatsapp}>
-		<Icon icon="logos:whatsapp" width="25" height="25" />
-	</a>
-	<a href={url_telegram}>
-		<Icon icon="bx:bxl-telegram" color="#40b3e0" width="25" height="25" />
-	</a>
-	<a href={url_facebook}>
-		<Icon icon="bi:facebook" color="#1877f2" width="25" height="25" />
-	</a>
-	<a href={url_twitter}>
-		<Icon icon="logos:twitter" color="#40b3e0" width="25" height="25" />
-	</a>
+<div class="relative" bind:this={menu}>
+	<div>
+		<button on:click={() => (show = !show)}>
+			<Icon icon="cil:share-alt" color="#626262" width="24" height="24" />
+		</button>
+
+		{#if show}
+			<div
+				in:scale={{ duration: 100, start: 0.95 }}
+				out:scale={{ duration: 75, start: 0.95 }}
+				class="absolute right-0 bottom-8 p-2 mt-1 bg-gray-200
+			rounded shadow-md flex space-y-3 items-center flex-col"
+			>
+				<a href={url_whatsapp} class="block">
+					<Icon icon="logos:whatsapp" width="24" height="24" />
+				</a>
+				<a href={url_telegram}>
+					<Icon icon="bx:bxl-telegram" color="#40b3e0" width="24" height="24" />
+				</a>
+				<a href={url_facebook}>
+					<Icon icon="bi:facebook" color="#1877f2" width="24" height="24" />
+				</a>
+				<a href={url_twitter}>
+					<Icon icon="logos:twitter" color="#40b3e0" width="24" height="24" />
+				</a>
+			</div>
+		{/if}
+	</div>
 </div>
diff --git a/src/routes/[source]/surah/[surah_id].svelte b/src/routes/[source]/surah/[surah_id].svelte
index e21a5c7..f1c234d 100644
--- a/src/routes/[source]/surah/[surah_id].svelte
+++ b/src/routes/[source]/surah/[surah_id].svelte
@@ -31,7 +31,6 @@
 	import TajweedView from '$component/TajweedView.svelte';
 	import { Setting$ } from '$store/Setting';
 	import { goto } from '$app/navigation';
-	import Share from '$component/button/share.svelte';
 	import Header from '$component/header.svelte';
 	import ModalGoToAyat from '$component/modal/ModalGoToAyat.svelte';
 
@@ -43,7 +42,7 @@
 	const saveLastReading = ({ detail: { sura_id, aya_number } }: { detail: IAya }) => {
 		$Setting$.last_read_aya = aya_number.toString();
 		$Setting$.last_read_surah = sura_id.toString();
-		alert('Data berhasil disimpan');
+		alert('berhasil menandai sebagai ayat terakhir dibaca');
 	};
 
 	const nextSurah = () => {
@@ -58,7 +57,7 @@
 
 <Header />
 <div
-	class="flex justify-between items-center px-4 pt-4 pb-2 border-b sticky top-14 bg-white dark:bg-dark"
+	class="flex justify-between items-center px-4 pt-4 pb-2 border-b sticky top-14 bg-white dark:bg-dark z-10"
 >
 	<div class="w-8 cursor-pointer dark:text-white" on:click={() => prevSurah()}>
 		{#if surahDetail.id > 1}
@@ -92,9 +91,6 @@
 				>{surahDetail.id == 1 ? '1. ' : ''}{basmalah01}</span
 			>
 		{/if}
-		<div class="hidden group-hover:flex mt-2 justify-between">
-			<Share text={decodeURIComponent(`${basmalah} %0A${basmalah01}`)} />
-		</div>
 	</div>
 {/if}
 <div class="p-4">
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 100524d..ab387ec 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -22,6 +22,10 @@
 		}
 	};
 
+	const gotoBookMark = () => {
+		alert('fitur masih dalam tahap pengembangan');
+	};
+
 	const gotoTasbih = () => {
 		goto('tasbih');
 	};
@@ -55,7 +59,7 @@
 			<div class="flex flex-col items-center">
 				<div
 					class="mb-1 flex items-center justify-center cursor-pointer bg-white rounded-[10px] w-11 h-11"
-					on:click={gotoLastRead}
+					on:click={gotoBookMark}
 				>
 					<img src="icon/bookmark.svg" alt="setting" class="w-6 h-6" />
 				</div>
@@ -123,7 +127,7 @@
 				</div>
 			</div>
 			<span
-				class="font-arab inline-block align-baseline font-bold dark:text-white"
+				class="font-arab inline-block align-baseline dark:text-white"
 				style="font-size: {$Setting$.ukuranAyat}px;">{surah.surat_text}</span
 			>
 		</a>
diff --git a/src/store/Setting.ts b/src/store/Setting.ts
index caa5fbc..db06071 100644
--- a/src/store/Setting.ts
+++ b/src/store/Setting.ts
@@ -14,7 +14,7 @@ const defaultSetting: ISetting = {
 	last_read_aya: '',
 	last_read_surah: '',
 	theme: 'light',
-	ukuranAyat: 16,
+	ukuranAyat: 26,
 	ukuranTerjemahan: 12,
 	showTranslate: true
 };