1.1.0 • Published 1 year ago

banner-alert-js v1.1.0

Weekly downloads
-
License
SEE LICENSE IN li...
Repository
github
Last release
1 year ago

Banner-Alert-js

Offers methods for posting UI alerts.

Table of contents


Installation

You can use NPM to download package into your project

npm install banner-alert-js

OR you can import the module directly in your project with ES6 Modules

<script type="module">
    import { BannerAlert } from './banner-alert-js/banner-alert.js';
</script>

Basic Usage

See '/demo/basic-usage.html' in repo for complete example

HTML

<div class="banner-alerts"></div>
<button onclick="window.triggerExampleAlerts();">Trigger Alert</button>

JavaScript

<script type="module">
    // ES6 Module Import
    import { BannerAlert } from '/banner-alert-js/banner-alert.js'; 

    window.triggerExampleAlerts = function() {
        let messageType = 'success'; // Can be any value
        let message     = 'This is a success alert';
        let messageTtl  = 3000; // Measured in seconds
        let parentContainer = document.querySelector( '.banner-alerts' ); // This container can be anywhere in the document
        let customClassList = [ 'foo', 'bar', 'baz' ];

        BannerAlert.transmit( 
            messageType, 
            message, 
            parentContainer, 
            messageTtl, 
            customClassList
        );	
    }
</script>

Public Methods

ObjectMethodDescription
BannerAlerttransmitTransmit receives five arguments: - Alert Type; Expected value used to set data-message-type attribute on new HTML banner element. Can be used to style the alert. - Message; Expected value string, used to populate innerHTML of new HTML banner element - Parent Container Denotes where to append the alert element - TTL; Expected value number, used to determine the duration of alert visibility - Custom Class List; Expected value array of class names, adds classes to banner element
1.1.0

1 year ago

1.0.1

1 year ago

0.11.0

1 year ago

0.10.0

1 year ago

0.9.0

1 year ago