61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
|
|
/**
|
|
* HTML escape
|
|
*
|
|
* @param {string} sz
|
|
* @return {string}
|
|
*/
|
|
export function hesc(sz: string): string {
|
|
return sz
|
|
.replace(/&/g,'&')
|
|
.replace(/</g,'<')
|
|
.replace(/>/g,'>')
|
|
.replace(/"/g,'"')
|
|
.replace(/'/g,''');
|
|
}
|
|
|
|
/**
|
|
* html is a no-op function for ES6 literals.
|
|
* Install the `lit-html` extension in VSCode to use this as a syntax-highlighted string literal.
|
|
*
|
|
* @param strings {TemplateStringsArray}
|
|
* @param keys {string[]}
|
|
*/
|
|
export function html(strings: TemplateStringsArray, ...keys: string[]): string {
|
|
let ret = [];
|
|
for (let i = 0; i < strings.length - 1; ++i) {
|
|
ret.push(strings[i], keys[i]);
|
|
}
|
|
ret.push(strings[strings.length - 1]);
|
|
return ret.join("");
|
|
};
|
|
|
|
/**
|
|
* toast shows a mini temporary informational popup, using bootstrap's toast library.
|
|
*
|
|
* @param titleHtml {string}
|
|
* @param bodyHtml {string}
|
|
* @param colorClass {string} One of 'info', 'success', 'danger'
|
|
*/
|
|
export function toast(titleHtml: string, bodyHtml: string, colorClass: string = "info") {
|
|
|
|
const template = html`
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="5000">
|
|
<div class="toast-header bg-` + colorClass + ` text-white">
|
|
<strong class="mr-auto">` + hesc(titleHtml) + html`</strong>
|
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">` + hesc(bodyHtml) + html`</div>
|
|
</div>`;
|
|
|
|
let $t = $(template);
|
|
$(".toast-container").append($t);
|
|
$t.toast('show');
|
|
$t.on('hidden.bs.toast', function () {
|
|
$t.remove();
|
|
})
|
|
|
|
}
|