cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/observe-dom/src/index.ts

@@ -0,0 +1,173 @@
+import BScroll from '@better-scroll/core'
+import { getRect, EventEmitter } from '@better-scroll/shared-utils'
+
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    observeDOM?: true
+  }
+}
+export default class ObserveDOM {
+  static pluginName = 'observeDOM'
+  observer: MutationObserver
+  private stopObserver: boolean = false
+  private hooksFn: Array<[EventEmitter, string, Function]>
+  constructor(public scroll: BScroll) {
+    this.init()
+  }
+  init() {
+    this.handleMutationObserver()
+    this.handleHooks()
+  }
+  private handleMutationObserver() {
+    if (typeof MutationObserver !== 'undefined') {
+      let timer = 0
+      this.observer = new MutationObserver((mutations) => {
+        this.mutationObserverHandler(mutations, timer)
+      })
+      this.startObserve(this.observer)
+    } else {
+      this.checkDOMUpdate()
+    }
+  }
+  private handleHooks() {
+    this.hooksFn = []
+    this.registerHooks(
+      this.scroll.hooks,
+      this.scroll.hooks.eventTypes.contentChanged,
+      () => {
+        this.stopObserve()
+        // launch a new mutationObserver
+        this.handleMutationObserver()
+      }
+    )
+    this.registerHooks(
+      this.scroll.hooks,
+      this.scroll.hooks.eventTypes.enable,
+      () => {
+        if (this.stopObserver) {
+          this.handleMutationObserver()
+        }
+      }
+    )
+    this.registerHooks(
+      this.scroll.hooks,
+      this.scroll.hooks.eventTypes.disable,
+      () => {
+        this.stopObserve()
+      }
+    )
+    this.registerHooks(
+      this.scroll.hooks,
+      this.scroll.hooks.eventTypes.destroy,
+      () => {
+        this.destroy()
+      }
+    )
+  }
+  private mutationObserverHandler(mutations: MutationRecord[], timer: number) {
+    if (this.shouldNotRefresh()) {
+      return
+    }
+    let immediateRefresh = false
+    let deferredRefresh = false
+    for (let i = 0; i < mutations.length; i++) {
+      const mutation = mutations[i]
+      if (mutation.type !== 'attributes') {
+        immediateRefresh = true
+        break
+      } else {
+        if (mutation.target !== this.scroll.scroller.content) {
+          deferredRefresh = true
+          break
+        }
+      }
+    }
+
+    if (immediateRefresh) {
+      this.scroll.refresh()
+    } else if (deferredRefresh) {
+      // attributes changes too often
+      clearTimeout(timer)
+      timer = window.setTimeout(() => {
+        if (!this.shouldNotRefresh()) {
+          this.scroll.refresh()
+        }
+      }, 60)
+    }
+  }
+
+  private startObserve(observer: MutationObserver) {
+    const config = {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    }
+    observer.observe(this.scroll.scroller.content, config)
+  }
+
+  private shouldNotRefresh() {
+    const { scroller } = this.scroll
+    const { scrollBehaviorX, scrollBehaviorY } = scroller
+    let outsideBoundaries =
+      scrollBehaviorX.currentPos > scrollBehaviorX.minScrollPos ||
+      scrollBehaviorX.currentPos < scrollBehaviorX.maxScrollPos ||
+      scrollBehaviorY.currentPos > scrollBehaviorY.minScrollPos ||
+      scrollBehaviorY.currentPos < scrollBehaviorY.maxScrollPos
+    return scroller.animater.pending || outsideBoundaries
+  }
+
+  private checkDOMUpdate() {
+    const content = this.scroll.scroller.content
+    let contentRect = getRect(content)
+    let oldWidth = contentRect.width
+    let oldHeight = contentRect.height
+
+    const check = () => {
+      if (this.stopObserver) {
+        return
+      }
+      contentRect = getRect(content)
+      let newWidth = contentRect.width
+      let newHeight = contentRect.height
+
+      if (oldWidth !== newWidth || oldHeight !== newHeight) {
+        this.scroll.refresh()
+      }
+      oldWidth = newWidth
+      oldHeight = newHeight
+
+      next()
+    }
+
+    const next = () => {
+      setTimeout(() => {
+        check()
+      }, 1000)
+    }
+
+    next()
+  }
+
+  private registerHooks(hooks: EventEmitter, name: string, handler: Function) {
+    hooks.on(name, handler, this)
+    this.hooksFn.push([hooks, name, handler])
+  }
+
+  private stopObserve() {
+    this.stopObserver = true
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  destroy() {
+    this.stopObserve()
+    this.hooksFn.forEach((item) => {
+      const hooks = item[0]
+      const hooksName = item[1]
+      const handlerFn = item[2]
+      hooks.off(hooksName, handlerFn)
+    })
+    this.hooksFn.length = 0
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/observe-image/README.md

@@ -0,0 +1,18 @@
+# @better-scroll/observe-image
+
+[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/packages/observe-image/README_zh-CN.md)
+
+when detecting images is loaded or failed to load, auto refresh BetterScroll's size.
+
+
+## Usage
+
+```js
+import BScroll from '@better-scroll/core'
+import ObserveImage from '@better-scroll/observe-image'
+BScroll.use(ObserveImage)
+
+const bs = new BScroll('.wrapper', {
+  observeImage: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/observe-image/README_zh-CN.md

@@ -0,0 +1,15 @@
+# @better-scroll/observe-image
+
+当探测到 BetterScroll content DOM 的子元素是 image 标签，并且加载成功或者失败的时候，自动调用 `refresh()` 方法重新计算可滚动的高度或者宽度，适用于当滚动区域含有高度或者宽度不固定的场景。
+
+## 使用
+
+```js
+import BScroll from '@better-scroll/core'
+import ObserveImage from '@better-scroll/observe-image'
+BScroll.use(ObserveImage)
+
+const bs = new BScroll('.wrapper', {
+  observeImage: true
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/observe-image/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@better-scroll/observe-image",
+  "version": "2.5.1",
+  "description": "Observe image loading for BetterScroll",
+  "author": "theniceangel <theniceangel@163.com>",
+  "homepage": "https://github.com/ustbhuangyi/better-scroll/tree/master/packages/observe-image#readme",
+  "license": "MIT",
+  "keywords": [
+    "scroll",
+    "iscroll",
+    "javascript",
+    "typescript",
+    "ios",
+    "umage"
+  ],
+  "main": "dist/observe-image.min.js",
+  "module": "dist/observe-image.esm.js",
+  "typings": "dist/types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ustbhuangyi/better-scroll.git",
+    "directory": "packages/observe-image"
+  },
+  "bugs": {
+    "url": "https://github.com/ustbhuangyi/better-scroll/issues"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.5.1"
+  }
+}

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

@@ -0,0 +1,50 @@
+import BScroll from '@better-scroll/core'
+import ObserveImage from '../index'
+import { createEvent } from '@better-scroll/core/src/__tests__/__utils__/event'
+
+jest.mock('@better-scroll/core')
+
+const createObserveImageElements = () => {
+  const wrapper = document.createElement('div')
+  const content = document.createElement('div')
+  wrapper.appendChild(content)
+  return { wrapper, content }
+}
+
+describe('observe image', () => {
+  const { wrapper, content } = createObserveImageElements()
+  let scroll: BScroll
+  let observeImage: ObserveImage
+
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+
+  beforeEach(() => {
+    scroll = new BScroll(wrapper, {})
+    observeImage = new ObserveImage(scroll)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    jest.clearAllTimers()
+  })
+
+  it('should capture image load or error event', () => {
+    let img = document.createElement('img')
+    let loadEvent = createEvent('Event', 'load')
+    content.appendChild(img)
+    img.dispatchEvent(loadEvent)
+    jest.advanceTimersByTime(151)
+    expect(scroll.refresh).toBeCalled()
+  })
+
+  it('should trigger bs.refresh in a tick when debounceTime is 0', () => {
+    observeImage.options.debounceTime = 0
+    let img = document.createElement('img')
+    let loadEvent = createEvent('Event', 'load')
+    content.appendChild(img)
+    img.dispatchEvent(loadEvent)
+    expect(scroll.refresh).toBeCalled()
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/observe-image/src/index.ts

@@ -0,0 +1,76 @@
+import BScroll from '@better-scroll/core'
+import { EventRegister, extend } from '@better-scroll/shared-utils'
+
+export type ObserveImageOptions = Partial<ObserveImageConfig> | true
+
+export interface ObserveImageConfig {
+  debounceTime: number
+}
+
+declare module '@better-scroll/core' {
+  interface CustomOptions {
+    observeImage?: ObserveImageOptions
+  }
+}
+
+const isImageTag = (el: HTMLElement) => {
+  return el.tagName.toLowerCase() === 'img'
+}
+
+export default class ObserveImage {
+  static pluginName = 'observeImage'
+  imageLoadEventRegister: EventRegister
+  imageErrorEventRegister: EventRegister
+  refreshTimer: number = 0
+  options: ObserveImageConfig
+  constructor(public scroll: BScroll) {
+    this.init()
+  }
+  init() {
+    this.handleOptions(this.scroll.options.observeImage)
+    this.bindEventsToWrapper()
+  }
+
+  private handleOptions(userOptions: ObserveImageOptions = {}) {
+    userOptions = (userOptions === true ? {} : userOptions) as Partial<
+      ObserveImageConfig
+    >
+    const defaultOptions: ObserveImageConfig = {
+      debounceTime: 100, // ms
+    }
+    this.options = extend(defaultOptions, userOptions)
+  }
+
+  private bindEventsToWrapper() {
+    const wrapper = this.scroll.scroller.wrapper
+    this.imageLoadEventRegister = new EventRegister(wrapper, [
+      {
+        name: 'load',
+        handler: this.load.bind(this),
+        capture: true,
+      },
+    ])
+    this.imageErrorEventRegister = new EventRegister(wrapper, [
+      {
+        name: 'error',
+        handler: this.load.bind(this),
+        capture: true,
+      },
+    ])
+  }
+
+  private load(e: Event) {
+    const target = e.target as HTMLElement
+    const debounceTime = this.options.debounceTime
+    if (target && isImageTag(target)) {
+      if (debounceTime === 0) {
+        this.scroll.refresh()
+      } else {
+        clearTimeout(this.refreshTimer)
+        this.refreshTimer = window.setTimeout(() => {
+          this.scroll.refresh()
+        }, this.options.debounceTime)
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+# @better-scroll/pull-down
+
+为 BetterScroll 注入下拉刷新的能力。
+
+## 使用
+
+```js
+import BScroll from '@better-scroll/core'
+import Pulldown from '@better-scroll/pull-down'
+BScroll.use(Pulldown)
+
+const bs = new BScroll('.wrapper', {
+  pullDownRefresh: true
+})
+```

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

@@ -0,0 +1,37 @@
+{
+  "name": "@better-scroll/pull-down",
+  "version": "2.5.1",
+  "description": "pull down to refresh, behave likes App list refreshing",
+  "author": {
+    "name": "jizhi",
+    "email": "theniceangel@163.com"
+  },
+  "main": "dist/pull-down.min.js",
+  "module": "dist/pull-down.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-down"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/ustbhuangyi/better-scroll.git",
+    "directory": "packages/pull-down"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.5.1"
+  },
+  "gitHead": "f441227b6137d44ba0b44b97ed4cd49de9386130"
+}

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

@@ -0,0 +1,240 @@
+import BScroll from '@better-scroll/core'
+import { Probe } from '@better-scroll/shared-utils'
+import { ease } from '@better-scroll/shared-utils/src/ease'
+jest.mock('@better-scroll/core')
+
+import PullDown from '../index'
+
+const createPullDownElements = () => {
+  const wrapper = document.createElement('div')
+  const content = document.createElement('div')
+  wrapper.appendChild(content)
+  return { wrapper }
+}
+
+describe('pull down tests', () => {
+  let scroll: BScroll
+  let pullDown: PullDown
+  beforeEach(() => {
+    // create DOM
+    const { wrapper } = createPullDownElements()
+    scroll = new BScroll(wrapper, {})
+    pullDown = new PullDown(scroll)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should proxy properties to BScroll instance', () => {
+    new PullDown(scroll)
+
+    expect(scroll.proxy).toBeCalledWith([
+      {
+        key: 'finishPullDown',
+        sourceKey: 'plugins.pullDownRefresh.finishPullDown',
+      },
+      {
+        key: 'openPullDown',
+        sourceKey: 'plugins.pullDownRefresh.openPullDown',
+      },
+      {
+        key: 'closePullDown',
+        sourceKey: 'plugins.pullDownRefresh.closePullDown',
+      },
+      {
+        key: 'autoPullDownRefresh',
+        sourceKey: 'plugins.pullDownRefresh.autoPullDownRefresh',
+      },
+    ])
+  })
+
+  it('should handle default options and user options', () => {
+    // case 1
+    scroll.options.pullDownRefresh = true
+    pullDown = new PullDown(scroll)
+
+    expect(pullDown.options).toMatchObject({
+      threshold: 90,
+      stop: 40,
+    })
+
+    // case 2
+    scroll.options.pullDownRefresh = {
+      threshold: 100,
+      stop: 50,
+    }
+    pullDown = new PullDown(scroll)
+
+    expect(pullDown.options).toMatchObject({
+      threshold: 100,
+      stop: 50,
+    })
+
+    expect(scroll.options.probeType).toBe(Probe.Realtime)
+  })
+
+  it('should cache originalMinScrollY', () => {
+    expect(pullDown.cachedOriginanMinScrollY).toBe(0)
+    expect(pullDown.currentMinScrollY).toBe(0)
+  })
+
+  it('should modify minScrollY when necessary', () => {
+    pullDown.currentMinScrollY = 50
+    const scrollBehaviorY = scroll.scroller.scrollBehaviorY
+    let boundary = {
+      minScrollPos: 0,
+      maxScrollPos: 20,
+    }
+    scrollBehaviorY.hooks.trigger(
+      scrollBehaviorY.hooks.eventTypes.computeBoundary,
+      boundary
+    )
+    expect(boundary).toMatchObject({
+      minScrollPos: 50,
+      maxScrollPos: -1,
+    })
+  })
+
+  it('should checkPullDown', () => {
+    const mockFn = jest.fn()
+    scroll.on(scroll.eventTypes.pullingDown, mockFn)
+
+    scroll.trigger(scroll.eventTypes.scrollStart)
+    // simulate pullUp action
+    scroll.y = -100
+    scroll.scroller.hooks.trigger(scroll.scroller.hooks.eventTypes.end)
+    expect(mockFn).toHaveBeenCalledTimes(0)
+
+    // simulate pullDown action
+    scroll.y = 100
+
+    scroll.scroller.hooks.trigger(scroll.scroller.hooks.eventTypes.end)
+    expect(mockFn).toHaveBeenCalledTimes(1)
+  })
+
+  it('should checkLocationOfThresholdBoundary', () => {
+    const enterThresholdFn = jest.fn()
+    const leaveThresholdFn = jest.fn()
+    scroll.on(scroll.eventTypes.enterThreshold, enterThresholdFn)
+    scroll.on(scroll.eventTypes.leaveThreshold, leaveThresholdFn)
+    scroll.trigger(scroll.eventTypes.scrollStart)
+
+    // enter threshold boundary
+    scroll.y = 20
+    scroll.trigger(scroll.eventTypes.scroll)
+
+    // leave threshold boundary
+    scroll.y = 100
+    scroll.trigger(scroll.eventTypes.scroll)
+
+    expect(enterThresholdFn).toHaveBeenCalledTimes(1)
+    expect(leaveThresholdFn).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pullingDown once', () => {
+    const mockFn = jest.fn()
+    scroll.on(scroll.eventTypes.pullingDown, mockFn)
+    // when
+    scroll.y = 100
+    scroll.trigger(scroll.eventTypes.scrollStart)
+    scroll.scroller.hooks.trigger('end')
+    scroll.scroller.hooks.trigger('end')
+    // then
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  it('should stop at correct position', () => {
+    // when
+    scroll.y = 100
+    scroll.scroller.hooks.trigger('end')
+    expect(scroll.scrollTo).toHaveBeenCalledWith(
+      0,
+      40,
+      scroll.options.bounceTime,
+      ease.bounce
+    )
+  })
+
+  it('should work well when call finishPullDown()', () => {
+    pullDown.pulling = 2
+    pullDown.finishPullDown()
+
+    expect(pullDown.pulling).toBe(0)
+    expect(scroll.scroller.scrollBehaviorY.computeBoundary).toBeCalled()
+    expect(scroll.resetPosition).toBeCalled()
+  })
+
+  it('should work well when call closePullDown()', () => {
+    pullDown.closePullDown()
+
+    expect(pullDown.watching).toBe(false)
+    expect(scroll.scroller.hooks.events.end.length).toBe(0)
+  })
+
+  it('should work well when call openPullDown()', () => {
+    pullDown.closePullDown()
+
+    expect(pullDown.watching).toBe(false)
+    expect(pullDown.options).toMatchObject({
+      threshold: 90,
+      stop: 40,
+    })
+
+    // modify options
+    pullDown.openPullDown({
+      threshold: 200,
+      stop: 80,
+    })
+
+    expect(pullDown.options).toMatchObject({
+      threshold: 200,
+      stop: 80,
+    })
+    expect(pullDown.watching).toBe(true)
+  })
+
+  it('should work well when call autoPullDownRefresh()', () => {
+    const mockFn = jest.fn()
+    scroll.on(scroll.eventTypes.pullingDown, mockFn)
+    pullDown.autoPullDownRefresh()
+    expect(pullDown.watching).toBe(true)
+    expect(pullDown.currentMinScrollY).toBe(40)
+    expect(scroll.scroller.scrollBehaviorY.computeBoundary).toBeCalled()
+    expect(scroll.scrollTo).toHaveBeenCalledTimes(2)
+    expect(scroll.scrollTo).toHaveBeenLastCalledWith(
+      0,
+      40,
+      scroll.options.bounceTime,
+      ease.bounce
+    )
+
+    // closePullDown, and autoPullDownRefresh will not work
+    pullDown.closePullDown()
+    pullDown.autoPullDownRefresh()
+    expect(scroll.scrollTo).toBeCalledTimes(2)
+  })
+
+  it('should call finishPullDown when content DOM changed', () => {
+    // simulate pullDown action
+    pullDown.pulling = 2
+
+    scroll.hooks.trigger(scroll.hooks.eventTypes.contentChanged)
+    expect(scroll.scroller.scrollBehaviorY.computeBoundary).toBeCalled()
+    expect(scroll.resetPosition).toBeCalledWith(800, ease.bounce)
+  })
+
+  it('should work well when integrating with mousewheel', () => {
+    const options = {} as any
+    scroll.trigger(scroll.eventTypes.alterOptions, options)
+
+    expect(options.discreteTime).toBe(300)
+    expect(options.easeTime).toBe(350)
+
+    const mockFn = jest.fn()
+    scroll.scroller.hooks.on(scroll.scroller.hooks.eventTypes.end, mockFn)
+
+    scroll.trigger(scroll.eventTypes.mousewheelEnd)
+    expect(mockFn).toBeCalled()
+  })
+})