so as you can see I have created a component. And I am reporting to my script that I am listening for a window event listener(message). I actually want to make that every time this EventListnere is called, that I add a new Notification under gold notify box. How would I archive that in svelte. ?
<script>
import Notification from './Components/Notification.svelte';
let type,text,time,title,icon,position,top,progress
let slideIn = true;
let showNoti;
$: if(!slideIn) {
slideIn === false;
}
window.addEventListener('message', (event) => {
showNoti = true;
if(showNoti) {
let data = event.data;
type = data.type
text = data.text
time = data.time
title = data.title
icon = data.icons;
top = data.top;
progress = data.progress;
position = data.position;
if(type == "success") {
type = "success"
}else if(type == "error") {
type = "error"
}else if(type == "money") {
type = "money"
}
setTimeout(() => {
slideIn = false;
}, time);
}
});
</script>
<main>
{#if showNoti}
<div class="notif-container {position}" style="top: {top}">
<div class="notify_box">
<Notification text={text} type={type} time={time} title={title} icon={icon} position={position} top={top} progress={progress} slideIn={slideIn} />
</div>
</div>
{/if}
</main>
<style>
</style>
If you want to have a series of notification blocks, you need to use an array. Add the notifications to this array and simply loop over it to show them.
<script>
let notifications = []
window.addEventlistener() {
// create here a new notifications object and add it to the array
// make sure to have an assignment to 'notifications'
notifciation = [...notifications, newNotification];
}
</script>
{#each notification as notification}
<!-- add markup here -->
<Notification {...notification} />
{/each}
The code here uses {...notification} to pass the props to the components, this works as long as the property on the component and the property in the object are exactly the same.