MediaWiki:RecentActivities.js
来自东方活动维基
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 Ctrl-F5。
var xhr = new XMLHttpRequest();
var xhr2 = new XMLHttpRequest();
var cityMap = new Map();
var cityMap2 = new Map();
xhr2.open('GET', 'https://map.thonly.cc/data/city.json', true);
xhr.open('GET', 'https://thonly.cc/proxy_thmarket/api/v1/events?include_pending=true&utf8=1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
let time = new Date().getTime();
//console.log(data);
let divBlock = document.getElementById('recentActivities');
let divBlock2 = document.getElementById('historyActivities');
divBlock.innerHTML = `
<div class="mini-block-container">
<div class="mini-block">
<div style="font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0">Recent Activities</div>
<p><span class="mini-block-title">近期活动列表</span>
<style data-mw-deduplicate="TemplateStyles:r16245">.mw-parser-output .childbox-image-more::before{content:"";opacity:0;transition:opacity 0.2s}.mw-parser-output .childbox-image-more:hover::before{content:"了解更多";font-weight:bold;position:absolute;display:flex;font-size:20px;color:black;width:100%;height:100%;justify-content:center;align-items:center;z-index:200;opacity:1;background-color:rgba(255,255,255,0.7)}.mw-parser-output .childbox-image-more{transform:scale(1);transition:all 0.2s}.mw-parser-output .childbox-image-more:hover{transform:scale(1.01)}.mw-parser-output .childbox-image-more-child img{width:100%;height:auto}@media(min-width:850px){.mw-parser-output .childbox-box{display:flex;gap:8px;font-size:0}.mw-parser-output .childbox-image{width:30%;border-radius:6px;overflow:hidden;cursor:default;align-items:center}.mw-parser-output .childbox-text{width:65%;margin-left:20px}.mw-parser-output .childbox-title{flex:1;font-weight:700;font-size:20px;margin-top:5px}}@media(max-width:850px){.mw-parser-output .childbox-box{display:flex;flex-direction:column;gap:8px;font-size:0}.mw-parser-output .childbox-image{width:100%;border-radius:6px;overflow:hidden;cursor:default;align-items:center;margin:auto}.mw-parser-output .childbox-text{width:100%}.mw-parser-output .childbox-title{text-align:center;flex:1;font-weight:700;font-size:20px;margin-top:5px}}</style>
</p>
<div id="bl-content"></div>
</div>
</div>
`;
divBlock2.innerHTML = `
<div class="mini-block-container">
<div class="mini-block">
<div style="font-size: 70px; font-weight: 200; text-align: right; height: 0; color: #f1f1f1; user-select: none; margin-bottom: 0">History Activities</div>
<p><span class="mini-block-title">历史活动列表</span>
<style data-mw-deduplicate="TemplateStyles:r16245">.mw-parser-output .childbox-image-more::before{content:"";opacity:0;transition:opacity 0.2s}.mw-parser-output .childbox-image-more:hover::before{content:"了解更多";font-weight:bold;position:absolute;display:flex;font-size:20px;color:black;width:100%;height:100%;justify-content:center;align-items:center;z-index:200;opacity:1;background-color:rgba(255,255,255,0.7)}.mw-parser-output .childbox-image-more{transform:scale(1);transition:all 0.2s}.mw-parser-output .childbox-image-more:hover{transform:scale(1.01)}.mw-parser-output .childbox-image-more-child img{width:100%;height:auto}@media(min-width:850px){.mw-parser-output .childbox-box{display:flex;gap:8px;font-size:0}.mw-parser-output .childbox-image{width:30%;border-radius:6px;overflow:hidden;cursor:default;align-items:center}.mw-parser-output .childbox-text{width:65%;margin-left:20px}.mw-parser-output .childbox-title{flex:1;font-weight:700;font-size:20px;margin-top:5px}}@media(max-width:850px){.mw-parser-output .childbox-box{display:flex;flex-direction:column;gap:8px;font-size:0}.mw-parser-output .childbox-image{width:100%;border-radius:6px;overflow:hidden;cursor:default;align-items:center;margin:auto}.mw-parser-output .childbox-text{width:100%}.mw-parser-output .childbox-title{text-align:center;flex:1;font-weight:700;font-size:20px;margin-top:5px}}</style>
</p>
<div id="bl-content2"></div>
</div>
</div>
`;
data.forEach(element => {
let name = element["name"];
let id = element["id"];
let img = element["image"];
let list_image_clip = element["list_image_clip"];
let location = element["location"];
let details = location["details"];
let pId = location["city"];
let cityName = cityMap.get(pId)
let cityProvince = cityMap2.get(pId)
let url = "https://touhou.market/main/events/" + id;
let imgUrl = `https://touhou.market/api/v1/images/${img}?format=webp&q=60&size=m&clip=${list_image_clip[0]},${list_image_clip[1]},${list_image_clip[2]},${list_image_clip[3]}`;
let beginTime = element["begin"];
let endTime = element["end"];
let dateBegin = new Date(beginTime);
let dateEnd = new Date(endTime);
let beginStrYear = dateBegin.getFullYear();
let beginStrMonth = dateBegin.getMonth()+1;
let beginStrDay = dateBegin.getDate();
let endStrYear = dateEnd.getFullYear();
let endStrMonth = dateEnd.getMonth()+1;
let endStrDay = dateEnd.getDate();
//let beginStr = dateEnd.getTime();
//let endStr = dateBegin.getTime();
let displayStr = "";
if(beginStrYear === endStrYear && beginStrMonth === endStrMonth && beginStrDay === endStrDay) {
displayStr = endStrYear + "/" + endStrMonth + "/" + endStrDay;
} else {
displayStr = beginStrYear + "/" + beginStrMonth + "/" + beginStrDay +" - "+ endStrYear + "/" + endStrMonth + "/" + endStrDay;
}
let block = `
<div class="childbox-box">
<div class="childbox-image childbox-image-more" data-more="${url}" onclick="window.open('${url}');">
<div class="childbox-image-more-child" style="pointer-events: none;">
<a href="${imgUrl}" class="image">
<img alt="${img}" referrer="no-referrer" src="${imgUrl}" decoding="async" loading="lazy" width="1920" height="1080" data-file-width="1920" data-file-height="1080">
</a>
</div>
</div>
<div class="childbox-text">
<div class="childbox-title">${name}</div>
<div style="flex:1;font-size:14px;margin-top:10px">${cityProvince+" "+cityName+" "+details}</div>
<div style="flex:1;font-size:14px;margin-top:10px">${displayStr}</div>
<div style="flex:1;font-size:14px;margin-top:18px"><a target="_blank" href="https://touhou.market/main/events/${id}/booths/new">申摊</a> <a target="_blank" href="https://touhou.market/main/events/${id}/tickets/new">购票</a></div>
</div>
</div>
<hr style="margin: 1em 0">
`
let blContent = document.getElementById("bl-content");
let blContent2 = document.getElementById("bl-content2");
if(blContent && time<=endTime) {
blContent.innerHTML += block
} else if(blContent2) {
blContent2.innerHTML+= block
}
});
} else {
console.error('Network response was not ok ' + xhr.statusText);
}
}
};
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4) {
if (xhr2.status === 200) {
let data = JSON.parse(xhr2.responseText);
for (const provinceId in data) {
const province = data[provinceId];
//console.log(`省: ${province.name}`);
const cities = province.cities;
for (const cityId in cities) {
const city = cities[cityId];
cityMap.set(cityId,city["name"])
cityMap2.set(cityId,province.name)
//console.log(` 市: ${city.name}, ID：${cityId}, 坐标: ${city.lat_lon}`);
}
}
xhr.send();
} else {
console.error('Network response was not ok ' + xhr.statusText);
}
}
}
xhr2.send();
