Fix parallel sentence alignment, fix #323

spraakbanken · Feb 20, 2024 · cc88ef2 · cc88ef2
1 parent b670dc5
commit cc88ef2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - The "in order" option is inverted, so it is now "in free order" and unchecked by default (but still `in_order` in the URL query param and in the API)
 - The checkbox of said option no longer gets disabled in Extended mode
+- Fixed parallel sentence alignment [#323](https://github.com/spraakbanken/korp-frontend/issues/323)
 
 ### Removed
 

diff --git a/app/scripts/components/kwic.js b/app/scripts/components/kwic.js
@@ -168,7 +168,7 @@ export const kwicComponent = {
                     }
 
                     if (currentMode === "parallel" && !$ctrl.isReading) {
-                        centerScrollbarParallel()
+                        $timeout(() => alignParallelSentences())
                     }
                     if ($ctrl.kwic.length == 0) {
                         selectionManager.deselect()
@@ -549,36 +549,29 @@ export const kwicComponent = {
                 area.stop(true, true).scrollLeft(match - ($("body").innerWidth() - sidebarWidth) / 2)
             }
 
-            function centerScrollbarParallel() {
-                const scrollLeft = $(".table_scrollarea", $element).scrollLeft() || 0
-                let changed = true
-                const prevValues = []
-
-                // loop until the placement of linked sentences have settled
-                while (changed) {
-                    changed = false
-                    let i = 0
-                    for (let linked of $(".table_scrollarea > .kwic .linked_sentence").get()) {
-                        const mainrow = $(linked).prev()
-                        if (!mainrow.length) {
-                            continue
-                        }
-                        let firstWord = mainrow.find(".left .word:first")
-                        if (!firstWord.length) {
-                            firstWord = mainrow.find(".match .word:first")
-                        }
-                        const offset = Math.round(firstWord.position().left + scrollLeft - 25)
-                        $(linked).find(".lnk").css("padding-left", offset)
+            /** Add offsets to align each linked sentence with its main one */
+            function alignParallelSentences() {
+                /** A helper to get horizontal coordinates relative to a container. */
+                function getBounds($elements, $container) {
+                    const container = $container.get(0).getBoundingClientRect()
+                    const left = $elements.get(0).getBoundingClientRect().left - container.left
+                    const right = $elements.get(-1).getBoundingClientRect().right - container.left
+                    const width = right - left
+                    const center = left + width / 2
+                    const space = container.width - width
+                    return { left, right, width, center, space }
+                }
 
-                        const threshold = 25
-                        if (offset - (prevValues[i] || 0) > threshold) {
-                            changed = true
-                        }
+                $(".table_scrollarea > .kwic .linked_sentence").each((i, el) => {
+                    const $linkedRow = $(el)
+                    const $mainRow = $linkedRow.prev()
+                    const linked = getBounds($linkedRow.find(".word"), $linkedRow)
+                    const main = getBounds($mainRow.find(".word"), $mainRow)
 
-                        prevValues[i] = offset
-                        i++
-                    }
-                }
+                    const offset = main.center - linked.width / 2
+                    // Add offset as cell padding
+                    $linkedRow.find(".lnk").css("padding-left", Math.min(offset, linked.space))
+                })
             }
 
             function addKeydownHandler() {

diff --git a/app/styles/styles.scss b/app/styles/styles.scss
@@ -898,7 +898,6 @@ a {
   color: #999;
   font-style: italic;
   position: relative;
-  text-align: center;
   .left, .match, .right {
     display : none;
   }