license import { OnboardingCard } from '../src/elements/onboarding-card/onboarding-card.js' ; import { fire } from '../src/utils/fire.js' ; import { loadImages } from '../src/utils/load-images.js' ; hidden export async function startOnboardingProcess ( images ) { const { config } = window . PerceptionToolkit || { config : { root : '' } } ; const { root = '' } = config ; const onboarding = new OnboardingCard ( { polyfillPrefix : root } ) ; await onboarding . ready ; onboarding . mode = 'fade' ; const stepImages = await loadImages ( images ) ; for ( const stepImage of stepImages ) { stepImage . width = stepImage . naturalWidth * 0.5 ; stepImage . height = stepImage . naturalHeight * 0.5 ; if ( onboarding . width === 0 || onboarding . height === 0 ) { onboarding . width = stepImage . width ; onboarding . height = stepImage . height ; } onboarding . appendChild ( stepImage ) ; } document . body . appendChild ( onboarding ) ; } window . addEventListener ( 'keyup' , ( e ) => { const card = document . activeElement as OnboardingCard ; if ( card . tagName !== OnboardingCard . defaultTagName . toUpperCase ( ) ) { return ; } switch ( e . key ) { case ' ' : card . next ( ) ; break ; case 'Escape' : fire ( OnboardingCard . onboardingFinishedEvent , card ) ; break ; default : return ; } } ) ; window . addEventListener ( OnboardingCard . onboardingFinishedEvent , ( e ) => { const target = e . target as OnboardingCard ; const tagName = OnboardingCard . defaultTagName . toUpperCase ( ) ; if ( ! target || target . tagName !== tagName ) { return ; } target . remove ( ) ; document . body . focus ( ) ; } ) ; customElements . define ( OnboardingCard . defaultTagName , OnboardingCard ) ;