Mozilla Protocol
  • 16.0.1

Notification Bar: Scripted

Protocol also provides a JavaScript library to invoke and dismiss a notification bar.

The script provides the following options:

  • origin [DOM Element] element that triggered the notification
  • options [Object] object of params
    • title [String] message to display in the notification. (Required)
    • cta: [Object] options for rendering an Anchor node after the title.
      • text: (Required) text content for an Anchor element
      • url: (Required) URL for the Anchor element
      • attrs: map of additional options for the Anchor element, eg: ‘target’, ‘rel’
    • className [String] optional CSS class name to apply to the notification.
    • onNotificationOpen [Function] function to fire after notification has been opened.
    • onNotificationClose [Function] function to fire after notification has been closed.
    • hasDismiss [Boolean] include or not include dismiss button.
    • closeText [String] text to use for close button a11y.
    • isSticky [Boolean] determines if notification is absolutely positioned and sticky.
<p><button class="mzp-c-button mzp-js-notification-trigger" type="button">Open Notification</button></p>

<script src="../../protocol/js/protocol-notification-bar.js"></script>

<script>
    (function() {
        'use strict';
        var dismissButtons = document.querySelectorAll('.mzp-c-notification-bar-button');
        for (var i = 0; i < dismissButtons.length; i++) {
            dismissButtons[i].addEventListener('click', function(e) {
                e.currentTarget.parentNode.remove();
            }, false);
        }
        var notificationButton = document.querySelector('.mzp-js-notification-trigger');
        notificationButton.addEventListener('click', function(e) {
            e.preventDefault();
            Mzp.Notification.init(e.target, {
                title: 'This is the title.',
                cta: {
                    text: "And this is a CTA link.",
                    url: "https://www.mozilla.org",
                    attrs: {
                        "target": "_blank",
                        "rel": "noopener"
                    }
                },
                className: 'mzp-t-warning',
                closeText: 'Close notification',
                hasDismiss: true,
                isSticky: true,
                onNotificationOpen: function() {
                    console.log('Notification opened');
                },
                onNotificationClose: function() {
                    console.log('Notification closed');
                }
            });
        }, false);
    })();
</script>