Skip to content

Commit

Permalink
feat(content): add a resize function to recalculate the content size
Browse files Browse the repository at this point in the history 
this should be called when dynamically displaying/hiding headers,
footers, or tabs.

references #7131
  • Loading branch information
@brandyscarney
brandyscarney committed Jun 30, 2016
1 parent cd6ad23 commit 1fe1c1e
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 2 deletions.
39 changes: 39 additions & 0 deletions src/components/content/content.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,45 @@ export class Content extends Ion {
}
}

/**
* Tell the content to recalculate its dimensions. This should be called
* after dynamically adding headers, footers, or tabs.
*
* ```ts
* @Component({
* template: `
* <ion-header>
* <ion-navbar>
* <ion-title>Main Navbar</ion-title>
* </ion-navbar>
* <ion-toolbar *ngIf="showToolbar">
* <ion-title>Dynamic Toolbar</ion-title>
* </ion-toolbar>
* </ion-header>
* <ion-content>
* <button (click)="toggleToolbar()">Toggle Toolbar</button>
* </ion-content>
* `})
*
* class E2EPage {
* @ViewChild(Content) content: Content;
* showToolbar: boolean = false;
*
* toggleToolbar() {
* this.showToolbar = !this.showToolbar;
* this.content.resize();
* }
* }
* ```
*
*/
resize() {
nativeRaf(() => {
this.readDimensions();
this.writeDimensions();
});
}

/**
* @private
* DOM READ
Expand Down
11 changes: 9 additions & 2 deletions src/components/content/test/basic/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {ionicBootstrap} from '../../../../../src';
import { Component, ViewChild } from '@angular/core';
import { Content, ionicBootstrap } from '../../../../../src';


@Component({
Expand Down Expand Up @@ -50,7 +50,14 @@ class Page1 {
templateUrl: 'main.html'
})
class E2EPage {
@ViewChild(Content) content: Content;
page1 = Page1;
showToolbar: boolean = false;

toggleToolbar() {
this.showToolbar = !this.showToolbar;
this.content.resize();
}
}


Expand Down
5 changes: 5 additions & 0 deletions src/components/content/test/basic/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,16 @@
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar *ngIf="showToolbar">
<ion-title>Dynamic Toolbar</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<b>This page has a header and content but no footer or tabs.</b>

<button (click)="toggleToolbar()">Toggle Toolbar</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.
Expand Down

5 comments on commit 1fe1c1e

@dgroh
Copy link

@dgroh dgroh commented on 1fe1c1e Aug 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is a brilliant feature

@WhatsThatItsPat
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this superfluous when using the fullscreen attribute on ion-content?

@dgroh
Copy link

@dgroh dgroh commented on 1fe1c1e Aug 10, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not possible to use ViewChild(Content) inside a directive. I had to inject Content as a provider, like this:

@Component({
    selector: "header-content",
    directives: [IONIC_DIRECTIVES],
    providers: [Content],
    templateUrl: "build/pages/components/header-content/header.content.html"
});

@WhatsThatItsPat
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dgroh you can pass in @ViewChild(Content) from your page into ion-header as a directive input.

So in your page, you have:
@ViewChild(Content) content: Content;

Your header looks something like:
<ion-header [yourDirective]="content">

And then in your directive class:
@Input('yourDirective') content: Content;

@AlGantori
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling content resize() works when the header is hidden but not when the tabs are also hidden. Any clues on how to make the content flow into the tabs space as well? I am basically trying to implement a full-view toggled with the "F" key on the desktop.

Ionic:

   ionic (Ionic CLI)  : 4.0.0 (C:\Users\AXM\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : browser 5.0.3

System:

   Android SDK Tools : 25.2.5
   NodeJS            : v7.2.0 (C:\Program Files\nodejs\node.exe)
   npm               : 4.0.5
   OS                : Windows 7

Environment:

   ANDROID_HOME : C:/Users/AXM/AppData/Local/Android/android-sdk

Please sign in to comment.