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 { 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;

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

@ -211,6 +211,11 @@ ion-content.js-scroll > scroll-content {
will-change: initial;
}
.disable-scroll ion-page > ion-content > scroll-content {
overflow-y: hidden;
overflow-x: hidden;
}
[nav-viewport],
[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 { nativeRaf} from '../../util/dom';
import { AppRoot } from '../app/app';
import { isTrueProperty } from '../../util/util';
const DISABLE_SCROLL = 'disable-scroll';
@ -19,25 +19,19 @@ const DISABLE_SCROLL = 'disable-scroll';
export class Backdrop {
private static nuBackDrops: number = 0;
private static push() {
private static push(appRoot: AppRoot) {
if (this.nuBackDrops === 0) {
nativeRaf(() => {
console.debug('adding .disable-scroll to body');
document.body.classList.add(DISABLE_SCROLL);
});
appRoot.disableScroll = true;
}
this.nuBackDrops++;
}
private static pop() {
private static pop(appRoot: AppRoot) {
if (this.nuBackDrops > 0) {
this.nuBackDrops--;
if (this.nuBackDrops === 0) {
nativeRaf(() => {
console.debug('removing .disable-scroll from body');
document.body.classList.remove(DISABLE_SCROLL);
});
appRoot.disableScroll = false;
}
}
}
@ -45,18 +39,18 @@ export class Backdrop {
private pushed: boolean = false;
@Input() disableScroll = true;
constructor(public elementRef: ElementRef) {}
constructor(private _appRoot: AppRoot) {}
ngOnInit() {
if (isTrueProperty(this.disableScroll)) {
Backdrop.push();
Backdrop.push(this._appRoot);
this.pushed = true;
}
}
ngOnDestroy() {
if (this.pushed) {
Backdrop.pop();
Backdrop.pop(this._appRoot);
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;
}