Allow top/bottom arrow keys to change input values

[masakudamatsu]

Why? For wide screen layouts, it's best to adjust the x-height and modular scale values by some interval, say, 0.1.

[masakudamatsu]

References

• Use arrow keys on the interface: https://css-tricks.com/number-increment-buttons/
• Use arrow keys on the keyboard: https://github.com/LeaVerou/incrementable/blob/gh-pages/incrementable.js

[masakudamatsu]

The event.keyCode is deprecated. Use the event.key instead.

• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

Docs on event.key: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

[masakudamatsu]

0. Define stepValue as 0.1
1. Use keydown event listener on input field.
2. If event.key === "ArrowDown", return event.target.value + stepValue.
3. If event.key === "ArrowUp", return event.target.value - stepValue
4. Update the input value with the returned value.

[masakudamatsu]

We first need to convert the input value into number. Otherwise, 0.1 will be added as string concatenation.

Simply adding 0.1 will cause the floating number problem.

• 10.3 will be shown as 10.29999999999.... So we convert back into string with .toFixed(1) function.

But this implementation will round up the user's input value with more than one decimal places. We need to deal with it.

[masakudamatsu]

To deal with input values of 2+ decimal places, we convert the input value into an integer to avoid the floating-point math quirks (e.g. adding 0.1 to 10.2 will return 10.299999....)

1. Multiply the input value with 10
2. Truncate (1) to an integer to which we add 1 upon pressing the ArrowUp key
3. Extract the last 3 decimal digits of the original input value (after rounding up to 4 decimal places)
4. Multiply (2) with 1,000 and add (3) to it. This is a new input value multiplied with 10,000
5. Divide (4) with 10,000 and use .toFixed(4) to avoid the floating-point math fractional value
6. Use Number() to remove trailing zeros from (5)
7. Use .toString() to convert (6) back into string

For the technique in steps 5-6, see https://stackoverflow.com/a/19623253/11847654

---

We now work on ArrowDown.

[masakudamatsu]

We share the code for steps 4-7 for both ArrowUp and ArrowDown key events

We implement the code for KeyDown event only if the pressed key was ArrowUp or ArrowDown.

• Otherwise the code will be executed for the onChange event as well.

---

Two issues arise

1. When ArrowUp key was pressed, the cursor moves at the front of the input value. See https://stackoverflow.com/questions/1080532/prevent-default-behavior-in-text-input-while-pressing-arrow-up for how to deal with it.
2. When the user has entered a value with 5+ decimal places, pressing the arrow-up or arrow-down will increase/decrease the value AND round it up. This can confuse the user about what is going on.

[masakudamatsu]

Done with the cursor position bug after pressing the ArrowUp key, by following the solution in https://stackoverflow.com/a/1081114/11847654

But it seems event.preventDefault() is the only necessary code. I'm not sure why we need the ignoreKey state and the resetting of the cursor position. Maybe for cross-browser compatibility...

---

Next up: Deal with the case of an input value with 5+ decimal places

[masakudamatsu]

Done with invalid input values when pressing arrow keys.

• Call the validateXHeight function if the input is invalid
• Otherwise change the value with the increment
• In both cases, the cursor position will be maintained.

---

Now we implement the same for modular-scale boxes.

[masakudamatsu]

Done with modular-scale boxes.

• Abstract handleArrowKey function into handleArrowKey.js which is imported into XHeightBox.js and ModularScaleBox.js
• In ModularScaleBox.js, the handleArrowKey function is called separately for x-height and line-height ratio values.

[masakudamatsu]

Two problems:

• Pressing ArrowDown with input value of 1 will reduce it to 0.9, without alerting the user.
• Pressing further won't change the value with the alert message shown.

Solutions:

• Alert whenever the value goes outside the permitted range after pressing arrow keys
• Allow the user to change the value with arrow keys when the value alerts the user.
• For decimal place alerts, do not let the user change the value further with arrow keys.

[masakudamatsu]

So far it took 6.5 hours

[masakudamatsu]

The two problems mentioned above appear to be very hard to solve.

We delegate these problems to issue #209