1- import { Component , ElementRef , OnInit , ViewChild } from '@angular/core' ;
1+ import { Component } from '@angular/core' ;
22import { RouterExtensions } from '@nativescript/angular' ;
3+ import { ObservableArray , Screen } from '@nativescript/core' ;
34
45@Component ( {
56 selector : 'ns-collectionview-swipe-menu' ,
6- templateUrl : './swipe-menu.component.html'
7+ templateUrl : './swipe-menu.component.html' ,
8+ styleUrls : [ '../styles.scss' ]
79} )
8- export class SwipeMenuComponent implements OnInit {
10+ export class SwipeMenuComponent {
911 constructor ( private router : RouterExtensions ) { }
1012
11- items = [
13+ items = new ObservableArray ( [
1214 { index : 0 , name : 'TURQUOISE' , color : '#1abc9c' } ,
1315 { index : 1 , name : 'EMERALD' , color : '#2ecc71' } ,
1416 { index : 2 , name : 'PETER RIVER' , color : '#3498db' } ,
@@ -29,28 +31,37 @@ export class SwipeMenuComponent implements OnInit {
2931 { index : 17 , name : 'POMEGRANATE' , color : '#c0392b' } ,
3032 { index : 18 , name : 'SILVER' , color : '#bdc3c7' } ,
3133 { index : 19 , name : 'ASBESTOS' , color : '#7f8c8d' }
32- ] ;
34+ ] ) ;
3335
34- ngOnInit ( ) : void { }
35-
36- goBack ( ) : void {
37- this . router . back ( ) ;
38- }
39-
40- onItemTap ( { index, item } ) {
41- console . log ( `EVENT TRIGGERED: Tapped on ${ index } ${ item . name } ) ;
42- }
43-
44- onLoadMoreItems ( ) {
45- console . log ( 'EVENT TRIGGERED: onLoadMoreItems()' ) ;
46- }
4736 drawerTranslationFunction ( side , width , value , delta , progress ) {
4837 const result = {
4938 mainContent : {
50- translateX : side === 'right' ? - delta : delta
39+ translateX : side === 'right' ? - delta : delta ,
40+ opacity : progress < 1 ? 1 : 0.8
41+ } ,
42+ backDrop : {
43+ opacity : progress * 0.00001
5144 }
5245 } as any ;
53-
46+ console . log ( `drawerTranslation invoked\n side: ${ side } , width: ${ width } , value: ${ value } , delta: ${ delta } , progress: ${ progress } ` ) ;
5447 return result ;
5548 }
49+
50+ swipeMenuThreshold = Screen . mainScreen . widthPixels ;
51+ menuItemTap ( e ) {
52+ console . log ( `EVENT TRIGGERED: Tapped on ${ e . object . text } ) ;
53+ }
54+ onItemTap ( { index, item, view } ) {
55+ console . log ( `EVENT TRIGGERED: Tapped on ${ index } ${ item . name } ) ;
56+
57+ // startingSide means that a swipemenu is open, so close it
58+ if ( item . startingSide ) {
59+ console . log ( 'Menu open, closing ...' ) ;
60+ view . close ( ) ;
61+ }
62+ }
63+
64+ goBack ( ) : void {
65+ this . router . back ( ) ;
66+ }
5667}
0 commit comments