cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/pull-down/src/index.ts

@@ -0,0 +1,328 @@
+import BScroll, { Boundary } from '@better-scroll/core'
+import { MouseWheelConfig } from '@better-scroll/mouse-wheel'
+import { ease, extend, EventEmitter, Probe } from '@better-scroll/shared-utils'
+import propertiesConfig from './propertiesConfig'
+
+export type PullDownRefreshOptions = Partial<PullDownRefreshConfig> | true
+
+// pulldownRefresh phase will go through:
+// DEFAULT -> MOVING -> FETCHING
+// or
+// DEFAULT -> MOVING
+const enum PullDownPhase {
+  DEFAULT,
+  MOVING,
+  FETCHING,
+}
+
+const enum ThresholdBoundary {
+  DEFAULT,
+  INSIDE,
+  OUTSIDE,
+}
+
+export interface PullDownRefreshConfig {
+  threshold: number
+  stop: number
+}
+
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    pullDownRefresh?: PullDownRefreshOptions
+  }
+  interface CustomAPI {
+    pullDownRefresh: PluginAPI
+  }
+}
+
+interface PluginAPI {
+  finishPullDown(): void
+  openPullDown(config?: PullDownRefreshOptions): void
+  closePullDown(): void
+  autoPullDownRefresh(): void
+}
+
+const PULLING_DOWN_EVENT = 'pullingDown'
+const ENTER_THRESHOLD_EVENT = 'enterThreshold'
+const LEAVE_THRESHOLD_EVENT = 'leaveThreshold'
+
+export default class PullDown implements PluginAPI {
+  static pluginName = 'pullDownRefresh'
+  private hooksFn: Array<[EventEmitter, string, Function]>
+  pulling: PullDownPhase = PullDownPhase.DEFAULT
+  thresholdBoundary: ThresholdBoundary = ThresholdBoundary.DEFAULT
+  watching: boolean
+  options: PullDownRefreshConfig
+  cachedOriginanMinScrollY: number
+  currentMinScrollY: number
+
+  constructor(public scroll: BScroll) {
+    this.init()
+  }
+
+  private setPulling(status: PullDownPhase) {
+    this.pulling = status
+  }
+
+  private setThresholdBoundary(boundary: ThresholdBoundary) {
+    this.thresholdBoundary = boundary
+  }
+
+  private init() {
+    this.handleBScroll()
+
+    this.handleOptions(this.scroll.options.pullDownRefresh)
+
+    this.handleHooks()
+
+    this.watch()
+  }
+
+  private handleBScroll() {
+    this.scroll.registerType([
+      PULLING_DOWN_EVENT,
+      ENTER_THRESHOLD_EVENT,
+      LEAVE_THRESHOLD_EVENT,
+    ])
+
+    this.scroll.proxy(propertiesConfig)
+  }
+
+  private handleOptions(userOptions: PullDownRefreshOptions = {}) {
+    userOptions = (
+      userOptions === true ? {} : userOptions
+    ) as Partial<PullDownRefreshConfig>
+    const defaultOptions: PullDownRefreshConfig = {
+      threshold: 90,
+      stop: 40,
+    }
+    this.options = extend(defaultOptions, userOptions)
+
+    this.scroll.options.probeType = Probe.Realtime
+  }
+
+  private handleHooks() {
+    this.hooksFn = []
+    const scroller = this.scroll.scroller
+    const scrollBehaviorY = scroller.scrollBehaviorY
+    this.currentMinScrollY = this.cachedOriginanMinScrollY =
+      scrollBehaviorY.minScrollPos
+
+    this.registerHooks(
+      this.scroll.hooks,
+      this.scroll.hooks.eventTypes.contentChanged,
+      () => {
+        this.finishPullDown()
+      }
+    )
+
+    this.registerHooks(
+      scrollBehaviorY.hooks,
+      scrollBehaviorY.hooks.eventTypes.computeBoundary,
+      (boundary: Boundary) => {
+        // content is smaller than wrapper
+        if (boundary.maxScrollPos > 0) {
+          // allow scrolling when content is not full of wrapper
+          boundary.maxScrollPos = -1
+        }
+        boundary.minScrollPos = this.currentMinScrollY
+      }
+    )
+
+    // integrate with mousewheel
+    if (this.hasMouseWheelPlugin()) {
+      this.registerHooks(
+        this.scroll,
+        this.scroll.eventTypes.alterOptions,
+        (mouseWheelOptions: MouseWheelConfig) => {
+          const SANE_DISCRETE_TIME = 300
+          const SANE_EASE_TIME = 350
+          mouseWheelOptions.discreteTime = SANE_DISCRETE_TIME
+          // easeTime > discreteTime ensure goInto checkPullDown function
+          mouseWheelOptions.easeTime = SANE_EASE_TIME
+        }
+      )
+
+      this.registerHooks(
+        this.scroll,
+        this.scroll.eventTypes.mousewheelEnd,
+        () => {
+          // mouseWheel need trigger checkPullDown manually
+          scroller.hooks.trigger(scroller.hooks.eventTypes.end)
+        }
+      )
+    }
+  }
+
+  private registerHooks(hooks: EventEmitter, name: string, handler: Function) {
+    hooks.on(name, handler, this)
+    this.hooksFn.push([hooks, name, handler])
+  }
+
+  private hasMouseWheelPlugin() {
+    return !!this.scroll.eventTypes.alterOptions
+  }
+
+  private watch() {
+    const scroller = this.scroll.scroller
+    this.watching = true
+    this.registerHooks(
+      scroller.hooks,
+      scroller.hooks.eventTypes.end,
+      this.checkPullDown
+    )
+
+    this.registerHooks(
+      this.scroll,
+      this.scroll.eventTypes.scrollStart,
+      this.resetStateBeforeScrollStart
+    )
+
+    this.registerHooks(
+      this.scroll,
+      this.scroll.eventTypes.scroll,
+      this.checkLocationOfThresholdBoundary
+    )
+
+    if (this.hasMouseWheelPlugin()) {
+      this.registerHooks(
+        this.scroll,
+        this.scroll.eventTypes.mousewheelStart,
+        this.resetStateBeforeScrollStart
+      )
+    }
+  }
+
+  private resetStateBeforeScrollStart() {
+    // current fetching pulldownRefresh has ended
+    if (!this.isFetchingStatus()) {
+      this.setPulling(PullDownPhase.MOVING)
+      this.setThresholdBoundary(ThresholdBoundary.DEFAULT)
+    }
+  }
+
+  private checkLocationOfThresholdBoundary() {
+    // pulldownRefresh is in the phase of Moving
+    if (this.pulling === PullDownPhase.MOVING) {
+      const scroll = this.scroll
+      // enter threshold boundary
+      const enteredThresholdBoundary =
+        this.thresholdBoundary !== ThresholdBoundary.INSIDE &&
+        this.locateInsideThresholdBoundary()
+      // leave threshold boundary
+      const leftThresholdBoundary =
+        this.thresholdBoundary !== ThresholdBoundary.OUTSIDE &&
+        !this.locateInsideThresholdBoundary()
+      if (enteredThresholdBoundary) {
+        this.setThresholdBoundary(ThresholdBoundary.INSIDE)
+        scroll.trigger(ENTER_THRESHOLD_EVENT)
+      }
+      if (leftThresholdBoundary) {
+        this.setThresholdBoundary(ThresholdBoundary.OUTSIDE)
+        scroll.trigger(LEAVE_THRESHOLD_EVENT)
+      }
+    }
+  }
+
+  private locateInsideThresholdBoundary() {
+    return this.scroll.y <= this.options.threshold
+  }
+
+  private unwatch() {
+    const scroll = this.scroll
+    const scroller = scroll.scroller
+    this.watching = false
+    scroller.hooks.off(scroller.hooks.eventTypes.end, this.checkPullDown)
+    scroll.off(scroll.eventTypes.scrollStart, this.resetStateBeforeScrollStart)
+    scroll.off(scroll.eventTypes.scroll, this.checkLocationOfThresholdBoundary)
+    if (this.hasMouseWheelPlugin()) {
+      scroll.off(
+        scroll.eventTypes.mousewheelStart,
+        this.resetStateBeforeScrollStart
+      )
+    }
+  }
+
+  private checkPullDown() {
+    const { threshold, stop } = this.options
+    // check if a real pull down action
+    if (this.scroll.y < threshold) {
+      return false
+    }
+
+    if (this.pulling === PullDownPhase.MOVING) {
+      this.modifyBehaviorYBoundary(stop)
+
+      this.setPulling(PullDownPhase.FETCHING)
+
+      this.scroll.trigger(PULLING_DOWN_EVENT)
+    }
+
+    this.scroll.scrollTo(
+      this.scroll.x,
+      stop,
+      this.scroll.options.bounceTime,
+      ease.bounce
+    )
+
+    return this.isFetchingStatus()
+  }
+
+  private isFetchingStatus() {
+    return this.pulling === PullDownPhase.FETCHING
+  }
+
+  private modifyBehaviorYBoundary(stopDistance: number) {
+    const scrollBehaviorY = this.scroll.scroller.scrollBehaviorY
+    // manually modify minScrollPos for a hang animation
+    // to prevent from resetPosition
+    this.cachedOriginanMinScrollY = scrollBehaviorY.minScrollPos
+    this.currentMinScrollY = stopDistance
+    scrollBehaviorY.computeBoundary()
+  }
+
+  finishPullDown() {
+    if (this.isFetchingStatus()) {
+      const scrollBehaviorY = this.scroll.scroller.scrollBehaviorY
+      // restore minScrollY since the hang animation has ended
+      this.currentMinScrollY = this.cachedOriginanMinScrollY
+      scrollBehaviorY.computeBoundary()
+      this.setPulling(PullDownPhase.DEFAULT)
+      this.scroll.resetPosition(this.scroll.options.bounceTime, ease.bounce)
+    }
+  }
+
+  // allow 'true' type is compat for beta version implements
+  openPullDown(config: PullDownRefreshOptions = {}) {
+    this.handleOptions(config)
+    if (!this.watching) {
+      this.watch()
+    }
+  }
+
+  closePullDown() {
+    this.unwatch()
+  }
+
+  autoPullDownRefresh() {
+    const { threshold, stop } = this.options
+
+    if (this.isFetchingStatus() || !this.watching) {
+      return
+    }
+
+    this.modifyBehaviorYBoundary(stop)
+
+    this.scroll.trigger(this.scroll.eventTypes.scrollStart)
+    this.scroll.scrollTo(this.scroll.x, threshold)
+
+    this.setPulling(PullDownPhase.FETCHING)
+    this.scroll.trigger(PULLING_DOWN_EVENT)
+    this.scroll.scrollTo(
+      this.scroll.x,
+      stop,
+      this.scroll.options.bounceTime,
+      ease.bounce
+    )
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/pull-down/src/propertiesConfig.ts

@@ -0,0 +1,27 @@
+const sourcePrefix = 'plugins.pullDownRefresh'
+
+const propertiesMap = [
+  {
+    key: 'finishPullDown',
+    name: 'finishPullDown'
+  },
+  {
+    key: 'openPullDown',
+    name: 'openPullDown'
+  },
+  {
+    key: 'closePullDown',
+    name: 'closePullDown'
+  },
+  {
+    key: 'autoPullDownRefresh',
+    name: 'autoPullDownRefresh'
+  }
+]
+
+export default propertiesMap.map(item => {
+  return {
+    key: item.key,
+    sourceKey: `${sourcePrefix}.${item.name}`
+  }
+})

package/better-scroll-dev/better-scroll-dev/packages/pull-up/README.md

@@ -0,0 +1,17 @@
+# @better-scroll/pull-up
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/pull-up/README_zh-CN.md)
+
+The ability to inject a pull-up load for BetterScroll.
+
+## Usage
+
+```js
+import BScroll from '@better-scroll/core'
+import PullUp from '@better-scroll/pull-up'
+BScroll.use(PullUp)
+
+const bs = new BScroll('.wrapper', {
+  pullUpLoad: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/pull-up/README_zh-CN.md

@@ -0,0 +1,15 @@
+# @better-scroll/pull-up
+
+为 BetterScroll 注入上拉加载的能力。
+
+## 使用
+
+```js
+import BScroll from '@better-scroll/core'
+import Pullup from '@better-scroll/pull-up'
+BScroll.use(Pullup)
+
+const bs = new BScroll('.wrapper', {
+  pullUpLoad: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/pull-up/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@better-scroll/pull-up",
+  "version": "2.5.1",
+  "description": "pull up to load more data",
+  "author": {
+    "name": "jizhi",
+    "email": "theniceangel@163.com"
+  },
+  "main": "dist/pull-up.min.js",
+  "module": "dist/pull-up.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",
+    "pull-up"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ustbhuangyi/better-scroll.git",
+    "directory": "packages/pull-up"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.5.1"
+  },
+  "gitHead": "f441227b6137d44ba0b44b97ed4cd49de9386130"
+}

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

@@ -0,0 +1,243 @@
+import BScroll from '@better-scroll/core'
+jest.mock('@better-scroll/core')
+
+import PullUp from '@better-scroll/pull-up'
+import { Probe } from '@better-scroll/shared-utils'
+
+const createPullUpElements = () => {
+  const wrapper = document.createElement('div')
+  const content = document.createElement('div')
+  wrapper.appendChild(content)
+  return { wrapper }
+}
+
+describe('pullUp plugins', () => {
+  let scroll: BScroll
+  let pullUp: PullUp
+
+  beforeEach(() => {
+    // create DOM
+    const { wrapper } = createPullUpElements()
+    scroll = new BScroll(wrapper, {})
+    pullUp = new PullUp(scroll)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should proxy properties to scroll instance', () => {
+    expect(scroll.proxy).toBeCalledWith([
+      {
+        key: 'finishPullUp',
+        sourceKey: 'plugins.pullUpLoad.finishPullUp',
+      },
+      {
+        key: 'openPullUp',
+        sourceKey: 'plugins.pullUpLoad.openPullUp',
+      },
+      {
+        key: 'closePullUp',
+        sourceKey: 'plugins.pullUpLoad.closePullUp',
+      },
+      {
+        key: 'autoPullUpLoad',
+        sourceKey: 'plugins.pullUpLoad.autoPullUpLoad',
+      },
+    ])
+  })
+
+  it('should handle default options and user options', () => {
+    // case 1
+    scroll.options.pullUpLoad = true
+    pullUp = new PullUp(scroll)
+
+    expect(pullUp.options).toMatchObject({
+      threshold: 0,
+    })
+
+    // case 2
+    scroll.options.pullUpLoad = {
+      threshold: 40,
+    }
+    pullUp = new PullUp(scroll)
+
+    expect(pullUp.options).toMatchObject({
+      threshold: 40,
+    })
+
+    // case 3
+    scroll.options.pullUpLoad = {
+      threshold: -40,
+    }
+    pullUp = new PullUp(scroll)
+
+    expect(pullUp.options).toMatchObject({
+      threshold: -40,
+    })
+
+    expect(scroll.options.probeType).toBe(Probe.Realtime)
+  })
+
+  it('should modify maxScrollY when content is full of wrapper', () => {
+    const scrollBehaviorY = scroll.scroller.scrollBehaviorY
+    let boundary = {
+      minScrollPos: 0,
+      maxScrollPos: 20,
+    }
+    scrollBehaviorY.hooks.trigger(
+      scrollBehaviorY.hooks.eventTypes.computeBoundary,
+      boundary
+    )
+    expect(boundary).toMatchObject({
+      minScrollPos: 0,
+      maxScrollPos: -1,
+    })
+  })
+
+  it('should checkPullUp', () => {
+    const mockFn = jest.fn()
+    scroll.on(scroll.eventTypes.pullingUp, mockFn)
+
+    const pos1 = {
+      x: 0,
+      y: 100,
+    }
+    // simulate pullDown action
+    scroll.movingDirectionY = -1
+
+    scroll.trigger(scroll.eventTypes.scroll, pos1)
+    expect(mockFn).toHaveBeenCalledTimes(0)
+
+    // simulate pullUp action
+    const pos2 = {
+      x: 0,
+      y: -100,
+    }
+    scroll.movingDirectionY = 1
+    scroll.trigger(scroll.eventTypes.scroll, pos2)
+    expect(mockFn).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pullingUp once', () => {
+    const mockFn = jest.fn()
+    const pos = {
+      x: 0,
+      y: -100,
+    }
+    scroll.on(scroll.eventTypes.pullingUp, mockFn)
+    // when
+    scroll.movingDirectionY = 1
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+    // then
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  it('should work well when call finishPullUp()', () => {
+    // simulate pullUp action
+    const pos = {
+      x: 0,
+      y: -100,
+    }
+    scroll.movingDirectionY = 1
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+
+    pullUp.finishPullUp()
+
+    expect(scroll.scroller.scrollBehaviorY.setMovingDirection).toBeCalledWith(0)
+    expect(scroll.events.scrollEnd.length).toBe(2)
+    expect(pullUp.watching).toBe(false)
+  })
+
+  it('should work well when call closePullUp()', () => {
+    pullUp.closePullUp()
+
+    expect(pullUp.watching).toBe(false)
+    expect(scroll.events.scroll.length).toBe(0)
+  })
+
+  it('should work well when call openPullUp()', () => {
+    pullUp.closePullUp()
+
+    expect(pullUp.watching).toBe(false)
+    expect(pullUp.options).toMatchObject({
+      threshold: 0,
+    })
+
+    // modify options
+    pullUp.openPullUp({
+      threshold: 200,
+    })
+
+    expect(pullUp.options).toMatchObject({
+      threshold: 200,
+    })
+    expect(pullUp.watching).toBe(true)
+  })
+
+  it('should reset pulling when scrollEnd triggered', () => {
+    // simulate pullUp action
+    const pos = {
+      x: 0,
+      y: -100,
+    }
+    scroll.movingDirectionY = 1
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+
+    expect(pullUp.pulling).toBe(true)
+
+    scroll.trigger(scroll.eventTypes.scrollEnd)
+
+    expect(pullUp.pulling).toBe(false)
+  })
+
+  it('should call watch() in scrollEnd hooks when pullingUp', () => {
+    const pullUpMockFn = jest.fn()
+    // simulate pullUp action
+    const pos = {
+      x: 0,
+      y: -100,
+    }
+    scroll.on(scroll.eventTypes.pullingUp, pullUpMockFn)
+    scroll.movingDirectionY = 1
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+
+    expect(pullUpMockFn).toBeCalledTimes(1)
+    expect(pullUp.pulling).toBe(true)
+
+    pullUp.finishPullUp()
+    // because pulling is true, won't trigger pullingUp
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+    expect(pullUpMockFn).toBeCalledTimes(1)
+    expect(pullUp.watching).toBe(false)
+
+    // register another watch in scrollEnd
+    scroll.trigger(scroll.eventTypes.scrollEnd)
+
+    scroll.movingDirectionY = 1
+    scroll.trigger(scroll.eventTypes.scroll, pos)
+    expect(pullUpMockFn).toBeCalledTimes(2)
+  })
+
+  it('should work well when call autoPullUpLoad()', () => {
+    pullUp.autoPullUpLoad()
+
+    const outOfBoundaryPos = -1
+    expect(scroll.scroller.scrollBehaviorY.setMovingDirection).toBeCalledWith(
+      -1
+    )
+    expect(scroll.scrollTo).toBeCalledWith(0, outOfBoundaryPos, 800)
+    expect(scroll.scrollTo).toBeCalledTimes(1)
+
+    // closePullUp, and autoPullUpLoad will not work
+    pullUp.closePullUp()
+    pullUp.autoPullUpLoad()
+    expect(scroll.scrollTo).toBeCalledTimes(1)
+  })
+
+  it('should call finishPullUp when content DOM changed', () => {
+    scroll.hooks.trigger(scroll.hooks.eventTypes.contentChanged)
+    expect(scroll.scroller.scrollBehaviorY.setMovingDirection).toBeCalled()
+  })
+})