Notification

WORK IN PROGRESS this component is currently in a alpha state

With the help of the notifications system, simple messages or complex popups can be displayed as overlays on the website. The primary task of the notifications system is the positioning of the overlays.

In notifications, either a list of simple messages pop-ups with more complex behavior can be displayed or.

The simplest way to display the message lists is with JavaScript.

The popups can either be displayed using CSS with manageable effort, or also with the help of javascript.

Global Messages

With the help of the notifications system, simple messages can be displayed to the user. These are displayed within a special “global notification” element and using the Messages component.

The easiest way to display a message is to call the Javascript function styleGuide.notify(text, options);.

// all default values
const options = {
  timer: 10000, // in ms, 0 = will note destroy the notification
  messageState: '', // could be 'success', 'warning' or 'danger'
  animation: {
    insertAnimation: 'insert-right', // could be 'insert-right' or 'insert-left'
    removeAnimation: 'fade-out', // could be 'fade-out' or 'scale-out'
    duration: 250 // in ms
  },
  container: null //
};

styleGuide.notify('Hello World', options);

• .notification - required global container for all StyleGuide overlay components
• .notification__item TODO DOCU
• .notification--global TODO DOCU

Container

TODO DOCU

• data-sg-notification-container="" TODO DOCU

<div class="notification notification--global" data-sg-notification-container="SOME_SELECTOR"></div>

Delete

WORK IN PROGRESS

Lifetime Progressbar

WORK IN PROGRESS

Cross Browser Tabs Messages

WORK IN PROGRESS

Popup

WORK IN PROGRESS this is an pre alpha

Print a global centered popup

<div class="notification">
  <div class="notification__popup">
    <span>POPUP</span>
  </div>
</div>

• .notification - required global container for all StyleGuide overlay components
• .notification__popup - required the container for your content, shown in the middle of the screen
• Modifier
  • .notification__popup--top - position the popup to the top of the window
  • .notification__popup--bottom - position the popup to the bottom of the window
  • .notification__popup--left - position the popup to the left of the window
  • .notification__popup--right - position the popup to the right of the window

Popup Positioning

WORK IN PROGRESS

Shadow

WORK IN PROGRESS

Scripting

WORK IN PROGRESS

const popupContent = document.querySelector('WHAT_EVER');
styleGuide.popup(popupContent);

Storage

WORK IN PROGRESS

• .notification - required global container for all StyleGuide overlay components
• .notification--storage - if set, notifications are stored in browser cache