is_mobile.ts 980 B

12345678910111213141516171819202122232425262728293031323334
  1. import { supportsPassiveEvents } from 'detect-passive-events';
  2. import { forceSingleColumn, hasMultiColumnPath } from './initial_state';
  3. const LAYOUT_BREAKPOINT = 630;
  4. export const isMobile = (width: number) => width <= LAYOUT_BREAKPOINT;
  5. export const transientSingleColumn = !forceSingleColumn && !hasMultiColumnPath;
  6. export type LayoutType = 'mobile' | 'single-column' | 'multi-column';
  7. export const layoutFromWindow = (): LayoutType => {
  8. if (isMobile(window.innerWidth)) {
  9. return 'mobile';
  10. } else if (!forceSingleColumn && !transientSingleColumn) {
  11. return 'multi-column';
  12. } else {
  13. return 'single-column';
  14. }
  15. };
  16. const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
  17. let userTouching = false;
  18. const touchListener = () => {
  19. userTouching = true;
  20. window.removeEventListener('touchstart', touchListener);
  21. };
  22. window.addEventListener('touchstart', touchListener, listenerOptions);
  23. export const isUserTouching = () => userTouching;