diff --git a/packages/mdc-top-app-bar/fixed/foundation.ts b/packages/mdc-top-app-bar/fixed/foundation.ts index 19a34ebcae5..41e2f053267 100644 --- a/packages/mdc-top-app-bar/fixed/foundation.ts +++ b/packages/mdc-top-app-bar/fixed/foundation.ts @@ -39,12 +39,10 @@ class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation { init() { super.init(); - this.adapter_.registerScrollHandler(this.scrollHandler_); } destroy() { super.destroy(); - this.adapter_.deregisterScrollHandler(this.scrollHandler_); } /** diff --git a/packages/mdc-top-app-bar/foundation.ts b/packages/mdc-top-app-bar/foundation.ts index 94cc0741aac..ad372afa2c4 100644 --- a/packages/mdc-top-app-bar/foundation.ts +++ b/packages/mdc-top-app-bar/foundation.ts @@ -62,31 +62,35 @@ class MDCTopAppBarBaseFoundation extends MDCFoundation { // tslint:enable:object-literal-sort-keys } - protected navClickHandler_: EventListener; - protected scrollHandler_: EventListener; + protected scrollHandler_?: EventListener; + protected resizeHandler_?: EventListener; + private readonly navClickHandler_: EventListener; constructor(adapter: Partial = {}) { super({...MDCTopAppBarBaseFoundation.defaultAdapter, ...adapter}); this.navClickHandler_ = () => this.adapter_.notifyNavigationIconClicked(); - this.scrollHandler_ = () => undefined; } init() { + if (this.scrollHandler_) { + this.adapter_.registerScrollHandler(this.scrollHandler_); + } + if (this.resizeHandler_) { + this.adapter_.registerResizeHandler(this.resizeHandler_); + } this.adapter_.registerNavigationIconInteractionHandler('click', this.navClickHandler_); } destroy() { + if (this.scrollHandler_) { + this.adapter_.deregisterScrollHandler(this.scrollHandler_); + } + if (this.resizeHandler_) { + this.adapter_.deregisterResizeHandler(this.resizeHandler_); + } this.adapter_.deregisterNavigationIconInteractionHandler('click', this.navClickHandler_); } - - initScrollHandler() { - this.adapter_.registerScrollHandler(this.scrollHandler_); - } - - destroyScrollHandler() { - this.adapter_.deregisterScrollHandler(this.scrollHandler_); - } } export {MDCTopAppBarBaseFoundation as default, MDCTopAppBarBaseFoundation}; diff --git a/packages/mdc-top-app-bar/index.ts b/packages/mdc-top-app-bar/index.ts index edc8e0f25d4..02bfc91a327 100644 --- a/packages/mdc-top-app-bar/index.ts +++ b/packages/mdc-top-app-bar/index.ts @@ -64,9 +64,7 @@ class MDCTopAppBar extends MDCComponent { } setScrollTarget(target: EventTarget) { - this.foundation_.destroyScrollHandler(); this.scrollTarget_ = target; - this.foundation_.initScrollHandler(); } getDefaultFoundation(): MDCTopAppBarBaseFoundation { diff --git a/packages/mdc-top-app-bar/short/foundation.ts b/packages/mdc-top-app-bar/short/foundation.ts index b9c77a29798..9da159c618c 100644 --- a/packages/mdc-top-app-bar/short/foundation.ts +++ b/packages/mdc-top-app-bar/short/foundation.ts @@ -33,19 +33,17 @@ class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation { constructor(adapter: Partial = {}) { super(adapter); - - this.scrollHandler_ = () => this.shortAppBarScrollHandler_(); } init() { super.init(); - const isAlwaysCollapsed = this.adapter_.hasClass(cssClasses.SHORT_COLLAPSED_CLASS); if (this.adapter_.getTotalActionItems() > 0) { this.adapter_.addClass(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS); } - if (!isAlwaysCollapsed) { + if (!this.isAlwaysCollapsed_) { + this.scrollHandler_ = () => this.shortAppBarScrollHandler_(); this.adapter_.registerScrollHandler(this.scrollHandler_); this.shortAppBarScrollHandler_(); } @@ -53,7 +51,10 @@ class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation { destroy() { super.destroy(); - this.adapter_.deregisterScrollHandler(this.scrollHandler_); + } + + private get isAlwaysCollapsed_() { + return this.adapter_.hasClass(cssClasses.SHORT_COLLAPSED_CLASS); } /** diff --git a/packages/mdc-top-app-bar/standard/foundation.ts b/packages/mdc-top-app-bar/standard/foundation.ts index b734960e1d0..0d83d855dfc 100644 --- a/packages/mdc-top-app-bar/standard/foundation.ts +++ b/packages/mdc-top-app-bar/standard/foundation.ts @@ -68,8 +68,6 @@ class MDCTopAppBarFoundation extends MDCTopAppBarBaseFoundation { */ private resizeDebounceId_ = INITIAL_VALUE; - private readonly resizeHandler_: EventListener; - constructor(adapter: Partial = {}) { super(adapter); @@ -82,14 +80,10 @@ class MDCTopAppBarFoundation extends MDCTopAppBarBaseFoundation { init() { super.init(); - this.adapter_.registerScrollHandler(this.scrollHandler_); - this.adapter_.registerResizeHandler(this.resizeHandler_); } destroy() { super.destroy(); - this.adapter_.deregisterScrollHandler(this.scrollHandler_); - this.adapter_.deregisterResizeHandler(this.resizeHandler_); this.adapter_.setStyle('top', ''); } diff --git a/test/unit/mdc-top-app-bar/foundation.test.js b/test/unit/mdc-top-app-bar/foundation.test.js index fdeee603786..e4f42bc4e7f 100644 --- a/test/unit/mdc-top-app-bar/foundation.test.js +++ b/test/unit/mdc-top-app-bar/foundation.test.js @@ -72,17 +72,3 @@ test('click handler removed from navigation icon during destroy', () => { foundation.destroy(); td.verify(mockAdapter.deregisterNavigationIconInteractionHandler('click', td.matchers.isA(Function))); }); - -test('#initScrollHandler calls registerScrollHandler', () => { - const {foundation, mockAdapter} = setupTest(); - foundation.scrollHandler_ = td.func(); - foundation.initScrollHandler(); - td.verify(mockAdapter.registerScrollHandler(foundation.scrollHandler_), {times: 1}); -}); - -test('#destroyScrollHandler calls deregisterScrollHandler', () => { - const {foundation, mockAdapter} = setupTest(); - foundation.scrollHandler_ = td.func(); - foundation.destroyScrollHandler(); - td.verify(mockAdapter.deregisterScrollHandler(foundation.scrollHandler_), {times: 1}); -}); diff --git a/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js index 4fa9627bc45..85c835a63c0 100644 --- a/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js +++ b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js @@ -121,17 +121,6 @@ test('destroy destroys icon ripples', () => { }); }); -test('#setScrollTarget deregisters and registers scroll handler on provided target', () => { - const {component} = setupTest(); - const fakeTarget = {}; - component.foundation_.destroyScrollHandler = td.func(); - component.foundation_.initScrollHandler = td.func(); - component.setScrollTarget(fakeTarget); - td.verify(component.foundation_.destroyScrollHandler(), {times: 1}); - td.verify(component.foundation_.initScrollHandler(), {times: 1}); - assert.equal(component.scrollTarget_, fakeTarget); -}); - test('getDefaultFoundation returns the appropriate foundation for default', () => { const fixture = getFixture(); const root = fixture.querySelector(strings.ROOT_SELECTOR);