mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
toolbar refactor wip
This commit is contained in:
Adam Bradley
@ -56,15 +56,15 @@ export class Ion {
|
||||
}
|
||||
|
||||
getDimensions() {
|
||||
return dom.getDimensions(this.elementRef.nativeElement);
|
||||
return dom.getDimensions(this);
|
||||
}
|
||||
|
||||
width() {
|
||||
return this.getDimensions().width;
|
||||
return this.getDimensions().w;
|
||||
}
|
||||
|
||||
height() {
|
||||
return this.getDimensions().height;
|
||||
return this.getDimensions().h;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import {Directive, Optional} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, Optional} from 'angular2/angular2';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
import {ViewItem} from '../view/view-item';
|
||||
import {Navbar} from '../nav-bar/nav-bar';
|
||||
@ -18,9 +19,15 @@ import {Navbar} from '../nav-bar/nav-bar';
|
||||
'[hidden]': 'isHidden'
|
||||
}
|
||||
})
|
||||
export class MenuToggle {
|
||||
export class MenuToggle extends Ion {
|
||||
|
||||
constructor(app: IonicApp, @Optional() item: ViewItem, @Optional() navbar: Navbar) {
|
||||
constructor(
|
||||
app: IonicApp,
|
||||
elementRef: ElementRef,
|
||||
@Optional() item: ViewItem,
|
||||
@Optional() navbar: Navbar
|
||||
) {
|
||||
super(elementRef, null);
|
||||
this.app = app;
|
||||
this.item = item;
|
||||
this.withinNavbar = !!navbar;
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.navbar.toolbar {
|
||||
ion-navbar.toolbar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
ion-navbar {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
|
||||
&.show-navbar {
|
||||
|
||||
@ -1,134 +1,110 @@
|
||||
import {Directive, View, Host, Optional, ElementRef, forwardRef} from 'angular2/angular2';
|
||||
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
|
||||
import {Component, Directive, View, Host, Optional, ElementRef, TemplateRef, Query, QueryList, ViewQuery} from 'angular2/angular2';
|
||||
|
||||
import {TemplateRef} from 'angular2/angular2';
|
||||
|
||||
import {ToolbarBase} from '../toolbar/toolbar';
|
||||
import {Ion} from '../ion';
|
||||
import {ToolbarBase, ToolbarTitle, ToolbarItem} from '../toolbar/toolbar';
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonicComponent, IonicView} from '../../config/annotations';
|
||||
import {IonicView} from '../../config/annotations';
|
||||
import {IonicApp} from '../app/app';
|
||||
import {ViewItem} from '../view/view-item';
|
||||
import {ViewController} from '../view/view-controller';
|
||||
import {MenuToggle} from '../menu/menu-toggle'
|
||||
|
||||
|
||||
@IonicComponent({
|
||||
selector: 'ion-navbar',
|
||||
host: {
|
||||
'class': 'toolbar'
|
||||
}
|
||||
@Directive({
|
||||
selector: '.back-button-text'
|
||||
})
|
||||
@IonicView({
|
||||
template: `
|
||||
<div class="toolbar-inner">
|
||||
<button class="back-button">
|
||||
<icon class="back-button-icon" [name]="bbClass"></icon>
|
||||
<span class="back-button-text">
|
||||
<span class="back-default" [text-content]="bbDefault"></span>
|
||||
<span class="back-title" [text-content]="bbText"></span>
|
||||
</span>
|
||||
</button>
|
||||
<ng-content select="[menu-toggle]"></ng-content>
|
||||
<div class="toolbar-title">
|
||||
<div class="toolbar-inner-title">
|
||||
<ng-content select="ion-title"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-item toolbar-primary-item">
|
||||
<ng-content select="[primary]"></ng-content>
|
||||
</div>
|
||||
<div class="toolbar-item toolbar-secondary-item">
|
||||
<ng-content select="[secondary]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
directives: [
|
||||
forwardRef(() => BackButton),
|
||||
forwardRef(() => BackButtonText),
|
||||
forwardRef(() => Title),
|
||||
forwardRef(() => NavbarItem)
|
||||
]
|
||||
})
|
||||
export class Navbar extends ToolbarBase {
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
config: IonicConfig,
|
||||
app: IonicApp,
|
||||
@Optional() item: ViewItem
|
||||
) {
|
||||
super(elementRef, config);
|
||||
|
||||
this.app = app;
|
||||
item && item.navbarView(this);
|
||||
|
||||
this.bbClass = config.setting('backButtonIcon');
|
||||
this.bbDefault = config.setting('backButtonText');
|
||||
this.bbText = '';
|
||||
class BackButtonText extends Ion {
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef, null);
|
||||
}
|
||||
|
||||
backButtonElement(eleRef) {
|
||||
if (arguments.length) {
|
||||
this._bbEle = eleRef;
|
||||
}
|
||||
return this._bbEle;
|
||||
}
|
||||
|
||||
backButtonTextElement(eleRef) {
|
||||
if (arguments.length) {
|
||||
this._bbTxEle = eleRef;
|
||||
}
|
||||
return this._bbTxEle;
|
||||
}
|
||||
|
||||
didEnter() {
|
||||
const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
|
||||
titleEle && this.app.title(titleEle.textContent);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '.back-button',
|
||||
host: {
|
||||
'(click)': 'goBack($event)'
|
||||
}
|
||||
})
|
||||
class BackButton {
|
||||
constructor(@Host() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
|
||||
this.item = item;
|
||||
navbar.backButtonElement(elementRef);
|
||||
class BackButton extends Ion {
|
||||
constructor(
|
||||
@Optional() viewCtrl: ViewController,
|
||||
elementRef: ElementRef,
|
||||
@Query(BackButtonText) bbtQry: QueryList<BackButtonText>
|
||||
) {
|
||||
super(elementRef, null);
|
||||
this.viewCtrl = viewCtrl;
|
||||
this.bbtQry = bbtQry;
|
||||
}
|
||||
|
||||
goBack(ev) {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
this.item && this.item.viewCtrl.pop();
|
||||
this.viewCtrl && this.viewCtrl.pop();
|
||||
}
|
||||
|
||||
getTextRef() {
|
||||
return this.bbtQry.first.elementRef;
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '.back-button-text'
|
||||
})
|
||||
class BackButtonText {
|
||||
constructor(@Host() navbar: Navbar, elementRef: ElementRef) {
|
||||
navbar.backButtonTextElement(elementRef);
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '.toolbar-title'
|
||||
})
|
||||
class Title {
|
||||
constructor(@Host() toolbar: Navbar, elementRef: ElementRef) {
|
||||
toolbar.titleElement(elementRef);
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '.toolbar-item'
|
||||
})
|
||||
class NavbarItem {
|
||||
constructor(@Host() toolbar: Navbar, elementRef: ElementRef) {
|
||||
toolbar.itemElements(elementRef);
|
||||
@Component({
|
||||
selector: 'ion-navbar',
|
||||
host: {
|
||||
'class': 'toolbar'
|
||||
}
|
||||
})
|
||||
@IonicView({
|
||||
template:
|
||||
'<div class="toolbar-inner">' +
|
||||
'<button class="back-button">' +
|
||||
'<icon class="back-button-icon" [name]="bbIcon"></icon>' +
|
||||
'<span class="back-button-text">' +
|
||||
'<span class="back-default">{{bbDefault}}</span>' +
|
||||
'</span>' +
|
||||
'</button>' +
|
||||
'<ng-content select="[menu-toggle]"></ng-content>' +
|
||||
'<ng-content select="ion-title"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[primary]"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[secondary]"></ng-content>' +
|
||||
'</div>',
|
||||
directives: [BackButton, BackButtonText]
|
||||
})
|
||||
export class Navbar extends ToolbarBase {
|
||||
constructor(
|
||||
app: IonicApp,
|
||||
@Optional() item: ViewItem,
|
||||
elementRef: ElementRef,
|
||||
config: IonicConfig,
|
||||
@Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
|
||||
@Query(ToolbarItem) itemQry: QueryList<ToolbarItem>,
|
||||
@ViewQuery(BackButton) bbQry: QueryList<BackButton>
|
||||
) {
|
||||
super(elementRef, config, titleQry, itemQry);
|
||||
|
||||
this.app = app;
|
||||
item && item.navbarView(this);
|
||||
this.bbQry = bbQry;
|
||||
|
||||
this.bbIcon = config.setting('backButtonIcon');
|
||||
this.bbDefault = config.setting('backButtonText');
|
||||
}
|
||||
|
||||
getBackButtonRef() {
|
||||
return this.bbQry.first.getElementRef();
|
||||
}
|
||||
|
||||
getBackButtonTextRef() {
|
||||
return this.bbQry.first.getTextRef();
|
||||
}
|
||||
|
||||
didEnter() {
|
||||
// const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
|
||||
// titleEle && this.app.title(titleEle.textContent);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -20,53 +20,11 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
border-bottom-style: solid;
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
.toolbar-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 72px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-primary-item {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-ios, primary);
|
||||
}
|
||||
|
||||
.toolbar-secondary-item {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, secondary);
|
||||
}
|
||||
|
||||
[menu-toggle] {
|
||||
order: map-get($toolbar-order-ios, 'menu-toggle');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin: 0 4px;
|
||||
min-height: 3.2rem;
|
||||
line-height: 1;
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
display: inherit;
|
||||
min-width: 20px;
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
button,
|
||||
[button] {
|
||||
margin-top: 0;
|
||||
@ -87,6 +45,47 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin: 0 4px;
|
||||
min-height: 3.2rem;
|
||||
line-height: 1;
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
display: inherit;
|
||||
min-width: 20px;
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ion-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 90px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
ion-nav-items {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-ios, primary);
|
||||
}
|
||||
|
||||
ion-nav-items[secondary] {
|
||||
text-align: right;
|
||||
order: map-get($toolbar-order-ios, secondary);
|
||||
}
|
||||
|
||||
&.hairlines .toolbar {
|
||||
|
||||
@ -10,19 +10,6 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
.toolbar {
|
||||
min-height: $toolbar-md-height;
|
||||
|
||||
.toolbar-inner-title {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
font-size: $toolbar-md-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-primary-item button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
[button],
|
||||
button.activated,
|
||||
@ -48,9 +35,7 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
|
||||
[menu-toggle],
|
||||
[menu-toggle].activated {
|
||||
margin: ($toolbar-padding * -1) 0 ($toolbar-padding * -1) ($toolbar-padding * -1);
|
||||
padding: 0 10px;
|
||||
height: $toolbar-md-height;
|
||||
min-width: 60px;
|
||||
|
||||
icon {
|
||||
@ -59,3 +44,12 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ion-title {
|
||||
font-size: $toolbar-md-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ion-nav-items[primary] button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -55,23 +55,17 @@ $toolbar-order: (
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
ion-title {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order, title);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
.toolbar-inner-title {
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
.toolbar-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -93,20 +87,15 @@ ion-title {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
ion-nav-items {
|
||||
display: block;
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
|
||||
.toolbar-primary-item {
|
||||
transform: translateZ(0px);
|
||||
pointer-events: none;
|
||||
order: map-get($toolbar-order, primary);
|
||||
}
|
||||
|
||||
.toolbar-secondary-item {
|
||||
ion-nav-items[secondary] {
|
||||
order: map-get($toolbar-order, secondary);
|
||||
}
|
||||
|
||||
|
||||
@ -1,102 +1,80 @@
|
||||
import {Directive, View, Host, ElementRef, forwardRef} from 'angular2/angular2';
|
||||
import {Component, Directive, View, Host, ElementRef, forwardRef, Query, QueryList} from 'angular2/angular2';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonicComponent} from '../../config/annotations';
|
||||
import {IonicView} from '../../config/annotations';
|
||||
import {MenuToggle} from '../menu/menu-toggle';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-title'
|
||||
})
|
||||
@View({
|
||||
template:
|
||||
'<div class="toolbar-title">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</div>'
|
||||
})
|
||||
export class ToolbarTitle extends Ion {
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef, null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: 'ion-nav-items,[menu-toggle]'
|
||||
})
|
||||
export class ToolbarItem extends Ion {
|
||||
constructor(elementRef: ElementRef) {
|
||||
super(elementRef, null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
export class ToolbarBase extends Ion {
|
||||
|
||||
constructor(elementRef: ElementRef, config: IonicConfig) {
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
config: IonicConfig,
|
||||
titleQry: QueryList<ToolbarTitle>,
|
||||
itemQry: QueryList<ToolbarItem>
|
||||
) {
|
||||
super(elementRef, config);
|
||||
this.titleAlign = config.setting('navTitleAlign');
|
||||
this.itemEles = [];
|
||||
this.titleQry = titleQry;
|
||||
this.itemQry = itemQry;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} eleRef TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
titleElement(eleRef) {
|
||||
if (arguments.length) {
|
||||
this._nbTlEle = eleRef;
|
||||
}
|
||||
return this._nbTlEle;
|
||||
getTitle() {
|
||||
return this.titleQry.first;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} eleRef TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
itemElements(eleRef) {
|
||||
if (arguments.length) {
|
||||
this.itemEles.push(eleRef);
|
||||
}
|
||||
return this.itemEles;
|
||||
getTitleRef() {
|
||||
return this.titleQry.first && this.titleQry.first.elementRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @param {TODO} eleRef TODO
|
||||
* @returns {TODO} TODO
|
||||
* A toolbar items include the left and right side `ion-nav-items`,
|
||||
* and every `menu-toggle`. It does not include the `ion-title`.
|
||||
* @returns {TODO} Array of this toolbar's item ElementRefs.
|
||||
*/
|
||||
titleText(eleRef) {
|
||||
if (arguments.length) {
|
||||
this._ttTxt.push(eleRef);
|
||||
}
|
||||
return this._ttTxt;
|
||||
}
|
||||
|
||||
afterViewChecked() {
|
||||
// if (this._queueAlign) {
|
||||
// this._queueAlign = false;
|
||||
// this._alignTitle();
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
alignTitle() {
|
||||
//this._queueAlign = (this.titleAlign === 'center');
|
||||
}
|
||||
|
||||
_alignTitle() {
|
||||
// don't bother if we're not trying to center align the title
|
||||
if (this.aligned) return;
|
||||
|
||||
// called after the navbar/title has had a moment to
|
||||
// finish rendering in their correct locations
|
||||
const toolbarEle = this.getNativeElement();
|
||||
const titleEle = toolbarEle.querySelector('ion-title');
|
||||
|
||||
// don't bother if there's no title element
|
||||
if (!titleEle) return;
|
||||
|
||||
// get all the dimensions
|
||||
const titleOffsetLeft = titleEle.offsetLeft;
|
||||
const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
|
||||
|
||||
let marginLeft = 0;
|
||||
let marginRight = 0;
|
||||
if (titleOffsetLeft < titleOffsetRight) {
|
||||
marginLeft = (titleOffsetRight - titleOffsetLeft) + 5;
|
||||
|
||||
} else if (titleOffsetLeft > titleOffsetRight) {
|
||||
marginRight = (titleOffsetLeft - titleOffsetRight) - 5;
|
||||
}
|
||||
|
||||
if (marginLeft || marginRight) {
|
||||
// only do an update if it has to
|
||||
const innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title');
|
||||
innerTitleEle.style.margin = `0 ${marginRight}px 0 ${marginLeft}px`;
|
||||
}
|
||||
|
||||
this.aligned = true;
|
||||
getItemRefs() {
|
||||
let refs = [];
|
||||
this.itemQry.map(function(itm) {
|
||||
refs.push(itm.getElementRef());
|
||||
});
|
||||
return refs;
|
||||
}
|
||||
|
||||
}
|
||||
@ -104,69 +82,30 @@ export class ToolbarBase extends Ion {
|
||||
/**
|
||||
* TODO
|
||||
*/
|
||||
@IonicComponent({
|
||||
selector: 'ion-toolbar'
|
||||
@Component({
|
||||
selector: 'ion-toolbar',
|
||||
host: {
|
||||
'class': 'toolbar'
|
||||
}
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<div class="toolbar-inner">
|
||||
<ng-content select="[menu-toggle]"></ng-content>
|
||||
<div class="toolbar-title">
|
||||
<div class="toolbar-inner-title">
|
||||
<ng-content select="ion-title"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-item toolbar-primary-item">
|
||||
<ng-content select="[primary]"></ng-content>
|
||||
</div>
|
||||
<div class="toolbar-item toolbar-secondary-item">
|
||||
<ng-content select="[secondary]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
directives: [
|
||||
forwardRef(() => ToolbarTitle),
|
||||
forwardRef(() => ToolbarItem)
|
||||
]
|
||||
@IonicView({
|
||||
template:
|
||||
'<div class="toolbar-inner">' +
|
||||
'<ng-content select="[menu-toggle]"></ng-content>' +
|
||||
'<ng-content select="ion-title"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[primary]"></ng-content>' +
|
||||
'<ng-content select="ion-nav-items[secondary]"></ng-content>' +
|
||||
'</div>'
|
||||
})
|
||||
export class Toolbar extends ToolbarBase {
|
||||
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
|
||||
super(elementRef, ionicConfig);
|
||||
this.itemEles = [];
|
||||
}
|
||||
|
||||
onInit() {
|
||||
super.onInit();
|
||||
|
||||
// TODO: THIS IS HORRIBLE, FIX
|
||||
// setTimeout(() => {
|
||||
// this.alignTitle();
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.alignTitle()
|
||||
// }, 64);
|
||||
|
||||
// }, 32);
|
||||
constructor(
|
||||
elementRef: ElementRef ,
|
||||
config: IonicConfig,
|
||||
@Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
|
||||
@Query(ToolbarItem) itemQry: QueryList<ToolbarItem>
|
||||
) {
|
||||
super(elementRef, config, titleQry, itemQry);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '.toolbar-title'
|
||||
})
|
||||
class ToolbarTitle {
|
||||
constructor(@Host() toolbar: Toolbar, elementRef: ElementRef) {
|
||||
toolbar.titleElement(elementRef);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '.toolbar-item'
|
||||
})
|
||||
class ToolbarItem {
|
||||
constructor(@Host() toolbar: Toolbar, elementRef: ElementRef) {
|
||||
toolbar.itemElements(elementRef);
|
||||
}
|
||||
}
|
||||
|
||||
@ -275,7 +275,7 @@ export class ViewItem {
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
navbarElement() {
|
||||
navbarRef() {
|
||||
let navbarView = this.navbarView();
|
||||
if (navbarView) {
|
||||
return navbarView.getElementRef();
|
||||
@ -286,10 +286,10 @@ export class ViewItem {
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
titleElement() {
|
||||
titleRef() {
|
||||
let navbarView = this.navbarView();
|
||||
if (navbarView) {
|
||||
return navbarView.titleElement();
|
||||
return navbarView.getTitleRef();
|
||||
}
|
||||
}
|
||||
|
||||
@ -297,10 +297,10 @@ export class ViewItem {
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
backButtonElement() {
|
||||
navbarItemRefs() {
|
||||
let navbarView = this.navbarView();
|
||||
if (navbarView) {
|
||||
return navbarView.backButtonElement();
|
||||
return navbarView.getItemRefs();
|
||||
}
|
||||
}
|
||||
|
||||
@ -308,10 +308,10 @@ export class ViewItem {
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
backButtonTextElement() {
|
||||
backBtnRef() {
|
||||
let navbarView = this.navbarView();
|
||||
if (navbarView) {
|
||||
return navbarView.backButtonTextElement();
|
||||
return navbarView.getBackButtonRef();
|
||||
}
|
||||
}
|
||||
|
||||
@ -319,10 +319,10 @@ export class ViewItem {
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
navbarItemElements() {
|
||||
backBtnTextRef() {
|
||||
let navbarView = this.navbarView();
|
||||
if (navbarView) {
|
||||
return navbarView.itemElements();
|
||||
return navbarView.getBackButtonTextRef();
|
||||
}
|
||||
}
|
||||
|
||||
@ -333,10 +333,6 @@ export class ViewItem {
|
||||
postRender() {
|
||||
// the elements are in the DOM and the browser
|
||||
// has rendered them in their correct locations
|
||||
let navbarView = this.navbarView();
|
||||
if (navbarView) {
|
||||
navbarView.alignTitle();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
Slides, Slide, SlideLazy,
|
||||
Tabs, Tab,
|
||||
Card, List, ListHeader, Item, ItemGroup, ItemGroupTitle,
|
||||
Toolbar,
|
||||
Toolbar, ToolbarTitle, ToolbarItem,
|
||||
Icon,
|
||||
Checkbox, Switch,
|
||||
TextInput, TextInputElement, Label,
|
||||
@ -58,7 +58,11 @@ export const IonicDirectives = [
|
||||
// Tabs
|
||||
forwardRef(() => Tabs),
|
||||
forwardRef(() => Tab),
|
||||
|
||||
// Toolbar
|
||||
forwardRef(() => Toolbar),
|
||||
forwardRef(() => ToolbarTitle),
|
||||
forwardRef(() => ToolbarItem),
|
||||
|
||||
// Media
|
||||
forwardRef(() => Icon),
|
||||
|
||||
@ -16,7 +16,6 @@ IonicConfig.modeConfig('ios', {
|
||||
forwardIcon: 'ion-ios-arrow-forward',
|
||||
iconMode: 'ios',
|
||||
|
||||
navTitleAlign: 'center',
|
||||
tabBarPlacement: 'bottom',
|
||||
viewTransition: 'ios',
|
||||
|
||||
@ -37,7 +36,6 @@ IonicConfig.modeConfig('md', {
|
||||
forwardIcon: '',
|
||||
iconMode: 'md',
|
||||
|
||||
navTitleAlign: 'left',
|
||||
tabBarPlacement: 'top',
|
||||
viewTransition: 'md',
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ class IOSTransition extends Transition {
|
||||
.to(OPACITY, 0);
|
||||
|
||||
if (this.leaving.enableBack() && this.viewWidth() > 200) {
|
||||
let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement());
|
||||
let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef());
|
||||
leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px');
|
||||
this.leavingNavbar.add(leavingBackButtonText);
|
||||
}
|
||||
@ -93,7 +93,7 @@ class IOSTransition extends Transition {
|
||||
.to(OPACITY, 0);
|
||||
|
||||
if (this.entering.enableBack() && this.viewWidth() > 200) {
|
||||
let enteringBackButtonText = new Animation(this.entering.backButtonTextElement());
|
||||
let enteringBackButtonText = new Animation(this.entering.backBtnTextRef());
|
||||
enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER);
|
||||
this.enteringNavbar.add(enteringBackButtonText);
|
||||
}
|
||||
|
||||
@ -29,23 +29,23 @@ export class Transition extends Animation {
|
||||
|
||||
if (opts.navbar !== false) {
|
||||
|
||||
let enteringNavbar = this.enteringNavbar = new Animation(enteringItem.navbarElement());
|
||||
let enteringNavbar = this.enteringNavbar = new Animation(enteringItem.navbarRef());
|
||||
enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
|
||||
|
||||
if (enteringItem.enableBack()) {
|
||||
// only animate in the back button if the entering view has it enabled
|
||||
let enteringBackButton = this.enteringBackButton = new Animation(enteringItem.backButtonElement());
|
||||
let enteringBackButton = this.enteringBackButton = new Animation(enteringItem.backBtnRef());
|
||||
enteringBackButton
|
||||
.before.addClass(SHOW_BACK_BUTTON)
|
||||
.fadeIn();
|
||||
enteringNavbar.add(enteringBackButton);
|
||||
}
|
||||
|
||||
this.enteringTitle = new Animation(enteringItem.titleElement());
|
||||
this.enteringTitle = new Animation(enteringItem.titleRef());
|
||||
enteringNavbar.add(this.enteringTitle);
|
||||
this.add(enteringNavbar);
|
||||
|
||||
this.enteringNavbarItems = new Animation(enteringItem.navbarItemElements())
|
||||
this.enteringNavbarItems = new Animation(enteringItem.navbarItemRefs());
|
||||
this.enteringNavbarItems.fadeIn();
|
||||
enteringNavbar.add(this.enteringNavbarItems);
|
||||
}
|
||||
@ -56,19 +56,19 @@ export class Transition extends Animation {
|
||||
this.leavingView = new Animation(leavingItem.viewElementRef());
|
||||
this.leavingView.after.removeClass(SHOW_VIEW_CSS);
|
||||
|
||||
let leavingNavbar = this.leavingNavbar = new Animation(leavingItem.navbarElement());
|
||||
let leavingNavbar = this.leavingNavbar = new Animation(leavingItem.navbarRef());
|
||||
leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
|
||||
|
||||
let leavingBackButton = this.leavingBackButton = new Animation(leavingItem.backButtonElement());
|
||||
let leavingBackButton = this.leavingBackButton = new Animation(leavingItem.backBtnRef());
|
||||
leavingBackButton
|
||||
.after.removeClass(SHOW_BACK_BUTTON)
|
||||
.fadeOut();
|
||||
leavingNavbar.add(leavingBackButton);
|
||||
|
||||
this.leavingTitle = new Animation(leavingItem.titleElement());
|
||||
this.leavingTitle = new Animation(leavingItem.titleRef());
|
||||
leavingNavbar.add(this.leavingTitle);
|
||||
|
||||
this.leavingNavbarItems = new Animation(leavingItem.navbarItemElements());
|
||||
this.leavingNavbarItems = new Animation(leavingItem.navbarItemRefs());
|
||||
this.leavingNavbarItems.fadeOut();
|
||||
leavingNavbar.add(this.leavingNavbarItems);
|
||||
|
||||
|
||||
@ -225,20 +225,21 @@ export function closest(el, selector) {
|
||||
* to reduce DOM reads. Cache is cleared on a window resize.
|
||||
* @param {TODO} ele TODO
|
||||
*/
|
||||
export function getDimensions(ele) {
|
||||
if (!ele.ionicId) {
|
||||
ele.ionicId = ++ionicElementIds;
|
||||
if (ele.ionicId % 100 === 0) {
|
||||
export function getDimensions(ion) {
|
||||
if (!ion._dimId) {
|
||||
ion._dimId = ++dimensionIds;
|
||||
if (ion._dimId % 100 === 0) {
|
||||
// periodically flush dimensions
|
||||
flushDimensionCache();
|
||||
}
|
||||
}
|
||||
|
||||
let dimensions = elementDimensions[ele.ionicId];
|
||||
let dimensions = dimensionCache[ion._dimId];
|
||||
if (!dimensions) {
|
||||
dimensions = elementDimensions[ele.ionicId] = {
|
||||
width: ele.offsetWidth,
|
||||
height: ele.offsetHeight
|
||||
let ele = ion.getNativeElement();
|
||||
dimensions = dimensionCache[ion._dimId] = {
|
||||
w: ele.offsetWidth,
|
||||
h: ele.offsetHeight
|
||||
};
|
||||
}
|
||||
|
||||
@ -246,18 +247,18 @@ export function getDimensions(ele) {
|
||||
}
|
||||
|
||||
export function windowDimensions() {
|
||||
if (!elementDimensions.win) {
|
||||
elementDimensions.win = {
|
||||
if (!dimensionCache.win) {
|
||||
dimensionCache.win = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
}
|
||||
return elementDimensions.win;
|
||||
return dimensionCache.win;
|
||||
}
|
||||
|
||||
export function flushDimensionCache() {
|
||||
elementDimensions = {};
|
||||
dimensionCache = {};
|
||||
}
|
||||
|
||||
let elementDimensions = {};
|
||||
let ionicElementIds = 0;
|
||||
let dimensionCache = {};
|
||||
let dimensionIds = 0;
|
||||
|
||||
Reference in New Issue
Block a user