// ==UserScript==
// @name dialog?
// @namespace http://tampermonkey.net/
// @version 1.0
// @description dialog
// @author twjx
// @grant none
// ==/UserScript==
window.dialog={create:function(attribute){/*attribute={type:'',text input select title:'',content:'',attribute:{position:'',coler:'',width:'',height:'',top:'',left:'',radius:'',boxShadow:'',transform:'',}scene:true/false,//是否有黑幕 enMove:true/false,button:[Object],}*/this.dialog=document.createElement('div');this.dialog.className='dialog';this.dialog.innerHTML=`<div class="dialog-canvas"></div><div class="dialog-content"><div class="dialog-title"><h2>${attribute.title}</h2><div class="dialog-title-close" onclick="dialog.close()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="close-icon"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div><div class="dialog-body"></div></div>`;Object.assign(this.dialog.children[0].style,{position:'fixed',top:0,left:0,width:'100%',height:'100%',overflow:'auto',backgroundColor:'rgba(0, 0, 0, 0.4)'});Object.assign(this.dialog.children[1].style,{position:attribute.attribute.position||'relative',width:(attribute.attribute.width||'500')+'px',height:(attribute.attribute.height||'400')+'px',backgroundColor:attribute.attribute.color||'#fefefe',borderRadius:(attribute.attribute.radius||'10px'),boxShadow:attribute.attribute.boxShadow||'0 0 5px 5px darkgray',top:(attribute.attribute.top||'100px'),left:(attribute.left||'50%'),transform:'translate(-50%,0)',});Object.assign(this.dialog.children[1].children[0].style,{position:'relative',width:'100%',height:'40px',lineHeight:'40px',textAlign:'center',color:'#333',fontWeight:'bold',fontSize:'22px',background:'#f5f5f5',borderBottom:'1px solid #ccc',borderRadius:(attribute.attribute.radius||'10px'),display:attribute.title?'block':'none',});Object.assign(this.dialog.children[1].children[0].children[1].style,{position:'relative',top:'-60px',left:'92%',width:'30px',height:'30px',lineHeight:'30px',textAlign:'center',color:'#333',fontWeight:'bold',fontSize:'22px',borderBottom:'1px solid #ccc',borderRadius:'50%',cursor:'pointer',backgroundSize:'cover',backgroundImage:'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDE3LjU5IDEzLjQxIDEyIDE5IDE3LjU5IDE5IDE3LjU5IDEzLjQxIDEyeiIvPjwvc3ZnPg==)',});Object.assign(this.dialog.children[1].children[1].style,{position:'relative',width:'96%',height:'calc(96% - 45px)',padding:'10px',overflow:'auto',color:'#333',backgroundColor:'#fff',fontSize:'16px',lineHeight:'1.5',borderRadius:(attribute.attribute.radius||'10px'),});this.dialog.children[0].style.display=attribute.scene?'block':'none';if(attribute.enMove==true){this.move.startmove();}document.body.appendChild(this.dialog);return this.dialog;},close:function(){this.dialog.remove();},move:{movep:[],onmove:false,startmove:function(){this.movedlg=dialog.dialog.children[1];this.movedlg.onmousedown=function(e){dialog.move.movep=[e.clientX/window.innerWidth*100-Number(dialog.move.movedlg.style.left.replace('%','')),e.clientY-Number(dialog.move.movedlg.style.top.replace('px',''))];dialog.move.onmove=true;};document.onmouseup=function(e){if(Number(dialog.move.movedlg.style.left.replace('%',''))<0)dialog.move.movedlg.style.left='0%';if(Number(dialog.move.movedlg.style.top.replace('px',''))<0)dialog.move.movedlg.style.top='0px';dialog.move.movep=[];dialog.move.onmove=false;};document.onmousemove=function(e){if(dialog.move.onmove==true){dialog.move.movedlg.style.top=e.clientY-dialog.move.movep[1]+'px';dialog.move.movedlg.style.left=(e.clientX/window.innerWidth-dialog.move.movep[0]/window.innerWidth)*100+'%';}};}}};