fix(textchecker-element): fix position issue

textlint · Jul 27, 2020 · e53d031 · e53d031
1 parent 6cd4562
commit e53d031
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 237 deletions.
diff --git a/packages/textchecker-element/public/index.html b/packages/textchecker-element/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>textchecker-element Playground</title>
     <style>
-        .main, .side {
+        .main {
             width: 800px;
             margin: auto;
             position: relative;
@@ -18,11 +18,27 @@
             height: 10em;
             font-size: 24px;
         }
+
+        .side {
+            position: fixed;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .block {
+            width: 300px;
+            height: 300px;
+            display: block;
+        }
     </style>
 </head>
 <body>
 <main class="main">
-    <label for="js-target"></label><textarea class="textarea" id="js-target">お刺身が食べれない！寿司は食べられる。東京特許許可局は難しい漢字だ。</textarea>
+    <div class="block"></div>
+    <label>
+        <textarea class="textarea">form お刺身が食べれない！寿司は食べられる。東京特許許可局は難しい漢字だ。</textarea>
+    </label>
 </main>
 <aside class="side">
     <div id="js-status"></div>

diff --git a/packages/textchecker-element/public/index.ts b/packages/textchecker-element/public/index.ts
@@ -3,101 +3,105 @@ import { TextCheckerPopupElement } from "../src/text-checker-popup-element";
 import type { TextlintResult } from "@textlint/types";
 import { RectItem } from "../src/textchecker-store";
 
-const targetElement = document.querySelector("#js-target") as HTMLTextAreaElement;
-const textChecker = new TextCheckerElement({
-    targetElement: targetElement,
-    hoverPadding: 4
-});
-const textCheckerPopup = new TextCheckerPopupElement();
-targetElement.before(textChecker);
-document.body.append(textCheckerPopup);
-let count = 0;
-
-function debounce(fn: () => void, delay: number) {
-    let timeoutId = null;
-    return function (...args: any[]) {
-        clearTimeout(timeoutId);
-        var that = this;
-        timeoutId = setTimeout(function () {
-            fn.apply(that, args);
-        }, delay);
-    };
-}
-
 const updateStatus = (status: string) => {
     document.querySelector("#js-status").textContent = status;
 }
-const worker = new Worker('textlint.js');
-const waiterForInit = () => {
-    let initialized = false;
-    let _resolve: null | ((init: boolean) => void) = null;
-    const deferred = new Promise((resolve) => {
-        _resolve = resolve;
-    })
-    worker.addEventListener('message', function (event) {
-        if (event.data.command === "init") {
-            initialized = true;
-            _resolve(initialized);
-        }
-    }, {
-        once: true
-    })
-    return {
-        ready() {
-            return deferred;
-        }
+const attachTextChecker = (targetElement: HTMLTextAreaElement) => {
+    const textChecker = new TextCheckerElement({
+        targetElement: targetElement,
+        hoverPadding: 4
+    });
+    const textCheckerPopup = new TextCheckerPopupElement();
+    targetElement.before(textChecker);
+    document.body.append(textCheckerPopup);
+    let count = 0;
+
+    function debounce(fn: () => void, delay: number) {
+        let timeoutId = null;
+        return function (...args: any[]) {
+            clearTimeout(timeoutId);
+            var that = this;
+            timeoutId = setTimeout(function () {
+                fn.apply(that, args);
+            }, delay);
+        };
     }
-}
-const workerStatus = waiterForInit();
-const lint = async (message: string): Promise<TextlintResult> => {
-    await workerStatus.ready();
-    return new Promise((resolve, _reject) => {
+
+    const worker = new Worker('textlint.js');
+    const waiterForInit = () => {
+        let initialized = false;
+        let _resolve: null | ((init: boolean) => void) = null;
+        const deferred = new Promise((resolve) => {
+            _resolve = resolve;
+        })
         worker.addEventListener('message', function (event) {
-            if (event.data.command === "lint:result") {
-                resolve(event.data.result);
+            if (event.data.command === "init") {
+                initialized = true;
+                _resolve(initialized);
             }
         }, {
             once: true
-        });
-        return worker.postMessage({
-            command: "lint",
-            text: message,
-            ext: ".md"
-        });
-    });
-}
-const update = debounce(async () => {
-    console.time("lint");
-    updateStatus("linting...");
-    const result = await lint(targetElement.value);
-    updateStatus("linted");
-    const annotations = result.messages.map((message) => {
-        const card = {
-            id: message.ruleId + "::" + message.index,
-            message: message.message
-        };
+        })
         return {
-            start: message.index,
-            end: message.index + 1,
-            onMouseEnter: ({rectItem}: { rectItem: RectItem }) => {
-                textCheckerPopup.updateCard(card, {
-                    top:
-                        rectItem.boxBorderWidth +
-                        rectItem.boxMarginTop +
-                        rectItem.boxPaddingTop +
-                        rectItem.boxAbsoluteY +
-                        rectItem.top +
-                        rectItem.height,
-                    left: rectItem.boxAbsoluteX + rectItem.left,
-                    width: rectItem.width
-                });
-            },
-            onMouseLeave() {
-                textCheckerPopup.dismissCard(card);
+            ready() {
+                return deferred;
             }
-        };
-    });
-    textChecker.updateAnnotations(annotations);
-}, 200);
-targetElement.addEventListener("input", update);
-update();
+        }
+    }
+    const workerStatus = waiterForInit();
+    const lint = async (message: string): Promise<TextlintResult> => {
+        await workerStatus.ready();
+        return new Promise((resolve, _reject) => {
+            worker.addEventListener('message', function (event) {
+                if (event.data.command === "lint:result") {
+                    resolve(event.data.result);
+                }
+            }, {
+                once: true
+            });
+            return worker.postMessage({
+                command: "lint",
+                text: message,
+                ext: ".md"
+            });
+        });
+    }
+    const update = debounce(async () => {
+        console.time("lint");
+        updateStatus("linting...");
+        const result = await lint(targetElement.value);
+        updateStatus("linted");
+        const annotations = result.messages.map((message) => {
+            const card = {
+                id: message.ruleId + "::" + message.index,
+                message: message.message
+            };
+            return {
+                start: message.index,
+                end: message.index + 1,
+                onMouseEnter: ({rectItem}: { rectItem: RectItem }) => {
+                    textCheckerPopup.updateCard(card, {
+                        top:
+                            rectItem.boxBorderWidth +
+                            rectItem.boxMarginTop +
+                            rectItem.boxPaddingTop +
+                            rectItem.boxAbsoluteY +
+                            rectItem.top +
+                            rectItem.height,
+                        left: rectItem.boxAbsoluteX + rectItem.left,
+                        width: rectItem.width
+                    });
+                },
+                onMouseLeave() {
+                    textCheckerPopup.dismissCard(card);
+                }
+            };
+        });
+        textChecker.updateAnnotations(annotations);
+    }, 200);
+    targetElement.addEventListener("input", update);
+    update();
+};
+
+const targetElement = document.querySelectorAll("textarea");
+targetElement.forEach(element => attachTextChecker(element));