82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
|
import {html} from 'htm/preact';
|
||
|
|
import {render} from 'preact';
|
||
|
|
import {
|
||
|
|
AutocompleteFeature,
|
||
|
|
BackToTopFeature,
|
||
|
|
extractAndSaveGroups,
|
||
|
|
getSettings,
|
||
|
|
initialize,
|
||
|
|
JumpToNewCommentFeature,
|
||
|
|
log,
|
||
|
|
runHideVotesFeature,
|
||
|
|
runMarkdownToolbarFeature,
|
||
|
|
TRXComponent,
|
||
|
|
UserLabelsFeature
|
||
|
|
} from '.';
|
||
|
|
|
||
|
|
window.addEventListener('load', async () => {
|
||
|
|
const start = window.performance.now();
|
||
|
|
initialize();
|
||
|
|
const settings = await getSettings();
|
||
|
|
|
||
|
|
// Any features that will use `settings.data.knownGroups` should be added to
|
||
|
|
// this array so that when groups are changed on Tildes, TRX can still update
|
||
|
|
// them without having to change the hardcoded values.
|
||
|
|
const usesKnownGroups = [settings.features.autocomplete];
|
||
|
|
// Only when any of the features that uses this data try to save the groups.
|
||
|
|
if (usesKnownGroups.some((value) => value)) {
|
||
|
|
settings.data.knownGroups = await extractAndSaveGroups(settings);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Object to hold the active components we are going to render.
|
||
|
|
const components: Record<string, TRXComponent | undefined> = {};
|
||
|
|
|
||
|
|
if (settings.features.autocomplete) {
|
||
|
|
components.autocomplete = html`
|
||
|
|
<${AutocompleteFeature} settings=${settings} />
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (settings.features.backToTop) {
|
||
|
|
components.backToTop = html`<${BackToTopFeature} />`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (settings.features.hideVotes) {
|
||
|
|
runHideVotesFeature(settings);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (settings.features.jumpToNewComment) {
|
||
|
|
components.jumpToNewComment = html`<${JumpToNewCommentFeature} />`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (settings.features.markdownToolbar) {
|
||
|
|
runMarkdownToolbarFeature();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (settings.features.userLabels) {
|
||
|
|
components.userLabels = html`
|
||
|
|
<${UserLabelsFeature} settings=${settings} />
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Insert a placeholder at the end of the body first, then render the rest
|
||
|
|
// and use that as the replacement element. Otherwise render() would put it
|
||
|
|
// at the beginning of the body which causes a bunch of different issues.
|
||
|
|
const replacement = document.createElement('div');
|
||
|
|
document.body.append(replacement);
|
||
|
|
|
||
|
|
// The jump to new comment button must come right before
|
||
|
|
// the back to top button. The CSS depends on them being in this order.
|
||
|
|
render(
|
||
|
|
html`<div id="trx-container">
|
||
|
|
${components.jumpToNewComment} ${components.backToTop}
|
||
|
|
${components.autocomplete} ${components.userLabels}
|
||
|
|
</div>`,
|
||
|
|
document.body,
|
||
|
|
replacement
|
||
|
|
);
|
||
|
|
|
||
|
|
const initializedIn = window.performance.now() - start;
|
||
|
|
log(`Initialized in approximately ${initializedIn} milliseconds.`);
|
||
|
|
});
|