Use Fork Awesome instead, JS-ify

This commit is contained in:
Florine W. Dekker 2020-04-11 00:12:42 +02:00
parent 2c874ccf1f
commit 35c8407a9e
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
1 changed files with 60 additions and 10 deletions

View File

@ -13,8 +13,8 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
crossorigin="anonymous" />
<link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-bundle.min.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.7/css/fork-awesome.min.css"
integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous" />
<!--suppress CssUnresolvedCustomProperty, CssUnusedSymbol -->
<style>
@ -82,6 +82,11 @@
color: var(--error-color);
}
#networkTable th a i {
font-size: 0.9em;
font-weight: normal;
}
/***
* Loading icon
@ -198,7 +203,7 @@
<a href="https://git.fwdekker.com/FWDekker/interlanguage-checker/src/branch/master/LICENSE">MIT License</a>.
Source code available on <a href="https://git.fwdekker.com/FWDekker/interlanguage-checker/">git</a>.
<div style="float: right;">v1.2.0</div>
<div style="float: right;">v1.2.1</div>
</section>
</footer>
</main>
@ -550,19 +555,18 @@
const editIconLink = document.createElement("a");
editIconLink.href = url + "?action=edit";
editIconLink.target = "_blank";
const editIcon = document.createElement("i");
editIcon.classList.add("fa", "fa-edit");
editIconLink.appendChild(editIcon);
new FontIcon("pencil").appendTo(editIconLink);
span.appendChild(editIconLink);
span.appendChild(padding.cloneNode(true));
const copyIconLink = document.createElement("a");
copyIconLink.href = "#";
copyIconLink.addEventListener("click", () => navigator.clipboard.writeText(`[[${linkStr}]]`));
const copyIcon = document.createElement("i");
copyIcon.classList.add("fa", "fa-copy");
copyIconLink.appendChild(copyIcon);
const copyIcon = new FontIcon("clipboard").appendTo(copyIconLink);
copyIconLink.addEventListener("click", () => {
navigator.clipboard.writeText(`[[${linkStr}]]`);
copyIcon.changeTo("check", 1000);
});
span.appendChild(copyIconLink);
return span;
@ -849,6 +853,52 @@
}
/**
* A font-based icon.
*/
class FontIcon {
/**
* Constructs a new `FontIcon`.
*
* @param name {string} the name of the icon
*/
constructor(name) {
this._node = document.createElement("i");
this._node.classList.add("fa", `fa-${name}`);
this._name = name;
}
/**
* Appends this icon to the given parent node.
*
* @param parent {HTMLElement} the node to append the icon to
* @return {FontIcon} this `FontIcon`
*/
appendTo(parent) {
parent.appendChild(this._node);
return this;
}
/**
* Temporarily changes this icon to the given name.
*
* @param name {string} the temporary icon to display
* @param time {number} the number of milliseconds to display the other icon
*/
changeTo(name, time) {
this._node.classList.remove(`fa-${this._name}`);
this._node.classList.add(`fa-${name}`);
setTimeout(() => {
this._node.classList.remove(`fa-${name}`);
this._node.classList.add(`fa-${this._name}`);
}, time);
}
}
// noinspection JSUnresolvedFunction
doAfterLoad(async () => {
const urlInput = new ValidatableInput($("#url"), (value) => {