Function updateWordsInputPosition

frontend/src/ts/test/test-ui.ts:522–570

()

}

export function updateWordsInputPosition(): void {
  if (getActivePage() !== "test") return;
  const isTestRightToLeft = TestState.isDirectionReversed
    ? !TestState.isLanguageRightToLeft
    : TestState.isLanguageRightToLeft;

  const el = getInputElement();

  if (el === null) return;

  const activeWord = getActiveWordElement();

  if (!activeWord) {
    el.style.top = "0px";
    el.style.left = "0px";
    return;
  }

  const letterHeight = convertRemToPixels(Config.fontSize);
  const targetTop =
    activeWord.getOffsetTop() + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border

  if (Config.tapeMode !== "off") {
    el.style.maxWidth = `${100 - Config.tapeMargin}%`;
  } else {
    el.style.maxWidth = "";
  }
  if (activeWord.getOffsetWidth() < letterHeight) {
    el.style.width = `${letterHeight}px`;
  } else {
    el.style.width = `${activeWord.getOffsetWidth()}px`;
  }

  el.style.top = `${targetTop}px`;

  if (Config.tapeMode !== "off") {
    el.style.left = `${
      wordsWrapperEl.getOffsetWidth() * (Config.tapeMargin / 100)
    }px`;
  } else {
    if (activeWord.getOffsetWidth() < letterHeight && isTestRightToLeft) {
      el.style.left = `${activeWord.getOffsetLeft() - letterHeight}px`;
    } else {
      el.style.left = `${Math.max(0, activeWord.getOffsetLeft())}px`;
    }
  }

  keepWordsInputInTheCenter();
}

let centeringActiveLine: Promise<void> = Promise.resolve();