javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ion-backdrop): new ion-backdrop can prevent background scrolling

Browse Source 
closes #6656
This commit is contained in:
Manu Mtz.-Almeida
2016-05-28 17:08:06 +02:00
parent c42bf97d67
commit a1a582b7a1
21 changed files with 153 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/menu/menu.ts
View File

@ -1,4 +1,4 @@
import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer, ChangeDetectionStrategy, ViewEncapsulation, ViewChild} from '@angular/core';
import {Ion} from '../ion';
import {Config} from '../../config/config';
@ -8,6 +8,7 @@ import {MenuContentGesture, MenuTargetGesture} from './menu-gestures';
import {MenuController} from './menu-controller';
import {MenuType} from './menu-types';
import {isTrueProperty} from '../../util/util';
import {Backdrop} from '../backdrop/backdrop';
/**
@ -180,8 +181,7 @@ import {isTrueProperty} from '../../util/util';
},
template:
'<ng-content></ng-content>' +
'<div tappable disable-activated class="backdrop"></div>',
directives: [forwardRef(() => MenuBackdrop)],
'<ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
@ -206,7 +206,7 @@ export class Menu extends Ion {
/**
* @private
*/
backdrop: MenuBackdrop;
@ViewChild(Backdrop) backdrop: Backdrop;
/**
* @private
@ -363,6 +363,16 @@ export class Menu extends Ion {
self._menuCtrl.register(self);
}
/**
* @private
*/
bdClick(ev) {
console.debug('backdrop clicked');
ev.preventDefault();
ev.stopPropagation();
this._menuCtrl.close();
}
/**
* @private
*/
@ -609,31 +619,3 @@ export class Menu extends Ion {
}
}
/**
* @private
*/
@Directive({
selector: '.backdrop',
host: {
'(click)': 'clicked($event)',
}
})
export class MenuBackdrop {
constructor(@Host() private _menuCtrl: Menu, public elementRef: ElementRef) {
_menuCtrl.backdrop = this;
}
/**
* @private
*/
private clicked(ev: UIEvent) {
console.debug('backdrop clicked');
ev.preventDefault();
ev.stopPropagation();
this._menuCtrl.close();
}
}