Replace jQuery with simple util functions

evad37 · Dec 25, 2020 · 8c1ea87 · 8c1ea87
1 parent d7565b9
commit 8c1ea87
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 45 deletions.
diff --git a/livenotifications-src/modules/App.js b/livenotifications-src/modules/App.js
@@ -1,3 +1,6 @@
+
+import {makeElement, parseHtml} from "./util";
+
 const App = () => {
 	const api = new mw.Api({
 		ajax: {
@@ -35,51 +38,30 @@ const App = () => {
 						.forEach(notification => {
 							const iconFulllUrl = "https:" + config.wgServer + notification["*"].iconUrl;
 							const readableDate = notification.timestamp.utciso8601.replace("T", " ").replace(/:\d\dZ/, " (UTC)");
-							mw.notify(
-								$("<div>").append(
-									$("<span>")
-										.attr({
-											height: "30px"
-										 })
-										 .css({
-											 float: "right",
-											 "margin-left": "1em"
-										 })
-										 .text("X"),
-									$("<a>")
-										.css({
-											display: "block",
-										})
-										.attr({
-											href: notification["*"].links.primary.url,
-											title: notification["*"].links.primary.label,
-											target: "_blank"
-										})
-										.html(notification["*"].header)
-										.prepend(
-											$("<img>")
-												.css({
-													float: "left",
-													margin: "0.2em 0.5em 0.5em 0"
-												})
-												.attr({
-													src: iconFulllUrl,
-													height: "30px"
-												})
-										)
-										.append(
-											$("<span>")
-												.css({
-													display: "block",
-													color: "#666", "font-size":"88%"
-												})
-												.text(readableDate)
-										)
-								),
-								{
-									autoHide: false
-								}
-							); 
+							const messageDiv = makeElement("div", null, [
+								makeElement("span", {
+									height: "30px",
+									style: "float:right; margin:-0.2em -0.2em 0.2em 0.5em"
+								}, "X"),
+								makeElement("a", {
+									href: notification["*"].links.primary.url,
+									title: notification["*"].links.primary.label,
+									target: "_blank",
+									style: "display:block"
+								}, [
+									makeElement("img", {
+										src: iconFulllUrl,
+										height: "30px",
+										style: "display:block; float:left; margin:0 0.5em 22em -0.5em; color:#666; font-size:88%"
+									}),
+									parseHtml(notification["*"].header),
+									makeElement("span", {
+										style: "display: block; color: #666; font-size:88%"
+									}, readableDate)
+								].flatMap(x=>x) // Flattening in case parseHtml() returns an array
+								)
+							]);
+							mw.notify(messageDiv, {autoHide:false});
 						});
 					// Update the last checked timestamp (for the next request)
 					lastCheckedTimestamp = new Date(response.curtimestamp)

diff --git a/livenotifications-src/modules/util.js b/livenotifications-src/modules/util.js
@@ -0,0 +1,36 @@
+/**
+ * 
+ * @param {string} tagName 
+ * @param {object<string,string|number>} [attributes]
+ * @param {Node|string|Node[]|string[]} [contents]
+ * @returns {HTMLElement}
+ */
+const makeElement = function(tagName, attributes, contents) {
+	const el = document.createElement(tagName);
+	if (attributes) {
+		for (const prop in attributes) {
+			el.setAttribute(prop, attributes[prop]);
+		}
+	}
+	if (contents) {
+		(Array.isArray(contents) ? contents : [contents])
+		.forEach(content => {
+			const node = content && content.nodeType ? content : document.createTextNode(content);
+			el.appendChild(node);
+		});
+	}
+	return el;
+}
+
+/**
+ * @param {string} htmlString
+ * @return {Node|Node[]} Node or Nodes parsed from HTML
+ */
+const parseHtml = function(htmlString) {
+	const div = document.createElement("div");
+	div.innerHTML = htmlString;
+	const children = Array.from(div.childNodes);
+	return children.length === 1 ? children[0] : children;
+}
+
+export {makeElement, parseHtml}