Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
fix(tab-scroller): Use superclass properties without trailing undersc…
Browse files Browse the repository at this point in the history 
…ores

PiperOrigin-RevId: 312735896
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed May 21, 2020
1 parent d30a214 commit 96dba1d
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 65 deletions.
38 changes: 23 additions & 15 deletions packages/mdc-tab-scroller/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@ export class MDCTabScroller extends MDCComponent<MDCTabScrollerFoundation> {
private handleTransitionEnd_!: SpecificEventListener<'transitionend'>; // assigned in initialSyncWithDOM()

initialize() {
this.area_ = this.root_.querySelector<HTMLElement>(MDCTabScrollerFoundation.strings.AREA_SELECTOR)!;
this.content_ = this.root_.querySelector<HTMLElement>(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)!;
this.area_ = this.root.querySelector<HTMLElement>(
MDCTabScrollerFoundation.strings.AREA_SELECTOR)!;
this.content_ = this.root.querySelector<HTMLElement>(
MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)!;
}

initialSyncWithDOM() {
this.handleInteraction_ = () => this.foundation_.handleInteraction();
this.handleTransitionEnd_ = (evt) => this.foundation_.handleTransitionEnd(evt);
this.handleInteraction_ = () => this.foundation.handleInteraction();
this.handleTransitionEnd_ = (evt) => this.foundation.handleTransitionEnd(evt);

this.area_.addEventListener('wheel', this.handleInteraction_, applyPassive());
this.area_.addEventListener('touchstart', this.handleInteraction_, applyPassive());
Expand All @@ -76,20 +78,26 @@ export class MDCTabScroller extends MDCComponent<MDCTabScrollerFoundation> {
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
const adapter: MDCTabScrollerAdapter = {
eventTargetMatchesSelector: (evtTarget, selector) => matches(evtTarget as Element, selector),
addClass: (className) => this.root_.classList.add(className),
removeClass: (className) => this.root_.classList.remove(className),
eventTargetMatchesSelector: (evtTarget, selector) =>
matches(evtTarget as Element, selector),
addClass: (className) => this.root.classList.add(className),
removeClass: (className) => this.root.classList.remove(className),
addScrollAreaClass: (className) => this.area_.classList.add(className),
setScrollAreaStyleProperty: (prop, value) => this.area_.style.setProperty(prop, value),
setScrollContentStyleProperty: (prop, value) => this.content_.style.setProperty(prop, value),
getScrollContentStyleValue: (propName) => window.getComputedStyle(this.content_).getPropertyValue(propName),
setScrollAreaStyleProperty: (prop, value) =>
this.area_.style.setProperty(prop, value),
setScrollContentStyleProperty: (prop, value) =>
this.content_.style.setProperty(prop, value),
getScrollContentStyleValue: (propName) =>
window.getComputedStyle(this.content_).getPropertyValue(propName),
setScrollAreaScrollLeft: (scrollX) => this.area_.scrollLeft = scrollX,
getScrollAreaScrollLeft: () => this.area_.scrollLeft,
getScrollContentOffsetWidth: () => this.content_.offsetWidth,
getScrollAreaOffsetWidth: () => this.area_.offsetWidth,
computeScrollAreaClientRect: () => this.area_.getBoundingClientRect(),
computeScrollContentClientRect: () => this.content_.getBoundingClientRect(),
computeHorizontalScrollbarHeight: () => util.computeHorizontalScrollbarHeight(document),
computeScrollContentClientRect: () =>
this.content_.getBoundingClientRect(),
computeHorizontalScrollbarHeight: () =>
util.computeHorizontalScrollbarHeight(document),
};
// tslint:enable:object-literal-sort-keys
return new MDCTabScrollerFoundation(adapter);
Expand All @@ -99,7 +107,7 @@ export class MDCTabScroller extends MDCComponent<MDCTabScrollerFoundation> {
* Returns the current visual scroll position
*/
getScrollPosition(): number {
return this.foundation_.getScrollPosition();
return this.foundation.getScrollPosition();
}

/**
Expand All @@ -114,14 +122,14 @@ export class MDCTabScroller extends MDCComponent<MDCTabScrollerFoundation> {
* @param scrollXIncrement The pixel value by which to increment the scroll value
*/
incrementScroll(scrollXIncrement: number) {
this.foundation_.incrementScroll(scrollXIncrement);
this.foundation.incrementScroll(scrollXIncrement);
}

/**
* Scrolls to the given pixel position
* @param scrollX The pixel value to scroll to
*/
scrollTo(scrollX: number) {
this.foundation_.scrollTo(scrollX);
this.foundation.scrollTo(scrollX);
}
}
65 changes: 35 additions & 30 deletions packages/mdc-tab-scroller/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,12 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
init() {
// Compute horizontal scrollbar height on scroller with overflow initially hidden, then update overflow to scroll
// and immediately adjust bottom margin to avoid the scrollbar initially appearing before JS runs.
const horizontalScrollbarHeight = this.adapter_.computeHorizontalScrollbarHeight();
this.adapter_.setScrollAreaStyleProperty('margin-bottom', -horizontalScrollbarHeight + 'px');
this.adapter_.addScrollAreaClass(MDCTabScrollerFoundation.cssClasses.SCROLL_AREA_SCROLL);
const horizontalScrollbarHeight =
this.adapter.computeHorizontalScrollbarHeight();
this.adapter.setScrollAreaStyleProperty(
'margin-bottom', -horizontalScrollbarHeight + 'px');
this.adapter.addScrollAreaClass(
MDCTabScrollerFoundation.cssClasses.SCROLL_AREA_SCROLL);
}

/**
Expand All @@ -92,7 +95,7 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
}

const currentTranslateX = this.calculateCurrentTranslateX_();
const scrollLeft = this.adapter_.getScrollAreaScrollLeft();
const scrollLeft = this.adapter.getScrollAreaScrollLeft();
return scrollLeft - currentTranslateX;
}

Expand All @@ -116,12 +119,13 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
// Early exit if we aren't animating or the event was triggered by a different element.
const evtTarget = evt.target as Element;
if (!this.isAnimating_ ||
!this.adapter_.eventTargetMatchesSelector(evtTarget, MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)) {
!this.adapter.eventTargetMatchesSelector(
evtTarget, MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)) {
return;
}

this.isAnimating_ = false;
this.adapter_.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
}

/**
Expand Down Expand Up @@ -153,7 +157,7 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
}

this.stopScrollAnimation_();
this.adapter_.setScrollAreaScrollLeft(operation.finalScrollPosition);
this.adapter.setScrollAreaScrollLeft(operation.finalScrollPosition);
}

/**
Expand Down Expand Up @@ -182,7 +186,7 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
* @return translateX value from a CSS matrix transform function string.
*/
private calculateCurrentTranslateX_(): number {
const transformValue = this.adapter_.getScrollContentStyleValue('transform');
const transformValue = this.adapter.getScrollContentStyleValue('transform');
// Early exit if no transform is present
if (transformValue === 'none') {
return 0;
Expand Down Expand Up @@ -221,8 +225,8 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
}

private calculateScrollEdges_(): MDCTabScrollerHorizontalEdges {
const contentWidth = this.adapter_.getScrollContentOffsetWidth();
const rootWidth = this.adapter_.getScrollAreaOffsetWidth();
const contentWidth = this.adapter.getScrollContentOffsetWidth();
const rootWidth = this.adapter.getScrollAreaOffsetWidth();
return {
left: 0,
right: contentWidth - rootWidth,
Expand Down Expand Up @@ -285,14 +289,15 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
this.stopScrollAnimation_();
// This animation uses the FLIP approach.
// Read more here: https://aerotwist.com/blog/flip-your-animations/
this.adapter_.setScrollAreaScrollLeft(animation.finalScrollPosition);
this.adapter_.setScrollContentStyleProperty('transform', `translateX(${animation.scrollDelta}px)`);
this.adapter.setScrollAreaScrollLeft(animation.finalScrollPosition);
this.adapter.setScrollContentStyleProperty(
'transform', `translateX(${animation.scrollDelta}px)`);
// Force repaint
this.adapter_.computeScrollAreaClientRect();
this.adapter.computeScrollAreaClientRect();

requestAnimationFrame(() => {
this.adapter_.addClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
this.adapter_.setScrollContentStyleProperty('transform', 'none');
this.adapter.addClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
this.adapter.setScrollContentStyleProperty('transform', 'none');
});

this.isAnimating_ = true;
Expand All @@ -304,17 +309,17 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
private stopScrollAnimation_() {
this.isAnimating_ = false;
const currentScrollPosition = this.getAnimatingScrollPosition_();
this.adapter_.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
this.adapter_.setScrollContentStyleProperty('transform', 'translateX(0px)');
this.adapter_.setScrollAreaScrollLeft(currentScrollPosition);
this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
this.adapter.setScrollContentStyleProperty('transform', 'translateX(0px)');
this.adapter.setScrollAreaScrollLeft(currentScrollPosition);
}

/**
* Gets the current scroll position during animation
*/
private getAnimatingScrollPosition_(): number {
const currentTranslateX = this.calculateCurrentTranslateX_();
const scrollLeft = this.adapter_.getScrollAreaScrollLeft();
const scrollLeft = this.adapter.getScrollAreaScrollLeft();
if (this.isRTL_()) {
return this.getRTLScroller().getAnimatingScrollPosition(scrollLeft, currentTranslateX);
}
Expand Down Expand Up @@ -344,37 +349,37 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
//
// We use those principles below to determine which RTL scrollLeft
// behavior is implemented in the current browser.
const initialScrollLeft = this.adapter_.getScrollAreaScrollLeft();
this.adapter_.setScrollAreaScrollLeft(initialScrollLeft - 1);
const newScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const initialScrollLeft = this.adapter.getScrollAreaScrollLeft();
this.adapter.setScrollAreaScrollLeft(initialScrollLeft - 1);
const newScrollLeft = this.adapter.getScrollAreaScrollLeft();

// If the newScrollLeft value is negative,then we know that the browser has
// implemented negative RTL scrolling, since all other implementations have
// only positive values.
if (newScrollLeft < 0) {
// Undo the scrollLeft test check
this.adapter_.setScrollAreaScrollLeft(initialScrollLeft);
return new MDCTabScrollerRTLNegative(this.adapter_);
this.adapter.setScrollAreaScrollLeft(initialScrollLeft);
return new MDCTabScrollerRTLNegative(this.adapter);
}

const rootClientRect = this.adapter_.computeScrollAreaClientRect();
const contentClientRect = this.adapter_.computeScrollContentClientRect();
const rootClientRect = this.adapter.computeScrollAreaClientRect();
const contentClientRect = this.adapter.computeScrollContentClientRect();
const rightEdgeDelta = Math.round(contentClientRect.right - rootClientRect.right);
// Undo the scrollLeft test check
this.adapter_.setScrollAreaScrollLeft(initialScrollLeft);
this.adapter.setScrollAreaScrollLeft(initialScrollLeft);

// By calculating the clientRect of the root element and the clientRect of
// the content element, we can determine how much the scroll value changed
// when we performed the scrollLeft subtraction above.
if (rightEdgeDelta === newScrollLeft) {
return new MDCTabScrollerRTLReverse(this.adapter_);
return new MDCTabScrollerRTLReverse(this.adapter);
}

return new MDCTabScrollerRTLDefault(this.adapter_);
return new MDCTabScrollerRTLDefault(this.adapter);
}

private isRTL_(): boolean {
return this.adapter_.getScrollContentStyleValue('direction') === 'rtl';
return this.adapter.getScrollContentStyleValue('direction') === 'rtl';
}
}

Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-tab-scroller/rtl-default-scroller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ import {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';

export class MDCTabScrollerRTLDefault extends MDCTabScrollerRTL {
getScrollPositionRTL(): number {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const {right} = this.calculateScrollEdges_();
// Scroll values on most browsers are ints instead of floats so we round
return Math.round(right - currentScrollLeft);
}

scrollToRTL(scrollX: number): MDCTabScrollerAnimation {
const edges = this.calculateScrollEdges_();
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const clampedScrollLeft = this.clampScrollValue_(edges.right - scrollX);
return {
finalScrollPosition: clampedScrollLeft,
Expand All @@ -43,7 +43,7 @@ export class MDCTabScrollerRTLDefault extends MDCTabScrollerRTL {
}

incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const clampedScrollLeft = this.clampScrollValue_(currentScrollLeft - scrollX);
return {
finalScrollPosition: clampedScrollLeft,
Expand All @@ -56,8 +56,8 @@ export class MDCTabScrollerRTLDefault extends MDCTabScrollerRTL {
}

private calculateScrollEdges_(): MDCTabScrollerHorizontalEdges {
const contentWidth = this.adapter_.getScrollContentOffsetWidth();
const rootWidth = this.adapter_.getScrollAreaOffsetWidth();
const contentWidth = this.adapter.getScrollContentOffsetWidth();
const rootWidth = this.adapter.getScrollAreaOffsetWidth();
return {
left: 0,
right: contentWidth - rootWidth,
Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-tab-scroller/rtl-negative-scroller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ import {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';

export class MDCTabScrollerRTLNegative extends MDCTabScrollerRTL {
getScrollPositionRTL(translateX: number): number {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
return Math.round(translateX - currentScrollLeft);
}

scrollToRTL(scrollX: number): MDCTabScrollerAnimation {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const clampedScrollLeft = this.clampScrollValue_(-scrollX);
return {
finalScrollPosition: clampedScrollLeft,
Expand All @@ -40,7 +40,7 @@ export class MDCTabScrollerRTLNegative extends MDCTabScrollerRTL {
}

incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const clampedScrollLeft = this.clampScrollValue_(currentScrollLeft - scrollX);
return {
finalScrollPosition: clampedScrollLeft,
Expand All @@ -53,8 +53,8 @@ export class MDCTabScrollerRTLNegative extends MDCTabScrollerRTL {
}

private calculateScrollEdges_(): MDCTabScrollerHorizontalEdges {
const contentWidth = this.adapter_.getScrollContentOffsetWidth();
const rootWidth = this.adapter_.getScrollAreaOffsetWidth();
const contentWidth = this.adapter.getScrollContentOffsetWidth();
const rootWidth = this.adapter.getScrollAreaOffsetWidth();
return {
left: rootWidth - contentWidth,
right: 0,
Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-tab-scroller/rtl-reverse-scroller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ import {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';

export class MDCTabScrollerRTLReverse extends MDCTabScrollerRTL {
getScrollPositionRTL(translateX: number): number {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
// Scroll values on most browsers are ints instead of floats so we round
return Math.round(currentScrollLeft - translateX);
}

scrollToRTL(scrollX: number): MDCTabScrollerAnimation {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const clampedScrollLeft = this.clampScrollValue_(scrollX);
return {
finalScrollPosition: clampedScrollLeft,
Expand All @@ -41,7 +41,7 @@ export class MDCTabScrollerRTLReverse extends MDCTabScrollerRTL {
}

incrementScrollRTL(scrollX: number): MDCTabScrollerAnimation {
const currentScrollLeft = this.adapter_.getScrollAreaScrollLeft();
const currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
const clampedScrollLeft = this.clampScrollValue_(currentScrollLeft + scrollX);
return {
finalScrollPosition: clampedScrollLeft,
Expand All @@ -54,8 +54,8 @@ export class MDCTabScrollerRTLReverse extends MDCTabScrollerRTL {
}

private calculateScrollEdges_(): MDCTabScrollerHorizontalEdges {
const contentWidth = this.adapter_.getScrollContentOffsetWidth();
const rootWidth = this.adapter_.getScrollAreaOffsetWidth();
const contentWidth = this.adapter.getScrollContentOffsetWidth();
const rootWidth = this.adapter.getScrollAreaOffsetWidth();
return {
left: contentWidth - rootWidth,
right: 0,
Expand Down
6 changes: 1 addition & 5 deletions packages/mdc-tab-scroller/rtl-scroller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,7 @@ import {MDCTabScrollerAdapter} from './adapter';
import {MDCTabScrollerAnimation} from './types';

export abstract class MDCTabScrollerRTL {
protected readonly adapter_: MDCTabScrollerAdapter;

constructor(adapter: MDCTabScrollerAdapter) {
this.adapter_ = adapter;
}
constructor(protected readonly adapter: MDCTabScrollerAdapter) {}

abstract getScrollPositionRTL(translateX: number): number;

Expand Down

0 comments on commit 96dba1d

Please sign in to comment.