本WIKI由旅行者酒馆于2021年10月05日申请开通。内容按CC BY-NC-SA 4.0协议提供,编辑权限开放。
本WIKI仍在努力完善中,欢迎收藏。编辑组为非官方民间组织,为爱发电,欢迎各路能人异士加入。
免责声明 • 编辑教程 • 反馈留言 • 收藏方法 • 交流群:1017604603
本WIKI由旅行者酒馆于2021年10月05日申请开通。内容按CC BY-NC-SA 4.0协议提供,编辑权限开放。本WIKI仍在努力完善中,欢迎收藏。编辑组为非官方民间组织,为爱发电,欢迎各路能人异士加入。
Widget:FatesAtlas2
<style type="text/css"> .linebox { width: 100%; height: calc(100vh - 50px); overflow: hidden; background-image: url(https://wiki.biligame.com/sr/special:redirect/file/命路歧图-背景.png); background-size: cover; background-position: center; position: relative; } div#myContent>div { display: inline-block; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; } div#myContent { width: 100%; height: 100%; } .fatesAtlasLine { display: inline-block; position: relative; } .fatesAtlasLine>.canvas>canvas { position: absolute; z-index: -1; left: 0px; top: 0px; } .fatesAtlasLine .fatesAtlasTree { display: inline-flex; flex-wrap: nowrap; flex-direction: row; } .fatesAtlasLine .fatesAtlasbranch{ display: inline-flex; flex-direction: column; justify-content: flex-start; } .fatesAtlasLine .fatesAtlas, .fatesAtlasLine .fatesAtlasPlaceholder{ display:inline-block; width: 320px; height: 165px; margin: 25px 45px; position: relative; transition: all 0.5s; } .fatesAtlasLine .fatesAtlas { cursor: pointer; } .fatesAtlasLine .fatesAtlas:hover { transform: scale(1.05); } .fatesAtlasLine .fatesAtlas.NP, .fatesAtlasLine .fatesAtlasPlaceholder.NP{ height: 45px; margin: 30px 45px; } .fatesAtlasLine .fatesAtlas .fatesAtlasIcon{ display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0;right: 0; width: 300px; height: 135px; overflow: hidden; border: 3px solid #fff; transition: all 0.5s; } .fatesAtlasLine .fatesAtlas:hover .fatesAtlasIcon{ border-width: 4px; } .fatesAtlasLine .fatesAtlas.DT .fatesAtlasIcon, .fatesAtlasLine .fatesAtlas.JS .fatesAtlasIcon{ border-color: transparent; } .fatesAtlasLine .fatesAtlas.DT .fatesAtlasIcon { left: 130px; transform: translateX(-50%); } .fatesAtlasLine .fatesAtlas.TBC .fatesAtlasIcon { border-color: #E0E1E3; border-width: 2px; } .fatesAtlasLine .fatesAtlas.Char .fatesAtlasIcon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: charswitch 10s infinite ease; } .fatesAtlasLine .fatesAtlas.Char .fatesAtlasIcon img:nth-child(1) { animation-delay: 0s; } .fatesAtlasLine .fatesAtlas.Char .fatesAtlasIcon img:nth-child(2) { animation-delay: -5s; } @keyframes charswitch { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} } .fatesAtlasLine .fatesAtlas .fatesAtlasText { display: inline-flex; flex-wrap: wrap; align-items: center; position: absolute; bottom: 0; left: 0; width: 260px; height: 45px; background-color: rgb(0 0 0 / 75%); color: #fff; border: 2px solid #fff; border-left-width: 25px; border-top-right-radius: 15px; font-size: 20px; line-height: 1; letter-spacing: 1px; text-indent: 10px; } .fatesAtlasLine .fatesAtlas.TM .fatesAtlasText { border-color: #f2b438; } .fatesAtlasLine .fatesAtlas.TC .fatesAtlasText { border-color: #FE8D47; } .fatesAtlasLine .fatesAtlas.CM .fatesAtlasText { border-color: #B98CF7; } .fatesAtlasLine .fatesAtlas.AM .fatesAtlasText { border-color: #61D7EF; } .fatesAtlasLine .fatesAtlas.TBC .fatesAtlasText { border-color: transparent; background-color: transparent; } .fatesAtlasLine .fatesAtlas .fatesAtlasText:before{ display: inline-block; width: 25px; height: 25px; content: ; position: absolute; left: -25px; background-size: auto 25px; background-repeat: no-repeat; background-position: center; filter: invert(1); } .fatesAtlasLine .fatesAtlas.TM .fatesAtlasText:before{ background-image: url(https://wiki.biligame.com/sr/special:redirect/file/图标-开拓任务.png); } .fatesAtlasLine .fatesAtlas.TC .fatesAtlasText:before{ background-image: url(https://wiki.biligame.com/sr/special:redirect/file/图标-开拓续闻.png); } .fatesAtlasLine .fatesAtlas.CM .fatesAtlasText:before{ background-image: url(https://wiki.biligame.com/sr/special:redirect/file/图标-同行任务.png); } .fatesAtlasLine .fatesAtlas.AM .fatesAtlasText:before{ background-image: url(https://wiki.biligame.com/sr/special:redirect/file/图标-冒险任务.png); } .fatesAtlasLine .fatesAtlas.DT .fatesAtlasText:before{ background-image: url(https://wiki.biligame.com/sr/special:redirect/file/图标-位置.png); } .fatesAtlasLine .fatesAtlas:not(.TBC) .fatesAtlasText:after { content: ; display: inline-block; width: 261px; height: 46px; position: absolute; left: -25px; top: -2px; border: 3px solid transparent; border-top-right-radius: 15px; transition: all 0.5s; } .fatesAtlasLine .fatesAtlas:not(.TBC):hover .fatesAtlasText:after { border-color: #fff; } .fatesAtlasLine-close,.fatesAtlasLine-infoclose { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M7 0 l -3 3 -3 -3 -1 1 3 3 -3 3 1 1 3 -3 3 3 1 -1 -3 -3 3 -3 -1 -1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; position: absolute; top: 5px; right: 5px; display: inline-block; width: 48px; max-width: 10%; height: 48px; cursor: pointer; display: none; } .fatesAtlasLine-infoclose { right: 10px; display: inline-block; } div#fatesAtlasLine-content { display: none; } div#fatesAtlasLine-infocontent { position: absolute; right: 0; top: 0; height: 100%; width: 300px; max-width: 50%; background-color: #141A24; border-left: 3px solid #E1CEA0; padding: 50px 20px; display: none; } .fatesAtlasInfo { display: none; } .fatesAtlasLine-infocontent .infoContent { display: inline-block; width: 100%; height: 100%; letter-spacing: 1px; line-height: 1.6; overflow: auto; font-size: 14px; } .fatesAtlasLine-infocontent .infoContent .title { color: #DAC190; font-size: 16px; margin-bottom: 6px; } .fatesAtlasLine-infocontent .infoContent .Char { display: inline-block; width: 100%; padding-top: calc(100% / 138 * 61); position: relative; } .fatesAtlasLine-infocontent .infoContent .Char img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: charswitch 10s infinite ease; } .fatesAtlasLine-infocontent .infoContent .Char img:nth-child(1) { animation-delay: 0s; } .fatesAtlasLine-infocontent .infoContent .Char img:nth-child(2) { animation-delay: -5s; } .fatesAtlasLine-infocontent .infoContent .CM { color: #c1c4c7; margin-top: 10px; } .fatesAtlasLine-infocontent a { display: inline-block; } .fatesAtlasLine-infocontent .infoContent .name { font-size: 18px; color: #fff; } .fatesAtlasLine-infocontent .infoContent .name:hover { text-decoration: underline; } .fatesAtlasLine-infocontent .infoContent .text { margin-top: 10px; color: #c1c4c7; } @media screen and (min-width:768px){ .fatesAtlasLine-infocontent .infoContent::-webkit-scrollbar {width: 10px;height: 10px;} .fatesAtlasLine-infocontent .infoContent::-webkit-scrollbar-thumb {background: #BEBCC2;border-radius: 10px;} .fatesAtlasLine-infocontent .infoContent::-webkit-scrollbar-track {background: rgb(255 255 255 / 20%);border-radius: 10px;} .fatesAtlasLine-infocontent .infoContent {scrollbar-width: thin;scrollbar-color: rgb(190 188 194) rgb(255 255 255 / 20%);}/*火狐浏览器样式*/ } @media screen and (max-width:767px){ .linebox { height: calc(90vh - 5em); } .fatesAtlasLine-infoclose { top: -5px; } div#fatesAtlasLine-infocontent { border-width: 2px; padding: 25px 10px; } .fatesAtlasLine-infocontent .infoContent { letter-spacing: 0px; line-height: 1.3; font-size: 12px; } .fatesAtlasLine-infocontent .infoContent .title { font-size: 14px; margin-bottom: 4px; } .fatesAtlasLine-infocontent .infoContent .CM { margin-top: 8px; } .fatesAtlasLine-infocontent .infoContent .name { font-size: 16px; } .fatesAtlasLine-infocontent .infoContent .text { margin-top: 8px; } } </style> <script type="text/javascript"> (window.RLQ = window.RLQ || []).push([["jquery"], function () { $(document).ready(function(){
class FatesAtlasLine { constructor() { this.fatesAtlasLineInfo = []; } initializeFatesAtlasLine(id) { let fatesAtlasLine; if (id) { fatesAtlasLine = [document.getElementById(id)]; } else { fatesAtlasLine = Array.from(document.querySelectorAll(".fatesAtlasLine:not(#fatesAtlasLine)")); } for(let i = 0; i < fatesAtlasLine.length; i++) { if (this.fatesAtlasLineInfo.find(info => info.root === fatesAtlasLine[i])) { continue; } let info = {}; info.root = fatesAtlasLine[i]; info.canvas = document.createElement("canvas"); info.root.getElementsByClassName("canvas")[0].appendChild(info.canvas); /*info.canvas.style.position = "absolute"; info.canvas.style.zIndex = -1; info.canvas.style.left = 0; info.canvas.style.top = 0;*/ info.item = []; this.fatesAtlasLineInfo.push(info); info.canvas.width = info.root.clientWidth; info.canvas.height = info.root.clientHeight; let brush = info.canvas.getContext("2d"); brush.save(); brush.globalAlpha = 0.1; let center = [info.canvas.width / 2, info.canvas.height / 2]; brush.restore(); let item = info.root.getElementsByClassName("fatesAtlasText"); for(let j = 0; j < item.length; j++) { let index = item[j].dataset.index; info.item[index] = {}; let rect = item[j].getBoundingClientRect(); let canvasRect = info.canvas.getBoundingClientRect(); info.item[index].top = rect.top - canvasRect.top; info.item[index].bottom = info.item[index].top + rect.height; info.item[index].left = rect.left - canvasRect.left; info.item[index].right = info.item[index].left + rect.width; info.item[index].wcenter = (info.item[index].left + info.item[index].right) / 2; info.item[index].hcenter = (info.item[index].top + info.item[index].bottom) / 2; } } this.drawfatesAtlasLine(); } drawfatesAtlasLine() { for(let i = 0; i < this.fatesAtlasLineInfo.length; i++) { let ligature = this.fatesAtlasLineInfo[i].root.dataset.ligature.split(","); for(let j = 0; j < ligature.length; j++) { let index = ligature[j].split("-"); let item1 = this.fatesAtlasLineInfo[i].item[index[0]]; let item2 = this.fatesAtlasLineInfo[i].item[index[1]]; if(item1 && item2) { this.ettp2p(this.fatesAtlasLineInfo[i].canvas, [item1.right, item1.hcenter], [item2.left, item2.hcenter]); } } } } ettp2p(canvas, p1, p2) { let brush = canvas.getContext("2d"); brush.lineWidth = 2; brush.strokeStyle = "#D0B18E"; brush.beginPath(); brush.moveTo(p1[0] + 2, p1[1]); if(p1[1] == p2[1]) { brush.lineTo(p2[0] - 2 - 5, p2[1]); } else { brush.lineTo(p2[0] - 45, p1[1]); brush.lineTo(p2[0] - 45, p2[1]); brush.lineTo(p2[0] - 2 - 5, p2[1]); } brush.stroke(); brush.fillStyle = "#D0B18E"; brush.moveTo(p2[0] - 2, p2[1]); brush.beginPath(); brush.lineTo(p2[0] - 2 - 5, p2[1] + 5); brush.lineTo(p2[0] - 2 - 5, p2[1] - 5); brush.lineTo(p2[0] - 2, p2[1]); brush.closePath(); brush.fill(); } } let fatesAtlasLine = new FatesAtlasLine(); fatesAtlasLine.initializeFatesAtlasLine("fatesAtlasLine");
if ($('#fatesAtlasLine-content').length) { $("#fatesAtlasLine").on("click", ".fatesAtlas:not(.DT,.TBC)", function () { let pageName = this.getAttribute("data-name"); $("#fatesAtlasLine-content").empty(); $(`#fatesAtlasLine-content`).show(); $(`.fatesAtlasLine-close`).show(); $(`#fatesAtlasLine`).hide(); //var transformValue = $('#myContent').css('transform'); $("#myContent").css("transform", ""); var api = new mw.Api(); api.get({ action: "parse", text: "命路歧图/" + pageName + "", }).then(function(ret) { if (ret && ret.parse && ret.parse.text) {
var newDiv = $('
var apicontent = newDiv.find('.fatesAtlasLine').removeAttr('id'); if (apicontent.length === 0) {$("#fatesAtlasLine-content").html("
页面" + pageName + "未创建,请联系管理员
");//panzoom.reset(); } else { $("#fatesAtlasLine-content").append(apicontent); setTimeout(function() { fatesAtlasLine.initializeFatesAtlasLine(); //$("#myContent").css("transform", transformValue); panzoom.reset(); }, 1000); } } else {$("#fatesAtlasLine-content").html("
加载内容失败:请检查对象名或服务器状态。
");} }).catch(function(error) {$("#fatesAtlasLine-content").html("
加载内容失败:API 请求发生错误。
");}); }); $("body").on("click", ".fatesAtlasLine-close", function (e) { $(`#fatesAtlasLine`).show(); $(`#fatesAtlasLine-content`).hide(); $(`.fatesAtlasLine-close`).hide(); $("#fatesAtlasLine-content").empty(); panzoom.reset(); //$("#myContent").css("transform", transformValue); }); }
$("body").on("click", ".fatesAtlas.infoBox", function (e) { $(`#fatesAtlasLine-infocontent`).show(); $(".fatesAtlasLine-infocontent").empty(); let infoName = $(this).data("name"); let infoContent = $(`.fatesAtlasInfo[data-name="${infoName}"]>div`).clone(); $(".fatesAtlasLine-infocontent").append(infoContent); });
$("body").on("click", ".fatesAtlasLine-infoclose", function (e) { $(`#fatesAtlasLine-infocontent`).hide(); $(".fatesAtlasLine-infocontent").empty(); });
}); }])
</script> <script src="https://wiki.biligame.com/tools/MediaWiki:Panzoom.min.js?action=raw&ctype=text/javascript"></script> <script type="text/javascript"> (window.RLQ = window.RLQ || []).push([["jquery"], function () { $(document).ready(function(){
// 新轮子 window.panzoom = null;
window.initializePanzoom = function() { const elem = document.getElementById("myContent"); if (window.panzoom) { window.panzoom.destroy(); elem.parentElement.removeEventListener("wheel", window.panzoom.zoomWithWheel); } window.panzoom = Panzoom(elem, { Optional: true, startScale:0.3, maxScale: 1, minScale: 0.3, }); elem.parentElement.addEventListener("wheel", window.panzoom.zoomWithWheel); elem.parentElement.addEventListener("wheel", function (event) { if (!event.shiftKey) return; window.panzoom.zoomWithWheel(event); }); } window.onload = window.initializePanzoom;
}); }]) </script>