cbvirtua 1.0.105 → 1.0.107

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

@@ -0,0 +1,172 @@
+import BScroll, { Boundary } from '@better-scroll/core'
+import { Probe, warn } from '@better-scroll/shared-utils'
+import IndexCalculator from './IndexCalculator'
+import DataManager from './DataManager'
+import DomManager from './DomManager'
+import Tombstone from './Tombstone'
+
+export interface InfinityOptions {
+  fetch: (count: number) => Promise<Array<any> | false>
+  render: (item: any, div?: HTMLElement) => HTMLElement
+  createTombstone: () => HTMLElement
+}
+
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    infinity?: InfinityOptions
+  }
+}
+
+const EXTRA_SCROLL_Y = -2000
+
+export default class InfinityScroll {
+  static pluginName = 'infinity'
+  start: number = 0
+  end: number = 0
+  options: InfinityOptions
+  private tombstone: Tombstone
+  private domManager: DomManager
+  private dataManager: DataManager
+  private indexCalculator: IndexCalculator
+
+  constructor(public scroll: BScroll) {
+    this.init()
+  }
+
+  init() {
+    this.handleOptions()
+
+    const {
+      fetch: fetchFn,
+      render: renderFn,
+      createTombstone: createTombstoneFn,
+    } = this.options
+
+    this.tombstone = new Tombstone(createTombstoneFn)
+    this.indexCalculator = new IndexCalculator(
+      this.scroll.scroller.scrollBehaviorY.wrapperSize,
+      this.tombstone.height
+    )
+    this.domManager = new DomManager(
+      this.scroll.scroller.content,
+      renderFn,
+      this.tombstone
+    )
+    this.dataManager = new DataManager(
+      [],
+      fetchFn,
+      this.onFetchFinish.bind(this)
+    )
+
+    this.scroll.on(this.scroll.eventTypes.destroy, this.destroy, this)
+    this.scroll.on(this.scroll.eventTypes.scroll, this.update, this)
+
+    this.scroll.on(
+      this.scroll.eventTypes.contentChanged,
+      (content: HTMLElement) => {
+        this.domManager.setContent(content)
+        this.indexCalculator.resetState()
+        this.domManager.resetState()
+        this.dataManager.resetState()
+        this.update({ y: 0 })
+      }
+    )
+    const { scrollBehaviorY } = this.scroll.scroller
+
+    scrollBehaviorY.hooks.on(
+      scrollBehaviorY.hooks.eventTypes.computeBoundary,
+      this.modifyBoundary,
+      this
+    )
+
+    this.update({ y: 0 })
+  }
+
+  private modifyBoundary(boundary: Boundary) {
+    // manually set position to allow scroll
+    boundary.maxScrollPos = EXTRA_SCROLL_Y
+  }
+
+  private handleOptions() {
+    // narrow down type to an object
+    const infinityOptions = this.scroll.options.infinity
+    if (infinityOptions) {
+      if (typeof infinityOptions.fetch !== 'function') {
+        warn('Infinity plugin need fetch Function to new data.')
+      }
+      if (typeof infinityOptions.render !== 'function') {
+        warn('Infinity plugin need render Function to render each item.')
+      }
+      if (typeof infinityOptions.render !== 'function') {
+        warn(
+          'Infinity plugin need createTombstone Function to create tombstone.'
+        )
+      }
+      this.options = infinityOptions
+    }
+
+    this.scroll.options.probeType = Probe.Realtime
+  }
+
+  update(pos: { y: number }): void {
+    const position = Math.round(-pos.y)
+    // important! calculate start/end index to render
+    const { start, end } = this.indexCalculator.calculate(
+      position,
+      this.dataManager.getList()
+    )
+    this.start = start
+    this.end = end
+    // tslint:disable-next-line: no-floating-promises
+    this.dataManager.update(end)
+    this.updateDom(this.dataManager.getList())
+  }
+
+  private onFetchFinish(list: Array<any>, hasMore: boolean) {
+    const { end } = this.updateDom(list)
+    if (!hasMore) {
+      this.domManager.removeTombstone()
+      this.scroll.scroller.animater.stop()
+      this.scroll.resetPosition()
+    }
+    // tslint:disable-next-line: no-floating-promises
+    return end
+  }
+
+  private updateDom(
+    list: Array<any>
+  ): { end: number; startPos: number; endPos: number } {
+    const { end, startPos, endPos, startDelta } = this.domManager.update(
+      list,
+      this.start,
+      this.end
+    )
+
+    if (startDelta) {
+      this.scroll.minScrollY = startDelta
+    }
+
+    if (endPos > this.scroll.maxScrollY) {
+      this.scroll.maxScrollY = -(
+        endPos - this.scroll.scroller.scrollBehaviorY.wrapperSize
+      )
+    }
+
+    return {
+      end,
+      startPos,
+      endPos,
+    }
+  }
+
+  destroy() {
+    const { content, scrollBehaviorY } = this.scroll.scroller
+    while (content.firstChild) {
+      content.removeChild(content.firstChild)
+    }
+    this.domManager.destroy()
+    this.scroll.off('scroll', this.update)
+    this.scroll.off('destroy', this.destroy)
+    scrollBehaviorY.hooks.off(scrollBehaviorY.hooks.eventTypes.computeBoundary)
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/mouse-wheel/README.md

@@ -0,0 +1,22 @@
+# @better-scroll/mouse-wheel
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/mouse-wheel/README_zh-CN.md)
+
+Allow the mouse wheel to manipulate scrolling behavior.
+
+## Usage
+
+```js
+import BScroll from '@better-scroll/core'
+import MouseWheel from '@better-scroll/mouse-wheel'
+BScroll.use(MouseWheel)
+
+const bs = new BScroll('.wrapper', {
+  // ...
+  mouseWheel: {
+    speed: 2,
+    invert: false,
+    easeTime: 300,
+  }
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/mouse-wheel/README_zh-CN.md

@@ -0,0 +1,20 @@
+# @better-scroll/mouse-wheel
+
+允许鼠标滚轮来操纵滚动行为。
+
+## 使用
+
+```js
+import BScroll from '@better-scroll/core'
+import MouseWheel from '@better-scroll/mouse-wheel'
+BScroll.use(MouseWheel)
+
+const bs = new BScroll('.wrapper', {
+  // ...
+  mouseWheel: {
+    speed: 2,
+    invert: false,
+    easeTime: 300,
+  }
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/mouse-wheel/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@better-scroll/mouse-wheel",
+  "version": "2.5.1",
+  "description": "support for MouseWheel in PC",
+  "author": {
+    "name": "jizhi",
+    "email": "theniceangel@163.com"
+  },
+  "main": "dist/mouse-wheel.min.js",
+  "module": "dist/mouse-wheel.esm.js",
+  "typings": "dist/types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/ustbhuangyi/better-scroll/issues"
+  },
+  "homepage": "https://github.com/ustbhuangyi/better-scroll",
+  "keywords": [
+    "scroll",
+    "iscroll",
+    "javascript",
+    "typescript",
+    "ios"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ustbhuangyi/better-scroll.git",
+    "directory": "packages/mouse-wheel"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.5.1"
+  },
+  "gitHead": "f441227b6137d44ba0b44b97ed4cd49de9386130"
+}

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

@@ -0,0 +1,337 @@
+import BScroll from '@better-scroll/core'
+jest.mock('@better-scroll/core')
+
+import MouseWheel from '../index'
+import { createEvent } from '@better-scroll/core/src/__tests__/__utils__/event'
+
+interface CustomMouseWheel extends Event {
+  deltaX: number
+  deltaY: number
+  pageX: number
+  pageY: number
+  [key: string]: any
+}
+
+const createMouseWheelElements = () => {
+  const wrapper = document.createElement('div')
+  const content = document.createElement('div')
+  wrapper.appendChild(content)
+  return { wrapper }
+}
+
+function dispatchMouseWheel(
+  target: EventTarget,
+  name = 'wheel',
+  data: { [key: string]: any } = {}
+): void {
+  const event = <CustomMouseWheel>createEvent('', name)
+  Object.assign(event, data)
+  target.dispatchEvent(event)
+}
+
+describe('mouse-wheel plugin', () => {
+  const DISCRETE_TIME = 400
+  let scroll: BScroll
+  let mouseWheel: MouseWheel
+  jest.useFakeTimers()
+
+  beforeEach(() => {
+    const { wrapper } = createMouseWheelElements()
+    scroll = new BScroll(wrapper, {
+      stopPropagation: true,
+    })
+
+    scroll.scroller.scrollBehaviorX.performDampingAlgorithm = jest
+      .fn()
+      .mockImplementation((arg1) => {
+        return arg1
+      })
+    scroll.scroller.scrollBehaviorY.performDampingAlgorithm = jest
+      .fn()
+      .mockImplementation((arg1) => {
+        return arg1
+      })
+
+    mouseWheel = new MouseWheel(scroll)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    jest.clearAllTimers()
+  })
+
+  it('should proxy hooks to BScroll instance', () => {
+    expect(scroll.registerType).toHaveBeenCalledWith([
+      'alterOptions',
+      'mousewheelStart',
+      'mousewheelMove',
+      'mousewheelEnd',
+    ])
+  })
+
+  it('should handle default options and user options', () => {
+    // case 1
+    scroll.options.mouseWheel = true
+    mouseWheel = new MouseWheel(scroll)
+
+    expect(mouseWheel.mouseWheelOpt).toMatchObject({
+      speed: 20,
+      invert: false,
+      easeTime: 300,
+      discreteTime: 400,
+      throttleTime: 0,
+      dampingFactor: 0.1,
+    })
+
+    // case 2
+    scroll.options.mouseWheel = {
+      dampingFactor: 1,
+      throttleTime: 50,
+    }
+    mouseWheel = new MouseWheel(scroll)
+
+    expect(mouseWheel.mouseWheelOpt).toMatchObject({
+      speed: 20,
+      invert: false,
+      easeTime: 300,
+      discreteTime: 400,
+      throttleTime: 50,
+      dampingFactor: 1,
+    })
+  })
+
+  it('should trigger mousewheel(start|move|end) when moved ', () => {
+    const onStart = jest.fn()
+    const onMove = jest.fn()
+    const onEnd = jest.fn()
+    const onAlterOptions = jest.fn()
+
+    scroll.on('mousewheelStart', onStart)
+    scroll.on('mousewheelMove', onMove)
+    scroll.on('mousewheelEnd', onEnd)
+    scroll.on('alterOptions', onAlterOptions)
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel')
+    expect(onStart).toBeCalledTimes(1)
+    expect(onMove).toBeCalledTimes(1)
+    expect(onAlterOptions).toBeCalledTimes(1)
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel')
+    jest.advanceTimersByTime(DISCRETE_TIME)
+    expect(onMove).toBeCalledTimes(2)
+
+    expect(onEnd).toBeCalledTimes(1)
+
+    // forbid moving
+    scroll.enabled = false
+    dispatchMouseWheel(scroll.wrapper, 'wheel')
+    expect(onStart).toBeCalledTimes(1)
+    expect(onMove).toBeCalledTimes(2)
+    expect(onEnd).toBeCalledTimes(1)
+  })
+
+  it('should support throttle when throttleTime > 0', () => {
+    mouseWheel.mouseWheelOpt.throttleTime = 50
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 10,
+    })
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 20,
+    })
+    jest.advanceTimersByTime(51)
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 30,
+    })
+    expect(scroll.scrollTo).toBeCalledTimes(2)
+  })
+
+  it('should warn when easeTime is invalid', () => {
+    const spyFn = jest.spyOn(console, 'error')
+    mouseWheel.mouseWheelOpt.easeTime = 50
+    dispatchMouseWheel(scroll.wrapper, 'wheel')
+    expect(spyFn).toBeCalled()
+  })
+
+  it('should preventDefault & stopProgation if they are set', () => {
+    const mockStopPropagation = jest.fn()
+    const mockPreventDefault = jest.fn()
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      preventDefault: mockPreventDefault,
+      stopPropagation: mockStopPropagation,
+    })
+    expect(mockPreventDefault).toBeCalled()
+    expect(mockStopPropagation).not.toBe(0)
+    jest.advanceTimersByTime(400)
+
+    mockPreventDefault.mockClear()
+    mockStopPropagation.mockClear()
+
+    // preventDefaultException work
+    scroll.options.preventDefaultException = {
+      tagName: /^(DIV)$/,
+    }
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      preventDefault: mockPreventDefault,
+      stopPropagation: mockStopPropagation,
+    })
+    expect(mockPreventDefault).not.toBeCalled()
+  })
+
+  it('should forbid scrollTo when mousewheelMove hook return true', () => {
+    const onStart = jest.fn()
+    const onMove = jest.fn().mockImplementation(() => {
+      return true
+    })
+    const onEnd = jest.fn()
+
+    scroll.on('mousewheelStart', onStart)
+    scroll.on('mousewheelMove', onMove)
+    scroll.on('mousewheelEnd', onEnd)
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel')
+    expect(onStart).toBeCalledTimes(1)
+    expect(onMove).toBeCalledTimes(1)
+
+    expect(scroll.scrollTo).not.toBeCalled()
+  })
+
+  it('should get right postion when move with deltaMode = 0', () => {
+    const onEnd = jest.fn()
+    scroll.on('mousewheelEnd', onEnd)
+
+    // x direction
+    scroll.hasVerticalScroll = false
+    scroll.hasHorizontalScroll = true
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 10,
+      deltaMode: 0,
+    })
+
+    expect(scroll.scrollTo).toBeCalledWith(-10, 0, 300)
+    jest.advanceTimersByTime(410)
+    expect(onEnd).toBeCalledWith({
+      x: -10,
+      y: 0,
+      directionX: 1,
+      directionY: 0,
+    })
+
+    // y direction
+    scroll.hasVerticalScroll = true
+    scroll.hasHorizontalScroll = false
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 10,
+      deltaMode: 0,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(0, -10, 300)
+    jest.advanceTimersByTime(410)
+    expect(onEnd).toBeCalledWith({
+      x: 0,
+      y: -10,
+      directionX: 0,
+      directionY: 1,
+    })
+  })
+
+  it('should get right postion when move with deltaMode = 1', () => {
+    // x direction
+    scroll.hasVerticalScroll = false
+    scroll.hasHorizontalScroll = true
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 2,
+      deltaMode: 1,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(-40, 0, 300)
+
+    // y direction
+    scroll.hasVerticalScroll = true
+    scroll.hasHorizontalScroll = false
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 2,
+      deltaMode: 1,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(0, -40, 300)
+  })
+
+  it('should get right postion when move with wheelDeltaX and wheelDeltaY', () => {
+    scroll.hasVerticalScroll = true
+    scroll.hasHorizontalScroll = true
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      wheelDeltaX: -120,
+      wheelDeltaY: -240,
+      deltaMode: 0,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(-20, -40, 300)
+  })
+
+  it('should get right postion when move with wheelDelta', () => {
+    scroll.hasVerticalScroll = true
+    scroll.hasHorizontalScroll = true
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      wheelDelta: -120,
+      deltaMode: 0,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(-20, -20, 300)
+  })
+
+  it('should get right postion when move with detail', () => {
+    scroll.hasVerticalScroll = true
+    scroll.hasHorizontalScroll = true
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      detail: 60,
+      deltaMode: 0,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(-400, -400, 300)
+  })
+
+  it('should get right postion when move with invert = true', () => {
+    // x direction
+    scroll.hasVerticalScroll = false
+    scroll.hasHorizontalScroll = true
+
+    mouseWheel.mouseWheelOpt.invert = true
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 2,
+      deltaMode: 1,
+    })
+    expect(scroll.scrollTo).toBeCalledWith(40, 0, 300)
+  })
+
+  it('should work with dampingFactor', () => {
+    mouseWheel.mouseWheelOpt.dampingFactor = 0.1
+
+    scroll.scroller.scrollBehaviorX.performDampingAlgorithm = jest
+      .fn()
+      .mockImplementation((distance, factor) => {
+        return distance * factor
+      })
+    scroll.scroller.scrollBehaviorY.performDampingAlgorithm = jest
+      .fn()
+      .mockImplementation((distance, factor) => {
+        return distance * factor
+      })
+
+    dispatchMouseWheel(scroll.wrapper, 'wheel', {
+      deltaX: 0,
+      deltaY: 2,
+      deltaMode: 1,
+    })
+
+    expect(scroll.scrollTo).toBeCalledWith(0, -4, 300)
+    // improve coverage
+    mouseWheel.destroy()
+  })
+})