gab-social/app/javascript/gabsocial/utils/is_mobile.js

'use strict'

import detectPassiveEvents from 'detect-passive-events'

const BREAKPOINT_EXTRA_LARGE = 1480
const BREAKPOINT_LARGE = 1280
const BREAKPOINT_MEDIUM = 1160
const BREAKPOINT_SMALL = 1080
const BREAKPOINT_EXTRA_SMALL = 992

const LAYOUT_BREAKPOINT = 630

export function isMobile(width) {
  return width <= LAYOUT_BREAKPOINT
}

export function breakpointExtraLarge(width) {
  return width > BREAKPOINT_EXTRA_LARGE
}

export function breakpointLarge(width) {
  return width > BREAKPOINT_MEDIUM && width < BREAKPOINT_LARGE
}

export function breakpointMedium(width) {
  return width > BREAKPOINT_SMALL && width < BREAKPOINT_MEDIUM
}

export function breakpointSmall(width) {
  return width > BREAKPOINT_EXTRA_SMALL && width < BREAKPOINT_SMALL
}

export function breakpointExtraSmall(width) {
  return width < BREAKPOINT_EXTRA_SMALL
}

export function getScreenBreakpoint(width) {
  if (width > BREAKPOINT_EXTRA_LARGE) {
    return 'BREAKPOINT_EXTRA_LARGE'
  } else if (width > BREAKPOINT_MEDIUM && width < BREAKPOINT_LARGE) {
    return 'BREAKPOINT_LARGE'
  } else if (width > BREAKPOINT_SMALL && width < BREAKPOINT_MEDIUM) {
    return 'BREAKPOINT_MEDIUM'
  } else if (width > BREAKPOINT_EXTRA_SMALL && width < BREAKPOINT_SMALL) {
    return 'BREAKPOINT_SMALL'
  } else {
    return 'BREAKPOINT_EXTRA_SMALL'
  }
}

export const getWindowDimension = () => {
  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  
  return { width, height }
}

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream

let userTouching = false
let listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false

function touchListener() {
  userTouching = true
  window.removeEventListener('touchstart', touchListener, listenerOptions)
}

window.addEventListener('touchstart', touchListener, listenerOptions)

export function isUserTouching() {
  return userTouching
}

export function isIOS() {
  return iOS
}