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.
|
|
|
|
|
* - `ionic:mode`: Set to `ios` or `md` to load a specific mode.
|
|
|
|
|
* Defaults to `md`.
|
|
|
|
|
* - `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
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
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-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`,
|
|
|
|
|
* or `high-contrast-dark`. Default to `light` for tests.
|
2024-04-19 11:48:29 -07:00
|
|
|
*/
|
2025-11-26 10:19:31 -08:00
|
|
|
const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
|
|
|
|
|
const paletteHash = window.location.hash.match(/palette=([a-z]+)/);
|
|
|
|
|
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
|
|
|
|
|
|
|
|
|
|
const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
|
|
|
|
|
|
|
|
|
|
if (paletteName !== 'light') {
|
2024-04-19 11:48:29 -07:00
|
|
|
const linkTag = document.createElement('link');
|
|
|
|
|
linkTag.setAttribute('rel', 'stylesheet');
|
|
|
|
|
linkTag.setAttribute('type', 'text/css');
|
2025-11-26 10:19:31 -08:00
|
|
|
linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
|
2024-04-19 11:48:29 -07:00
|
|
|
document.head.appendChild(linkTag);
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-27 08:42:46 +01:00
|
|
|
/**
|
|
|
|
|
* The `ionic` theme uses a different stylesheet than the `iOS` and `md` themes.
|
|
|
|
|
* This is to ensure that the `ionic` theme is loaded when the `ionic:theme=ionic`
|
|
|
|
|
* or when the HTML tag has the `theme="ionic"` attribute. This is useful for
|
|
|
|
|
* the snapshot tests, where the `ionic` theme is not loaded by default.
|
|
|
|
|
*/
|
|
|
|
|
const themeQuery = window.location.search.match(/ionic:theme=([a-z]+)/);
|
|
|
|
|
const themeAttr = document.documentElement.getAttribute('theme');
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
2025-11-20 18:02:37 +00:00
|
|
|
const utilsBundleLinkTag = document.querySelector('link[href*="css/utils.bundle.css"]');
|
|
|
|
|
if (!utilsBundleLinkTag) {
|
|
|
|
|
const linkTag = document.createElement('link');
|
|
|
|
|
linkTag.setAttribute('rel', 'stylesheet');
|
|
|
|
|
linkTag.setAttribute('type', 'text/css');
|
|
|
|
|
linkTag.setAttribute('href', '/css/utils.bundle.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
|
|
|
}
|
|
|
|
|
|
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
|
|
|
})();
|
