license import { MDCComponent } from '@material/base/component' ; import { SpecificEventListener } from '@material/base/types' ; import { applyPassive } from '@material/dom/events' ; import { matches } from '@material/dom/ponyfill' ; import { MDCTabScrollerAdapter } from './adapter' ; import { MDCTabScrollerFoundation } from './foundation' ; import * as util from './util' ; type InteractionEventType = 'wheel' | 'touchstart' | 'pointerdown' | 'mousedown' | 'keydown' ; export type MDCTabScrollerFactory = ( el : Element , foundation ? : MDCTabScrollerFoundation ) => MDCTabScroller ; export class MDCTabScroller extends MDCComponent < MDCTabScrollerFoundation > { static override attachTo ( root ) { return new MDCTabScroller ( root ) ; } private content ! : HTMLElement ; private area ! : HTMLElement ; private handleInteraction ! : SpecificEventListener < InteractionEventType > ; private handleTransitionEnd ! : SpecificEventListener < 'transitionend' > ; override initialize ( ) { this . area = this . root . querySelector < HTMLElement > ( MDCTabScrollerFoundation . strings . AREA_SELECTOR ) ! ; this . content = this . root . querySelector < HTMLElement > ( MDCTabScrollerFoundation . strings . CONTENT_SELECTOR ) ! ; } override initialSyncWithDOM ( ) { 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 ( ) ) ; this . area . addEventListener ( 'pointerdown' , this . handleInteraction , applyPassive ( ) ) ; this . area . addEventListener ( 'mousedown' , this . handleInteraction , applyPassive ( ) ) ; this . area . addEventListener ( 'keydown' , this . handleInteraction , applyPassive ( ) ) ; this . content . addEventListener ( 'transitionend' , this . handleTransitionEnd ) ; } override destroy ( ) { super . destroy ( ) ; this . area . removeEventListener ( 'wheel' , this . handleInteraction , applyPassive ( ) ) ; this . area . removeEventListener ( 'touchstart' , this . handleInteraction , applyPassive ( ) ) ; this . area . removeEventListener ( 'pointerdown' , this . handleInteraction , applyPassive ( ) ) ; this . area . removeEventListener ( 'mousedown' , this . handleInteraction , applyPassive ( ) ) ; this . area . removeEventListener ( 'keydown' , this . handleInteraction , applyPassive ( ) ) ; this . content . removeEventListener ( 'transitionend' , this . handleTransitionEnd ) ; } override getDefaultFoundation ( ) { const adapter = { 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 ) , 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 ) , } ; return new MDCTabScrollerFoundation ( adapter ) ; } /**
     * Returns the current visual scroll position
     */ getScrollPosition ( ) { return this . foundation . getScrollPosition ( ) ; } /**
     * Returns the width of the scroll content
     */ getScrollContentWidth ( ) { return this . content . offsetWidth ; } param scrollXIncrement incrementScroll ( scrollXIncrement ) { this . foundation . incrementScroll ( scrollXIncrement ) ; } param scrollX scrollTo ( scrollX ) { this . foundation . scrollTo ( scrollX ) ; } }