From 5dee429d66ea726e24155aae66ac0d5bde9d96d7 Mon Sep 17 00:00:00 2001 From: Dnomd343 Date: Tue, 27 Apr 2021 18:39:11 +0800 Subject: [PATCH] fix: logic of QR code --- assets/js/main.js | 120 ++++++++++++++++++++++-------------------- assets/js/main.min.js | 2 +- 2 files changed, 63 insertions(+), 59 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index f143d98..9c17eb7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,4 +1,6 @@ -var onShareDiv = false; +var rangeSize = 300; +var shareX, shareY; +mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg'; $(document).ready(function() { if (getQuery("ip") === null) { @@ -9,8 +11,7 @@ $(document).ready(function() { } $("table").hide(); $("#share").hide(); - $("button").click(function(event) { - event.stopPropagation(); + $("button").click(function() { $(this).css({ 'border-color': '', 'background-color': '' @@ -24,35 +25,30 @@ $(document).ready(function() { errorIP(); } }); - $("button").dblclick(function() { + $("button").dblclick(function(event) { + event.stopPropagation(); getVersion(); }); + $("input").dblclick(function(event) { + event.stopPropagation(); + }); + $("table").dblclick(function(event) { + event.stopPropagation(); + }); $('#output').dblclick(function() { showQRCode(); }); $('#output').click(function() { - if (!$("#qrcode").is(':hidden')) { - hideQRCode(); - } + hideQRCode(); }); - $('#output').mouseleave(function() { - setTimeout(function () { - if (onShareDiv === false) { - hideQRCode(); - } - }, 100); + $('#map').click(function() { + hideQRCode(); }); - $("#share").mouseleave(function() { - onShareDiv = false; + $('body').mousemove(function() { + checkRange(); }); - $("#share").mouseenter(function() { - onShareDiv = true; - }); - $("input").click(function(event) { - event.stopPropagation(); - }); - $("table").click(function(event) { - event.stopPropagation(); + $('body').mouseleave(function() { + hideQRCode(); }); }); @@ -62,6 +58,49 @@ $(document).keydown(function(event) { } }); +function checkRange() { + var distanceX = Math.abs(event.pageX - shareX); + var distanceY = Math.abs(event.pageY - shareY); + if ((distanceX >= rangeSize) || (distanceY >= rangeSize)) { + hideQRCode(); + } +} + +function hideQRCode() { + if (!$("#qrcode").is(':hidden')) { + $("#share").hide(200); + } +} + +function showQRCode() { + var ip = $("#ip").text(); + if (checkIP(ip) == 'ok') { + var pageUri = "https://" + window.location.host + "/?ip=" + ip; + $("#qrcode").attr("href", pageUri); + $("#qrcode").empty(); + $('#qrcode').qrcode({ + width: 100, + height: 100, + text: pageUri + }); + var shareLeft = event.pageX - 50; + var shareTop = event.pageY + 15; + shareX = shareLeft + 61; + shareY = shareTop + 61; + if ($("#qrcode").is(':hidden')) { + $("#share").css('left', shareLeft); + $("#share").css('top', shareTop); + $("#share").show(200); + } else { + $("#share").hide(100, function() { + $("#share").css('left', shareLeft); + $("#share").css('top', shareTop); + $("#share").show(150); + }); + } + } +} + function getInfo() { $.get("/info/" + $("input").val(), function(data) { console.log(data); @@ -158,41 +197,6 @@ function getQuery(name) { } } -function showQRCode() { - var ip = $("#ip").text(); - if (checkIP(ip) == 'ok') { - var pageUri = "https://" + window.location.host + "/?ip=" + ip; - $("#qrcode").attr("href", pageUri); - $("#qrcode").empty(); - $('#qrcode').qrcode({ - width: 100, - height: 100, - text: pageUri - }); - var shareX = event.pageX - 50; - var shareY = event.pageY + 15; - if ($("#qrcode").is(':hidden')) { - $("#share").css('left', shareX); - $("#share").css('top', shareY); - $("#share").show(200); - } else { - $("#share").hide(50, function() { - $("#share").css('left', shareX); - $("#share").css('top', shareY); - $("#share").show(150); - }); - } - } -} - -function hideQRCode() { - $("#share").hide(200, function() { - $("#qrcode").empty(); - }); -} - -mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg'; - function clear() { var map = new mapboxgl.Map({ container: 'map', diff --git a/assets/js/main.min.js b/assets/js/main.min.js index bc394f7..52e9072 100644 --- a/assets/js/main.min.js +++ b/assets/js/main.min.js @@ -1 +1 @@ -var onShareDiv=!1;function getInfo(){$.get("/info/"+$("input").val(),(function(data){if(console.log(data),"F"!=data.status){if($("input").val()||$("input").val(data.ip),$("button").text("Search"),$("table").show(1e3),$("#ip").text(data.ip),data.city=null==data.city?"Unknow":data.city,data.region=null==data.region?"Unknow":data.region,data.country=null==data.country?"Unknow":data.country,data.timezone=null==data.timezone?"Unknow":data.timezone,data.isp=null==data.isp?"Unknow":data.isp,data.scope=null==data.scope?"Unknow":data.scope,data.detail=null==data.detail||" "==data.detail?"Unknow":data.detail,$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),null==data.as)$("#as").text("Unknow");else{$("#as").text(data.as);var asUri="https://bgpview.io/asn/"+data.as.substr(2);$("#as").html(''+data.as+"")}if(null==data.loc)$("#loc").text("Unknow"),clear();else{var earthUri="https://earth.google.com/web/@"+data.loc+",0a,398836d,1y,0h,0t,0r";$("#loc").html(''+data.loc+""),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}}else errorIP()}))}function getVersion(){$.get("/version",(function(data){console.log(data),data.qqwry=data.qqwry.slice(0,4)+"-"+data.qqwry.slice(4,6)+"-"+data.qqwry.slice(6,8),data.ipip=data.ipip.slice(0,4)+"-"+data.ipip.slice(4,6)+"-"+data.ipip.slice(6,8);var data_ver="";data_ver+="echoIP: "+data.echoip+"\n",data_ver+="纯真数据库: "+data.qqwry+"\n",data_ver+="IPIP.net数据库: "+data.ipip,alert(data_ver)}))}function trim(str){return str.replace(/(^\s*)|(\s*$)/g,"")}function errorIP(){$("button").text("Illegal IP"),$("button").css({"border-color":"#ff406f","background-color":"#ff406f"}),$("input").focus()}function checkIP(ipStr){if(null===ipStr)return"error";var regIPv4=/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/,regIPv6=/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){1,6})|(:(:[0-9A-Fa-f]{1,4}){1,7})|(([0-9A-Fa-f]{1,4}:){6}(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){0,4}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(:(:[0-9A-Fa-f]{1,4}){0,5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3}))$/,V4=ipStr.match(regIPv4),V6=ipStr.match(regIPv6);return null===V4&&null===V6?"error":"ok"}function getQuery(name){var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)"),result=window.location.search.substr(1).match(reg);return null!=result?unescape(result[2]):null}function showQRCode(){var ip=$("#ip").text();if("ok"==checkIP(ip)){var pageUri="https://"+window.location.host+"/?ip="+ip;$("#qrcode").attr("href",pageUri),$("#qrcode").empty(),$("#qrcode").qrcode({width:100,height:100,text:pageUri});var shareX=event.pageX-50,shareY=event.pageY+15;$("#qrcode").is(":hidden")?($("#share").css("left",shareX),$("#share").css("top",shareY),$("#share").show(200)):$("#share").hide(50,(function(){$("#share").css("left",shareX),$("#share").css("top",shareY),$("#share").show(150)}))}}function hideQRCode(){$("#share").hide(200,(function(){$("#qrcode").empty()}))}function clear(){var map;new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[0,0],zoom:1}).on("load",(function(){console.log("reset map")}))}function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}$(document).ready((function(){null===getQuery("ip")?getInfo():($("input").val(getQuery("ip")),getInfo()),$("table").hide(),$("#share").hide(),$("button").click((function(event){event.stopPropagation(),$(this).css({"border-color":"","background-color":""}),$(this).text("Searching..."),$("table").hide(1e3),$("input").val(trim($("input").val())),""==$("input").val()||"ok"==checkIP($("input").val())?getInfo():errorIP()})),$("button").dblclick((function(){getVersion()})),$("#output").dblclick((function(){showQRCode()})),$("#output").click((function(){$("#qrcode").is(":hidden")||hideQRCode()})),$("#output").mouseleave((function(){setTimeout((function(){!1===onShareDiv&&hideQRCode()}),100)})),$("#share").mouseleave((function(){onShareDiv=!1})),$("#share").mouseenter((function(){onShareDiv=!0})),$("input").click((function(event){event.stopPropagation()})),$("table").click((function(event){event.stopPropagation()}))})),$(document).keydown((function(event){13==event.keyCode&&$("button").focus()})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; \ No newline at end of file +var rangeSize=300,shareX,shareY;function checkRange(){var distanceX=Math.abs(event.pageX-shareX),distanceY=Math.abs(event.pageY-shareY);(distanceX>=rangeSize||distanceY>=rangeSize)&&hideQRCode()}function hideQRCode(){$("#qrcode").is(":hidden")||$("#share").hide(200)}function showQRCode(){var ip=$("#ip").text();if("ok"==checkIP(ip)){var pageUri="https://"+window.location.host+"/?ip="+ip;$("#qrcode").attr("href",pageUri),$("#qrcode").empty(),$("#qrcode").qrcode({width:100,height:100,text:pageUri});var shareLeft=event.pageX-50,shareTop=event.pageY+15;shareX=shareLeft+61,shareY=shareTop+61,$("#qrcode").is(":hidden")?($("#share").css("left",shareLeft),$("#share").css("top",shareTop),$("#share").show(200)):$("#share").hide(100,(function(){$("#share").css("left",shareLeft),$("#share").css("top",shareTop),$("#share").show(150)}))}}function getInfo(){$.get("/info/"+$("input").val(),(function(data){if(console.log(data),"F"!=data.status){if($("input").val()||$("input").val(data.ip),$("button").text("Search"),$("table").show(1e3),$("#ip").text(data.ip),data.city=null==data.city?"Unknow":data.city,data.region=null==data.region?"Unknow":data.region,data.country=null==data.country?"Unknow":data.country,data.timezone=null==data.timezone?"Unknow":data.timezone,data.isp=null==data.isp?"Unknow":data.isp,data.scope=null==data.scope?"Unknow":data.scope,data.detail=null==data.detail||" "==data.detail?"Unknow":data.detail,$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),null==data.as)$("#as").text("Unknow");else{$("#as").text(data.as);var asUri="https://bgpview.io/asn/"+data.as.substr(2);$("#as").html(''+data.as+"")}if(null==data.loc)$("#loc").text("Unknow"),clear();else{var earthUri="https://earth.google.com/web/@"+data.loc+",0a,398836d,1y,0h,0t,0r";$("#loc").html(''+data.loc+""),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}}else errorIP()}))}function getVersion(){$.get("/version",(function(data){console.log(data),data.qqwry=data.qqwry.slice(0,4)+"-"+data.qqwry.slice(4,6)+"-"+data.qqwry.slice(6,8),data.ipip=data.ipip.slice(0,4)+"-"+data.ipip.slice(4,6)+"-"+data.ipip.slice(6,8);var data_ver="";data_ver+="echoIP: "+data.echoip+"\n",data_ver+="纯真数据库: "+data.qqwry+"\n",data_ver+="IPIP.net数据库: "+data.ipip,alert(data_ver)}))}function trim(str){return str.replace(/(^\s*)|(\s*$)/g,"")}function errorIP(){$("button").text("Illegal IP"),$("button").css({"border-color":"#ff406f","background-color":"#ff406f"}),$("input").focus()}function checkIP(ipStr){if(null===ipStr)return"error";var regIPv4=/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/,regIPv6=/^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:)|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}(:[0-9A-Fa-f]{1,4}){1,2})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){1,3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){1,4})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){1,5})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){1,6})|(:(:[0-9A-Fa-f]{1,4}){1,7})|(([0-9A-Fa-f]{1,4}:){6}(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|([0-9A-Fa-f]{1,4}:(:[0-9A-Fa-f]{1,4}){0,4}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3})|(:(:[0-9A-Fa-f]{1,4}){0,5}:(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])(\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])){3}))$/,V4=ipStr.match(regIPv4),V6=ipStr.match(regIPv6);return null===V4&&null===V6?"error":"ok"}function getQuery(name){var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)"),result=window.location.search.substr(1).match(reg);return null!=result?unescape(result[2]):null}function clear(){var map;new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[0,0],zoom:1}).on("load",(function(){console.log("reset map")}))}function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg",$(document).ready((function(){null===getQuery("ip")?getInfo():($("input").val(getQuery("ip")),getInfo()),$("table").hide(),$("#share").hide(),$("button").click((function(){$(this).css({"border-color":"","background-color":""}),$(this).text("Searching..."),$("table").hide(1e3),$("input").val(trim($("input").val())),""==$("input").val()||"ok"==checkIP($("input").val())?getInfo():errorIP()})),$("button").dblclick((function(event){event.stopPropagation(),getVersion()})),$("input").dblclick((function(event){event.stopPropagation()})),$("table").dblclick((function(event){event.stopPropagation()})),$("#output").dblclick((function(){showQRCode()})),$("#output").click((function(){hideQRCode()})),$("#map").click((function(){hideQRCode()})),$("body").mousemove((function(){checkRange()})),$("body").mouseleave((function(){hideQRCode()}))})),$(document).keydown((function(event){13==event.keyCode&&$("button").focus()})); \ No newline at end of file