https://www.okaloosagas.com/themes/acme.js

1Traction.EmergencyNotification.setShowHandler(function(notification) {
2  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
3  var $element = $('<div class="traction-emergency-notification" role="alert"></div>');
4
5  var $inner = $('<div class="inner"></div>')
6    .appendTo($element);
7
8  let $header, $paragraph;
9
10  $('<button>Dismiss</button>')
11    .click(function(event) {
12      // Don't trigger the link if we're wrapped in one, and don't bubble.
13      event.preventDefault();
14      event.stopPropagation();
15
16      Traction.EmergencyNotification.setDismissed();
17      hide();
18    })
19    .appendTo($inner);
20
21  if (notification.type) {
22    $element.addClass('traction-emergency-notification--' + notification.type.replace(/^[a-z0-9_-]$/i, '-'));
23  }
24
25  if (notification.title) {
26    $header = $('<h2></h2>')
27      .text(notification.title)
28
29    $header.appendTo($inner);
30  }
31
32  if (notification.message) {
33    $paragraph = $('<p></p>')
34      .text(notification.message)
35
36    $paragraph.appendTo($inner);
37  }
38
39  var app = $('#app'),
40    appBodyPage = $('#app > .app-body > .page'),
41    notificationCenter = $('#page-notifications .container'),
42    target = (notificationCenter.length) ? notificationCenter : (appBodyPage.length) ? appBodyPage : (app.length) ? app : document.body;
43
44  $element
45    .hide()
46    .prependTo(target);
47
48  if (notification.url) {
49    $link = $('<a></a>').attr({ href: notification.url });
50    if ($header) $header.wrap($link);
51    if ($paragraph) $paragraph.wrap($link);
52  }
53
54  $element
55    .delay(500)
56    .slideDown();
57
58  function hide() {
59    if ($element.css('position') == 'relative') {
60      $element.slideUp(function() {
61        $element.remove();
62      });
63    }
64    else {
65      $element.fadeOut(function() {
66        $element.remove();
67      });
68    }
69  }
70});