310 lines
12 KiB
Plaintext
310 lines
12 KiB
Plaintext
<style>
|
|
#message_div{
|
|
width: 100vw;
|
|
height: 90vh;
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 10000;
|
|
background-color: transparent;
|
|
transition: background-color 1s;
|
|
pointer-events: none;
|
|
top: 10vh;
|
|
}
|
|
.message{
|
|
margin: auto;
|
|
margin-bottom: 0px;
|
|
margin-right: 0px;
|
|
width: auto;
|
|
height: auto;
|
|
min-width: 100px;
|
|
position:relative;
|
|
max-width: 200px;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border: 0.2vw rgba(0, 0, 0, 0.2) solid;
|
|
border-radius: 0.5vw;
|
|
margin-block: 1vw;
|
|
text-align: center;
|
|
pointer-events: all;
|
|
margin-right: 1vw;
|
|
font-size: calc(var(--main-font-size)/1.2);
|
|
padding: 0.5vw;
|
|
transform: translateX(120%);
|
|
transition: 300ms;
|
|
}
|
|
.yes-ans, .no-ans{
|
|
background-color: transparent;
|
|
border: 0px;
|
|
cursor: pointer;
|
|
}
|
|
.yes-ans:hover, .no-ans:hover{
|
|
transition-duration: 200ms;
|
|
color: rgba(0, 144, 0, 0.5);
|
|
transform: scale(1.05);
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="message_div"></div>
|
|
|
|
<script>
|
|
let msg_int = 0;
|
|
function msg(text,params = {type:null,time:null,res:null,def:null}){
|
|
Object.values(document.getElementsByClassName("message")).forEach(element => {
|
|
element.setAttribute("ans","false");
|
|
});
|
|
params.time = (params.time == null)? 8:params.time;
|
|
params.type = (params.type == null)? "msg":params.type;
|
|
msg_int++;
|
|
params.time = params.time * 700;
|
|
let msg_div = document.createElement("div");
|
|
let msg_root = document.getElementById("message_div");
|
|
msg_div.classList.add("message");
|
|
msg_div.innerText = text;
|
|
msg_div.id = `msg_${msg_int}`;
|
|
msg_root.appendChild(msg_div)
|
|
// console.log(`msg_${msg_int}`);
|
|
setTimeout(()=>{
|
|
msg_div.style.transform = "translateX(0%)";
|
|
},100)
|
|
switch (params.type) {
|
|
case "help":
|
|
msg_div.style.borderColor = "rgba(255, 255, 0, 0.5)";
|
|
break;
|
|
case "ask":
|
|
msg_div.style.borderColor = "rgba(0, 255, 0, 0.5)";
|
|
break;
|
|
case "enter":
|
|
msg_div.style.borderColor = "rgba(0, 255, 0, 0.5)";
|
|
break;
|
|
case "warning":
|
|
msg_div.style.borderColor = "rgba(255, 0, 0, 0.5)";
|
|
break;
|
|
case "wait":
|
|
msg_div.style.borderColor = "rgba(0, 0, 255, 0.5)";
|
|
break;
|
|
case "date":
|
|
msg_div.style.borderColor = "rgba(0, 255, 0, 0.5)";
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
// console.log(params.type,params.time);
|
|
|
|
if (params.type == "ask"){
|
|
// msg_div.setAttribute("onclick",`msg_del("msg_${msg_int}")`);
|
|
let yes = document.createElement("button");
|
|
let no = document.createElement("button");
|
|
let q_div = document.createElement("div");
|
|
q_div.style = "display:flex;justify-content: space-between;z-index:20000";
|
|
yes.innerText = "Да";
|
|
no.innerText = "Нет";
|
|
yes.classList.add("yes-ans")
|
|
no.classList.add("no-ans")
|
|
yes.classList.add("ans")
|
|
no.classList.add("ans")
|
|
yes.id = `${msg_div.id}-yes`;
|
|
no.id = `${msg_div.id}-no`;
|
|
q_div.append(yes)
|
|
q_div.append(no)
|
|
msg_div.append(q_div)
|
|
|
|
// document.getElementById("message_div").style.pointerEvents = "all";
|
|
document.getElementById("message_div").setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","false")`)
|
|
|
|
msg_div.setAttribute("ans","null")
|
|
yes.setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","true")`)
|
|
no.setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","false")`)
|
|
yes.focus();
|
|
yes.addEventListener('keydown', function(e) {
|
|
if (e.keyCode === 13) {
|
|
document.getElementById(`${msg_div.id}`).setAttribute("ans","true")
|
|
}
|
|
else if (e.keyCode === 27) {
|
|
document.getElementById(`${msg_div.id}`).setAttribute("ans","false")
|
|
}
|
|
})
|
|
|
|
|
|
var observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type = "attributes" && mutation.target.getAttribute("ans") != "null") {
|
|
// console.log(mutation);
|
|
if(mutation.target.getAttribute("ans") == "true"){
|
|
params.res(true);fin();
|
|
}
|
|
else if (mutation.target.getAttribute("ans") == "false"){
|
|
params.res(false);fin();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
observer.observe(msg_div, {attributes: true });
|
|
|
|
|
|
function fin(){
|
|
observer.disconnect();
|
|
// document.getElementById("message_div").style.pointerEvents = "none";
|
|
if (document.getElementById(msg_div.id) != null){
|
|
msg_div.style.transform = "translateX(120%)";
|
|
setTimeout(() => {
|
|
msg_root.removeChild(msg_div);
|
|
}, 200);
|
|
}
|
|
}
|
|
}
|
|
else if(params.type == "enter"){
|
|
let yes = document.createElement("button");
|
|
let no = document.createElement("button");
|
|
let text = document.createElement("input");
|
|
let q_div = document.createElement("div");
|
|
text.value = (typeof params.def != "undefined")? params.def:"";
|
|
text.style.width = "90%";
|
|
text.style.marginBlock = "0.5vw";
|
|
text.style.border = "1px gray solid";
|
|
text.style.borderRadius = "0.5vw";
|
|
q_div.style = "display:flex;justify-content: space-between;z-index:20000";
|
|
yes.innerText = "Ок";
|
|
no.innerText = "Отменить";
|
|
yes.classList.add("yes-ans")
|
|
no.classList.add("no-ans")
|
|
yes.classList.add("ans")
|
|
no.classList.add("ans")
|
|
yes.id = `${msg_div.id}-yes`;
|
|
no.id = `${msg_div.id}-no`;
|
|
q_div.append(yes)
|
|
q_div.append(no)
|
|
msg_div.append(text)
|
|
msg_div.append(q_div)
|
|
msg_div.setAttribute("ans","null")
|
|
yes.setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","true")`)
|
|
no.setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","false")`)
|
|
text.focus();
|
|
text.addEventListener('keydown', function(e) {
|
|
if (e.keyCode === 13) {
|
|
document.getElementById(`${msg_div.id}`).setAttribute("ans","true")
|
|
}
|
|
else if (e.keyCode === 27) {
|
|
document.getElementById(`${msg_div.id}`).setAttribute("ans","false")
|
|
}
|
|
})
|
|
// document.getElementById("message_div").style.pointerEvents = "all";
|
|
// document.getElementById("message_div").setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","false")`)
|
|
|
|
var observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type = "attributes" && mutation.target.getAttribute("ans") != "null") {
|
|
// console.log(mutation);
|
|
if(mutation.target.getAttribute("ans") == "true"){
|
|
params.res(text.value);fin();
|
|
}
|
|
else if (mutation.target.getAttribute("ans") == "false"){
|
|
params.res(false);fin();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
observer.observe(msg_div, {attributes: true });
|
|
|
|
|
|
function fin(){
|
|
observer.disconnect();
|
|
// document.getElementById("message_div").style.pointerEvents = "none";
|
|
if (document.getElementById(msg_div.id) != null){
|
|
msg_div.style.transform = "translateX(120%)";
|
|
setTimeout(() => {
|
|
msg_root.removeChild(msg_div);
|
|
}, 200);
|
|
}
|
|
}
|
|
}
|
|
if (params.type == "date"){
|
|
// msg_div.setAttribute("onclick",`msg_del("msg_${msg_int}")`);
|
|
let yes = document.createElement("button");
|
|
let no = document.createElement("button");
|
|
let q_div = document.createElement("div");
|
|
let date = document.createElement("input");
|
|
q_div.style = "display:flex;justify-content: space-between;z-index:20000";
|
|
yes.innerText = "Да";
|
|
no.innerText = "Нет";
|
|
yes.classList.add("yes-ans")
|
|
no.classList.add("no-ans")
|
|
yes.classList.add("ans")
|
|
no.classList.add("ans")
|
|
yes.id = `${msg_div.id}-yes`;
|
|
no.id = `${msg_div.id}-no`;
|
|
q_div.append(yes)
|
|
q_div.append(no)
|
|
msg_div.append(date)
|
|
msg_div.append(q_div)
|
|
date.setAttribute("type","date");
|
|
|
|
// document.getElementById("message_div").style.pointerEvents = "all";
|
|
// document.getElementById("message_div").setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","false")`)
|
|
let now = new Date().toLocaleDateString().split(".").reverse().join('-');;
|
|
date.value = now;
|
|
|
|
msg_div.setAttribute("ans","null")
|
|
yes.setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","true")`)
|
|
no.setAttribute("onclick",`document.getElementById('${msg_div.id}').setAttribute("ans","false")`)
|
|
yes.focus();
|
|
yes.addEventListener('keydown', function(e) {
|
|
if (e.keyCode === 13) {
|
|
document.getElementById(`${msg_div.id}`).setAttribute("ans","true")
|
|
}
|
|
else if (e.keyCode === 27) {
|
|
document.getElementById(`${msg_div.id}`).setAttribute("ans","false")
|
|
}
|
|
})
|
|
|
|
|
|
var observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type = "attributes" && mutation.target.getAttribute("ans") != "null") {
|
|
// console.log(mutation);
|
|
if(mutation.target.getAttribute("ans") == "true"){
|
|
params.res(date.value);fin();
|
|
}
|
|
else if (mutation.target.getAttribute("ans") == "false"){
|
|
params.res(false);fin();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
observer.observe(msg_div, {attributes: true });
|
|
|
|
|
|
function fin(){
|
|
observer.disconnect();
|
|
// document.getElementById("message_div").style.pointerEvents = "none";
|
|
if (document.getElementById(msg_div.id) != null){
|
|
msg_div.style.transform = "translateX(120%)";
|
|
setTimeout(() => {
|
|
msg_root.removeChild(msg_div);
|
|
}, 200);
|
|
}
|
|
}
|
|
}
|
|
else if(params.type != "wait" && params.type != "ask" && params.type != "date" && params.type != "enter"){
|
|
msg_div.setAttribute("onclick",`msg_del("msg_${msg_int}")`);
|
|
setTimeout(()=>{
|
|
if (document.getElementById(msg_div.id) != null){
|
|
msg_div.style.transform = "translateX(120%)";
|
|
setTimeout(() => {
|
|
msg_root.removeChild(msg_div);
|
|
console.log(params.type);
|
|
}, 200);
|
|
}
|
|
},params.time)
|
|
}
|
|
return msg_div;
|
|
}
|
|
|
|
function msg_del(id){
|
|
let msg_div = document.getElementById(`${id}`);
|
|
let msg_root = document.getElementById("message_div");
|
|
msg_div.style.transform = "translateX(120%)";
|
|
setTimeout(() => {
|
|
msg_root.removeChild(msg_div);
|
|
}, 200);
|
|
}
|
|
</script> |