1 | import { setBrand } from './utils/colors.js'
|
2 | import { noop } from './utils/event.js'
|
3 | import { onKeyDownComposition } from './utils/key-composition.js'
|
4 | import { isSSR, fromSSR, client, iosCorrection } from './plugins/Platform.js'
|
5 |
|
6 | function getMobilePlatform (is) {
|
7 | if (is.ios === true) return 'ios'
|
8 | if (is.android === true) return 'android'
|
9 | }
|
10 |
|
11 | function getBodyClasses ({ is, has, within }, cfg) {
|
12 | const cls = [
|
13 | is.desktop === true ? 'desktop' : 'mobile',
|
14 | `${has.touch === false ? 'no-' : ''}touch`
|
15 | ]
|
16 |
|
17 | if (is.mobile === true) {
|
18 | const mobile = getMobilePlatform(is)
|
19 | mobile !== void 0 && cls.push('platform-' + mobile)
|
20 | }
|
21 |
|
22 | if (is.nativeMobile === true) {
|
23 | const type = is.nativeMobileWrapper
|
24 |
|
25 | cls.push(type)
|
26 | cls.push('native-mobile')
|
27 |
|
28 | if (
|
29 | is.ios === true &&
|
30 | (cfg[type] === void 0 || cfg[type].iosStatusBarPadding !== false)
|
31 | ) {
|
32 | cls.push('q-ios-padding')
|
33 | }
|
34 | }
|
35 | else if (is.electron === true) {
|
36 | cls.push('electron')
|
37 | }
|
38 | else if (is.bex === true) {
|
39 | cls.push('bex')
|
40 | }
|
41 |
|
42 | within.iframe === true && cls.push('within-iframe')
|
43 |
|
44 | return cls
|
45 | }
|
46 |
|
47 |
|
48 | function clientUpdate () {
|
49 | const classes = document.body.className
|
50 | let newCls = classes
|
51 |
|
52 | if (iosCorrection !== void 0) {
|
53 | newCls = newCls.replace('desktop', 'platform-ios mobile')
|
54 | }
|
55 |
|
56 | if (client.has.touch === true) {
|
57 | newCls = newCls.replace('no-touch', 'touch')
|
58 | }
|
59 |
|
60 | if (client.within.iframe === true) {
|
61 | newCls += ' within-iframe'
|
62 | }
|
63 |
|
64 | if (classes !== newCls) {
|
65 | document.body.className = newCls
|
66 | }
|
67 | }
|
68 |
|
69 | function setColors (brand) {
|
70 | for (let color in brand) {
|
71 | setBrand(color, brand[color])
|
72 | }
|
73 | }
|
74 |
|
75 | export default {
|
76 | install (queues, cfg) {
|
77 | if (isSSR === true) {
|
78 | queues.server.push((q, ctx) => {
|
79 | const
|
80 | cls = getBodyClasses(q.platform, cfg),
|
81 | fn = ctx.ssr.setBodyClasses
|
82 |
|
83 | if (cfg.screen !== void 0 && cfg.screen.bodyClass === true) {
|
84 | cls.push('screen--xs')
|
85 | }
|
86 |
|
87 | if (typeof fn === 'function') {
|
88 | fn(cls)
|
89 | }
|
90 | else {
|
91 | ctx.ssr.Q_BODY_CLASSES = cls.join(' ')
|
92 | }
|
93 | })
|
94 |
|
95 | return
|
96 | }
|
97 |
|
98 | if (fromSSR === true) {
|
99 | clientUpdate()
|
100 | }
|
101 | else {
|
102 | const cls = getBodyClasses(client, cfg)
|
103 |
|
104 | if (client.is.ie === true && client.is.versionNumber === 11) {
|
105 | cls.forEach(c => document.body.classList.add(c))
|
106 | }
|
107 | else {
|
108 | document.body.classList.add.apply(document.body.classList, cls)
|
109 | }
|
110 | }
|
111 |
|
112 | cfg.brand !== void 0 && setColors(cfg.brand)
|
113 |
|
114 | if (client.is.ios === true) {
|
115 |
|
116 | document.body.addEventListener('touchstart', noop)
|
117 | }
|
118 |
|
119 | window.addEventListener('keydown', onKeyDownComposition, true)
|
120 | }
|
121 | }
|