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

refactor: allow localised element query

Browse Source
This commit is contained in:
Oliver Booth 2023-08-10 15:31:51 +01:00
parent 94a1ee00e1
commit d67955f28a
Signed by: oliverbooth
GPG Key ID: 725DB725A0D9EE61
2 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/ts/UI.ts
View File

@ -1,4 +1,4 @@
declare const bootstrap: any; declare const bootstrap: any;
declare const katex: any; declare const katex: any;
class UI { class UI {
@ -13,18 +13,20 @@ class UI {
/** /**
* Forces all UI elements to update. * Forces all UI elements to update.
*/ */
public static updateUI() { public static updateUI(element?: Element) {
UI.addLineNumbers(); element = element || document.body;
UI.addBootstrapTooltips(); UI.addLineNumbers(element);
UI.renderTeX(); UI.addBootstrapTooltips(element);
UI.unescapeMarkTags(); UI.renderTeX(element);
UI.unescapeMarkTags(element);
} }
/** /**
* Adds Bootstrap tooltips to all elements with a title attribute. * Adds Bootstrap tooltips to all elements with a title attribute.
*/ */
public static addBootstrapTooltips() { public static addBootstrapTooltips(element?: Element) {
document.querySelectorAll("[title]").forEach((el) => { element = element || document.body;
element.querySelectorAll("[title]").forEach((el) => {
el.setAttribute("data-bs-toggle", "tooltip"); el.setAttribute("data-bs-toggle", "tooltip");
el.setAttribute("data-bs-placement", "bottom"); el.setAttribute("data-bs-placement", "bottom");
el.setAttribute("data-bs-html", "true"); el.setAttribute("data-bs-html", "true");
@ -37,8 +39,9 @@ class UI {
/** /**
* Adds line numbers to all <pre> <code> blocks that have more than one line. * Adds line numbers to all <pre> <code> blocks that have more than one line.
*/ */
public static addLineNumbers() { public static addLineNumbers(element?: Element) {
document.querySelectorAll("pre code").forEach((block) => { element = element || document.body;
element.querySelectorAll("pre code").forEach((block) => {
let content = block.textContent; let content = block.textContent;
if (content.trim().split("\n").length > 1) { if (content.trim().split("\n").length > 1) {
block.parentElement.classList.add("line-numbers"); block.parentElement.classList.add("line-numbers");
@ -49,8 +52,9 @@ class UI {
/** /**
* Renders all TeX in the document. * Renders all TeX in the document.
*/ */
public static renderTeX() { public static renderTeX(element?: Element) {
const tex = document.getElementsByClassName("math"); element = element || document.body;
const tex = element.getElementsByClassName("math");
Array.from(tex).forEach(function (el: Element) { Array.from(tex).forEach(function (el: Element) {
let content = el.textContent.trim(); let content = el.textContent.trim();
if (content.startsWith("\\[")) content = content.slice(2); if (content.startsWith("\\[")) content = content.slice(2);
@ -63,8 +67,9 @@ class UI {
/** /**
* Unescapes all <mark> tags in <pre> <code> blocks. * Unescapes all <mark> tags in <pre> <code> blocks.
*/ */
public static unescapeMarkTags() { public static unescapeMarkTags(element?: Element) {
document.querySelectorAll("pre code").forEach((block) => { element = element || document.body;
element.querySelectorAll("pre code").forEach((block) => {
let content = block.innerHTML; let content = block.innerHTML;
content = content.replaceAll("&lt;mark&gt;", "<mark>"); content = content.replaceAll("&lt;mark&gt;", "<mark>");
content = content.replaceAll("&lt;/mark&gt;", "</mark>"); content = content.replaceAll("&lt;/mark&gt;", "</mark>");

3
src/ts/app.ts
View File

@ -40,13 +40,12 @@ declare const Handlebars: any;
card.innerHTML = body.trim(); card.innerHTML = body.trim();
blogPostContainer.appendChild(card); blogPostContainer.appendChild(card);
UI.updateUI(card);
} }
i += 4; i += 4;
} }
UI.updateUI();
const spinner = document.querySelector("#blog-loading-spinner"); const spinner = document.querySelector("#blog-loading-spinner");
if (spinner) { if (spinner) {
spinner.classList.add("removed"); spinner.classList.add("removed");