325 lines
No EOL
12 KiB
JavaScript
325 lines
No EOL
12 KiB
JavaScript
$(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; |