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();
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);
//console.log(data);
let divBlock = document.getElementById('RecentActivities');
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">News</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>
`
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 url = "https://touhou.market/main/events/" + id;
let imgUrl = `https://thonly.cc/proxy_thmarket/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 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">${details}</div>
</div>
</div>
<hr style="margin: 1em 0">
`
let blContent = document.getElementById("bl-content");
if(blContent) {
blContent.innerHTML += block
}
});
} else {
console.error('Network response was not ok ' + xhr.statusText);
}
}
};
xhr.send();
