cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/__tests__/index.spec.ts

@@ -0,0 +1,78 @@
+import Indicator from '../indicator'
+import BScroll, { Options } from '@better-scroll/core'
+
+jest.mock('@better-scroll/core')
+jest.mock('../indicator')
+
+import ScrollBar from '../index'
+
+const addProperties = <T extends Object, K extends Object>(
+  target: T,
+  source: K
+) => {
+  for (const key in source) {
+    ;(target as any)[key] = source[key]
+  }
+  return target
+}
+
+describe('scroll-bar unit tests', () => {
+  let scroll: BScroll
+  let options: Partial<Options>
+
+  beforeAll(() => {
+    // create Dom
+    const wrapper = document.createElement('div')
+    const content = document.createElement('div')
+    wrapper.appendChild(content)
+    // mock bscroll
+    options = {
+      scrollbar: true,
+      scrollX: true,
+      scrollY: true,
+    }
+    scroll = new BScroll(wrapper, options)
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('constructor', () => {
+    it('should create indicator elements', () => {
+      const scrollbar = new ScrollBar(scroll)
+      // then
+      expect(scroll.wrapper).toMatchSnapshot()
+      expect(scrollbar.options).toMatchObject({
+        fade: true,
+        interactive: false,
+        customElements: [],
+        minSize: 8,
+        scrollbarTrackClickable: false,
+        scrollbarTrackOffsetType: 'step',
+        scrollbarTrackOffsetTime: 300,
+      })
+    })
+
+    it('custom scrollbar', () => {
+      const customHScrollbar = document.createElement('div')
+      addProperties(scroll.options, {
+        scrollX: true,
+        scrollY: false,
+        scrollbar: {
+          customElements: [customHScrollbar],
+        },
+      })
+      const scrollbar = new ScrollBar(scroll)
+      expect(scrollbar.indicators[0].wrapper).toBe(customHScrollbar)
+    })
+
+    it('destroy hook', () => {
+      const scrollbar = new ScrollBar(scroll)
+      scroll.hooks.trigger(scroll.hooks.eventTypes.destroy)
+      for (let indicator of scrollbar.indicators) {
+        expect(indicator.destroy).toBeCalled()
+      }
+    })
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/__tests__/indicator.spec.ts

@@ -0,0 +1,272 @@
+import Indicator, { IndicatorDirection, OffsetType } from '../indicator'
+import EventHandler from '../event-handler'
+import BScroll from '@better-scroll/core'
+import { dispatchClick } from '@better-scroll/core/src/__tests__/__utils__/event'
+
+jest.mock('@better-scroll/core')
+jest.mock('../event-handler')
+
+const addProperties = <T extends Object, K extends Object>(
+  target: T,
+  source: K
+) => {
+  for (const key in source) {
+    ;(target as any)[key] = source[key]
+  }
+  return target
+}
+
+describe('scroll-bar indicator tests', () => {
+  let scroll: BScroll
+  let indicator: Indicator
+  let wrapper = document.createElement('div')
+  let indicatorEl = document.createElement('div')
+  wrapper.appendChild(indicatorEl)
+  let indicatorOptions = {
+    wrapper,
+    direction: IndicatorDirection.Vertical,
+    fade: true,
+    fadeInTime: 250,
+    fadeOutTime: 500,
+    interactive: false,
+    minSize: 8,
+    isCustom: false,
+    scrollbarTrackClickable: false,
+    scrollbarTrackOffsetType: OffsetType.Step,
+    scrollbarTrackOffsetTime: 300,
+  }
+
+  beforeEach(() => {
+    // create Dom
+    const wrapper = document.createElement('div')
+    const content = document.createElement('div')
+    wrapper.appendChild(content)
+    scroll = new BScroll(wrapper, {})
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should have corrent key', () => {
+    indicator = new Indicator(scroll, indicatorOptions)
+    expect(indicator.keysMap).toMatchObject({
+      hasScroll: 'hasVerticalScroll',
+      size: 'height',
+      wrapperSize: 'clientHeight',
+      scrollerSize: 'scrollerHeight',
+      maxScrollPos: 'maxScrollY',
+      pos: 'y',
+      point: 'pageY',
+      translateProperty: 'translateY',
+      domRect: 'top',
+    })
+    expect(wrapper.style.opacity).toEqual('0')
+  })
+
+  it('refresh hook', () => {
+    Object.assign(indicatorOptions, {
+      direction: IndicatorDirection.Horizontal,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    addProperties(scroll, {
+      hasHorizontalScroll: true,
+      maxScrollX: 8,
+    })
+    scroll.hooks.trigger(scroll.hooks.eventTypes.refresh)
+    expect(indicator.currentPos).toBe(-8)
+  })
+
+  it('translate hook', () => {
+    Object.assign(indicatorOptions, {
+      direction: IndicatorDirection.Horizontal,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    addProperties(scroll, {
+      hasHorizontalScroll: true,
+      maxScrollX: 8,
+    })
+    const translaterHooks = scroll.scroller.translater.hooks
+    scroll.hooks.trigger(scroll.hooks.eventTypes.refresh)
+    translaterHooks.trigger(translaterHooks.eventTypes.translate, {
+      x: 10,
+      y: 0,
+    })
+    expect(indicator.currentPos).toBe(0)
+  })
+
+  it('transitionTime and transitionTimingFunction hook', () => {
+    Object.assign(indicatorOptions, {
+      direction: IndicatorDirection.Horizontal,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    const animaterHooks = scroll.scroller.animater.hooks
+    animaterHooks.trigger(animaterHooks.eventTypes.time)
+    animaterHooks.trigger(
+      animaterHooks.eventTypes.timeFunction,
+      'cubic-bezier(0.23, 1, 0.32, 1)'
+    )
+    expect(indicator.indicatorEl.style.transitionDuration).toBe('0ms')
+    expect(indicator.indicatorEl.style.transitionTimingFunction).toBe(
+      'cubic-bezier(0.23, 1, 0.32, 1)'
+    )
+  })
+
+  it("about scrolling's hook", () => {
+    Object.assign(indicatorOptions, {
+      direction: IndicatorDirection.Horizontal,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    scroll.trigger(scroll.eventTypes.scrollStart)
+    expect(indicator.wrapper.style.opacity).toBe('1')
+    scroll.trigger(scroll.eventTypes.scrollEnd)
+    expect(indicator.wrapper.style.opacity).toBe('0')
+  })
+
+  it("about mouse-wheel scrolling's hook", () => {
+    Object.assign(indicatorOptions, {
+      direction: IndicatorDirection.Horizontal,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    scroll.registerType(['mousewheelStart', 'mousewheelMove', 'mousewheelEnd'])
+    scroll.trigger(scroll.eventTypes.mousewheelStart)
+    expect(indicator.wrapper.style.opacity).toBe('1')
+    scroll.trigger(scroll.eventTypes.mousewheelEnd)
+    expect(indicator.wrapper.style.opacity).toBe('0')
+    scroll.trigger(scroll.eventTypes.mousewheelMove)
+    expect(indicator.wrapper.style.opacity).toBe('1')
+  })
+
+  it('interactive option', () => {
+    // horizontal
+    addProperties(scroll.options, {
+      probeType: 3,
+    })
+    addProperties(scroll, {
+      hasHorizontalScroll: true,
+      maxScrollX: 8,
+    })
+    Object.assign(indicatorOptions, {
+      direction: IndicatorDirection.Horizontal,
+      interactive: true,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    indicator.refresh()
+    const beforeStartMockFn = jest.fn()
+    const startMockFn = jest.fn()
+    const moveMockFn = jest.fn()
+    const endMockFn = jest.fn()
+    const scroller = scroll.scroller
+    scroller.hooks.on(
+      scroller.hooks.eventTypes.beforeScrollStart,
+      beforeStartMockFn
+    )
+    scroller.hooks.on(scroller.hooks.eventTypes.scrollStart, startMockFn)
+    scroller.hooks.on(scroller.hooks.eventTypes.scroll, moveMockFn)
+    scroller.hooks.on(scroller.hooks.eventTypes.scrollEnd, endMockFn)
+
+    const eventHandlerHooks = indicator.eventHandler.hooks
+    indicator.scrollInfo.maxScrollPos = 10
+    eventHandlerHooks.trigger(eventHandlerHooks.eventTypes.touchStart)
+    eventHandlerHooks.trigger(eventHandlerHooks.eventTypes.touchMove, 2)
+    eventHandlerHooks.trigger(eventHandlerHooks.eventTypes.touchEnd)
+    expect(beforeStartMockFn).toBeCalled()
+    expect(startMockFn).toBeCalled()
+    expect(moveMockFn).toBeCalled()
+    expect(endMockFn).toBeCalled()
+    expect(scroll.scroller.translater.translate).toBeCalled()
+
+    // vertical
+    addProperties(scroll.options, {
+      probeType: 1,
+    })
+    addProperties(scroll, {
+      hasHorizontalScroll: false,
+      hasVerticalScroll: true,
+      maxScrollX: 0,
+      maxScrollY: 8,
+    })
+    addProperties(indicator, {
+      direction: IndicatorDirection.Vertical,
+    })
+
+    eventHandlerHooks.trigger(eventHandlerHooks.eventTypes.touchStart)
+    indicator.startTime = indicator.startTime - 400
+    indicator.scrollInfo.maxScrollPos = 10
+    eventHandlerHooks.trigger(eventHandlerHooks.eventTypes.touchMove, 2)
+    eventHandlerHooks.trigger(eventHandlerHooks.eventTypes.touchEnd)
+
+    expect(beforeStartMockFn).toBeCalledTimes(2)
+    expect(startMockFn).toBeCalledTimes(2)
+    expect(moveMockFn).toBeCalledTimes(2)
+    expect(endMockFn).toBeCalledTimes(2)
+    expect(scroll.scroller.translater.translate).toBeCalledTimes(2)
+  })
+
+  it('updatePosition', () => {
+    addProperties(scroll, {
+      maxScrollY: -8,
+    })
+    addProperties(indicatorOptions, {
+      direction: IndicatorDirection.Vertical,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    indicator.refresh()
+    indicator.updatePosition({
+      x: 0,
+      y: -2,
+    })
+    expect(indicator.currentPos).toBe(0)
+
+    addProperties(scroll, {
+      maxScrollY: 8,
+    })
+    addProperties(indicator.options, {
+      isCustom: true,
+    })
+    indicator.refresh()
+    indicator.updatePosition({
+      x: 0,
+      y: 2,
+    })
+    expect(indicator.currentPos).toBe(0)
+  })
+
+  it('click', () => {
+    addProperties(scroll, {
+      maxScrollY: -8,
+    })
+    addProperties(indicatorOptions, {
+      direction: IndicatorDirection.Vertical,
+      scrollbarTrackClickable: true,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    indicator.refresh()
+    dispatchClick(indicator.wrapper, 'click')
+    expect(scroll.scrollTo).toBeCalled()
+
+    addProperties(indicator, {
+      direction: IndicatorDirection.Horizontal,
+    })
+    addProperties(indicator.options, {
+      scrollbarTrackClickable: true,
+      scrollbarTrackOffsetType: OffsetType.Point,
+    })
+    dispatchClick(indicator.wrapper, 'click')
+    expect(scroll.scrollTo).toBeCalled()
+  })
+
+  it('destroy', () => {
+    const parentNode = document.createElement('div')
+    parentNode.appendChild(wrapper)
+    addProperties(indicatorOptions, {
+      direction: IndicatorDirection.Vertical,
+      scrollbarTrackClickable: true,
+      isCustom: false,
+    })
+    indicator = new Indicator(scroll, indicatorOptions)
+    indicator.destroy()
+    expect(indicator.eventHandler.destroy).toBeCalled()
+    expect(indicator.hooksFn.length).toBe(0)
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/event-handler.ts

@@ -0,0 +1,135 @@
+import BScroll from '@better-scroll/core'
+import {
+  TouchEvent,
+  EventRegister,
+  EventEmitter,
+  maybePrevent,
+} from '@better-scroll/shared-utils'
+import Indicator from './indicator'
+
+interface EventHandlerOptions {
+  disableMouse: boolean
+  disableTouch: boolean
+}
+
+export default class EventHandler {
+  startEventRegister: EventRegister
+  moveEventRegister: EventRegister
+  endEventRegister: EventRegister
+  initiated: boolean
+  lastPoint: number
+  scroll: BScroll
+  hooks: EventEmitter
+
+  constructor(
+    public indicator: Indicator,
+    public options: EventHandlerOptions
+  ) {
+    this.hooks = new EventEmitter(['touchStart', 'touchMove', 'touchEnd'])
+    this.registerEvents()
+  }
+  private registerEvents() {
+    const { disableMouse, disableTouch } = this.options
+    const startEvents = []
+    const moveEvents = []
+    const endEvents = []
+
+    if (!disableMouse) {
+      startEvents.push({
+        name: 'mousedown',
+        handler: this.start.bind(this),
+      })
+
+      moveEvents.push({
+        name: 'mousemove',
+        handler: this.move.bind(this),
+      })
+
+      endEvents.push({
+        name: 'mouseup',
+        handler: this.end.bind(this),
+      })
+    }
+
+    if (!disableTouch) {
+      startEvents.push({
+        name: 'touchstart',
+        handler: this.start.bind(this),
+      })
+
+      moveEvents.push({
+        name: 'touchmove',
+        handler: this.move.bind(this),
+      })
+
+      endEvents.push(
+        {
+          name: 'touchend',
+          handler: this.end.bind(this),
+        },
+        {
+          name: 'touchcancel',
+          handler: this.end.bind(this),
+        }
+      )
+    }
+
+    this.startEventRegister = new EventRegister(
+      this.indicator.indicatorEl,
+      startEvents
+    )
+    this.moveEventRegister = new EventRegister(window, moveEvents)
+    this.endEventRegister = new EventRegister(window, endEvents)
+  }
+
+  private BScrollIsDisabled() {
+    return !this.indicator.scroll.enabled
+  }
+
+  private start(e: TouchEvent) {
+    if (this.BScrollIsDisabled()) {
+      return
+    }
+    let point = (e.touches ? e.touches[0] : e) as Touch
+
+    maybePrevent(e)
+    e.stopPropagation()
+
+    this.initiated = true
+    this.lastPoint = point[this.indicator.keysMap.point]
+    this.hooks.trigger(this.hooks.eventTypes.touchStart)
+  }
+
+  private move(e: TouchEvent) {
+    if (!this.initiated) {
+      return
+    }
+    let point = (e.touches ? e.touches[0] : e) as Touch
+    const pointPos = point[this.indicator.keysMap.point]
+
+    maybePrevent(e)
+    e.stopPropagation()
+
+    let delta = pointPos - this.lastPoint
+    this.lastPoint = pointPos
+    this.hooks.trigger(this.hooks.eventTypes.touchMove, delta)
+  }
+
+  private end(e: TouchEvent) {
+    if (!this.initiated) {
+      return
+    }
+    this.initiated = false
+
+    maybePrevent(e)
+    e.stopPropagation()
+
+    this.hooks.trigger(this.hooks.eventTypes.touchEnd)
+  }
+
+  destroy() {
+    this.startEventRegister.destroy()
+    this.moveEventRegister.destroy()
+    this.endEventRegister.destroy()
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/scroll-bar/src/index.ts

@@ -0,0 +1,137 @@
+import BScroll from '@better-scroll/core'
+import Indicator, {
+  IndicatorOptions,
+  IndicatorDirection,
+  OffsetType,
+} from './indicator'
+import { extend } from '@better-scroll/shared-utils'
+
+export type ScrollbarOptions = Partial<ScrollbarConfig> | true
+
+export interface ScrollbarConfig {
+  fade: boolean
+  fadeInTime: number
+  fadeOutTime: number
+  interactive: boolean
+  customElements: HTMLElement[]
+  minSize: number
+  scrollbarTrackClickable: boolean
+  scrollbarTrackOffsetType: OffsetType
+  scrollbarTrackOffsetTime: number
+}
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    scrollbar?: ScrollbarOptions
+  }
+}
+
+export default class ScrollBar {
+  static pluginName = 'scrollbar'
+  options: ScrollbarConfig
+  indicators: Indicator[]
+
+  constructor(public scroll: BScroll) {
+    this.handleOptions()
+    this.createIndicators()
+    this.handleHooks()
+  }
+
+  private handleHooks() {
+    const scroll = this.scroll
+    scroll.hooks.on(scroll.hooks.eventTypes.destroy, () => {
+      for (let indicator of this.indicators) {
+        indicator.destroy()
+      }
+    })
+  }
+
+  private handleOptions() {
+    const userOptions = (this.scroll.options.scrollbar === true
+      ? {}
+      : this.scroll.options.scrollbar) as Partial<ScrollbarConfig>
+
+    const defaultOptions: ScrollbarConfig = {
+      fade: true,
+      fadeInTime: 250,
+      fadeOutTime: 500,
+      interactive: false,
+      customElements: [],
+      minSize: 8,
+      scrollbarTrackClickable: false,
+      scrollbarTrackOffsetType: OffsetType.Step,
+      scrollbarTrackOffsetTime: 300,
+    }
+    this.options = extend(defaultOptions, userOptions)
+  }
+
+  private createIndicators() {
+    let indicatorOptions: IndicatorOptions
+    const scroll: BScroll = this.scroll
+    const indicators: Indicator[] = []
+    const scrollDirectionConfigKeys = ['scrollX', 'scrollY']
+    const indicatorDirections = [
+      IndicatorDirection.Horizontal,
+      IndicatorDirection.Vertical,
+    ]
+    const customScrollbarEls = this.options.customElements
+    for (let i = 0; i < scrollDirectionConfigKeys.length; i++) {
+      const key = scrollDirectionConfigKeys[i]
+      // wanna scroll in specified direction
+      if (scroll.options[key]) {
+        const customElement = customScrollbarEls.shift()
+        const direction = indicatorDirections[i]
+        let isCustom = false
+        let scrollbarWrapper = customElement
+          ? customElement
+          : this.createScrollbarElement(direction)
+        // internal scrollbar
+        if (scrollbarWrapper !== customElement) {
+          scroll.wrapper.appendChild(scrollbarWrapper)
+        } else {
+          // custom scrollbar passed by users
+          isCustom = true
+        }
+        indicatorOptions = {
+          wrapper: scrollbarWrapper,
+          direction,
+          ...this.options,
+          isCustom,
+        }
+        indicators.push(new Indicator(scroll, indicatorOptions))
+      }
+    }
+    this.indicators = indicators
+  }
+
+  private createScrollbarElement(
+    direction: IndicatorDirection,
+    scrollbarTrackClickable = this.options.scrollbarTrackClickable
+  ) {
+    let scrollbarWrapperEl: HTMLDivElement = document.createElement('div')
+    let scrollbarIndicatorEl: HTMLDivElement = document.createElement('div')
+
+    scrollbarWrapperEl.style.cssText =
+      'position:absolute;z-index:9999;overflow:hidden;'
+    scrollbarIndicatorEl.style.cssText =
+      'box-sizing:border-box;position:absolute;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);border-radius:3px;'
+
+    scrollbarIndicatorEl.className = 'bscroll-indicator'
+    if (direction === IndicatorDirection.Horizontal) {
+      scrollbarWrapperEl.style.cssText +=
+        'height:7px;left:2px;right:2px;bottom:0;'
+      scrollbarIndicatorEl.style.height = '100%'
+      scrollbarWrapperEl.className = 'bscroll-horizontal-scrollbar'
+    } else {
+      scrollbarWrapperEl.style.cssText +=
+        'width:7px;bottom:2px;top:2px;right:1px;'
+      scrollbarIndicatorEl.style.width = '100%'
+      scrollbarWrapperEl.className = 'bscroll-vertical-scrollbar'
+    }
+
+    if (!scrollbarTrackClickable) {
+      scrollbarWrapperEl.style.cssText += 'pointer-events:none;'
+    }
+    scrollbarWrapperEl.appendChild(scrollbarIndicatorEl)
+    return scrollbarWrapperEl
+  }
+}