📦 0372hoanghoccode / Do-An-Web-1

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
//Toast message
function toast({
    title = '',
    message = '',
    type = '', 
    duration = 2000
}){
    const main = document.getElementById('toast');
    if(main){
        const toast = document.createElement('div');
        
        timeoutId = setTimeout(function(){
            main.removeChild(toast);
        },duration+1000);
        
        toast.onclick = function(e){
            if(e.target.closest('.toast__close')){
                main.removeChild(toast);
                clearTimeout(timeoutId);
            }
        }
        const colors = {
            success: '#28a745',
            warning: '#ffc107'
        }
        const icons = {
            success: 'fa fa-check',
            warning: 'fa fa-exclamation-triangle'
        };
        const color = colors[type];
        const icon = icons[type];
        toast.classList.add('toast', `toast--${type}`);
        toast.innerHTML = `<div class="toast__private">
        <div class="toast__icon">
            <i class="${icon}"></i>
        </div>
        <div class="toast__body">
            <h3 class="toast__title">${title}</h3>
            <p class="toast__msg">
                ${message}
            </p>
        </div>
        <div class="toast__close">
        <i class="fa fa-times"></i>
    </div>
    </div>
    <div class="toast__background"style="background-color: ${color};">
    </div>`
    main.appendChild(toast);
    }
}