<div class="notification-list"></div>
<div class="notification-list"></div>
{
"language": "en-US",
"data": {
"notifications": [
{
"component": "CookieNotification",
"data": {
"content": "By continuing to use this website, you consent to the use of cookies in accordance with our <a href=\"#\">Cookie Policy.</a>",
"button": {
"text": "OK Continue",
"modifier": "button--tiny"
}
}
}
]
}
}
.notification-list {
position: fixed;
display: flex;
align-items: flex-end;
flex-direction: column;
right: auto;
bottom: 0;
left: 0;
width: 100%;
z-index: map-get($zindex, 'notification-list');
@include bp(md-min) {
left: auto;
right: 32px;
bottom: 32px;
padding-left: 32px;
width: auto;
}
}
.notification-list__item {
transform: translateX(calc(100% + 48px)); /* stylelint-disable-line plugin/no-unsupported-browser-features */
transition: transform $transition-duration ease-in;
width: 100%;
@include bp(md-min) {
width: auto;
}
&.is-visible {
transform: translateX(0);
transition-timing-function: ease-out;
}
& + & {
margin-top: 16px;
}
}
import Component from '../../component/component';
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[];
constructor(element: HTMLElement) {
super(element);
this.notifications = window.gotoAndPlay.notifications;
this.init();
}
getNotificationClassByName(name: string): typeof Notification {
switch (name) {
case 'CookieNotification':
return CookieNotification;
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);
}
}
}
}
add<T extends typeof Notification>(component: T, notification: INotification): InstanceType<T> {
const notif: JQuery = component.render(notification, [notification.modifier, 'notification-list__item'].join(' ')).appendTo(this.element);
const instance: InstanceType<T> = component.create(notif[0]);
notif.trigger('enhance');
instance.show();
return instance;
}
}