Widget:SN

}], [function(note){ if(note.config.isImgNote){ return null } if(note.config.isWikitext){ return "切换为普通文本" } return "切换为WIKI文本" },function(note){ note.setConfig("isWikitext",!note.config.isWikitext) note.setText() }], [function(note){ if(note.config.isFixed){ return "取消固定" } return "固定" },function(note){ note.setConfig("isFixed",!note.config.isFixed,"fixed") }], [function(note){ if(note.config.isTransparent){ return "取消透明化" } return "透明化" },function(note){ note.setConfig("isTransparent",!note.config.isTransparent,"transparent") }], [function(note){ if(note.config.isNotSave){ return "取消离开页面后删除" } return "离开页面后删除" },function(note){ note.setConfig("isNotSave",!note.config.isNotSave,"notSave") }], [function(){return "立即删除不可恢复！"},function(note){ note.delete() }], ] Snote.contextmenu=document.createElement("ul") Snote.contextmenu.classList.add("snote-contextmenu") Snote.adder=document.createElement("adder") Snote.adder.id="snote-add" Snote.adder.innerHTML="＋" Snote.adder.onclick=function(){ let note=new Snote("新的便签，请在此输入内容……") if(Snote.onEdit){ Snote.onEdit.outEdit() } note.inEdit() } Snote.welcome=function(){ new Snote("这些介绍用的便签不会自动保存，就像右下角显示的一样，这也是便签的功能菜单可以控制的\n换而言之，你新建的便签可以在任何加载了便签功能的页面展示",{"isNotSave":true}).dom.classList.add("notSave") new Snote("这还是个实验功能，所以可能会有奇奇怪怪的BUG",{"isNotSave":true}).dom.classList.add("notSave") new Snote("便签不会收集你的任何信息，便签的所有功能所需数据都保存在了浏览器的localStorage中",{"isNotSave":true}).dom.classList.add("notSave") new Snote("你可以在便签上点击鼠标右键（移动端是长按）来打开便签的功能菜单",{"isNotSave":true}).dom.classList.add("notSave") new Snote("你可以点击屏幕左下角的“＋”来新建便签",{"isNotSave":true}).dom.classList.add("notSave") new Snote("看起来你是第一次使用便签，至少在这个浏览器里是第一次，所以让我简单地介绍一下怎么使用吧\n你可以自由拖动便签，放在不会遮挡你的视线的地方",{"isNotSave":true}).dom.classList.add("notSave") } Snote.save=function(){ let notes=[] Snote.allNotes.forEach(function(note){ if(!note.config.isNotSave){ notes.push({ "classes":note.dom.className, "text":note.config.isImgNote?note.canvas.toDataURL():note.text, "position":note.position, "config":note.config }) } }) localStorage.SnoteSave=JSON.stringify(notes) } Snote.load=function(){ if(localStorage.SnoteSave){ let notes=JSON.parse(localStorage.SnoteSave) for(let i=0;i<notes.length;i++){ let note=new Snote(notes[i].text,notes[i].config) if(note.config.isImgNote){ note.initCanvas() } note.dom.className=notes[i].classes note.setPosition(notes[i].position) } } else{ Snote.welcome() localStorage.SnoteSave="[]" } } Snote.getWikiparse=function(text,callback){ let fd=new FormData() fd.append("action","parse") fd.append("title",mw.config.values.wgPageName) fd.append("text",text) fd.append("contentmodel","wikitext") fd.append("format","json") postFdApi("https://wiki.biligame.com"+mw.config.values.wgScriptPath+"/api.php",fd,function(json){ callback(JSON.parse(json).parse.text["*"]) }) }

Snote.prototype.createDom=function(){ let $this=this $this.dom=document.createElement("div") $this.dom.classList.add("snote") $this.dom.classList.add("snote-default") $this.dom.onmousedown=function(e){ Snote.onMove=$this if(Snote.onTop!=$this){ $this.put() } } $this.dom.ontouchstart=function(e){ Snote.onMove=$this Snote.touchStart=[e.touches[0].screenX,e.touches[0].screenY] if(Snote.onTop!=$this){ $this.put() } } $this.dom.oncontextmenu=function(e){ if(!Snote.onEdit){ $this.createContextmenu() Snote.contextmenu.style.left=e.clientX Snote.contextmenu.style.top=e.clientY this.appendChild(Snote.contextmenu) let rect=Snote.contextmenu.getClientRects()[0] Snote.contextmenu.style.left=rect.left-Math.max(rect.right-document.body.clientWidth,0) Snote.contextmenu.style.top=rect.top-Math.max(rect.bottom-document.body.clientHeight,0) e.preventDefault() } } } Snote.prototype.createContextmenu=function(){ let $this=this Snote.contextmenu.innerHTML="" for(let i=0;i<Snote.menulist.length;i++){ if(Snote.menulist[i][0]($this)){ let li=document.createElement("li") li.innerHTML=Snote.menulist[i][0]($this) li.onclick=function(){ Snote.contextmenu.parentNode.removeChild(Snote.contextmenu) Snote.menulist[i][1]($this) } Snote.contextmenu.appendChild(li) } } } Snote.prototype.initCanvas=function(){ let $this=this $this.dom.innerHTML="" $this.canvas=document.createElement("canvas") $this.ctx=$this.canvas.getContext("2d") $this.canvas.onmousedown=function(e){ if(Snote.onEdit==$this){ $this.setConfig("isOnDraw",true) Snote.drawStart=[e.offsetX,e.offsetY] $this.ctx.beginPath() $this.ctx.moveTo(...Snote.drawStart) } } $this.canvas.ontouchstart=function(e){ if(Snote.onEdit==$this){ $this.setConfig("isOnDraw",true) $this.ctx.beginPath() $this.ctx.moveTo(e.touches[0].pageX-$this.canvas.getClientRects()[0].left,e.touches[0].pageY-$this.canvas.getClientRects()[0].top) } } $this.dom.appendChild($this.canvas) $this.canvas.width=$this.canvas.clientWidth $this.canvas.height=$this.canvas.clientHeight } Snote.prototype.setText=function(text=this.text){ let $this=this $this.text=text+"" if($this.config.isImgNote){ let img=new Image() img.onload=function(){ $this.ctx.drawImage(img,0,0) } img.src=text } else{ if($this.config.isWikitext){ Snote.getWikiparse($this.text,function(parse){ $this.dom.innerHTML=parse }) } else{ $this.dom.innerHTML=""+$this.text.replaceAll(/</g,"<").replaceAll(/>/g,">")+"" } } Snote.save() } Snote.prototype.setPosition=function(info){ let $this=this for(let key in info){ $this.position[key]=info[key] $this.dom.style[key]=info[key] } Snote.save() } Snote.prototype.setConfig=function(key,value,changedClass){ let $this=this $this.config[key]=value if(changedClass){ if(value){ $this.dom.classList.add(changedClass) } else{ $this.dom.classList.remove(changedClass) } } Snote.save() } Snote.prototype.put=function(){ let $this=this document.body.appendChild($this.dom) Snote.onTop=$this } Snote.prototype.inEdit=function(){ let $this=this if($this.config.isImgNote){ $this.canvas.style.backgroundColor="white" } else{ $this.dom.innerHTML="" let textarea=document.createElement("textarea") textarea.value=$this.text $this.dom.appendChild(textarea) textarea.select() } Snote.onEdit=$this } Snote.prototype.outEdit=function(){ let $this=this if($this.config.isImgNote){ $this.canvas.style.backgroundColor="" } else{ $this.setText($this.dom.getElementsByTagName("textarea")[0].value) } Snote.onEdit=null } Snote.prototype.delete=function(){ let $this=this $this.dom.parentNode.removeChild($this.dom) Snote.allNotes.delete($this) Snote.save() } function postFdApi(url,fd,callback=false,callbackE=false){ let ajax=new XMLHttpRequest() if(!callback){ ajax.open("POST",url,false) ajax.send(fd) let json=JSON.parse(ajax.responseText) return json } ajax.open("POST",url) ajax.send(fd) ajax.onreadystatechange=function(){ if(ajax.readyState==4){ if(ajax.status==200){ callback(ajax.responseText) } else if(ajax.status==404&&callbackE){ callbackE(true) } } } } </script>

snote-add{

position:fixed; z-index:10000; left:5px; bottom:5px; background:#FFF59B; border-radius:50%; border:1px solid; padding:10px; font-size:2em; line-height:1em; cursor:pointer; }

</style>