打开主菜单
少前百科GFwiki
β
搜索
查看“Widget:Tdollquery”的源代码
←
Widget:Tdollquery
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
自动确认用户
您没有权限编辑
Widget
名字空间内的页面。
您可以查看与复制此页面的源代码。
<style type="text/css"> div.tileSearchCond { display: inline-block; width: 100px; } div.tileSearchCond:first-of-type { margin-left:1rem } table.tileSearch { display:table; margin: 0.1rem 1rem 0.1rem auto; } table.tileSearch td{ padding:10px; background-color:#444 } table.tileSearch#selfpos td.active{ background-color:#fff; } table.tileSearch#effectarea td.active{ background-color:#00ffff; } div#buttonContainer { position:relative; } div#buttonContainer span:last-child { float:right; margin-right: 1rem; } div#buttonContainer button { height: 25px; padding: 0px 10px; margin: 0px; background-color:#DDD; background-image: linear-gradient(-45deg,#f4c430 5px,transparent 5px); border: 0px solid !important; position: relative; top: 0px; } div#buttonContainer button:active { background-color:#f4c430; } div#buttonContainer button:hover { background-color:#bbb; } div#buttonContainer button:hover:active { background-color:#f4c430; } div#buttonContainer.disabled::after { content:""; width: 100%; height: 100%; top: 0px; position: absolute; left: 0px; background-image: repeating-linear-gradient(-45deg,red 3px,red 4px,transparent 5px,transparent 20px); box-shadow: inset 0 0 0 2px red; } #tableloadingMini { background-image: url('/images/a/ac/Gfloading.gif'); background-repeat: no-repeat; background-attachment: local; background-position: bottom right; background-size: 50px; height: 50px; text-align: right; padding-right: 4rem; font-size: 1.5rem; vertical-align: bottom; display: block; width: 100% } #tableemptyMini { background-size: 50px; height: 50px; font-size: 1.5rem; color: red; text-align: center; display: block; width: 100% } #miniTdolltable{ overflow: hidden; } #miniTdolltable tbody,#miniTdolltable tr{ display: block; } #tableloading > td { background-image: url('/images/a/ac/Gfloading.gif'); background-repeat: no-repeat; background-attachment: local; background-position: bottom right; background-size: 50px; height: 50px; text-align: right; padding-right: 4rem; font-size: 1.5rem; vertical-align: bottom; } #tableempty > td { background-size: 50px; height: 50px; font-size: 1.5rem; color: red; } div#TDollQuery { vertical-align:baseline; width:auto; display: inline-flex; overflow:hidden; transition: all 0.1s ease-in; margin:2px } div#TDollQuery input#inputQuery { padding:0px; margin:0px; top:0px; border:0px solid; border-left:5px solid #eaeaea; box-shadow: inset 0 0 5px black; padding-left:5px; transition: all 0.1s ease-in; } div#TDollQuery input#inputQuery:focus { border-color:#F4c430; } .disabled { pointer-events: none; opacity: 0.7; filter: blur(0px); } @media screen and (max-width: 425px) { #miniTdolltable div.TDavatar {width:20%;height:20%} } <!--{if ($hideinput)==1}-->div#TDollQuery {display:none;}<!--{/if}--> </style><div style="max-width: 63rem;"> <div id="buttonContainer" style="width: 100%;"> <!--{if ($lite) != 1}--> <p> <span>若列表与主页更新说明不符合,请尝试:</span><button type="button" onclick="refreshLoad()">刷新缓存(过程较长,请耐心等待..)</button> </p> <div style="display: block;padding-left: 1rem;margin: 0.1rem auto;">点选下列格子查询人形影响格布局:<br><div class="tileSearchCond">影响格位置: <table class="tileSearch" id="effectarea" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 2px;background: rgba(255, 255, 255, 0.33);border: 0px;"> <tbody><tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </tbody></table></div> <div class="tileSearchCond">自身位置: <table class="tileSearch" id="selfpos" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 2px;background: rgba(255, 255, 255, 0.33);border: 0px;"> <tbody><tr><td class="active"></td><td class="active"></td><td class="active"></td></tr> <tr><td class="active"></td><td class="active"></td><td class="active"></td></tr> <tr><td class="active"></td><td class="active"></td><td class="active"></td></tr> </tbody></table></div></div><!--{/if}--> <p> <button onclick="clearSelect(this)">清除</button> <button onclick="invertSelect(this)">反选</button> <input type="checkbox" id="HGDoll" onclick="apply_filter()" /><label for="HGDoll">手枪人形</label> <input type="checkbox" id="SMGDoll" onclick="apply_filter()" /><label for="SMGDoll">冲锋枪人形</label> <input type="checkbox" id="ARDoll" onclick="apply_filter()" /><label for="ARDoll">突击步枪人形</label> <input type="checkbox" id="RFDoll" onclick="apply_filter()" /><label for="RFDoll">步枪人形</label> <input type="checkbox" id="MGDoll" onclick="apply_filter()" /><label for="MGDoll">机枪人形</label> <input type="checkbox" id="SGDoll" onclick="apply_filter()" /><label for="SGDoll">霰弹枪人形</label> </p> <p> <button onclick="clearSelect(this)">清除</button> <button onclick="invertSelect(this)">反选</button> <input type="checkbox" id="rarity2" onclick="apply_filter()" /><label for="rarity2">★★</label> <input type="checkbox" id="rarity3" onclick="apply_filter()" /><label for="rarity3">★★★</label> <input type="checkbox" id="rarity4" onclick="apply_filter()" /><label for="rarity4">★★★★</label> <input type="checkbox" id="rarity5" onclick="apply_filter()" /><label for="rarity5">★★★★★</label> <input type="checkbox" id="rarity6" onclick="apply_filter()" /><label for="rarity6">★EXTRA</label> </p> <p> <button onclick="clearSelect(this)">清除</button> <button onclick="invertSelect(this)">反选</button> <input type="checkbox" id="DGMindupgraded" onclick="apply_filter()" /><label for="DGMindupgraded">心智升级</label> <input type="checkbox" id="nonDGMindupgraded" onclick="apply_filter()" /><label for="nonDGMindupgraded">普通人形</label> </p> <div id="TDollQuery"><input type="text" placeholder="输入枪名" id="inputQuery"/><button type="button" onclick="clearItem();apply_filter();">清除</button></div> <span>[<a href="javascript:void(0);"onclick="clearSelect(this.parentNode)">全清</a>]</span> <p> <input type="checkbox" id="iconOnly" onclick="apply_filter()" /><label for="iconOnly">头像模式</label> </p> </div> <!--{if ($lite)==1}--> <div id="resultBox">列表载入中,请稍后</div> <!--{else}--> <table id="miniTdolltable" style="display: none;"> <tbody> <tr> <td id="tableloadingMini">载入中</td> </tr> </tbody> </table> <!--{$content}--> <!--{/if}--> </div><BR><script type="text/javascript"> RLQ.push(function(){mw.loader.load('jquery.tablesorter');}) var loaded; //首次载入控制函数 var sort_loaded; var inputText = document.getElementById("inputQuery") //文本框定义 var querylist = new Array(); // 初始化人形数据 var emptydiv = "\<tr class='' id=\"tableempty\"\>\<td colspan=\"14\"\>无结果\<\/td\>\<\/tr\>"; //无结果label var loadingdiv = "\<tr class='' id=\"tableloading\"\>\<td colspan=\"14\"\>载入中\<\/td\>\<\/tr\>"; //载入中label var sorter_order = function (){ var sortable = document.querySelectorAll("table#Tdolltable th.headerSort"); var sortorder = ""; for(var i=0;i<sortable.length;i++){ if(RegExp("headerSortUp").test(sortable[i].classList)){sortorder = '{"sortList":[{\"'+i+'\":"asc"}]}'} else if(RegExp("headerSortDown").test(sortable[i].classList)){sortorder = '{"sortList":[{\"'+i+'\":"desc"}]}'} } if(sortable.length==0||!sortorder){return null} return JSON.parse(sortorder) } var sorter_reload = function(){ $("table#Tdolltable th").off('keypress click'); try{ $("table#Tdolltable").tablesorter(sorter_order()); } catch(e){ console.warn("Failed load tableSorter ,try to Reload"); mw.loader.load('jquery.tablesorter'); setTimeout(1000,function(){$("table#Tdolltable").tablesorter(sorter_order())}); } } var reloadstop = false; //阻止重复调用refreshLoad() var inputer = document.getElementById("buttonContainer").getElementsByTagName("input") var baseurl = "\/w\/TDL" var debounce = function(idle, action){ //去抖函数 文本框使用 var last return function(){ var ctx = this, args = arguments clearTimeout(last) last = setTimeout(function(){ action.apply(ctx, args) }, idle) } }; <!--{if ($lite)==1}--> RLQ.push(function(){ //Lite首次载入函数,RLQ.push防止mwapi未载入时加载 $.ajax({ url: "/index.php?title=战术人形图鉴/TDolldataLite&action=render", dataType: "html", success: function (data, textStatus, jqxhr) { var parser = new DOMParser; var bravo = parser.parseFromString(data,"text/html"); var rawlist=bravo.getElementsByClassName("tdollqueryline"); getdata(rawlist);}, error: function () { console.error("can\'t load Tdoll Index, Abroted"); }, }); }); function getdata(transdata){ //Lite载入函数 querylist = []; // 清除数据 for (var i = 0; i < transdata.length; i++) { querylist.push(transdata[i]); } loaded = true; apply_filter(); $(".disabled").removeClass("disabled"); } function encode_checker() {//传输checkbox选择情况 var clist = []; for (var i = 0;i<inputer.length;i++){ if(inputer[i].type=="checkbox"){ if(inputer[i].checked){ clist.push("1") }else{ clist.push("") } } }; return clist.join(','); } function apply_filter(){ //Lite筛选函数 if(!loaded){return}; var pushlist=new Array(); for (var i = 0; i < querylist.length; i++) { //筛选 if(filter_box(querylist[i])){ pushlist.push(querylist[i]) } }; var checker = encode_checker(); var queryText = inputText.value; var encoded_url = baseurl + "\?filter\=" + checker + "\&intext\=" + queryText; if (pushlist.length == 0) { document.getElementById("resultBox").innerHTML = "当前条件下无结果,请尝试其他组合"; } else { if (pushlist.length==querylist.length) { document.getElementById("resultBox").innerHTML = "请输入查询条件,点击\<a href\=\"" + baseurl +"\"\>跳转到图鉴\<\/a\>" } else { document.getElementById("resultBox").innerHTML = "查询到"+pushlist.length+"条结果,点击点击\<a href\=\"" + encoded_url +"\"\>跳转到图鉴\<\/a\>" ; } } }; <!--{else}--> function getURLParam(name) { //解析url参数 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null; } var decoded = getURLParam("filter"); function decode_checker(code) {//传输checkbox选择情况 var check_status = code.split(","); var checker = new Array(); for (var i = 0;i<inputer.length;i++){ if(inputer[i].type=="checkbox"){checker.push(inputer[i])} }; for (var i = 0; i < checker.length; i++) { if(check_status[i]=="1"){ checker[i].checked = true;console.log(checker[i].innerHTML); } else { checker[i].checked = false } } } $(function(){if(getURLParam("filter")){decode_checker(decoded)};if (getURLParam("intext")) {inputText.value = getURLParam("intext")}}); RLQ.push(function(){ //首次载入函数,RLQ.push防止mwapi未载入时加载 if(document.getElementById("section_0")){ mw.loader.load("mediawiki.language") mw.loader.load('/index.php?title=MediaWiki:Jquery.tabelsorter.js&action=raw&ctype=text/javascript'); document.getElementById("iconOnly").checked = true; document.getElementById("Tdolltable").style.display = "none";//表格模式 document.getElementById("miniTdolltable").style.display = "";//头像模式 } $.ajax({ cache: true, url: "/index.php?title=战术人形图鉴/TDolldata&action=render", dataType: "html", success: function (data, textStatus, jqxhr) { var parser = new DOMParser; var bravo = parser.parseFromString(data,"text/html"); var rawlist = bravo.getElementsByClassName("tdollqueryline"); getdata(rawlist);}, error: function () { console.error("can\'t load Tdoll Index, Abroted"); }, }); }); function getdata(transdata){ //载入函数 querylist = []; // 清除数据 try{document.getElementById("tableloading").remove()}catch(e){document.getElementById("tableloading").removeNode(true)} document.getElementById("tableloadingMini").innerHTML = ""; document.getElementById("tableloadingMini").id = ""; for (var i = 0; i < transdata.length; i++) { querylist.push(transdata[i]); } $(".disabled").removeClass("disabled"); loaded = true; apply_filter(); } function initialLoad(){ //AJAX重载图鉴函数 $.ajax({ cache: true, url: "/index.php?title=战术人形图鉴/TDolldata&action=render", dataType: "html", success: function (data, textStatus, jqxhr) { var parser = new DOMParser var bravo = parser.parseFromString(data,"text/html"); var rawlist=bravo.getElementsByClassName("tdollqueryline"); reloadstop=false; getdata(rawlist); }, error: function () { console.error("can\'t load Tdoll Index, Abroted"); }, });} function refreshLoad(){ //刷新SWM缓存并调用重载函数 if (!reloadstop){reloadstop = true}else{return;} //防止多次点击调用 if(loaded){loaded=false}; $.ajaxSetup({ cache: false }); //清除缓存 $.ajax({ //AJAX刷新图鉴缓存,调用API url: "/api.php", type: "POST", data: { "action": "purge", "format": "json", "titles": "战术人形图鉴/TDolldata"}, dataType: "json", success: function (data, textStatus, jqxhr) { if(data.purge[0].purged === ""){ console.log("Cache removed, fetching new Tdolls data."); var icon_table_content = document.querySelector("table#miniTdolltable > tbody > tr > td"); $(".tdollqueryline").remove(); icon_table_content.innerHTML = "载入中"; icon_table_content.id = "tableloadingMini"; $(loadingdiv).appendTo("table#Tdolltable"); $("table#Tdolltable>thead").addClass("disabled") $(".headerSortUp,.headerSortDown").removeClass("headerSortUp headerSortDown"); initialLoad(); } }, error: function () {console.error("can\'t refresh Tdoll Index, Abroted");}, }); }; function apply_filter(){ if(!loaded){return} var pushlist=new Array(); for (var i = 0; i < querylist.length; i++) { if(filter_box(querylist[i])){ pushlist.push(querylist[i]) } }; mode_switch(pushlist)//最终输出函数 }; function mode_switch(pushdata){ var ministat = document.getElementById("iconOnly"); var table = document.getElementById("Tdolltable"); var icon_table = document.getElementById("miniTdolltable"); var icon_table_content = document.querySelector("table#miniTdolltable > tbody > tr > td"); if (ministat.checked==true){//小图标模式 if(table.style.display!="none"){ //先前为表格模式时 隐藏表格模式并删除表格内对象 $(".tdollqueryline").remove() table.style.display = "none"; icon_table.style.display = ""; } if (pushdata.length == 0){ icon_table_content.innerHTML = "无结果"; icon_table_content.id = "tableemptyMini"; } else { icon_table_content.id = ""; // 排序预留 var rawHTML = []; for (var i = 0; i < pushdata.length; i++) { rawHTML.push(pushdata[i].querySelector("div.TDavatar").outerHTML); } var miniData = rawHTML.join("").replace(/[\r\n\t]/g,""); icon_table_content.innerHTML = miniData; } } else {// 表格模式 if(icon_table.style.display!="none"){ //先前为小图标模式时 隐藏小图标模式 icon_table.style.display = "none"; table.style.display = ""; icon_table_content.innerHTML = ""; } $(".tdollqueryline").remove(); if(!!document.getElementById("tableempty")){try{document.getElementById("tableempty").remove()}catch(e){document.getElementById("tableempty").removeNode(true)}} if (pushdata.length == 0){ $(emptydiv).appendTo("table#Tdolltable"); } else { $(pushdata).appendTo("table#Tdolltable >tbody"); sorter_reload(); } } } <!--{/if}--> function invertSelect(box){//反选函数 var get_checker_box = box.parentNode.getElementsByTagName("input"); for(var i = 0;i<get_checker_box.length;i++){ if(get_checker_box[i].checked){get_checker_box[i].checked=false}else{get_checker_box[i].checked=true} } apply_filter(); } function clearSelect(box){ //清除选择 var get_checker_box = box.parentNode.getElementsByTagName("input"); for(var i = 0;i<get_checker_box.length;i++){ get_checker_box[i].checked=false } apply_filter(); } function clearItem(){inputText.value = ""} //清除输入框内容 function mod_check(query){ //心智升级人形判断函数 var modcheck = document.getElementById('DGMindupgraded').checked; var normalcheck = document.getElementById('nonDGMindupgraded').checked; if (!(modcheck^normalcheck)){ return true; } else { if(query.dataset.mod == 1){ if(modcheck){return true;}else{return false;} } else { if(normalcheck){return true;}else{return false;} } } } function text_check(query){ //文本输入框判断(现仅实现判断枪名) if (!inputText){return true}; var a = new RegExp(inputText.value,"i").test(query.dataset.nameIngame); if (a) { return true } else { return false } } function rarity_check(query){ //稀有度判断 var rCheck = new Array(); var nt=0; for (var i = 2;i <= 6;i++){ rCheck[i] = document.getElementById('rarity'+i).checked; if (rCheck[i]) {nt++} } if (nt == 0){return true} else { if(rCheck[query.dataset.rarity]){return true} else {return false} } } function type_check(query){ //稀有度判断 var tCheck = new Array(); var nt=0; var type = ["MG","RF","AR","HG","SG","SMG"] for (var i = 0;i < type.length ;i++){ tCheck[type[i]] = document.getElementById(type[i]+'Doll').checked; if (tCheck[type[i]]) {nt++} } if (nt == 0){return true} else { if(tCheck[query.dataset.tdollClass]){return true} else {return false} } } /*------------------------------------------------------------------------------------------/ / 影响格查询部分 START / / 影响格查询实现思路来源于少女前线英文维基 https://en.gfwiki.com/wiki/T-Doll_Tile_Search/ / / 本代码作者 http://www.gfwiki.org/w/user:Mikumikuer/ / / Doll tile Search idea inspired by https://en.gfwiki.com/wiki/T-Doll_Tile_Search / / coding by http://www.gfwiki.org/w/user:Mikumikuer/ / /------------------------------------------------------------------------------------------*/ var tileshook = document.querySelectorAll("table.tileSearch td"); for (var i = 0 ; i < tileshook.length ; i++){ tileshook[i].onclick = function(){activeTile(this)} } function activeTile(tile){//切换影响格状态 if(!tile.className){tile.className="active"}else{tile.className=""} apply_filter(); } function getEffectrange(){//获取查询影响位置 var effect_tileSet = new Array(3) var querySet = document.getElementById("effectarea").getElementsByTagName("tr"); for (var i = 0 ;i <querySet.length ;i++ ){ effect_tileSet[i] = new Array(3); var queryCol = querySet[i].getElementsByTagName("td") for (var j = 0; j < queryCol.length; j++) { if(!queryCol[j].className){ effect_tileSet[i][j] = 0 } else { effect_tileSet[i][j] = 1 } } } return effect_tileSet; } function getSelfpos() {//获取查询人形位置 去除同位置有查询影响格的位置 var Self_pos = new Array(); var querySet = document.getElementById("selfpos").getElementsByTagName("tr") for (var i = 0 ;i <querySet.length ;i++ ){ var queryCol = querySet[i].getElementsByTagName("td") for (var j = 0; j < queryCol.length; j++) { if(!!queryCol[j].className){ if(document.getElementById("effectarea").getElementsByTagName("tr")[i].getElementsByTagName("td")[j].className == ""){Self_pos.push({x:i,y:j})} } } } return Self_pos; } function combineTilesArray(dollpos) { var combination = new Array(); for (var i = 0; i < dollpos.length; i++) { combination[i]=getEffectrange(); combination[i][dollpos[i].x][dollpos[i].y] = 2 } return combination; } function add_offsetArray(deltaX,deltaY,targetArray){ var transArray = [[0,0,0],[0,0,0],[0,0,0]]; var count=0; for (var i = 0; i < targetArray.length; i++) { transArray[i+deltaX]=new Array(); for (var j = 0; j < targetArray[i].length; j++) { count++ if(i+deltaX>2||i+deltaX<0){if(targetArray[i][j]==1){return false}}; if(j+deltaY>2||j+deltaY<0){if(targetArray[i][j]==1){return false}}; if(targetArray[i][j]==0){continue} transArray[i+deltaX][j+deltaY]=targetArray[i][j]; } } return transArray } function compare_tiles(queryTile,dollTile){ var point = 0; for (var i = 0; i < dollTile.length; i++) { for (var j = 0; j < dollTile[i].length; j++) { if(!queryTile[i][j]){if(dollTile[i][j]==0){point++}} else if(queryTile[i][j]==1){if(queryTile[i][j]==dollTile[i][j]){point++}else{point-=10}} else{continue} } } if(point>0){return true}else{return false} } function tiles_check(query){//影响格查找人形 if(document.querySelectorAll("table#effectarea td.active").length==0){return true} var tdoll_tile_data = query.dataset.tiles.split(',') var tdoll_tile= new Array(3); var count = 0 for (var i = 0 ;i < 3 ;i++ ){ tdoll_tile[i] = new Array(3); for (var j = 0; j < 3 ; j++) { tdoll_tile[i][j]=parseInt(tdoll_tile_data[count]);if(tdoll_tile_data[count]==2){var tdoll_position = {x:i,y:j};}count++; } } var possible_dollpos = getSelfpos(); var valid_combination = combineTilesArray(getSelfpos()); for (var k = 0; k < possible_dollpos.length; k++) {//将要查询的人形影响格偏移至提供的人形影响格数据位置 var offset_x = tdoll_position.x - possible_dollpos[k].x;//x偏移值 var offset_y = tdoll_position.y - possible_dollpos[k].y;//y偏移值 var offset_tile = add_offsetArray(offset_x,offset_y,valid_combination[k]);//偏移的影响格矩阵,偏移后超出3x3 返回false if(!offset_tile){continue}; var result = compare_tiles(offset_tile,tdoll_tile); if(!result){continue}else{return true} } return false } /*----------------------/ / 影响格查询部分 END / /----------------------*/ function filter_box(cond){ //筛选条件汇总 return mod_check(cond)&&text_check(cond)&&rarity_check(cond)&&type_check(cond)&&tiles_check(cond); } $("#inputQuery").on('input propertychange',debounce(250, function (){apply_filter();})); </script>
返回至
Widget:Tdollquery
。