/* globals $, Vue */
/**
* The global SMAPI module.
*/
var smapi = smapi || {};
/**
* The Vue app for the current page.
* @type {Vue}
*/
var app;
// Use a scroll event to apply a sticky effect to the filters / pagination
// bar. We can't just use "position: sticky" due to how the page is structured
// but this works well enough.
$(function () {
let sticking = false;
document.addEventListener("scroll", function () {
const filters = document.getElementById("filters");
const holder = document.getElementById("filterHolder");
if (!filters || !holder)
return;
const offset = holder.offsetTop;
const shouldStick = window.pageYOffset > offset;
if (shouldStick === sticking)
return;
sticking = shouldStick;
if (sticking) {
holder.style.marginBottom = `calc(1em + ${filters.offsetHeight}px)`;
filters.classList.add("sticky");
}
else {
filters.classList.remove("sticky");
holder.style.marginBottom = "";
}
});
});
/**
* Initialize a log parser view on the current page.
* @param {object} state The state options to use.
* @returns {void}
*/
smapi.logParser = function (state) {
if (!state)
state = {};
// internal helpers
const helpers = {
/**
* Get a handler which invokes the callback after a set delay, resetting the delay each time it's called.
* @param {(...*) => void} action The callback to invoke when the delay ends.
* @param {number} delay The number of milliseconds to delay the action after each call.
* @returns {() => void}
*/
getDebouncedHandler(action, delay) {
let timeoutId = null;
return function () {
clearTimeout(timeoutId);
const args = arguments;
const self = this;
timeoutId = setTimeout(
function () {
action.apply(self, args);
},
delay
);
}
},
/**
* Escape regex special characters in the given string.
* @param {string} text
* @returns {string}
*/
escapeRegex(text) {
return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
},
/**
* Format a number for the user's locale.
* @param {number} value The number to format.
* @returns {string}
*/
formatNumber(value) {
const formatter = window.Intl && Intl.NumberFormat && new Intl.NumberFormat();
return formatter && formatter.format
? formatter.format(value)
: `${value}`;
},
/**
* Try parsing the value as a base-10 integer.
* @param {string} value The value to parse.
* @param {number} defaultValue The value to return if parsing fails.
* @param {() => boolean} criteria An optional callback to check whether a parsed number is valid.
* @returns {number} The parsed number if it's valid, else the default value.
*/
tryParseNumber(value, defaultValue, criteria = null) {
value = parseInt(value, 10);
return !isNaN(value) && isFinite(value) && (!criteria || criteria(value))
? value
: defaultValue;
},
/**
* Get whether two objects are equivalent based on their top-level properties.
* @param {Object} left The first value to compare.
* @param {Object} right The second value to compare.
* @returns {Boolean}
*/
shallowEquals(left, right) {
if (typeof left !== "object" || typeof right !== "object")
return left === right;
if (left == null || right == null)
return left == null && right == null;
if (Array.isArray(left) !== Array.isArray(right))
return false;
const leftKeys = Object.keys(left);
const rightKeys = Object.keys(right);
if (leftKeys.length != rightKeys.length)
return false;
for (const key of leftKeys) {
if (!rightKeys.includes(key) || left[key] !== right[key])
return false;
}
return true;
}
};
// internal event handlers
const handlers = {
/**
* Method called when the user clicks a log line to toggle the visibility of a section. Binding methods is problematic with functional components so we just use the `data-section` parameter and our global reference to the app.
* @param {any} event
* @returns {false}
*/
clickLogLine(event) {
app.toggleSection(event.currentTarget.dataset.section);
event.preventDefault();
return false;
},
/**
* Navigate to the previous page of messages in the log.
* @returns {void}
*/
prevPage() {
app.prevPage();
},
/**
* Navigate to the next page of messages in the log.
* @returns {void}
*/
nextPage() {
app.nextPage();
},
/**
* Handle a click on a page number element.
* @param {number | Event} event
* @returns {void}
*/
changePage(event) {
if (typeof event === "number")
app.changePage(event);
else if (event) {
const page = parseInt(event.currentTarget.dataset.page);
if (!isNaN(page) && isFinite(page))
app.changePage(page);
}
}
};
// internal filter counts
const stats = state.stats = {
modsShown: 0,
modsHidden: 0
};
// load raw log data
{
const dataElement = document.querySelector(state.dataElement);
state.data = JSON.parse(dataElement.textContent.trim());
dataElement.remove(); // let browser unload the data element since we won't need it anymore
}
// preprocess data for display
state.messages = state.data.messages || [];
if (state.messages.length) {
const levels = state.data.logLevels;
const sections = state.data.sections;
const modSlugs = state.data.modSlugs;
for (let i = 0, length = state.messages.length; i < length; i++) {
const message = state.messages[i];
// add unique ID
message.id = i;
// add display values
message.LevelName = levels[message.Level];
message.SectionName = sections[message.Section];
message.ModSlug = modSlugs[message.Mod] || message.Mod;
// For repeated messages, since our <log-line /> component
// can't return two rows, just insert a second message
// which will display as the message repeated notice.
if (message.Repeated > 0 && !message.isRepeated) {
const repeatNote = {
id: i + 1,
Level: message.Level,
Section: message.Section,
Mod: message.Mod,
Repeated: message.Repeated,
isRepeated: true
};
state.messages.splice(i + 1, 0, repeatNote);
length++;
}
// let Vue know the message won't change, so it doesn't need to monitor it
Object.freeze(message);
}
}
Object.freeze(state.messages);
// set local time started
if (state.logStarted)
state.localTimeStarted = ("0" + state.logStarted.getHours()).slice(-2) + ":" + ("0" + state.logStarted.getMinutes()).slice(-2);
// add the properties we're passing to Vue
const defaultPerPage = 1000;
state.totalMessages = state.messages.length;
state.filterText = "";
state.filterRegex = null;
state.filterError = null;
state.showContentPacks = true;
state.useHighlight = true;
state.useRegex = false;
state.useInsensitive = true;
state.useWord = false;
state.perPage = defaultPerPage;
state.page = 1;
state.defaultMods = { ...state.showMods };
state.defaultSections = { ...state.showSections };
state.defaultLevels = { ...state.showLevels };
// load saved values, if any
if (localStorage.settings) {
try {
const saved = JSON.parse(localStorage.settings);
state.showContentPacks = saved.showContentPacks ?? state.showContentPacks;
state.useHighlight = saved.useHighlight ?? state.useHighlight;
state.useRegex = saved.useRegex ?? state.useRegex;
state.useInsensitive = saved.useInsensitive ?? state.useInsensitive;
state.useWord = saved.useWord ?? state.useWord;
}
catch (error) {
// ignore settings if invalid
}
}
// add a number formatter so our numbers look nicer
Vue.filter("number", handlers.formatNumber);
// Strictly speaking, we don't need this. However, due to the way our
// Vue template is living in-page the browser is "helpful" and moves
// our <log-line />s outside of a basic <table> since obviously they
// aren't table rows and don't belong inside a table. By using another
// Vue component, we avoid that.
Vue.component("log-table", {
functional: true,
render: function (createElement, context) {
return createElement(
"table",
{
attrs: {
id: "log"
}
},
context.children
);
}
});
// The <filter-stats /> component draws a nice message under the filters
// telling a user how many messages match their filters, and also expands
// on how many of them they're seeing because of pagination.
Vue.component("filter-stats", {
functional: true,
render: function (createElement, context) {
const props = context.props;
return createElement(
"div",
{ class: "stats" },
[
createElement(
"abbr",
{
attrs: {
title: "These numbers may be inaccurate when using filtering with sections collapsed."
}
},
[
"showing ",
createElement("strong", helpers.formatNumber(props.start + 1)),
" to ",
createElement("strong", helpers.formatNumber(props.end)),
" of ",
createElement("strong", helpers.formatNumber(props.filtered))
]
),
" (total: ",
createElement("strong", helpers.formatNumber(props.total)),
")"
]
);
}
});
// Next up we have <pager /> which renders the pagination list. This has a
// helper method to make building the list of links easier.
function addPageLink(page, links, visited, createElement, currentPage) {
if (visited.has(page))
return;
if (page > 1 && !visited.has(page - 1))
links.push(" … ");
visited.add(page);
links.push(createElement(
"span",
{
class: page === currentPage ? "active" : null,
attrs: {
"data-page": page
},
on: {
click: handlers.changePage
}
},
helpers.formatNumber(page)
));
}
Vue.component("pager", {
functional: true,
render: function (createElement, context) {
const props = context.props;
if (props.pages <= 1)
return null;
const visited = new Set();
const pageLinks = [];
for (let i = 1; i <= 2; i++)
addPageLink(i, pageLinks, visited, createElement, props.page);
for (let i = props.page - 2; i <= props.page + 2; i++) {
if (i >= 1 && i <= props.pages)
addPageLink(i, pageLinks, visited, createElement, props.page);
}
for (let i = props.pages - 2; i <= props.pages; i++) {
if (i >= 1)
addPageLink(i, pageLinks, visited, createElement, props.page);
}
return createElement(
"div",
{ class: "pager" },
[
createElement(
"span",
{
class: props.page <= 1 ? "disabled" : null,
on: {
click: handlers.prevPage
}
},
"Prev"
),
" ",
"Page ",
helpers.formatNumber(props.page),
" of ",
helpers.formatNumber(props.pages),
" ",
createElement(
"span",
{
class: props.page >= props.pages ? "disabled" : null,
on: {
click: handlers.nextPage
}
},
"Next"
),
createElement("div", {}, pageLinks)
]
);
}
});
// Our <log-line /> functional component draws each log line.
Vue.component("log-line", {
functional: true,
props: {
showScreenId: {
type: Boolean,
required: true
},
message: {
type: Object,
required: true
},
highlight: {
type: Boolean,
required: false
}
},
render: function (createElement, context) {
const message = context.props.message;
const level = message.LevelName;
if (message.isRepeated)
return createElement(
"tr",
{
class: [
"mod",
level,
"mod-repeat"
]
},
[
createElement(
"td",
{
attrs: {
colspan: context.props.showScreenId ? 4 : 3
}
},
""
),
createElement("td", `repeats ${message.Repeated} times`)
]
);
const events = {};
let toggleMessage;
if (message.IsStartOfSection) {
const visible = message.SectionName && window.app && app.sectionsAllow(message.SectionName);
events.click = handlers.clickLogLine;
toggleMessage = visible
? "This section is shown. Click here to hide it."
: "This section is hidden. Click here to show it.";
}
let text = message.Text;
const filter = window.app && app.filterRegex;
if (text && filter && context.props.highlight) {
text = [];
let match;
let consumed = 0;
let index = 0;
filter.lastIndex = -1;
// Our logic to highlight the text is a bit funky because we
// want to group consecutive matches to avoid a situation
// where a ton of single characters are in their own elements
// if the user gives us bad input.
while (true) {
match = filter.exec(message.Text);
if (!match)
break;
// Do we have an area of non-matching text? This
// happens if the new match's index is further
// along than the last index.
if (match.index > index) {
// Alright, do we have a previous match? If
// we do, we need to consume some text.
if (consumed < index)
text.push(createElement("strong", {}, message.Text.slice(consumed, index)));
text.push(message.Text.slice(index, match.index));
consumed = match.index;
}
index = match.index + match[0].length;
// In the event of a zero-length match, forcibly increment
// the last index of the regular expression to ensure we
// aren't stuck in an infinite loop.
if (match[0].length == 0)
filter.lastIndex++;
}
// Add any trailing text after the last match was found.
if (consumed < message.Text.length) {
if (consumed < index)
text.push(createElement("strong", {}, message.Text.slice(consumed, index)));
if (index < message.Text.length)
text.push(message.Text.slice(index));
}
}
return createElement(
"tr",
{
class: [
"mod",
level,
message.IsStartOfSection ? "section-start" : null
],
attrs: {
"data-section": message.SectionName
},
on: events
},
[
createElement("td", message.Time),
context.props.showScreenId ? createElement("td", message.ScreenId) : null,
createElement("td", level.toUpperCase()),
createElement(
"td",
{
attrs: {
"data-title": message.Mod
}
},
message.Mod
),
createElement(
"td",
[
createElement(
"span",
{ class: "log-message-text" },
text
),
message.IsStartOfSection
? createElement(
"span",
{ class: "section-toggle-message" },
[
" ",
toggleMessage
]
)
: null
]
)
]
);
}
});
// init app
app = new Vue({
el: "#output",
data: state,
computed: {
anyModsHidden: function () {
return stats.modsHidden > 0;
},
anyModsShown: function () {
return stats.modsShown > 0;
},
showScreenId: function () {
return this.data.screenIds.length > 1;
},
// Maybe not strictly necessary, but the Vue template is being
// weird about accessing data entries on the app rather than
// computed properties.
hideContentPacks: function () {
return !state.showContentPacks;
},
// Filter messages for visibility.
filterUseRegex: function () {
return state.useRegex;
},
filterInsensitive: function () {
return state.useInsensitive;
},
filterUseWord: function () {
return state.useWord;
},
shouldHighlight: function () {
return state.useHighlight;
},
filteredMessages: function () {
if (!state.messages)
return [];
//const start = performance.now();
const filtered = [];
let total = 0;
// This is slightly faster than messages.filter(), which is
// important when working with absolutely huge logs.
for (let i = 0, length = state.messages.length; i < length; i++) {
const msg = state.messages[i];
if (!this.filtersAllow(msg.ModSlug, msg.LevelName))
continue;
if (this.filterRegex) {
const text = msg.Text || (i > 0 ? state.messages[i - 1].Text : null);
this.filterRegex.lastIndex = -1;
if (!text || !this.filterRegex.test(text))
continue;
}
total++;
if (msg.SectionName && !msg.IsStartOfSection && !this.sectionsAllow(msg.SectionName))
continue;
filtered.push(msg);
}
filtered.total = total;
Object.freeze(filtered);
//const end = performance.now();
//console.log(`applied ${(this.useRegex ? "regex" : "text")} filter '${this.filterRegex}' in ${end - start}ms`);
return filtered;
},
// And the rest are about pagination.
start: function () {
return (this.page - 1) * state.perPage;
},
end: function () {
return this.start + this.visibleMessages.length;
},
totalPages: function () {
return Math.ceil(this.filteredMessages.length / state.perPage);
},
//
visibleMessages: function () {
if (this.totalPages <= 1)
return this.filteredMessages;
const start = this.start;
const end = start + state.perPage;
return this.filteredMessages.slice(start, end);
}
},
created: function () {
window.addEventListener("popstate", () => this.loadFromUrl());
this.loadFromUrl();
},
methods: {
loadFromUrl: function () {
const params = new URL(location).searchParams;
state.perPage = helpers.tryParseNumber(params.get("PerPage"), defaultPerPage, n => n > 0);
this.page = helpers.tryParseNumber(params.get("Page"), 1, n => n > 0);
state.filterText = params.get("Filter") || "";
if (params.has("FilterMode")) {
const values = params.get("FilterMode").split("~");
state.useRegex = values.includes("Regex");
state.useInsensitive = !values.includes("Sensitive");
state.useWord = values.includes("Word");
}
else {
state.useRegex = false;
state.useInsensitive = true;
state.useWord = false;
}
if (params.has("Mods")) {
const value = params.get("Mods").split("~");
for (const key of Object.keys(this.showMods))
this.showMods[key] = value.includes(key);
}
else {
for (const key of Object.keys(this.showMods))
this.showMods[key] = state.defaultMods[key];
}
if (params.has("Levels")) {
const values = params.get("Levels").split("~");
for (const key of Object.keys(this.showLevels))
this.showLevels[key] = values.includes(key);
}
else {
const keys = Object.keys(this.showLevels);
for (const key of Object.keys(this.showLevels))
this.showLevels[key] = state.defaultLevels[key];
}
if (params.has("Sections")) {
const values = params.get("Sections").split("~");
for (const key of Object.keys(this.showSections))
this.showSections[key] = values.includes(key);
}
else {
for (const key of Object.keys(this.showSections))
this.showSections[key] = state.defaultSections[key];
}
this.updateModFilters();
this.updateFilterText();
},
/**
* Update the page URL to track non-default filter values.
*/
updateUrl: function () {
const url = new URL(location);
if (state.page != 1 || state.perPage != defaultPerPage) {
url.searchParams.set("Page", state.page);
url.searchParams.set("PerPage", state.perPage);
}
else {
url.searchParams.delete("Page");
url.searchParams.delete("PerPage");
}
if (!helpers.shallowEquals(this.showMods, state.defaultMods))
url.searchParams.set("Mods", Object.entries(this.showMods).filter(p => p[1]).map(p => p[0]).join("~"));
else
url.searchParams.delete("Mods");
if (!helpers.shallowEquals(this.showLevels, state.defaultLevels))
url.searchParams.set("Levels", Object.entries(this.showLevels).filter(p => p[1]).map(p => p[0]).join("~"));
else
url.searchParams.delete("Levels");
if (!helpers.shallowEquals(this.showSections, state.defaultSections))
url.searchParams.set("Sections", Object.entries(this.showSections).filter(p => p[1]).map(p => p[0]).join("~"));
else
url.searchParams.delete("Sections");
if (state.filterText?.length) {
url.searchParams.set("Filter", state.filterText);
const modes = [];
if (state.useRegex)
modes.push("Regex");
if (!state.useInsensitive)
modes.push("Sensitive");
if (state.useWord)
modes.push("Word");
if (modes.length)
url.searchParams.set("FilterMode", modes.join("~"));
else
url.searchParams.delete("FilterMode");
}
else {
url.searchParams.delete("Filter");
url.searchParams.delete("FilterMode");
}
window.history.replaceState(null, document.title, url.toString()); // use replaceState instead of pushState to avoid filling the tab history with history steps the user probably doesn't care about
},
toggleLevel: function (id) {
if (!state.enableFilters)
return;
this.showLevels[id] = !this.showLevels[id];
this.updateUrl();
},
toggleContentPacks: function () {
state.showContentPacks = !state.showContentPacks;
this.saveSettings();
},
toggleFilterUseRegex: function () {
state.useRegex = !state.useRegex;
this.saveSettings();
this.updateFilterText();
},
toggleFilterInsensitive: function () {
state.useInsensitive = !state.useInsensitive;
this.saveSettings();
this.updateFilterText();
},
toggleFilterWord: function () {
state.useWord = !state.useWord;
this.saveSettings();
this.updateFilterText();
},
toggleHighlight: function () {
state.useHighlight = !state.useHighlight;
this.saveSettings();
},
prevPage: function () {
if (this.page <= 1)
return;
this.page--;
this.updateUrl();
},
nextPage: function () {
if (this.page >= this.totalPages)
return;
this.page++;
this.updateUrl();
},
changePage: function (page) {
if (page < 1 || page > this.totalPages)
return;
this.page = page;
this.updateUrl();
},
/**
* Persist settings into localStorage for use the next time the user opens a log.
*/
saveSettings: function () {
localStorage.settings = JSON.stringify({
showContentPacks: state.showContentPacks,
useRegex: state.useRegex,
useInsensitive: state.useInsensitive,
useWord: state.useWord,
useHighlight: state.useHighlight
});
},
// We don't want to update the filter text often, so use a debounce with
// a quarter second delay. We basically always build a regular expression
// since we use it for highlighting, and it also make case insensitivity
// much easier.
updateFilterText: helpers.getDebouncedHandler(
function () {
// reset
this.filterError = null;
this.filterRegex = null;
// apply search
let text = state.filterText;
if (!text)
this.filterText = "";
else {
if (!state.useRegex)
text = helpers.escapeRegex(text);
const flags = state.useInsensitive ? "ig" : "g";
try {
this.filterRegex = new RegExp(text, flags);
}
catch (err) {
this.filterError = err.message;
}
if (this.filterRegex && state.useWord)
this.filterRegex = new RegExp(`\\b(?:${text})\\b`, flags);
}
this.updateUrl();
},
250
),
updateModFilters: function () {
// counts
stats.modsShown = 0;
stats.modsHidden = 0;
for (let key in state.showMods) {
if (state.showMods.hasOwnProperty(key)) {
if (state.showMods[key])
stats.modsShown++;
else
stats.modsHidden++;
}
}
},
toggleMod: function (id) {
if (!state.enableFilters)
return;
const curShown = this.showMods[id];
// first filter: only show this by default
if (stats.modsHidden === 0) {
this.hideAllMods();
this.showMods[id] = true;
}
// unchecked last filter: reset
else if (stats.modsShown === 1 && curShown)
this.showAllMods();
// else toggle
else
this.showMods[id] = !this.showMods[id];
this.updateModFilters();
this.updateUrl();
},
toggleSection: function (name) {
if (!state.enableFilters)
return;
this.showSections[name] = !this.showSections[name];
this.updateUrl();
},
showAllMods: function () {
if (!state.enableFilters)
return;
for (let key in this.showMods) {
if (this.showMods.hasOwnProperty(key)) {
this.showMods[key] = true;
}
}
this.updateModFilters();
this.updateUrl();
},
hideAllMods: function () {
if (!state.enableFilters)
return;
for (let key in this.showMods) {
if (this.showMods.hasOwnProperty(key)) {
this.showMods[key] = false;
}
}
this.updateModFilters();
this.updateUrl();
},
filtersAllow: function (modId, level) {
return this.showMods[modId] !== false && this.showLevels[level] !== false;
},
sectionsAllow: function (section) {
return this.showSections[section] !== false;
}
}
});
/**********
** Upload form
*********/
const input = $("#input");
if (input.length) {
// file upload
smapi.fileUpload({
chooseFileLink: $("#choose-file-link"),
chooseFileInput: $("#inputFile"),
contentArea: input,
submitButton: $("#submit")
});
}
};