refactor: delegate timestamp render to UI class
This commit is contained in:
parent
b4c991e44f
commit
e939174040
54
src/ts/UI.ts
54
src/ts/UI.ts
|
@ -71,6 +71,7 @@ class UI {
|
||||||
UI.addHighlighting(element);
|
UI.addHighlighting(element);
|
||||||
UI.addBootstrapTooltips(element);
|
UI.addBootstrapTooltips(element);
|
||||||
UI.renderTeX(element);
|
UI.renderTeX(element);
|
||||||
|
UI.renderTimestamps(element);
|
||||||
UI.unescapeMarkTags(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.
|
* Unescapes all <mark> tags in <pre> <code> blocks.
|
||||||
* @param element The element to search for <pre> <code> blocks in.
|
* @param element The element to search for <pre> <code> blocks in.
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import API from "./API";
|
import API from "./API";
|
||||||
import TimeUtility from "./TimeUtility";
|
|
||||||
import UI from "./UI";
|
import UI from "./UI";
|
||||||
|
|
||||||
declare const Handlebars: any;
|
declare const Handlebars: any;
|
||||||
|
@ -32,50 +31,4 @@ declare const Handlebars: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
UI.updateUI();
|
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in New Issue