import { animate , group , query , style , transition , trigger } from "@angular/animations" ; import { BrowserApi } from "../browser/browserApi" ; const queryShown = query ( ":enter, :leave" , [ style ( { position : "fixed" , width : "100%" , height : "100%" } ) ] , { optional : true , } ) ; const queryChildRoute = query ( "router-outlet ~ *" , [ style ( { } ) , animate ( 1 , style ( { } ) ) ] , { optional : true , } ) ; const speed = "0.4s" ; export function queryTranslate ( direction , axis , from , to , zIndex = 1000 ) { return query ( ":" + direction , [ style ( { transform : "translate" + axis + "(" + from + "%)" , zIndex : zIndex , boxShadow : "0 3px 2px -2px gray" , } ) , animate ( speed + " ease-in-out" , style ( { transform : "translate" + axis + "(" + to + "%)" } ) ) , ] , { optional : true } ) ; } export function queryTranslateX ( direction , from , to , zIndex = 1000 ) { return queryTranslate ( direction , "X" , from , to , zIndex ) ; } export function queryTranslateY ( direction , from , to , zIndex = 1000 ) { return queryTranslate ( direction , "Y" , from , to , zIndex ) ; } const inSlideLeft = [ queryShown , group ( [ queryTranslateX ( "enter" , 100 , 0 ) , queryTranslateX ( "leave" , 0 , - 100 ) , queryChildRoute ] ) , ] ; const outSlideRight = [ queryShown , group ( [ queryTranslateX ( "enter" , - 100 , 0 ) , queryTranslateX ( "leave" , 0 , 100 ) ] ) , ] ; const inSlideUp = [ queryShown , group ( [ queryTranslateY ( "enter" , 100 , 0 , 1010 ) , queryTranslateY ( "leave" , 0 , 0 ) , queryChildRoute ] ) , ] ; const outSlideDown = [ queryShown , group ( [ queryTranslateY ( "enter" , 0 , 0 ) , queryTranslateY ( "leave" , 0 , 100 , 1010 ) ] ) , ] ; const inSlideDown = [ queryShown , group ( [ queryTranslateY ( "enter" , - 100 , 0 , 1010 ) , queryTranslateY ( "leave" , 0 , 0 ) , queryChildRoute ] ) , ] ; const outSlideUp = [ queryShown , group ( [ queryTranslateY ( "enter" , 0 , 0 ) , queryTranslateY ( "leave" , 0 , - 100 , 1010 ) ] ) , ] ; export function tabsToCiphers ( fromState , toState ) { if ( fromState == null || toState === null || toState . indexOf ( "ciphers_" ) === - 1 ) { return false ; } return ( ( fromState . indexOf ( "ciphers_" ) === 0 && fromState . indexOf ( "ciphers_direction=b" ) === - 1 ) || fromState === "tabs" ) ; } export function ciphersToTabs ( fromState , toState ) { if ( fromState == null || toState === null || fromState . indexOf ( "ciphers_" ) === - 1 ) { return false ; } return toState . indexOf ( "ciphers_direction=b" ) === 0 || toState === "tabs" ; } export function ciphersToView ( fromState , toState ) { if ( fromState == null || toState === null ) { return false ; } return ( fromState . indexOf ( "ciphers_" ) === 0 && ( toState === "view-cipher" || toState === "add-cipher" || toState === "clone-cipher" ) ) ; } export function viewToCiphers ( fromState , toState ) { if ( fromState == null || toState === null ) { return false ; } return ( ( fromState === "view-cipher" || fromState === "add-cipher" || fromState === "clone-cipher" ) && toState . indexOf ( "ciphers_" ) === 0 ) ; } export const routerTransition = trigger ( "routerTransition" , [ transition ( "void => home" , inSlideLeft ) , transition ( "void => tabs" , inSlideLeft ) , transition ( "home => environment, home => login, home => register" , inSlideUp ) , transition ( "login => home" , outSlideDown ) , transition ( "login => hint" , inSlideUp ) , transition ( "login => tabs, login => 2fa" , inSlideLeft ) , transition ( "hint => login, register => home, environment => home" , outSlideDown ) , transition ( "2fa => login" , outSlideRight ) , transition ( "2fa => 2fa-options" , inSlideUp ) , transition ( "2fa-options => 2fa" , outSlideDown ) , transition ( "2fa => tabs" , inSlideLeft ) , transition ( tabsToCiphers , inSlideLeft ) , transition ( ciphersToTabs , outSlideRight ) , transition ( ciphersToView , inSlideUp ) , transition ( viewToCiphers , outSlideDown ) , transition ( "tabs => view-cipher" , inSlideUp ) , transition ( "view-cipher => tabs" , outSlideDown ) , transition ( "view-cipher => edit-cipher, view-cipher => cipher-password-history" , inSlideUp ) , transition ( "edit-cipher => view-cipher, cipher-password-history => view-cipher, edit-cipher => tabs" , outSlideDown ) , transition ( "view-cipher => clone-cipher" , inSlideUp ) , transition ( "clone-cipher => view-cipher, clone-cipher => tabs" , outSlideDown ) , transition ( "view-cipher => share-cipher" , inSlideUp ) , transition ( "share-cipher => view-cipher" , outSlideDown ) , transition ( "tabs => add-cipher" , inSlideUp ) , transition ( "add-cipher => tabs" , outSlideDown ) , transition ( "generator => generator-history, tabs => generator-history" , inSlideLeft ) , transition ( "generator-history => generator, generator-history => tabs" , outSlideRight ) , transition ( "add-cipher => generator, edit-cipher => generator, clone-cipher => generator" , inSlideUp ) , transition ( "generator => add-cipher, generator => edit-cipher, generator => clone-cipher" , outSlideDown ) , transition ( "edit-cipher => attachments, edit-cipher => collections" , inSlideLeft ) , transition ( "attachments => edit-cipher, collections => edit-cipher" , outSlideRight ) , transition ( "clone-cipher => attachments, clone-cipher => collections" , inSlideLeft ) , transition ( "attachments => clone-cipher, collections => clone-cipher" , outSlideRight ) , transition ( "tabs => export" , inSlideLeft ) , transition ( "export => tabs" , outSlideRight ) , transition ( "tabs => folders" , inSlideLeft ) , transition ( "folders => tabs" , outSlideRight ) , transition ( "folders => edit-folder, folders => add-folder" , inSlideUp ) , transition ( "edit-folder => folders, add-folder => folders" , outSlideDown ) , transition ( "tabs => sync" , inSlideLeft ) , transition ( "sync => tabs" , outSlideRight ) , transition ( "tabs => options" , inSlideLeft ) , transition ( "options => tabs" , outSlideRight ) , transition ( "tabs => premium" , inSlideLeft ) , transition ( "premium => tabs" , outSlideRight ) , transition ( "tabs => lock" , inSlideDown ) , transition ( "tabs => send-type" , inSlideLeft ) , transition ( "send-type => tabs" , outSlideRight ) , transition ( "tabs => add-send, send-type => add-send" , inSlideUp ) , transition ( "add-send => tabs, add-send => send-type" , outSlideDown ) , transition ( "tabs => edit-send, send-type => edit-send" , inSlideUp ) , transition ( "edit-send => tabs, edit-send => send-type" , outSlideDown ) , ] ) ;