diff --git a/src/app/directives/directives.module.ts b/src/app/directives/directives.module.ts new file mode 100644 index 000000000..729290dd5 --- /dev/null +++ b/src/app/directives/directives.module.ts @@ -0,0 +1,27 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { NgModule } from '@angular/core'; +import { CoreLongPressDirective } from './long-press.directive'; + +@NgModule({ + declarations: [ + CoreLongPressDirective, + ], + imports: [], + exports: [ + CoreLongPressDirective, + ], +}) +export class CoreDirectivesModule {} diff --git a/src/app/directives/long-press.directive.ts b/src/app/directives/long-press.directive.ts new file mode 100644 index 000000000..ca4cda73e --- /dev/null +++ b/src/app/directives/long-press.directive.ts @@ -0,0 +1,59 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// Based on https://medium.com/madewithply/ionic-4-long-press-gestures-96cf1e44098b + +import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core'; +import { Gesture } from '@ionic/angular'; +import { GestureController } from '@singletons/core.singletons'; +/** + * Directive to add long press actions to html elements. + */ +@Directive({ + selector: '[longPress]', +}) +export class CoreLongPressDirective implements OnInit, OnDestroy { + + element: HTMLElement; + pressGesture: Gesture; + + @Output() longPress = new EventEmitter(); + + constructor(el: ElementRef) { + this.element = el.nativeElement; + this.element.setAttribute('tappable', ''); + } + + /** + * Initialize gesture listening. + */ + ngOnInit(): void { + this.pressGesture = GestureController.instance.create({ + el: this.element, + threshold: 0, + gestureName: 'longpress', + onEnd: ev => this.longPress.emit(ev.event), + }, true); + + this.pressGesture.enable(); + } + + /** + * Destroy gesture listening. + */ + ngOnDestroy(): void { + this.pressGesture.destroy(); + } + +} diff --git a/src/app/singletons/core.singletons.ts b/src/app/singletons/core.singletons.ts index 45fcba1a6..561a8dd98 100644 --- a/src/app/singletons/core.singletons.ts +++ b/src/app/singletons/core.singletons.ts @@ -21,6 +21,7 @@ import { LoadingController as LoadingControllerService, ModalController as ModalControllerService, ToastController as ToastControllerService, + GestureController as GestureControllerService, } from '@ionic/angular'; import { Clipboard as ClipboardService } from '@ionic-native/clipboard/ngx'; @@ -99,6 +100,7 @@ export class AlertController extends makeSingleton(AlertControllerService) {} export class LoadingController extends makeSingleton(LoadingControllerService) {} export class ModalController extends makeSingleton(ModalControllerService) {} export class ToastController extends makeSingleton(ToastControllerService) {} +export class GestureController extends makeSingleton(GestureControllerService) {} // Convert external libraries injectables. export class Translate extends makeSingleton(TranslateService) {}