toast.js
1.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// toast
var toastTimeout;
$('[data-toggle="toast"]').tooltip({
animation: false,
container: '.toast',
html: true,
placement: 'bottom',
template: '<div class="tooltip"><div class="toast-inner tooltip-inner"></div></div>',
trigger: 'manual'
});
// toast dismiss
$(document).on('click', '[data-dismiss="toast"]', function(e) {
e.preventDefault();
toastHide(0);
});
function toastHide(timer, toast) {
clearTimeout(toastTimeout);
toastTimeout = setTimeout(function() {
$('.toast').removeClass('toast-show');
if ($('.fbtn-container').length) {
$('.fbtn-container').css('margin-bottom', '');
};
$('.toast-inner').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$('.toast-toggled').tooltip('hide').removeClass('toast-toggled');
if (toast !== null && toast !== undefined) {
toast.tooltip('show').addClass('toast-toggled');
} else {
$('.toast').remove();
}
});
}, timer);
}
// toast hover
$(document).on('mouseenter', '.toast', function() {
clearTimeout(toastTimeout);
});
$(document).on('mouseleave', '.toast', function() {
toastHide(6000);
});
// toast show
$(document).on('click', '[data-toggle="toast"]', function() {
var $this = $(this);
if (!$('.toast').length) {
$('body').append('<div class="toast"></div>');
};
if (!$this.hasClass('toast-toggled')) {
if ($('.toast').hasClass('toast-show')) {
toastHide(0, $this);
} else {
$this.tooltip('show').addClass('toast-toggled');
}
};
});
$(document).on('shown.bs.tooltip', '[data-toggle="toast"]', function() {
var $this = $(this);
$('.toast').addClass('toast-show');
if ($(window).width() < 768 && $('.fbtn-container').length) {
$('.fbtn-container').css('margin-bottom', $('.toast').outerHeight());
};
$('.toast-inner').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
toastHide(6000);
});
});