static/js/toasts.js

126 lines
3.7 KiB
JavaScript
Raw Normal View History

2016-01-27 17:58:45 +03:00
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;
}
};