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

refactor(backdrop): place disable-scroll class on ion-app

Browse Source
This commit is contained in:
Adam Bradley
2016-07-01 21:44:53 -05:00
parent aebdf2f6e0
commit f1433c6314
4 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/app/app.ts
View File

@ -1,4 +1,4 @@
import { Component, ComponentResolver, EventEmitter, Injectable, Renderer, ViewChild, ViewContainerRef } from '@angular/core'; import { Component, ComponentResolver, EventEmitter, HostBinding, Injectable, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
import { ClickBlock } from '../../util/click-block'; import { ClickBlock } from '../../util/click-block';
@ -297,6 +297,8 @@ export class AppRoot {
}); });
} }
@HostBinding('class.disable-scroll') disableScroll: boolean = false;
} }
const CLICK_BLOCK_BUFFER_IN_MILLIS = 64; const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;

5
src/components/app/structure.scss
View File

@ -211,6 +211,11 @@ ion-content.js-scroll > scroll-content {
will-change: initial; will-change: initial;
} }
.disable-scroll ion-page > ion-content > scroll-content {
overflow-y: hidden;
overflow-x: hidden;
}
[nav-viewport], [nav-viewport],
[nav-portal], [nav-portal],

26
src/components/backdrop/backdrop.ts
View File

@ -1,7 +1,7 @@
import { Directive, ElementRef, Input } from '@angular/core'; import { Directive, Input } from '@angular/core';
import { isTrueProperty} from '../../util/util'; import { AppRoot } from '../app/app';
import { nativeRaf} from '../../util/dom'; import { isTrueProperty } from '../../util/util';
const DISABLE_SCROLL = 'disable-scroll'; const DISABLE_SCROLL = 'disable-scroll';
@ -19,25 +19,19 @@ const DISABLE_SCROLL = 'disable-scroll';
export class Backdrop { export class Backdrop {
private static nuBackDrops: number = 0; private static nuBackDrops: number = 0;
private static push() { private static push(appRoot: AppRoot) {
if (this.nuBackDrops === 0) { if (this.nuBackDrops === 0) {
nativeRaf(() => { appRoot.disableScroll = true;
console.debug('adding .disable-scroll to body');
document.body.classList.add(DISABLE_SCROLL);
});
} }
this.nuBackDrops++; this.nuBackDrops++;
} }
private static pop() { private static pop(appRoot: AppRoot) {
if (this.nuBackDrops > 0) { if (this.nuBackDrops > 0) {
this.nuBackDrops--; this.nuBackDrops--;
if (this.nuBackDrops === 0) { if (this.nuBackDrops === 0) {
nativeRaf(() => { appRoot.disableScroll = false;
console.debug('removing .disable-scroll from body');
document.body.classList.remove(DISABLE_SCROLL);
});
} }
} }
} }
@ -45,18 +39,18 @@ export class Backdrop {
private pushed: boolean = false; private pushed: boolean = false;
@Input() disableScroll = true; @Input() disableScroll = true;
constructor(public elementRef: ElementRef) {} constructor(private _appRoot: AppRoot) {}
ngOnInit() { ngOnInit() {
if (isTrueProperty(this.disableScroll)) { if (isTrueProperty(this.disableScroll)) {
Backdrop.push(); Backdrop.push(this._appRoot);
this.pushed = true; this.pushed = true;
} }
} }
ngOnDestroy() { ngOnDestroy() {
if (this.pushed) { if (this.pushed) {
Backdrop.pop(); Backdrop.pop(this._appRoot);
this.pushed = false; this.pushed = false;
} }
} }

5
src/components/scroll/scroll.scss
View File

@ -35,8 +35,3 @@ ion-scroll {
} }
} }
body.disable-scroll scroll-content {
overflow-y: hidden;
overflow-x: hidden;
}