quasar/ui/src/body.js at v1 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { setBrand } from './utils/colors.js'
import { noop } from './utils/event.js'
import { onKeyDownComposition } from './utils/key-composition.js'
import { isSSR, fromSSR, client, iosCorrection } from './plugins/Platform.js'

function getMobilePlatform (is) {
  if (is.ios === true) return 'ios'
  if (is.android === true) return 'android'
}

function getBodyClasses ({ is, has, within }, cfg) {
  const cls = [
    is.desktop === true ? 'desktop' : 'mobile',
    `${has.touch === false ? 'no-' : ''}touch`
  ]

  if (is.mobile === true) {
    const mobile = getMobilePlatform(is)
    mobile !== void 0 && cls.push('platform-' + mobile)
  }

  if (is.nativeMobile === true) {
    const type = is.nativeMobileWrapper

    cls.push(type)
    cls.push('native-mobile')

    if (
      is.ios === true &&
      (cfg[type] === void 0 || cfg[type].iosStatusBarPadding !== false)
    ) {
      cls.push('q-ios-padding')
    }
  }
  else if (is.electron === true) {
    cls.push('electron')
  }
  else if (is.bex === true) {
    cls.push('bex')
  }

  within.iframe === true && cls.push('within-iframe')

  return cls
}

// SSR takeover corrections
function clientUpdate () {
  const classes = document.body.className
  let newCls = classes

  if (iosCorrection !== void 0) {
    newCls = newCls.replace('desktop', 'platform-ios mobile')
  }

  if (client.has.touch === true) {
    newCls = newCls.replace('no-touch', 'touch')
  }

  if (client.within.iframe === true) {
    newCls += ' within-iframe'
  }

  if (classes !== newCls) {
    document.body.className = newCls
  }
}

function setColors (brand) {
  for (const color in brand) {
    setBrand(color, brand[color])
  }
}

export default {
  install (queues, cfg) {
    if (isSSR === true) {
      queues.server.push((q, ctx) => {
        const
          cls = getBodyClasses(q.platform, cfg),
          fn = ctx.ssr.setBodyClasses

        if (cfg.screen !== void 0 && cfg.screen.bodyClass === true) {
          cls.push('screen--xs')
        }

        if (typeof fn === 'function') {
          fn(cls)
        }
        else {
          ctx.ssr.Q_BODY_CLASSES = cls.join(' ')
        }
      })

      return
    }

    if (fromSSR === true) {
      clientUpdate()
    }
    else {
      const cls = getBodyClasses(client, cfg)

      if (client.is.ie === true && client.is.versionNumber === 11) {
        cls.forEach(c => document.body.classList.add(c))
      }
      else {
        document.body.classList.add.apply(document.body.classList, cls)
      }
    }

    cfg.brand !== void 0 && setColors(cfg.brand)

    if (client.is.ios === true) {
      // needed for iOS button active state
      document.body.addEventListener('touchstart', noop)
    }

    window.addEventListener('keydown', onKeyDownComposition, true)
  }
}