cbvirtua 1.0.106 → 1.0.107

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

@@ -0,0 +1,327 @@
+import BScroll from '@better-scroll/core'
+import {
+  warn,
+  preventDefaultExceptionFn,
+  EventRegister,
+  EventEmitter,
+  Direction,
+  ApplyOrder,
+  extend,
+  maybePrevent,
+} from '@better-scroll/shared-utils'
+
+export type MouseWheelOptions = Partial<MouseWheelConfig> | true
+
+export interface MouseWheelConfig {
+  speed: number
+  invert: boolean
+  easeTime: number
+  discreteTime: number
+  throttleTime: number
+  dampingFactor: number
+}
+
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    mouseWheel?: MouseWheelOptions
+  }
+}
+
+interface CompatibleWheelEvent extends WheelEvent {
+  pageX: number
+  pageY: number
+  readonly wheelDeltaX: number
+  readonly wheelDeltaY: number
+  readonly wheelDelta: number
+}
+
+interface WheelDelta {
+  x: number
+  y: number
+  directionX: Direction
+  directionY: Direction
+}
+
+export default class MouseWheel {
+  static pluginName = 'mouseWheel'
+  static applyOrder = ApplyOrder.Pre
+  mouseWheelOpt: MouseWheelConfig
+  private eventRegister: EventRegister
+  private wheelEndTimer: number = 0
+  private wheelMoveTimer: number = 0
+  private wheelStart = false
+  private deltaCache: { x: number; y: number }[]
+  private hooksFn: Array<[EventEmitter, string, Function]>
+  constructor(public scroll: BScroll) {
+    this.init()
+  }
+
+  private init() {
+    this.handleBScroll()
+    this.handleOptions()
+    this.handleHooks()
+
+    this.registerEvent()
+  }
+
+  private handleBScroll() {
+    this.scroll.registerType([
+      'alterOptions',
+      'mousewheelStart',
+      'mousewheelMove',
+      'mousewheelEnd',
+    ])
+  }
+
+  private handleOptions() {
+    const userOptions = (
+      this.scroll.options.mouseWheel === true
+        ? {}
+        : this.scroll.options.mouseWheel
+    ) as Partial<MouseWheelConfig>
+    const defaultOptions: MouseWheelConfig = {
+      speed: 20,
+      invert: false,
+      easeTime: 300,
+      discreteTime: 400,
+      throttleTime: 0,
+      dampingFactor: 0.1,
+    }
+    this.mouseWheelOpt = extend(defaultOptions, userOptions)
+  }
+
+  private handleHooks() {
+    this.hooksFn = []
+    this.registerHooks(this.scroll.hooks, 'destroy', this.destroy)
+  }
+
+  private registerEvent() {
+    this.eventRegister = new EventRegister(this.scroll.scroller.wrapper, [
+      {
+        name: 'wheel',
+        handler: this.wheelHandler.bind(this),
+      },
+      {
+        name: 'mousewheel',
+        handler: this.wheelHandler.bind(this),
+      },
+      {
+        name: 'DOMMouseScroll', // FireFox
+        handler: this.wheelHandler.bind(this),
+      },
+    ])
+  }
+
+  private registerHooks(hooks: EventEmitter, name: string, handler: Function) {
+    hooks.on(name, handler, this)
+    this.hooksFn.push([hooks, name, handler])
+  }
+
+  private wheelHandler(e: CompatibleWheelEvent) {
+    if (!this.scroll.enabled) {
+      return
+    }
+    this.beforeHandler(e)
+
+    // start
+    if (!this.wheelStart) {
+      this.wheelStartHandler(e)
+      this.wheelStart = true
+    }
+
+    // move
+    const delta = this.getWheelDelta(e)
+    this.wheelMoveHandler(delta)
+
+    // end
+    this.wheelEndDetector(delta)
+  }
+
+  private wheelStartHandler(e: CompatibleWheelEvent) {
+    this.cleanCache()
+    const { scrollBehaviorX, scrollBehaviorY } = this.scroll.scroller
+
+    scrollBehaviorX.setMovingDirection(Direction.Default)
+    scrollBehaviorY.setMovingDirection(Direction.Default)
+    scrollBehaviorX.setDirection(Direction.Default)
+    scrollBehaviorY.setDirection(Direction.Default)
+
+    this.scroll.trigger(this.scroll.eventTypes.alterOptions, this.mouseWheelOpt)
+    this.scroll.trigger(this.scroll.eventTypes.mousewheelStart)
+  }
+
+  private cleanCache() {
+    this.deltaCache = []
+  }
+
+  private wheelMoveHandler(delta: {
+    x: number
+    y: number
+    directionX: number
+    directionY: number
+  }) {
+    const { throttleTime, dampingFactor } = this.mouseWheelOpt
+    if (throttleTime && this.wheelMoveTimer) {
+      this.deltaCache.push(delta)
+    } else {
+      const cachedDelta = this.deltaCache.reduce(
+        (prev, current) => {
+          return {
+            x: prev.x + current.x,
+            y: prev.y + current.y,
+          }
+        },
+        { x: 0, y: 0 }
+      )
+
+      this.cleanCache()
+
+      const { scrollBehaviorX, scrollBehaviorY } = this.scroll.scroller
+
+      scrollBehaviorX.setMovingDirection(-delta.directionX)
+      scrollBehaviorY.setMovingDirection(-delta.directionY)
+      scrollBehaviorX.setDirection(delta.x)
+      scrollBehaviorY.setDirection(delta.y)
+
+      // when out of boundary, perform a damping scroll
+      const newX = scrollBehaviorX.performDampingAlgorithm(
+        Math.round(delta.x) + cachedDelta.x,
+        dampingFactor
+      )
+      const newY = scrollBehaviorY.performDampingAlgorithm(
+        Math.round(delta.y) + cachedDelta.x,
+        dampingFactor
+      )
+
+      if (
+        !this.scroll.trigger(this.scroll.eventTypes.mousewheelMove, {
+          x: newX,
+          y: newY,
+        })
+      ) {
+        const easeTime = this.getEaseTime()
+        if (newX !== this.scroll.x || newY !== this.scroll.y) {
+          this.scroll.scrollTo(newX, newY, easeTime)
+        }
+      }
+      if (throttleTime) {
+        this.wheelMoveTimer = window.setTimeout(() => {
+          this.wheelMoveTimer = 0
+        }, throttleTime)
+      }
+    }
+  }
+
+  private wheelEndDetector(delta: WheelDelta) {
+    window.clearTimeout(this.wheelEndTimer)
+    this.wheelEndTimer = window.setTimeout(() => {
+      this.wheelStart = false
+      window.clearTimeout(this.wheelMoveTimer)
+      this.wheelMoveTimer = 0
+
+      this.scroll.trigger(this.scroll.eventTypes.mousewheelEnd, delta)
+    }, this.mouseWheelOpt.discreteTime)
+  }
+
+  private getWheelDelta(e: CompatibleWheelEvent): WheelDelta {
+    const { speed, invert } = this.mouseWheelOpt
+    let wheelDeltaX = 0
+    let wheelDeltaY = 0
+    let direction = invert ? Direction.Negative : Direction.Positive
+    switch (true) {
+      case 'deltaX' in e:
+        if (e.deltaMode === 1) {
+          wheelDeltaX = -e.deltaX * speed
+          wheelDeltaY = -e.deltaY * speed
+        } else {
+          wheelDeltaX = -e.deltaX
+          wheelDeltaY = -e.deltaY
+        }
+        break
+      case 'wheelDeltaX' in e:
+        wheelDeltaX = (e.wheelDeltaX / 120) * speed
+        wheelDeltaY = (e.wheelDeltaY / 120) * speed
+        break
+      case 'wheelDelta' in e:
+        wheelDeltaX = wheelDeltaY = (e.wheelDelta / 120) * speed
+        break
+      case 'detail' in e:
+        wheelDeltaX = wheelDeltaY = (-e.detail / 3) * speed
+        break
+    }
+    wheelDeltaX *= direction
+    wheelDeltaY *= direction
+
+    if (!this.scroll.hasVerticalScroll) {
+      if (Math.abs(wheelDeltaY) > Math.abs(wheelDeltaX)) {
+        wheelDeltaX = wheelDeltaY
+      }
+      wheelDeltaY = 0
+    }
+    if (!this.scroll.hasHorizontalScroll) {
+      wheelDeltaX = 0
+    }
+
+    const directionX =
+      wheelDeltaX > 0
+        ? Direction.Negative
+        : wheelDeltaX < 0
+        ? Direction.Positive
+        : Direction.Default
+    const directionY =
+      wheelDeltaY > 0
+        ? Direction.Negative
+        : wheelDeltaY < 0
+        ? Direction.Positive
+        : Direction.Default
+    return {
+      x: wheelDeltaX,
+      y: wheelDeltaY,
+      directionX,
+      directionY,
+    }
+  }
+
+  private beforeHandler(e: CompatibleWheelEvent) {
+    const { preventDefault, stopPropagation, preventDefaultException } =
+      this.scroll.options
+    if (
+      preventDefault &&
+      !preventDefaultExceptionFn(e.target, preventDefaultException)
+    ) {
+      maybePrevent(e)
+    }
+    if (stopPropagation) {
+      e.stopPropagation()
+    }
+  }
+
+  private getEaseTime() {
+    const SAFE_EASETIME = 100
+    const easeTime = this.mouseWheelOpt.easeTime
+    // scrollEnd event will be triggered in every calling of scrollTo when easeTime is too small
+    // easeTime needs to be greater than 100
+    if (easeTime < SAFE_EASETIME) {
+      warn(
+        `easeTime should be greater than 100.` +
+          `If mouseWheel easeTime is too small,` +
+          `scrollEnd will be triggered many times.`
+      )
+    }
+    return Math.max(easeTime, SAFE_EASETIME)
+  }
+
+  destroy() {
+    this.eventRegister.destroy()
+
+    window.clearTimeout(this.wheelEndTimer)
+    window.clearTimeout(this.wheelMoveTimer)
+
+    this.hooksFn.forEach((item) => {
+      const hooks = item[0]
+      const hooksName = item[1]
+      const handlerFn = item[2]
+      hooks.off(hooksName, handlerFn)
+    })
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/movable/README.md

@@ -0,0 +1,18 @@
+# @better-scroll/movable
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/movable/README.md)
+
+Movable area plugin.
+
+## Usage
+
+```js
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+
+BScroll.use(Movable)
+
+const bs = new BScroll('.wrapper', {
+  movable: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/movable/README_zh-CN.md

@@ -0,0 +1,18 @@
+# @better-scroll/movable
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/movable/README_zh-CN.md)
+
+Movable 可移动区域插件。
+
+## 使用
+
+```js
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+
+BScroll.use(Movable)
+
+const bs = new BScroll('.wrapper', {
+  movable: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/movable/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@better-scroll/movable",
+  "version": "2.5.1",
+  "description": "Movable plugin for BetterScroll",
+  "author": {
+    "name": "jizhi",
+    "email": "theniceangel@163.com"
+  },
+  "main": "dist/movable.min.js",
+  "module": "dist/movable.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/observe-dom"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.5.1"
+  }
+}

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

@@ -0,0 +1,118 @@
+import BScroll, { Boundary } from '@better-scroll/core'
+jest.mock('@better-scroll/core')
+import { createDiv } from '@better-scroll/core/src/__tests__/__utils__/layout'
+import Movable from '../index'
+
+const createMovableEls = () => {
+  const wrapper = createDiv(100, 100, 0, 0)
+  const content = createDiv(100, 100, 0, 0)
+  wrapper.appendChild(content)
+
+  return {
+    wrapper,
+    content,
+  }
+}
+describe('movable plugin', () => {
+  let scroll: BScroll
+  let movable: Movable
+
+  beforeEach(() => {
+    // create DOM
+    const { wrapper } = createMovableEls()
+    scroll = new BScroll(wrapper)
+    movable = new Movable(scroll)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should proxy properties to BScroll instance', () => {
+    expect(scroll.proxy).toBeCalled()
+    expect(scroll.proxy).toHaveBeenLastCalledWith([
+      {
+        key: 'putAt',
+        sourceKey: 'plugins.movable.putAt',
+      },
+    ])
+  })
+
+  it('should modify boundary', () => {
+    const { scrollBehaviorX, scrollBehaviorY } = scroll.scroller
+    scrollBehaviorX.options.scrollable = true
+    scrollBehaviorY.options.scrollable = true
+
+    scrollBehaviorX.wrapperSize = 200
+    scrollBehaviorX.contentSize = 100
+    scrollBehaviorY.wrapperSize = 400
+    scrollBehaviorY.contentSize = 200
+
+    let boundaryX: Boundary = { minScrollPos: 0, maxScrollPos: 1 }
+    let boundaryY: Boundary = { minScrollPos: 0, maxScrollPos: 1 }
+
+    scrollBehaviorX.hooks.trigger(
+      scrollBehaviorX.hooks.eventTypes.computeBoundary,
+      boundaryX
+    )
+    scrollBehaviorY.hooks.trigger(
+      scrollBehaviorY.hooks.eventTypes.computeBoundary,
+      boundaryY
+    )
+
+    expect(boundaryX).toMatchObject({
+      minScrollPos: 100,
+      maxScrollPos: 0,
+    })
+
+    expect(boundaryY).toMatchObject({
+      minScrollPos: 200,
+      maxScrollPos: 0,
+    })
+  })
+
+  it('should register ignoreHasScroll hook', () => {
+    const { scrollBehaviorX, scrollBehaviorY } = scroll.scroller
+    const retX = scrollBehaviorX.hooks.trigger(
+      scrollBehaviorX.hooks.eventTypes.ignoreHasScroll
+    )
+    const retY = scrollBehaviorY.hooks.trigger(
+      scrollBehaviorY.hooks.eventTypes.ignoreHasScroll
+    )
+
+    expect(retX).toBe(true)
+    expect(retY).toBe(true)
+  })
+
+  it('should work well when call putAt()', () => {
+    // integer
+    movable.putAt(20, 20)
+    expect(scroll.scrollTo).toBeCalledWith(20, 20, 800, expect.anything())
+
+    // simulate minScrollPos
+    scroll.scroller.scrollBehaviorX.minScrollPos = 300
+    scroll.scroller.scrollBehaviorY.minScrollPos = 300
+
+    // [left, bottom]
+    movable.putAt('left', 'bottom')
+    expect(scroll.scrollTo).toBeCalledWith(0, 300, 800, expect.anything())
+
+    // [right, top]
+    movable.putAt('right', 'top')
+    expect(scroll.scrollTo).toBeCalledWith(300, 0, 800, expect.anything())
+
+    // [center, center]
+    movable.putAt('center', 'center')
+    expect(scroll.scrollTo).toBeCalledWith(150, 150, 800, expect.anything())
+  })
+
+  it('should destroy all events', () => {
+    const { scrollBehaviorX, scrollBehaviorY } = scroll.scroller
+    scroll.hooks.trigger(scroll.hooks.eventTypes.destroy)
+    expect(scrollBehaviorX.hooks.events['computeBoundary'].length).toBe(0)
+    expect(scrollBehaviorX.hooks.events['ignoreHasScroll'].length).toBe(0)
+
+    expect(scrollBehaviorY.hooks.events['computeBoundary'].length).toBe(0)
+    expect(scrollBehaviorY.hooks.events['ignoreHasScroll'].length).toBe(0)
+  })
+})

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

@@ -0,0 +1,138 @@
+import BScroll, { Behavior, Boundary } from '@better-scroll/core'
+import {
+  ease,
+  EventEmitter,
+  ApplyOrder,
+  EaseItem,
+} from '@better-scroll/shared-utils'
+import propertiesConfig from './propertiesConfig'
+
+type PositionX = number | 'left' | 'right' | 'center'
+type PositionY = number | 'top' | 'bottom' | 'center'
+
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    movable?: true
+  }
+  interface CustomAPI {
+    movable: PluginAPI
+  }
+}
+
+interface PluginAPI {
+  putAt(x: PositionX, y: PositionY, time?: number, easing?: EaseItem): void
+}
+
+export default class Movable implements PluginAPI {
+  static pluginName = 'movable'
+  static applyOrder = ApplyOrder.Pre
+  private hooksFn: Array<[EventEmitter, string, Function]>
+  constructor(public scroll: BScroll) {
+    this.handleBScroll()
+    this.handleHooks()
+  }
+
+  private handleBScroll() {
+    this.scroll.proxy(propertiesConfig)
+  }
+
+  private handleHooks() {
+    this.hooksFn = []
+    const { scrollBehaviorX, scrollBehaviorY } = this.scroll.scroller
+
+    const computeBoundary = (boundary: Boundary, behavior: Behavior) => {
+      if (boundary.maxScrollPos > 0) {
+        // content is smaller than wrapper
+        boundary.minScrollPos = behavior.wrapperSize - behavior.contentSize
+        boundary.maxScrollPos = 0
+      }
+    }
+
+    this.registerHooks(
+      scrollBehaviorX.hooks,
+      scrollBehaviorX.hooks.eventTypes.ignoreHasScroll,
+      () => true
+    )
+    this.registerHooks(
+      scrollBehaviorX.hooks,
+      scrollBehaviorX.hooks.eventTypes.computeBoundary,
+      (boundary: Boundary) => {
+        computeBoundary(boundary, scrollBehaviorX)
+      }
+    )
+
+    this.registerHooks(
+      scrollBehaviorY.hooks,
+      scrollBehaviorY.hooks.eventTypes.ignoreHasScroll,
+      () => true
+    )
+    this.registerHooks(
+      scrollBehaviorY.hooks,
+      scrollBehaviorY.hooks.eventTypes.computeBoundary,
+      (boundary: Boundary) => {
+        computeBoundary(boundary, scrollBehaviorY)
+      }
+    )
+
+    this.registerHooks(
+      this.scroll.hooks,
+      this.scroll.hooks.eventTypes.destroy,
+      () => {
+        this.destroy()
+      }
+    )
+  }
+
+  putAt(
+    x: PositionX,
+    y: PositionY,
+    time = this.scroll.options.bounceTime,
+    easing = ease.bounce
+  ) {
+    const position = this.resolvePostion(x, y)
+    this.scroll.scrollTo(position.x, position.y, time, easing)
+  }
+
+  private resolvePostion(x: PositionX, y: PositionY): { x: number; y: number } {
+    const { scrollBehaviorX, scrollBehaviorY } = this.scroll.scroller
+    const resolveFormula = {
+      left() {
+        return 0
+      },
+      top() {
+        return 0
+      },
+      right() {
+        return scrollBehaviorX.minScrollPos
+      },
+      bottom() {
+        return scrollBehaviorY.minScrollPos
+      },
+      center(index: number) {
+        const baseSize =
+          index === 0
+            ? scrollBehaviorX.minScrollPos
+            : scrollBehaviorY.minScrollPos
+        return baseSize / 2
+      },
+    }
+    return {
+      x: typeof x === 'number' ? x : resolveFormula[x](0),
+      y: typeof y === 'number' ? y : resolveFormula[y](1),
+    }
+  }
+
+  destroy() {
+    this.hooksFn.forEach((item) => {
+      const hooks = item[0]
+      const hooksName = item[1]
+      const handlerFn = item[2]
+      hooks.off(hooksName, handlerFn)
+    })
+    this.hooksFn.length = 0
+  }
+  private registerHooks(hooks: EventEmitter, name: string, handler: Function) {
+    hooks.on(name, handler, this)
+    this.hooksFn.push([hooks, name, handler])
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/movable/src/propertiesConfig.ts

@@ -0,0 +1,13 @@
+const sourcePrefix = 'plugins.movable'
+const propertiesMap = [
+  {
+    key: 'putAt',
+    name: 'putAt',
+  },
+]
+export default propertiesMap.map((item) => {
+  return {
+    key: item.key,
+    sourceKey: `${sourcePrefix}.${item.name}`,
+  }
+})

package/better-scroll-dev/better-scroll-dev/packages/nested-scroll/README.md

@@ -0,0 +1,23 @@
+# better-scroll
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/nested-scroll/README_zh-CN.md)
+
+nestedScroll is a plugin which helps you solve the trouble of nested Scroll
+
+## Usage
+
+```js
+  import BScroll from 'better-scroll'
+  import NestedScroll from '@better-scroll/nested-scroll'
+
+  BScroll.use(NestedScroll)
+
+  // parent bs
+  new BScroll('.outerWrapper', {
+    nestedScroll: true
+  })
+  // child bs
+  new BScroll('.innerWrapper', {
+    nestedScroll: true
+  })
+```