├── .editorconfig ├── .eslintrc ├── .github └── workflows │ ├── format.yml │ └── test.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── jest ├── jest.config.cjs ├── resolver.cjs ├── transform-client.cjs └── transform-ssr.cjs ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── src ├── index.tsx ├── motion.tsx ├── presence.tsx ├── primitives.ts └── types.ts ├── test ├── motion.test.tsx ├── presence.test.tsx ├── primitives.test.tsx ├── ssr.test.tsx ├── tsconfig.json └── waapi-polyfill.js ├── tsconfig.base.json ├── tsconfig.json ├── tsconfig.node.json └── tsup.config.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.{yml,yaml}] 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": ["@typescript-eslint", "no-only-tests", "eslint-comments"], 5 | "ignorePatterns": ["node_modules", "dist"], 6 | "parserOptions": { 7 | "project": ["./tsconfig.json", "./tsconfig.node.json", "./test/tsconfig.json"], 8 | "tsconfigRootDir": ".", 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | /* 13 | forgot to remove/implement 14 | */ 15 | "no-console": "warn", 16 | "no-debugger": "warn", 17 | "prefer-const": "warn", 18 | "require-await": "warn", 19 | "@typescript-eslint/no-unused-vars": [ 20 | "warn", 21 | { 22 | "argsIgnorePattern": "^_", 23 | "varsIgnorePattern": "^_", 24 | "caughtErrorsIgnorePattern": "^_" 25 | } 26 | ], 27 | "@typescript-eslint/no-unnecessary-boolean-literal-compare": "warn", 28 | "@typescript-eslint/no-unnecessary-condition": "warn", 29 | "@typescript-eslint/no-unnecessary-type-arguments": "warn", 30 | "@typescript-eslint/no-unnecessary-type-assertion": "warn", 31 | "@typescript-eslint/no-unnecessary-type-constraint": "warn", 32 | "@typescript-eslint/no-useless-empty-export": "warn", 33 | "@typescript-eslint/no-empty-function": "warn", 34 | "no-empty": "warn", 35 | "@typescript-eslint/no-unused-expressions": [ 36 | "warn", 37 | {"allowShortCircuit": true, "allowTernary": true} 38 | ], 39 | "eslint-comments/no-unused-disable": "warn", 40 | /* 41 | code style | readability 42 | */ 43 | "@typescript-eslint/explicit-function-return-type": [ 44 | "warn", 45 | { 46 | "allowExpressions": true, 47 | "allowTypedFunctionExpressions": true, 48 | "allowHigherOrderFunctions": true, 49 | "allowDirectConstAssertionInArrowFunctions": true, 50 | "allowConciseArrowFunctionExpressionsStartingWithVoid": true, 51 | "allowIIFEs": true 52 | } 53 | ], 54 | /* 55 | prevent unexpected behavior 56 | */ 57 | "@typescript-eslint/ban-types": "warn", 58 | "@typescript-eslint/switch-exhaustiveness-check": "warn", 59 | "no-fallthrough": ["warn", {"allowEmptyCase": true}], 60 | /* 61 | tests 62 | */ 63 | "no-only-tests/no-only-tests": "warn" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /.github/workflows/format.yml: -------------------------------------------------------------------------------- 1 | name: Format 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | 7 | jobs: 8 | format: 9 | runs-on: ubuntu-latest 10 | 11 | permissions: 12 | # Give the default GITHUB_TOKEN write permission to commit and push the 13 | # added or changed files to the repository. 14 | contents: write 15 | 16 | steps: 17 | - uses: actions/checkout@v4 18 | 19 | - uses: pnpm/action-setup@v4 20 | 21 | - name: Setup Node.js environment 22 | uses: actions/setup-node@v4 23 | with: 24 | node-version: 20 25 | cache: pnpm 26 | 27 | - name: Install dependencies 28 | run: | 29 | pnpm install --no-frozen-lockfile --ignore-scripts 30 | git restore . 31 | 32 | - name: Setup prettier cache 33 | uses: actions/cache@v4 34 | with: 35 | path: node_modules/.cache/prettier 36 | key: prettier-${{ github.sha }} 37 | restore-keys: | 38 | prettier- 39 | 40 | - name: Format 41 | run: pnpm run format 42 | 43 | - name: Add, Commit and Push 44 | uses: stefanzweifel/git-auto-commit-action@v5 45 | with: 46 | commit_message: "Format" 47 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Build and Test 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | concurrency: ${{ github.workflow }}-${{ github.ref }} 10 | 11 | jobs: 12 | build_test: 13 | name: Build and Test 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v4 17 | 18 | - uses: pnpm/action-setup@v4 19 | 20 | - name: Setup Node.js environment 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: 20 24 | cache: pnpm 25 | 26 | - name: Install dependencies 27 | run: pnpm install --no-frozen-lockfile --ignore-scripts 28 | 29 | - name: Build package 30 | run: pnpm run build 31 | 32 | - name: Test 33 | run: pnpm run test 34 | 35 | - name: Lint 36 | run: pnpm lint 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/settings.json 2 | 3 | dist 4 | node_modules 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | pnpm-lock.yaml 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "tabWidth": 4, 4 | "printWidth": 100, 5 | "semi": false, 6 | "singleQuote": false, 7 | "useTabs": true, 8 | "arrowParens": "avoid", 9 | "bracketSpacing": false, 10 | "endOfLine": "lf", 11 | "plugins": [], 12 | "overrides": [ 13 | { 14 | "files": ["*.yml", "*.yaml"], 15 | "options": { 16 | "tabWidth": 2 17 | } 18 | }, 19 | { 20 | "files": ["*.md"], 21 | "options": { 22 | "tabWidth": 2, 23 | "useTabs": false, 24 | "printWidth": 80 25 | } 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Damian Tarnawski, David Di Biase 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | solid-motionone 3 |

4 | 5 | # Solid MotionOne 6 | 7 | [![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/) 8 | [![npm](https://img.shields.io/npm/v/solid-motionone?style=for-the-badge)](https://www.npmjs.com/package/solid-motionone) 9 | [![downloads](https://img.shields.io/npm/dw/solid-motionone?color=blue&style=for-the-badge)](https://www.npmjs.com/package/solid-motionone) 10 | 11 | **A tiny, performant animation library for SolidJS. Powered by [Motion One](https://motion.dev/).** 12 | 13 | ## Introduction 14 | 15 | Motion One for Solid is a 5.8kb animation library for SolidJS. It takes advantage of Solid's excellent performance and simple declarative syntax. This package supplies springs, independent transforms, and hardware accelerated animations. 16 | 17 | ## Installation 18 | 19 | Motion One for Solid can be installed via npm: 20 | 21 | ```bash 22 | npm install solid-motionone 23 | # or 24 | pnpm add solid-motionone 25 | # or 26 | yarn add solid-motionone 27 | ``` 28 | 29 | ## Create an animation 30 | 31 | Import the `Motion` component and use it anywhere in your Solid components: 32 | 33 | ```tsx 34 | import {Motion} from "solid-motionone" 35 | 36 | function MyComponent() { 37 | return Hello world 38 | } 39 | ``` 40 | 41 | The `Motion` component can be used to create an animatable HTML or SVG element. By default, it will render a `div` element: 42 | 43 | ```tsx 44 | import {Motion} from "solid-motionone" 45 | 46 | function App() { 47 | return ( 48 | 52 | ) 53 | } 54 | ``` 55 | 56 | But any HTML or SVG element can be rendered, by defining it like this: `` 57 | 58 | Or like this: `` 59 | 60 | ## Transition options 61 | 62 | We can change the type of animation used by passing a `transition` prop. 63 | 64 | ```tsx 65 | 69 | ``` 70 | 71 | By default transition options are applied to all values, but we can also override on a per-value basis: 72 | 73 | ```tsx 74 | 81 | ``` 82 | 83 | Taking advantage of Solid's reactivity is just as easy. Simply provide any of the Motion properties as accessors to have them change reactively: 84 | 85 | ```tsx 86 | const [bg, setBg] = createSignal("red") 87 | 88 | return ( 89 | setBg("blue")} 91 | animate={{backgroundColor: bg()}} 92 | transition={{duration: 3}} 93 | > 94 | Click Me 95 | 96 | ) 97 | ``` 98 | 99 | The result is a button that begins red and upon being pressed transitions to blue. `animate` doesn't accept an accessor function. For reactive properties simply place signals in the object similar to using style prop. 100 | 101 | ## Keyframes 102 | 103 | Values can also be set as arrays, to define a series of keyframes. 104 | 105 | ```tsx 106 | 107 | ``` 108 | 109 | By default, keyframes are spaced evenly throughout `duration`, but this can be adjusted by providing progress values to `offset`: 110 | 111 | ```tsx 112 | 113 | ``` 114 | 115 | ## Enter animations 116 | 117 | Elements will automatically `animate` to the values defined in animate when they're created. 118 | 119 | This can be disabled by setting the `initial` prop to `false`. The styles defined in `animate` will be applied immediately when the element is first created. 120 | 121 | ```tsx 122 | 123 | ``` 124 | 125 | ## Exit animations 126 | 127 | When an element is removed with `` it can be animated out with the `Presence` component and the `exit` prop: 128 | 129 | ```tsx 130 | import {createSignal, Show} from "solid-js" 131 | import {Motion, Presence} from "solid-motionone" 132 | 133 | function App() { 134 | const [isShown, setShow] = createSignal(true) 135 | 136 | return ( 137 |
138 | 139 | 140 | 146 | 147 | 148 | 149 |
150 | ) 151 | } 152 | ``` 153 | 154 | `exit` can be provided a `transition` of its own, that override the component's `transition`: 155 | 156 | ```tsx 157 | 158 | 159 | 163 | 164 | 165 | ``` 166 | -------------------------------------------------------------------------------- /jest/jest.config.cjs: -------------------------------------------------------------------------------- 1 | const transform_client_path = require.resolve("./transform-client.cjs") 2 | const transform_ssr_path = require.resolve("./transform-ssr.cjs") 3 | const resolver_path = require.resolve("./resolver.cjs") 4 | 5 | /** @type {import('@jest/types').Config.InitialOptions} */ 6 | const common_config = { 7 | rootDir: "../", 8 | globals: {"ts-jest": {useESM: true}}, 9 | transformIgnorePatterns: ["node_modules/(?!solid-js.*|.*(?<=.[tj]sx))$"], 10 | /* 11 | to support NodeNext module imports 12 | https://stackoverflow.com/questions/73735202/typescript-jest-imports-with-js-extension-cause-error-cannot-find-module 13 | */ 14 | moduleNameMapper: { 15 | "(.+)\\.js": "$1", 16 | "(.+)\\.jsx": "$1", 17 | }, 18 | extensionsToTreatAsEsm: [".ts", ".tsx"], 19 | } 20 | 21 | /** @type {import('@jest/types').Config.InitialOptions} */ 22 | const client_config = { 23 | ...common_config, 24 | testEnvironment: "jsdom", 25 | testMatch: ["/test/**/*.test.(js|ts)?(x)"], 26 | testPathIgnorePatterns: ["/node_modules/", "ssr"], 27 | setupFilesAfterEnv: ["/test/waapi-polyfill.js"], 28 | /* uses a webpack style resolver, the default one has many issues. */ 29 | resolver: resolver_path, 30 | /* transform ts and tsx files */ 31 | transform: { 32 | "\\.[jt]sx$": transform_client_path, 33 | "\\.[jt]s$": transform_client_path, 34 | }, 35 | } 36 | 37 | /** @type {import('@jest/types').Config.InitialOptions} */ 38 | const server_config = { 39 | ...common_config, 40 | // avoid loading jsdom. 41 | testEnvironment: "node", 42 | testMatch: ["/test/ssr.test.(js|ts)?(x)"], 43 | /* transform ts and tsx files */ 44 | transform: { 45 | "\\.[jt]sx$": transform_ssr_path, 46 | "\\.[jt]s$": transform_ssr_path, 47 | }, 48 | } 49 | 50 | /** @type {import('@jest/types').Config.InitialOptions} */ 51 | module.exports = process.env["SSR"] ? server_config : client_config 52 | -------------------------------------------------------------------------------- /jest/resolver.cjs: -------------------------------------------------------------------------------- 1 | const {create, getDefaultConfig} = require("enhanced-resolve-jest") 2 | 3 | module.exports = create(jestConfig => { 4 | const baseConfig = getDefaultConfig(jestConfig) 5 | baseConfig.aliasFields = ["browser"] 6 | baseConfig.mainFields = ["browser", "main"] 7 | return baseConfig 8 | }) 9 | -------------------------------------------------------------------------------- /jest/transform-client.cjs: -------------------------------------------------------------------------------- 1 | const babelJest = require("babel-jest") 2 | 3 | module.exports = babelJest.default.createTransformer({ 4 | presets: [ 5 | "@babel/preset-env", 6 | "babel-preset-solid", 7 | ["@babel/preset-typescript", {onlyRemoveTypeImports: true}], 8 | ], 9 | }) 10 | -------------------------------------------------------------------------------- /jest/transform-ssr.cjs: -------------------------------------------------------------------------------- 1 | const babelJest = require("babel-jest") 2 | 3 | module.exports = babelJest.default.createTransformer({ 4 | presets: [ 5 | "@babel/preset-env", 6 | [ 7 | "babel-preset-solid", 8 | { 9 | generate: "ssr", 10 | hydratable: true, 11 | }, 12 | ], 13 | ["@babel/preset-typescript", {onlyRemoveTypeImports: true}], 14 | ], 15 | }) 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solid-motionone", 3 | "version": "1.0.4", 4 | "description": "A tiny, performant animation library for SolidJS", 5 | "license": "MIT", 6 | "author": "Damian Tarnawski ; David Di Biase ", 7 | "contributors": [ 8 | "Matt Perry ", 9 | "Phil " 10 | ], 11 | "private": false, 12 | "sideEffects": false, 13 | "scripts": { 14 | "prepublishOnly": "pnpm build", 15 | "build": "tsup", 16 | "test": "pnpm run test:client && pnpm run test:ssr", 17 | "test:client": "jest --config jest/jest.config.cjs", 18 | "test:ssr": "SSR=true jest --config jest/jest.config.cjs", 19 | "format": "prettier --cache -w .", 20 | "lint": "pnpm run lint:code & pnpm run lint:types", 21 | "lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{js,ts,tsx,jsx}", 22 | "lint:types": "tsc --noEmit" 23 | }, 24 | "type": "module", 25 | "files": [ 26 | "dist" 27 | ], 28 | "main": "./dist/index.cjs", 29 | "module": "./dist/index.js", 30 | "types": "./dist/index.d.ts", 31 | "browser": {}, 32 | "exports": { 33 | "solid": "./dist/index.jsx", 34 | "import": { 35 | "types": "./dist/index.d.ts", 36 | "default": "./dist/index.js" 37 | }, 38 | "require": { 39 | "types": "./dist/index.d.cts", 40 | "default": "./dist/index.cjs" 41 | } 42 | }, 43 | "typesVersions": {}, 44 | "dependencies": { 45 | "@motionone/dom": "^10.17.0", 46 | "@motionone/utils": "^10.17.0", 47 | "@solid-primitives/props": "^3.1.11", 48 | "@solid-primitives/refs": "^1.0.8", 49 | "@solid-primitives/transition-group": "^1.0.5", 50 | "csstype": "^3.1.3" 51 | }, 52 | "devDependencies": { 53 | "@babel/preset-env": "^7.23.7", 54 | "@babel/preset-typescript": "^7.23.3", 55 | "@jest/types": "^29.6.3", 56 | "@solidjs/testing-library": "^0.8.5", 57 | "@types/jest": "^29.5.11", 58 | "@types/node": "^20.10.6", 59 | "@typescript-eslint/eslint-plugin": "^6.17.0", 60 | "@typescript-eslint/parser": "^6.17.0", 61 | "babel-jest": "^29.7.0", 62 | "babel-preset-solid": "^1.8.6", 63 | "enhanced-resolve-jest": "^1.1.0", 64 | "eslint": "^8.56.0", 65 | "eslint-plugin-eslint-comments": "^3.2.0", 66 | "eslint-plugin-no-only-tests": "^3.1.0", 67 | "jest": "^29.7.0", 68 | "jest-environment-jsdom": "^29.7.0", 69 | "prettier": "^3.1.1", 70 | "solid-js": "^1.8.17", 71 | "tsup": "^8.0.1", 72 | "tsup-preset-solid": "^2.2.0", 73 | "typescript": "^5.3.3" 74 | }, 75 | "peerDependencies": { 76 | "solid-js": "^1.8.0" 77 | }, 78 | "packageManager": "pnpm@10.9.0" 79 | } 80 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | onlyBuiltDependencies: 2 | - esbuild 3 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./types.js" 2 | export {Motion} from "./motion.jsx" 3 | export {Presence, PresenceContext} from "./presence.jsx" 4 | export {createMotion, motion} from "./primitives.js" 5 | -------------------------------------------------------------------------------- /src/motion.tsx: -------------------------------------------------------------------------------- 1 | import {Dynamic} from "solid-js/web" 2 | import {useContext, splitProps, JSX, createContext} from "solid-js" 3 | import {combineStyle} from "@solid-primitives/props" 4 | import {MotionState} from "@motionone/dom" 5 | 6 | import type {MotionComponentProps, MotionProxy, MotionProxyComponent} from "./types.js" 7 | import {createAndBindMotionState} from "./primitives.js" 8 | import {PresenceContext} from "./presence.jsx" 9 | 10 | const OPTION_KEYS = [ 11 | "initial", 12 | "animate", 13 | "inView", 14 | "inViewOptions", 15 | "hover", 16 | "press", 17 | "variants", 18 | "transition", 19 | "exit", 20 | ] as const 21 | 22 | const ATTR_KEYS = ["tag"] as const 23 | 24 | export const ParentContext = createContext() 25 | 26 | /** @internal */ 27 | export const MotionComponent = ( 28 | props: MotionComponentProps & { 29 | tag?: string 30 | ref?: any 31 | style?: JSX.CSSProperties | string 32 | }, 33 | ): JSX.Element => { 34 | const [options, , attrs] = splitProps(props, OPTION_KEYS, ATTR_KEYS) 35 | 36 | const [state, style] = createAndBindMotionState( 37 | () => root, 38 | () => ({...options}), 39 | useContext(PresenceContext), 40 | useContext(ParentContext), 41 | ) 42 | 43 | let root!: Element 44 | return ( 45 | 46 | { 49 | root = el 50 | props.ref?.(el) 51 | }} 52 | component={props.tag || "div"} 53 | style={combineStyle(props.style, style)} 54 | /> 55 | 56 | ) 57 | } 58 | 59 | /** 60 | * Renders an animatable HTML or SVG element. 61 | * 62 | * @component 63 | * Animation props: 64 | * - `animate` a target of values to animate to. Accepts all the same values and keyframes as Motion One's [animate function](https://motion.dev/dom/animate). This prop is **reactive** – changing it will animate the transition element to the new state. 65 | * - `transition` for changing type of animation 66 | * - `initial` a target of values to animate from when the element is first rendered. 67 | * - `exit` a target of values to animate to when the element is removed. The element must be a direct child of the `` component. 68 | * 69 | * @example 70 | * ```tsx 71 | * 72 | * ``` 73 | * 74 | * Interaction animation props: 75 | * 76 | * - `inView` animation target for when the element is in view 77 | * - `hover` animate when hovered 78 | * - `press` animate when pressed 79 | * 80 | * @example 81 | * ```tsx 82 | * 83 | * ``` 84 | */ 85 | export const Motion = new Proxy(MotionComponent, { 86 | get: 87 | (_, tag: string): MotionProxyComponent => 88 | props => , 89 | }) as MotionProxy 90 | -------------------------------------------------------------------------------- /src/presence.tsx: -------------------------------------------------------------------------------- 1 | import {mountedStates} from "@motionone/dom" 2 | import {resolveFirst} from "@solid-primitives/refs" 3 | import {createSwitchTransition} from "@solid-primitives/transition-group" 4 | import { 5 | createContext, 6 | createSignal, 7 | batch, 8 | type FlowComponent, 9 | type JSX, 10 | type Accessor, 11 | } from "solid-js" 12 | 13 | export type PresenceContextState = { 14 | initial: boolean 15 | mount: Accessor 16 | } 17 | export const PresenceContext = createContext() 18 | 19 | /** 20 | * Perform exit/enter trantisions of children `` components. 21 | * 22 | * accepts props: 23 | * - `initial` – *(Defaults to `true`)* – If `false`, will disable the first animation on all child `Motion` elements the first time `Presence` is rendered. 24 | * - `exitBeforeEnter` – *(Defaults to `false`)* – If `true`, `Presence` will wait for the exiting element to finish animating out before animating in the next one. 25 | * 26 | * @example 27 | * ```tsx 28 | * 29 | * 30 | * 35 | * 36 | * 37 | * ``` 38 | */ 39 | export const Presence: FlowComponent<{ 40 | initial?: boolean 41 | exitBeforeEnter?: boolean 42 | }> = props => { 43 | const [mount, setMount] = createSignal(true), 44 | state = {initial: props.initial ?? true, mount}, 45 | render = ( 46 | 47 | { 48 | createSwitchTransition( 49 | resolveFirst(() => props.children), 50 | { 51 | appear: state.initial, 52 | mode: props.exitBeforeEnter ? "out-in" : "parallel", 53 | onExit(el, done) { 54 | batch(() => { 55 | setMount(false) 56 | mountedStates.get(el)?.getOptions()?.exit 57 | ? el.addEventListener("motioncomplete", done) 58 | : done() 59 | }) 60 | }, 61 | onEnter(_, done) { 62 | batch(() => { 63 | setMount(true) 64 | done() 65 | }) 66 | }, 67 | }, 68 | ) as any as JSX.Element 69 | } 70 | 71 | ) 72 | 73 | state.initial = true 74 | return render 75 | } 76 | -------------------------------------------------------------------------------- /src/primitives.ts: -------------------------------------------------------------------------------- 1 | import {createMotionState, createStyles, MotionState, style} from "@motionone/dom" 2 | import {Accessor, createEffect, onCleanup, useContext} from "solid-js" 3 | 4 | import {PresenceContext, PresenceContextState} from "./presence.jsx" 5 | import {Options} from "./types.js" 6 | 7 | /** @internal */ 8 | export function createAndBindMotionState( 9 | el: () => Element, 10 | options: Accessor, 11 | presence_state?: PresenceContextState, 12 | parent_state?: MotionState, 13 | ): [MotionState, ReturnType] { 14 | const state = createMotionState( 15 | presence_state?.initial === false ? {...options(), initial: false} : options(), 16 | parent_state, 17 | ) 18 | 19 | createEffect(() => { 20 | /* 21 | Motion components under should wait before animating in 22 | this is done with additional signal, because effects will still run immediately 23 | */ 24 | if (presence_state && !presence_state.mount()) return 25 | 26 | const el_ref = el(), 27 | unmount = state.mount(el_ref) 28 | 29 | createEffect(() => state.update(options())) 30 | 31 | onCleanup(() => { 32 | if (presence_state && options().exit) { 33 | state.setActive("exit", true) 34 | el_ref.addEventListener("motioncomplete", unmount) 35 | } else unmount() 36 | }) 37 | }) 38 | 39 | return [state, createStyles(state.getTarget())] as const 40 | } 41 | 42 | /** 43 | * createMotion provides MotionOne as a compact Solid primitive. 44 | * 45 | * @param target Target Element to animate. 46 | * @param options Options to effect the animation. 47 | * @param presenceState Optional PresenceContext override, defaults to current parent. 48 | * @returns Object to access MotionState 49 | */ 50 | export function createMotion( 51 | target: Element, 52 | options: Accessor | Options, 53 | presenceState?: PresenceContextState, 54 | ): MotionState { 55 | const [state, styles] = createAndBindMotionState( 56 | () => target, 57 | typeof options === "function" ? options : () => options, 58 | presenceState, 59 | ) 60 | 61 | for (const key in styles) { 62 | style.set(target, key, styles[key]) 63 | } 64 | 65 | return state 66 | } 67 | 68 | /** 69 | * motion is a Solid directive that makes binding to elements easier. 70 | * 71 | * @param el Target Element to bind to. 72 | * @param props Options to effect the animation. 73 | */ 74 | export function motion(el: Element, props: Accessor): void { 75 | createMotion(el, props, useContext(PresenceContext)) 76 | } 77 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import type * as motionone from "@motionone/dom" 2 | import type {PropertiesHyphen} from "csstype" 3 | import type {JSX, ParentProps} from "solid-js" 4 | 5 | export type {VariantDefinition, Options} from "@motionone/dom" 6 | 7 | export interface MotionEventHandlers { 8 | onMotionStart?: (event: motionone.MotionEvent) => void 9 | onMotionComplete?: (event: motionone.MotionEvent) => void 10 | onHoverStart?: (event: motionone.CustomPointerEvent) => void 11 | onHoverEnd?: (event: motionone.CustomPointerEvent) => void 12 | onPressStart?: (event: motionone.CustomPointerEvent) => void 13 | onPressEnd?: (event: motionone.CustomPointerEvent) => void 14 | onViewEnter?: (event: motionone.ViewEvent) => void 15 | onViewLeave?: (event: motionone.ViewEvent) => void 16 | } 17 | 18 | declare module "@motionone/dom" { 19 | /* 20 | Solid style attribute supports only kebab-case properties. 21 | While @motionone/dom supports both camelCase and kebab-case, 22 | but provides only camelCase properties in the types. 23 | */ 24 | interface CSSStyleDeclarationWithTransform 25 | extends Omit {} 26 | 27 | /* 28 | exit is missing in types in motionone core 29 | because it is only used in the Presence implementations 30 | */ 31 | interface Options { 32 | exit?: motionone.VariantDefinition 33 | } 34 | } 35 | 36 | export type MotionComponentProps = ParentProps 37 | 38 | export type MotionComponent = { 39 | // 40 | (props: JSX.IntrinsicElements["div"] & MotionComponentProps): JSX.Element 41 | // 42 | ( 43 | props: JSX.IntrinsicElements[T] & MotionComponentProps & {tag: T}, 44 | ): JSX.Element 45 | } 46 | 47 | export type MotionProxyComponent = (props: T & MotionComponentProps) => JSX.Element 48 | 49 | export type MotionProxy = MotionComponent & { 50 | // 51 | [K in keyof JSX.IntrinsicElements]: MotionProxyComponent 52 | } 53 | 54 | declare module "solid-js" { 55 | namespace JSX { 56 | interface Directives { 57 | motion: motionone.Options 58 | } 59 | } 60 | } 61 | 62 | // export only here so the `JSX` import won't be shaken off the tree: 63 | export type E = JSX.Element 64 | -------------------------------------------------------------------------------- /test/motion.test.tsx: -------------------------------------------------------------------------------- 1 | import {JSX, createRoot, createSignal} from "solid-js" 2 | import {screen, render, fireEvent} from "@solidjs/testing-library" 3 | import {Motion} from "../src/index.jsx" 4 | 5 | const duration = 0.001 6 | 7 | describe("Motion", () => { 8 | test("Renders element as Div by default to HTML", async () => { 9 | await render(() => ) 10 | const component = await screen.findByTestId("box") 11 | expect(component.tagName).toEqual(`DIV`) 12 | }) 13 | test("Renders element as proxy Motion.Tag to HTML", async () => { 14 | await render(() => ) 15 | const component = await screen.findByTestId("box") 16 | expect(component.tagName).toEqual(`SPAN`) 17 | }) 18 | test("Renders element as 'tag' prop to HTML", async () => { 19 | await render(() => ) 20 | const component = await screen.findByTestId("box") 21 | expect(component.tagName).toEqual(`LI`) 22 | }) 23 | test("renders children to HTML", async () => { 24 | await render(() => ( 25 | 26 | 27 | 28 | 29 | )) 30 | const component = await screen.findByTestId("box") 31 | expect(component.innerHTML).toEqual(``) 32 | }) 33 | 34 | test("Applies initial as style to DOM node", async () => { 35 | await render(() => ) 36 | const component = await screen.findByTestId("box") 37 | expect(component.style.opacity).toBe("0.5") 38 | expect(component.style.getPropertyValue("--motion-translateX")).toBe("100px") 39 | expect(component.style.transform).toBe("translateX(var(--motion-translateX))") 40 | }) 41 | 42 | test("Animation runs on mount if initial and animate differ", async () => { 43 | let ref!: HTMLDivElement 44 | await new Promise((resolve, reject) => { 45 | render(() => { 46 | return ( 47 | resolve()} 52 | transition={{duration}} 53 | /> 54 | ) 55 | }) 56 | setTimeout(() => reject(false), 200) 57 | }) 58 | expect(ref.style.opacity).toBe("0.8") 59 | }) 60 | 61 | test("Animation doesn't run on mount if initial and animate are the same", async () => { 62 | const element = await new Promise((resolve, reject) => { 63 | const Component = (): JSX.Element => { 64 | const animate = {opacity: 0.4} 65 | return ( 66 | reject(false)} 70 | transition={{duration}} 71 | /> 72 | ) 73 | } 74 | render(Component) 75 | setTimeout(() => resolve(true), 200) 76 | }) 77 | expect(element).toBe(true) 78 | }) 79 | 80 | test("Animation runs when target changes", async () => { 81 | const result = await new Promise(resolve => 82 | createRoot(dispose => { 83 | const Component = (props: any): JSX.Element => { 84 | return ( 85 | { 89 | if (detail.target.opacity === 0.8) resolve(true) 90 | }} 91 | transition={{duration}} 92 | /> 93 | ) 94 | } 95 | const [animate, setAnimate] = createSignal({opacity: 0.5}) 96 | render(() => ) 97 | setAnimate({opacity: 0.8}) 98 | setTimeout(dispose, 20) 99 | }), 100 | ) 101 | expect(result).toBe(true) 102 | }) 103 | 104 | test("Accepts default transition", async () => { 105 | const element = await new Promise(resolve => { 106 | let ref!: HTMLDivElement 107 | render(() => ( 108 | 114 | )) 115 | setTimeout(() => resolve(ref), 500) 116 | }) 117 | expect(element.style.opacity).not.toEqual("0.9") 118 | }) 119 | 120 | test("animate default transition", async () => { 121 | const element = await new Promise(resolve => { 122 | let ref!: HTMLDivElement 123 | render(() => ( 124 | 129 | )) 130 | setTimeout(() => resolve(ref), 500) 131 | }) 132 | expect(element.style.opacity).not.toEqual("0.9") 133 | }) 134 | 135 | test("Passes event handlers", async () => { 136 | const captured: any[] = [] 137 | const element = await new Promise(resolve => { 138 | let ref!: HTMLDivElement 139 | render(() => ( 140 | captured.push(0)} /> 141 | )) 142 | setTimeout(() => resolve(ref), 1) 143 | }) 144 | fireEvent.pointerEnter(element) 145 | expect(captured).toEqual([0]) 146 | }) 147 | }) 148 | -------------------------------------------------------------------------------- /test/presence.test.tsx: -------------------------------------------------------------------------------- 1 | import {mountedStates} from "@motionone/dom" 2 | import {children, createRoot, createSignal, JSX, Show} from "solid-js" 3 | import {screen, render} from "@solidjs/testing-library" 4 | import {Presence, Motion, VariantDefinition} from "../src/index.jsx" 5 | import type {RefProps} from "@solid-primitives/refs" 6 | 7 | const TestComponent = ( 8 | props: { 9 | initial?: boolean 10 | show?: boolean 11 | animate?: VariantDefinition 12 | exit?: VariantDefinition 13 | } = {}, 14 | ): JSX.Element => { 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | } 23 | 24 | describe("Presence", () => { 25 | test("Renders element", async () => { 26 | render(TestComponent) 27 | const component = await screen.findByTestId("child") 28 | expect(component).toBeTruthy() 29 | }) 30 | 31 | test("On initial Presence render, initial: false applies to children", () => { 32 | const wrapper = render(() => ( 33 | 34 | )) 35 | expect(wrapper.container.outerHTML).toEqual( 36 | `
`, 37 | ) 38 | }) 39 | 40 | test("Animates element out", () => 41 | createRoot(async () => { 42 | const [show, setShow] = createSignal(true) 43 | render(() => ( 44 | 45 | )) 46 | const component = await screen.findByTestId("child") 47 | expect(component.style.opacity).toBe("") 48 | expect(component.isConnected).toBeTruthy() 49 | 50 | setShow(false) 51 | 52 | expect(component.style.opacity).toBe("") 53 | expect(component.isConnected).toBeTruthy() 54 | 55 | return new Promise(resolve => { 56 | setTimeout(() => { 57 | expect(component.style.opacity).toBe("0") 58 | expect(component.isConnected).toBeFalsy() 59 | resolve() 60 | }, 100) 61 | }) 62 | })) 63 | 64 | test("All children run their exit animation", async () => { 65 | const [show, setShow] = createSignal(true) 66 | 67 | let ref_1!: HTMLDivElement, ref_2!: HTMLDivElement 68 | let resolve_1: () => void, resolve_2: () => void 69 | 70 | const exit_animation: VariantDefinition = { 71 | opacity: 0, 72 | transition: {duration: 0.001}, 73 | } 74 | 75 | const rendered = createRoot(() => 76 | children(() => ( 77 | 78 | 79 | resolve_1()} 83 | > 84 | resolve_2()} 88 | /> 89 | 90 | 91 | 92 | )), 93 | ) 94 | 95 | expect(rendered()).toContain(ref_1) 96 | expect(ref_1.firstChild).toBe(ref_2) 97 | expect(ref_1.style.opacity).toBe("") 98 | expect(ref_2.style.opacity).toBe("") 99 | expect(mountedStates.has(ref_1)).toBeTruthy() 100 | expect(mountedStates.has(ref_2)).toBeTruthy() 101 | 102 | setShow(false) 103 | 104 | expect(rendered()).toContain(ref_1) 105 | expect(ref_1.style.opacity).toBe("") 106 | expect(ref_2.style.opacity).toBe("") 107 | 108 | await new Promise(resolve => { 109 | let count = 0 110 | resolve_1 = resolve_2 = () => { 111 | if (++count === 2) resolve() 112 | } 113 | }) 114 | 115 | expect(rendered()).toHaveLength(0) 116 | expect(ref_1.style.opacity).toBe("0") 117 | expect(ref_2.style.opacity).toBe("0") 118 | expect(mountedStates.has(ref_1)).toBeFalsy() 119 | expect(mountedStates.has(ref_2)).toBeFalsy() 120 | }) 121 | 122 | test("exitBeforeEnter delays enter animation until exit animation is complete", async () => { 123 | const [condition, setCondition] = createSignal(true) 124 | 125 | let ref_1!: HTMLDivElement, ref_2!: HTMLDivElement 126 | let resolve_last: (() => void) | undefined 127 | 128 | const El = (props: RefProps): JSX.Element => ( 129 | resolve_last?.()} 136 | /> 137 | ) 138 | 139 | const rendered = createRoot(() => 140 | children(() => ( 141 | 142 | } 145 | fallback={} 146 | /> 147 | 148 | )), 149 | ) 150 | 151 | expect(rendered()).toContain(ref_1) 152 | expect(ref_1.style.opacity).toBe("0") 153 | 154 | // enter 1 155 | await new Promise(resolve => (resolve_last = resolve)) 156 | 157 | expect(rendered()).toContain(ref_1) 158 | expect(ref_1.style.opacity).toBe("1") 159 | 160 | setCondition(false) 161 | 162 | expect(rendered()).toContain(ref_1) 163 | expect(rendered()).not.toContain(ref_2) 164 | expect(ref_1.style.opacity).toBe("1") 165 | expect(ref_2.style.opacity).toBe("0") 166 | 167 | // exit 1 168 | await new Promise(resolve => (resolve_last = resolve)) 169 | 170 | expect(rendered()).toContain(ref_2) 171 | expect(rendered()).not.toContain(ref_1) 172 | expect(ref_1.style.opacity).toBe("0") 173 | expect(ref_2.style.opacity).toBe("0") 174 | 175 | // enter 2 176 | await new Promise(resolve => (resolve_last = resolve)) 177 | 178 | expect(rendered()).toContain(ref_2) 179 | expect(rendered()).not.toContain(ref_1) 180 | expect(ref_1.style.opacity).toBe("0") 181 | expect(ref_2.style.opacity).toBe("1") 182 | }) 183 | }) 184 | -------------------------------------------------------------------------------- /test/primitives.test.tsx: -------------------------------------------------------------------------------- 1 | import {createRoot, createSignal, JSX, Show} from "solid-js" 2 | import {screen, render} from "@solidjs/testing-library" 3 | import {Presence, VariantDefinition, motion} from "../src/index.jsx" 4 | 5 | // eslint-disable-next-line @typescript-eslint/no-unused-expressions 6 | motion 7 | 8 | const duration = 0.001 9 | 10 | const sleep = (ms: number): Promise => new Promise(resolve => setTimeout(resolve, ms)) 11 | 12 | describe("motion directive", () => { 13 | test("Applies initial as style to DOM node", async () => { 14 | await render(() => ( 15 |
21 | )) 22 | const component = await screen.findByTestId("box") 23 | expect(component.style.opacity).toBe("0.5") 24 | expect(component.style.getPropertyValue("--motion-translateX")).toBe("100px") 25 | expect(component.style.transform).toBe("translateX(var(--motion-translateX))") 26 | }) 27 | 28 | test("Animation runs on mount if initial and animate differ", async () => { 29 | let ref!: HTMLDivElement 30 | render(() => ( 31 |
39 | )) 40 | await new Promise(resolve => setTimeout(() => resolve(), 60)) 41 | expect(ref.style.opacity).toBe("0.8") 42 | }) 43 | 44 | test("Animation runs when target changes", async () => { 45 | const [opacity, setOpacity] = createSignal(0.5) 46 | 47 | const element = createRoot(() => ( 48 |
55 | )) as HTMLDivElement 56 | 57 | expect(element.style.opacity).toBe("0") 58 | 59 | await sleep(100) 60 | 61 | expect(element.style.opacity).toBe("0.5") 62 | 63 | setOpacity(0.8) 64 | 65 | expect(element.style.opacity).toBe("0.5") 66 | 67 | await sleep(100) 68 | 69 | expect(element.style.opacity).toBe("0.8") 70 | }) 71 | 72 | test("Accepts default transition", async () => { 73 | const element = await new Promise(resolve => { 74 | let ref!: HTMLDivElement 75 | render(() => ( 76 |
84 | )) 85 | setTimeout(() => resolve(ref), 500) 86 | }) 87 | expect(element.style.opacity).not.toEqual("0.9") 88 | }) 89 | 90 | describe("with Presence", () => { 91 | const TestComponent = ( 92 | props: { 93 | initial?: boolean 94 | show?: boolean 95 | animate?: VariantDefinition 96 | exit?: VariantDefinition 97 | } = {}, 98 | ): JSX.Element => { 99 | return ( 100 | 101 | 102 |
109 | 110 | 111 | ) 112 | } 113 | 114 | test("Animates element out", () => 115 | createRoot(async () => { 116 | const [show, setShow] = createSignal(true) 117 | render(() => ( 118 | 122 | )) 123 | const component = await screen.findByTestId("child") 124 | expect(component.style.opacity).toBe("") 125 | expect(component.isConnected).toBeTruthy() 126 | 127 | setShow(false) 128 | 129 | expect(component.style.opacity).toBe("") 130 | expect(component.isConnected).toBeTruthy() 131 | 132 | return new Promise(resolve => { 133 | setTimeout(() => { 134 | expect(component.style.opacity).toBe("0") 135 | expect(component.isConnected).toBeFalsy() 136 | resolve() 137 | }, 100) 138 | }) 139 | })) 140 | }) 141 | }) 142 | -------------------------------------------------------------------------------- /test/ssr.test.tsx: -------------------------------------------------------------------------------- 1 | import {renderToString} from "solid-js/web" 2 | import {Motion, Presence} from "../src/index.jsx" 3 | 4 | jest.mock("solid-js/web", () => ({ 5 | ...jest.requireActual("solid-js/web"), 6 | template: jest.fn(), 7 | })) 8 | 9 | describe("ssr", () => { 10 | test("Renders", () => { 11 | const html = renderToString(() => ) 12 | expect(html).toBe('
') 13 | }) 14 | 15 | test("Renders style", () => { 16 | const html = renderToString(() => ) 17 | expect(html).toBe(`
`) 18 | }) 19 | 20 | test("Renders initial as style", () => { 21 | const html = renderToString(() => ) 22 | expect(html).toBe( 23 | `
`, 24 | ) 25 | }) 26 | 27 | test("Renders initial and style", () => { 28 | const html1 = renderToString(() => ( 29 | 30 | )) 31 | expect(html1).toBe( 32 | `
`, 33 | ) 34 | 35 | const html2 = renderToString(() => ( 36 | 37 | )) 38 | expect(html2).toBe( 39 | `
`, 40 | ) 41 | }) 42 | 43 | test("Renders svg with attrs", () => { 44 | const html = renderToString(() => ( 45 | 46 | )) 47 | expect(html).toBe( 48 | ``, 49 | ) 50 | }) 51 | 52 | test("Children render inherited initial", () => { 53 | const html = renderToString(() => ( 54 | 58 | 59 | 60 | 61 | 62 | )) 63 | expect(html).toBe( 64 | `
`, 65 | ) 66 | }) 67 | 68 | test("Renders expected markup from style as keyframes", () => { 69 | const div = renderToString(() => ) 70 | expect(div).toBe(`
`) 71 | }) 72 | 73 | test("Renders expected CSS variables", () => { 74 | const div = renderToString(() => ( 75 | 79 | )) 80 | expect(div).toBe(`
`) 81 | }) 82 | 83 | test("Renders expected transform", () => { 84 | const div = renderToString(() => ) 85 | expect(div).toBe( 86 | `
`, 87 | ) 88 | }) 89 | 90 | test("Filters out all props", () => { 91 | const div = renderToString(() => ( 92 | 93 | )) 94 | expect(div).toBe('
') 95 | }) 96 | 97 | test("Renders Presence", () => { 98 | const html = renderToString(() => ( 99 | 100 | 101 | 102 | )) 103 | expect(html).toBe('
') 104 | }) 105 | 106 | test("Renders Presence with initial styles", () => { 107 | const html = renderToString(() => ( 108 | 109 | 110 | 111 | )) 112 | expect(html).toBe('
') 113 | }) 114 | 115 | test("Renders Presence without initial styles", () => { 116 | const html = renderToString(() => ( 117 | 118 | 119 | 120 | )) 121 | expect(html).toBe('
') 122 | }) 123 | }) 124 | -------------------------------------------------------------------------------- /test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "lib": ["ESNext", "DOM"], 5 | "jsx": "preserve", 6 | "jsxImportSource": "solid-js", 7 | "types": ["jest"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/waapi-polyfill.js: -------------------------------------------------------------------------------- 1 | // Copyright 2014 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | /** 16 | * This is an edited version of the WAAPI polyfill 17 | * that adds support for value and offset arrays. 18 | */ 19 | 20 | /* eslint-disable */ 21 | 22 | !(function () { 23 | var a = {}, 24 | b = {} 25 | !(function (a, b) { 26 | function c(a) { 27 | if ("number" == typeof a) return a 28 | var b = {} 29 | for (var c in a) b[c] = a[c] 30 | return b 31 | } 32 | function d() { 33 | ;(this._delay = 0), 34 | (this._endDelay = 0), 35 | (this._fill = "none"), 36 | (this._iterationStart = 0), 37 | (this._iterations = 1), 38 | (this._duration = 0), 39 | (this._playbackRate = 1), 40 | (this._direction = "normal"), 41 | (this._easing = "linear"), 42 | (this._easingFunction = x) 43 | } 44 | function e() { 45 | return a.isDeprecated( 46 | "Invalid timing inputs", 47 | "2016-03-02", 48 | "TypeError exceptions will be thrown instead.", 49 | !0, 50 | ) 51 | } 52 | function f(b, c, e) { 53 | var f = new d() 54 | return ( 55 | c && ((f.fill = "both"), (f.duration = "auto")), 56 | "number" != typeof b || isNaN(b) 57 | ? void 0 !== b && 58 | Object.getOwnPropertyNames(b).forEach(function (c) { 59 | if ("auto" != b[c]) { 60 | if ( 61 | ("number" == typeof f[c] || "duration" == c) && 62 | ("number" != typeof b[c] || isNaN(b[c])) 63 | ) 64 | return 65 | if ("fill" == c && -1 == v.indexOf(b[c])) return 66 | if ("direction" == c && -1 == w.indexOf(b[c])) return 67 | if ( 68 | "playbackRate" == c && 69 | 1 !== b[c] && 70 | a.isDeprecated( 71 | "AnimationEffectTiming.playbackRate", 72 | "2014-11-28", 73 | "Use Animation.playbackRate instead.", 74 | ) 75 | ) 76 | return 77 | f[c] = b[c] 78 | } 79 | }) 80 | : (f.duration = b), 81 | f 82 | ) 83 | } 84 | function g(a) { 85 | return "number" == typeof a && (a = isNaN(a) ? {duration: 0} : {duration: a}), a 86 | } 87 | function h(b, c) { 88 | return (b = a.numericTimingToObject(b)), f(b, c) 89 | } 90 | function i(a, b, c, d) { 91 | return a < 0 || a > 1 || c < 0 || c > 1 92 | ? x 93 | : function (e) { 94 | function f(a, b, c) { 95 | return ( 96 | 3 * a * (1 - c) * (1 - c) * c + 3 * b * (1 - c) * c * c + c * c * c 97 | ) 98 | } 99 | if (e <= 0) { 100 | var g = 0 101 | return a > 0 ? (g = b / a) : !b && c > 0 && (g = d / c), g * e 102 | } 103 | if (e >= 1) { 104 | var h = 0 105 | return ( 106 | c < 1 107 | ? (h = (d - 1) / (c - 1)) 108 | : 1 == c && a < 1 && (h = (b - 1) / (a - 1)), 109 | 1 + h * (e - 1) 110 | ) 111 | } 112 | for (var i = 0, j = 1; i < j; ) { 113 | var k = (i + j) / 2, 114 | l = f(a, c, k) 115 | if (Math.abs(e - l) < 1e-5) return f(b, d, k) 116 | l < e ? (i = k) : (j = k) 117 | } 118 | return f(b, d, k) 119 | } 120 | } 121 | function j(a, b) { 122 | return function (c) { 123 | if (c >= 1) return 1 124 | var d = 1 / a 125 | return (c += b * d) - (c % d) 126 | } 127 | } 128 | function k(a) { 129 | C || (C = document.createElement("div").style), 130 | (C.animationTimingFunction = ""), 131 | (C.animationTimingFunction = a) 132 | var b = C.animationTimingFunction 133 | if ("" == b && e()) throw new TypeError(a + " is not a valid value for easing") 134 | return b 135 | } 136 | function l(a) { 137 | if ("linear" == a) return x 138 | var b = E.exec(a) 139 | if (b) return i.apply(this, b.slice(1).map(Number)) 140 | var c = F.exec(a) 141 | if (c) return j(Number(c[1]), A) 142 | var d = G.exec(a) 143 | return d ? j(Number(d[1]), {start: y, middle: z, end: A}[d[2]]) : B[a] || x 144 | } 145 | function m(a) { 146 | return Math.abs(n(a) / a.playbackRate) 147 | } 148 | function n(a) { 149 | return 0 === a.duration || 0 === a.iterations ? 0 : a.duration * a.iterations 150 | } 151 | function o(a, b, c) { 152 | if (null == b) return H 153 | var d = c.delay + a + c.endDelay 154 | return b < Math.min(c.delay, d) ? I : b >= Math.min(c.delay + a, d) ? J : K 155 | } 156 | function p(a, b, c, d, e) { 157 | switch (d) { 158 | case I: 159 | return "backwards" == b || "both" == b ? 0 : null 160 | case K: 161 | return c - e 162 | case J: 163 | return "forwards" == b || "both" == b ? a : null 164 | case H: 165 | return null 166 | } 167 | } 168 | function q(a, b, c, d, e) { 169 | var f = e 170 | return 0 === a ? b !== I && (f += c) : (f += d / a), f 171 | } 172 | function r(a, b, c, d, e, f) { 173 | var g = a === 1 / 0 ? b % 1 : a % 1 174 | return 0 !== g || c !== J || 0 === d || (0 === e && 0 !== f) || (g = 1), g 175 | } 176 | function s(a, b, c, d) { 177 | return a === J && b === 1 / 0 ? 1 / 0 : 1 === c ? Math.floor(d) - 1 : Math.floor(d) 178 | } 179 | function t(a, b, c) { 180 | var d = a 181 | if ("normal" !== a && "reverse" !== a) { 182 | var e = b 183 | "alternate-reverse" === a && (e += 1), 184 | (d = "normal"), 185 | e !== 1 / 0 && e % 2 != 0 && (d = "reverse") 186 | } 187 | return "normal" === d ? c : 1 - c 188 | } 189 | function u(a, b, c) { 190 | var d = o(a, b, c), 191 | e = p(a, c.fill, b, d, c.delay) 192 | if (null === e) return null 193 | var f = q(c.duration, d, c.iterations, e, c.iterationStart), 194 | g = r(f, c.iterationStart, d, c.iterations, e, c.duration), 195 | h = s(d, c.iterations, g, f), 196 | i = t(c.direction, h, g) 197 | return c._easingFunction(i) 198 | } 199 | var v = "backwards|forwards|both|none".split("|"), 200 | w = "reverse|alternate|alternate-reverse".split("|"), 201 | x = function (a) { 202 | return a 203 | } 204 | d.prototype = { 205 | _setMember: function (b, c) { 206 | ;(this["_" + b] = c), 207 | this._effect && 208 | ((this._effect._timingInput[b] = c), 209 | (this._effect._timing = a.normalizeTimingInput(this._effect._timingInput)), 210 | (this._effect.activeDuration = a.calculateActiveDuration( 211 | this._effect._timing, 212 | )), 213 | this._effect._animation && 214 | this._effect._animation._rebuildUnderlyingAnimation()) 215 | }, 216 | get playbackRate() { 217 | return this._playbackRate 218 | }, 219 | set delay(a) { 220 | this._setMember("delay", a) 221 | }, 222 | get delay() { 223 | return this._delay 224 | }, 225 | set endDelay(a) { 226 | this._setMember("endDelay", a) 227 | }, 228 | get endDelay() { 229 | return this._endDelay 230 | }, 231 | set fill(a) { 232 | this._setMember("fill", a) 233 | }, 234 | get fill() { 235 | return this._fill 236 | }, 237 | set iterationStart(a) { 238 | if ((isNaN(a) || a < 0) && e()) 239 | throw new TypeError( 240 | "iterationStart must be a non-negative number, received: " + a, 241 | ) 242 | this._setMember("iterationStart", a) 243 | }, 244 | get iterationStart() { 245 | return this._iterationStart 246 | }, 247 | set duration(a) { 248 | if ("auto" != a && (isNaN(a) || a < 0) && e()) 249 | throw new TypeError("duration must be non-negative or auto, received: " + a) 250 | this._setMember("duration", a) 251 | }, 252 | get duration() { 253 | return this._duration 254 | }, 255 | set direction(a) { 256 | this._setMember("direction", a) 257 | }, 258 | get direction() { 259 | return this._direction 260 | }, 261 | set easing(a) { 262 | ;(this._easingFunction = l(k(a))), this._setMember("easing", a) 263 | }, 264 | get easing() { 265 | return this._easing 266 | }, 267 | set iterations(a) { 268 | if ((isNaN(a) || a < 0) && e()) 269 | throw new TypeError("iterations must be non-negative, received: " + a) 270 | this._setMember("iterations", a) 271 | }, 272 | get iterations() { 273 | return this._iterations 274 | }, 275 | } 276 | var y = 1, 277 | z = 0.5, 278 | A = 0, 279 | B = { 280 | ease: i(0.25, 0.1, 0.25, 1), 281 | "ease-in": i(0.42, 0, 1, 1), 282 | "ease-out": i(0, 0, 0.58, 1), 283 | "ease-in-out": i(0.42, 0, 0.58, 1), 284 | "step-start": j(1, y), 285 | "step-middle": j(1, z), 286 | "step-end": j(1, A), 287 | }, 288 | C = null, 289 | D = "\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*", 290 | E = new RegExp("cubic-bezier\\(" + D + "," + D + "," + D + "," + D + "\\)"), 291 | F = /steps\(\s*(\d+)\s*\)/, 292 | G = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/, 293 | H = 0, 294 | I = 1, 295 | J = 2, 296 | K = 3 297 | ;(a.cloneTimingInput = c), 298 | (a.makeTiming = f), 299 | (a.numericTimingToObject = g), 300 | (a.normalizeTimingInput = h), 301 | (a.calculateActiveDuration = m), 302 | (a.calculateIterationProgress = u), 303 | (a.calculatePhase = o), 304 | (a.normalizeEasing = k), 305 | (a.parseEasingFunction = l) 306 | })(a), 307 | (function (a, b) { 308 | function c(a, b) { 309 | return a in k ? k[a][b] || b : b 310 | } 311 | function d(a) { 312 | return ( 313 | "display" === a || 314 | 0 === a.lastIndexOf("animation", 0) || 315 | 0 === a.lastIndexOf("transition", 0) 316 | ) 317 | } 318 | function e(a, b, e) { 319 | if (!d(a)) { 320 | var f = h[a] 321 | if (f) { 322 | i.style[a] = b 323 | for (var g in f) { 324 | var j = f[g], 325 | k = i.style[j] 326 | e[j] = c(j, k) 327 | } 328 | } else e[a] = c(a, b) 329 | } 330 | } 331 | function f(a) { 332 | var b = [] 333 | for (var c in a) 334 | if (!(c in ["easing", "offset", "composite"])) { 335 | var d = a[c] 336 | Array.isArray(d) || (d = [d]) 337 | for (var e, f = d.length, g = 0; g < f; g++) 338 | (e = {}), 339 | (e.offset = "offset" in a ? a.offset : 1 == f ? 1 : g / (f - 1)), 340 | "easing" in a && (e.easing = a.easing), 341 | "composite" in a && (e.composite = a.composite), 342 | (e[c] = d[g]), 343 | b.push(e) 344 | } 345 | return ( 346 | b.sort(function (a, b) { 347 | return a.offset - b.offset 348 | }), 349 | b 350 | ) 351 | } 352 | function g(b) { 353 | function c() { 354 | var a = d.length 355 | null == d[a - 1].offset && (d[a - 1].offset = 1), 356 | a > 1 && null == d[0].offset && (d[0].offset = 0) 357 | for (var b = 0, c = d[0].offset, e = 1; e < a; e++) { 358 | var f = d[e].offset 359 | if (null != f) { 360 | for (var g = 1; g < e - b; g++) 361 | d[b + g].offset = c + ((f - c) * g) / (e - b) 362 | ;(b = e), (c = f) 363 | } 364 | } 365 | } 366 | if (null == b) return [] 367 | window.Symbol && 368 | Symbol.iterator && 369 | Array.prototype.from && 370 | b[Symbol.iterator] && 371 | (b = Array.from(b)), 372 | Array.isArray(b) || (b = f(b)) 373 | for ( 374 | var d = b.map(function (b) { 375 | var c = {} 376 | for (var d in b) { 377 | var f = b[d] 378 | if ("offset" == d) { 379 | if (null != f) { 380 | if (((f = Number(f)), !isFinite(f))) 381 | throw new TypeError("Keyframe offsets must be numbers.") 382 | if (f < 0 || f > 1) 383 | throw new TypeError( 384 | "Keyframe offsets must be between 0 and 1.", 385 | ) 386 | } 387 | } else if ("composite" == d) { 388 | if ("add" == f || "accumulate" == f) 389 | throw { 390 | type: DOMException.NOT_SUPPORTED_ERR, 391 | name: "NotSupportedError", 392 | message: "add compositing is not supported", 393 | } 394 | if ("replace" != f) 395 | throw new TypeError("Invalid composite mode " + f + ".") 396 | } else f = "easing" == d ? a.normalizeEasing(f) : "" + f 397 | e(d, f, c) 398 | } 399 | return ( 400 | void 0 == c.offset && (c.offset = null), 401 | void 0 == c.easing && (c.easing = "linear"), 402 | c 403 | ) 404 | }), 405 | g = !0, 406 | h = -1 / 0, 407 | i = 0; 408 | i < d.length; 409 | i++ 410 | ) { 411 | var j = d[i].offset 412 | if (null != j) { 413 | if (j < h) 414 | throw new TypeError( 415 | "Keyframes are not loosely sorted by offset. Sort or specify offsets.", 416 | ) 417 | h = j 418 | } else g = !1 419 | } 420 | return ( 421 | (d = d.filter(function (a) { 422 | return a.offset >= 0 && a.offset <= 1 423 | })), 424 | g || c(), 425 | d 426 | ) 427 | } 428 | var h = { 429 | background: [ 430 | "backgroundImage", 431 | "backgroundPosition", 432 | "backgroundSize", 433 | "backgroundRepeat", 434 | "backgroundAttachment", 435 | "backgroundOrigin", 436 | "backgroundClip", 437 | "backgroundColor", 438 | ], 439 | border: [ 440 | "borderTopColor", 441 | "borderTopStyle", 442 | "borderTopWidth", 443 | "borderRightColor", 444 | "borderRightStyle", 445 | "borderRightWidth", 446 | "borderBottomColor", 447 | "borderBottomStyle", 448 | "borderBottomWidth", 449 | "borderLeftColor", 450 | "borderLeftStyle", 451 | "borderLeftWidth", 452 | ], 453 | borderBottom: ["borderBottomWidth", "borderBottomStyle", "borderBottomColor"], 454 | borderColor: [ 455 | "borderTopColor", 456 | "borderRightColor", 457 | "borderBottomColor", 458 | "borderLeftColor", 459 | ], 460 | borderLeft: ["borderLeftWidth", "borderLeftStyle", "borderLeftColor"], 461 | borderRadius: [ 462 | "borderTopLeftRadius", 463 | "borderTopRightRadius", 464 | "borderBottomRightRadius", 465 | "borderBottomLeftRadius", 466 | ], 467 | borderRight: ["borderRightWidth", "borderRightStyle", "borderRightColor"], 468 | borderTop: ["borderTopWidth", "borderTopStyle", "borderTopColor"], 469 | borderWidth: [ 470 | "borderTopWidth", 471 | "borderRightWidth", 472 | "borderBottomWidth", 473 | "borderLeftWidth", 474 | ], 475 | flex: ["flexGrow", "flexShrink", "flexBasis"], 476 | font: [ 477 | "fontFamily", 478 | "fontSize", 479 | "fontStyle", 480 | "fontVariant", 481 | "fontWeight", 482 | "lineHeight", 483 | ], 484 | margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"], 485 | outline: ["outlineColor", "outlineStyle", "outlineWidth"], 486 | padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"], 487 | }, 488 | i = document.createElementNS("http://www.w3.org/1999/xhtml", "div"), 489 | j = {thin: "1px", medium: "3px", thick: "5px"}, 490 | k = { 491 | borderBottomWidth: j, 492 | borderLeftWidth: j, 493 | borderRightWidth: j, 494 | borderTopWidth: j, 495 | fontSize: { 496 | "xx-small": "60%", 497 | "x-small": "75%", 498 | small: "89%", 499 | medium: "100%", 500 | large: "120%", 501 | "x-large": "150%", 502 | "xx-large": "200%", 503 | }, 504 | fontWeight: {normal: "400", bold: "700"}, 505 | outlineWidth: j, 506 | textShadow: {none: "0px 0px 0px transparent"}, 507 | boxShadow: {none: "0px 0px 0px 0px transparent"}, 508 | } 509 | ;(a.convertToArrayForm = f), (a.normalizeKeyframes = g) 510 | })(a), 511 | (function (a) { 512 | var b = {} 513 | ;(a.isDeprecated = function (a, c, d, e) { 514 | var f = e ? "are" : "is", 515 | g = new Date(), 516 | h = new Date(c) 517 | return ( 518 | h.setMonth(h.getMonth() + 3), 519 | !( 520 | g < h && 521 | (a in b || 522 | console.warn( 523 | "Web Animations: " + 524 | a + 525 | " " + 526 | f + 527 | " deprecated and will stop working on " + 528 | h.toDateString() + 529 | ". " + 530 | d, 531 | ), 532 | (b[a] = !0), 533 | 1) 534 | ) 535 | ) 536 | }), 537 | (a.deprecated = function (b, c, d, e) { 538 | var f = e ? "are" : "is" 539 | if (a.isDeprecated(b, c, d, e)) 540 | throw new Error(b + " " + f + " no longer supported. " + d) 541 | }) 542 | })(a), 543 | (function () { 544 | if (document.documentElement.animate) { 545 | var c = document.documentElement.animate([], 0), 546 | d = !0 547 | if ( 548 | (c && 549 | ((d = !1), 550 | "play|currentTime|pause|reverse|playbackRate|cancel|finish|startTime|playState" 551 | .split("|") 552 | .forEach(function (a) { 553 | void 0 === c[a] && (d = !0) 554 | })), 555 | !d) 556 | ) 557 | return 558 | } 559 | !(function (a, b, c) { 560 | function d(a) { 561 | for (var b = {}, c = 0; c < a.length; c++) 562 | for (var d in a[c]) 563 | if ("offset" != d && "easing" != d && "composite" != d) { 564 | var e = { 565 | offset: a[c].offset, 566 | easing: a[c].easing, 567 | value: a[c][d], 568 | } 569 | ;(b[d] = b[d] || []), b[d].push(e) 570 | } 571 | for (var f in b) { 572 | var g = b[f] 573 | 574 | /** 575 | * EDIT: 576 | * First offset should be 0, last should be 1 577 | */ 578 | 579 | if (0 != g[0].offset || 1 != g[g.length - 1].offset) 580 | throw { 581 | type: DOMException.NOT_SUPPORTED_ERR, 582 | name: "NotSupportedError", 583 | message: "Partial keyframes are not supported", 584 | } 585 | } 586 | return b 587 | } 588 | function e(c) { 589 | var d = [] 590 | for (var e in c) 591 | for (var f = c[e], g = 0; g < f.length - 1; g++) { 592 | var h = g, 593 | i = g + 1, 594 | j = f[h].offset, 595 | k = f[i].offset, 596 | l = j, 597 | m = k 598 | 0 == g && ((l = -1 / 0), 0 == k && (i = h)), 599 | g == f.length - 2 && ((m = 1 / 0), 1 == j && (h = i)), 600 | d.push({ 601 | applyFrom: l, 602 | applyTo: m, 603 | startOffset: f[h].offset, 604 | endOffset: f[i].offset, 605 | easingFunction: a.parseEasingFunction(f[h].easing), 606 | property: e, 607 | interpolation: b.propertyInterpolation( 608 | e, 609 | f[h].value, 610 | f[i].value, 611 | ), 612 | }) 613 | } 614 | return ( 615 | d.sort(function (a, b) { 616 | return a.startOffset - b.startOffset 617 | }), 618 | d 619 | ) 620 | } 621 | b.convertEffectInput = function (c) { 622 | var f = a.normalizeKeyframes(c), 623 | g = d(f), 624 | h = e(g) 625 | return function (a, c) { 626 | if (null != c) 627 | h.filter(function (a) { 628 | return c >= a.applyFrom && c < a.applyTo 629 | }).forEach(function (d) { 630 | var e = c - d.startOffset, 631 | f = d.endOffset - d.startOffset, 632 | g = 0 == f ? 0 : d.easingFunction(e / f) 633 | b.apply(a, d.property, d.interpolation(g)) 634 | }) 635 | else 636 | for (var d in g) 637 | "offset" != d && "easing" != d && "composite" != d && b.clear(a, d) 638 | } 639 | } 640 | })(a, b), 641 | (function (a, b, c) { 642 | function d(a) { 643 | return a.replace(/-(.)/g, function (a, b) { 644 | return b.toUpperCase() 645 | }) 646 | } 647 | function e(a, b, c) { 648 | ;(h[c] = h[c] || []), h[c].push([a, b]) 649 | } 650 | function f(a, b, c) { 651 | for (var f = 0; f < c.length; f++) { 652 | e(a, b, d(c[f])) 653 | } 654 | } 655 | function g(c, e, f) { 656 | var g = c 657 | ;/-/.test(c) && 658 | !a.isDeprecated( 659 | "Hyphenated property names", 660 | "2016-03-22", 661 | "Use camelCase instead.", 662 | !0, 663 | ) && 664 | (g = d(c)), 665 | ("initial" != e && "initial" != f) || 666 | ("initial" == e && (e = i[g]), "initial" == f && (f = i[g])) 667 | for (var j = e == f ? [] : h[g], k = 0; j && k < j.length; k++) { 668 | var l = j[k][0](e), 669 | m = j[k][0](f) 670 | if (void 0 !== l && void 0 !== m) { 671 | var n = j[k][1](l, m) 672 | if (n) { 673 | var o = b.Interpolation.apply(null, n) 674 | return function (a) { 675 | return 0 == a ? e : 1 == a ? f : o(a) 676 | } 677 | } 678 | } 679 | } 680 | return b.Interpolation(!1, !0, function (a) { 681 | return a ? f : e 682 | }) 683 | } 684 | var h = {} 685 | b.addPropertiesHandler = f 686 | var i = { 687 | backgroundColor: "transparent", 688 | backgroundPosition: "0% 0%", 689 | borderBottomColor: "currentColor", 690 | borderBottomLeftRadius: "0px", 691 | borderBottomRightRadius: "0px", 692 | borderBottomWidth: "3px", 693 | borderLeftColor: "currentColor", 694 | borderLeftWidth: "3px", 695 | borderRightColor: "currentColor", 696 | borderRightWidth: "3px", 697 | borderSpacing: "2px", 698 | borderTopColor: "currentColor", 699 | borderTopLeftRadius: "0px", 700 | borderTopRightRadius: "0px", 701 | borderTopWidth: "3px", 702 | bottom: "auto", 703 | clip: "rect(0px, 0px, 0px, 0px)", 704 | color: "black", 705 | fontSize: "100%", 706 | fontWeight: "400", 707 | height: "auto", 708 | left: "auto", 709 | letterSpacing: "normal", 710 | lineHeight: "120%", 711 | marginBottom: "0px", 712 | marginLeft: "0px", 713 | marginRight: "0px", 714 | marginTop: "0px", 715 | maxHeight: "none", 716 | maxWidth: "none", 717 | minHeight: "0px", 718 | minWidth: "0px", 719 | opacity: "1.0", 720 | outlineColor: "invert", 721 | outlineOffset: "0px", 722 | outlineWidth: "3px", 723 | paddingBottom: "0px", 724 | paddingLeft: "0px", 725 | paddingRight: "0px", 726 | paddingTop: "0px", 727 | right: "auto", 728 | strokeDasharray: "none", 729 | strokeDashoffset: "0px", 730 | textIndent: "0px", 731 | textShadow: "0px 0px 0px transparent", 732 | top: "auto", 733 | transform: "", 734 | verticalAlign: "0px", 735 | visibility: "visible", 736 | width: "auto", 737 | wordSpacing: "normal", 738 | zIndex: "auto", 739 | } 740 | b.propertyInterpolation = g 741 | })(a, b), 742 | (function (a, b, c) { 743 | function d(b) { 744 | var c = a.calculateActiveDuration(b), 745 | d = function (d) { 746 | return a.calculateIterationProgress(c, d, b) 747 | } 748 | return (d._totalDuration = b.delay + c + b.endDelay), d 749 | } 750 | b.KeyframeEffect = function (c, e, f, g) { 751 | var h, 752 | i = d(a.normalizeTimingInput(f)), 753 | j = b.convertEffectInput(e), 754 | k = function () { 755 | j(c, h) 756 | } 757 | return ( 758 | (k._update = function (a) { 759 | return null !== (h = i(a)) 760 | }), 761 | (k._clear = function () { 762 | j(c, null) 763 | }), 764 | (k._hasSameTarget = function (a) { 765 | return c === a 766 | }), 767 | (k._target = c), 768 | (k._totalDuration = i._totalDuration), 769 | (k._id = g), 770 | k 771 | ) 772 | } 773 | })(a, b), 774 | (function (a, b) { 775 | function c(a, b) { 776 | return ( 777 | !(!b.namespaceURI || -1 == b.namespaceURI.indexOf("/svg")) && 778 | (g in a || 779 | (a[g] = /Trident|MSIE|IEMobile|Edge|Android 4/i.test( 780 | a.navigator.userAgent, 781 | )), 782 | a[g]) 783 | ) 784 | } 785 | function d(a, b, c) { 786 | ;(c.enumerable = !0), (c.configurable = !0), Object.defineProperty(a, b, c) 787 | } 788 | function e(a) { 789 | ;(this._element = a), 790 | (this._surrogateStyle = document.createElementNS( 791 | "http://www.w3.org/1999/xhtml", 792 | "div", 793 | ).style), 794 | (this._style = a.style), 795 | (this._length = 0), 796 | (this._isAnimatedProperty = {}), 797 | (this._updateSvgTransformAttr = c(window, a)), 798 | (this._savedTransformAttr = null) 799 | for (var b = 0; b < this._style.length; b++) { 800 | var d = this._style[b] 801 | this._surrogateStyle[d] = this._style[d] 802 | } 803 | this._updateIndices() 804 | } 805 | function f(a) { 806 | if (!a._webAnimationsPatchedStyle) { 807 | var b = new e(a) 808 | try { 809 | d(a, "style", { 810 | get: function () { 811 | return b 812 | }, 813 | }) 814 | } catch (b) { 815 | ;(a.style._set = function (b, c) { 816 | a.style[b] = c 817 | }), 818 | (a.style._clear = function (b) { 819 | a.style[b] = "" 820 | }) 821 | } 822 | a._webAnimationsPatchedStyle = a.style 823 | } 824 | } 825 | var g = "_webAnimationsUpdateSvgTransformAttr", 826 | h = {cssText: 1, length: 1, parentRule: 1}, 827 | i = { 828 | getPropertyCSSValue: 1, 829 | getPropertyPriority: 1, 830 | getPropertyValue: 1, 831 | item: 1, 832 | removeProperty: 1, 833 | setProperty: 1, 834 | }, 835 | j = {removeProperty: 1, setProperty: 1} 836 | e.prototype = { 837 | get cssText() { 838 | return this._surrogateStyle.cssText 839 | }, 840 | set cssText(a) { 841 | for (var b = {}, c = 0; c < this._surrogateStyle.length; c++) 842 | b[this._surrogateStyle[c]] = !0 843 | ;(this._surrogateStyle.cssText = a), this._updateIndices() 844 | for (var c = 0; c < this._surrogateStyle.length; c++) 845 | b[this._surrogateStyle[c]] = !0 846 | for (var d in b) 847 | this._isAnimatedProperty[d] || 848 | this._style.setProperty( 849 | d, 850 | this._surrogateStyle.getPropertyValue(d), 851 | ) 852 | }, 853 | get length() { 854 | return this._surrogateStyle.length 855 | }, 856 | get parentRule() { 857 | return this._style.parentRule 858 | }, 859 | _updateIndices: function () { 860 | for (; this._length < this._surrogateStyle.length; ) 861 | Object.defineProperty(this, this._length, { 862 | configurable: !0, 863 | enumerable: !1, 864 | get: (function (a) { 865 | return function () { 866 | return this._surrogateStyle[a] 867 | } 868 | })(this._length), 869 | }), 870 | this._length++ 871 | for (; this._length > this._surrogateStyle.length; ) 872 | this._length--, 873 | Object.defineProperty(this, this._length, { 874 | configurable: !0, 875 | enumerable: !1, 876 | value: void 0, 877 | }) 878 | }, 879 | _set: function (b, c) { 880 | ;(this._style[b] = c), 881 | (this._isAnimatedProperty[b] = !0), 882 | this._updateSvgTransformAttr && 883 | "transform" == a.unprefixedPropertyName(b) && 884 | (null == this._savedTransformAttr && 885 | (this._savedTransformAttr = 886 | this._element.getAttribute("transform")), 887 | this._element.setAttribute( 888 | "transform", 889 | a.transformToSvgMatrix(c), 890 | )) 891 | }, 892 | _clear: function (b) { 893 | ;(this._style[b] = this._surrogateStyle[b]), 894 | this._updateSvgTransformAttr && 895 | "transform" == a.unprefixedPropertyName(b) && 896 | (this._savedTransformAttr 897 | ? this._element.setAttribute( 898 | "transform", 899 | this._savedTransformAttr, 900 | ) 901 | : this._element.removeAttribute("transform"), 902 | (this._savedTransformAttr = null)), 903 | delete this._isAnimatedProperty[b] 904 | }, 905 | } 906 | for (var k in i) 907 | e.prototype[k] = (function (a, b) { 908 | return function () { 909 | var c = this._surrogateStyle[a].apply( 910 | this._surrogateStyle, 911 | arguments, 912 | ) 913 | return ( 914 | b && 915 | (this._isAnimatedProperty[arguments[0]] || 916 | this._style[a].apply(this._style, arguments), 917 | this._updateIndices()), 918 | c 919 | ) 920 | } 921 | })(k, k in j) 922 | for (var l in document.documentElement.style) 923 | l in h || 924 | l in i || 925 | (function (a) { 926 | d(e.prototype, a, { 927 | get: function () { 928 | return this._surrogateStyle[a] 929 | }, 930 | set: function (b) { 931 | if (a === "_length") return 932 | this._surrogateStyle[a] = b 933 | this._updateIndices() 934 | 935 | this._isAnimatedProperty[a] || (this._style[a] = b) 936 | }, 937 | }) 938 | })(l) 939 | ;(a.apply = function (b, c, d) { 940 | f(b), b.style._set(a.propertyName(c), d) 941 | }), 942 | (a.clear = function (b, c) { 943 | b._webAnimationsPatchedStyle && b.style._clear(a.propertyName(c)) 944 | }) 945 | })(b), 946 | (function (a) { 947 | window.Element.prototype.animate = function (b, c) { 948 | /** 949 | * EDIT: Polyfill doesn't support values as arrays 950 | * or offset as arrays, so converting these here 951 | */ 952 | const keyframes = [] 953 | for (const key in b) { 954 | if (key === "easing" || key === "offset") continue 955 | 956 | const valueKeyframes = b[key] 957 | for (let i = 0; i < valueKeyframes.length; i++) { 958 | keyframes[i] = {...keyframes[i], [key]: valueKeyframes[i]} 959 | if (b.easing && b.easing[i]) { 960 | keyframes.easing = b.easing[i] 961 | } 962 | if (b.offset && b.offset[i]) { 963 | keyframes.offset = b.offset[i] 964 | } 965 | } 966 | } 967 | 968 | var d = "" 969 | return ( 970 | c && c.id && (d = c.id), 971 | a.timeline._play(a.KeyframeEffect(this, keyframes, c, d)) 972 | ) 973 | } 974 | })(b), 975 | (function (a, b) { 976 | function c(a, b, d) { 977 | if ("number" == typeof a && "number" == typeof b) return a * (1 - d) + b * d 978 | if ("boolean" == typeof a && "boolean" == typeof b) return d < 0.5 ? a : b 979 | if (a.length == b.length) { 980 | for (var e = [], f = 0; f < a.length; f++) e.push(c(a[f], b[f], d)) 981 | return e 982 | } 983 | throw "Mismatched interpolation arguments " + a + ":" + b 984 | } 985 | a.Interpolation = function (a, b, d) { 986 | return function (e) { 987 | return d(c(a, b, e)) 988 | } 989 | } 990 | })(b), 991 | (function (a, b) { 992 | function c(a, b, c) { 993 | return Math.max(Math.min(a, c), b) 994 | } 995 | function d(b, d, e) { 996 | var f = a.dot(b, d) 997 | f = c(f, -1, 1) 998 | var g = [] 999 | if (1 === f) g = b 1000 | else 1001 | for ( 1002 | var h = Math.acos(f), 1003 | i = (1 * Math.sin(e * h)) / Math.sqrt(1 - f * f), 1004 | j = 0; 1005 | j < 4; 1006 | j++ 1007 | ) 1008 | g.push(b[j] * (Math.cos(e * h) - f * i) + d[j] * i) 1009 | return g 1010 | } 1011 | var e = (function () { 1012 | function a(a, b) { 1013 | for ( 1014 | var c = [ 1015 | [0, 0, 0, 0], 1016 | [0, 0, 0, 0], 1017 | [0, 0, 0, 0], 1018 | [0, 0, 0, 0], 1019 | ], 1020 | d = 0; 1021 | d < 4; 1022 | d++ 1023 | ) 1024 | for (var e = 0; e < 4; e++) 1025 | for (var f = 0; f < 4; f++) c[d][e] += b[d][f] * a[f][e] 1026 | return c 1027 | } 1028 | function b(a) { 1029 | return ( 1030 | 0 == a[0][2] && 1031 | 0 == a[0][3] && 1032 | 0 == a[1][2] && 1033 | 0 == a[1][3] && 1034 | 0 == a[2][0] && 1035 | 0 == a[2][1] && 1036 | 1 == a[2][2] && 1037 | 0 == a[2][3] && 1038 | 0 == a[3][2] && 1039 | 1 == a[3][3] 1040 | ) 1041 | } 1042 | function c(c, d, e, f, g) { 1043 | for ( 1044 | var h = [ 1045 | [1, 0, 0, 0], 1046 | [0, 1, 0, 0], 1047 | [0, 0, 1, 0], 1048 | [0, 0, 0, 1], 1049 | ], 1050 | i = 0; 1051 | i < 4; 1052 | i++ 1053 | ) 1054 | h[i][3] = g[i] 1055 | for (var i = 0; i < 3; i++) 1056 | for (var j = 0; j < 3; j++) h[3][i] += c[j] * h[j][i] 1057 | var k = f[0], 1058 | l = f[1], 1059 | m = f[2], 1060 | n = f[3], 1061 | o = [ 1062 | [1, 0, 0, 0], 1063 | [0, 1, 0, 0], 1064 | [0, 0, 1, 0], 1065 | [0, 0, 0, 1], 1066 | ] 1067 | ;(o[0][0] = 1 - 2 * (l * l + m * m)), 1068 | (o[0][1] = 2 * (k * l - m * n)), 1069 | (o[0][2] = 2 * (k * m + l * n)), 1070 | (o[1][0] = 2 * (k * l + m * n)), 1071 | (o[1][1] = 1 - 2 * (k * k + m * m)), 1072 | (o[1][2] = 2 * (l * m - k * n)), 1073 | (o[2][0] = 2 * (k * m - l * n)), 1074 | (o[2][1] = 2 * (l * m + k * n)), 1075 | (o[2][2] = 1 - 2 * (k * k + l * l)), 1076 | (h = a(h, o)) 1077 | var p = [ 1078 | [1, 0, 0, 0], 1079 | [0, 1, 0, 0], 1080 | [0, 0, 1, 0], 1081 | [0, 0, 0, 1], 1082 | ] 1083 | e[2] && ((p[2][1] = e[2]), (h = a(h, p))), 1084 | e[1] && ((p[2][1] = 0), (p[2][0] = e[0]), (h = a(h, p))), 1085 | e[0] && ((p[2][0] = 0), (p[1][0] = e[0]), (h = a(h, p))) 1086 | for (var i = 0; i < 3; i++) for (var j = 0; j < 3; j++) h[i][j] *= d[i] 1087 | return b(h) 1088 | ? [h[0][0], h[0][1], h[1][0], h[1][1], h[3][0], h[3][1]] 1089 | : h[0].concat(h[1], h[2], h[3]) 1090 | } 1091 | return c 1092 | })() 1093 | ;(a.composeMatrix = e), (a.quat = d) 1094 | })(b), 1095 | (function (a, b, c) { 1096 | a.sequenceNumber = 0 1097 | var d = function (a, b, c) { 1098 | ;(this.target = a), 1099 | (this.currentTime = b), 1100 | (this.timelineTime = c), 1101 | (this.type = "finish"), 1102 | (this.bubbles = !1), 1103 | (this.cancelable = !1), 1104 | (this.currentTarget = a), 1105 | (this.defaultPrevented = !1), 1106 | (this.eventPhase = Event.AT_TARGET), 1107 | (this.timeStamp = Date.now()) 1108 | } 1109 | ;(b.Animation = function (b) { 1110 | ;(this.id = ""), 1111 | b && b._id && (this.id = b._id), 1112 | (this._sequenceNumber = a.sequenceNumber++), 1113 | (this._currentTime = 0), 1114 | (this._startTime = null), 1115 | (this._paused = !1), 1116 | (this._playbackRate = 1), 1117 | (this._inTimeline = !0), 1118 | (this._finishedFlag = !0), 1119 | (this.onfinish = null), 1120 | (this._finishHandlers = []), 1121 | (this._effect = b), 1122 | (this._inEffect = this._effect._update(0)), 1123 | (this._idle = !0), 1124 | (this._currentTimePending = !1) 1125 | }), 1126 | (b.Animation.prototype = { 1127 | _ensureAlive: function () { 1128 | this.playbackRate < 0 && 0 === this.currentTime 1129 | ? (this._inEffect = this._effect._update(-1)) 1130 | : (this._inEffect = this._effect._update(this.currentTime)), 1131 | this._inTimeline || 1132 | (!this._inEffect && this._finishedFlag) || 1133 | ((this._inTimeline = !0), b.timeline._animations.push(this)) 1134 | }, 1135 | _tickCurrentTime: function (a, b) { 1136 | a != this._currentTime && 1137 | ((this._currentTime = a), 1138 | this._isFinished && 1139 | !b && 1140 | (this._currentTime = 1141 | this._playbackRate > 0 ? this._totalDuration : 0), 1142 | this._ensureAlive()) 1143 | }, 1144 | get currentTime() { 1145 | return this._idle || this._currentTimePending 1146 | ? null 1147 | : this._currentTime 1148 | }, 1149 | set currentTime(a) { 1150 | ;(a = +a), 1151 | isNaN(a) || 1152 | (b.restart(), 1153 | this._paused || 1154 | null == this._startTime || 1155 | (this._startTime = 1156 | this._timeline.currentTime - 1157 | a / this._playbackRate), 1158 | (this._currentTimePending = !1), 1159 | this._currentTime != a && 1160 | (this._idle && ((this._idle = !1), (this._paused = !0)), 1161 | this._tickCurrentTime(a, !0), 1162 | b.applyDirtiedAnimation(this))) 1163 | }, 1164 | get startTime() { 1165 | return this._startTime 1166 | }, 1167 | set startTime(a) { 1168 | ;(a = +a), 1169 | isNaN(a) || 1170 | this._paused || 1171 | this._idle || 1172 | ((this._startTime = a), 1173 | this._tickCurrentTime( 1174 | (this._timeline.currentTime - this._startTime) * 1175 | this.playbackRate, 1176 | ), 1177 | b.applyDirtiedAnimation(this)) 1178 | }, 1179 | get playbackRate() { 1180 | return this._playbackRate 1181 | }, 1182 | set playbackRate(a) { 1183 | if (a != this._playbackRate) { 1184 | var c = this.currentTime 1185 | ;(this._playbackRate = a), 1186 | (this._startTime = null), 1187 | "paused" != this.playState && 1188 | "idle" != this.playState && 1189 | ((this._finishedFlag = !1), 1190 | (this._idle = !1), 1191 | this._ensureAlive(), 1192 | b.applyDirtiedAnimation(this)), 1193 | null != c && (this.currentTime = c) 1194 | } 1195 | }, 1196 | get _isFinished() { 1197 | return ( 1198 | !this._idle && 1199 | ((this._playbackRate > 0 && 1200 | this._currentTime >= this._totalDuration) || 1201 | (this._playbackRate < 0 && this._currentTime <= 0)) 1202 | ) 1203 | }, 1204 | get _totalDuration() { 1205 | return this._effect._totalDuration 1206 | }, 1207 | get playState() { 1208 | return this._idle 1209 | ? "idle" 1210 | : (null == this._startTime && 1211 | !this._paused && 1212 | 0 != this.playbackRate) || 1213 | this._currentTimePending 1214 | ? "pending" 1215 | : this._paused 1216 | ? "paused" 1217 | : this._isFinished 1218 | ? "finished" 1219 | : "running" 1220 | }, 1221 | _rewind: function () { 1222 | if (this._playbackRate >= 0) this._currentTime = 0 1223 | else { 1224 | if (!(this._totalDuration < 1 / 0)) 1225 | throw new DOMException( 1226 | "Unable to rewind negative playback rate animation with infinite duration", 1227 | "InvalidStateError", 1228 | ) 1229 | this._currentTime = this._totalDuration 1230 | } 1231 | }, 1232 | play: function () { 1233 | ;(this._paused = !1), 1234 | (this._isFinished || this._idle) && 1235 | (this._rewind(), (this._startTime = null)), 1236 | (this._finishedFlag = !1), 1237 | (this._idle = !1), 1238 | this._ensureAlive(), 1239 | b.applyDirtiedAnimation(this) 1240 | }, 1241 | pause: function () { 1242 | this._isFinished || this._paused || this._idle 1243 | ? this._idle && (this._rewind(), (this._idle = !1)) 1244 | : (this._currentTimePending = !0), 1245 | (this._startTime = null), 1246 | (this._paused = !0) 1247 | }, 1248 | /** 1249 | * EDIT: Adding commitStyles 1250 | */ 1251 | commitStyles: function () {}, 1252 | finish: function () { 1253 | this._idle || 1254 | ((this.currentTime = 1255 | this._playbackRate > 0 ? this._totalDuration : 0), 1256 | (this._startTime = this._totalDuration - this.currentTime), 1257 | (this._currentTimePending = !1), 1258 | b.applyDirtiedAnimation(this)) 1259 | }, 1260 | cancel: function () { 1261 | this._inEffect && 1262 | ((this._inEffect = !1), 1263 | (this._idle = !0), 1264 | (this._paused = !1), 1265 | (this._finishedFlag = !0), 1266 | (this._currentTime = 0), 1267 | (this._startTime = null), 1268 | this._effect._update(null), 1269 | b.applyDirtiedAnimation(this)) 1270 | }, 1271 | reverse: function () { 1272 | ;(this.playbackRate *= -1), this.play() 1273 | }, 1274 | addEventListener: function (a, b) { 1275 | "function" == typeof b && 1276 | "finish" == a && 1277 | this._finishHandlers.push(b) 1278 | }, 1279 | removeEventListener: function (a, b) { 1280 | if ("finish" == a) { 1281 | var c = this._finishHandlers.indexOf(b) 1282 | c >= 0 && this._finishHandlers.splice(c, 1) 1283 | } 1284 | }, 1285 | _fireEvents: function (a) { 1286 | if (this._isFinished) { 1287 | if (!this._finishedFlag) { 1288 | var b = new d(this, this._currentTime, a), 1289 | c = this._finishHandlers.concat( 1290 | this.onfinish ? [this.onfinish] : [], 1291 | ) 1292 | setTimeout(function () { 1293 | c.forEach(function (a) { 1294 | a.call(b.target, b) 1295 | }) 1296 | }, 0), 1297 | (this._finishedFlag = !0) 1298 | } 1299 | } else this._finishedFlag = !1 1300 | }, 1301 | _tick: function (a, b) { 1302 | this._idle || 1303 | this._paused || 1304 | (null == this._startTime 1305 | ? b && 1306 | (this.startTime = 1307 | a - this._currentTime / this.playbackRate) 1308 | : this._isFinished || 1309 | this._tickCurrentTime( 1310 | (a - this._startTime) * this.playbackRate, 1311 | )), 1312 | b && ((this._currentTimePending = !1), this._fireEvents(a)) 1313 | }, 1314 | get _needsTick() { 1315 | return ( 1316 | this.playState in {pending: 1, running: 1} || 1317 | !this._finishedFlag 1318 | ) 1319 | }, 1320 | _targetAnimations: function () { 1321 | var a = this._effect._target 1322 | return a._animations || (a._animations = []), a._animations 1323 | }, 1324 | _markTarget: function () { 1325 | var a = this._targetAnimations() 1326 | ;-1 === a.indexOf(this) && a.push(this) 1327 | }, 1328 | _unmarkTarget: function () { 1329 | var a = this._targetAnimations(), 1330 | b = a.indexOf(this) 1331 | ;-1 !== b && a.splice(b, 1) 1332 | }, 1333 | }) 1334 | })(a, b), 1335 | (function (a, b, c) { 1336 | function d(a) { 1337 | var b = j 1338 | ;(j = []), 1339 | a < q.currentTime && (a = q.currentTime), 1340 | q._animations.sort(e), 1341 | (q._animations = h(a, !0, q._animations)[0]), 1342 | b.forEach(function (b) { 1343 | b[1](a) 1344 | }), 1345 | g(), 1346 | (l = void 0) 1347 | } 1348 | function e(a, b) { 1349 | return a._sequenceNumber - b._sequenceNumber 1350 | } 1351 | function f() { 1352 | ;(this._animations = []), 1353 | (this.currentTime = 1354 | window.performance && performance.now ? performance.now() : 0) 1355 | } 1356 | function g() { 1357 | o.forEach(function (a) { 1358 | a() 1359 | }), 1360 | (o.length = 0) 1361 | } 1362 | function h(a, c, d) { 1363 | ;(p = !0), (n = !1), (b.timeline.currentTime = a), (m = !1) 1364 | var e = [], 1365 | f = [], 1366 | g = [], 1367 | h = [] 1368 | return ( 1369 | d.forEach(function (b) { 1370 | b._tick(a, c), 1371 | b._inEffect 1372 | ? (f.push(b._effect), b._markTarget()) 1373 | : (e.push(b._effect), b._unmarkTarget()), 1374 | b._needsTick && (m = !0) 1375 | var d = b._inEffect || b._needsTick 1376 | ;(b._inTimeline = d), d ? g.push(b) : h.push(b) 1377 | }), 1378 | o.push.apply(o, e), 1379 | o.push.apply(o, f), 1380 | m && requestAnimationFrame(function () {}), 1381 | (p = !1), 1382 | [g, h] 1383 | ) 1384 | } 1385 | var i = window.requestAnimationFrame, 1386 | j = [], 1387 | k = 0 1388 | ;(window.requestAnimationFrame = function (a) { 1389 | var b = k++ 1390 | return 0 == j.length && i(d), j.push([b, a]), b 1391 | }), 1392 | (window.cancelAnimationFrame = function (a) { 1393 | j.forEach(function (b) { 1394 | b[0] == a && (b[1] = function () {}) 1395 | }) 1396 | }), 1397 | (f.prototype = { 1398 | _play: function (c) { 1399 | c._timing = a.normalizeTimingInput(c.timing) 1400 | var d = new b.Animation(c) 1401 | return ( 1402 | (d._idle = !1), 1403 | (d._timeline = this), 1404 | this._animations.push(d), 1405 | b.restart(), 1406 | b.applyDirtiedAnimation(d), 1407 | d 1408 | ) 1409 | }, 1410 | }) 1411 | var l = void 0, 1412 | m = !1, 1413 | n = !1 1414 | ;(b.restart = function () { 1415 | return m || ((m = !0), requestAnimationFrame(function () {}), (n = !0)), n 1416 | }), 1417 | (b.applyDirtiedAnimation = function (a) { 1418 | if (!p) { 1419 | a._markTarget() 1420 | var c = a._targetAnimations() 1421 | c.sort(e), 1422 | h(b.timeline.currentTime, !1, c.slice())[1].forEach( 1423 | function (a) { 1424 | var b = q._animations.indexOf(a) 1425 | ;-1 !== b && q._animations.splice(b, 1) 1426 | }, 1427 | ), 1428 | g() 1429 | } 1430 | }) 1431 | var o = [], 1432 | p = !1, 1433 | q = new f() 1434 | b.timeline = q 1435 | })(a, b), 1436 | (function (a, b) { 1437 | function c(a, b) { 1438 | for (var c = 0, d = 0; d < a.length; d++) c += a[d] * b[d] 1439 | return c 1440 | } 1441 | function d(a, b) { 1442 | return [ 1443 | a[0] * b[0] + a[4] * b[1] + a[8] * b[2] + a[12] * b[3], 1444 | a[1] * b[0] + a[5] * b[1] + a[9] * b[2] + a[13] * b[3], 1445 | a[2] * b[0] + a[6] * b[1] + a[10] * b[2] + a[14] * b[3], 1446 | a[3] * b[0] + a[7] * b[1] + a[11] * b[2] + a[15] * b[3], 1447 | a[0] * b[4] + a[4] * b[5] + a[8] * b[6] + a[12] * b[7], 1448 | a[1] * b[4] + a[5] * b[5] + a[9] * b[6] + a[13] * b[7], 1449 | a[2] * b[4] + a[6] * b[5] + a[10] * b[6] + a[14] * b[7], 1450 | a[3] * b[4] + a[7] * b[5] + a[11] * b[6] + a[15] * b[7], 1451 | a[0] * b[8] + a[4] * b[9] + a[8] * b[10] + a[12] * b[11], 1452 | a[1] * b[8] + a[5] * b[9] + a[9] * b[10] + a[13] * b[11], 1453 | a[2] * b[8] + a[6] * b[9] + a[10] * b[10] + a[14] * b[11], 1454 | a[3] * b[8] + a[7] * b[9] + a[11] * b[10] + a[15] * b[11], 1455 | a[0] * b[12] + a[4] * b[13] + a[8] * b[14] + a[12] * b[15], 1456 | a[1] * b[12] + a[5] * b[13] + a[9] * b[14] + a[13] * b[15], 1457 | a[2] * b[12] + a[6] * b[13] + a[10] * b[14] + a[14] * b[15], 1458 | a[3] * b[12] + a[7] * b[13] + a[11] * b[14] + a[15] * b[15], 1459 | ] 1460 | } 1461 | function e(a) { 1462 | var b = a.rad || 0 1463 | return ( 1464 | ((a.deg || 0) / 360 + (a.grad || 0) / 400 + (a.turn || 0)) * 1465 | (2 * Math.PI) + 1466 | b 1467 | ) 1468 | } 1469 | function f(a) { 1470 | switch (a.t) { 1471 | case "rotatex": 1472 | var b = e(a.d[0]) 1473 | return [ 1474 | 1, 1475 | 0, 1476 | 0, 1477 | 0, 1478 | 0, 1479 | Math.cos(b), 1480 | Math.sin(b), 1481 | 0, 1482 | 0, 1483 | -Math.sin(b), 1484 | Math.cos(b), 1485 | 0, 1486 | 0, 1487 | 0, 1488 | 0, 1489 | 1, 1490 | ] 1491 | case "rotatey": 1492 | var b = e(a.d[0]) 1493 | return [ 1494 | Math.cos(b), 1495 | 0, 1496 | -Math.sin(b), 1497 | 0, 1498 | 0, 1499 | 1, 1500 | 0, 1501 | 0, 1502 | Math.sin(b), 1503 | 0, 1504 | Math.cos(b), 1505 | 0, 1506 | 0, 1507 | 0, 1508 | 0, 1509 | 1, 1510 | ] 1511 | case "rotate": 1512 | case "rotatez": 1513 | var b = e(a.d[0]) 1514 | return [ 1515 | Math.cos(b), 1516 | Math.sin(b), 1517 | 0, 1518 | 0, 1519 | -Math.sin(b), 1520 | Math.cos(b), 1521 | 0, 1522 | 0, 1523 | 0, 1524 | 0, 1525 | 1, 1526 | 0, 1527 | 0, 1528 | 0, 1529 | 0, 1530 | 1, 1531 | ] 1532 | case "rotate3d": 1533 | var c = a.d[0], 1534 | d = a.d[1], 1535 | f = a.d[2], 1536 | b = e(a.d[3]), 1537 | g = c * c + d * d + f * f 1538 | if (0 === g) (c = 1), (d = 0), (f = 0) 1539 | else if (1 !== g) { 1540 | var h = Math.sqrt(g) 1541 | ;(c /= h), (d /= h), (f /= h) 1542 | } 1543 | var i = Math.sin(b / 2), 1544 | j = i * Math.cos(b / 2), 1545 | k = i * i 1546 | return [ 1547 | 1 - 2 * (d * d + f * f) * k, 1548 | 2 * (c * d * k + f * j), 1549 | 2 * (c * f * k - d * j), 1550 | 0, 1551 | 2 * (c * d * k - f * j), 1552 | 1 - 2 * (c * c + f * f) * k, 1553 | 2 * (d * f * k + c * j), 1554 | 0, 1555 | 2 * (c * f * k + d * j), 1556 | 2 * (d * f * k - c * j), 1557 | 1 - 2 * (c * c + d * d) * k, 1558 | 0, 1559 | 0, 1560 | 0, 1561 | 0, 1562 | 1, 1563 | ] 1564 | case "scale": 1565 | return [a.d[0], 0, 0, 0, 0, a.d[1], 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] 1566 | case "scalex": 1567 | return [a.d[0], 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] 1568 | case "scaley": 1569 | return [1, 0, 0, 0, 0, a.d[0], 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] 1570 | case "scalez": 1571 | return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, a.d[0], 0, 0, 0, 0, 1] 1572 | case "scale3d": 1573 | return [ 1574 | a.d[0], 1575 | 0, 1576 | 0, 1577 | 0, 1578 | 0, 1579 | a.d[1], 1580 | 0, 1581 | 0, 1582 | 0, 1583 | 0, 1584 | a.d[2], 1585 | 0, 1586 | 0, 1587 | 0, 1588 | 0, 1589 | 1, 1590 | ] 1591 | case "skew": 1592 | var l = e(a.d[0]), 1593 | m = e(a.d[1]) 1594 | return [ 1595 | 1, 1596 | Math.tan(m), 1597 | 0, 1598 | 0, 1599 | Math.tan(l), 1600 | 1, 1601 | 0, 1602 | 0, 1603 | 0, 1604 | 0, 1605 | 1, 1606 | 0, 1607 | 0, 1608 | 0, 1609 | 0, 1610 | 1, 1611 | ] 1612 | case "skewx": 1613 | var b = e(a.d[0]) 1614 | return [1, 0, 0, 0, Math.tan(b), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] 1615 | case "skewy": 1616 | var b = e(a.d[0]) 1617 | return [1, Math.tan(b), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] 1618 | case "translate": 1619 | var c = a.d[0].px || 0, 1620 | d = a.d[1].px || 0 1621 | return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, c, d, 0, 1] 1622 | case "translatex": 1623 | var c = a.d[0].px || 0 1624 | return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, c, 0, 0, 1] 1625 | case "translatey": 1626 | var d = a.d[0].px || 0 1627 | return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, d, 0, 1] 1628 | case "translatez": 1629 | var f = a.d[0].px || 0 1630 | return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, f, 1] 1631 | case "translate3d": 1632 | var c = a.d[0].px || 0, 1633 | d = a.d[1].px || 0, 1634 | f = a.d[2].px || 0 1635 | return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, c, d, f, 1] 1636 | case "perspective": 1637 | return [ 1638 | 1, 1639 | 0, 1640 | 0, 1641 | 0, 1642 | 0, 1643 | 1, 1644 | 0, 1645 | 0, 1646 | 0, 1647 | 0, 1648 | 1, 1649 | a.d[0].px ? -1 / a.d[0].px : 0, 1650 | 0, 1651 | 0, 1652 | 0, 1653 | 1, 1654 | ] 1655 | case "matrix": 1656 | return [ 1657 | a.d[0], 1658 | a.d[1], 1659 | 0, 1660 | 0, 1661 | a.d[2], 1662 | a.d[3], 1663 | 0, 1664 | 0, 1665 | 0, 1666 | 0, 1667 | 1, 1668 | 0, 1669 | a.d[4], 1670 | a.d[5], 1671 | 0, 1672 | 1, 1673 | ] 1674 | case "matrix3d": 1675 | return a.d 1676 | } 1677 | } 1678 | function g(a) { 1679 | return 0 === a.length 1680 | ? [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] 1681 | : a.map(f).reduce(d) 1682 | } 1683 | function h(a) { 1684 | return [i(g(a))] 1685 | } 1686 | var i = (function () { 1687 | function a(a) { 1688 | return ( 1689 | a[0][0] * a[1][1] * a[2][2] + 1690 | a[1][0] * a[2][1] * a[0][2] + 1691 | a[2][0] * a[0][1] * a[1][2] - 1692 | a[0][2] * a[1][1] * a[2][0] - 1693 | a[1][2] * a[2][1] * a[0][0] - 1694 | a[2][2] * a[0][1] * a[1][0] 1695 | ) 1696 | } 1697 | function b(b) { 1698 | for ( 1699 | var c = 1 / a(b), 1700 | d = b[0][0], 1701 | e = b[0][1], 1702 | f = b[0][2], 1703 | g = b[1][0], 1704 | h = b[1][1], 1705 | i = b[1][2], 1706 | j = b[2][0], 1707 | k = b[2][1], 1708 | l = b[2][2], 1709 | m = [ 1710 | [ 1711 | (h * l - i * k) * c, 1712 | (f * k - e * l) * c, 1713 | (e * i - f * h) * c, 1714 | 0, 1715 | ], 1716 | [ 1717 | (i * j - g * l) * c, 1718 | (d * l - f * j) * c, 1719 | (f * g - d * i) * c, 1720 | 0, 1721 | ], 1722 | [ 1723 | (g * k - h * j) * c, 1724 | (j * e - d * k) * c, 1725 | (d * h - e * g) * c, 1726 | 0, 1727 | ], 1728 | ], 1729 | n = [], 1730 | o = 0; 1731 | o < 3; 1732 | o++ 1733 | ) { 1734 | for (var p = 0, q = 0; q < 3; q++) p += b[3][q] * m[q][o] 1735 | n.push(p) 1736 | } 1737 | return n.push(1), m.push(n), m 1738 | } 1739 | function d(a) { 1740 | return [ 1741 | [a[0][0], a[1][0], a[2][0], a[3][0]], 1742 | [a[0][1], a[1][1], a[2][1], a[3][1]], 1743 | [a[0][2], a[1][2], a[2][2], a[3][2]], 1744 | [a[0][3], a[1][3], a[2][3], a[3][3]], 1745 | ] 1746 | } 1747 | function e(a, b) { 1748 | for (var c = [], d = 0; d < 4; d++) { 1749 | for (var e = 0, f = 0; f < 4; f++) e += a[f] * b[f][d] 1750 | c.push(e) 1751 | } 1752 | return c 1753 | } 1754 | function f(a) { 1755 | var b = g(a) 1756 | return [a[0] / b, a[1] / b, a[2] / b] 1757 | } 1758 | function g(a) { 1759 | return Math.sqrt(a[0] * a[0] + a[1] * a[1] + a[2] * a[2]) 1760 | } 1761 | function h(a, b, c, d) { 1762 | return [c * a[0] + d * b[0], c * a[1] + d * b[1], c * a[2] + d * b[2]] 1763 | } 1764 | function i(a, b) { 1765 | return [ 1766 | a[1] * b[2] - a[2] * b[1], 1767 | a[2] * b[0] - a[0] * b[2], 1768 | a[0] * b[1] - a[1] * b[0], 1769 | ] 1770 | } 1771 | function j(j) { 1772 | var k = [j.slice(0, 4), j.slice(4, 8), j.slice(8, 12), j.slice(12, 16)] 1773 | if (1 !== k[3][3]) return null 1774 | for (var l = [], m = 0; m < 4; m++) l.push(k[m].slice()) 1775 | for (var m = 0; m < 3; m++) l[m][3] = 0 1776 | if (0 === a(l)) return null 1777 | var n, 1778 | o = [] 1779 | k[0][3] || k[1][3] || k[2][3] 1780 | ? (o.push(k[0][3]), 1781 | o.push(k[1][3]), 1782 | o.push(k[2][3]), 1783 | o.push(k[3][3]), 1784 | (n = e(o, d(b(l))))) 1785 | : (n = [0, 0, 0, 1]) 1786 | var p = k[3].slice(0, 3), 1787 | q = [] 1788 | q.push(k[0].slice(0, 3)) 1789 | var r = [] 1790 | r.push(g(q[0])), (q[0] = f(q[0])) 1791 | var s = [] 1792 | q.push(k[1].slice(0, 3)), 1793 | s.push(c(q[0], q[1])), 1794 | (q[1] = h(q[1], q[0], 1, -s[0])), 1795 | r.push(g(q[1])), 1796 | (q[1] = f(q[1])), 1797 | (s[0] /= r[1]), 1798 | q.push(k[2].slice(0, 3)), 1799 | s.push(c(q[0], q[2])), 1800 | (q[2] = h(q[2], q[0], 1, -s[1])), 1801 | s.push(c(q[1], q[2])), 1802 | (q[2] = h(q[2], q[1], 1, -s[2])), 1803 | r.push(g(q[2])), 1804 | (q[2] = f(q[2])), 1805 | (s[1] /= r[2]), 1806 | (s[2] /= r[2]) 1807 | var t = i(q[1], q[2]) 1808 | if (c(q[0], t) < 0) 1809 | for (var m = 0; m < 3; m++) 1810 | (r[m] *= -1), (q[m][0] *= -1), (q[m][1] *= -1), (q[m][2] *= -1) 1811 | var u, 1812 | v, 1813 | w = q[0][0] + q[1][1] + q[2][2] + 1 1814 | return ( 1815 | w > 1e-4 1816 | ? ((u = 0.5 / Math.sqrt(w)), 1817 | (v = [ 1818 | (q[2][1] - q[1][2]) * u, 1819 | (q[0][2] - q[2][0]) * u, 1820 | (q[1][0] - q[0][1]) * u, 1821 | 0.25 / u, 1822 | ])) 1823 | : q[0][0] > q[1][1] && q[0][0] > q[2][2] 1824 | ? ((u = 2 * Math.sqrt(1 + q[0][0] - q[1][1] - q[2][2])), 1825 | (v = [ 1826 | 0.25 * u, 1827 | (q[0][1] + q[1][0]) / u, 1828 | (q[0][2] + q[2][0]) / u, 1829 | (q[2][1] - q[1][2]) / u, 1830 | ])) 1831 | : q[1][1] > q[2][2] 1832 | ? ((u = 2 * Math.sqrt(1 + q[1][1] - q[0][0] - q[2][2])), 1833 | (v = [ 1834 | (q[0][1] + q[1][0]) / u, 1835 | 0.25 * u, 1836 | (q[1][2] + q[2][1]) / u, 1837 | (q[0][2] - q[2][0]) / u, 1838 | ])) 1839 | : ((u = 2 * Math.sqrt(1 + q[2][2] - q[0][0] - q[1][1])), 1840 | (v = [ 1841 | (q[0][2] + q[2][0]) / u, 1842 | (q[1][2] + q[2][1]) / u, 1843 | 0.25 * u, 1844 | (q[1][0] - q[0][1]) / u, 1845 | ])), 1846 | [p, r, s, v, n] 1847 | ) 1848 | } 1849 | return j 1850 | })() 1851 | ;(a.dot = c), (a.makeMatrixDecomposition = h), (a.transformListToMatrix = g) 1852 | })(b), 1853 | (function (a) { 1854 | function b(a, b) { 1855 | var c = a.exec(b) 1856 | if (c) 1857 | return ( 1858 | (c = a.ignoreCase ? c[0].toLowerCase() : c[0]), 1859 | [c, b.substr(c.length)] 1860 | ) 1861 | } 1862 | function c(a, b) { 1863 | b = b.replace(/^\s*/, "") 1864 | var c = a(b) 1865 | if (c) return [c[0], c[1].replace(/^\s*/, "")] 1866 | } 1867 | function d(a, d, e) { 1868 | a = c.bind(null, a) 1869 | for (var f = []; ; ) { 1870 | var g = a(e) 1871 | if (!g) return [f, e] 1872 | if ((f.push(g[0]), (e = g[1]), !(g = b(d, e)) || "" == g[1])) 1873 | return [f, e] 1874 | e = g[1] 1875 | } 1876 | } 1877 | function e(a, b) { 1878 | for (var c = 0, d = 0; d < b.length && (!/\s|,/.test(b[d]) || 0 != c); d++) 1879 | if ("(" == b[d]) c++ 1880 | else if (")" == b[d] && (c--, 0 == c && d++, c <= 0)) break 1881 | var e = a(b.substr(0, d)) 1882 | return void 0 == e ? void 0 : [e, b.substr(d)] 1883 | } 1884 | function f(a, b) { 1885 | for (var c = a, d = b; c && d; ) c > d ? (c %= d) : (d %= c) 1886 | return (c = (a * b) / (c + d)) 1887 | } 1888 | function g(a) { 1889 | return function (b) { 1890 | var c = a(b) 1891 | return c && (c[0] = void 0), c 1892 | } 1893 | } 1894 | function h(a, b) { 1895 | return function (c) { 1896 | return a(c) || [b, c] 1897 | } 1898 | } 1899 | function i(b, c) { 1900 | for (var d = [], e = 0; e < b.length; e++) { 1901 | var f = a.consumeTrimmed(b[e], c) 1902 | if (!f || "" == f[0]) return 1903 | void 0 !== f[0] && d.push(f[0]), (c = f[1]) 1904 | } 1905 | if ("" == c) return d 1906 | } 1907 | function j(a, b, c, d, e) { 1908 | for ( 1909 | var g = [], h = [], i = [], j = f(d.length, e.length), k = 0; 1910 | k < j; 1911 | k++ 1912 | ) { 1913 | var l = b(d[k % d.length], e[k % e.length]) 1914 | if (!l) return 1915 | g.push(l[0]), h.push(l[1]), i.push(l[2]) 1916 | } 1917 | return [ 1918 | g, 1919 | h, 1920 | function (b) { 1921 | var d = b 1922 | .map(function (a, b) { 1923 | return i[b](a) 1924 | }) 1925 | .join(c) 1926 | return a ? a(d) : d 1927 | }, 1928 | ] 1929 | } 1930 | function k(a, b, c) { 1931 | for (var d = [], e = [], f = [], g = 0, h = 0; h < c.length; h++) 1932 | if ("function" == typeof c[h]) { 1933 | var i = c[h](a[g], b[g++]) 1934 | d.push(i[0]), e.push(i[1]), f.push(i[2]) 1935 | } else 1936 | !(function (a) { 1937 | d.push(!1), 1938 | e.push(!1), 1939 | f.push(function () { 1940 | return c[a] 1941 | }) 1942 | })(h) 1943 | return [ 1944 | d, 1945 | e, 1946 | function (a) { 1947 | for (var b = "", c = 0; c < a.length; c++) b += f[c](a[c]) 1948 | return b 1949 | }, 1950 | ] 1951 | } 1952 | ;(a.consumeToken = b), 1953 | (a.consumeTrimmed = c), 1954 | (a.consumeRepeated = d), 1955 | (a.consumeParenthesised = e), 1956 | (a.ignore = g), 1957 | (a.optional = h), 1958 | (a.consumeList = i), 1959 | (a.mergeNestedRepeated = j.bind(null, null)), 1960 | (a.mergeWrappedNestedRepeated = j), 1961 | (a.mergeList = k) 1962 | })(b), 1963 | (function (a) { 1964 | function b(b) { 1965 | function c(b) { 1966 | var c = a.consumeToken(/^inset/i, b) 1967 | return c 1968 | ? ((d.inset = !0), c) 1969 | : (c = a.consumeLengthOrPercent(b)) 1970 | ? (d.lengths.push(c[0]), c) 1971 | : ((c = a.consumeColor(b)), c ? ((d.color = c[0]), c) : void 0) 1972 | } 1973 | var d = {inset: !1, lengths: [], color: null}, 1974 | e = a.consumeRepeated(c, /^/, b) 1975 | if (e && e[0].length) return [d, e[1]] 1976 | } 1977 | function c(c) { 1978 | var d = a.consumeRepeated(b, /^,/, c) 1979 | if (d && "" == d[1]) return d[0] 1980 | } 1981 | function d(b, c) { 1982 | for (; b.lengths.length < Math.max(b.lengths.length, c.lengths.length); ) 1983 | b.lengths.push({px: 0}) 1984 | for (; c.lengths.length < Math.max(b.lengths.length, c.lengths.length); ) 1985 | c.lengths.push({px: 0}) 1986 | if (b.inset == c.inset && !!b.color == !!c.color) { 1987 | for ( 1988 | var d, e = [], f = [[], 0], g = [[], 0], h = 0; 1989 | h < b.lengths.length; 1990 | h++ 1991 | ) { 1992 | var i = a.mergeDimensions(b.lengths[h], c.lengths[h], 2 == h) 1993 | f[0].push(i[0]), g[0].push(i[1]), e.push(i[2]) 1994 | } 1995 | if (b.color && c.color) { 1996 | var j = a.mergeColors(b.color, c.color) 1997 | ;(f[1] = j[0]), (g[1] = j[1]), (d = j[2]) 1998 | } 1999 | return [ 2000 | f, 2001 | g, 2002 | function (a) { 2003 | for (var c = b.inset ? "inset " : " ", f = 0; f < e.length; f++) 2004 | c += e[f](a[0][f]) + " " 2005 | return d && (c += d(a[1])), c 2006 | }, 2007 | ] 2008 | } 2009 | } 2010 | function e(b, c, d, e) { 2011 | function f(a) { 2012 | return { 2013 | inset: a, 2014 | color: [0, 0, 0, 0], 2015 | lengths: [{px: 0}, {px: 0}, {px: 0}, {px: 0}], 2016 | } 2017 | } 2018 | for (var g = [], h = [], i = 0; i < d.length || i < e.length; i++) { 2019 | var j = d[i] || f(e[i].inset), 2020 | k = e[i] || f(d[i].inset) 2021 | g.push(j), h.push(k) 2022 | } 2023 | return a.mergeNestedRepeated(b, c, g, h) 2024 | } 2025 | var f = e.bind(null, d, ", ") 2026 | a.addPropertiesHandler(c, f, ["box-shadow", "text-shadow"]) 2027 | })(b), 2028 | (function (a, b) { 2029 | function c(a) { 2030 | return a.toFixed(3).replace(/0+$/, "").replace(/\.$/, "") 2031 | } 2032 | function d(a, b, c) { 2033 | return Math.min(b, Math.max(a, c)) 2034 | } 2035 | function e(a) { 2036 | if (/^\s*[-+]?(\d*\.)?\d+\s*$/.test(a)) return Number(a) 2037 | } 2038 | function f(a, b) { 2039 | return [a, b, c] 2040 | } 2041 | function g(a, b) { 2042 | if (0 != a) return i(0, 1 / 0)(a, b) 2043 | } 2044 | function h(a, b) { 2045 | return [ 2046 | a, 2047 | b, 2048 | function (a) { 2049 | return Math.round(d(1, 1 / 0, a)) 2050 | }, 2051 | ] 2052 | } 2053 | function i(a, b) { 2054 | return function (e, f) { 2055 | return [ 2056 | e, 2057 | f, 2058 | function (e) { 2059 | return c(d(a, b, e)) 2060 | }, 2061 | ] 2062 | } 2063 | } 2064 | function j(a) { 2065 | var b = a.trim().split(/\s*[\s,]\s*/) 2066 | if (0 !== b.length) { 2067 | for (var c = [], d = 0; d < b.length; d++) { 2068 | var f = e(b[d]) 2069 | if (void 0 === f) return 2070 | c.push(f) 2071 | } 2072 | return c 2073 | } 2074 | } 2075 | function k(a, b) { 2076 | if (a.length == b.length) 2077 | return [ 2078 | a, 2079 | b, 2080 | function (a) { 2081 | return a.map(c).join(" ") 2082 | }, 2083 | ] 2084 | } 2085 | function l(a, b) { 2086 | return [a, b, Math.round] 2087 | } 2088 | ;(a.clamp = d), 2089 | a.addPropertiesHandler(j, k, ["stroke-dasharray"]), 2090 | a.addPropertiesHandler(e, i(0, 1 / 0), [ 2091 | "border-image-width", 2092 | "line-height", 2093 | ]), 2094 | a.addPropertiesHandler(e, i(0, 1), ["opacity", "shape-image-threshold"]), 2095 | a.addPropertiesHandler(e, g, ["flex-grow", "flex-shrink"]), 2096 | a.addPropertiesHandler(e, h, ["orphans", "widows"]), 2097 | a.addPropertiesHandler(e, l, ["z-index"]), 2098 | (a.parseNumber = e), 2099 | (a.parseNumberList = j), 2100 | (a.mergeNumbers = f), 2101 | (a.numberToString = c) 2102 | })(b), 2103 | (function (a, b) { 2104 | function c(a, b) { 2105 | if ("visible" == a || "visible" == b) 2106 | return [ 2107 | 0, 2108 | 1, 2109 | function (c) { 2110 | return c <= 0 ? a : c >= 1 ? b : "visible" 2111 | }, 2112 | ] 2113 | } 2114 | a.addPropertiesHandler(String, c, ["visibility"]) 2115 | })(b), 2116 | (function (a, b) { 2117 | function c(a) { 2118 | return [255, 255, 255, 1] 2119 | } 2120 | function d(b, c) { 2121 | return [ 2122 | b, 2123 | c, 2124 | function (b) { 2125 | function c(a) { 2126 | return Math.max(0, Math.min(255, a)) 2127 | } 2128 | if (b[3]) 2129 | for (var d = 0; d < 3; d++) b[d] = Math.round(c(b[d] / b[3])) 2130 | return ( 2131 | (b[3] = a.numberToString(a.clamp(0, 1, b[3]))), 2132 | "rgba(" + b.join(",") + ")" 2133 | ) 2134 | }, 2135 | ] 2136 | } 2137 | var e = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas") 2138 | e.width = e.height = 1 2139 | a.addPropertiesHandler(c, d, [ 2140 | "background-color", 2141 | "border-bottom-color", 2142 | "border-left-color", 2143 | "border-right-color", 2144 | "border-top-color", 2145 | "color", 2146 | "fill", 2147 | "flood-color", 2148 | "lighting-color", 2149 | "outline-color", 2150 | "stop-color", 2151 | "stroke", 2152 | "text-decoration-color", 2153 | ]), 2154 | (a.consumeColor = a.consumeParenthesised.bind(null, c)), 2155 | (a.mergeColors = d) 2156 | })(b), 2157 | (function (a, b) { 2158 | function c(a) { 2159 | function b() { 2160 | var b = h.exec(a) 2161 | g = b ? b[0] : void 0 2162 | } 2163 | function c() { 2164 | var a = Number(g) 2165 | return b(), a 2166 | } 2167 | function d() { 2168 | if ("(" !== g) return c() 2169 | b() 2170 | var a = f() 2171 | return ")" !== g ? NaN : (b(), a) 2172 | } 2173 | function e() { 2174 | for (var a = d(); "*" === g || "/" === g; ) { 2175 | var c = g 2176 | b() 2177 | var e = d() 2178 | "*" === c ? (a *= e) : (a /= e) 2179 | } 2180 | return a 2181 | } 2182 | function f() { 2183 | for (var a = e(); "+" === g || "-" === g; ) { 2184 | var c = g 2185 | b() 2186 | var d = e() 2187 | "+" === c ? (a += d) : (a -= d) 2188 | } 2189 | return a 2190 | } 2191 | var g, 2192 | h = /([\+\-\w\.]+|[\(\)\*\/])/g 2193 | return b(), f() 2194 | } 2195 | function d(a, b) { 2196 | if ("0" == (b = b.trim().toLowerCase()) && "px".search(a) >= 0) 2197 | return {px: 0} 2198 | if (/^[^(]*$|^calc/.test(b)) { 2199 | b = b.replace(/calc\(/g, "(") 2200 | var d = {} 2201 | b = b.replace(a, function (a) { 2202 | return (d[a] = null), "U" + a 2203 | }) 2204 | for ( 2205 | var e = "U(" + a.source + ")", 2206 | f = b 2207 | .replace(/[-+]?(\d*\.)?\d+([Ee][-+]?\d+)?/g, "N") 2208 | .replace(new RegExp("N" + e, "g"), "D") 2209 | .replace(/\s[+-]\s/g, "O") 2210 | .replace(/\s/g, ""), 2211 | g = [/N\*(D)/g, /(N|D)[*\/]N/g, /(N|D)O\1/g, /\((N|D)\)/g], 2212 | h = 0; 2213 | h < g.length; 2214 | 2215 | ) 2216 | g[h].test(f) ? ((f = f.replace(g[h], "$1")), (h = 0)) : h++ 2217 | if ("D" == f) { 2218 | for (var i in d) { 2219 | var j = c( 2220 | b 2221 | .replace(new RegExp("U" + i, "g"), "") 2222 | .replace(new RegExp(e, "g"), "*0"), 2223 | ) 2224 | if (!isFinite(j)) return 2225 | d[i] = j 2226 | } 2227 | return d 2228 | } 2229 | } 2230 | } 2231 | function e(a, b) { 2232 | return f(a, b, !0) 2233 | } 2234 | function f(b, c, d) { 2235 | var e, 2236 | f = [] 2237 | for (e in b) f.push(e) 2238 | for (e in c) f.indexOf(e) < 0 && f.push(e) 2239 | return ( 2240 | (b = f.map(function (a) { 2241 | return b[a] || 0 2242 | })), 2243 | (c = f.map(function (a) { 2244 | return c[a] || 0 2245 | })), 2246 | [ 2247 | b, 2248 | c, 2249 | function (b) { 2250 | var c = b 2251 | .map(function (c, e) { 2252 | return ( 2253 | 1 == b.length && d && (c = Math.max(c, 0)), 2254 | a.numberToString(c) + f[e] 2255 | ) 2256 | }) 2257 | .join(" + ") 2258 | return b.length > 1 ? "calc(" + c + ")" : c 2259 | }, 2260 | ] 2261 | ) 2262 | } 2263 | var g = "px|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc", 2264 | h = d.bind(null, new RegExp(g, "g")), 2265 | i = d.bind(null, new RegExp(g + "|%", "g")), 2266 | j = d.bind(null, /deg|rad|grad|turn/g) 2267 | ;(a.parseLength = h), 2268 | (a.parseLengthOrPercent = i), 2269 | (a.consumeLengthOrPercent = a.consumeParenthesised.bind(null, i)), 2270 | (a.parseAngle = j), 2271 | (a.mergeDimensions = f) 2272 | var k = a.consumeParenthesised.bind(null, h), 2273 | l = a.consumeRepeated.bind(void 0, k, /^/), 2274 | m = a.consumeRepeated.bind(void 0, l, /^,/) 2275 | a.consumeSizePairList = m 2276 | var n = function (a) { 2277 | var b = m(a) 2278 | if (b && "" == b[1]) return b[0] 2279 | }, 2280 | o = a.mergeNestedRepeated.bind(void 0, e, " "), 2281 | p = a.mergeNestedRepeated.bind(void 0, o, ",") 2282 | ;(a.mergeNonNegativeSizePair = o), 2283 | a.addPropertiesHandler(n, p, ["background-size"]), 2284 | a.addPropertiesHandler(i, e, [ 2285 | "border-bottom-width", 2286 | "border-image-width", 2287 | "border-left-width", 2288 | "border-right-width", 2289 | "border-top-width", 2290 | "flex-basis", 2291 | "font-size", 2292 | "height", 2293 | "line-height", 2294 | "max-height", 2295 | "max-width", 2296 | "outline-width", 2297 | "width", 2298 | ]), 2299 | a.addPropertiesHandler(i, f, [ 2300 | "border-bottom-left-radius", 2301 | "border-bottom-right-radius", 2302 | "border-top-left-radius", 2303 | "border-top-right-radius", 2304 | "bottom", 2305 | "left", 2306 | "letter-spacing", 2307 | "margin-bottom", 2308 | "margin-left", 2309 | "margin-right", 2310 | "margin-top", 2311 | "min-height", 2312 | "min-width", 2313 | "outline-offset", 2314 | "padding-bottom", 2315 | "padding-left", 2316 | "padding-right", 2317 | "padding-top", 2318 | "perspective", 2319 | "right", 2320 | "shape-margin", 2321 | "stroke-dashoffset", 2322 | "text-indent", 2323 | "top", 2324 | "vertical-align", 2325 | "word-spacing", 2326 | ]) 2327 | })(b), 2328 | (function (a, b) { 2329 | function c(b) { 2330 | return a.consumeLengthOrPercent(b) || a.consumeToken(/^auto/, b) 2331 | } 2332 | function d(b) { 2333 | var d = a.consumeList( 2334 | [ 2335 | a.ignore(a.consumeToken.bind(null, /^rect/)), 2336 | a.ignore(a.consumeToken.bind(null, /^\(/)), 2337 | a.consumeRepeated.bind(null, c, /^,/), 2338 | a.ignore(a.consumeToken.bind(null, /^\)/)), 2339 | ], 2340 | b, 2341 | ) 2342 | if (d && 4 == d[0].length) return d[0] 2343 | } 2344 | function e(b, c) { 2345 | return "auto" == b || "auto" == c 2346 | ? [ 2347 | !0, 2348 | !1, 2349 | function (d) { 2350 | var e = d ? b : c 2351 | if ("auto" == e) return "auto" 2352 | var f = a.mergeDimensions(e, e) 2353 | return f[2](f[0]) 2354 | }, 2355 | ] 2356 | : a.mergeDimensions(b, c) 2357 | } 2358 | function f(a) { 2359 | return "rect(" + a + ")" 2360 | } 2361 | var g = a.mergeWrappedNestedRepeated.bind(null, f, e, ", ") 2362 | ;(a.parseBox = d), (a.mergeBoxes = g), a.addPropertiesHandler(d, g, ["clip"]) 2363 | })(b), 2364 | (function (a, b) { 2365 | function c(a) { 2366 | return function (b) { 2367 | var c = 0 2368 | return a.map(function (a) { 2369 | return a === k ? b[c++] : a 2370 | }) 2371 | } 2372 | } 2373 | function d(a) { 2374 | return a 2375 | } 2376 | function e(b) { 2377 | if ("none" == (b = b.toLowerCase().trim())) return [] 2378 | for (var c, d = /\s*(\w+)\(([^)]*)\)/g, e = [], f = 0; (c = d.exec(b)); ) { 2379 | if (c.index != f) return 2380 | f = c.index + c[0].length 2381 | var g = c[1], 2382 | h = n[g] 2383 | if (!h) return 2384 | var i = c[2].split(","), 2385 | j = h[0] 2386 | if (j.length < i.length) return 2387 | for (var k = [], o = 0; o < j.length; o++) { 2388 | var p, 2389 | q = i[o], 2390 | r = j[o] 2391 | if ( 2392 | void 0 === 2393 | (p = q 2394 | ? { 2395 | A: function (b) { 2396 | return "0" == b.trim() ? m : a.parseAngle(b) 2397 | }, 2398 | N: a.parseNumber, 2399 | T: a.parseLengthOrPercent, 2400 | L: a.parseLength, 2401 | }[r.toUpperCase()](q) 2402 | : {a: m, n: k[0], t: l}[r]) 2403 | ) 2404 | return 2405 | k.push(p) 2406 | } 2407 | if ((e.push({t: g, d: k}), d.lastIndex == b.length)) return e 2408 | } 2409 | } 2410 | function f(a) { 2411 | return a.toFixed(6).replace(".000000", "") 2412 | } 2413 | function g(b, c) { 2414 | if (b.decompositionPair !== c) { 2415 | b.decompositionPair = c 2416 | var d = a.makeMatrixDecomposition(b) 2417 | } 2418 | if (c.decompositionPair !== b) { 2419 | c.decompositionPair = b 2420 | var e = a.makeMatrixDecomposition(c) 2421 | } 2422 | return null == d[0] || null == e[0] 2423 | ? [ 2424 | [!1], 2425 | [!0], 2426 | function (a) { 2427 | return a ? c[0].d : b[0].d 2428 | }, 2429 | ] 2430 | : (d[0].push(0), 2431 | e[0].push(1), 2432 | [ 2433 | d, 2434 | e, 2435 | function (b) { 2436 | var c = a.quat(d[0][3], e[0][3], b[5]) 2437 | return a 2438 | .composeMatrix(b[0], b[1], b[2], c, b[4]) 2439 | .map(f) 2440 | .join(",") 2441 | }, 2442 | ]) 2443 | } 2444 | function h(a) { 2445 | return a.replace(/[xy]/, "") 2446 | } 2447 | function i(a) { 2448 | return a.replace(/(x|y|z|3d)?$/, "3d") 2449 | } 2450 | function j(b, c) { 2451 | var d = a.makeMatrixDecomposition && !0, 2452 | e = !1 2453 | if (!b.length || !c.length) { 2454 | b.length || ((e = !0), (b = c), (c = [])) 2455 | for (var f = 0; f < b.length; f++) { 2456 | var j = b[f].t, 2457 | k = b[f].d, 2458 | l = "scale" == j.substr(0, 5) ? 1 : 0 2459 | c.push({ 2460 | t: j, 2461 | d: k.map(function (a) { 2462 | if ("number" == typeof a) return l 2463 | var b = {} 2464 | for (var c in a) b[c] = l 2465 | return b 2466 | }), 2467 | }) 2468 | } 2469 | } 2470 | var m = function (a, b) { 2471 | return ( 2472 | ("perspective" == a && "perspective" == b) || 2473 | (("matrix" == a || "matrix3d" == a) && 2474 | ("matrix" == b || "matrix3d" == b)) 2475 | ) 2476 | }, 2477 | o = [], 2478 | p = [], 2479 | q = [] 2480 | if (b.length != c.length) { 2481 | if (!d) return 2482 | var r = g(b, c) 2483 | ;(o = [r[0]]), (p = [r[1]]), (q = [["matrix", [r[2]]]]) 2484 | } else 2485 | for (var f = 0; f < b.length; f++) { 2486 | var j, 2487 | s = b[f].t, 2488 | t = c[f].t, 2489 | u = b[f].d, 2490 | v = c[f].d, 2491 | w = n[s], 2492 | x = n[t] 2493 | if (m(s, t)) { 2494 | if (!d) return 2495 | var r = g([b[f]], [c[f]]) 2496 | o.push(r[0]), p.push(r[1]), q.push(["matrix", [r[2]]]) 2497 | } else { 2498 | if (s == t) j = s 2499 | else if (w[2] && x[2] && h(s) == h(t)) 2500 | (j = h(s)), (u = w[2](u)), (v = x[2](v)) 2501 | else { 2502 | if (!w[1] || !x[1] || i(s) != i(t)) { 2503 | if (!d) return 2504 | var r = g(b, c) 2505 | ;(o = [r[0]]), (p = [r[1]]), (q = [["matrix", [r[2]]]]) 2506 | break 2507 | } 2508 | ;(j = i(s)), (u = w[1](u)), (v = x[1](v)) 2509 | } 2510 | for (var y = [], z = [], A = [], B = 0; B < u.length; B++) { 2511 | var C = 2512 | "number" == typeof u[B] 2513 | ? a.mergeNumbers 2514 | : a.mergeDimensions, 2515 | r = C(u[B], v[B]) 2516 | ;(y[B] = r[0]), (z[B] = r[1]), A.push(r[2]) 2517 | } 2518 | o.push(y), p.push(z), q.push([j, A]) 2519 | } 2520 | } 2521 | if (e) { 2522 | var D = o 2523 | ;(o = p), (p = D) 2524 | } 2525 | return [ 2526 | o, 2527 | p, 2528 | function (a) { 2529 | return a 2530 | .map(function (a, b) { 2531 | var c = a 2532 | .map(function (a, c) { 2533 | return q[b][1][c](a) 2534 | }) 2535 | .join(",") 2536 | return ( 2537 | "matrix" == q[b][0] && 2538 | 16 == c.split(",").length && 2539 | (q[b][0] = "matrix3d"), 2540 | q[b][0] + "(" + c + ")" 2541 | ) 2542 | }) 2543 | .join(" ") 2544 | }, 2545 | ] 2546 | } 2547 | var k = null, 2548 | l = {px: 0}, 2549 | m = {deg: 0}, 2550 | n = { 2551 | matrix: ["NNNNNN", [k, k, 0, 0, k, k, 0, 0, 0, 0, 1, 0, k, k, 0, 1], d], 2552 | matrix3d: ["NNNNNNNNNNNNNNNN", d], 2553 | rotate: ["A"], 2554 | rotatex: ["A"], 2555 | rotatey: ["A"], 2556 | rotatez: ["A"], 2557 | rotate3d: ["NNNA"], 2558 | perspective: ["L"], 2559 | scale: ["Nn", c([k, k, 1]), d], 2560 | scalex: ["N", c([k, 1, 1]), c([k, 1])], 2561 | scaley: ["N", c([1, k, 1]), c([1, k])], 2562 | scalez: ["N", c([1, 1, k])], 2563 | scale3d: ["NNN", d], 2564 | skew: ["Aa", null, d], 2565 | skewx: ["A", null, c([k, m])], 2566 | skewy: ["A", null, c([m, k])], 2567 | translate: ["Tt", c([k, k, l]), d], 2568 | translatex: ["T", c([k, l, l]), c([k, l])], 2569 | translatey: ["T", c([l, k, l]), c([l, k])], 2570 | translatez: ["L", c([l, l, k])], 2571 | translate3d: ["TTL", d], 2572 | } 2573 | a.addPropertiesHandler(e, j, ["transform"]), 2574 | (a.transformToSvgMatrix = function (b) { 2575 | var c = a.transformListToMatrix(e(b)) 2576 | return ( 2577 | "matrix(" + 2578 | f(c[0]) + 2579 | " " + 2580 | f(c[1]) + 2581 | " " + 2582 | f(c[4]) + 2583 | " " + 2584 | f(c[5]) + 2585 | " " + 2586 | f(c[12]) + 2587 | " " + 2588 | f(c[13]) + 2589 | ")" 2590 | ) 2591 | }) 2592 | })(b), 2593 | (function (a) { 2594 | function b(a) { 2595 | var b = Number(a) 2596 | if (!(isNaN(b) || b < 100 || b > 900 || b % 100 != 0)) return b 2597 | } 2598 | function c(b) { 2599 | return ( 2600 | (b = 100 * Math.round(b / 100)), 2601 | (b = a.clamp(100, 900, b)), 2602 | 400 === b ? "normal" : 700 === b ? "bold" : String(b) 2603 | ) 2604 | } 2605 | function d(a, b) { 2606 | return [a, b, c] 2607 | } 2608 | a.addPropertiesHandler(b, d, ["font-weight"]) 2609 | })(b), 2610 | (function (a) { 2611 | function b(a) { 2612 | var b = {} 2613 | for (var c in a) b[c] = -a[c] 2614 | return b 2615 | } 2616 | function c(b) { 2617 | return ( 2618 | a.consumeToken(/^(left|center|right|top|bottom)\b/i, b) || 2619 | a.consumeLengthOrPercent(b) 2620 | ) 2621 | } 2622 | function d(b, d) { 2623 | var e = a.consumeRepeated(c, /^/, d) 2624 | if (e && "" == e[1]) { 2625 | var f = e[0] 2626 | if ( 2627 | ((f[0] = f[0] || "center"), 2628 | (f[1] = f[1] || "center"), 2629 | 3 == b && (f[2] = f[2] || {px: 0}), 2630 | f.length == b) 2631 | ) { 2632 | if (/top|bottom/.test(f[0]) || /left|right/.test(f[1])) { 2633 | var h = f[0] 2634 | ;(f[0] = f[1]), (f[1] = h) 2635 | } 2636 | if ( 2637 | /left|right|center|Object/.test(f[0]) && 2638 | /top|bottom|center|Object/.test(f[1]) 2639 | ) 2640 | return f.map(function (a) { 2641 | return "object" == typeof a ? a : g[a] 2642 | }) 2643 | } 2644 | } 2645 | } 2646 | function e(d) { 2647 | var e = a.consumeRepeated(c, /^/, d) 2648 | if (e) { 2649 | for ( 2650 | var f = e[0], h = [{"%": 50}, {"%": 50}], i = 0, j = !1, k = 0; 2651 | k < f.length; 2652 | k++ 2653 | ) { 2654 | var l = f[k] 2655 | "string" == typeof l 2656 | ? ((j = /bottom|right/.test(l)), 2657 | (i = {left: 0, right: 0, center: i, top: 1, bottom: 1}[l]), 2658 | (h[i] = g[l]), 2659 | "center" == l && i++) 2660 | : (j && ((l = b(l)), (l["%"] = (l["%"] || 0) + 100)), 2661 | (h[i] = l), 2662 | i++, 2663 | (j = !1)) 2664 | } 2665 | return [h, e[1]] 2666 | } 2667 | } 2668 | function f(b) { 2669 | var c = a.consumeRepeated(e, /^,/, b) 2670 | if (c && "" == c[1]) return c[0] 2671 | } 2672 | var g = { 2673 | left: {"%": 0}, 2674 | center: {"%": 50}, 2675 | right: {"%": 100}, 2676 | top: {"%": 0}, 2677 | bottom: {"%": 100}, 2678 | }, 2679 | h = a.mergeNestedRepeated.bind(null, a.mergeDimensions, " ") 2680 | a.addPropertiesHandler(d.bind(null, 3), h, ["transform-origin"]), 2681 | a.addPropertiesHandler(d.bind(null, 2), h, ["perspective-origin"]), 2682 | (a.consumePosition = e), 2683 | (a.mergeOffsetList = h) 2684 | var i = a.mergeNestedRepeated.bind(null, h, ", ") 2685 | a.addPropertiesHandler(f, i, ["background-position", "object-position"]) 2686 | })(b), 2687 | (function (a) { 2688 | function b(b) { 2689 | var c = a.consumeToken(/^circle/, b) 2690 | if (c && c[0]) 2691 | return ["circle"].concat( 2692 | a.consumeList( 2693 | [ 2694 | a.ignore(a.consumeToken.bind(void 0, /^\(/)), 2695 | d, 2696 | a.ignore(a.consumeToken.bind(void 0, /^at/)), 2697 | a.consumePosition, 2698 | a.ignore(a.consumeToken.bind(void 0, /^\)/)), 2699 | ], 2700 | c[1], 2701 | ), 2702 | ) 2703 | var f = a.consumeToken(/^ellipse/, b) 2704 | if (f && f[0]) 2705 | return ["ellipse"].concat( 2706 | a.consumeList( 2707 | [ 2708 | a.ignore(a.consumeToken.bind(void 0, /^\(/)), 2709 | e, 2710 | a.ignore(a.consumeToken.bind(void 0, /^at/)), 2711 | a.consumePosition, 2712 | a.ignore(a.consumeToken.bind(void 0, /^\)/)), 2713 | ], 2714 | f[1], 2715 | ), 2716 | ) 2717 | var g = a.consumeToken(/^polygon/, b) 2718 | return g && g[0] 2719 | ? ["polygon"].concat( 2720 | a.consumeList( 2721 | [ 2722 | a.ignore(a.consumeToken.bind(void 0, /^\(/)), 2723 | a.optional( 2724 | a.consumeToken.bind( 2725 | void 0, 2726 | /^nonzero\s*,|^evenodd\s*,/, 2727 | ), 2728 | "nonzero,", 2729 | ), 2730 | a.consumeSizePairList, 2731 | a.ignore(a.consumeToken.bind(void 0, /^\)/)), 2732 | ], 2733 | g[1], 2734 | ), 2735 | ) 2736 | : void 0 2737 | } 2738 | function c(b, c) { 2739 | if (b[0] === c[0]) 2740 | return "circle" == b[0] 2741 | ? a.mergeList(b.slice(1), c.slice(1), [ 2742 | "circle(", 2743 | a.mergeDimensions, 2744 | " at ", 2745 | a.mergeOffsetList, 2746 | ")", 2747 | ]) 2748 | : "ellipse" == b[0] 2749 | ? a.mergeList(b.slice(1), c.slice(1), [ 2750 | "ellipse(", 2751 | a.mergeNonNegativeSizePair, 2752 | " at ", 2753 | a.mergeOffsetList, 2754 | ")", 2755 | ]) 2756 | : "polygon" == b[0] && b[1] == c[1] 2757 | ? a.mergeList(b.slice(2), c.slice(2), [ 2758 | "polygon(", 2759 | b[1], 2760 | g, 2761 | ")", 2762 | ]) 2763 | : void 0 2764 | } 2765 | var d = a.consumeParenthesised.bind(null, a.parseLengthOrPercent), 2766 | e = a.consumeRepeated.bind(void 0, d, /^/), 2767 | f = a.mergeNestedRepeated.bind(void 0, a.mergeDimensions, " "), 2768 | g = a.mergeNestedRepeated.bind(void 0, f, ",") 2769 | a.addPropertiesHandler(b, c, ["shape-outside"]) 2770 | })(b), 2771 | (function (a, b) { 2772 | function c(a, b) { 2773 | b.concat([a]).forEach(function (b) { 2774 | b in document.documentElement.style && (d[a] = b), (e[b] = a) 2775 | }) 2776 | } 2777 | var d = {}, 2778 | e = {} 2779 | c("transform", ["webkitTransform", "msTransform"]), 2780 | c("transformOrigin", ["webkitTransformOrigin"]), 2781 | c("perspective", ["webkitPerspective"]), 2782 | c("perspectiveOrigin", ["webkitPerspectiveOrigin"]), 2783 | (a.propertyName = function (a) { 2784 | return d[a] || a 2785 | }), 2786 | (a.unprefixedPropertyName = function (a) { 2787 | return e[a] || a 2788 | }) 2789 | })(b) 2790 | })(), 2791 | (function () { 2792 | if (void 0 === document.createElement("div").animate([]).oncancel) { 2793 | var a 2794 | if (window.performance && performance.now) 2795 | var a = function () { 2796 | return performance.now() 2797 | } 2798 | else 2799 | var a = function () { 2800 | return Date.now() 2801 | } 2802 | var b = function (a, b, c) { 2803 | ;(this.target = a), 2804 | (this.currentTime = b), 2805 | (this.timelineTime = c), 2806 | (this.type = "cancel"), 2807 | (this.bubbles = !1), 2808 | (this.cancelable = !1), 2809 | (this.currentTarget = a), 2810 | (this.defaultPrevented = !1), 2811 | (this.eventPhase = Event.AT_TARGET), 2812 | (this.timeStamp = Date.now()) 2813 | }, 2814 | c = window.Element.prototype.animate 2815 | window.Element.prototype.animate = function (d, e) { 2816 | var f = c.call(this, d, e) 2817 | ;(f._cancelHandlers = []), (f.oncancel = null) 2818 | var g = f.cancel 2819 | f.cancel = function () { 2820 | g.call(this) 2821 | var c = new b(this, null, a()), 2822 | d = this._cancelHandlers.concat(this.oncancel ? [this.oncancel] : []) 2823 | setTimeout(function () { 2824 | d.forEach(function (a) { 2825 | a.call(c.target, c) 2826 | }) 2827 | }, 0) 2828 | } 2829 | var h = f.addEventListener 2830 | f.addEventListener = function (a, b) { 2831 | "function" == typeof b && "cancel" == a 2832 | ? this._cancelHandlers.push(b) 2833 | : h.call(this, a, b) 2834 | } 2835 | var i = f.removeEventListener 2836 | return ( 2837 | (f.removeEventListener = function (a, b) { 2838 | if ("cancel" == a) { 2839 | var c = this._cancelHandlers.indexOf(b) 2840 | c >= 0 && this._cancelHandlers.splice(c, 1) 2841 | } else i.call(this, a, b) 2842 | }), 2843 | f 2844 | ) 2845 | } 2846 | } 2847 | })(), 2848 | (function (a) { 2849 | var b = document.documentElement, 2850 | c = null, 2851 | d = !1 2852 | try { 2853 | var e = getComputedStyle(b).getPropertyValue("opacity"), 2854 | f = "0" == e ? "1" : "0" 2855 | ;(c = b.animate({opacity: [f, f]}, {duration: 1})), 2856 | (c.currentTime = 0), 2857 | (d = getComputedStyle(b).getPropertyValue("opacity") == f) 2858 | } catch (a) { 2859 | } finally { 2860 | c && c.cancel() 2861 | } 2862 | if (!d) { 2863 | var g = window.Element.prototype.animate 2864 | window.Element.prototype.animate = function (b, c) { 2865 | return ( 2866 | window.Symbol && 2867 | Symbol.iterator && 2868 | Array.prototype.from && 2869 | b[Symbol.iterator] && 2870 | (b = Array.from(b)), 2871 | Array.isArray(b) || null === b || (b = a.convertToArrayForm(b)), 2872 | g.call(this, b, c) 2873 | ) 2874 | } 2875 | } 2876 | })(a) 2877 | })() 2878 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "NodeNext", 5 | "moduleResolution": "NodeNext", 6 | "lib": ["ESNext"], 7 | "newLine": "LF", 8 | "types": [], 9 | /* 10 | referenced configs cannot have "noEmit": true 11 | which conflicts with allowing js files 12 | */ 13 | "outDir": "dist", 14 | "allowJs": true, 15 | "checkJs": false, 16 | /* 17 | Lint rules 18 | */ 19 | "strict": true, 20 | "isolatedModules": true, 21 | "allowSyntheticDefaultImports": true, 22 | "esModuleInterop": true, 23 | "skipLibCheck": true, 24 | "forceConsistentCasingInFileNames": true, 25 | "noPropertyAccessFromIndexSignature": true, 26 | "noUncheckedIndexedAccess": true 27 | }, 28 | "exclude": ["node_modules", "dist"] 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "lib": ["ESNext", "DOM"], 5 | "jsx": "preserve", 6 | "jsxImportSource": "solid-js" 7 | }, 8 | "include": ["src"], 9 | "references": [{"path": "./tsconfig.node.json"}] 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "checkJs": true, 6 | "types": ["node"] 7 | }, 8 | "include": ["./tsup.config.ts", "jest"] 9 | } 10 | -------------------------------------------------------------------------------- /tsup.config.ts: -------------------------------------------------------------------------------- 1 | import * as tsup from "tsup" 2 | import * as preset from "tsup-preset-solid" 3 | 4 | const preset_options: preset.PresetOptions = { 5 | entries: {entry: "src/index.tsx"}, 6 | drop_console: true, 7 | cjs: true, 8 | } 9 | 10 | export default tsup.defineConfig(config => { 11 | const watching = !!config.watch 12 | 13 | const parsed_data = preset.parsePresetOptions(preset_options, watching) 14 | 15 | if (!watching) { 16 | const package_fields = preset.generatePackageExports(parsed_data) 17 | 18 | // eslint-disable-next-line no-console 19 | console.log(`package.json: \n\n${JSON.stringify(package_fields, null, 2)}\n\n`) 20 | 21 | /* 22 | will update ./package.json with the correct export fields 23 | */ 24 | preset.writePackageJson(package_fields) 25 | } 26 | 27 | return preset.generateTsupOptions(parsed_data) 28 | }) 29 | --------------------------------------------------------------------------------