elRoot can be module global

frontend/src/ts/topic-comment-listing.ts

@@ -88,6 +88,7 @@ export let urlTemplates: {
 }
 
 export let stringsPassed: PassedStringsType
+let elRoot: ElTopicCommentListingType
 
 function initializeUrls(options: TopicCommentListingOptionsType): void {
   const urls = options.urls
@@ -141,19 +142,15 @@ function initializeUrls(options: TopicCommentListingOptionsType): void {
   }
 }
 
-type ElTopicCommentListingType = Document & {
+type ElTopicCommentListingType = HTMLElement & {
   forumTopicCommentListing: TopicCommentListing
 }
 
-function getElRoot(): ElTopicCommentListingType {
-  return <ElTopicCommentListingType>document
-}
-
 function onClickJumpToComment(event: MouseEvent): void {
   const commentLink = event.currentTarget
   if (!(commentLink instanceof HTMLAnchorElement)) return
   const commentPk = parseInt(commentLink.dataset.forumLinkTo ?? '-1')
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   const elOneComment = obj.comments.get(commentPk)
   if (!elOneComment) return
   event.preventDefault()
@@ -176,12 +173,12 @@ function getFirstOrLastCommentPk(obj: TopicCommentListing): number {
 }
 
 function onScrollFirst(): void {
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   obj.isPageScrolled = true
 }
 
 function onScrollEnd(): void {
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   const navbarHeight = getNavbarHeight()
   const viewportHeight = document.documentElement.clientHeight
   let selectedCommentPk = 0
@@ -208,7 +205,7 @@ async function onPaginate(
     console.error('urlTemplates.commentListingPageNo is unset')
     return
   }
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   obj.paginators.forEach(paginator => {
     paginator.setLoading(elClicked)
   })
@@ -219,7 +216,7 @@ async function onPaginate(
 }
 
 function onTeardownOnecomment(el: ElOnecommentType): void {
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   obj.comments.delete(el.forumOneComment.commentPk)
   teardownOnecomment(
     el, onClickJumpToComment, commentHighlightOn, commentHighlightOff)
@@ -262,7 +259,7 @@ function commentHighlightOn(event: Event): void {
   const target = event.target
   if (!(target instanceof HTMLAnchorElement)) return
   const commentPk = parseInt(target.dataset.forumLinkTo ?? '-1')
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   const elOnecomment = obj.comments.get(commentPk)
   if (!elOnecomment) return
   highlightOn(elOnecomment)
@@ -272,7 +269,7 @@ function commentHighlightOff(event: Event): void {
   const target = event.target
   if (!(target instanceof HTMLAnchorElement)) return
   const commentPk = parseInt(target.dataset.forumLinkTo ?? '-1')
-  const obj = getElRoot().forumTopicCommentListing
+  const obj = elRoot.forumTopicCommentListing
   const elOnecomment = obj.comments.get(commentPk)
   if (!elOnecomment) return
   highlightOff(elOnecomment)
@@ -311,18 +308,17 @@ class TopicCommentListing {
   readonly paginators = new Array<Paginator>()
 
   constructor (
-    root: ElTopicCommentListingType,
     options: TopicCommentListingOptionsType
   ) {
     this.options = options
-    this.initializeElOnecomments(root)
+    this.initializeElOnecomments()
-    this.initializePaginators(root)
+    this.initializePaginators()
     addEventListener('scrollend', onScrollEnd)
   }
 
-  private initializeElOnecomments(root: ElTopicCommentListingType): void {
+  private initializeElOnecomments(): void {
     const commentWrappers = <HTMLCollectionOf<HTMLElement>>
-      root.getElementsByClassName(this.options.selectors.commentWrapper)
+      elRoot.getElementsByClassName(this.options.selectors.commentWrapper)
     for (const el of commentWrappers) {
       const commentPk = parseInt(el.dataset.forumCommentPk ?? '-1')
       if (commentPk === -1) throw new Error('forumLinkTo not found')
@@ -335,14 +331,14 @@ class TopicCommentListing {
     }
   }
 
-  private initializePaginators(root: ElTopicCommentListingType): void {
+  private initializePaginators(): void {
     if (this.options.listingMode !== 'commentListing') return
     const wrappers =
       <HTMLCollectionOf<HTMLUListElement>>
-      root.getElementsByClassName('pagination-comments')
+      elRoot.getElementsByClassName('pagination-comments')
-    for (const elRoot of wrappers) {
+    for (const elWrapperRoot of wrappers) {
       this.paginators.push(Paginator.add({
-        root: elRoot, callbacks: { load: onPaginate }
+        root: elWrapperRoot, callbacks: { load: onPaginate }
       }))
     }
   }
@@ -350,12 +346,18 @@ class TopicCommentListing {
 
 export function init(options: TopicCommentListingOptionsType): void {
   stringsPassed = options.strings
+  const elAssignedRoot =
+    <ElTopicCommentListingType | null>
+    document.getElementById(options.selectors.root)
+  if (!elAssignedRoot) {
+    throw new Error(`root selector '${options.selectors.root}' not found`)
+  }
+  elRoot = elAssignedRoot
   oneCommentInit()
   initializeUrls(options)
-  const root = getElRoot()
+  elRoot.forumTopicCommentListing = new TopicCommentListing(options)
-  root.forumTopicCommentListing = new TopicCommentListing(root, options)
   addEventListener('scroll', onScrollFirst, { once: true })
-  initialJumpToComment(root.forumTopicCommentListing).catch((e) => {
+  initialJumpToComment(elRoot.forumTopicCommentListing).catch((e) => {
     console.error('initial scroll resulted in failure:', e)
   })
 }