cargdev/angular
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): ensure animations work with web-workers (#12656)

Browse Source
This commit is contained in:
Matias Niemelä
2016-11-10 11:53:50 -08:00
committed by Victor Berchet
parent 7cab30f85d
commit 19e869e7c9
16 changed files with 765 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
modules/playground/src/web_workers/animations/background_index.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {NgModule} from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {AnimationCmp} from './index_common';
@NgModule({imports: [WorkerAppModule], bootstrap: [AnimationCmp], declarations: [AnimationCmp]})
class ExampleModule {
}
export function main() {
platformWorkerAppDynamic().bootstrapModule(ExampleModule);
}

14
modules/playground/src/web_workers/animations/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<title>WebWorker Animation Tests</title>
<style>
</style>
<body>
<animation-app>
Loading...
</animation-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations-next-lite.min.js"></script>
<script src="../../bootstrap.js"></script>
</body>
</html>

13
modules/playground/src/web_workers/animations/index.ts Normal file
View File

@ -0,0 +1,13 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {bootstrapWorkerUi} from '@angular/platform-webworker';
export function main() {
bootstrapWorkerUi('loader.js');
}

42
modules/playground/src/web_workers/animations/index_common.ts Normal file
View File

@ -0,0 +1,42 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Component, animate, state, style, transition, trigger} from '@angular/core';
@Component({
selector: 'animation-app',
styles: [`
.box {
border:10px solid black;
text-align:center;
overflow:hidden;
background:red;
color:white;
font-size:100px;
line-height:200px;
}
`],
animations: [trigger(
'animate',
[
state('off', style({width: '0px'})), state('on', style({width: '750px'})),
transition('off <=> on', animate(500))
])],
template: `
<button (click)="animate=!animate">
Start Animation
</button>
<div class="box" [@animate]="animate ? 'on' : 'off'">
...
</div>
`
})
export class AnimationCmp {
animate = false;
}

43
modules/playground/src/web_workers/animations/loader.js Normal file
View File

@ -0,0 +1,43 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
importScripts(
'../../../vendor/core.js', '../../../vendor/zone.js',
'../../../vendor/long-stack-trace-zone.js', '../../../vendor/system.src.js',
'../../../vendor/Reflect.js');
System.config({
baseURL: '/all',
map: {'rxjs': '/all/playground/vendor/rxjs'},
packages: {
'@angular/core': {main: 'index.js', defaultExtension: 'js'},
'@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
'@angular/common': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-browser': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-browser-dynamic': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
'@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
'rxjs': {defaultExtension: 'js'},
},
defaultJSExtensions: true
});
System.import('playground/src/web_workers/animations/background_index')
.then(
function(m) {
try {
m.main();
} catch (e) {
console.error(e);
}
},
function(error) { console.error('error loading background', error); });