Поместить значок в уведомление, используя типы - PullRequest
Новая
       11

Поместить значок в уведомление, используя типы

0 голосов
/ 21 февраля 2020

В основном это создает внутриигровое уведомление (GTA V)

Я хочу добавить значок в начальную точку, я попробовал его прослушивать :(, поэтому мне нужно добавить в js или просто в HTML? но я хочу сделать это, используя тип, я уже понимаю, какой это тип (сообщить, ошибка, успех), ниже приведен код, у меня есть значок 

var persistentNotifs = {};

window.addEventListener('message', function (event) {
    ShowNotif(event.data);
});

function CreateNotification(data) {
    var $notification = $(document.createElement('div'));
    $notification.addClass('notification').addClass(data.type);
    $notification.html(data.text);
    $notification.fadeIn();
    if (data.style !== undefined) {
        Object.keys(data.style).forEach(function(css) {
            $notification.css(css, data.style[css])
        });
    }

    return $notification;
}

function ShowNotif(data) {
    if (data.persist === undefined) {
        var $notification = CreateNotification(data);
        $('.notif-container').append($notification);
        setTimeout(function() {
            $.when($notification.fadeOut()).done(function() {
                $notification.remove()
            });
        }, data.length != null ? data.length : 2500);
    } else {
        if (data.persist.toUpperCase() == 'START') {
            if (persistentNotifs[data.id] === undefined) {
                var $notification = CreateNotification(data);
                $('.notif-container').append($notification);
                persistentNotifs[data.id] = $notification;
            } else {
                let $notification = $(persistentNotifs[data.id])
                $notification.addClass('notification').addClass(data.type);
                $notification.html(data.text);

                if (data.style !== undefined) {
                    Object.keys(data.style).forEach(function(css) {
                        $notification.css(css, data.style[css])
                    });
                }
            }
        } else if (data.persist.toUpperCase() == 'END') {
            let $notification = $(persistentNotifs[data.id]);
            $.when($notification.fadeOut()).done(function() {
                $notification.remove();
                delete persistentNotifs[data.id];
            });
        }
    }
}
body {
    background-color: transparent !important;
}

.template, .notification {
    display: none;
}

.notif-container {
    width: 20%;
    position: absolute;
    right: 15%;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.notification {
    padding: 10px;
    width: fit-content;
    border-radius: 5px;
    margin: 5px;
    font: caption;
    font-size: 12px;
    font-weight: bold;
}

.success {
    background: rgb(114, 204, 114);
    color: #fff;
}

.inform {
    background-color: rgb(47, 92, 115);
    color: #ffffff;
}

.error {
    background: rgb(224, 50, 50);
    color: #fff;
}
<div class="notif-container"></div>
...