diff --git a/CHANGELOG.md b/CHANGELOG.md index 45a69743b..0f7909030 100644 --- 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 index 6cd06ba8f..75396faa3 100644 --- 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 index 4069775f9..3d17fcb77 100644 --- 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; }