promobar
A lightweight and easily configurable promo bar with support for expiration using localStorage
.
~1.77kb gzipped
Install
npm i promobar --save
Basic Usage
This library requires some markup and styles. By default, the promo bar is not shown. Once shown, it will continue to show until a user closes it. Once closed, the promo bar will not show for that user again until either the content
has been updated, or the time interval specified in lifespan
is reached.
const target = document const promo = promo
Configuration
promobar(target[, {...configation}])
The constructor takes two params, and return an instance object with API methods attached.
target
- the outer element of your promo barconfiguration
content
- the text and/or markup that is the content of your promo bartype: string - default: document.getElementById('promoContent').innerHTML
lifespan
- the number of days before the promo expires and is enabled again for the usertype: number - default: 1
resize
- to watch the height of the bar on resize and adjust offsets to matchtype: boolean - default: true
placeholder
- inserts a placeholder element that displaces the site by the height of the promo bar. Pass a function that returns a boolean to conditionally use a placeholdertype: function|boolean - default: true
close
- an array of elements that, when clicked, should trigger the hide sequence of the promo bartype: array - default: Array.prototype.slice.call(document.querySelectorAll('.js-promobarClose'))
offsets
- an array of elements that need to be displaced when the promo bar is active. These elements will receive an attribute that is styled withtransformY
.type: array - default: []
API: Methods
.show()
Show the promo bar. If expired, bar will not show.
promobar
.hide()
Hide the promo bar.
promobar
Hide and cache the data to prevent the bar from showing until it expires.
promobar
.on()
Attach event handlers
promobar
.reset()
If promo bar is expired, clear data and re-enable the promo bar. To show the bar after .reset()
, call .show()
.
promobar
.getState()
Return the promo bar's state object.
promobar /*{ active: true|false, // shown or not enabled: true|false, // expired or not height: 50px // height of `target` outer element}*/
.emit()
You can also run handlers by emitting events manually.
promobar
Events
Promobar emits a few lifecycle events. All callbacks receive a state object.
show
- when shownhide
- when hiddenupdate
- when updateddisabled
- when a user closes the bar
Markup and Styles
Please see lib/promobar.html
and lib/promobar.scss
for suggested markup and styles.
MIT License