You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.3 KiB
115 lines
3.3 KiB
3 years ago
|
<app-notification>
|
||
|
|
<div class="toast-wrapper toast-wrapper--right" if={ state.items.length > 0 }>
|
||
|
|
<div
|
||
|
|
id={ item.id } class={ item.classes.join(' ') }
|
||
|
|
each={ item in state.items }
|
||
|
|
onclick={ (event) => { this.handleClick(event, item) } }>
|
||
|
|
|
||
|
|
<div class="toast__body">
|
||
|
|
{ item.message }
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import { v4 as uuidv4 } from 'uuid'
|
||
|
|
import notificationStore from './../stores/notification'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* notification
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @author Björn Hase
|
||
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||
|
|
* @link https://gitea.tentakelfabrik.de/herrhase/shiny-dashboard
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
export default {
|
||
|
|
|
||
|
|
state: {
|
||
|
|
items: [],
|
||
|
|
timeout: 2500
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* on mounted
|
||
|
|
*
|
||
|
|
* @param {object} props
|
||
|
|
* @param {object} state
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
onMounted(props, state)
|
||
|
|
{
|
||
|
|
// adding service for notifications and listen to "update"
|
||
|
|
notificationStore.on('update', (item) => {
|
||
|
|
|
||
|
|
// adding attributes
|
||
|
|
item.id = 'toast-' + uuidv4()
|
||
|
|
item.classes = [
|
||
|
|
'toast',
|
||
|
|
'toast--' + item.type
|
||
|
|
]
|
||
|
|
|
||
|
|
// create timeout to remove notification
|
||
|
|
item.timeout = setTimeout(() => {
|
||
|
|
this.removeItem(item)
|
||
|
|
}, this.state.timeout)
|
||
|
|
|
||
|
|
this.state.items.push(item)
|
||
|
|
this.update()
|
||
|
|
|
||
|
|
// add animation
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
this.$('#' + item.id).classList.add('toast--animation')
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* remove single item
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @param {object} item
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
removeItem(item)
|
||
|
|
{
|
||
|
|
// adding event if animationend remove html element
|
||
|
|
this.$('#' + item.id).addEventListener('transitionend', () => {
|
||
|
|
|
||
|
|
// find item in state and remove it
|
||
|
|
for (let i = 0; i < this.state.items.length; i++) {
|
||
|
|
if (this.state.items[i].id === item.id) {
|
||
|
|
clearTimeout(this.state.items[i].timeout)
|
||
|
|
this.state.items.splice(i, 1)
|
||
|
|
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.update()
|
||
|
|
})
|
||
|
|
|
||
|
|
// add animation
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
this.$('#' + item.id).classList.remove('toast--animation')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* remove item by clicked on it
|
||
|
|
*
|
||
|
|
* @param {[type]} event
|
||
|
|
* @param {[type]} item
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
handleClick(event, item)
|
||
|
|
{
|
||
|
|
this.removeItem(item)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</app-notification>
|