mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-02-05 05:17:51 +08:00
added banner support
This commit is contained in:
Miodec
parent
53966af9e7
commit
5e1b4d37f5
4 changed files with 224 additions and 87 deletions
|
|
@ -1,29 +1,36 @@
|
|||
import * as Misc from "./misc";
|
||||
// const notificationHistory = [];
|
||||
let id = 0;
|
||||
class Notification {
|
||||
constructor(
|
||||
type,
|
||||
message,
|
||||
level,
|
||||
duration,
|
||||
customTitle,
|
||||
customIcon,
|
||||
clickCallback = () => {}
|
||||
closeCallback = () => {}
|
||||
) {
|
||||
this.type = type;
|
||||
this.message = message;
|
||||
this.level = level;
|
||||
if (duration == undefined) {
|
||||
if (level === -1) {
|
||||
this.duration = 0;
|
||||
} else {
|
||||
this.duration = 3000;
|
||||
}
|
||||
if (type === "banner") {
|
||||
this.duration = duration;
|
||||
} else {
|
||||
this.duration = duration * 1000;
|
||||
if (duration == undefined) {
|
||||
if (level === -1) {
|
||||
this.duration = 0;
|
||||
} else {
|
||||
this.duration = 3000;
|
||||
}
|
||||
} else {
|
||||
this.duration = duration * 1000;
|
||||
}
|
||||
}
|
||||
this.customTitle = customTitle;
|
||||
this.customIcon = customIcon;
|
||||
this.id = id++;
|
||||
this.clickCallback = clickCallback;
|
||||
this.closeCallback = closeCallback;
|
||||
}
|
||||
//level
|
||||
//0 - notice
|
||||
|
|
@ -48,88 +55,142 @@ class Notification {
|
|||
title = this.customTitle;
|
||||
}
|
||||
|
||||
if (this.type === "banner") {
|
||||
icon = `<i class="fas fa-fw fa-bullhorn"></i>`;
|
||||
}
|
||||
|
||||
if (this.customIcon != undefined) {
|
||||
icon = `<i class="fas fa-fw fa-${this.customIcon}"></i>`;
|
||||
}
|
||||
|
||||
// moveCurrentToHistory();
|
||||
let oldHeight = $("#notificationCenter .history").height();
|
||||
$("#notificationCenter .history").prepend(`
|
||||
|
||||
<div class="notif ${cls}" id=${this.id}>
|
||||
<div class="icon">${icon}</div>
|
||||
<div class="message"><div class="title">${title}</div>${this.message}</div>
|
||||
</div>
|
||||
if (this.type === "notification") {
|
||||
// moveCurrentToHistory();
|
||||
let oldHeight = $("#notificationCenter .history").height();
|
||||
$("#notificationCenter .history").prepend(`
|
||||
|
||||
<div class="notif ${cls}" id=${this.id}>
|
||||
<div class="icon">${icon}</div>
|
||||
<div class="message"><div class="title">${title}</div>${this.message}</div>
|
||||
</div>
|
||||
|
||||
`);
|
||||
let newHeight = $("#notificationCenter .history").height();
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).remove();
|
||||
$("#notificationCenter .history")
|
||||
.css("margin-top", 0)
|
||||
.animate(
|
||||
{
|
||||
marginTop: newHeight - oldHeight,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#notificationCenter .history").css("margin-top", 0);
|
||||
$("#notificationCenter .history").prepend(`
|
||||
|
||||
<div class="notif ${cls}" id=${this.id}>
|
||||
<div class="icon">${icon}</div>
|
||||
<div class="message"><div class="title">${title}</div>${this.message}</div>
|
||||
</div>
|
||||
`);
|
||||
let newHeight = $("#notificationCenter .history").height();
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).remove();
|
||||
$("#notificationCenter .history")
|
||||
.css("margin-top", 0)
|
||||
.animate(
|
||||
{
|
||||
marginTop: newHeight - oldHeight,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$("#notificationCenter .history").css("margin-top", 0);
|
||||
$("#notificationCenter .history").prepend(`
|
||||
|
||||
<div class="notif ${cls}" id=${this.id}>
|
||||
<div class="icon">${icon}</div>
|
||||
<div class="message"><div class="title">${title}</div>${this.message}</div>
|
||||
</div>
|
||||
|
||||
`);
|
||||
$(`#notificationCenter .notif[id='${this.id}']`)
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).css(
|
||||
"opacity",
|
||||
""
|
||||
);
|
||||
}
|
||||
);
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).click(() => {
|
||||
this.hide();
|
||||
this.clickCallback();
|
||||
});
|
||||
}
|
||||
`);
|
||||
$(`#notificationCenter .notif[id='${this.id}']`)
|
||||
.css("opacity", 0)
|
||||
.animate(
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).css(
|
||||
"opacity",
|
||||
""
|
||||
);
|
||||
}
|
||||
);
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).click(() => {
|
||||
this.hide();
|
||||
this.closeCallback();
|
||||
});
|
||||
}
|
||||
);
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).hover(() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
|
||||
});
|
||||
} else if (this.type === "banner") {
|
||||
let leftside = `<div class="icon">${icon}</div>`;
|
||||
|
||||
if (/^images\/.*/.test(this.customIcon)) {
|
||||
leftside = `<div class="image" style="background-image: url(${this.customIcon})"></div>`;
|
||||
}
|
||||
|
||||
$("#bannerCenter").prepend(`
|
||||
<div class="banner ${cls}" id="${this.id}">
|
||||
<div class="container">
|
||||
${leftside}
|
||||
<div class="text">
|
||||
${this.message}
|
||||
</div>
|
||||
${
|
||||
this.duration >= 0
|
||||
? `
|
||||
<div class="closeButton">
|
||||
<i class="fas fa-fw fa-times"></i>
|
||||
</div>
|
||||
`
|
||||
: `<div style="margin-right: 2rem;">${icon}</div>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
let height = $("#bannerCenter").height();
|
||||
$("#centerContent").css(
|
||||
"padding-top",
|
||||
height + Misc.convertRemToPixels(2) + "px"
|
||||
);
|
||||
$("#notificationCenter").css("margin-top", height + "px");
|
||||
if (this.duration >= 0) {
|
||||
$(`#bannerCenter .banner[id='${this.id}'] .closeButton`).click(() => {
|
||||
this.hide();
|
||||
this.closeCallback();
|
||||
});
|
||||
}
|
||||
}
|
||||
if (this.duration > 0) {
|
||||
setTimeout(() => {
|
||||
this.hide();
|
||||
}, this.duration + 250);
|
||||
}
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).hover(() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
|
||||
});
|
||||
}
|
||||
hide() {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).animate(
|
||||
{
|
||||
height: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).remove();
|
||||
}
|
||||
);
|
||||
}
|
||||
if (this.type === "notification") {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).animate(
|
||||
{
|
||||
height: 0,
|
||||
},
|
||||
125,
|
||||
() => {
|
||||
$(`#notificationCenter .notif[id='${this.id}']`).remove();
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
} else if (this.type === "banner") {
|
||||
$(`#bannerCenter .banner[id='${this.id}']`).remove();
|
||||
let height = $("#bannerCenter").height();
|
||||
$("#centerContent").css(
|
||||
"padding-top",
|
||||
height + Misc.convertRemToPixels(2) + "px"
|
||||
);
|
||||
$("#notificationCenter").css("margin-top", height + "px");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,16 +200,37 @@ export function add(
|
|||
duration,
|
||||
customTitle,
|
||||
customIcon,
|
||||
clickCallback
|
||||
closeCallback
|
||||
) {
|
||||
// notificationHistory.push(
|
||||
new Notification(
|
||||
"notification",
|
||||
message,
|
||||
level,
|
||||
duration,
|
||||
customTitle,
|
||||
customIcon,
|
||||
clickCallback
|
||||
closeCallback
|
||||
).show();
|
||||
// );
|
||||
}
|
||||
|
||||
export function addBanner(
|
||||
message,
|
||||
level = -1,
|
||||
customIcon = "bullhorn",
|
||||
sticky = false,
|
||||
closeCallback
|
||||
) {
|
||||
// notificationHistory.push(
|
||||
new Notification(
|
||||
"banner",
|
||||
message,
|
||||
level,
|
||||
sticky ? -1 : 0,
|
||||
undefined,
|
||||
customIcon,
|
||||
closeCallback
|
||||
).show();
|
||||
// );
|
||||
}
|
||||
|
|
|
|||
54
src/sass/banners.scss
Normal file
54
src/sass/banners.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
#bannerCenter {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
.banner {
|
||||
background: var(--sub-color);
|
||||
color: var(--bg-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-items: center;
|
||||
.image {
|
||||
// background-image: url(images/merchdropwebsite2.png);
|
||||
height: 2.1rem;
|
||||
background-size: cover;
|
||||
aspect-ratio: 6/1;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.icon {
|
||||
margin-left: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.text {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.closeButton {
|
||||
margin-right: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: 0.125s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.good {
|
||||
background: var(--main-color);
|
||||
}
|
||||
&.bad {
|
||||
background: var(--error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,6 +105,15 @@
|
|||
grid-template-columns: 1fr 1fr 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
#bannerCenter .banner .container {
|
||||
grid-template-columns: 1fr auto;
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
.text {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
#centerContent {
|
||||
#top {
|
||||
grid-template-areas:
|
||||
|
|
|
|||
|
|
@ -175,6 +175,7 @@
|
|||
</div>
|
||||
<div id="ad_rich_media" class="hidden"></div>
|
||||
<div id="backgroundLoader" style="display: none"></div>
|
||||
<div id="bannerCenter"></div>
|
||||
<div id="notificationCenter">
|
||||
<div class="history"></div>
|
||||
</div>
|
||||
|
|
@ -190,14 +191,6 @@
|
|||
>
|
||||
Important information about your account. Please click this message.
|
||||
</div>
|
||||
<div class="merchBanner hidden">
|
||||
<img src="images/merchdropwebsite2.png" alt="" />
|
||||
<div class="text">
|
||||
We've got brand new merch designs over at
|
||||
<a href="https://monkeytype.store" target="_blank">monkeytype.store</a>
|
||||
</div>
|
||||
<i class="fas closeButton fa-times"></i>
|
||||
</div>
|
||||
|
||||
<div id="simplePopupWrapper" class="popupWrapper hidden">
|
||||
<div id="simplePopup" popupId=""></div>
|
||||
|
|
@ -4933,7 +4926,6 @@
|
|||
</body>
|
||||
<!-- The core Firebase JS SDK is always required and must be listed first -->
|
||||
<script src="/__/firebase/8.4.2/firebase-app.js"></script>
|
||||
|
||||
<!-- TODO: Add SDKs for Firebase products that you want to use
|
||||
https://firebase.google.com/docs/web/setup#available-libraries -->
|
||||
<script src="/__/firebase/8.4.2/firebase-analytics.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue