refactor(ts): readingmode

spraakbanken · Nov 7, 2024 · d809a1f · d809a1f
1 parent 651bb4a
commit d809a1f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 19 deletions.
diff --git a/app/scripts/components/readingmode.js → app/scripts/components/readingmode.ts b/app/scripts/components/readingmode.js → app/scripts/components/readingmode.ts
@@ -1,45 +1,56 @@
 /** @format */
-import angular from "angular"
+import {
+    TextReaderDataContainer,
+    TextReaderTokenContainer,
+    TextReaderWordHandler,
+} from "@/controllers/text_reader_controller"
+import angular, { IController, IRootElementService } from "angular"
+
+type StandardReadingModeController = IController & {
+    data: TextReaderDataContainer
+    wordClick: TextReaderWordHandler
+}
 
 angular.module("korpApp").component("standardReadingMode", {
     bindings: {
         data: "<",
-        wordClick: "&",
+        wordClick: "<",
     },
     controller: [
         "$element",
-        function ($element) {
-            const ctrl = this
+        function ($element: IRootElementService) {
+            const ctrl = this as StandardReadingModeController
 
-            function standardInnerElem(document) {
-                const doc = []
+            function standardInnerElem(document: TextReaderTokenContainer) {
+                const doc: string[] = []
                 for (let idx = 0; idx < document.tokens.length; idx++) {
                     let token = document.tokens[idx]
-                    if (!token.tokens) {
+                    if ("tokens" in token && token.tokens) {
+                        doc.push(`<div>${standardInnerElem(token)}</div>`)
+                    } else {
                         doc.push(
                             `<span class="word" data-idx="${idx}">${token.attrs.head}${token.attrs.word}${token.attrs.tail}</span>`
                         )
-                    } else {
-                        doc.push(`<div>${standardInnerElem(token.tokens)}</div>`)
                     }
                 }
                 return `${doc.join("")}`
             }
 
-            function standardOuterElem(data) {
+            function standardOuterElem(data: TextReaderDataContainer) {
                 return `<div class="text-container m-md-5">${standardInnerElem(data.document)}</div>`
             }
 
             ctrl.$onInit = () => {
                 $element[0].innerHTML = standardOuterElem(ctrl.data)
 
-                $element[0].addEventListener("click", (e) => {
-                    if (e.target.dataset.idx) {
+                $element[0].addEventListener("click", (e: MouseEvent) => {
+                    const element = e.target as HTMLElement
+                    if (element.dataset.idx) {
                         document.querySelector(".word.selected")?.classList.remove("selected")
-                        e.target.classList.add("selected")
-                        const idx = e.target.dataset.idx
+                        element.classList.add("selected")
+                        const idx = element.dataset.idx
                         const token = ctrl.data.document.tokens[idx]
-                        ctrl.wordClick(["wordClick"])(token)
+                        ctrl.wordClick(token)
                     }
                 })
             }

diff --git a/app/scripts/controllers/text_reader_controller.ts b/app/scripts/controllers/text_reader_controller.ts
@@ -15,23 +15,33 @@ import { getDataForReadingMode } from "@/backend/backend"
 type TextReaderControllerScope = TabHashScope & {
     loading: boolean
     inData: TextTab
-    data: { corpus: string; document: TextReaderData; sentenceData: TextTab["sentenceData"] }
+    data: TextReaderDataContainer
     corpusObj: CorpusTransformed
     closeTab: (idx: number, e: Event) => void
     onentry: () => void
     onexit: () => void
 }
 
-type TextReaderData = Omit<ApiKwic, "tokens"> & {
+export type TextReaderDataContainer = {
+    corpus: string
+    document: TextReaderData
+    sentenceData: TextTab["sentenceData"]
+}
+
+export type TextReaderWordHandler = (token: TextReaderToken) => void
+
+export type TextReaderTokenContainer = {
     tokens: TextReaderToken[]
 }
 
+type TextReaderData = Omit<ApiKwic, "tokens"> & TextReaderTokenContainer
+
 type TextReaderScope = TextReaderControllerScope & {
     selectedToken?: TextReaderToken
-    wordClick: (token: TextReaderToken) => void
+    wordClick: TextReaderWordHandler
 }
 
-type TextReaderToken = TokenTreeParent | TokenTreeLeaf
+export type TextReaderToken = TokenTreeParent | TokenTreeLeaf
 
 // TODO The token types need examination, I'm not quite sure yet what the _prepareData function really does