fix: allow scrolling on clickable elements on mobile

Closes #867

Author: mattlewis92

README.md

@@ -118,7 +118,7 @@ As there are so many events to show on each month, it doesn’t provide a lot of
 
 ### Does this calendar work with mobile?
 
-This library is not optimised for mobile. Due to the complex nature of a calendar component, it is non trivial to build a calendar that has a great UX on both desktop and mobile. It is recommended to build your own calendar component for mobile that has a dedicated UX. You may be able to get some degree of mobile support by setting some custom CSS rules for smaller screens and [including hammerjs](http://hammerjs.github.io/) but your mileage may vary.
+This library is not optimised for mobile. Due to the complex nature of a calendar component, it is non trivial to build a calendar that has a great UX on both desktop and mobile. It is recommended to build your own calendar component for mobile that has a dedicated UX. You may be able to get some degree of mobile support by setting some custom CSS rules for smaller screens, [including hammerjs](http://hammerjs.github.io/) and using a [custom hammerjs config](https://github.com/mattlewis92/angular-calendar/blob/master/projects/demos/app/hammer-config.ts) to allow scrolling on clickable elements.
 
 ### How do I use a custom template?
 

package-lock.json

@@ -131,8 +131,8 @@
     "@angular/core": ">=6.0.0 <9.0.0"
   },
   "dependencies": {
-    "angular-draggable-droppable": "^4.0.2",
-    "angular-resizable-element": "^3.2.2",
+    "angular-draggable-droppable": "^4.2.0",
+    "angular-resizable-element": "^3.2.4",
     "calendar-utils": "^0.2.2",
     "positioning": "^1.4.0"
   },

package.json

@@ -16,7 +16,7 @@ const clickElements = new Set<HTMLElement>();
   selector: '[mwlClick]'
 })
 export class ClickDirective implements OnInit, OnDestroy {
-  @Output('mwlClick') click: EventEmitter<MouseEvent> = new EventEmitter(); // tslint:disable-line
+  @Output('mwlClick') click = new EventEmitter<MouseEvent>(); // tslint:disable-line
 
   private removeListener: () => void;
 
@@ -27,6 +27,11 @@ export class ClickDirective implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.renderer.setAttribute(
+      this.elm.nativeElement,
+      'data-calendar-clickable',
+      'true'
+    );
     clickElements.add(this.elm.nativeElement);
     const eventName: string =
       typeof window !== 'undefined' && typeof window['Hammer'] !== 'undefined'

projects/angular-calendar/src/modules/common/click.directive.ts

@@ -1,14 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BrowserModule } from '@angular/platform-browser';
+import {
+  BrowserModule,
+  HAMMER_GESTURE_CONFIG
+} from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbTabsetModule, NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { Angulartics2Module } from 'angulartics2';
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 import { DemoAppComponent } from './demo-app.component';
 import { DemoComponent as DefaultDemoComponent } from './demo-modules/kitchen-sink/component';
 import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/module';
 import { environment } from '../environments/environment';
+import { CustomHammerConfig } from './hammer-config';
 
 @NgModule({
   declarations: [DemoAppComponent],
@@ -297,6 +300,12 @@ import { environment } from '../environments/environment';
       developerMode: !environment.production
     })
   ],
+  providers: [
+    {
+      provide: HAMMER_GESTURE_CONFIG,
+      useClass: CustomHammerConfig
+    }
+  ],
   bootstrap: [DemoAppComponent]
 })
 export class DemoAppModule {}

projects/demos/app/demo-app.module.ts

@@ -0,0 +1,26 @@
+import { HammerGestureConfig } from '@angular/platform-browser';
+
+declare const Hammer: any;
+
+export class CustomHammerConfig extends HammerGestureConfig {
+  buildHammer(element: HTMLElement) {
+    let options = {};
+
+    if (element.hasAttribute('data-calendar-clickable')) {
+      options = { touchAction: 'pan-y' };
+    }
+
+    const mc = new Hammer(element, options);
+
+    // keep default angular config
+    mc.get('pinch').set({ enable: true });
+    mc.get('rotate').set({ enable: true });
+
+    // retain support for angular overrides object
+    Object.keys(this.overrides).forEach(eventName => {
+      mc.get(eventName).set(this.overrides[eventName]);
+    });
+
+    return mc;
+  }
+}