baseframe-js
Version:
A suite of useful Javascript plugins and functions to help with Front-end Development on websites
139 lines (138 loc) • 4.99 kB
JavaScript
import $ from 'cash-dom';
import { getDataOptions } from "./util/helpers";
import Store from "./core/Store";
const VERSION = "1.0.0";
const DATA_NAME = 'Toastr';
const EVENT_NAME = 'toastr';
const DEFAULTS = {
duration: 3000,
appendTo: document.body,
animationDuration: 500,
content: '',
outerCss: 'toastr',
enabledCss: 'toastr--enabled',
dismissCss: 'toastr--dismiss',
btnDismissCss: 'toastr__btn-dismiss',
closeIconCss: 'ico i-close',
ariaLive: 'polite',
closeTextCopy: 'Dismiss',
cssGroupKey: 'std',
oneOnly: false
};
const toastContainers = new Map();
let currentlyToastingGlobal = false;
export default class Toastr {
static defaults = DEFAULTS;
static version = VERSION;
static pluginName = DATA_NAME;
static DismissedEventName = 'toastDismissed';
toastrFinallyTimer;
currentlyToasting;
toasterBodyBuilt;
$element;
$toastrBody;
$toastrWrap;
params;
constructor(element, options) {
const s = this;
const dataOptions = getDataOptions(element, EVENT_NAME);
//state
s.$element = $(element);
s.toastrFinallyTimer = null;
s.$toastrBody = null;
s.$toastrWrap = null;
s.currentlyToasting = false;
s.params = $.extend({}, Toastr.defaults, options, dataOptions);
s.$element.on(`click.${EVENT_NAME} ${EVENT_NAME}`, () => s.launch());
return s;
}
dismiss() {
const s = this;
const { animationDuration, dismissCss } = s.params;
s.toastrFinallyTimer && clearTimeout(s.toastrFinallyTimer);
s.$toastrWrap.addClass(dismissCss);
setTimeout(() => {
const $toatrContainer = s.getToasterContainer();
s.$toastrWrap.removeClass(dismissCss).detach();
if (!$toatrContainer.children('div').length) {
s.getToasterContainer().detach();
}
s.currentlyToasting = false;
currentlyToastingGlobal = false;
}, animationDuration);
}
setContent(content, updateNow = false) {
const s = this;
$.extend(s.params, { content });
if (updateNow) {
s.updateContent(s.params.content);
}
}
launch() {
const s = this;
const { content, dismissCss, duration, enabledCss, oneOnly } = s.params;
if (!s.currentlyToasting) {
if (currentlyToastingGlobal && oneOnly) {
return;
}
if (!s.toasterBodyBuilt) {
s.buildElems();
}
s.$toastrWrap.removeClass(`${dismissCss} ${enabledCss}`);
s.updateContent(content);
$(document.body).append(s.getToasterContainer().append(s.$toastrWrap));
setTimeout(() => s.$toastrWrap.addClass(enabledCss), 0);
// Auto remove if not dismissed
s.toastrFinallyTimer = setTimeout(() => s.dismiss(), duration);
s.currentlyToasting = true;
currentlyToastingGlobal = true;
}
}
getToasterContainer() {
const { cssGroupKey, outerCss } = this.params;
const toasterWrapCss = `${outerCss}-wrap ${outerCss}-wrap--${cssGroupKey}`;
if (!toastContainers.has(toasterWrapCss)) {
toastContainers.set(toasterWrapCss, $('<div/>').attr({
class: toasterWrapCss
}));
}
return toastContainers.get(toasterWrapCss);
}
buildElems() {
const s = this;
const { ariaLive, btnDismissCss, closeIconCss, closeTextCopy, outerCss } = s.params;
s.$toastrBody = $('<div>').attr({ class: s.params.outerCss + '__body' });
s.$toastrWrap = $('<div>').attr({ class: outerCss, role: 'alert', 'aria-live': ariaLive }).append(s.$toastrBody, $('<button>').attr({ type: 'button', class: btnDismissCss }).append($('<i>').attr({ class: closeIconCss }).append($('<span>').attr({ class: 'sr-only' }).text(closeTextCopy))));
s.toasterBodyBuilt = true;
// click event to dismiss
s.$toastrWrap.on('click', 'button', () => s.dismiss());
}
updateContent(content) {
const s = this;
if (s.$toastrBody) {
s.$toastrBody.empty();
if ('string' === typeof content) {
s.$toastrBody.html(content);
}
else {
s.$toastrBody.append(content);
}
}
}
static setContent(element, content, updateNow = false) {
$(element).each(function () {
const s = Store(this, DATA_NAME);
$.extend(s.params, { content });
if (updateNow) {
s.updateContent(s.params.content);
}
});
}
static remove(element, plugin) {
$(element).each(function () {
const s = plugin || Store(this, DATA_NAME);
s.$element.off(`click.${EVENT_NAME} ${EVENT_NAME}`);
Store(this, DATA_NAME, null);
});
}
}