diff --git a/demo/src/app/geo/search/search.component.html b/demo/src/app/geo/search/search.component.html index 8d807092ed..6dbcb6926c 100644 --- a/demo/src/app/geo/search/search.component.html +++ b/demo/src/app/geo/search/search.component.html @@ -14,7 +14,7 @@ - this.searchCoordinate(this.lonlat) }, { id: 'googleMaps', title: 'googleMap', - handler: this.onOpenGoogleMaps.bind(this), - args: ['1'] + handler: () => this.openGoogleMaps(this.lonlat), }, { id: 'googleStreetView', title: 'googleStreetView', - handler: this.onOpenGoogleStreetView.bind(this) + handler: () => this.openGoogleStreetView(this.lonlat) } ]); } @@ -206,31 +203,18 @@ export class AppSearchComponent implements OnInit, OnDestroy { return position; } - onPointerSearch(event) { - this.lonlat = event; - this.onSearchCoordinate(); - } - - onSearchCoordinate() { + searchCoordinate(lonlat) { this.searchStore.clear(); - const results = this.searchService.reverseSearch(this.lonlat); - - for (const i in results) { - if (results.length > 0) { - results[i].request.subscribe((_results: SearchResult[]) => { - this.onSearch({ research: results[i], results: _results }); - }); - } - } + this.term = lonlat.map((c) => c.toFixed(6)).join(', '); } - onOpenGoogleMaps() { - window.open(GoogleLinks.getGoogleMapsCoordLink(this.lonlat[0], this.lonlat[1])); + openGoogleMaps(lonlat) { + window.open(GoogleLinks.getGoogleMapsCoordLink(lonlat[0], lonlat[1])); } - onOpenGoogleStreetView() { + openGoogleStreetView(lonlat) { window.open( - GoogleLinks.getGoogleStreetViewLink(this.lonlat[0], this.lonlat[1]) + GoogleLinks.getGoogleStreetViewLink(lonlat[0], lonlat[1]) ); } } diff --git a/packages/common/src/lib/context-menu/context-menu.directive.ts b/packages/common/src/lib/context-menu/context-menu.directive.ts index eda44704d1..28343b01fb 100644 --- a/packages/common/src/lib/context-menu/context-menu.directive.ts +++ b/packages/common/src/lib/context-menu/context-menu.directive.ts @@ -30,9 +30,22 @@ export class ContextMenuDirective { private elementRef: ElementRef ) {} + @HostListener('longpress', ['$event']) @HostListener('contextmenu', ['$event']) - public onContextMenu(e: MouseEvent): void { - const {x, y} = e; + public onContextMenu(e: MouseEvent | TouchEvent): void { + let x; + let y; + if (e instanceof TouchEvent) { + x = e.touches[0].pageX; + y = e.touches[0].pageY; + } else if (e instanceof MouseEvent) { + x = e.x; + y = e.y; + } + if (!x || !y) { + return; + } + this.close(); e.preventDefault(); this.menuPosition.emit({ x, y }); diff --git a/packages/common/src/lib/context-menu/context-menu.module.ts b/packages/common/src/lib/context-menu/context-menu.module.ts index ee84a6a152..e19183eafa 100644 --- a/packages/common/src/lib/context-menu/context-menu.module.ts +++ b/packages/common/src/lib/context-menu/context-menu.module.ts @@ -1,10 +1,11 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { ContextMenuDirective } from './context-menu.directive'; +import { LongPressDirective } from './long-press.directive'; @NgModule({ imports: [], - declarations: [ContextMenuDirective], - exports: [ContextMenuDirective] + declarations: [ContextMenuDirective, LongPressDirective], + exports: [ContextMenuDirective, LongPressDirective] }) export class IgoContextMenuModule { static forRoot(): ModuleWithProviders { diff --git a/packages/common/src/lib/context-menu/index.ts b/packages/common/src/lib/context-menu/index.ts index 98e532cbb4..63e10b9f8a 100644 --- a/packages/common/src/lib/context-menu/index.ts +++ b/packages/common/src/lib/context-menu/index.ts @@ -1 +1,2 @@ export * from './context-menu.directive'; +export * from './long-press.directive'; diff --git a/packages/common/src/lib/context-menu/long-press.directive.ts b/packages/common/src/lib/context-menu/long-press.directive.ts new file mode 100644 index 0000000000..08105582bb --- /dev/null +++ b/packages/common/src/lib/context-menu/long-press.directive.ts @@ -0,0 +1,30 @@ +import { Directive, HostListener, Output, EventEmitter } from '@angular/core'; + +@Directive({ + selector: '[igoLongPress]' +}) +export class LongPressDirective { + private touchTimeout: any; + @Output() longpress = new EventEmitter(); + + constructor() { } + + + @HostListener('touchstart', ['$event']) + public touchstart(e: TouchEvent) { + this.touchTimeout = setTimeout(() => { + this.longpress.emit(e); + }, 400); + } + @HostListener('touchmove') + @HostListener('touchcancel') + @HostListener('touchend') + public touchend() { + this.touchEnd(); + } + + + private touchEnd() { + clearTimeout(this.touchTimeout); + } +}