MediaWiki:CustomItemTracker.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
mw.hook('wikipage.content').add(function () {
const container = document.getElementById(
"customItemTracker"
);
if (!container) return;
const allowedUsers = [
"Hefner"
];
const currentUser =
mw.config.get('wgUserName');
let trackerData = {
items: [],
completed: {}
};
// Load tracker JSON
function loadData() {
$.getJSON(
mw.util.wikiScript('api'),
{
action: 'query',
titles: 'Module:CustomItemTracker/data.json',
prop: 'revisions',
rvprop: 'content',
format: 'json',
formatversion: 2
}
).done(function(data) {
const page =
data.query.pages[0];
if (!page.revisions)
return;
try {
trackerData =
JSON.parse(
page.revisions[0].content
);
render();
} catch(e) {
console.error(
"Failed loading tracker JSON",
e
);
}
});
}
// Render tracker
function render() {
container.innerHTML = "";
const completed =
Object.keys(
trackerData.completed
).filter(
key => trackerData.completed[key]
).length;
const total =
trackerData.items.length;
const progress =
document.createElement("div");
progress.className =
"trackerProgress";
progress.innerHTML =
`
Completed:
<strong>${completed}/${total}</strong>
(${total ? Math.floor((completed / total) * 100) : 0}%)
`;
container.appendChild(progress);
const grid =
document.createElement("div");
grid.className =
"trackerGrid";
container.appendChild(grid);
trackerData.items.forEach(
function(item,index) {
const tile =
document.createElement("div");
tile.className =
"trackerTile";
if(
trackerData.completed[index]
) {
tile.classList.add(
"completed"
);
}
const image =
document.createElement("div");
image.className =
"itemImage";
tile.appendChild(image);
const name =
document.createElement("div");
name.className =
"itemName";
name.textContent =
item.name;
tile.appendChild(name);
loadImage(
item.name,
image
);
tile.onclick = function() {
// View only for everyone else
if(
!allowedUsers.includes(
currentUser
)
) {
return;
}
trackerData.completed[index]
=
!trackerData.completed[index];
saveData();
};
grid.appendChild(tile);
});
}
// Get wiki item image
function loadImage(
itemName,
target
) {
const template =
"{{plinkp|" +
itemName +
"}}";
$.getJSON(
"/api.php",
{
action: "parse",
text: template,
format: "json"
}
).done(function(data) {
if(
!data.parse
)
return;
const wrapper =
document.createElement("div");
wrapper.innerHTML =
data.parse.text["*"];
const img =
wrapper.querySelector("img");
if(img) {
img.style.maxWidth =
"50px";
img.style.maxHeight =
"50px";
img.style.width =
"auto";
img.style.height =
"auto";
img.style.objectFit =
"contain";
target.appendChild(img);
}
});
}
// Save changes
function saveData() {
$.post(
mw.util.wikiScript('api'),
{
action: 'edit',
title:
'Module:CustomItemTracker/data.json',
token:
mw.user.tokens.get(
'csrfToken'
),
format: 'json',
text:
JSON.stringify(
trackerData,
null,
4
)
}
).done(function() {
render();
console.log(
"Tracker updated"
);
});
}
loadData();
});