forked from Simnation/Main
Brutal Notify
This commit is contained in:
Miho931
parent
ae85941177
commit
986f2c1661
8 changed files with 491 additions and 0 deletions
325
resources/[tools]/brutal_notify/html/scripts.js
Normal file
325
resources/[tools]/brutal_notify/html/scripts.js
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
$(function () {
|
||||
var sound = new Audio('sound.mp3');
|
||||
sound.volume = 0.8;
|
||||
window.addEventListener('message', function (event) {
|
||||
if (event.data.action == 'open') {
|
||||
|
||||
TranslateX = localStorage.getItem("MenuPositionX")
|
||||
TranslateY = localStorage.getItem("MenuPositionY")
|
||||
if (TranslateX > -((screen.width-300)/2)){
|
||||
TranslateX = +TranslateX + +50
|
||||
}
|
||||
else{
|
||||
TranslateX = +TranslateX - +50
|
||||
}
|
||||
Translate = 'translate(' + TranslateX + 'px , ' + TranslateY + 'px)'
|
||||
|
||||
var number = Math.floor((Math.random() * 1000) + 1);
|
||||
|
||||
$('.toast').append(`
|
||||
<div class="wrapper-${number}" id="wrapper-${number}">
|
||||
<div class="notification_main-${number}">
|
||||
<div class="title-${number}"></div>
|
||||
<div class="text-${number}">
|
||||
${event.data.message}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-${number}"></div>
|
||||
</div>`)
|
||||
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin-bottom": "10px",
|
||||
"width": "275px",
|
||||
"margin": "0px 0 0 -180px",
|
||||
"border-radius": "10px",
|
||||
"transform": Translate,
|
||||
"opacity": "0",
|
||||
})
|
||||
$('.notification_main-'+number).addClass('main')
|
||||
$('.text-'+number).css({
|
||||
"font-size": "14px"
|
||||
})
|
||||
$(`.progress-${number}`).css({
|
||||
"position": "absolute",
|
||||
"bottom":"6px",
|
||||
"left": "6px",
|
||||
"height": "6px",
|
||||
"width": "95%",
|
||||
"border-radius": "3px",
|
||||
"transition": "0.2s",
|
||||
})
|
||||
|
||||
var width = 95;
|
||||
var id = setInterval(frame, event.data.time/100);
|
||||
function frame() {
|
||||
if (width === 0) {
|
||||
clearInterval(id);
|
||||
}
|
||||
else {
|
||||
width = width - 1;
|
||||
$(`.progress-${number}`).css("width" , width + '%');
|
||||
}
|
||||
}
|
||||
|
||||
if (event.data.type == 'success') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600",
|
||||
"color": "#47cf73",
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('success-icon')
|
||||
$(`.wrapper-${number}`).addClass('success')
|
||||
$(`.progress-${number}`).css({
|
||||
"background": "#47cf73",
|
||||
})
|
||||
|
||||
if (TranslateY > ((screen.height-480)/2)){
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0"+ -(+((document.getElementById(`wrapper-${number}`).offsetHeight)*2) + +8) +"px -180px",
|
||||
})
|
||||
}
|
||||
else {
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0 8px -180px",
|
||||
})
|
||||
}
|
||||
|
||||
if (event.data.audio) {
|
||||
sound.play();
|
||||
}
|
||||
} else if (event.data.type == 'info') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600",
|
||||
"color": "#2f83ff",
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('info-icon')
|
||||
$(`.wrapper-${number}`).addClass('info')
|
||||
$(`.progress-${number}`).css({
|
||||
"background": "#2f83ff",
|
||||
})
|
||||
|
||||
if (TranslateY > ((screen.height-480)/2)){
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0"+ -(+((document.getElementById(`wrapper-${number}`).offsetHeight)*2) + +8) +"px -180px",
|
||||
})
|
||||
}
|
||||
else {
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0 8px -180px",
|
||||
})
|
||||
}
|
||||
|
||||
if (event.data.audio) {
|
||||
sound.play();
|
||||
}
|
||||
} else if (event.data.type == 'error') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600",
|
||||
"color": "#dc3545",
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('error-icon')
|
||||
$(`.wrapper-${number}`).addClass('error')
|
||||
$(`.progress-${number}`).css({
|
||||
"background": "#dc3545",
|
||||
})
|
||||
|
||||
if (TranslateY > ((screen.height-480)/2)){
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0"+ -(+((document.getElementById(`wrapper-${number}`).offsetHeight)*2) + +8) +"px -180px",
|
||||
})
|
||||
}
|
||||
else {
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0 8px -180px",
|
||||
})
|
||||
}
|
||||
|
||||
if (event.data.audio) {
|
||||
sound.play();
|
||||
}
|
||||
} else if (event.data.type == 'warning') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600",
|
||||
"color": "#ffc107",
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('warning-icon')
|
||||
$(`.wrapper-${number}`).addClass('warning')
|
||||
$(`.progress-${number}`).css({
|
||||
"background": "#ffc107",
|
||||
})
|
||||
|
||||
if (TranslateY > ((screen.height-480)/2)){
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0"+ -(+((document.getElementById(`wrapper-${number}`).offsetHeight)*2) + +8) +"px -180px",
|
||||
})
|
||||
}
|
||||
else {
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin": "0 0 8px -180px",
|
||||
})
|
||||
}
|
||||
|
||||
if (event.data.audio) {
|
||||
sound.play();
|
||||
}
|
||||
}
|
||||
|
||||
if (TranslateX > -((screen.width-300)/2)){
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
opacity: 1,
|
||||
translateX: -50,
|
||||
duration: 750,
|
||||
easing: 'spring(1, 80, 10, 0)'
|
||||
})
|
||||
setTimeout(function () {
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
opacity: 0,
|
||||
translateX: 50,
|
||||
duration: 750,
|
||||
easing: 'spring(1, 80, 10, 0)'
|
||||
})
|
||||
setTimeout(function () {
|
||||
$(`.wrapper-${number}`).remove()
|
||||
}, 750)
|
||||
}, event.data.time)
|
||||
}
|
||||
else{
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
opacity: 1,
|
||||
translateX: 50,
|
||||
duration: 750,
|
||||
easing: 'spring(1, 80, 10, 0)'
|
||||
})
|
||||
setTimeout(function () {
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
opacity: 0,
|
||||
translateX: -50,
|
||||
duration: 750,
|
||||
easing: 'spring(1, 80, 10, 0)'
|
||||
})
|
||||
setTimeout(function () {
|
||||
$(`.wrapper-${number}`).remove()
|
||||
}, 750)
|
||||
}, event.data.time)
|
||||
}
|
||||
|
||||
}
|
||||
else if (event.data.action == 'open2') {
|
||||
|
||||
TranslateX = localStorage.getItem("MenuPositionX")
|
||||
TranslateY = localStorage.getItem("MenuPositionY")
|
||||
Translate = 'translate(' + TranslateX + 'px , ' + TranslateY + 'px)'
|
||||
|
||||
number = 1;
|
||||
window.number = number
|
||||
$('.toast').append(`
|
||||
<div class="wrapper-${number}" id="wrapper-${number}">
|
||||
<div class="notification_main-${number}">
|
||||
<div class="title-${number}"></div>
|
||||
<div class="text-${number}">
|
||||
${event.data.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin-bottom": "10px",
|
||||
"width": "275px",
|
||||
"margin": "0 0 8px -180px",
|
||||
"border-radius": "10px",
|
||||
"transform": Translate,
|
||||
"opacity": "0",
|
||||
})
|
||||
$('.notification_main-'+number).addClass('main')
|
||||
$('.text-'+number).css({
|
||||
"font-size": "14px"
|
||||
})
|
||||
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600",
|
||||
"color": "#47cf73"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('success-icon')
|
||||
$(`.wrapper-${number}`).addClass('success')
|
||||
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
opacity: 1,
|
||||
duration: 2500,
|
||||
})
|
||||
|
||||
panel = document.getElementById(`wrapper-${number}`)
|
||||
|
||||
panel.onmousedown = function(e){
|
||||
panel.style.cursor = "move"
|
||||
panel.style.opacity = "0.6"
|
||||
panel.style.transition = " 0s"
|
||||
panel.style.transition = "opacity 0.4s"
|
||||
|
||||
isDown = true;
|
||||
};
|
||||
|
||||
document.addEventListener('mouseup', function() {
|
||||
isDown = false;
|
||||
|
||||
panel.style.transition = "all 0.7s"
|
||||
panel.style.cursor = ""
|
||||
panel.style.opacity = "1"
|
||||
}, true);
|
||||
|
||||
document.addEventListener('mousemove', function(event) {
|
||||
event.preventDefault();
|
||||
if (isDown) {
|
||||
mousePosition = {
|
||||
|
||||
x : event.clientX,
|
||||
y : event.clientY
|
||||
|
||||
};
|
||||
xCenter = panel.offsetLeft + panel.offsetWidth / 2;
|
||||
yCenter = panel.offsetTop + panel.offsetHeight / 2;
|
||||
|
||||
TranslateX = mousePosition.x - xCenter
|
||||
TranslateY = mousePosition.y - yCenter
|
||||
Translate = 'translate(' + TranslateX + 'px , ' + TranslateY + 'px)'
|
||||
panel.style.transform = Translate;
|
||||
|
||||
localStorage.setItem("MenuPositionX", TranslateX)
|
||||
localStorage.setItem("MenuPositionY", TranslateY)
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
else if (event.data.action == 'reset') {
|
||||
TranslateX = 0
|
||||
TranslateY = 0
|
||||
localStorage.setItem("MenuPositionX", TranslateX)
|
||||
localStorage.setItem("MenuPositionY", TranslateY)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
document.onkeyup = function() {
|
||||
if (event.key == 'Escape') {
|
||||
$.post('https://'+GetParentResourceName()+'/close');
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
opacity: 0,
|
||||
duration: 750,
|
||||
})
|
||||
setTimeout(function () {
|
||||
$(`.wrapper-${number}`).remove()
|
||||
}, 750)
|
||||
}
|
||||
};
|
||||
|
||||
var mousePosition;
|
||||
var offset = [0,0];
|
||||
var isDown = false;
|
||||
Loading…
Add table
Add a link
Reference in a new issue