<div class="notification-list"></div>
<div class="notification-list"></div>
{
"language": "en-US",
"data": {
"notifications": [
{
"component": "BrowserNotification",
"data": {
"content": "You are using an outdated browser. Please upgrade your browser to improve your experience and security.",
"actions": [
{
"link": "https://google.com",
"text": "Learn more",
"attributes": "target=\"_blank\""
}
],
"button": {
"text": "OK"
}
}
},
{
"component": "CookieNotification",
"data": {
"content": "We use Cookies to improve your web experience. Read our <a href=\"#\"> cookie policy </a>",
"button": {
"text": "ACCEPT"
}
},
"sgShouldShow": true
}
]
}
}
.notification-list {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: map-get($zindex, 'notification-list');
display: flex;
flex-direction: column;
padding: 0 16px 16px;
@include bp(md-min) {
bottom: 20px;
padding: 0 20px;
width: 100%;
}
}
.notification-list__item {
transition-duration: $transition-duration;
transition-timing-function: $transition-easing-out;
transition-property: transform, opacity;
transform: translateY(1em);
opacity: 0;
}
.notification-list__item.is-open {
opacity: 1;
transform: translateY(0);
transition-timing-function: $transition-easing-in;
}
import Component from '../../component/component';
import BrowserNotification from '../browser-notification/browser-notification';
import CookieNotification from '../cookie-notification/cookie-notification';
import Notification, { INotification } from '../notification/notification';
import './notification-list.scss';
export default class NotificationList extends Component {
static initSelector: string = '.notification-list';
public notifications: IGotoAndPlayNotificationComponent[];
public notifModifier: boolean = false;
constructor(element: HTMLElement) {
super(element);
this.notifications = window.gotoAndPlay.notifications;
this.init();
}
getNotificationClassByName(name: string): typeof Notification {
switch (name) {
case 'CookieNotification':
return CookieNotification;
case 'BrowserNotification':
return BrowserNotification;
case 'Notification':
default:
return Notification;
}
}
init(): void {
if (this.notifications.length) {
for (const item of this.notifications) {
const classInstance: typeof Notification = this.getNotificationClassByName(item.component);
if (classInstance.shouldShow || item.sgShouldShow) {
this.add(classInstance, item.data);
if (item.sgShouldShow) {
this.notifModifier = true;
}
}
}
}
}
add<T extends typeof Notification>(component: T, notification: INotification): InstanceType<T> {
const notif: JQuery = component.render(notification, 'notification-list__item').appendTo(this.element);
const instance: InstanceType<T> = component.create(notif[0]);
notif.trigger('enhance');
return instance;
}
}