<rg-alerts>
<div class="alerts">
<div each="{ opts.alerts }" class="alerts__alert { 'alerts__alert--' + type }" if="{ isvisible }" οnclick="{ select }">
{ text }
<button class="button button--close" if="{ dismissable != false }" οnclick="{ parent.dismiss }">
×
</button>
</div>
</div>
<script>
this.on('update', () => {
if (!opts.alerts) return
opts.alerts.forEach(alert => {
if (typeof alert.isvisible === 'undefined') alert.isvisible = true
if (alert.timeout) {
alert.startTimer = () => {
alert.timer = setTimeout(() => {
this.dismiss({
item: alert
})
}, alert.timeout)
}
alert.startTimer()
}
})
})
this.dismiss = e => {
const alert = e.item
alert.isvisible = false
clearTimeout(alert.timer)
this.trigger('dismiss', alert)
this.update()
}
this.select = e => {
const alert = e.item
if (alert.onclick) alert.onclick(alert)
this.trigger('select', alert)
}
</script>
</rg-alerts>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Riot Alert Example: Page Switching</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/blazecss/latest/blaze.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Alert</h2>
<div class="demo">
<rg-alerts alerts="{ alerts }"></rg-alerts>
<button class="button" οnclick="{ addAlert() }">Add alert</button>
</div>
<!-- scripts we need -->
<script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
<!-- riot tags -->
<script src="rg-alerts.tag" type="riot/tag"></script>
<!-- mount this app -->
<script>
riot.mount('rg-alerts');
this.alerts = [{
type: 'primary',
text: 'Look! Something you should know about.'
}, {
type: 'secondary',
text: 'Warning! Something sort of bad happened.',
dismissable: false
}, {
type: 'success',
text: 'Success! Well done.'
}, {
type: 'error',
text: 'Error! Something bad happened.',
dismissable: true,
timeout: 1000
}];
this.addAlert = () => {
this.alerts.push({
type: 'error',
text: 'Eeek! Something broke...'
})
};
</script>
</body>
</html>