mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
/**
|
|
* 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`.
|
|
*/
|
|
|
|
(function() {
|
|
|
|
/**
|
|
* 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) {
|
|
document.documentElement.setAttribute('dir', 'rtl');
|
|
}
|
|
|
|
/**
|
|
* 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) {
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
* {
|
|
caret-color: transparent !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
|
|
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 highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
|
|
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
|
|
|
|
let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
|
|
|
|
if (!validPalettes.includes(paletteName)) {
|
|
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
|
|
paletteName = 'light';
|
|
}
|
|
|
|
if (paletteName !== 'light') {
|
|
const linkTag = document.createElement('link');
|
|
linkTag.setAttribute('rel', 'stylesheet');
|
|
linkTag.setAttribute('type', 'text/css');
|
|
linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
|
|
document.head.appendChild(linkTag);
|
|
}
|
|
|
|
window.Ionic = window.Ionic || {};
|
|
window.Ionic.config = window.Ionic.config || {};
|
|
|
|
window.addEventListener('appload', () => {
|
|
window.testAppLoaded = true;
|
|
})
|
|
})();
|