cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/core/src/base/__tests__/ActionsHandler.spec.ts

@@ -0,0 +1,196 @@
+import ActionsHandler, {
+  Options,
+} from '@better-scroll/core/src/base/ActionsHandler'
+import {
+  dispatchTouch,
+  dispatchMouse,
+  dispatchTouchStart,
+  dispatchTouchEnd,
+  dispatchTouchCancel,
+} from '@better-scroll/core/src/__tests__/__utils__/event'
+
+describe('ActionsHandler', () => {
+  let actionsHandler: ActionsHandler
+  let wrapper: HTMLElement
+  let options: Options
+
+  beforeEach(() => {
+    wrapper = document.createElement('wrapper')
+    options = {
+      click: false,
+      bindToWrapper: false,
+      disableMouse: false,
+      disableTouch: false,
+      preventDefault: true,
+      stopPropagation: true,
+      preventDefaultException: {
+        tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/,
+      },
+      tagException: { tagName: /^TEXTAREA$/ },
+      autoEndDistance: 5,
+    }
+  })
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should bind mouse event when options.disableMouse is false', () => {
+    options.disableTouch = true
+    actionsHandler = new ActionsHandler(wrapper, options)
+
+    const wrapperEventsName = actionsHandler.wrapperEventRegister.events.map(
+      (event) => event.name
+    )
+
+    const targetEventsName = actionsHandler.targetEventRegister.events.map(
+      (event) => event.name
+    )
+
+    expect(wrapperEventsName).toMatchObject(['mousedown'])
+    expect(targetEventsName).toMatchObject(['mousemove', 'mouseup'])
+  })
+
+  it('should invoke start method when dispatch mousedown', () => {
+    actionsHandler = new ActionsHandler(wrapper, options)
+    const beforeStartMockHandler = jest.fn().mockImplementation(() => {
+      return 'dummy test'
+    })
+    const startMockHandler = jest.fn().mockImplementation(() => {
+      return 'dummy test'
+    })
+
+    actionsHandler.hooks.on('beforeStart', beforeStartMockHandler)
+    actionsHandler.hooks.on('start', startMockHandler)
+
+    dispatchMouse(wrapper, 'mousedown')
+
+    expect(beforeStartMockHandler).toBeCalledTimes(1)
+    expect(startMockHandler).toBeCalledTimes(1)
+
+    // return early
+    actionsHandler.setInitiated(1)
+    dispatchMouse(wrapper, 'mousedown')
+    expect(beforeStartMockHandler).toBeCalledTimes(1)
+    expect(startMockHandler).toBeCalledTimes(1)
+
+    // only allow mouse left button
+    actionsHandler.setInitiated(0)
+    dispatchMouse(wrapper, 'mousedown', false)
+    expect(beforeStartMockHandler).toBeCalledTimes(1)
+    expect(startMockHandler).toBeCalledTimes(1)
+
+    // cancelable beforeStart hook
+    actionsHandler.hooks.on('beforeStart', () => true)
+    dispatchMouse(wrapper, 'mousedown')
+    expect(beforeStartMockHandler).toBeCalledTimes(2)
+    expect(startMockHandler).toBeCalledTimes(1)
+  })
+
+  it('should invoke move method when dispatch touchmove', () => {
+    actionsHandler = new ActionsHandler(wrapper, options)
+    const moveMockHandler1 = jest.fn().mockImplementationOnce(() => {
+      return true
+    })
+    const moveMockHandler2 = jest.fn().mockImplementation(() => {
+      return 'dummy test'
+    })
+
+    actionsHandler.hooks.on('move', moveMockHandler1)
+    actionsHandler.hooks.on('move', moveMockHandler2)
+
+    dispatchMouse(wrapper, 'mousedown')
+
+    dispatchMouse(window, 'mousemove')
+
+    expect(moveMockHandler1).toBeCalledTimes(1)
+
+    // cancelable move hook
+    expect(moveMockHandler2).not.toBeCalled()
+
+    // simulate finger moved out of viewport
+    actionsHandler.pointX = 5
+    const endMockHandler = jest.fn()
+    actionsHandler.hooks.on(actionsHandler.hooks.eventTypes.end, endMockHandler)
+    dispatchMouse(window, 'mousemove')
+
+    expect(endMockHandler).toBeCalled()
+  })
+
+  it('should invoke end method when dispatch touchend', () => {
+    actionsHandler = new ActionsHandler(wrapper, options)
+    const endMockHandler = jest.fn().mockImplementation(() => {
+      return 'dummy test'
+    })
+
+    actionsHandler.hooks.on('end', endMockHandler)
+
+    dispatchTouchStart(wrapper, [{ pageX: 0, pageY: 0 }])
+
+    dispatchTouchEnd(window, [{ pageX: 0, pageY: 0 }])
+
+    expect(endMockHandler).toBeCalled()
+  })
+
+  it('should invoke end method when dispatch touchcancel', () => {
+    actionsHandler = new ActionsHandler(wrapper, options)
+    const endMockHandler = jest.fn().mockImplementation(() => {
+      return 'dummy test'
+    })
+
+    actionsHandler.hooks.on('end', endMockHandler)
+
+    dispatchTouchStart(wrapper, [{ pageX: 0, pageY: 0 }])
+
+    dispatchTouchCancel(window, [{ pageX: 0, pageY: 0 }])
+
+    expect(endMockHandler).toBeCalled()
+  })
+
+  it('should call click method when dispatch click', () => {
+    options.click = true
+    actionsHandler = new ActionsHandler(wrapper, options)
+    const clickMockHandler = jest.fn().mockImplementation(() => {
+      return 'dummy test'
+    })
+
+    actionsHandler.hooks.on('click', clickMockHandler)
+
+    dispatchTouch(wrapper, 'click', [
+      {
+        pageX: 10,
+        pageY: 10,
+      },
+    ])
+
+    expect(clickMockHandler).toBeCalled()
+  })
+
+  it('should make bs not take effect when manipulate textarea DOM tag', () => {
+    const textarea = document.createElement('textarea')
+    const content = document.createElement('div')
+    content.appendChild(textarea)
+    wrapper.appendChild(content)
+    actionsHandler = new ActionsHandler(wrapper, options)
+
+    dispatchMouse(textarea, 'mousedown')
+
+    expect(actionsHandler.initiated).toBeFalsy()
+  })
+
+  it('destroy()', () => {
+    actionsHandler = new ActionsHandler(wrapper, options)
+
+    actionsHandler.destroy()
+
+    expect(actionsHandler.wrapperEventRegister.events.length).toBe(0)
+    expect(actionsHandler.targetEventRegister.events.length).toBe(0)
+    expect(actionsHandler.hooks.eventTypes).toMatchObject({})
+    expect(actionsHandler.hooks.events).toMatchObject({})
+  })
+
+  it('setContent()', () => {
+    const p = document.createElement('p')
+    actionsHandler.setContent(p)
+    expect(actionsHandler.wrapper).toBe(p)
+  })
+})

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

@@ -0,0 +1,10 @@
+import { BScroll } from './BScroll'
+
+export { BScrollInstance } from './Instance'
+export { Options, CustomOptions } from './Options'
+export { TranslaterPoint } from './translater'
+export { MountedBScrollHTMLElement } from './BScroll'
+export { Behavior, Boundary } from './scroller/Behavior'
+export { createBScroll, CustomAPI } from './BScroll'
+
+export default BScroll

package/better-scroll-dev/better-scroll-dev/packages/core/src/scroller/Actions.ts

@@ -0,0 +1,312 @@
+import ActionsHandler from '../base/ActionsHandler'
+import { Behavior } from './Behavior'
+import DirectionLockAction from './DirectionLock'
+import { Animater } from '../animater'
+import { OptionsConstructor as BScrollOptions } from '../Options'
+import { TranslaterPoint } from '../translater'
+import {
+  preventDefaultExceptionFn,
+  TouchEvent,
+  getNow,
+  Probe,
+  EventEmitter,
+  between,
+  Quadrant,
+  maybePrevent,
+} from '@better-scroll/shared-utils'
+
+const applyQuadrantTransformation = (
+  deltaX: number,
+  deltaY: number,
+  quadrant: Quadrant
+) => {
+  if (quadrant === Quadrant.Second) {
+    return [deltaY, -deltaX]
+  } else if (quadrant === Quadrant.Third) {
+    return [-deltaX, -deltaY]
+  } else if (quadrant === Quadrant.Forth) {
+    return [-deltaY, deltaX]
+  } else {
+    return [deltaX, deltaY]
+  }
+}
+export default class ScrollerActions {
+  hooks: EventEmitter
+  scrollBehaviorX: Behavior
+  scrollBehaviorY: Behavior
+  actionsHandler: ActionsHandler
+  animater: Animater
+  options: BScrollOptions
+  directionLockAction: DirectionLockAction
+  fingerMoved: boolean
+  contentMoved: boolean
+  enabled: boolean
+  startTime: number
+  endTime: number
+  ensuringInteger: boolean
+  constructor(
+    scrollBehaviorX: Behavior,
+    scrollBehaviorY: Behavior,
+    actionsHandler: ActionsHandler,
+    animater: Animater,
+    options: BScrollOptions
+  ) {
+    this.hooks = new EventEmitter([
+      'start',
+      'beforeMove',
+      'scrollStart',
+      'scroll',
+      'beforeEnd',
+      'end',
+      'scrollEnd',
+      'contentNotMoved',
+      'detectMovingDirection',
+      'coordinateTransformation',
+    ])
+
+    this.scrollBehaviorX = scrollBehaviorX
+    this.scrollBehaviorY = scrollBehaviorY
+    this.actionsHandler = actionsHandler
+    this.animater = animater
+    this.options = options
+
+    this.directionLockAction = new DirectionLockAction(
+      options.directionLockThreshold,
+      options.freeScroll,
+      options.eventPassthrough
+    )
+
+    this.enabled = true
+
+    this.bindActionsHandler()
+  }
+
+  private bindActionsHandler() {
+    // [mouse|touch]start event
+    this.actionsHandler.hooks.on(
+      this.actionsHandler.hooks.eventTypes.start,
+      (e: TouchEvent) => {
+        if (!this.enabled) return true
+        return this.handleStart(e)
+      }
+    )
+    // [mouse|touch]move event
+    this.actionsHandler.hooks.on(
+      this.actionsHandler.hooks.eventTypes.move,
+      ({
+        deltaX,
+        deltaY,
+        e,
+      }: {
+        deltaX: number
+        deltaY: number
+        e: TouchEvent
+      }) => {
+        if (!this.enabled) return true
+
+        const [transformateDeltaX, transformateDeltaY] =
+          applyQuadrantTransformation(deltaX, deltaY, this.options.quadrant)
+        const transformateDeltaData = {
+          deltaX: transformateDeltaX,
+          deltaY: transformateDeltaY,
+        }
+
+        this.hooks.trigger(
+          this.hooks.eventTypes.coordinateTransformation,
+          transformateDeltaData
+        )
+
+        return this.handleMove(
+          transformateDeltaData.deltaX,
+          transformateDeltaData.deltaY,
+          e
+        )
+      }
+    )
+    // [mouse|touch]end event
+    this.actionsHandler.hooks.on(
+      this.actionsHandler.hooks.eventTypes.end,
+      (e: TouchEvent) => {
+        if (!this.enabled) return true
+        return this.handleEnd(e)
+      }
+    )
+
+    // click
+    this.actionsHandler.hooks.on(
+      this.actionsHandler.hooks.eventTypes.click,
+      (e: TouchEvent) => {
+        // handle native click event
+        if (this.enabled && !e._constructed) {
+          this.handleClick(e)
+        }
+      }
+    )
+  }
+
+  private handleStart(e: TouchEvent) {
+    const timestamp = getNow()
+    this.fingerMoved = false
+    this.contentMoved = false
+
+    this.startTime = timestamp
+
+    this.directionLockAction.reset()
+
+    this.scrollBehaviorX.start()
+    this.scrollBehaviorY.start()
+
+    // force stopping last transition or animation
+    this.animater.doStop()
+
+    this.scrollBehaviorX.resetStartPos()
+    this.scrollBehaviorY.resetStartPos()
+
+    this.hooks.trigger(this.hooks.eventTypes.start, e)
+  }
+
+  private handleMove(deltaX: number, deltaY: number, e: TouchEvent) {
+    if (this.hooks.trigger(this.hooks.eventTypes.beforeMove, e)) {
+      return
+    }
+
+    const absDistX = this.scrollBehaviorX.getAbsDist(deltaX)
+    const absDistY = this.scrollBehaviorY.getAbsDist(deltaY)
+    const timestamp = getNow()
+
+    // We need to move at least momentumLimitDistance pixels
+    // for the scrolling to initiate
+    if (this.checkMomentum(absDistX, absDistY, timestamp)) {
+      return true
+    }
+    if (this.directionLockAction.checkMovingDirection(absDistX, absDistY, e)) {
+      this.actionsHandler.setInitiated()
+      return true
+    }
+
+    const delta = this.directionLockAction.adjustDelta(deltaX, deltaY)
+
+    const prevX = this.scrollBehaviorX.getCurrentPos()
+    const newX = this.scrollBehaviorX.move(delta.deltaX)
+    const prevY = this.scrollBehaviorY.getCurrentPos()
+    const newY = this.scrollBehaviorY.move(delta.deltaY)
+
+    if (this.hooks.trigger(this.hooks.eventTypes.detectMovingDirection)) {
+      return
+    }
+
+    if (!this.fingerMoved) {
+      this.fingerMoved = true
+    }
+
+    const positionChanged = newX !== prevX || newY !== prevY
+
+    if (!this.contentMoved && !positionChanged) {
+      this.hooks.trigger(this.hooks.eventTypes.contentNotMoved)
+    }
+
+    if (!this.contentMoved && positionChanged) {
+      this.contentMoved = true
+      this.hooks.trigger(this.hooks.eventTypes.scrollStart)
+    }
+
+    if (this.contentMoved && positionChanged) {
+      this.animater.translate({
+        x: newX,
+        y: newY,
+      })
+
+      this.dispatchScroll(timestamp)
+    }
+  }
+
+  private dispatchScroll(timestamp: number) {
+    // dispatch scroll in interval time
+    if (timestamp - this.startTime > this.options.momentumLimitTime) {
+      // refresh time and starting position to initiate a momentum
+      this.startTime = timestamp
+      this.scrollBehaviorX.updateStartPos()
+      this.scrollBehaviorY.updateStartPos()
+      if (this.options.probeType === Probe.Throttle) {
+        this.hooks.trigger(this.hooks.eventTypes.scroll, this.getCurrentPos())
+      }
+    }
+
+    // dispatch scroll all the time
+    if (this.options.probeType > Probe.Throttle) {
+      this.hooks.trigger(this.hooks.eventTypes.scroll, this.getCurrentPos())
+    }
+  }
+
+  private checkMomentum(absDistX: number, absDistY: number, timestamp: number) {
+    return (
+      timestamp - this.endTime > this.options.momentumLimitTime &&
+      absDistY < this.options.momentumLimitDistance &&
+      absDistX < this.options.momentumLimitDistance
+    )
+  }
+
+  private handleEnd(e: TouchEvent) {
+    if (this.hooks.trigger(this.hooks.eventTypes.beforeEnd, e)) {
+      return
+    }
+    let currentPos = this.getCurrentPos()
+
+    this.scrollBehaviorX.updateDirection()
+    this.scrollBehaviorY.updateDirection()
+
+    if (this.hooks.trigger(this.hooks.eventTypes.end, e, currentPos)) {
+      return true
+    }
+
+    currentPos = this.ensureIntegerPos(currentPos)
+
+    this.animater.translate(currentPos)
+
+    this.endTime = getNow()
+
+    const duration = this.endTime - this.startTime
+
+    this.hooks.trigger(this.hooks.eventTypes.scrollEnd, currentPos, duration)
+  }
+
+  private ensureIntegerPos(currentPos: TranslaterPoint) {
+    this.ensuringInteger = true
+    let { x, y } = currentPos
+    const { minScrollPos: minScrollPosX, maxScrollPos: maxScrollPosX } =
+      this.scrollBehaviorX
+    const { minScrollPos: minScrollPosY, maxScrollPos: maxScrollPosY } =
+      this.scrollBehaviorY
+
+    x = x > 0 ? Math.ceil(x) : Math.floor(x)
+    y = y > 0 ? Math.ceil(y) : Math.floor(y)
+
+    x = between(x, maxScrollPosX, minScrollPosX)
+    y = between(y, maxScrollPosY, minScrollPosY)
+    return { x, y }
+  }
+
+  private handleClick(e: TouchEvent) {
+    if (
+      !preventDefaultExceptionFn(e.target, this.options.preventDefaultException)
+    ) {
+      maybePrevent(e)
+      e.stopPropagation()
+    }
+  }
+
+  getCurrentPos(): TranslaterPoint {
+    return {
+      x: this.scrollBehaviorX.getCurrentPos(),
+      y: this.scrollBehaviorY.getCurrentPos(),
+    }
+  }
+
+  refresh() {
+    this.endTime = 0
+  }
+
+  destroy() {
+    this.hooks.destroy()
+  }
+}