2025-11-26 10:19:31 -08:00
|
|
|
/**
|
|
|
|
|
* This script is loaded in testing environments to set up the
|
|
|
|
|
* document based on URL parameters.
|
|
|
|
|
*
|
|
|
|
|
* Test pages (e.g., `chip/test/basic/index.html`) are set to use
|
|
|
|
|
* URL query parameters.
|
|
|
|
|
*
|
|
|
|
|
* Playwright test environments (e.g., `chip/test/basic/chip.e2e.ts`)
|
|
|
|
|
* are set based on whether `setContent` or `goto` has been used:
|
|
|
|
|
* - `setContent` uses URL hash parameters. Tests will break if
|
|
|
|
|
* query parameters are used.
|
|
|
|
|
* - `goto` uses URL query parameters.
|
|
|
|
|
*
|
|
|
|
|
* The following URL parameters are supported:
|
|
|
|
|
* - `rtl`: Set to `true` to enable right-to-left directionality.
|
|
|
|
|
* - `ionic:_testing`: Set to `true` to identify testing environments.
|
2025-12-01 10:33:39 -08:00
|
|
|
* - `ionic:theme`: Set to `ionic`, `ios`, or `md` to load a specific
|
|
|
|
|
* theme. Defaults to `md`.
|
2025-11-26 10:19:31 -08:00
|
|
|
* - `palette`: Set to `light`, `dark`, `high-contrast`, or
|
|
|
|
|
* `high-contrast-dark` to load a specific palette. Defaults to `light`.
|
|
|
|
|
*/
|
2019-01-08 15:06:23 -06:00
|
|
|
|
2025-10-16 10:07:57 -04:00
|
|
|
const DEFAULT_THEME = 'md';
|
2026-01-16 13:20:08 -08:00
|
|
|
const DEFAULT_PALETTE = 'light';
|
2019-01-08 15:06:23 -06:00
|
|
|
|
|
|
|
|
(function() {
|
2025-12-01 10:33:39 -08:00
|
|
|
|
2025-11-26 10:19:31 -08:00
|
|
|
/**
|
|
|
|
|
* The `rtl` param is used to set the directionality of the
|
|
|
|
|
* document. This can be `true` or `false`.
|
|
|
|
|
*/
|
|
|
|
|
const isRTL = window.location.search.indexOf('rtl=true') > -1 || window.location.hash.indexOf('rtl=true') > -1;
|
2019-01-08 15:06:23 -06:00
|
|
|
|
2025-11-26 10:19:31 -08:00
|
|
|
if (isRTL) {
|
2019-01-08 15:06:23 -06:00
|
|
|
document.documentElement.setAttribute('dir', 'rtl');
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-26 10:19:31 -08:00
|
|
|
/**
|
|
|
|
|
* The `ionic:_testing` param is used to identify testing
|
|
|
|
|
* environments.
|
|
|
|
|
*/
|
|
|
|
|
const isTestEnv = window.location.search.indexOf('ionic:_testing=true') > -1 || window.location.hash.indexOf('ionic:_testing=true') > -1;
|
|
|
|
|
|
|
|
|
|
if (isTestEnv) {
|
2019-09-25 18:12:57 +02:00
|
|
|
const style = document.createElement('style');
|
|
|
|
|
style.innerHTML = `
|
2025-11-26 10:19:31 -08:00
|
|
|
* {
|
|
|
|
|
caret-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
`;
|
2019-09-25 18:12:57 +02:00
|
|
|
document.head.appendChild(style);
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-19 11:48:29 -07:00
|
|
|
/**
|
2025-12-01 10:33:39 -08:00
|
|
|
* The `theme` param is used to load a specific theme.
|
|
|
|
|
* This can be `ionic`, `ios`, or `md`. Default to `md` for tests.
|
|
|
|
|
*/
|
2025-10-16 10:07:57 -04:00
|
|
|
const themeQuery = window.location.search.match(/ionic:theme=([a-z0-9]+)/i);
|
2025-12-01 10:33:39 -08:00
|
|
|
const themeHash = window.location.hash.match(/ionic:theme=([a-z0-9]+)/i);
|
2024-08-27 08:42:46 +01:00
|
|
|
const themeAttr = document.documentElement.getAttribute('theme');
|
2025-12-01 10:33:39 -08:00
|
|
|
const themeName = themeQuery?.[1] || themeHash?.[1] || themeAttr || DEFAULT_THEME;
|
2024-08-27 08:42:46 +01:00
|
|
|
|
2025-10-16 10:07:57 -04:00
|
|
|
// TODO(): Remove this when the tokens are working for all components
|
|
|
|
|
// and the themes all use the same bundle
|
2024-08-27 08:42:46 +01:00
|
|
|
if ((themeQuery && themeQuery[1] === 'ionic') || themeAttr === 'ionic') {
|
|
|
|
|
const ionicThemeLinkTag = document.querySelector('link[href*="css/ionic/bundle.ionic.css"]');
|
|
|
|
|
|
|
|
|
|
if (!ionicThemeLinkTag) {
|
|
|
|
|
const linkTag = document.createElement('link');
|
|
|
|
|
linkTag.setAttribute('rel', 'stylesheet');
|
|
|
|
|
linkTag.setAttribute('type', 'text/css');
|
|
|
|
|
linkTag.setAttribute('href', '/css/ionic/bundle.ionic.css');
|
|
|
|
|
document.head.appendChild(linkTag);
|
|
|
|
|
}
|
2024-10-30 09:48:32 -04:00
|
|
|
|
|
|
|
|
const defaultThemeLinkTag = document.querySelector('link[href*="css/ionic.bundle.css"]');
|
|
|
|
|
if (defaultThemeLinkTag) {
|
|
|
|
|
defaultThemeLinkTag.remove();
|
|
|
|
|
}
|
2024-08-27 08:42:46 +01:00
|
|
|
}
|
|
|
|
|
|
2025-10-16 10:07:57 -04:00
|
|
|
/**
|
2025-11-26 10:19:31 -08:00
|
|
|
* The `palette` param is used to load a specific palette
|
|
|
|
|
* for the theme.
|
|
|
|
|
* The dark class will load the dark palette automatically
|
|
|
|
|
* if no palette is specified through the URL.
|
|
|
|
|
*
|
|
|
|
|
* Values can be `light`, `dark`, `high-contrast`,
|
2025-10-16 10:07:57 -04:00
|
|
|
* or `high-contrast-dark`. Default to `light` for tests.
|
|
|
|
|
*/
|
2025-12-08 12:23:53 -08:00
|
|
|
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
|
2026-01-16 13:20:08 -08:00
|
|
|
|
|
|
|
|
const configDarkMode = window.Ionic?.config?.customTheme?.palette?.dark?.enabled === 'always' ? 'dark' : null;
|
|
|
|
|
const configHighContrastMode = window.Ionic?.config?.customTheme?.palette?.highContrast?.enabled === 'always' ? 'high-contrast' : null;
|
|
|
|
|
const configHighContrastDarkMode = window.Ionic?.config?.customTheme?.palette?.highContrastDark?.enabled === 'always' ? 'high-contrast-dark' : null;
|
|
|
|
|
/**
|
|
|
|
|
* Ensure window.Ionic.config is defined before importing 'testing/scripts'
|
|
|
|
|
* in the test HTML to properly initialize the palette configuration below.
|
|
|
|
|
*
|
|
|
|
|
* Example:
|
|
|
|
|
* <script>
|
|
|
|
|
* window.Ionic = { config: { customTheme: { palette: { ... } } } };
|
|
|
|
|
* </script>
|
|
|
|
|
* <script src="testing/scripts.js"></script>
|
|
|
|
|
*/
|
|
|
|
|
const configPalette = configDarkMode || configHighContrastMode || configHighContrastDarkMode;
|
2025-12-08 12:23:53 -08:00
|
|
|
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
|
|
|
|
|
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
|
2025-11-26 10:19:31 -08:00
|
|
|
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
|
2025-12-08 12:23:53 -08:00
|
|
|
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
|
|
|
|
|
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
|
2026-01-16 13:20:08 -08:00
|
|
|
const paletteClass = highContrastDarkClass || highContrastClass || darkClass;
|
2025-11-26 10:19:31 -08:00
|
|
|
|
2026-01-16 13:20:08 -08:00
|
|
|
let paletteName = configPalette || paletteQuery?.[1] || paletteHash?.[1] || paletteClass || DEFAULT_PALETTE;
|
2025-12-08 12:23:53 -08:00
|
|
|
|
|
|
|
|
if (!validPalettes.includes(paletteName)) {
|
|
|
|
|
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
|
2026-01-16 13:20:08 -08:00
|
|
|
paletteName = DEFAULT_PALETTE;
|
2025-12-08 12:23:53 -08:00
|
|
|
}
|
2025-10-16 10:07:57 -04:00
|
|
|
|
|
|
|
|
// Load theme tokens if the theme is valid
|
|
|
|
|
const validThemes = ['ionic', 'ios', 'md'];
|
|
|
|
|
if (themeName && validThemes.includes(themeName)) {
|
|
|
|
|
loadThemeTokens(themeName, paletteName);
|
|
|
|
|
} else if(themeName) {
|
|
|
|
|
console.warn(
|
|
|
|
|
`Unsupported theme "${themeName}". Supported themes are: ${validThemes.join(', ')}. Defaulting to ${DEFAULT_THEME}.`
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function loadThemeTokens(themeName, paletteName) {
|
|
|
|
|
try {
|
2026-02-19 13:18:26 -08:00
|
|
|
// Store existing theme set from the app initialization
|
|
|
|
|
const customTheme = window.Ionic?.config?.customTheme;
|
2025-10-16 10:07:57 -04:00
|
|
|
// Load the default tokens for the theme
|
|
|
|
|
const defaultTokens = await import(`/themes/${themeName}/default.tokens.js`);
|
2026-02-19 13:18:26 -08:00
|
|
|
let theme = defaultTokens.defaultTheme;
|
|
|
|
|
|
|
|
|
|
// Merge with existing theme to preserve any customizations
|
|
|
|
|
if (customTheme) {
|
|
|
|
|
theme = {
|
|
|
|
|
...theme,
|
|
|
|
|
...customTheme,
|
|
|
|
|
palette: {
|
|
|
|
|
...theme.palette,
|
|
|
|
|
...customTheme.palette,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
2025-10-16 10:07:57 -04:00
|
|
|
|
|
|
|
|
// If a specific palette is requested, modify the palette structure
|
|
|
|
|
// to set the enabled property to 'always'
|
2026-01-16 13:20:08 -08:00
|
|
|
// TODO(FW-4004): Implement dark palette
|
2025-10-16 10:07:57 -04:00
|
|
|
if (paletteName === 'dark' && theme.palette?.dark) {
|
|
|
|
|
theme.palette.dark.enabled = 'always';
|
2026-01-16 13:20:08 -08:00
|
|
|
// TODO(FW-4005): Implement high contrast palette
|
|
|
|
|
} else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
|
|
|
|
|
theme.palette.highContrast.enabled = 'always';
|
|
|
|
|
// TODO(FW-4005): Implement high contrast dark palette
|
|
|
|
|
} else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
|
|
|
|
|
theme.palette.highContrastDark.enabled = 'always';
|
2025-10-16 10:07:57 -04:00
|
|
|
}
|
|
|
|
|
|
2026-02-19 13:18:26 -08:00
|
|
|
if (window.Ionic?.config?.set) {
|
|
|
|
|
/**
|
|
|
|
|
* New Page Load after Initial App Load or Playwright Test:
|
|
|
|
|
*
|
|
|
|
|
* If the Config instance exists, we must use the
|
|
|
|
|
* `set()` method. This ensures the internal private Map inside
|
|
|
|
|
* the `Config` class is updated with the loaded theme tokens.
|
|
|
|
|
* Without this, components would read 'undefined' or 'base'
|
|
|
|
|
* values from the stale Map when trying to access them through
|
|
|
|
|
* methods like `config.get()`.
|
|
|
|
|
*/
|
|
|
|
|
window.Ionic.config.set('customTheme', theme);
|
|
|
|
|
} else {
|
|
|
|
|
/**
|
|
|
|
|
* App Initialization or Browser Refresh:
|
|
|
|
|
*
|
|
|
|
|
* If the Config instance doesn't exist yet,
|
|
|
|
|
* we attach the theme to the global Ionic object. The `initialize()`
|
|
|
|
|
* method in `ionic-global.ts` will later merge this into the new
|
|
|
|
|
* `Config` instance via `config.reset()`.
|
|
|
|
|
*/
|
|
|
|
|
window.Ionic = window.Ionic || {};
|
|
|
|
|
window.Ionic.config = window.Ionic.config || {};
|
|
|
|
|
window.Ionic.config.customTheme = theme;
|
|
|
|
|
}
|
2025-10-16 10:07:57 -04:00
|
|
|
|
2026-02-19 13:18:26 -08:00
|
|
|
/**
|
|
|
|
|
* Re-applying the global theme is critical for Playwright tests.
|
|
|
|
|
* Even if the config is set, the CSS variables for the specific theme
|
|
|
|
|
* (e.g., md or ios) must be force-injected into the document head to
|
|
|
|
|
* ensure visual assertions pass correctly.
|
|
|
|
|
*/
|
|
|
|
|
if (window.Ionic?.config?.get && window.Ionic?.config?.set) {
|
2025-10-16 10:07:57 -04:00
|
|
|
const themeModule = await import('/themes/utils/theme.js');
|
|
|
|
|
themeModule.applyGlobalTheme(theme);
|
2026-02-19 13:18:26 -08:00
|
|
|
themeModule.applyComponentsTheme(theme);
|
2025-10-16 10:07:57 -04:00
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error(`Failed to load theme tokens for ${themeName}:`, error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-18 14:50:56 -05:00
|
|
|
window.Ionic = window.Ionic || {};
|
|
|
|
|
window.Ionic.config = window.Ionic.config || {};
|
|
|
|
|
|
2022-04-04 13:34:22 -04:00
|
|
|
window.addEventListener('appload', () => {
|
|
|
|
|
window.testAppLoaded = true;
|
|
|
|
|
})
|
2022-03-31 11:23:21 -04:00
|
|
|
})();
|
