<div class="notification ">
<div class="notification__content">
Lorem ipsum show this text
</div>
<div class="notification__action-list">
<a href="https://play.ee" class="button notification__action " target='_blank'>
<span class="button__inner" data-text="More">
<span class="button__text">
More
</span>
</span>
</a>
<button type="button" class="button notification__action custom-item__action ">
<span class="button__inner" data-text="Custom">
<span class="button__text">
Custom
</span>
</span>
</button>
<button type="button" class="button button--white notification__action notification__action--close ">
<span class="button__inner" data-text="Close">
<span class="button__text">
Close
</span>
</span>
</button>
</div>
</div>
<div class="notification {{ modifier }} {{ class }}">
<div class="notification__content">
{{ data.content }}
</div>
<div class="notification__action-list">
{% for action in data.actions %}
{% include '@button' with {
modifier: '',
class: 'notification__action ' ~ action.class,
data: action
} %}
{% endfor %}
{% include '@button' with {
modifier: 'button--white',
class: 'notification__action notification__action--close',
data: data.button
} %}
</div>
</div>
{
"language": "en-US",
"data": {
"content": "Lorem ipsum show this text",
"actions": [
{
"link": "https://play.ee",
"text": "More",
"attributes": "target='_blank'"
},
{
"class": "custom-item__action",
"text": "Custom"
}
],
"button": {
"text": "Close"
}
}
}
.notification {
display: flex;
flex-direction: column;
align-items: center;
background: var(--color-brand);
width: 100%;
transition: $transition-duration $transition-easing;
transition-property: background-color, border-bottom-color;
@include bp(sm-min) {
flex-direction: row;
border-bottom: 1px solid var(--color-text);
}
}
.notification__content {
flex-grow: 1;
color: var(--color-text-inverse);
transition: color $transition-duration $transition-easing;
line-height: 1.1em;
padding: 8px 16px;
@include bp(sm-min) {
padding: 15px 32px;
}
}
.notification__action-list {
align-self: normal;
white-space: nowrap;
}
.notification__action {
width: 100%;
flex-shrink: 1;
}
.button__text {
.notification & {
display: block;
width: 100%;
text-align: center;
}
}
import Button, { IButton } from '@button';
import Component from '@component';
import './notification.scss';
export interface INotification {
content: string;
button: IButton;
actions?: IButton[];
}
export default class Notification extends Component {
static initSelector: string = '.notification';
closeButton: JQuery;
constructor(element: HTMLElement) {
super(element);
this.closeButton = this.element.find('.js-notification-close');
this.init();
}
public static get shouldShow(): boolean {
return false;
}
public static render(data: INotification, className: string = ''): JQuery {
const block: JQuery = $('<div class="notification ' + className + '" />');
const contentElement: JQuery = $('<div class="notification__content" />');
const actionsElement: JQuery = $('<div class="notification__action-list" />');
const closeButton: JQuery = Button.render(data.button, 'button--white notification__action js-notification-close');
if (data.actions) {
for (const action of data.actions) {
actionsElement.append(Button.render(action, 'notification__action'));
}
}
actionsElement.append(closeButton);
contentElement.append(data.content);
block.append(contentElement);
block.append(actionsElement);
return block;
}
init(): void {
this.closeButton.on('click', this.handleCloseClick);
}
handleCloseClick: (event: JQuery.ClickEvent<HTMLButtonElement>) => void = (event: JQuery.ClickEvent<HTMLButtonElement>) => {
event.preventDefault();
this.remove();
};
remove(): void {
window.dispatchEvent(new Event('resize'));
this.element.remove();
}
}