fix(gestures): fixes scroll issue with hammer config

Fixes scroll issue with hammer config where pinch/rotate gestures are preventing the screen from scrolling.

Closes #6897
This commit is contained in:
Dan Bucholtz
2016-08-10 14:16:08 -05:00
committed by Adam Bradley
parent 4e3bcb98a5
commit 174efc196d
3 changed files with 60 additions and 0 deletions

View File

@ -1,6 +1,7 @@
import { enableProdMode, PLATFORM_DIRECTIVES, provide } from '@angular/core'; import { enableProdMode, PLATFORM_DIRECTIVES, provide } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms'; import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { ActionSheetController } from '../components/action-sheet/action-sheet'; import { ActionSheetController } from '../components/action-sheet/action-sheet';
import { AlertController } from '../components/alert/alert'; import { AlertController } from '../components/alert/alert';
@ -10,6 +11,7 @@ import { closest, nativeTimeout } from '../util/dom';
import { Events } from '../util/events'; import { Events } from '../util/events';
import { FeatureDetect } from '../util/feature-detect'; import { FeatureDetect } from '../util/feature-detect';
import { Form } from '../util/form'; import { Form } from '../util/form';
import { IonicGestureConfig } from '../gestures/ionic-gesture-config';
import { GestureController } from '../gestures/gesture-controller'; import { GestureController } from '../gestures/gesture-controller';
import { IONIC_DIRECTIVES } from './directives'; import { IONIC_DIRECTIVES } from './directives';
import { isPresent } from '../util/util'; import { isPresent } from '../util/util';
@ -81,6 +83,8 @@ export function ionicProviders(customProviders?: Array<any>, config?: any): any[
Translate, Translate,
]; ];
providers.push( {provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig} );
if (isPresent(customProviders)) { if (isPresent(customProviders)) {
providers.push(customProviders); providers.push(customProviders);
} }

View File

@ -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;
}
}

View File

@ -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);
});
})
}