Your IP : 216.73.216.175
(function($, anim) {
'use strict';
let _defaults = {
html: '',
displayLength: 4000,
inDuration: 300,
outDuration: 375,
classes: '',
completeCallback: null,
activationPercent: 0.8
};
class Toast {
constructor(options) {
/**
* Options for the toast
* @member Toast#options
*/
this.options = $.extend({}, Toast.defaults, options);
this.message = this.options.html;
/**
* Describes current pan state toast
* @type {Boolean}
*/
this.panning = false;
/**
* Time remaining until toast is removed
*/
this.timeRemaining = this.options.displayLength;
if (Toast._toasts.length === 0) {
Toast._createContainer();
}
// Create new toast
Toast._toasts.push(this);
let toastElement = this._createToast();
toastElement.M_Toast = this;
this.el = toastElement;
this._animateIn();
this._setTimer();
}
static get defaults() {
return _defaults;
}
/**
* Get Instance
*/
static getInstance(el) {
let domElem = !!el.jquery ? el[0] : el;
return domElem.M_Toast;
}
/**
* Append toast container and add event handlers
*/
static _createContainer() {
let container = document.createElement('div');
container.setAttribute('id', 'toast-container');
// Add event handler
container.addEventListener('touchstart', Toast._onDragStart);
container.addEventListener('touchmove', Toast._onDragMove);
container.addEventListener('touchend', Toast._onDragEnd);
container.addEventListener('mousedown', Toast._onDragStart);
document.addEventListener('mousemove', Toast._onDragMove);
document.addEventListener('mouseup', Toast._onDragEnd);
document.body.appendChild(container);
Toast._container = container;
}
/**
* Remove toast container and event handlers
*/
static _removeContainer() {
// Add event handler
document.removeEventListener('mousemove', Toast._onDragMove);
document.removeEventListener('mouseup', Toast._onDragEnd);
Toast._container.parentNode.removeChild(Toast._container);
Toast._container = null;
}
/**
* Begin drag handler
* @param {Event} e
*/
static _onDragStart(e) {
if (e.target && $(e.target).closest('.toast').length) {
let $toast = $(e.target).closest('.toast');
let toast = $toast[0].M_Toast;
toast.panning = true;
Toast._draggedToast = toast;
toast.el.classList.add('panning');
toast.el.style.transition = '';
toast.startingXPos = Toast._xPos(e);
toast.time = Date.now();
toast.xPos = Toast._xPos(e);
}
}
/**
* Drag move handler
* @param {Event} e
*/
static _onDragMove(e) {
if (!!Toast._draggedToast) {
e.preventDefault();
let toast = Toast._draggedToast;
toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
toast.xPos = Toast._xPos(e);
toast.velocityX = toast.deltaX / (Date.now() - toast.time);
toast.time = Date.now();
let totalDeltaX = toast.xPos - toast.startingXPos;
let activationDistance =
toast.el.offsetWidth * toast.options.activationPercent;
toast.el.style.transform = `translateX(${totalDeltaX}px)`;
toast.el.style.opacity = 1-Math.abs(totalDeltaX / activationDistance);
}
}
/**
* End drag handler
*/
static _onDragEnd() {
if (!!Toast._draggedToast) {
let toast = Toast._draggedToast;
toast.panning = false;
toast.el.classList.remove('panning');
let totalDeltaX = toast.xPos - toast.startingXPos;
let activationDistance =
toast.el.offsetWidth * toast.options.activationPercent;
let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance ||
toast.velocityX > 1;
// Remove toast
if (shouldBeDismissed) {
toast.wasSwiped = true;
toast.dismiss();
// Animate toast back to original position
} else {
toast.el.style.transition = 'transform .2s, opacity .2s';
toast.el.style.transform = '';
toast.el.style.opacity = '';
}
Toast._draggedToast = null;
}
}
/**
* Get x position of mouse or touch event
* @param {Event} e
*/
static _xPos(e) {
if (e.targetTouches && (e.targetTouches.length >= 1)) {
return e.targetTouches[0].clientX;
}
// mouse event
return e.clientX;
}
/**
* Remove all toasts
*/
static dismissAll() {
for(let toastIndex in Toast._toasts) {
Toast._toasts[toastIndex].dismiss();
}
}
/**
* Create toast and append it to toast container
*/
_createToast() {
let toast = document.createElement('div');
toast.classList.add('toast');
// Add custom classes onto toast
if (!!this.options.classes.length) {
$(toast).addClass(this.options.classes);
}
// Set content
if ( typeof HTMLElement === 'object' ?
this.message instanceof HTMLElement :
this.message && typeof this.message === 'object' &&
this.message !== null && this.message.nodeType === 1 &&
typeof this.message.nodeName==='string'
) {
toast.appendChild(this.message);
// Check if it is jQuery object
} else if (!!this.message.jquery) {
$(toast).append(this.message[0]);
// Insert as html;
} else {
toast.innerHTML = this.message;
}
// Append toasft
Toast._container.appendChild(toast);
return toast;
}
/**
* Animate in toast
*/
_animateIn() {
// Animate toast in
anim({
targets: this.el,
top: 0,
opacity: 1,
duration: 300,
easing: 'easeOutCubic'
});
}
/**
* Create setInterval which automatically removes toast when timeRemaining >= 0
* has been reached
*/
_setTimer() {
if (this.timeRemaining !== Infinity) {
this.counterInterval = setInterval(() => {
// If toast is not being dragged, decrease its time remaining
if (!this.panning) {
this.timeRemaining -= 20;
}
// Animate toast out
if (this.timeRemaining <= 0) {
this.dismiss();
}
}, 20);
}
}
/**
* Dismiss toast with animation
*/
dismiss() {
window.clearInterval(this.counterInterval);
let activationDistance =
this.el.offsetWidth * this.options.activationPercent;
if(this.wasSwiped) {
this.el.style.transition = 'transform .05s, opacity .05s';
this.el.style.transform = `translateX(${activationDistance}px)`;
this.el.style.opacity = 0;
}
anim({
targets: this.el,
opacity: 0,
marginTop: -40,
duration: this.options.outDuration,
easing: 'easeOutExpo',
complete: () => {
// Call the optional callback
if(typeof(this.options.completeCallback) === 'function') {
this.options.completeCallback();
}
// Remove toast from DOM
this.el.parentNode.removeChild(this.el);
Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
if (Toast._toasts.length === 0) {
Toast._removeContainer();
}
}
});
}
}
/**
* @static
* @memberof Toast
* @type {Array.<Toast>}
*/
Toast._toasts = [];
/**
* @static
* @memberof Toast
*/
Toast._container = null;
/**
* @static
* @memberof Toast
* @type {Toast}
*/
Toast._draggedToast = null;
M.Toast = Toast;
M.toast = function(options) {
return new Toast(options);
};
})(cash, M.anime);