@@ -3,206 +3,157 @@ import { AnimationDriver } from '@angular/animations/browser';
3
3
import { ProxyViewContainer , eachDescendant , CssAnimationProperty , CSSHelper } from '@nativescript/core' ;
4
4
5
5
import { NativeScriptAnimationPlayer } from './animation-player' ;
6
- import {
7
- Keyframe ,
8
- dashCaseToCamelCase ,
9
- } from './utils' ;
6
+ import { Keyframe , dashCaseToCamelCase } from './utils' ;
10
7
import { NgView , InvisibleNode } from '../element-registry' ;
11
8
import { NativeScriptDebug } from '../trace' ;
12
9
13
-
14
10
interface ViewMatchResult {
15
- found : boolean ;
11
+ found : boolean ;
16
12
}
17
13
18
14
interface ViewMatchParams {
19
- originalView : NgView ;
15
+ originalView : NgView ;
20
16
}
21
17
22
18
interface QueryParams {
23
- selector : Selector ;
24
- multi : boolean ;
19
+ selector : Selector ;
20
+ multi : boolean ;
25
21
}
26
22
27
23
interface QueryResult {
28
- matches : NgView [ ] ;
24
+ matches : NgView [ ] ;
29
25
}
30
26
31
27
class Selector {
32
- private nsSelectors : CSSHelper . SelectorCore [ ] ;
33
- private classSelectors : string [ ] ;
34
-
35
- constructor ( rawSelector : string ) {
36
- this . parse ( rawSelector ) ;
37
- }
38
-
39
- match ( element : NgView ) : boolean {
40
- return this . nsSelectorMatch ( element ) || this . classSelectorsMatch ( element ) ;
41
- }
42
-
43
- private parse ( rawSelector : string ) {
44
- const selectors = rawSelector . split ( ',' ) . map ( s => s . trim ( ) ) ;
45
-
46
- this . nsSelectors = selectors . map ( CSSHelper . createSelector ) ;
47
- this . classSelectors = selectors
48
- . filter ( s => s . startsWith ( '.' ) )
49
- . map ( s => s . substring ( 1 ) ) ;
50
- }
51
-
52
- private nsSelectorMatch ( element : NgView ) {
53
- return this . nsSelectors . some ( s => s . match ( element ) ) ;
54
- }
55
-
56
- private classSelectorsMatch ( element : NgView ) {
57
- return this . classSelectors . some ( s => this . hasClass ( element , s ) ) ;
58
- }
59
-
60
- // we're using that instead of match for classes
61
- // that are dynamically added by the animation engine
62
- // such as .ng-trigger, that's added for every :enter view
63
- private hasClass ( element : NgView , cls : string ) {
64
- return element && element [ '$$classes' ] && element [ '$$classes' ] [ cls ] ;
65
- }
28
+ private nsSelectors : CSSHelper . SelectorCore [ ] ;
29
+ private classSelectors : string [ ] ;
30
+
31
+ constructor ( rawSelector : string ) {
32
+ this . parse ( rawSelector ) ;
33
+ }
34
+
35
+ match ( element : NgView ) : boolean {
36
+ return this . nsSelectorMatch ( element ) || this . classSelectorsMatch ( element ) ;
37
+ }
38
+
39
+ private parse ( rawSelector : string ) {
40
+ const selectors = rawSelector . split ( ',' ) . map ( ( s ) => s . trim ( ) ) ;
41
+
42
+ this . nsSelectors = selectors . map ( CSSHelper . createSelector ) ;
43
+ this . classSelectors = selectors . filter ( ( s ) => s . startsWith ( '.' ) ) . map ( ( s ) => s . substring ( 1 ) ) ;
44
+ }
45
+
46
+ private nsSelectorMatch ( element : NgView ) {
47
+ return this . nsSelectors . some ( ( s ) => s . match ( element ) ) ;
48
+ }
49
+
50
+ private classSelectorsMatch ( element : NgView ) {
51
+ return this . classSelectors . some ( ( s ) => this . hasClass ( element , s ) ) ;
52
+ }
53
+
54
+ // we're using that instead of match for classes
55
+ // that are dynamically added by the animation engine
56
+ // such as .ng-trigger, that's added for every :enter view
57
+ private hasClass ( element : NgView , cls : string ) {
58
+ return element && element [ '$$classes' ] && element [ '$$classes' ] [ cls ] ;
59
+ }
66
60
}
67
61
68
62
export class NativeScriptAnimationDriver implements AnimationDriver {
69
- private static validProperties = [
70
- ...CssAnimationProperty . _getPropertyNames ( ) ,
71
- 'transform' ,
72
- ] ;
73
-
74
- validateStyleProperty ( property : string ) : boolean {
75
- NativeScriptDebug . animationsLog ( `CssAnimationProperty.validateStyleProperty: ${ property } ` ) ;
76
- return NativeScriptAnimationDriver . validProperties . indexOf ( property ) !== - 1 ;
77
- }
78
-
79
- matchesElement ( element : NgView , rawSelector : string ) : boolean {
80
- NativeScriptDebug . animationsLog (
81
- `NativeScriptAnimationDriver.matchesElement ` +
82
- `element: ${ element } , selector: ${ rawSelector } `
83
- ) ;
84
-
85
- const selector = this . makeSelector ( rawSelector ) ;
86
- return selector . match ( element ) ;
87
- }
88
-
89
-
90
- containsElement ( elm1 : NgView , elm2 : NgView ) : boolean {
91
- NativeScriptDebug . animationsLog (
92
- `NativeScriptAnimationDriver.containsElement ` +
93
- `element1: ${ elm1 } , element2: ${ elm2 } `
94
- ) ;
95
-
96
- // Checking if the parent is our fake body object
97
- if ( elm1 [ 'isOverride' ] ) {
98
- return true ;
99
- }
100
-
101
- const params : ViewMatchParams = { originalView : elm2 } ;
102
- const result : ViewMatchResult = this . visitDescendants ( elm1 , viewMatches , params ) ;
103
-
104
- return result . found ;
105
- }
106
-
107
- query ( element : NgView , rawSelector : string , multi : boolean ) : NgView [ ] {
108
- NativeScriptDebug . animationsLog (
109
- `NativeScriptAnimationDriver.query ` +
110
- `element: ${ element } , selector: ${ rawSelector } ` +
111
- `multi: ${ multi } `
112
- ) ;
113
-
114
- const selector = this . makeSelector ( rawSelector ) ;
115
- const params : QueryParams = { selector, multi } ;
116
- const result : QueryResult = this . visitDescendants ( element , queryDescendants , params ) ;
117
-
118
- return result . matches || [ ] ;
119
- }
120
-
121
- computeStyle ( element : NgView , prop : string ) : string {
122
- NativeScriptDebug . animationsLog (
123
- `NativeScriptAnimationDriver.computeStyle ` +
124
- `element: ${ element } , prop: ${ prop } `
125
- ) ;
126
-
127
- const camelCaseProp = dashCaseToCamelCase ( prop ) ;
128
- return element . style [ camelCaseProp ] ;
129
- }
130
-
131
- animate (
132
- element : NgView ,
133
- keyframes : Keyframe [ ] ,
134
- duration : number ,
135
- delay : number ,
136
- easing : string
137
- ) : AnimationPlayer {
138
- NativeScriptDebug . animationsLog (
139
- `NativeScriptAnimationDriver.animate ` +
140
- `element: ${ element } , keyframes: ${ keyframes } ` +
141
- `duration: ${ duration } , delay: ${ delay } ` +
142
- `easing: ${ easing } `
143
- ) ;
144
-
145
- return new NativeScriptAnimationPlayer (
146
- element , keyframes , duration , delay , easing ) ;
147
- }
148
-
149
- private makeSelector ( rawSelector : string ) : Selector {
150
- return new Selector ( rawSelector ) ;
151
- }
152
-
153
- private visitDescendants (
154
- element : NgView ,
155
- cb : ( child : NgView , result : any , params : any ) => boolean ,
156
- cbParams : any ) : any {
157
-
158
- const result = { } ;
159
- // fill the result obj with the result from the callback function
160
- eachDescendant ( element , ( child : NgView ) => cb ( child , result , cbParams ) ) ;
161
-
162
- return result ;
163
- }
164
- }
63
+ private static validProperties = [ ...CssAnimationProperty . _getPropertyNames ( ) , 'transform' ] ;
64
+
65
+ validateStyleProperty ( property : string ) : boolean {
66
+ NativeScriptDebug . animationsLog ( `CssAnimationProperty.validateStyleProperty: ${ property } ` ) ;
67
+ return NativeScriptAnimationDriver . validProperties . indexOf ( property ) !== - 1 ;
68
+ }
69
+
70
+ matchesElement ( element : NgView , rawSelector : string ) : boolean {
71
+ NativeScriptDebug . animationsLog ( `NativeScriptAnimationDriver.matchesElement ` + `element: ${ element } , selector: ${ rawSelector } ` ) ;
72
+
73
+ const selector = this . makeSelector ( rawSelector ) ;
74
+ return selector . match ( element ) ;
75
+ }
76
+
77
+ containsElement ( elm1 : NgView , elm2 : NgView ) : boolean {
78
+ NativeScriptDebug . animationsLog ( `NativeScriptAnimationDriver.containsElement ` + `element1: ${ elm1 } , element2: ${ elm2 } ` ) ;
79
+
80
+ // Checking if the parent is our fake body object
81
+ if ( elm1 [ 'isOverride' ] ) {
82
+ return true ;
83
+ }
84
+
85
+ const params : ViewMatchParams = { originalView : elm2 } ;
86
+ const result : ViewMatchResult = this . visitDescendants ( elm1 , viewMatches , params ) ;
87
+
88
+ return result . found ;
89
+ }
90
+
91
+ query ( element : NgView , rawSelector : string , multi : boolean ) : NgView [ ] {
92
+ NativeScriptDebug . animationsLog ( `NativeScriptAnimationDriver.query ` + `element: ${ element } , selector: ${ rawSelector } ` + `multi: ${ multi } ` ) ;
165
93
166
- function viewMatches (
167
- element : NgView ,
168
- result : ViewMatchResult ,
169
- params : ViewMatchParams
170
- ) : boolean {
94
+ const selector = this . makeSelector ( rawSelector ) ;
95
+ const params : QueryParams = { selector, multi } ;
96
+ const result : QueryResult = this . visitDescendants ( element , queryDescendants , params ) ;
97
+
98
+ return result . matches || [ ] ;
99
+ }
100
+
101
+ computeStyle ( element : NgView , prop : string ) : string {
102
+ NativeScriptDebug . animationsLog ( `NativeScriptAnimationDriver.computeStyle ` + `element: ${ element } , prop: ${ prop } ` ) ;
103
+
104
+ const camelCaseProp = dashCaseToCamelCase ( prop ) ;
105
+ return element . style [ camelCaseProp ] ;
106
+ }
107
+
108
+ animate ( element : NgView , keyframes : Keyframe [ ] , duration : number , delay : number , easing : string ) : AnimationPlayer {
109
+ NativeScriptDebug . animationsLog ( `NativeScriptAnimationDriver.animate ` + `element: ${ element } , keyframes: ${ keyframes } ` + `duration: ${ duration } , delay: ${ delay } ` + `easing: ${ easing } ` ) ;
110
+
111
+ return new NativeScriptAnimationPlayer ( element , keyframes , duration , delay , easing ) ;
112
+ }
113
+
114
+ private makeSelector ( rawSelector : string ) : Selector {
115
+ return new Selector ( rawSelector ) ;
116
+ }
117
+
118
+ private visitDescendants ( element : NgView , cb : ( child : NgView , result : any , params : any ) => boolean , cbParams : any ) : any {
119
+ const result = { } ;
120
+ // fill the result obj with the result from the callback function
121
+ eachDescendant ( element , ( child : NgView ) => cb ( child , result , cbParams ) ) ;
122
+
123
+ return result ;
124
+ }
125
+ }
171
126
172
- if ( element === params . originalView ) {
173
- result . found = true ;
174
- }
127
+ function viewMatches ( element : NgView , result : ViewMatchResult , params : ViewMatchParams ) : boolean {
128
+ if ( element === params . originalView ) {
129
+ result . found = true ;
130
+ }
175
131
176
- return ! result . found ;
132
+ return ! result . found ;
177
133
}
178
134
179
- function queryDescendants (
180
- element : NgView ,
181
- result : QueryResult ,
182
- params : QueryParams
183
- ) : boolean {
184
-
185
- if ( ! result . matches ) {
186
- result . matches = [ ] ;
187
- }
188
-
189
- const { selector, multi } = params ;
190
-
191
- // skip comment and text nodes
192
- // because they are not actual Views
193
- // and cannot be animated
194
- if ( element instanceof InvisibleNode || ! selector . match ( element ) ) {
195
- return true ;
196
- }
197
-
198
- if ( element instanceof ProxyViewContainer ) {
199
- element . eachChild ( ( child : NgView ) => {
200
- result . matches . push ( child ) ;
201
- return true ;
202
- } ) ;
203
- } else {
204
- result . matches . push ( element ) ;
205
- }
206
-
207
- return multi ;
135
+ function queryDescendants ( element : NgView , result : QueryResult , params : QueryParams ) : boolean {
136
+ if ( ! result . matches ) {
137
+ result . matches = [ ] ;
138
+ }
139
+
140
+ const { selector, multi } = params ;
141
+
142
+ // skip comment and text nodes
143
+ // because they are not actual Views
144
+ // and cannot be animated
145
+ if ( element instanceof InvisibleNode || ! selector . match ( element ) ) {
146
+ return true ;
147
+ }
148
+
149
+ if ( element instanceof ProxyViewContainer ) {
150
+ element . eachChild ( ( child : NgView ) => {
151
+ result . matches . push ( child ) ;
152
+ return true ;
153
+ } ) ;
154
+ } else {
155
+ result . matches . push ( element ) ;
156
+ }
157
+
158
+ return multi ;
208
159
}
0 commit comments