ionic-framework/core/src/global/ionic-global.ts at d29ce36f91218bb3f2dde5c4c4b786623fc78a4c · ionic-team/ionic-framework · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
import { Build, getMode, setMode, getElement } from '@stencil/core';
import { printIonWarning } from '@utils/logging';
import { applyGlobalTheme, getCustomTheme } from '@utils/theme';

import type { IonicConfig, Mode, Theme } from '../interface';
import { defaultTheme as baseTheme } from '../themes/base/default.tokens';
import type { BaseTheme } from '../themes/themes.interfaces';
import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
import { isPlatform, setupPlatforms } from '../utils/platform';

import { config, configFromSession, configFromURL, saveConfig } from './config';

let defaultMode: Mode;
let defaultTheme: Theme = 'md';

const isModeSupported = (elmMode: string) => ['ios', 'md'].includes(elmMode);

const isThemeSupported = (theme: string) => ['ios', 'md', 'ionic'].includes(theme);

const isIonicElement = (elm: HTMLElement) => elm.tagName?.startsWith('ION-');

/**
 * Returns the mode value of the element reference or the closest
 * parent with a valid mode. If no mode is set, then fallback
 * to the default mode.
 * @param ref The element reference to look up the mode for.
 * @returns The mode value for the element reference.
 */
export const getIonMode = (ref?: any): Mode => {
  return ref?.mode || (getElement(ref).closest('[mode]')?.getAttribute('mode') as Mode) || defaultMode;
};

/**
 * Returns the theme value of the element reference or the closest
 * parent with a valid theme.
 *
 * @param ref The element reference to look up the theme for.
 * @returns The theme value for the element reference, defaults to
 * the default theme if it cannot be determined.
 */
export const getIonTheme = (ref?: any): Theme => {
  const theme: Theme = ref && getMode<Theme>(ref);
  if (theme) {
    return theme;
  }

  /**
   * If the theme cannot be detected, then fallback to using
   * the `mode` attribute to determine the style sheets to use.
   */
  const el = getElement(ref);
  const mode = ref?.mode ?? (el.closest('[mode]')?.getAttribute('mode') as Mode);

  if (mode) {
    return mode;
  }

  /**
   * If a mode is not detected, then fallback to using the
   * default theme.
   */
  return defaultTheme;
};

export const rIC = (callback: () => void) => {
  if ('requestIdleCallback' in window) {
    (window as any).requestIdleCallback(callback);
  } else {
    setTimeout(callback, 32);
  }
};

export const needInputShims = () => {
  /**
   * iOS always needs input shims
   */
  const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
  if (needsShimsIOS) {
    return true;
  }

  /**
   * Android only needs input shims when running
   * in the browser and only if the browser is using the
   * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
   */
  const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
  if (isAndroidMobileWeb) {
    return true;
  }

  return false;
};

export const initialize = (userConfig: IonicConfig = {}) => {
  if (typeof (window as any) === 'undefined') {
    return;
  }

  const doc = window.document;
  const win = window;
  const Ionic = ((win as any).Ionic = (win as any).Ionic || {});

  // create the Ionic.config from raw config object (if it exists)
  // and convert Ionic.config into a ConfigApi that has a get() fn
  const configObj = {
    ...configFromSession(win),
    persistConfig: false,
    ...Ionic.config,
    ...configFromURL(win),
    ...userConfig,
  };

  config.reset(configObj);
  if (config.getBoolean('persistConfig')) {
    saveConfig(win, configObj);
  }

  // Setup platforms
  setupPlatforms(win);

  Ionic.config = config;

  /**
   * Check if the mode was set as an attribute on <html>
   * which could have been set by the user, or by pre-rendering
   * otherwise get the mode via config settings, and fallback to md.
   */
  Ionic.mode = defaultMode = config.get(
    'mode',
    doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md')
  );

  /**
   * Check if the theme was set as an attribute on <html>
   * which could have been set by the user, or by pre-rendering
   * otherwise get the theme via config settings, and fallback to md.
   */

  Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || defaultMode);

  config.set('mode', defaultMode);
  doc.documentElement.setAttribute('mode', defaultMode);
  doc.documentElement.classList.add(defaultMode);

  config.set('theme', defaultTheme);
  doc.documentElement.setAttribute('theme', defaultTheme);
  doc.documentElement.classList.add(defaultTheme);

  const customTheme: BaseTheme | undefined = getCustomTheme(configObj.customTheme, defaultMode);

  // Apply base theme, or combine with custom theme if provided
  if (customTheme) {
    const combinedTheme = applyGlobalTheme(baseTheme, customTheme);
    config.set('customTheme', combinedTheme);
  } else {
    applyGlobalTheme(baseTheme);
    config.set('customTheme', baseTheme);
  }

  if (config.getBoolean('_testing')) {
    config.set('animated', false);
  }

  setMode((elm: any) => {
    /**
     * Iterate over all the element nodes, to both validate and
     * set the "mode" that is used for determining the styles to
     * apply to the element.
     *
     * setMode refers to Stencil's internal metadata for "mode",
     * which is used to set the correct styleUrl for the component.
     *
     * If the "theme" attribute or property is set, then use it
     * to determine the style sheets to use.
     *
     * If the "mode" attribute or property is set, then use it
     * to determine the style sheets to use. This is fallback
     * behavior for applications that are not setting the "theme".
     */
    while (elm) {
      const theme = elm.getAttribute('theme');

      if (theme) {
        if (isThemeSupported(theme)) {
          return theme;
        } else if (isIonicElement(elm)) {
          printIonWarning(`Invalid theme: "${theme}". Supported themes include: "ios" or "md".`);
        }
      }

      /**
       * If a theme is not detected, then fallback to using the
       * `mode` attribute to determine the style sheets to use.
       */
      const elmMode = elm.getAttribute('mode');

      if (elmMode) {
        if (isModeSupported(elmMode)) {
          return elmMode;
        } else if (isIonicElement(elm)) {
          printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
        }
      }

      elm = elm.parentElement;
    }
    return defaultTheme;
  });

  // `IonApp` code
  // ----------------------------------------------

  if (Build.isBrowser) {
    rIC(async () => {
      const isHybrid = isPlatform(window, 'hybrid');
      if (!config.getBoolean('_testing')) {
        import('../utils/tap-click').then((module) => module.startTapClick(config));
      }
      if (config.getBoolean('statusTap', isHybrid)) {
        import('../utils/status-tap').then((module) => module.startStatusTap());
      }
      if (config.getBoolean('inputShims', needInputShims())) {
        /**
         * needInputShims() ensures that only iOS and Android
         * platforms proceed into this block.
         */
        const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
        import('../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
      }
      const hardwareBackButtonModule = await import('../utils/hardware-back-button');
      const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
      if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
        hardwareBackButtonModule.startHardwareBackButton();
      } else {
        /**
         * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
         * then the close watcher will not be used.
         */
        if (shouldUseCloseWatcher()) {
          printIonWarning(
            '[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
          );
        }

        hardwareBackButtonModule.blockHardwareBackButton();
      }
      if (typeof (window as any) !== 'undefined') {
        import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
      }
      import('../utils/focus-visible').then((module) => module.getOrInitFocusVisibleUtility());
    });
  }
};

export default initialize;