oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

refactor: delegate timestamp render to UI class

This commit is contained in:
Oliver Booth 2023-08-10 16:21:35 +01:00
parent b4c991e44f
commit e939174040
Signed by: oliverbooth
GPG Key ID: 725DB725A0D9EE61
2 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/ts/UI.ts
View File

@ -71,6 +71,7 @@ class UI {
UI.addHighlighting(element);
UI.addBootstrapTooltips(element);
UI.renderTeX(element);
UI.renderTimestamps(element);
UI.unescapeMarkTags(element);
}
@ -131,6 +132,59 @@ class UI {
});
}
/**
* Renders Discord-style <t:timestamp:format> tags.
* @param element The element to search for timestamps in.
*/
public static renderTimestamps(element?: Element) {
element = element || document.body;
const timestamps = element.querySelectorAll("span[data-timestamp][data-format]");
timestamps.forEach((timestamp) => {
const seconds = parseInt(timestamp.getAttribute("data-timestamp"));
const format = timestamp.getAttribute("data-format");
const date = new Date(seconds * 1000);
const shortTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
const shortDateString = date.toLocaleDateString([], {day: "2-digit", month: "2-digit", year: "numeric"});
const longTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit", second: "2-digit"});
const longDateString = date.toLocaleDateString([], {day: "numeric", month: "long", year: "numeric"});
const weekday = date.toLocaleString([], {weekday: "long"});
timestamp.setAttribute("title", `${weekday}, ${longDateString} ${shortTimeString}`);
switch (format) {
case "t":
timestamp.textContent = shortTimeString;
break;
case "T":
timestamp.textContent = longTimeString;
break;
case "d":
timestamp.textContent = shortDateString;
break;
case "D":
timestamp.textContent = longDateString;
break;
case "f":
timestamp.textContent = `${longDateString} at ${shortTimeString}`
break;
case "F":
timestamp.textContent = `${weekday}, ${longDateString} at ${shortTimeString}`
break;
case "R":
setInterval(() => {
timestamp.textContent = TimeUtility.formatRelativeTimestamp(date);
}, 1000);
break;
}
});
}
/**
* Unescapes all <mark> tags in <pre> <code> blocks.
* @param element The element to search for <pre> <code> blocks in.

49
src/ts/app.ts
View File

@ -1,5 +1,4 @@
import API from "./API";
import TimeUtility from "./TimeUtility";
import API from "./API";
import UI from "./UI";
declare const Handlebars: any;
@ -32,50 +31,4 @@ declare const Handlebars: any;
}
UI.updateUI();
const timestamps = document.querySelectorAll("span[data-timestamp][data-format]");
timestamps.forEach((timestamp) => {
const seconds = parseInt(timestamp.getAttribute("data-timestamp"));
const format = timestamp.getAttribute("data-format");
const date = new Date(seconds * 1000);
const shortTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
const shortDateString = date.toLocaleDateString([], {day: "2-digit", month: "2-digit", year: "numeric"});
const longTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit", second: "2-digit"});
const longDateString = date.toLocaleDateString([], {day: "numeric", month: "long", year: "numeric"});
const weekday = date.toLocaleString([], {weekday: "long"});
timestamp.setAttribute("title", `${weekday}, ${longDateString} ${shortTimeString}`);
switch (format) {
case "t":
timestamp.textContent = shortTimeString;
break;
case "T":
timestamp.textContent = longTimeString;
break;
case "d":
timestamp.textContent = shortDateString;
break;
case "D":
timestamp.textContent = longDateString;
break;
case "f":
timestamp.textContent = `${longDateString} at ${shortTimeString}`
break;
case "F":
timestamp.textContent = `${weekday}, ${longDateString} at ${shortTimeString}`
break;
case "R":
setInterval(() => {
timestamp.textContent = TimeUtility.formatRelativeTimestamp(date);
}, 1000);
break;
}
});
})();