ios-keyboard-bug.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. // from https://www.codemzy.com/blog/sticky-fixed-header-ios-keyboard-fix
  2. // replaced lodash debounce w/ vanilla js debounce
  3. let fixPosition = 0; // the fix
  4. let lastScrollY = window.pageYOffset; // the last scroll position
  5. let toolbarWrap = document.getElementById('toolbar-wrap'); // the toolbar wrap
  6. let toolbar = document.getElementById('toolbar'); // the toolbar
  7. // let editor = document.getElementById('main'); // the editor
  8. // from: https://www.joshwcomeau.com/snippets/javascript/debounce/
  9. const debounce = (callback, wait) => {
  10. let timeoutId = null;
  11. return (...args) => {
  12. window.clearTimeout(timeoutId);
  13. timeoutId = window.setTimeout(() => {
  14. callback.apply(null, args);
  15. }, wait);
  16. };
  17. }
  18. // function to set the margin to show the toolbar if hidden
  19. const setMargin = function () {
  20. // if toolbar wrap is hidden
  21. const newPosition = toolbarWrap.getBoundingClientRect().top;
  22. if (newPosition < -1) {
  23. // add a margin to show the toolbar
  24. toolbar.classList.add("down"); // add class so toolbar can be animated
  25. fixPosition = Math.abs(newPosition); // this is new position we need to fix the toolbar in the display
  26. // if at the bottom of the page take a couple of pixels off due to gap
  27. if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
  28. fixPosition -= 2;
  29. }
  30. // set the margin to the new fixed position
  31. toolbar.style["margin-top"] = fixPosition + "px";
  32. }
  33. }
  34. // use debounce to stop flicker
  35. const debounceMargin = debounce(setMargin, 150);
  36. // function to run on scroll and blur
  37. export const showToolbar = () => {
  38. // remove animation and put toolbar back in default position
  39. if (fixPosition > 0) {
  40. toolbar.classList.remove("down");
  41. fixPosition = 0;
  42. toolbar.style["margin-top"] = 0 + "px";
  43. }
  44. // will check if toolbar needs to be fixed
  45. debounceMargin();
  46. }