This commit is contained in:
Mirco Wittrien 2020-12-22 18:45:40 +01:00
parent e3f7903e9f
commit afbe16e1ba
4 changed files with 137 additions and 85 deletions

View File

@ -1069,7 +1069,7 @@ module.exports = (_ => {
var NotificationBars = [], DesktopNotificationQueue = {queue: [], running: false};
BDFDB.NotificationUtils = {};
BDFDB.NotificationUtils.toast = function (text, options = {}) {
let toasts = document.querySelector(".toasts, .bd-toasts");
let toasts = document.querySelector(BDFDB.dotCNC.toasts + ".bd-toasts");
if (!toasts) {
let channels = document.querySelector(BDFDB.dotCN.channels + " + div");
let channelRects = channels ? BDFDB.DOMUtils.getRects(channels) : null;
@ -1078,31 +1078,31 @@ module.exports = (_ => {
let width = channelRects ? (members ? channelRects.width - BDFDB.DOMUtils.getRects(members).width : channelRects.width) : window.outerWidth - 0;
let form = channels ? channels.querySelector("form") : null;
let bottom = form ? BDFDB.DOMUtils.getRects(form).height : 80;
toasts = BDFDB.DOMUtils.create(`<div class="toasts bd-toasts" style="width: ${width}px; left: ${left}px; bottom: ${bottom}px;"></div>`);
toasts = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN.toasts} bd-toasts" style="width: ${width}px; left: ${left}px; bottom: ${bottom}px;"></div>`);
(document.querySelector(BDFDB.dotCN.app) || document.body).appendChild(toasts);
}
const {type = "", icon = true, timeout = 3000, html = false, selector = "", nopointer = false, color = ""} = options;
let toast = BDFDB.DOMUtils.create(`<div class="toast bd-toast">${html === true ? text : BDFDB.StringUtils.htmlEscape(text)}</div>`);
let toast = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN.toast} bd-toast">${html === true ? text : BDFDB.StringUtils.htmlEscape(text)}</div>`);
if (type) {
BDFDB.DOMUtils.addClass(toast, "toast-" + type);
if (icon) BDFDB.DOMUtils.addClass(toast, "icon");
if (icon) BDFDB.DOMUtils.addClass(toast, BDFDB.disCN.toasticon);
}
else if (color) {
let rgbColor = BDFDB.ColorUtils.convert(color, "RGB");
if (rgbColor) {
toast.style.setProperty("background-color", rgbColor);
BDFDB.DOMUtils.addClass(toast, "toast-custom");
BDFDB.DOMUtils.addClass(toast, BDFDB.disCN.toastcustom);
}
}
BDFDB.DOMUtils.addClass(toast, selector);
toasts.appendChild(toast);
toast.close = _ => {
if (document.contains(toast)) {
BDFDB.DOMUtils.addClass(toast, "closing");
BDFDB.DOMUtils.addClass(toast, BDFDB.disCN.toastclosing);
toast.style.setProperty("pointer-events", "none", "important");
BDFDB.TimeUtils.timeout(_ => {
toast.remove();
if (!toasts.querySelectorAll(".toast, .bd-toast").length) toasts.remove();
if (!toasts.querySelectorAll(BDFDB.dotCNC.toast + ".bd-toast").length) toasts.remove();
}, 3000);
}
};
@ -1111,15 +1111,15 @@ module.exports = (_ => {
BDFDB.TimeUtils.timeout(_ => {toast.close();}, timeout > 0 ? timeout : 600000);
return toast;
};
BDFDB.NotificationUtils.desktop = function (parsedcontent, parsedoptions = {}) {
BDFDB.NotificationUtils.desktop = function (parsedContent, parsedOptions = {}) {
const queue = _ => {
DesktopNotificationQueue.queue.push({parsedcontent, parsedoptions});
DesktopNotificationQueue.queue.push({parsedContent, parsedOptions});
runqueue();
};
const runqueue = _ => {
if (!DesktopNotificationQueue.running) {
let notification = DesktopNotificationQueue.queue.shift();
if (notification) notify(notification.parsedcontent, notification.parsedoptions);
if (notification) notify(notification.parsedContent, notification.parsedOptions);
}
};
const notify = (content, options) => {

View File

@ -886,6 +886,15 @@
"hue": "hue-13HAGb",
"saturation": "saturation-1FDvtn",
"wrapper": "wrapper-2AQieU"
},
"Toast": {
"avatar": "toast-avatar",
"closing": "closing",
"custom": "toast-custom",
"icon": "icon",
"inner": "toast-inner",
"toast": "toast",
"toasts": "toasts"
}
},
"DiscordClassModules": {
@ -2578,6 +2587,13 @@
"titlesize12": ["UserPopout", "size12"],
"titlesize14": ["UserPopout", "size14"],
"titlesize16": ["UserPopout", "size16"],
"toast": ["Toast", "toast"],
"toastavatar": ["Toast", "avatar"],
"toastclosing": ["Toast", "closing"],
"toastcustom": ["Toast", "custom"],
"toasticon": ["Toast", "icon"],
"toastinner": ["Toast", "inner"],
"toasts": ["Toast", "toasts"],
"tooltip": ["Tooltip", "tooltip"],
"tooltipactivityicon": ["TooltipGuild", "activityIcon"],
"tooltipblack": ["Tooltip", "tooltipBlack"],

View File

@ -1059,7 +1059,7 @@ img:not([src]), img[src=""], img[src="null"] {
text-decoration: underline;
}
.toasts {
[REPLACE_CLASS_toasts] {
position: fixed;
display: flex;
top: 0;
@ -1075,7 +1075,7 @@ img:not([src]), img[src=""], img[src="null"] {
opacity: 0;
}
}
.toast {
[REPLACE_CLASS_toast] {
background-color: var(--background-floating);
border-radius: 5px;
box-shadow: var(--elevation-medium);
@ -1096,17 +1096,17 @@ img:not([src]), img[src=""], img[src="null"] {
opacity: 0;
}
}
.toast.closing {
[REPLACE_CLASS_toast][REPLACE_CLASS_toastclosing] {
animation: toast-down 200ms ease;
animation-fill-mode: forwards;
opacity: 1;
transform: translateY(-10px);
}
.toast .toast-inner {
[REPLACE_CLASS_toast] [REPLACE_CLASS_toastinner] {
display: flex;
align-items: center;
}
.toast .toast-avatar {
[REPLACE_CLASS_toast] [REPLACE_CLASS_toastavatar] {
margin-right: 5px;
width: 25px;
height: 25px;
@ -1115,88 +1115,88 @@ img:not([src]), img[src=""], img[src="null"] {
background-position: center;
border-radius: 50%;
}
.toast.icon {
[REPLACE_CLASS_toast][REPLACE_CLASS_toasticon] {
padding-left: 30px;
background-position: 6px 50%;
background-size: 20px 20px;
background-repeat: no-repeat;
}
.toast.toast-custom {
[REPLACE_CLASS_toast][REPLACE_CLASS_toastcustom] {
color: #FFF;
}
.toast.toast-brand {
[REPLACE_CLASS_toast].toast-brand {
background-color: var(--bdfdb-blurple);
color: #FFF;
}
.toast.toast-brand.icon {
[REPLACE_CLASS_toast].toast-brand[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjI3IDI3IDExNSAxMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDkwIDkwOyI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMTEuMywxMjQuMWMwLDAtMy40LTQuMS02LjMtNy43YzEyLjYtMy41LDE3LjQtMTEuMywxNy40LTExLjMgYy00LDIuNi03LjcsNC40LTExLjEsNS42Yy00LjgsMi05LjUsMy4zLTE0LDQuMWMtOS4yLDEuNy0xNy42LDEuMy0yNC45LTAuMWMtNS41LTEtMTAuMi0yLjUtMTQuMS00LjFjLTIuMi0wLjgtNC42LTEuOS03LjEtMy4zIGMtMC4zLTAuMi0wLjYtMC4zLTAuOS0wLjVjLTAuMS0wLjEtMC4zLTAuMi0wLjQtMC4yYy0xLjctMS0yLjYtMS42LTIuNi0xLjZzNC42LDcuNiwxNi44LDExLjJjLTIuOSwzLjYtNi40LDcuOS02LjQsNy45IGMtMjEuMi0wLjYtMjkuMy0xNC41LTI5LjMtMTQuNWMwLTMwLjYsMTMuOC01NS40LDEzLjgtNTUuNGMxMy44LTEwLjMsMjYuOS0xMCwyNi45LTEwbDEsMS4xQzUyLjgsNTAuMyw0NSw1Ny45LDQ1LDU3LjkgczIuMS0xLjIsNS43LTIuN2MxMC4zLTQuNSwxOC40LTUuNywyMS44LTZjMC41LTAuMSwxLjEtMC4yLDEuNi0wLjJjNS45LTAuNywxMi41LTAuOSwxOS40LTAuMmM5LjEsMSwxOC45LDMuNywyOC45LDkuMSBjMCwwLTcuNS03LjItMjMuOS0xMi4xbDEuMy0xLjVjMCwwLDEzLjEtMC4zLDI2LjksMTBjMCwwLDEzLjgsMjQuOCwxMy44LDU1LjRDMTQwLjYsMTA5LjYsMTMyLjUsMTIzLjUsMTExLjMsMTI0LjF6IE0xMDEuNyw3OS43Yy01LjQsMC05LjgsNC43LTkuOCwxMC41YzAsNS44LDQuNCwxMC41LDkuOCwxMC41YzUuNCwwLDkuOC00LjcsOS44LTEwLjUgQzExMS41LDg0LjQsMTA3LjEsNzkuNywxMDEuNyw3OS43eiBNNjYuNyw3OS43Yy01LjQsMC05LjgsNC43LTkuOCwxMC41YzAsNS44LDQuNCwxMC41LDkuOCwxMC41YzUuNCwwLDkuOC00LjcsOS44LTEwLjUgQzc2LjUsODQuNCw3Mi4xLDc5LjcsNjYuNyw3OS43eiIvPjwvc3ZnPg==);
}
.toast.toast-danger,
.toast.toast-error {
[REPLACE_CLASS_toast].toast-danger,
[REPLACE_CLASS_toast].toast-error {
background-color: #F04747;
color: #FFF;
}
.toast.toast-danger.icon,
.toast.toast-error.icon {
[REPLACE_CLASS_toast].toast-danger[REPLACE_CLASS_toasticon],
[REPLACE_CLASS_toast].toast-error[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTEyIDJDNi40NyAyIDIgNi40NyAyIDEyczQuNDcgMTAgMTAgMTAgMTAtNC40NyAxMC0xMFMxNy41MyAyIDEyIDJ6bTUgMTMuNTlMMTUuNTkgMTcgMTIgMTMuNDEgOC40MSAxNyA3IDE1LjU5IDEwLjU5IDEyIDcgOC40MSA4LjQxIDcgMTIgMTAuNTkgMTUuNTkgNyAxNyA4LjQxIDEzLjQxIDEyIDE3IDE1LjU5eiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+);
}
.toast.toast-default {
[REPLACE_CLASS_toast].toast-default {
background-color: #F26522;
color: #FFF;
}
.toast.toast-default.icon {
[REPLACE_CLASS_toast].toast-default[REPLACE_CLASS_toasticon] {
padding-left: 10px;
}
.toast.toast-facebook {
[REPLACE_CLASS_toast].toast-facebook {
background-color: #355089;
color: #FFF;
}
.toast.toast-facebook.icon {
[REPLACE_CLASS_toast].toast-facebook[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9Ii01IC01IDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDkwIDkwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggaWQ9IkZhY2Vib29rX194MjhfYWx0X3gyOV8iIGQ9Ik05MCwxNS4wMDFDOTAsNy4xMTksODIuODg0LDAsNzUsMEgxNUM3LjExNiwwLDAsNy4xMTksMCwxNS4wMDF2NTkuOTk4ICAgQzAsODIuODgxLDcuMTE2LDkwLDE1LjAwMSw5MEg0NVY1NkgzNFY0MWgxMXYtNS44NDRDNDUsMjUuMDc3LDUyLjU2OCwxNiw2MS44NzUsMTZINzR2MTVINjEuODc1QzYwLjU0OCwzMSw1OSwzMi42MTEsNTksMzUuMDI0VjQxICAgaDE1djE1SDU5djM0aDE2YzcuODg0LDAsMTUtNy4xMTksMTUtMTUuMDAxVjE1LjAwMXoiIGZpbGw9IndoaXRlIi8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
}
.toast.toast-info {
[REPLACE_CLASS_toast].toast-info {
background-color: #4A90E2;
color: #FFF;
}
.toast.toast-info.icon {
[REPLACE_CLASS_toast].toast-info[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMSAxNWgtMnYtNmgydjZ6bTAtOGgtMlY3aDJ2MnoiLz48L3N2Zz4=);
}
.toast.toast-premium {
[REPLACE_CLASS_toast].toast-premium {
background-color: #202225;
color: #FFF;
}
.toast.toast-premium.icon {
[REPLACE_CLASS_toast].toast-premium[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDMiIGhlaWdodD0iMjYiPiAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOTYuMjgyNiA4LjYwMjc4ODI0bC0xLjIxNTUgOC4zOTAzNTI5NmMtLjI3NzUgMS45ODI2Mjc0LTIuNDY1NSAyLjkwMzMzMzMtNC40NzkgMi45MDMzMzMzLTEuODc1IDAtMy43MTU1LS45MjA3MDU5LTMuNDcyNS0yLjcyNTkyMTZsMS4yMTU1LTguNTY3NzY0NjZjLjI3NzUtMS44NzY1ODgyNCAyLjQ2NTUtMi44MzI0NzA2IDQuNDc5LTIuODMyNDcwNiAyLjAxNCAwIDMuNzUuOTU1ODgyMzYgMy40NzI1IDIuODMyNDcwNk05My43NzIxLjAwMzkyNTVsLjAwMDUtLjAwNDA3ODQ0aC0xMy4wODRjLS4zMzQgMC0uNjE4LjI1MDMxMzcyLS42NjYuNTg3Mjk0MTJsLS42MzY1IDQuNDMyMjM1M2MtLjA1OTUuNDE0NDcwNTguMjU2Ljc4NjExNzY0LjY2NjUuNzg2MTE3NjRoMi4zODk1Yy4yNCAwIC40MDQ1LjI0OTgwMzkyLjMxLjQ3NTY0NzA2LS4yOTguNzEyMTk2MDctLjUxNTUgMS40ODYwNzg0My0uNjM2IDIuMzIxNjQ3MDZsLTEuMjE1NSA4LjU2Nzc2NDY2Yy0uNzk5IDUuNzM1Mjk0MiAzLjg4OSA4LjYwMjQzMTQgOC45OTMgOC42MDI0MzE0IDUuMzQ3NSAwIDEwLjU5MDUtMi44NjcxMzcyIDExLjM4OS04LjYwMjQzMTRsMS4yMTUtOC41Njc3NjQ2NmMuNzgzLTUuNjIyMTE3NjUtMy43Mzk1LTguNDg4MjM1My04LjcyNTUtOC41OTg4NjI3NW0tNzguNTk1MjUgMTEuNzI4NjUxbC4wNjcgNC4xNTg5ODA0Yy4wMDE1LjA4NTEzNzItLjA1NS4xNjA1ODgyLS4xMzYuMTgxNDkwMmgtLjAwMDVsLTEuMzg1NS01LjAxNjQ3MDZjLS4wMDItLjAwNzY0NzEtLjAwNS0uMDE0Nzg0My0uMDA4LS4wMjI0MzE0TDkuNDE0MzUuNzcwNzcyNTNjLS4xMDYtLjI1Mjg2Mjc1LS4zNDk1LS40MTY1MDk4LS42MTk1LS40MTY1MDk4aC00Ljg3MjVjLS4zMzYgMC0uNjIwNS4yNTIzNTI5NC0uNjY3LjU5MTM3MjU0TC4wMDY4NSAyNC42MzcyNDMxYy0uMDU3LjQxMzQ1MS4yNTc1Ljc4MjAzOTMuNjY2NS43ODIwMzkzaDQuODU0Yy4zMzY1IDAgLjYyMTUtLjI1MzM3MjYuNjY3NS0uNTkyOTAybDEuMjcyLTkuNDEyNTA5OGMuMDAxNS0uMDA5MTc2NS4wMDItLjAxODM1My4wMDItLjAyNzUyOTRsLS4wNjk1LTQuODM2NTA5OC4xMzg1LS4wMzUxNzY1IDEuNDU1NSA1LjAxNjQ3MDZjLjAwMjUuMDA3MTM3Mi4wMDUuMDEzNzY0Ny4wMDc1LjAyMDkwMmw0LjAyMTUgOS40NTM4MDM5Yy4xMDY1LjI1MDgyMzUuMzQ5NS40MTM0NTEuNjE3NS40MTM0NTFoNS4yNTY1Yy4zMzYgMCAuNjIwNS0uMjUyMzUzLjY2Ny0uNTkxODgyNGwzLjI0OTUtMjMuNjkxNjA3ODRjLjA1NjUtLjQxMjk0MTE4LS4yNTgtLjc4MTUyOTQyLS42NjctLjc4MTUyOTQyaC00LjgyMDVjLS4zMzYgMC0uNjIwNS4yNTE4NDMxNC0uNjY3LjU5MDg2Mjc1bC0xLjQ4IDEwLjc1ODkwMmMtLjAwMS4wMDkxNzY0LS4wMDE1LjAxODg2MjctLjAwMTUuMDI4NTQ5bTkuMzk0IDEzLjY4NjYwMzloNC44NTVjLjMzNiAwIC42MjA1LS4yNTIzNTI5LjY2Ny0uNTkxMzcyNmwzLjI0OS0yMy42OTIxMTc2Yy4wNTY1LS40MTI5NDEyLS4yNTgtLjc4MTUyOTQ0LS42NjctLjc4MTUyOTQ0aC00Ljg1NWMtLjMzNiAwLS42MjA1LjI1MjM1Mjk0LS42NjcuNTkxMzcyNTVsLTMuMjQ5IDIzLjY5MjExNzY4Yy0uMDU2NS40MTI5NDEyLjI1OC43ODE1Mjk0LjY2Ny43ODE1Mjk0TTM2LjYyMTE1LjkwNjA3NDVsLS42MzYgNC40MzIyMzUzYy0uMDU5NS40MTQ0NzA2LjI1NTUuNzg2MTE3NjUuNjY2Ljc4NjExNzY1aDUuMDgwNWMuNDA4NSAwIC43MjMuMzY3NTY4NjMuNjY3NS43ODA1MDk4bC0yLjM5MzUgMTcuNzM0MDM5MjVjLS4wNTU1LjQxMjQzMTMuMjU4NS43OC42NjcuNzhoNC45MjU1Yy4zMzY1IDAgLjYyMS0uMjUyODYyOC42NjctLjU5MjkwMmwyLjQ0NC0xOC4xMDg3NDUxYy4wNDYtLjMzOTUyOTQuMzMwNS0uNTkyOTAxOTUuNjY3LS41OTI5MDE5NWg1LjQ2MjVjLjMzNCAwIC42MTgtLjI0OTgwMzkyLjY2Ni0uNTg3Mjk0MTJsLjYzNy00LjQzMjIzNTNjLjA1OTUtLjQxNDQ3MDU4LS4yNTU1LS43ODYxMTc2NC0uNjY2NS0uNzg2MTE3NjRoLTE4LjE4NzVjLS4zMzQ1IDAtLjYxOC4yNTAzMTM3LS42NjY1LjU4NzI5NDFNNzEuMDM4NyA5LjA5ODM2ODZjLS4xNzQgMS40NTE0MTE3Ny0xLjI4NDUgMi45MDI4MjM1Ny0zLjE5NSAyLjkwMjgyMzU3aC0yLjg2OTVjLS40MSAwLS43MjQ1LS4zNjk2MDc5LS42NjctLjc4MzA1ODlsLjYwNzUtNC4zNjE4ODIzM2MuMDQ3LS4zMzg1MDk4LjMzMTUtLjU5MDM1Mjk0LjY2Ny0uNTkwMzUyOTRoMy4wNjFjMS44NDA1IDAgMi41Njk1IDEuMzEwMTk2MDggMi4zOTYgMi44MzI0NzA2TTY5LjMzNzIuMzU0MjExNzZoLTkuMjQwNWMtLjMzNiAwLS42MjA1LjI1MjM1Mjk0LS42NjcuNTkxMzcyNTRsLTMuMjQ5IDIzLjY5MjExNzdjLS4wNTY1LjQxMjk0MTEuMjU4Ljc4MTUyOTQuNjY3Ljc4MTUyOTRoNC45MjM1Yy4zMzY1IDAgLjYyMTUtLjI1MzM3MjYuNjY3NS0uNTkyOTAybC45NTYtNy4wNzY1ODgyYy4wMjMtLjE2OTc2NDcuMTY1LS4yOTYxOTYxLjMzMzUtLjI5NjE5NjFoLjYzM2MuMTE0NSAwIC4yMjE1LjA1OTY0NzEuMjgzNS4xNTgwMzkybDQuNzAyIDcuNDkxMDU4OGMuMTI0LjE5NzI5NDIuMzM3NS4zMTY1ODgzLjU2NzUuMzE2NTg4M2g2LjA4MWMuNTQ1IDAgLjg2NDUtLjYyNTAxOTYuNTUyLTEuMDgwMjc0NWwtNC45MzQ1LTcuMTkxODA0Yy0uMTE4LS4xNzI4MjM1LS4wNTc1LS40MTI0MzEzLjEyOC0uNTA0NzA1OCAzLjE1MDUtMS41Njk2ODYzIDQuOTc5NS0zLjE3ODExNzcgNS41ODMtNy42NTAxMTc3LjY5MzUtNS44NzcwMTk2LTIuOTE3LTguNjM4MTE3NjMtNy45ODY1LTguNjM4MTE3NjMiLz48L3N2Zz4=);
background-size: 63px 16px;
padding-left: 73px;
}
.toast.toast-spotify {
[REPLACE_CLASS_toast].toast-spotify {
background-color: #1DB954;
color: #FFF;
}
.toast.toast-spotify.icon {
[REPLACE_CLASS_toast].toast-spotify[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwOC41MiA1MDguNTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwOC41MiA1MDguNTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZD0iTTI1NC4yNiwwQzExMy44NDUsMCwwLDExMy44NDUsMCwyNTQuMjZzMTEzLjg0NSwyNTQuMjYsMjU0LjI2LDI1NC4yNiAgICAgczI1NC4yNi0xMTMuODQ1LDI1NC4yNi0yNTQuMjZTMzk0LjY3NSwwLDI1NC4yNiwweiBNMzcxLjY5Niw0MDMuMjg4Yy0zLjE3OCw1LjgxNi05LjEyMiw5LjA1OC0xNS4yODcsOS4wNTggICAgIGMtMi44NiwwLTUuNzIxLTAuNjY3LTguNDIyLTIuMTI5Yy00MC43MTMtMjIuNDM4LTg2Ljk1Ny0zNC4yOTMtMTMzLjY3Ny0zNC4yOTNjLTI4LDAtNTUuNjUxLDQuMTYzLTgyLjEyNiwxMi4zNjMgICAgIGMtOS4yMTcsMi44Ni0xOS4wMDYtMi4yODgtMjEuODM1LTExLjUzN2MtMi44Ni05LjE4NSwyLjI4OC0yOC43LDExLjUzNy0zMS41OTJjMjkuODQ0LTkuMjQ5LDYwLjk1OS0xMy45MjEsOTIuNDU1LTEzLjkyMSAgICAgYzUyLjU2OCwwLDEwNC42NiwxMy4zNDksMTUwLjUyMiwzOC42MTZDMzczLjMxNywzNzQuNDYxLDM3Ni40LDM5NC44NjYsMzcxLjY5Niw0MDMuMjg4eiBNNDA0LjAxOSwzMDcuNTI3ICAgICBjLTMuNjIzLDcuMDI0LTEwLjc0MiwxOC4zMzgtMTguMDg0LDE4LjMzOGMtMy4yMSwwLTYuMzg4LTAuNjk5LTkuMzc2LTIuMzJjLTUwLjQ3MS0yNi4xODktMTA1LjA0MS0zOS40NzQtMTYyLjIxOC0zOS40NzQgICAgIGMtMzEuNDk2LDAtNjIuNzcsNC4xMzItOTIuOTY0LDEyLjQ1OWMtMTAuOTAxLDIuOTU2LTIyLjA4OS0zLjQwMS0yNS4wNDUtMTQuMzAyYy0yLjkyNC0xMC45MDEsMy40NjQtMjkuNDMxLDE0LjMzNC0zMi4zODYgICAgIGMzMy42ODktOS4xODUsNjguNTg3LTEzLjg1NywxMDMuNjc0LTEzLjg1N2M2Mi44OTgsMCwxMjUuNDQ1LDE1LjI1NiwxODAuOTM4LDQ0LjExNCAgICAgQzQwNS4yOSwyODUuMjQ4LDQwOS4xOTksMjk3LjUxNiw0MDQuMDE5LDMwNy41Mjd6IE00MTcuNTI2LDIzMC44MzZjLTMuNDY0LDAtNy4wMjQtMC43OTUtMTAuMzYxLTIuNDQ3ICAgICBjLTYwLjIyOC0zMC4wMzQtMTI1LjA5Ni00NS4yMjYtMTkyLjc2MS00NS4yMjZjLTM1LjI3OSwwLTcwLjQzLDQuMjkxLTEwNC41MzMsMTIuNzEzYy0xMi41MjIsMy4wODMtMjUuMTQtNC41MTMtMjguMjIzLTE3LjAwNCAgICAgYy0zLjExNS0xMi40NTksNC41MTMtMjcuNTU1LDE3LjAwNC0zMC42MzhjMzcuNzI2LTkuMzc2LDc2LjY1OS0xNC4xMTEsMTE1LjcyLTE0LjExMWM3NC45NzUsMCwxNDYuODY3LDE2Ljg3NywyMTMuNTc4LDUwLjEyMSAgICAgYzExLjUzNyw1Ljc1MywxNi4yNDEsMTkuNzM3LDEwLjQ4OCwzMS4yNDJDNDM0LjMwOCwyMjMuNjUzLDQyNi4xMDgsMjMwLjgzNiw0MTcuNTI2LDIzMC44MzZ6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}
.toast.toast-streamermode {
[REPLACE_CLASS_toast].toast-streamermode {
background-color: #593695;
color: #FFF;
}
.toast.toast-streamermode.icon {
[REPLACE_CLASS_toast].toast-streamermode[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSItMjUgLTI1IDU0MiA1NDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MiA0OTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxwYXRoIGQ9Ik00ODguMywxNDIuNXYyMDMuMWMwLDE1LjctMTcsMjUuNS0zMC42LDE3LjdsLTg0LjYtNDguOHYxMy45YzAsNDEuOC0zMy45LDc1LjctNzUuNyw3NS43SDc1LjdDMzMuOSw0MDQuMSwwLDM3MC4yLDAsMzI4LjQgICBWMTU5LjljMC00MS44LDMzLjktNzUuNyw3NS43LTc1LjdoMjIxLjhjNDEuOCwwLDc1LjcsMzMuOSw3NS43LDc1Ljd2MTMuOWw4NC42LTQ4LjhDNDcxLjMsMTE3LDQ4OC4zLDEyNi45LDQ4OC4zLDE0Mi41eiIgZmlsbD0iI0ZGRkZGRiIvPjwvc3ZnPg==);
}
.toast.toast-success {
[REPLACE_CLASS_toast].toast-success {
background-color: #43B581;
color: #FFF;
}
.toast.toast-success.icon {
[REPLACE_CLASS_toast].toast-success[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz48L3N2Zz4=);
}
.toast.toast-warning,
.toast.toast-warn {
[REPLACE_CLASS_toast].toast-warning,
[REPLACE_CLASS_toast].toast-warn {
background-color: #FFA600;
color: #FFF;
}
.toast.toast-warning.icon,
.toast.toast-warn.icon {
[REPLACE_CLASS_toast].toast-warning[REPLACE_CLASS_toasticon],
[REPLACE_CLASS_toast].toast-warn[REPLACE_CLASS_toasticon] {
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMSAyMWgyMkwxMiAyIDEgMjF6bTEyLTNoLTJ2LTJoMnYyem0wLTRoLTJ2LTRoMnY0eiIvPjwvc3ZnPg==);
}

View File

@ -14,12 +14,12 @@ module.exports = (_ => {
"info": {
"name": "FriendNotifications",
"author": "DevilBro",
"version": "1.5.4",
"version": "1.5.5",
"description": "Get a notification when a Friend or a User you choose to observe changes their online status, can be configured individually in the settings"
},
"changeLog": {
"fixed": {
"New Settings Menu": "Fixed for new settings menu"
"added": {
"Search": "You can now search for a username in the time log modal"
}
}
};
@ -64,7 +64,8 @@ module.exports = (_ => {
}
} : (([Plugin, BDFDB]) => {
var _this;
var userStatusStore, timeLog, lastTimes, friendCounter, checkInterval, paginationOffset = {};
var userStatusStore, timeLog, lastTimes, checkInterval, paginationOffset = {};
var friendCounter, timeLogList;
var settings = {}, amounts = {}, notificationStrings = {}, notificationSounds = {}, observedUsers = {};
const FriendOnlineCounterComponent = class FriendOnlineCounter extends BdApi.React.Component {
@ -84,6 +85,49 @@ module.exports = (_ => {
});
}
};
const TimeLogComponent = class TimeLog extends BdApi.React.Component {
componentDidMount() {
timeLogList = this;
}
render() {
return this.props.entries.length ? BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.PaginatedList, {
items: this.props.entries,
amount: 100,
copyToBottom: true,
renderItem: (log, i) => [
i > 0 ? BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.FormComponents.FormDivider, {
className: BDFDB.disCNS.margintop8 + BDFDB.disCN.marginbottom8
}) : null,
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex, {
align: BDFDB.LibraryComponents.Flex.Align.CENTER,
children: [
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, {
className: BDFDB.disCN._friendnotificationslogtime,
children: `[${log.timeString}]`
}),
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.AvatarComponents.default, {
className: BDFDB.disCN._friendnotificationslogavatar,
src: log.avatar,
status: log.status,
size: BDFDB.LibraryComponents.AvatarComponents.Sizes.SIZE_40
}),
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextScroller, {
className: BDFDB.disCN._friendnotificationslogcontent,
speed: 1,
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, {
children: BDFDB.ReactUtils.elementToReact(BDFDB.DOMUtils.create(log.string))
})
})
]
})
]
}) : BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.MessagesPopoutComponents.EmptyStateBottom, {
msg: BDFDB.LanguageUtils.LanguageStrings.AUTOCOMPLETE_NO_RESULTS_HEADER,
image: BDFDB.DiscordUtils.getTheme() == BDFDB.disCN.themelight ? "/assets/9b0d90147f7fab54f00dd193fe7f85cd.svg" : "/assets/308e587f3a68412f137f7317206e92c2.svg"
})
}
};
return class FriendNotifications extends Plugin {
onLoad() {
@ -144,6 +188,11 @@ module.exports = (_ => {
${BDFDB.dotCN._friendnotificationsfriendsonline} {
cursor: pointer;
}
${BDFDB.dotCNS._friendnotificationstimelogmodal + BDFDB.dotCN.messagespopoutemptyplaceholder} {
position: absolute;
bottom: 0;
width: 100%;
}
`;
for (let type in this.defaults.notificationstrings) {
@ -399,19 +448,19 @@ module.exports = (_ => {
children: [BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex, {
className: BDFDB.disCN.marginbottom8,
children: BDFDB.ReactUtils.createElement("div", {
className: BDFDB.disCNS.settingsrowtitle + BDFDB.disCNS.settingsrowtitledefault + BDFDB.disCN.cursordefault,
className: BDFDB.disCNS.settingsrowtitle + BDFDB.disCNS.settingsrowtitle + BDFDB.disCNS.settingsrowtitledefault + BDFDB.disCN.cursordefault,
children: [
"Allows you to configure your own message strings for the different statuses. ",
BDFDB.ReactUtils.createElement("strong", {children: "$user"}),
" is the placeholder for the username, ",
BDFDB.ReactUtils.createElement("strong", {children: "$status"}),
" for the statusName, ",
" for the status name, ",
BDFDB.ReactUtils.createElement("strong", {children: "$game"}),
" for the gamename, ",
" for the game name, ",
BDFDB.ReactUtils.createElement("strong", {children: "$song"}),
" for the songname and ",
" for the song name and ",
BDFDB.ReactUtils.createElement("strong", {children: "$artist"}),
" for the songartist."
" for the song artist."
]
})
})].concat(Object.keys(notificationStrings).map(key => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, {
@ -622,7 +671,7 @@ module.exports = (_ => {
};
if (!observedUsers[id].desktop) {
if (!document.querySelector(`.friendnotifications-${id}-toast`)) {
let toast = BDFDB.NotificationUtils.toast(`<div class="toast-inner"><div class="toast-avatar" style="background-image: url(${avatar});"></div><div>${toastString}</div></div>`, {html: true, timeout: toastTime, color: BDFDB.UserUtils.getStatusColor(status.statusName), icon: false, selector: `friendnotifications-${status.statusName}-toast friendnotifications-${id}-toast`});
let toast = BDFDB.NotificationUtils.toast(`<div class="${BDFDB.disCN.toastinner}"><div class="${BDFDB.disCN.toastavatar}" style="background-image: url(${avatar});"></div><div>${toastString}</div></div>`, {html: true, timeout: toastTime, color: BDFDB.UserUtils.getStatusColor(status.statusName), icon: false, selector: `friendnotifications-${status.statusName}-toast friendnotifications-${id}-toast`});
toast.addEventListener("click", openChannel);
let notificationsound = notificationSounds["toast" + status.statusName] || {};
if (!notificationsound.mute && notificationsound.song) {
@ -646,43 +695,30 @@ module.exports = (_ => {
}
showTimeLog () {
if (!timeLog.length) BDFDB.NotificationUtils.toast("No logs saved yet", {type: "error"});
else BDFDB.ModalUtils.open(this, {
let searchTimeout;
BDFDB.ModalUtils.open(this, {
size: "MEDIUM",
header: "LogIn/-Out Timelog",
subheader: "",
className: `${this.name}-Log-modal`,
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.PaginatedList, {
items: timeLog,
amount: 100,
copyToBottom: true,
renderItem: (log, i) => [
i > 0 ? BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.FormComponents.FormDivider, {
className: BDFDB.disCNS.margintop8 + BDFDB.disCN.marginbottom8
}) : null,
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex, {
align: BDFDB.LibraryComponents.Flex.Align.CENTER,
children: [
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, {
className: BDFDB.disCN._friendnotificationslogtime,
children: `[${log.timeString}]`
}),
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.AvatarComponents.default, {
className: BDFDB.disCN._friendnotificationslogavatar,
src: log.avatar,
status: log.status,
size: BDFDB.LibraryComponents.AvatarComponents.Sizes.SIZE_40
}),
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextScroller, {
className: BDFDB.disCN._friendnotificationslogcontent,
speed: 1,
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, {
children: BDFDB.ReactUtils.elementToReact(BDFDB.DOMUtils.create(log.string))
})
})
]
})
]
className: BDFDB.disCN._friendnotificationstimelogmodal,
titleChildren: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SearchBar, {
autoFocus: true,
query: "",
onChange: (value, instance) => {
BDFDB.TimeUtils.clear(searchTimeout);
searchTimeout = BDFDB.TimeUtils.timeout(_ => {
let searchString = value.toUpperCase();
timeLogList.props.entries = timeLog.filter(n => n && n.name && n.name.toUpperCase().indexOf(searchString) > -1);
BDFDB.ReactUtils.forceUpdate(timeLogList);
}, 1000);
},
onClear: instance => {
timeLogList.props.entries = timeLog;
BDFDB.ReactUtils.forceUpdate(timeLogList);
}
}),
children: BDFDB.ReactUtils.createElement(TimeLogComponent, {
entries: timeLog
})
});
}