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

refactor: render bootstrap tooltips from UI class

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

18
src/ts/UI.ts
View File

@ -1,4 +1,5 @@
declare const katex: any; declare const bootstrap: any;
declare const katex: any;
class UI { class UI {
public static get blogPostContainer(): HTMLDivElement { public static get blogPostContainer(): HTMLDivElement {
@ -14,10 +15,25 @@ class UI {
*/ */
public static updateUI() { public static updateUI() {
UI.addLineNumbers(); UI.addLineNumbers();
UI.addBootstrapTooltips();
UI.renderTeX(); UI.renderTeX();
UI.unescapeMarkTags(); UI.unescapeMarkTags();
} }
/**
* Adds Bootstrap tooltips to all elements with a title attribute.
*/
public static addBootstrapTooltips() {
document.querySelectorAll("[title]").forEach((el) => {
el.setAttribute("data-bs-toggle", "tooltip");
el.setAttribute("data-bs-placement", "bottom");
el.setAttribute("data-bs-html", "true");
el.setAttribute("data-bs-title", el.getAttribute("title"));
new bootstrap.Tooltip(el);
});
}
/** /**
* 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.
*/ */

11
src/ts/app.ts
View File

@ -2,7 +2,6 @@ import API from "./API";
import TimeUtility from "./TimeUtility"; import TimeUtility from "./TimeUtility";
import UI from "./UI"; import UI from "./UI";
declare const bootstrap: any;
declare const Handlebars: any; declare const Handlebars: any;
(() => { (() => {
@ -103,14 +102,4 @@ declare const Handlebars: any;
break; break;
} }
}); });
document.querySelectorAll("[title]").forEach((el) => {
el.setAttribute("data-bs-toggle", "tooltip");
el.setAttribute("data-bs-placement", "bottom");
el.setAttribute("data-bs-html", "true");
el.setAttribute("data-bs-title", el.getAttribute("title"));
});
const list = document.querySelectorAll('[data-bs-toggle="tooltip"]');
list.forEach((el: Element) => new bootstrap.Tooltip(el));
})(); })();