Skip to content

Commit

Permalink
fix(gestures): fixes scroll issue with hammer config
Browse files Browse the repository at this point in the history
fixes scroll issue with hammer config where pinch/rotate gestures are preventing the screen from
scrolling

closes #6897
  • Loading branch information
danbucholtz committed Aug 10, 2016
1 parent e244d09 commit f066837
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/config/providers.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { enableProdMode, PLATFORM_DIRECTIVES, provide } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

import { ActionSheetController } from '../components/action-sheet/action-sheet';
import { AlertController } from '../components/alert/alert';
Expand All @@ -10,6 +11,7 @@ import { closest, nativeTimeout } from '../util/dom';
import { Events } from '../util/events';
import { FeatureDetect } from '../util/feature-detect';
import { Form } from '../util/form';
import { IonicGestureConfig } from '../gestures/ionic-gesture-config';
import { GestureController } from '../gestures/gesture-controller';
import { IONIC_DIRECTIVES } from './directives';
import { isPresent } from '../util/util';
Expand Down Expand Up @@ -81,6 +83,8 @@ export function ionicProviders(customProviders?: Array<any>, config?: any): any[
Translate,
];

providers.push( {provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig} );

if (isPresent(customProviders)) {
providers.push(customProviders);
}
Expand Down
25 changes: 25 additions & 0 deletions src/gestures/ionic-gesture-config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {Injectable} from '@angular/core';
import {HammerGestureConfig} from '@angular/platform-browser';

/* this class override the default angular gesture config.
* The motivation for this is enabling pinch, rotate or
* any other multi-touch gestures block scrolling.
*/

/**
* @private
*/
@Injectable()
export class IonicGestureConfig extends HammerGestureConfig {

buildHammer(element: HTMLElement) {
var mc = new (<any> window).Hammer(element);

for (let eventName in this.overrides) {
mc.get(eventName).set(this.overrides[eventName]);
}

return mc;
}

}
31 changes: 31 additions & 0 deletions src/gestures/test/ionic-gesture-config.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { IonicGestureConfig } from '../../../src/gestures/ionic-gesture-config';

export function run() {

describe('IonicGestureConfig', () => {
it('should create a new instance of hammer', () => {
// arrange
let instance = new IonicGestureConfig();
let expectedParam = { name: "expectedParam"};
let expectedHammerInstance = { name: "hammer"};

let actualParam : any = null;
let callCount = 0;

(<any> window).Hammer = (param: any) => {
callCount++;
actualParam = param;
return expectedHammerInstance;
};

// act
let returnValue = instance.buildHammer( <HTMLElement> <any> expectedParam);

// assert
expect(returnValue.name).toEqual(expectedHammerInstance.name);
expect(callCount).toEqual(1);
expect(actualParam.name).toEqual(expectedParam.name);
});
})

}

0 comments on commit f066837

Please sign in to comment.