126 lines
3.7 KiB
JavaScript
126 lines
3.7 KiB
JavaScript
Materialize.toast = function (message, displayLength, className, completeCallback) {
|
|
className = className || "";
|
|
|
|
var container = document.getElementById('toast-container');
|
|
|
|
// Create toast container if it does not exist
|
|
if (container === null) {
|
|
// create notification container
|
|
container = document.createElement('div');
|
|
container.id = 'toast-container';
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
// Select and append toast
|
|
var newToast = createToast(message);
|
|
|
|
// only append toast if message is not undefined
|
|
if(message){
|
|
container.appendChild(newToast);
|
|
}
|
|
|
|
newToast.style.top = '35px';
|
|
newToast.style.opacity = 0;
|
|
|
|
// Animate toast in
|
|
Vel(newToast, { "top" : "0px", opacity: 1 }, {duration: 300,
|
|
easing: 'easeOutCubic',
|
|
queue: false});
|
|
|
|
// Allows timer to be pause while being panned
|
|
var timeLeft = displayLength;
|
|
var counterInterval = setInterval (function(){
|
|
|
|
|
|
if (newToast.parentNode === null)
|
|
window.clearInterval(counterInterval);
|
|
|
|
// If toast is not being dragged, decrease its time remaining
|
|
if (!newToast.classList.contains('panning')) {
|
|
timeLeft -= 20;
|
|
}
|
|
|
|
if (timeLeft <= 0) {
|
|
// Animate toast out
|
|
Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
|
|
easing: 'easeOutExpo',
|
|
queue: false,
|
|
complete: function(){
|
|
// Call the optional callback
|
|
if(typeof(completeCallback) === "function")
|
|
completeCallback();
|
|
// Remove toast after it times out
|
|
this[0].parentNode.removeChild(this[0]);
|
|
}
|
|
});
|
|
window.clearInterval(counterInterval);
|
|
}
|
|
}, 20);
|
|
|
|
|
|
|
|
function createToast(html) {
|
|
|
|
// Create toast
|
|
var toast = document.createElement('div');
|
|
toast.classList.add('toast');
|
|
if (className) {
|
|
var classes = className.split(' ');
|
|
|
|
for (var i = 0, count = classes.length; i < count; i++) {
|
|
toast.classList.add(classes[i]);
|
|
}
|
|
}
|
|
toast.innerHTML = html;
|
|
|
|
// Bind hammer
|
|
var hammerHandler = new Hammer(toast, {prevent_default: false});
|
|
hammerHandler.on('pan', function(e) {
|
|
var deltaX = e.deltaX;
|
|
var activationDistance = 80;
|
|
|
|
// Change toast state
|
|
if (!toast.classList.contains('panning')){
|
|
toast.classList.add('panning');
|
|
}
|
|
|
|
var opacityPercent = 1-Math.abs(deltaX / activationDistance);
|
|
if (opacityPercent < 0)
|
|
opacityPercent = 0;
|
|
|
|
Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
|
|
|
});
|
|
|
|
hammerHandler.on('panend', function(e) {
|
|
var deltaX = e.deltaX;
|
|
var activationDistance = 80;
|
|
|
|
// If toast dragged past activation point
|
|
if (Math.abs(deltaX) > activationDistance) {
|
|
Vel(toast, {marginTop: '-40px'}, { duration: 375,
|
|
easing: 'easeOutExpo',
|
|
queue: false,
|
|
complete: function(){
|
|
if(typeof(completeCallback) === "function") {
|
|
completeCallback();
|
|
}
|
|
toast.parentNode.removeChild(toast);
|
|
}
|
|
});
|
|
|
|
} else {
|
|
toast.classList.remove('panning');
|
|
// Put toast back into original position
|
|
Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
|
|
easing: 'easeOutExpo',
|
|
queue: false
|
|
});
|
|
|
|
}
|
|
});
|
|
|
|
return toast;
|
|
}
|
|
};
|