impr(tape mode): show next line if test has newlines (@NadAlaba)

[NadAlaba]

Description

1. Added a div.afterNewline that indents next line after each div.newline element (in getWordHTML() and updateActiveWordLetters()).

2. Added div.beforeNewline before each div.newline so that when first line in tape mode becomes empty because of scrollTape() removing overflown words, the second won't jump up while the user is not expecting a line jump (in getWordHTML() and updateActiveWordLetters()).

3. Changed #words display from flex to block and made .word, .afterNewline and .beforeNewline elements display: inline-block (while keeping .newline as blocks) in order to use text-wrap: nowrap, but still be able to break on demand with block elements .newline. Also, make default .word margin-bottom in tape mode 0.25em just like in non-tape mode, since they are now practically similar.

4. Made default #wordsWrapper height: auto but max-heigh is 3 lines in tape mode and non tape mode.

5. Calculate wordsInput left position in tape mode + zen mode + RTL just like with no tape mode.

6. In scrollTape():

   • Remove leading .afterNewline elements.
   • Get last element to loop over which is the 2nd .afterNewline after active word, or else the 1st one after active, or else stop at the active word.
   • In the loop sum the widths of words before new line then add it to the left margin of the next .afterNewline, while also determining the widths of words before the active word (which will be in the new margin-left of #words), and determine what words have overflown the wrapper and need to be hidden.
   • If requested (through noRemove parameter) don't remove elements until after the margins are set.
   • If there is anything to hide, hide the elements, and adjust margin-left of #words and .afterNewline by the width of what was hidden
   • Calculate the width of the current word in tape=letter just like before then animate the new #words margin-left and .afterNewline elements' margin-left.
   • The #words margin-left animation is done in its own queue so that when we use .stop() before the animation we'll only be stopping the margin-left animation and not the margin-top animation which is performed in lineJump().

7. In lineJump():

   • Some refactoring: save HTMLelements in const instead of repeatedly querying the DOM.
   • The conditions to run lineJump() are now similar in tapeMode on and off (currentTestLine > 0, hideBound = currentTop - 10).
   • When determining the elements to hide, save the last element to hide in a const and then remove everything before it. It is done like this instead of saving what needs to be hidden in an array, because .afterNewline elements have offsetTops that cannot be relied upon to determine if they need to be hidden or not. The new function removeElementsBeforeWord() does that (removes all elements before lastElementToRemove (included) and returns removed .words count).
   • lastElementToHide is now the last .word or .newline that is higher than the hideBound.
   • #words margin-top animation is done in its own queue so that we only .stop() margin-top animation without affecting margin-left animation.

8. Now, Config.showAllLines can be changed without restarting test.

9. updateTestLine() (a new function that determines what line to jump to) now runs lineJump() in force (even when currentTestLine === 0), which is useful to update test line when changing Config.showAllLines to off

10. Previously, when show all lines was on and tape mode was turned on through the commandline mid-test, lineJump() (which ran because of the automatic change of showAllLines to off) would remove some elements conflicting with tape mode removing elements too. That's why each time this scenario happens allowWordRemoval (a new global variable) would be set to false, and if it is false and lineTransition is true, scrollTape() would not do anything (remove words or set #words.marginLeft) until lineJump finishes removing elements.

Closes #3907

[Miodec]

[github-actions]

This PR is stale. Please trigger a re-run of the PR check action.

[github-actions]

This PR is stale. Please trigger a re-run of the PR check action.