<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": "Our website uses cookies to make your browsing experience better. By using our site you agree to our <a href='#' class=\"text\">Cookie Policy</a>.",
"button": {
"text": "I Agree"
}
}
}
]
}
}
.notification-list {
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: map-get($zindex, 'notification-list');
@include bp(sm-min) {
top: 0;
bottom: auto;
}
}
.notification-list__item {
& + & {
margin-top: 12px;
}
}
import Component from '@component';
import BrowserNotification from '@browser-notification';
import CookieNotification from '@cookie-notification';
import Notification, { INotification } from '@notification';
import './notification-list.scss';
export default class NotificationList extends Component {
static initSelector: string = '.notification-list';
public notifications: IGotoAndPlayNotificationComponent[];
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) {
this.add(classInstance, item.data);
}
}
}
window.addEventListener('resize', this.resizeHandler.bind(this));
requestAnimationFrame(this.resizeHandler.bind(this));
}
resizeHandler(): void {
if (window.matchMedia('only screen and (min-width: 768px)').matches) {
$('.header').css('top', this.element.innerHeight() + 'px');
} else {
$('.header').css('top', '');
}
}
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;
}
}