Skip to content

Commit

Permalink
Various toolbar improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@gjdev
gjdev committed Sep 18, 2017
1 parent 4264292 commit abd0fe7
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 18 deletions.
2 changes: 1 addition & 1 deletion bundle/src/components/toolbar/mdc.toolbar.adapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface MdcToolbarAdapter {
getViewportWidth: () => number;
getViewportScrollY: () => number;
getOffsetHeight: () => number;
getFlexibleRowElementOffsetHeight: () => number;
getFirstRowElementOffsetHeight: () => number;
notifyChange: (evtData: {flexibleExpansionRatio: number}) => void;
setStyle: (property: string, value: number) => void;
setStyleForTitleElement: (property: string, value: number) => void;
Expand Down
111 changes: 94 additions & 17 deletions bundle/src/components/toolbar/mdc.toolbar.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { MdcEventRegistry } from '../../utils/mdc.event.registry';
selector: '[mdcToolbarRow]'
})
export class MdcToolbarRowDirective {
@HostBinding('class.mdc-toolbar__row') hasHostClass = true;
@HostBinding('class.mdc-toolbar__row') _hostClass = true;

constructor(public elementRef: ElementRef) {
}
Expand All @@ -22,7 +22,7 @@ export class MdcToolbarRowDirective {
selector: '[mdcToolbarSection]'
})
export class MdcToolbarSectionDirective {
@HostBinding('class.mdc-toolbar__section') hasHostClass = true;
@HostBinding('class.mdc-toolbar__section') _hostClass = true;
private _alignEnd = false;
private _alignStart = false;
private _shrinkToFit = false;
Expand Down Expand Up @@ -56,7 +56,27 @@ export class MdcToolbarSectionDirective {
selector: '[mdcToolbarTitle]'
})
export class MdcToolbarTitleDirective {
@HostBinding('class.mdc-toolbar__title') hasHostClass = true;
@HostBinding('class.mdc-toolbar__title') _hostClass = true;

constructor(public elementRef: ElementRef) {
}
}

@Directive({
selector: '[mdcToolbarIcon]'
})
export class MdcToolbarIcon {
@HostBinding('class.mdc-toolbar__icon') _hostClass = true;

constructor(public elementRef: ElementRef) {
}
}

@Directive({
selector: '[mdcToolbarIconMenu]'
})
export class MdcToolbarIconMenu {
@HostBinding('class.mdc-toolbar__icon--menu') _hostClass = true;

constructor(public elementRef: ElementRef) {
}
Expand All @@ -67,7 +87,7 @@ export class MdcToolbarTitleDirective {
exportAs: 'mdcFixedAdjust'
})
export class MdcToolbarFixedAdjustDirective {
@HostBinding('class.mdc-toolbar-fixed-adjust') hasHostClass = true;
@HostBinding('class.mdc-toolbar-fixed-adjust') _hostClass = true;

constructor(public elementRef: ElementRef) {
}
Expand All @@ -76,12 +96,15 @@ export class MdcToolbarFixedAdjustDirective {
@Directive({
selector: '[mdcToolbar]'
})
export class MdcToolbarDirective implements AfterContentInit, OnDestroy {
@HostBinding('class.mdc-toolbar') hasHostClass = true;
export class MdcToolbarDirective implements AfterViewInit, OnDestroy {
@HostBinding('class.mdc-toolbar') _hostClass = true;
@Input() mdcFixedAdjust: MdcToolbarFixedAdjustDirective;
@Output() expansionRatio = new EventEmitter<number>();
@ContentChild(MdcToolbarTitleDirective) mdcTitle;
@ContentChild(MdcToolbarRowDirective) mdcFirstRow;
private _mdcViewport: HTMLElement;
private _mdcViewPortScrollListener;
private _initialized = false;
private _fixed = false;
private _waterfall = false;
private _fixedLastRowOnly = false;
Expand All @@ -99,21 +122,27 @@ export class MdcToolbarDirective implements AfterContentInit, OnDestroy {
this.renderer.removeClass(this.root.nativeElement, className);
},
registerScrollHandler: (handler: EventListener) => {
window.addEventListener('scroll', handler, util.applyPassive());
if (this._mdcViewport)
this._mdcViewport.addEventListener('scroll', handler, util.applyPassive());
else
window.addEventListener('scroll', handler, util.applyPassive());
},
deregisterScrollHandler: (handler: EventListener) => {
window.removeEventListener('scroll', handler, util.applyPassive());
if (this._mdcViewport)
this._mdcViewport.removeEventListener('scroll', handler, util.applyPassive());
else
window.removeEventListener('scroll', handler, util.applyPassive());
},
registerResizeHandler: (handler: EventListener) => {
window.addEventListener('resize', handler, util.applyPassive());
},
deregisterResizeHandler: (handler: EventListener) => {
window.removeEventListener('resize', handler, util.applyPassive());
},
getViewportWidth: () => window.innerWidth,
getViewportScrollY: () => window.pageYOffset,
getViewportWidth: () => this._mdcViewport ? this._mdcViewport.clientWidth : window.innerWidth,
getViewportScrollY: () => this._mdcViewport ? this._mdcViewport.scrollTop : window.pageYOffset,
getOffsetHeight: () => this.root.nativeElement.offsetHeight,
getFlexibleRowElementOffsetHeight: () => this.mdcFirstRow.elementRef.nativeElement.offsetHeight,
getFirstRowElementOffsetHeight: () => this.mdcFirstRow.elementRef.nativeElement.offsetHeight,
notifyChange: (evtData: {flexibleExpansionRatio: number}) => {
this.expansionRatio.emit(evtData.flexibleExpansionRatio);
},
Expand All @@ -137,20 +166,49 @@ export class MdcToolbarDirective implements AfterContentInit, OnDestroy {
constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry) {
}

ngAfterContentInit() {
ngAfterViewInit() {
// Using ngAfterViewInit instead of ngAfterContentInit, because the MDCToolbarFoundation
// uses MdcToolbarAdapter.hasClass on classes that we bind in this component. Those classes are only
// available after the view is fully initialized.
this._initialized = true;
if (this._mdcViewport) {
this._mdcViewPortScrollListener = () => {this._updateViewPort();}
this._mdcViewport.addEventListener('scroll', this._mdcViewPortScrollListener, util.applyPassive());
}
this._updateViewPort();
this.foundation.init();
}

ngOnDestroy() {
if (this._mdcViewPortScrollListener)
this._mdcViewport.removeEventListener('scroll', this._mdcViewPortScrollListener, util.applyPassive());
this.foundation.destroy();
}

@HostListener('window:resize', ['$event'])
_updateViewPort() {
if (this._initialized && this._mdcViewport) {
if (this._fixed) {
// simulate 'fixed' relative to view position of parent:
this.root.nativeElement.style.position = 'absolute';
this.root.nativeElement.style.top = this._mdcViewport.scrollTop + 'px';
} else {
// reset to position from mdc stylesheets:
this.root.nativeElement.style.position = null;
this.root.nativeElement.style.top = null;
}
}
}

@Input() @HostBinding('class.mdc-toolbar--fixed') get mdcFixed() {
return this._fixed;
}

set mdcFixed(val: any) {
this._fixed = asBoolean(val);
let newValue = asBoolean(val);
if (this._initialized && this._fixed !== newValue)
throw new Error('mdcFixed directive should not be changed after the mdcToolbar is initialized');
this._fixed = newValue;
}

@Input() @HostBinding('class.mdc-toolbar--waterfall') get mdcWaterfall() {
Expand All @@ -166,22 +224,41 @@ export class MdcToolbarDirective implements AfterContentInit, OnDestroy {
}

set mdcFixedLastrowOnly(val: any) {
this._fixedLastRowOnly = asBoolean(val);
let newValue = asBoolean(val);
if (this._initialized && this._fixedLastRowOnly !== newValue)
throw new Error('mdcFixedLastrowOnly directive should not be changed after the mdcToolbar is initialized');
this._fixedLastRowOnly = newValue;
}

@Input() @HostBinding('class.mdc-toolbar--flexible') get mdcFlexible() {
return this._flexible;
}

set mdcFlexible(val: any) {
this._flexible = asBoolean(val);
let newValue = asBoolean(val);
if (this._initialized && this._flexible !== newValue)
throw new Error('mdcFlexible directive should not be changed after the mdcToolbar is initialized');
this._flexible = newValue;
}

@Input() @HostBinding('class.mdc-toolbar--flexible') get mdcFlexibleDefaultBehavior() {
@Input() @HostBinding('class.mdc-toolbar--flexible-default-behavior') get mdcFlexibleDefaultBehavior() {
return this._flexibleDefaultBehavior;
}

set mdcFlexibleDefaultBehavior(val: any) {
this._flexibleDefaultBehavior = asBoolean(val);
let newValue = asBoolean(val);
if (this._initialized && this._flexibleDefaultBehavior !== newValue)
throw new Error('mdcFlexibleDefaultBehavior directive should not be changed after the mdcToolbar is initialized');
this._flexibleDefaultBehavior = newValue;
}

@Input() get mdcViewport() {
return this._mdcViewport;
}

set mdcViewport(elm: HTMLElement) {
if (this._initialized && elm !== this._mdcViewport)
throw new Error('mdcViewport directive should not be changed after the mdcToolbar is initialized');
this._mdcViewport = elm;
}
}

0 comments on commit abd0fe7

Please sign in to comment.