Slightly spruce up messages

Works towards #6.
This commit is contained in:
Florine W. Dekker 2020-04-14 11:09:04 +02:00
parent bd702ae657
commit 6213b10c66
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
6 changed files with 74 additions and 61 deletions

View File

@ -1,6 +1,6 @@
{
"name": "interlanguage-checker",
"version": "1.5.0",
"version": "1.5.1",
"description": "Check the consistency of MediaWiki interlanguage links in a simple overview.",
"author": "Felix W. Dekker",
"browser": "bundle.js",

View File

@ -2,6 +2,7 @@
--error-color: red;
--success-color: green;
--warning-color: orange;
--info-color: blue;
--fandom-redlink: #ba0000;
}
@ -51,23 +52,11 @@
}
/* Colors */
/* Table colors */
#networkTable tbody tr:nth-child(odd) {
background-color: var(--kpxc-table-hover-color);
}
#networkTable td.correct {
color: var(--success-color);
}
#networkTable td.incorrect {
color: var(--error-color);
}
#networkTable td.warning {
color: var(--warning-color);
}
#networkTable th a i {
font-size: 0.9em;
font-weight: normal;
@ -77,10 +66,28 @@
cursor: pointer;
}
/* Shared colors */
.redLink a {
color: var(--fandom-redlink);
}
.success {
color: var(--success-color);
}
.error {
color: var(--error-color);
}
.warning {
color: var(--warning-color);
}
.info {
color: var(--info-color);
}
/***
* Messages, errors, etc.
@ -94,10 +101,6 @@
display: inline-block;
}
#errorMessage {
color: var(--error-color);
}
input[data-entered=true]:invalid {
border-color: var(--error-color);
color: var(--error-color);

View File

@ -60,10 +60,10 @@
<section> <!-- No `container` class to allow use of whole page -->
<hr />
<div id="messages"></div>
<hr />
<form id="networkTableForm">
<table id="networkTable"></table>
</form>
<hr />
</section>

View File

@ -105,26 +105,40 @@ export class MessageHandler {
/**
* Handles the displaying of the given messages.
* Handles the displaying of the given message.
*
* If no messages are given, the current message and the loading icon are hidden. To display an empty message
* next to the loading icon, give an empty string.
* If no message is given, the current message and the loading icon are hidden. To display an empty message next to
* the loading icon, give an empty string.
*
* @param messages {...*} the messages to display, or no messages if the current message should be hidden
* @param [level] {"progress"|"complete"|"error"} the level of message to display, or `undefined` if the entire
* message handler should be hidden
* @param [message] {*} the message to display
* @returns {MessageHandler} this `MessageHandler`
*/
handle(...messages) {
if (messages.length === 0) {
this._mainDiv.style.display = "none";
return this;
handle(level, message) {
this._mainDiv.style.display = "initial";
this._mainDiv.classList.remove("success", "error", "warning", "info");
switch (level) {
case "progress":
this._mainDiv.classList.add("info");
this._toggleLoadingIcon(true);
break;
case "complete":
this._mainDiv.classList.add("success");
this._toggleLoadingIcon(false);
break;
case "error":
this._mainDiv.classList.add("error");
this._toggleLoadingIcon(false);
break;
default:
this._mainDiv.style.display = "none";
return this; // No further handling necessary
}
if (this._callback !== undefined)
this._callback(...messages);
this._textSpan.innerText = messages.join(" ");
this._mainDiv.style.display = "initial";
if (this._callback !== undefined) this._callback(level, message);
this._textSpan.innerText = message;
return this;
}
@ -138,9 +152,10 @@ export class MessageHandler {
}
/**
* Sets the callback to be executed whenever messages are handler by this handler.
* Sets the callback to be executed whenever a message is handler by this handler.
*
* @param callback {function(*[]): *} the function to execute whenever messages are handled
* @param callback {function("progress"|"complete"|"error", [*]): *} the function to execute whenever a message is
* handled
* @returns {MessageHandler} this `MessageHandler`
*/
setCallback(callback) {
@ -148,13 +163,15 @@ export class MessageHandler {
return this;
}
/**
* Turns the loading icon on or off.
*
* @param state {boolean} `true` if and only if the loading icon should be on
* @returns {MessageHandler} this `MessageHandler`
* @private
*/
toggleLoadingIcon(state) {
_toggleLoadingIcon(state) {
this._loadingIcon.style.display = state ? undefined : "none";
this._spacing.style.display = state ? undefined : "none";
@ -237,10 +254,10 @@ export class InterlangTable extends Component {
const status = network.checkIfLinksTo(srcPage, dstPage);
switch (status) {
case "present":
[type, icon, title] = ["correct", "check", "Present"];
[type, icon, title] = ["success", "check", "Present"];
break;
case "absent":
[type, icon, title] = ["incorrect", "times", "Absent"];
[type, icon, title] = ["error", "times", "Absent"];
break;
default:
[type, icon, title] = ["warning", "mail-forward", "Redirect"];

View File

@ -20,17 +20,11 @@ doAfterLoad(async () => {
return value.trim() === "" ? "Page must not be empty" : "";
});
const checkButton = $("#check");
const messages = $("#messages");
const progressHandler = new MessageHandler(messages)
.setCallback(() => errorHandler.clear())
.toggleLoadingIcon(true);
const errorHandler = new MessageHandler(messages, "errorMessage")
.setCallback((...messages) => {
progressHandler.clear();
console.error(...messages);
})
.toggleLoadingIcon(false);
const messageHandler = new MessageHandler($("#messages"))
.setCallback((level, message) => {
if (level === "error") console.error(message);
});
let previousUrl = undefined;
@ -40,8 +34,7 @@ doAfterLoad(async () => {
// Clean up
urlInput.showBlank();
pageInput.showBlank();
progressHandler.clear();
errorHandler.clear();
messageHandler.clear();
const oldTable = $("#networkTable");
if (oldTable !== null)
@ -49,20 +42,20 @@ doAfterLoad(async () => {
// Validate
const urlValidity = urlInput.validate();
if (urlValidity !== "") return errorHandler.handle(urlValidity);
if (urlValidity !== "") return messageHandler.handle("error", urlValidity);
const pageValidity = pageInput.validate();
if (pageValidity !== "") return errorHandler.handle(pageValidity);
if (pageValidity !== "") return messageHandler.handle("error", pageValidity);
// Initialize
if (urlInput.getValue() !== previousUrl) {
progressHandler.handle("Initializing", urlInput.getValue());
messageHandler.handle("progress", "Initializing " + urlInput.getValue());
try {
const mw = new MediaWiki(urlInput.getValue());
mwm = await new MediaWikiManager().init(mw);
} catch (error) {
errorHandler.handle(error);
messageHandler.handle("error", error);
return;
}
@ -70,18 +63,18 @@ doAfterLoad(async () => {
}
// Discover
discoverNetwork(mwm, pageInput.getValue(), progressHandler.handle.bind(progressHandler))
discoverNetwork(mwm, pageInput.getValue(), it => messageHandler.handle("progress", it))
.then(({pages, redirects}) => new InterlangNetwork(pages, redirects))
.then(network => {
progressHandler.handle("Creating table");
messageHandler.handle("progress", "Creating table");
const form = $("#networkTableForm");
form.textContent = "";
render(html`<${InterlangTable} id="networkTable" network=${network} />`, form);
progressHandler.handle();
messageHandler.handle("complete", "DONE");
})
.catch(error => errorHandler.handle(error));
.catch(error => messageHandler.handle("error", error));
};
urlInput.input.addEventListener("keypress", (event) => {

View File

@ -182,7 +182,6 @@ export class InterlangNetwork {
this._coerceWikis();
}
/**
* Changes the state of this network such that there are no duplicate wikis.
*
@ -220,6 +219,7 @@ export class InterlangNetwork {
});
}
/**
* Determines whether the given source links to the given destination, potentially through a redirect.
*
@ -440,7 +440,7 @@ export class MediaWikiManager {
*
* @param mwm {MediaWikiManager} the manager to use for caching and resolving pages
* @param title {string} the title of the page to start traversing at
* @param [progressCb] {function(Object[]): void} a function handling progress updates
* @param [progressCb] {function(*): void} a function handling progress updates
* @returns network {Object} the discovered network
* @returns network.pages {Page[]} the pages in the network
* @returns network.redirects {Redirect[]} the redirects in the network
@ -456,7 +456,7 @@ export const discoverNetwork = async function (mwm, title, progressCb) {
if (history.some(it => it.equals(next)))
continue;
progressCb("Checking", next);
progressCb("Checking " + next);
history.push(next);
const nextMw = await mwm.getMw(next.lang);
await nextMw