Skip to content

Commit

Permalink
feat: add share button (#67)
Browse files Browse the repository at this point in the history 
* feat: add share button

* fix: adjust icon size

Co-authored-by: Akhmad Salafudin <axmad386@gmail.com>
  • Loading branch information
@sangvictim @axmad386
sangvictim and axmad386 committed May 6, 2022
1 parent a543fff commit 85eda69
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 47 deletions.
61 changes: 37 additions & 24 deletions src/component/TajweedView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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}
Expand Down
71 changes: 57 additions & 14 deletions src/component/button/share.svelte
View file
Original file line number Diff line number Diff line change
@@ -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 = '';
Expand All @@ -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}`);
Expand All @@ -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>
8 changes: 2 additions & 6 deletions src/routes/[source]/surah/[surah_id].svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = () => {
Expand All @@ -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}
Expand Down Expand Up @@ -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">
Expand Down
8 changes: 6 additions & 2 deletions src/routes/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
}
};
const gotoBookMark = () => {
alert('fitur masih dalam tahap pengembangan');
};
const gotoTasbih = () => {
goto('tasbih');
};
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/store/Setting.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const defaultSetting: ISetting = {
last_read_aya: '',
last_read_surah: '',
theme: 'light',
ukuranAyat: 16,
ukuranAyat: 26,
ukuranTerjemahan: 12,
showTranslate: true
};
Expand Down

0 comments on commit 85eda69

Please sign in to comment.