cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/core/src/animater/__tests__/Animation.spec.ts

@@ -0,0 +1,182 @@
+import Translater from '../../translater'
+jest.mock('../../translater')
+
+let mockRequestAnimationFrame = jest.fn()
+let mockCancelAnimationFrame = jest.fn()
+jest.mock('@better-scroll/shared-utils/src/raf', () => {
+  return {
+    requestAnimationFrame: (cb: any) => mockRequestAnimationFrame(cb),
+    cancelAnimationFrame: () => mockCancelAnimationFrame(),
+  }
+})
+
+let mockGetNow = jest.fn()
+jest.mock('@better-scroll/shared-utils/src/lang', () => {
+  return {
+    getNow: () => mockGetNow(),
+  }
+})
+
+import Animation from '../Animation'
+
+function createAnimation(probeType: number) {
+  const dom = document.createElement('div')
+  const translater = new Translater(dom)
+  const animation = new Animation(dom, translater, { probeType })
+  return {
+    dom,
+    translater,
+    animation,
+  }
+}
+describe('Animation Class test suit', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.clearAllMocks()
+  })
+
+  it('should off hooks and cancelAnimationFrame when destroy', () => {
+    const { animation } = createAnimation(0)
+    const hooksDestroySpy = jest.spyOn(animation.hooks, 'destroy')
+    animation.destroy()
+    expect(mockCancelAnimationFrame).toBeCalledTimes(1)
+    expect(hooksDestroySpy).toBeCalledTimes(1)
+  })
+
+  it('should move to endPoint and trigger hooks in one step when time=0', () => {
+    const { animation, translater } = createAnimation(0)
+    const onMove = jest.fn()
+    const onEnd = jest.fn()
+    animation.hooks.on('move', onMove)
+    animation.hooks.on('end', onEnd)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 10,
+      y: 10,
+    }
+
+    animation.options.probeType = 3
+
+    animation.move(startPoint, endPoint, 0, 'easing')
+    expect(translater.translate).toBeCalledTimes(1)
+    expect(translater.translate).toBeCalledWith(endPoint)
+    expect(onMove).toBeCalled()
+    expect(onEnd).toBeCalled()
+  })
+
+  it('should move to endPoint for serveral steps with time', () => {
+    const { animation, translater, dom } = createAnimation(3)
+    const onMove = jest.fn()
+    const onEnd = jest.fn()
+    const easeFn = jest.fn()
+    animation.hooks.on('move', onMove)
+    animation.hooks.on('end', onEnd)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 0,
+      y: 100,
+    }
+
+    mockRequestAnimationFrame.mockImplementation((cb) => {
+      setTimeout(() => {
+        cb()
+      }, 200)
+    })
+    mockGetNow
+      .mockImplementationOnce(() => {
+        return 1000
+      })
+      .mockImplementationOnce(() => {
+        return 1100
+      })
+      .mockImplementationOnce(() => {
+        return 1600
+      })
+    easeFn.mockImplementationOnce(() => {
+      return 0.2
+    })
+    animation.move(startPoint, endPoint, 500, easeFn)
+    expect(easeFn).toBeCalledWith(0.2)
+    expect(translater.translate).toBeCalledWith({
+      x: 0,
+      y: 20,
+    })
+    expect(onMove).toBeCalledTimes(1)
+
+    jest.advanceTimersByTime(200)
+    expect(translater.translate).toBeCalledWith({
+      x: 0,
+      y: 100,
+    })
+    expect(onMove).toBeCalledTimes(2)
+    expect(onEnd).toBeCalled()
+    animation.destroy()
+  })
+  it('should force stop', () => {
+    const { animation, translater } = createAnimation(3)
+    animation.setCallStop(true)
+    const onMove = jest.fn()
+    const onForceStop = jest.fn()
+    const easeFn = jest.fn()
+    animation.hooks.on('move', onMove)
+    animation.hooks.on('forceStop', onForceStop)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 0,
+      y: 100,
+    }
+
+    mockRequestAnimationFrame.mockImplementation((cb) => {
+      setTimeout(() => {
+        cb()
+      }, 200)
+    })
+    mockGetNow
+      .mockImplementationOnce(() => {
+        return 1000
+      })
+      .mockImplementationOnce(() => {
+        return 1100
+      })
+      .mockImplementationOnce(() => {
+        return 1600
+      })
+    easeFn.mockImplementationOnce(() => {
+      return 0.2
+    })
+    animation.move(startPoint, endPoint, 500, easeFn)
+    expect(easeFn).toBeCalledWith(0.2)
+    expect(translater.translate).toBeCalledWith({
+      x: 0,
+      y: 20,
+    })
+    expect(animation.pending).toBe(true)
+    expect(animation.callStopWhenPending).toBe(false)
+    ;(<jest.Mock>translater.getComputedPosition).mockImplementation(() => {
+      return 20
+    })
+    animation.stop()
+    expect(animation.pending).toBe(false)
+    expect(mockCancelAnimationFrame).toBeCalled()
+    expect(animation.callStopWhenPending).toBe(true)
+    expect(onForceStop).toBeCalledWith(20)
+
+    animation.destroy()
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/core/src/animater/__tests__/Transition.spec.ts

@@ -0,0 +1,178 @@
+import Translater from '../../translater/index'
+jest.mock('../../translater/index')
+
+let mockRequestAnimationFrame = jest.fn()
+let mockCancelAnimationFrame = jest.fn()
+jest.mock('@better-scroll/shared-utils/src/raf', () => {
+  return {
+    requestAnimationFrame: (cb: any) => mockRequestAnimationFrame(cb),
+    cancelAnimationFrame: () => mockCancelAnimationFrame(),
+  }
+})
+
+import Transition from '@better-scroll/core/src/animater/Transition'
+
+function createTransition(probeType: number) {
+  const dom = document.createElement('div')
+  const translater = new Translater(dom)
+  const transition = new Transition(dom, translater, { probeType })
+  return {
+    dom,
+    translater,
+    transition,
+  }
+}
+describe('Transition Class test suit', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.clearAllMocks()
+  })
+  it('should off hooks and cancelAnimationFrame when destroy', () => {
+    const { transition } = createTransition(0)
+    const hooksDestroySpy = jest.spyOn(transition.hooks, 'destroy')
+    transition.destroy()
+    expect(mockCancelAnimationFrame).toBeCalledTimes(1)
+    expect(hooksDestroySpy).toBeCalledTimes(1)
+  })
+
+  it('should set timeFunction and trigger event', () => {
+    const { transition, dom } = createTransition(0)
+    const onTimeFunction = jest.fn()
+    const onTime = jest.fn()
+    transition.hooks.on('time', onTime)
+    transition.hooks.on('timeFunction', onTimeFunction)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 10,
+      y: 10,
+    }
+    transition.move(startPoint, endPoint, 200, 'cubic-bezier(0.23, 1, 0.32, 1)')
+    expect(onTime).toHaveBeenCalledTimes(1)
+    expect(onTimeFunction).toHaveBeenCalledTimes(1)
+    expect(dom.style.transitionTimingFunction).toBe(
+      'cubic-bezier(0.23, 1, 0.32, 1)'
+    )
+    expect(dom.style.transitionDuration).toBe('200ms')
+    transition.destroy()
+  })
+
+  it('should call translater with right arguments', () => {
+    const { transition, translater } = createTransition(0)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 10,
+      y: 10,
+    }
+    transition.move(startPoint, endPoint, 200, 'cubic-bezier(0.23, 1, 0.32, 1)')
+    expect(translater.translate).toBeCalledWith(endPoint)
+    transition.destroy()
+  })
+
+  it('should trigger end hook with time=0', () => {
+    const { transition } = createTransition(0)
+    const onEnd = jest.fn()
+    transition.hooks.on('end', onEnd)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 10,
+      y: 10,
+    }
+    transition.options.probeType = 3
+    transition.move(startPoint, endPoint, 0, 'cubic-bezier(0.23, 1, 0.32, 1)')
+    expect(onEnd).toHaveBeenCalled()
+    transition.destroy()
+  })
+  it('should stop', () => {
+    const { transition, translater, dom } = createTransition(0)
+    const onForceStop = jest.fn()
+    transition.hooks.on('forceStop', onForceStop)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 0,
+      y: 10,
+    }
+    transition.move(startPoint, endPoint, 200, 'cubic-bezier(0.23, 1, 0.32, 1)')
+    ;(<jest.Mock>translater.getComputedPosition).mockImplementation(() => {
+      return { x: 10, y: 10 }
+    })
+    transition.stop()
+
+    expect(dom.style.transitionDuration).toBe('0ms')
+    expect(translater.translate).toBeCalledWith({ x: 10, y: 10 })
+    expect(onForceStop).toBeCalledWith({ x: 10, y: 10 })
+    expect(mockCancelAnimationFrame).toBeCalled()
+    expect(transition.callStopWhenPending).toBe(true)
+
+    transition.destroy()
+  })
+  it('should startProbe with probeType=3', () => {
+    const { transition, translater } = createTransition(3)
+    translater.getComputedPosition = jest.fn().mockImplementation(() => {
+      return { x: 0, y: 0 }
+    })
+    mockRequestAnimationFrame.mockImplementation((cb) => {
+      setTimeout(() => {
+        cb()
+      }, 200)
+    })
+    const onMove = jest.fn()
+    const onEnd = jest.fn()
+    transition.hooks.on('time', onMove)
+    transition.hooks.on('end', onEnd)
+
+    const startPoint = {
+      x: 0,
+      y: 0,
+    }
+    const endPoint = {
+      x: 10,
+      y: 10,
+    }
+    transition.move(startPoint, endPoint, 200, 'cubic-bezier(0.23, 1, 0.32, 1)')
+    expect(transition.callStopWhenPending).toBe(false)
+    jest.advanceTimersByTime(200)
+    expect(onMove).toBeCalled()
+
+    transition.pending = false
+    jest.advanceTimersByTime(200)
+
+    expect(onEnd).toBeCalled()
+
+    transition.destroy()
+  })
+
+  it('clearTimer ', () => {
+    const { transition } = createTransition(0)
+    transition.timer = 1
+    transition.clearTimer()
+    expect(transition.timer).toBe(0)
+  })
+
+  it('should reset callStopWhenPending', () => {
+    const { transition } = createTransition(0)
+    transition.setPending(true)
+    transition.stop()
+    transition.startProbe({ x: 0, y: 0 }, { x: 0, y: -10 })
+    expect(transition.callStopWhenPending).toBe(false)
+  })
+})

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

@@ -0,0 +1,30 @@
+import Translater from '../../translater/index'
+import Transition from '../Transition'
+import Animation from '../Animation'
+import { OptionsConstructor } from '../../Options'
+jest.mock('../Animation')
+jest.mock('../Transition')
+jest.mock('../Base')
+jest.mock('../../translater/index')
+jest.mock('../../Options')
+
+import createAnimater from '../index'
+
+describe('animater create test suit', () => {
+  const dom = document.createElement('div')
+  const translater = new Translater(dom)
+  it('should create Transition class when useTransition=true', () => {
+    const options = new OptionsConstructor()
+    options.probeType = 0
+    options.useTransition = true
+    const animater = createAnimater(dom, translater, options)
+    expect(Transition).toBeCalledWith(dom, translater, { probeType: 0 })
+  })
+  it('should create Animation class when useTransition=false', () => {
+    const options = new OptionsConstructor()
+    options.probeType = 0
+    options.useTransition = false
+    const animater = createAnimater(dom, translater, options)
+    expect(Animation).toBeCalledWith(dom, translater, { probeType: 0 })
+  })
+})

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

@@ -0,0 +1,41 @@
+import Translater from '../translater'
+import { Options as BScrollOptions } from '../Options'
+
+import Animater from './Base'
+import Transition from './Transition'
+import Animation from './Animation'
+
+export { Animater, Transition, Animation }
+
+export default function createAnimater(
+  element: HTMLElement,
+  translater: Translater,
+  options: BScrollOptions
+) {
+  const useTransition = options.useTransition
+  let animaterOptions = {}
+  Object.defineProperty(animaterOptions, 'probeType', {
+    enumerable: true,
+    configurable: false,
+    get() {
+      return options.probeType
+    },
+  })
+  if (useTransition) {
+    return new Transition(
+      element,
+      translater,
+      animaterOptions as {
+        probeType: number
+      }
+    )
+  } else {
+    return new Animation(
+      element,
+      translater,
+      animaterOptions as {
+        probeType: number
+      }
+    )
+  }
+}

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

@@ -0,0 +1,256 @@
+import {
+  TouchEvent,
+  // dom
+  preventDefaultExceptionFn,
+  tagExceptionFn,
+  eventTypeMap,
+  EventType,
+  MouseButton,
+  EventRegister,
+  EventEmitter,
+} from '@better-scroll/shared-utils'
+
+type Exception = {
+  tagName?: RegExp
+  className?: RegExp
+}
+
+export interface Options {
+  [key: string]: boolean | number | Exception
+  click: boolean
+  bindToWrapper: boolean
+  disableMouse: boolean
+  disableTouch: boolean
+  preventDefault: boolean
+  stopPropagation: boolean
+  preventDefaultException: Exception
+  tagException: Exception
+  autoEndDistance: number
+}
+
+export default class ActionsHandler {
+  hooks: EventEmitter
+  initiated: number
+  pointX: number
+  pointY: number
+  wrapperEventRegister: EventRegister
+  targetEventRegister: EventRegister
+  constructor(public wrapper: HTMLElement, public options: Options) {
+    this.hooks = new EventEmitter([
+      'beforeStart',
+      'start',
+      'move',
+      'end',
+      'click',
+    ])
+    this.handleDOMEvents()
+  }
+
+  private handleDOMEvents() {
+    const { bindToWrapper, disableMouse, disableTouch, click } = this.options
+    const wrapper = this.wrapper
+    const target = bindToWrapper ? wrapper : window
+    const wrapperEvents = []
+    const targetEvents = []
+    const shouldRegisterTouch = !disableTouch
+    const shouldRegisterMouse = !disableMouse
+
+    if (click) {
+      wrapperEvents.push({
+        name: 'click',
+        handler: this.click.bind(this),
+        capture: true,
+      })
+    }
+
+    if (shouldRegisterTouch) {
+      wrapperEvents.push({
+        name: 'touchstart',
+        handler: this.start.bind(this),
+      })
+
+      targetEvents.push(
+        {
+          name: 'touchmove',
+          handler: this.move.bind(this),
+        },
+        {
+          name: 'touchend',
+          handler: this.end.bind(this),
+        },
+        {
+          name: 'touchcancel',
+          handler: this.end.bind(this),
+        }
+      )
+    }
+
+    if (shouldRegisterMouse) {
+      wrapperEvents.push({
+        name: 'mousedown',
+        handler: this.start.bind(this),
+      })
+
+      targetEvents.push(
+        {
+          name: 'mousemove',
+          handler: this.move.bind(this),
+        },
+        {
+          name: 'mouseup',
+          handler: this.end.bind(this),
+        }
+      )
+    }
+    this.wrapperEventRegister = new EventRegister(wrapper, wrapperEvents)
+    this.targetEventRegister = new EventRegister(target, targetEvents)
+  }
+
+  private beforeHandler(e: TouchEvent, type: 'start' | 'move' | 'end') {
+    const {
+      preventDefault,
+      stopPropagation,
+      preventDefaultException,
+    } = this.options
+
+    const preventDefaultConditions = {
+      start: () => {
+        return (
+          preventDefault &&
+          !preventDefaultExceptionFn(e.target, preventDefaultException)
+        )
+      },
+      end: () => {
+        return (
+          preventDefault &&
+          !preventDefaultExceptionFn(e.target, preventDefaultException)
+        )
+      },
+      move: () => {
+        return preventDefault
+      },
+    }
+    if (preventDefaultConditions[type]()) {
+      e.preventDefault()
+    }
+
+    if (stopPropagation) {
+      e.stopPropagation()
+    }
+  }
+
+  setInitiated(type: number = 0) {
+    this.initiated = type
+  }
+
+  private start(e: TouchEvent) {
+    const _eventType = eventTypeMap[e.type]
+
+    if (this.initiated && this.initiated !== _eventType) {
+      return
+    }
+    this.setInitiated(_eventType)
+
+    // if textarea or other html tags in options.tagException is manipulated
+    // do not make bs scroll
+    if (tagExceptionFn(e.target, this.options.tagException)) {
+      this.setInitiated()
+      return
+    }
+
+    // only allow mouse left button
+    if (_eventType === EventType.Mouse && e.button !== MouseButton.Left) return
+
+    if (this.hooks.trigger(this.hooks.eventTypes.beforeStart, e)) {
+      return
+    }
+
+    this.beforeHandler(e, 'start')
+
+    let point = (e.touches ? e.touches[0] : e) as Touch
+    this.pointX = point.pageX
+    this.pointY = point.pageY
+
+    this.hooks.trigger(this.hooks.eventTypes.start, e)
+  }
+
+  private move(e: TouchEvent) {
+    if (eventTypeMap[e.type] !== this.initiated) {
+      return
+    }
+
+    this.beforeHandler(e, 'move')
+
+    let point = (e.touches ? e.touches[0] : e) as Touch
+    let deltaX = point.pageX - this.pointX
+    let deltaY = point.pageY - this.pointY
+    this.pointX = point.pageX
+    this.pointY = point.pageY
+
+    if (
+      this.hooks.trigger(this.hooks.eventTypes.move, {
+        deltaX,
+        deltaY,
+        e,
+      })
+    ) {
+      return
+    }
+
+    // auto end when out of viewport
+    let scrollLeft =
+      document.documentElement.scrollLeft ||
+      window.pageXOffset ||
+      document.body.scrollLeft
+    let scrollTop =
+      document.documentElement.scrollTop ||
+      window.pageYOffset ||
+      document.body.scrollTop
+
+    let pX = this.pointX - scrollLeft
+    let pY = this.pointY - scrollTop
+
+    const autoEndDistance = this.options.autoEndDistance
+    if (
+      pX > document.documentElement.clientWidth - autoEndDistance ||
+      pY > document.documentElement.clientHeight - autoEndDistance ||
+      pX < autoEndDistance ||
+      pY < autoEndDistance
+    ) {
+      this.end(e)
+    }
+  }
+  private end(e: TouchEvent) {
+    if (eventTypeMap[e.type] !== this.initiated) {
+      return
+    }
+    this.setInitiated()
+
+    this.beforeHandler(e, 'end')
+
+    this.hooks.trigger(this.hooks.eventTypes.end, e)
+  }
+
+  private click(e: TouchEvent) {
+    this.hooks.trigger(this.hooks.eventTypes.click, e)
+  }
+
+  setContent(content: HTMLElement) {
+    if (content !== this.wrapper) {
+      this.wrapper = content
+      this.rebindDOMEvents()
+    }
+  }
+
+  rebindDOMEvents() {
+    this.wrapperEventRegister.destroy()
+    this.targetEventRegister.destroy()
+    this.handleDOMEvents()
+  }
+
+  destroy() {
+    this.wrapperEventRegister.destroy()
+    this.targetEventRegister.destroy()
+    this.hooks.destroy()
+  }
+}

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

@@ -0,0 +1,22 @@
+import { EventRegister, EventEmitter } from '@better-scroll/shared-utils'
+
+const ActionsHandler = jest
+  .fn()
+  .mockImplementation((wrapper, bscrollOptions) => {
+    return {
+      wrapper,
+      options: bscrollOptions,
+      initiated: 1,
+      pointX: 0,
+      pointY: 0,
+      startClickRegister: new EventRegister(wrapper, []),
+      moveEndRegister: new EventRegister(wrapper, []),
+      hooks: new EventEmitter(['beforeStart', 'start', 'move', 'end', 'click']),
+      destroy: jest.fn(),
+      setInitiated: jest.fn(),
+      setContent: jest.fn(),
+      rebindDOMEvents: jest.fn(),
+    }
+  })
+
+export default ActionsHandler