cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/slide/src/SlidePages.ts

@@ -0,0 +1,322 @@
+import { between, extend, warn } from '@better-scroll/shared-utils'
+import BScroll from '@better-scroll/core'
+import { SlideConfig } from './index'
+import PagesMatrix, { PageStats } from './PagesMatrix'
+import { BASE_PAGE } from './constants'
+
+export interface PageIndex {
+  pageX: number
+  pageY: number
+}
+export interface Position {
+  x: number
+  y: number
+}
+
+export type Page = PageIndex & Position
+
+const enum Direction {
+  Positive = 'positive',
+  Negative = 'negative',
+}
+
+export default class SlidePages {
+  loopX: boolean
+  loopY: boolean
+  slideX: boolean = false
+  slideY: boolean = false
+  wannaLoop: boolean
+  pagesMatrix: PagesMatrix
+  currentPage: Page
+  constructor(public scroll: BScroll, private slideOptions: SlideConfig) {
+    this.currentPage = extend({}, BASE_PAGE)
+  }
+
+  refresh() {
+    this.pagesMatrix = new PagesMatrix(this.scroll)
+    this.checkSlideLoop()
+    this.currentPage = this.getAdjustedCurrentPage()
+  }
+
+  getAdjustedCurrentPage(): Page {
+    let { pageX, pageY } = this.currentPage
+    // page index should be handled
+    // because page counts may reduce
+    pageX = Math.min(pageX, this.pagesMatrix.pageLengthOfX - 1)
+    pageY = Math.min(pageY, this.pagesMatrix.pageLengthOfY - 1)
+    // loop scene should also be respected
+    // because clonedNode will cause pageLength increasing
+    if (this.loopX) {
+      pageX = Math.min(pageX, this.pagesMatrix.pageLengthOfX - 2)
+    }
+    if (this.loopY) {
+      pageY = Math.min(pageY, this.pagesMatrix.pageLengthOfY - 2)
+    }
+    const { x, y } = this.pagesMatrix.getPageStats(pageX, pageY)
+    return { pageX, pageY, x, y }
+  }
+
+  setCurrentPage(newPage: Page) {
+    this.currentPage = newPage
+  }
+
+  getInternalPage(pageX: number, pageY: number): Page {
+    if (pageX >= this.pagesMatrix.pageLengthOfX) {
+      pageX = this.pagesMatrix.pageLengthOfX - 1
+    } else if (pageX < 0) {
+      pageX = 0
+    }
+
+    if (pageY >= this.pagesMatrix.pageLengthOfY) {
+      pageY = this.pagesMatrix.pageLengthOfY - 1
+    } else if (pageY < 0) {
+      pageY = 0
+    }
+
+    let { x, y } = this.pagesMatrix.getPageStats(pageX, pageY)
+
+    return {
+      pageX,
+      pageY,
+      x,
+      y,
+    }
+  }
+
+  getInitialPage(
+    showFirstPage: boolean = false,
+    firstInitialised: boolean = false
+  ): Page {
+    const { startPageXIndex, startPageYIndex } = this.slideOptions
+    let firstPageX = this.loopX ? 1 : 0
+    let firstPageY = this.loopY ? 1 : 0
+
+    let pageX = showFirstPage ? firstPageX : this.currentPage.pageX
+    let pageY = showFirstPage ? firstPageY : this.currentPage.pageY
+
+    if (firstInitialised) {
+      pageX = this.loopX ? startPageXIndex + 1 : startPageXIndex
+      pageY = this.loopY ? startPageYIndex + 1 : startPageYIndex
+    } else {
+      pageX = showFirstPage ? firstPageX : this.currentPage.pageX
+      pageY = showFirstPage ? firstPageY : this.currentPage.pageY
+    }
+
+    const { x, y } = this.pagesMatrix.getPageStats(pageX, pageY)
+
+    return {
+      pageX,
+      pageY,
+      x,
+      y,
+    }
+  }
+
+  getExposedPage(page: Page): Page {
+    let exposedPage = extend({}, page)
+    // only pageX or pageY need fix
+    if (this.loopX) {
+      exposedPage.pageX = this.fixedPage(
+        exposedPage.pageX,
+        this.pagesMatrix.pageLengthOfX - 2
+      )
+    }
+    if (this.loopY) {
+      exposedPage.pageY = this.fixedPage(
+        exposedPage.pageY,
+        this.pagesMatrix.pageLengthOfY - 2
+      )
+    }
+    return exposedPage
+  }
+
+  getExposedPageByPageIndex(pageIndexX: number, pageIndexY: number): Page {
+    const page = {
+      pageX: pageIndexX,
+      pageY: pageIndexY,
+    }
+    if (this.loopX) {
+      page.pageX = pageIndexX + 1
+    }
+    if (this.loopY) {
+      page.pageY = pageIndexY + 1
+    }
+    const { x, y } = this.pagesMatrix.getPageStats(page.pageX, page.pageY)
+    return {
+      x,
+      y,
+      pageX: pageIndexX,
+      pageY: pageIndexY,
+    }
+  }
+
+  getWillChangedPage(page: Page): Page {
+    page = extend({}, page)
+    // Page need fix
+    if (this.loopX) {
+      page.pageX = this.fixedPage(
+        page.pageX,
+        this.pagesMatrix.pageLengthOfX - 2
+      )
+      page.x = this.pagesMatrix.getPageStats(page.pageX + 1, 0).x
+    }
+    if (this.loopY) {
+      page.pageY = this.fixedPage(
+        page.pageY,
+        this.pagesMatrix.pageLengthOfY - 2
+      )
+      page.y = this.pagesMatrix.getPageStats(0, page.pageY + 1).y
+    }
+    return page
+  }
+
+  private fixedPage(page: number, realPageLen: number): number {
+    const pageIndex = []
+    for (let i = 0; i < realPageLen; i++) {
+      pageIndex.push(i)
+    }
+    pageIndex.unshift(realPageLen - 1)
+    pageIndex.push(0)
+    return pageIndex[page]
+  }
+
+  getPageStats(): PageStats {
+    return this.pagesMatrix.getPageStats(
+      this.currentPage.pageX,
+      this.currentPage.pageY
+    )
+  }
+
+  getValidPageIndex(x: number, y: number): PageIndex {
+    let lastX = this.pagesMatrix.pageLengthOfX - 1
+    let lastY = this.pagesMatrix.pageLengthOfY - 1
+    let firstX = 0
+    let firstY = 0
+    if (this.loopX) {
+      x += 1
+      firstX = firstX + 1
+      lastX = lastX - 1
+    }
+    if (this.loopY) {
+      y += 1
+      firstY = firstY + 1
+      lastY = lastY - 1
+    }
+    x = between(x, firstX, lastX)
+    y = between(y, firstY, lastY)
+
+    return {
+      pageX: x,
+      pageY: y,
+    }
+  }
+
+  nextPageIndex(): PageIndex {
+    return this.getPageIndexByDirection(Direction.Positive)
+  }
+
+  prevPageIndex(): PageIndex {
+    return this.getPageIndexByDirection(Direction.Negative)
+  }
+
+  getNearestPage(x: number, y: number): Page {
+    const pageIndex = this.pagesMatrix.getNearestPageIndex(x, y)
+    let { pageX, pageY } = pageIndex
+
+    let newX = this.pagesMatrix.getPageStats(pageX, 0).x
+    let newY = this.pagesMatrix.getPageStats(0, pageY).y
+
+    return {
+      x: newX,
+      y: newY,
+      pageX,
+      pageY,
+    }
+  }
+
+  getPageByDirection(page: Page, directionX: number, directionY: number): Page {
+    let { pageX, pageY } = page
+    if (pageX === this.currentPage.pageX) {
+      pageX = between(pageX + directionX, 0, this.pagesMatrix.pageLengthOfX - 1)
+    }
+    if (pageY === this.currentPage.pageY) {
+      pageY = between(pageY + directionY, 0, this.pagesMatrix.pageLengthOfY - 1)
+    }
+
+    const x = this.pagesMatrix.getPageStats(pageX, 0).x
+    const y = this.pagesMatrix.getPageStats(0, pageY).y
+
+    return {
+      x,
+      y,
+      pageX,
+      pageY,
+    }
+  }
+
+  resetLoopPage(): PageIndex | undefined {
+    if (this.loopX) {
+      if (this.currentPage.pageX === 0) {
+        return {
+          pageX: this.pagesMatrix.pageLengthOfX - 2,
+          pageY: this.currentPage.pageY,
+        }
+      }
+      if (this.currentPage.pageX === this.pagesMatrix.pageLengthOfX - 1) {
+        return {
+          pageX: 1,
+          pageY: this.currentPage.pageY,
+        }
+      }
+    }
+    if (this.loopY) {
+      if (this.currentPage.pageY === 0) {
+        return {
+          pageX: this.currentPage.pageX,
+          pageY: this.pagesMatrix.pageLengthOfY - 2,
+        }
+      }
+      if (this.currentPage.pageY === this.pagesMatrix.pageLengthOfY - 1) {
+        return {
+          pageX: this.currentPage.pageX,
+          pageY: 1,
+        }
+      }
+    }
+  }
+
+  private getPageIndexByDirection(direction: Direction): PageIndex {
+    let x = this.currentPage.pageX
+    let y = this.currentPage.pageY
+    if (this.slideX) {
+      x = direction === Direction.Negative ? x - 1 : x + 1
+    }
+    if (this.slideY) {
+      y = direction === Direction.Negative ? y - 1 : y + 1
+    }
+    return {
+      pageX: x,
+      pageY: y,
+    }
+  }
+
+  private checkSlideLoop() {
+    this.wannaLoop = this.slideOptions.loop
+    if (this.pagesMatrix.pageLengthOfX > 1) {
+      this.slideX = true
+    } else {
+      this.slideX = false
+    }
+    if (this.pagesMatrix.pages[0] && this.pagesMatrix.pageLengthOfY > 1) {
+      this.slideY = true
+    } else {
+      this.slideY = false
+    }
+    this.loopX = this.wannaLoop && this.slideX
+    this.loopY = this.wannaLoop && this.slideY
+
+    if (this.slideX && this.slideY) {
+      warn('slide does not support two direction at the same time.')
+    }
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/slide/src/__mocks__/PagesMatrix.ts

@@ -0,0 +1,98 @@
+const PagesMatrix = jest.fn().mockImplementation((scroll) => {
+  const loopX = scroll.options.scrollX
+  const loopY = scroll.options.scrollY
+  const pages = loopX
+    ? [
+        [
+          {
+            pageX: 0,
+            pageY: 0,
+            x: 0,
+            y: 0,
+          },
+        ],
+        [
+          {
+            pageX: 1,
+            pageY: 0,
+            x: 20,
+            y: 0,
+          },
+        ],
+        [
+          {
+            pageX: 2,
+            pageY: 0,
+            x: 40,
+            y: 0,
+          },
+        ],
+        [
+          {
+            pageX: 3,
+            pageY: 0,
+            x: 60,
+            y: 0,
+          },
+        ],
+      ]
+    : loopY
+    ? [
+        [
+          {
+            pageX: 0,
+            pageY: 0,
+            x: 0,
+            y: 0,
+          },
+          {
+            pageX: 0,
+            pageY: 1,
+            x: 0,
+            y: 20,
+          },
+          {
+            pageX: 0,
+            pageY: 2,
+            x: 0,
+            y: 40,
+          },
+          {
+            pageX: 0,
+            pageY: 3,
+            x: 0,
+            y: 60,
+          },
+        ],
+      ]
+    : []
+  return {
+    pages,
+    pageLengthOfX: loopX ? 4 : 1,
+    pageLengthOfY: loopY ? 4 : 1,
+    wrapperWidth: 0,
+    wrapperHeight: 0,
+    scrollerWidth: 0,
+    scrollerHeight: 0,
+    init: jest.fn(),
+    getPageStats: jest.fn().mockImplementation(() => {
+      return {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        cx: 50, // center position of every page
+        cy: 50,
+      }
+    }),
+    getNearestPageIndex: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 1,
+        pageY: 0,
+      }
+    }),
+    buildPagesMatrix: jest.fn(),
+  }
+})
+
+export default PagesMatrix

package/better-scroll-dev/better-scroll-dev/packages/slide/src/__mocks__/SlidePages.ts

@@ -0,0 +1,117 @@
+import PagesMatrix from '../PagesMatrix'
+jest.mock('../PagesMatrix')
+
+const SlidePage = jest.fn().mockImplementation(() => {
+  return {
+    currentPage: {
+      pageX: 0,
+      pageY: 0,
+      x: 0,
+      y: 0,
+    },
+    loopX: true,
+    loopY: false,
+    slideX: true,
+    slideY: false,
+    needLoop: true,
+    pagesMatrix: new PagesMatrix({
+      options: {},
+    } as any),
+    refresh: jest.fn(),
+    checkSlideLoop: jest.fn(),
+    setCurrentPage: jest.fn(),
+    getInternalPage: jest.fn().mockImplementation((pageX, pageY) => {
+      return {
+        pageX,
+        pageY,
+        x: 20,
+        y: 20,
+      }
+    }),
+    getExposedPageByPageIndex: jest.fn(),
+    getInitialPage: jest.fn().mockImplementation((flag, firstInit) => {
+      if (firstInit) {
+        return {
+          pageX: 1,
+          pageY: 0,
+          x: 10,
+          y: 10,
+        }
+      }
+      return {
+        pageX: 0,
+        pageY: 0,
+        x: 10,
+        y: 10,
+      }
+    }),
+    getExposedPage: jest.fn().mockImplementation((page) => {
+      return (
+        page || {
+          pageX: 0,
+          pageY: 0,
+          x: 0,
+          y: 0,
+        }
+      )
+    }),
+    getWillChangedPage: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 0,
+        pageY: 0,
+        x: 0,
+        y: 0,
+      }
+    }),
+    fixedPage: jest.fn(),
+    getPageStats: jest.fn().mockImplementation(() => {
+      return {
+        width: 0,
+        height: 0,
+      }
+    }),
+    getValidPageIndex: jest.fn().mockImplementation((pageX, pageY) => {
+      return {
+        pageX,
+        pageY,
+      }
+    }),
+    nextPageIndex: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 0,
+        pageY: 0,
+      }
+    }),
+    prevPageIndex: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 0,
+        pageY: 0,
+      }
+    }),
+    getNearestPage: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 0,
+        pageY: 0,
+        x: 0,
+        y: 0,
+      }
+    }),
+    resetLoopPage: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 0,
+        pageY: 0,
+      }
+    }),
+    getPageIndexByDirection: jest.fn(),
+    getPageByDirection: jest.fn().mockImplementation(() => {
+      return {
+        pageX: 0,
+        pageY: 0,
+        x: 0,
+        y: 0,
+      }
+    }),
+  }
+})
+
+export default SlidePage

package/better-scroll-dev/better-scroll-dev/packages/slide/src/__tests__/PagesMatrix.spec.ts

@@ -0,0 +1,151 @@
+import PagesMatrix from '../PagesMatrix'
+import BScroll from '@better-scroll/core'
+import { DEFAULT_PAGE_STATS } from '../constants'
+
+const createSlideElements = () => {
+  const wrapper = document.createElement('div')
+  const content = document.createElement('div')
+  for (let i = 0; i < 3; i++) {
+    content.appendChild(document.createElement('p'))
+  }
+  wrapper.appendChild(content)
+  return { wrapper }
+}
+
+describe('slide test for PagesMatrix class', () => {
+  let pageMatrix: PagesMatrix
+  let scroll: BScroll
+
+  beforeEach(() => {
+    const { wrapper } = createSlideElements()
+    scroll = new BScroll(wrapper, {})
+    scroll.scroller.scrollBehaviorX.wrapperSize = 100
+    scroll.scroller.scrollBehaviorX.contentSize = 400
+    scroll.scroller.scrollBehaviorX.maxScrollPos = -300
+    scroll.scroller.scrollBehaviorY.wrapperSize = 100
+    scroll.scroller.scrollBehaviorY.contentSize = 100
+    scroll.scroller.scrollBehaviorY.maxScrollPos = 0
+    pageMatrix = new PagesMatrix(scroll)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should create 4 * 1 matrix page in X direction', () => {
+    expect(pageMatrix.pages.length).toBe(4)
+    expect(pageMatrix.pages[0].length).toBe(1)
+    expect(pageMatrix.pageLengthOfX).toBe(4)
+    expect(pageMatrix.pageLengthOfY).toBe(1)
+
+    const pageIndex1 = pageMatrix.getNearestPageIndex(0, 0)
+
+    expect(pageIndex1).toMatchObject({
+      pageX: 0,
+      pageY: 0,
+    })
+
+    const pageIndex2 = pageMatrix.getNearestPageIndex(-175, 0)
+
+    expect(pageIndex2).toMatchObject({
+      pageX: 2,
+      pageY: 0,
+    })
+  })
+
+  it('should create 1 * 4 matrix page in Y direction', () => {
+    const { wrapper } = createSlideElements()
+    scroll = new BScroll(wrapper, {})
+    scroll.scroller.scrollBehaviorX.wrapperSize = 100
+    scroll.scroller.scrollBehaviorX.contentSize = 100
+    scroll.scroller.scrollBehaviorX.maxScrollPos = 0
+    scroll.scroller.scrollBehaviorY.wrapperSize = 100
+    scroll.scroller.scrollBehaviorY.contentSize = 400
+    scroll.scroller.scrollBehaviorY.maxScrollPos = -300
+    pageMatrix = new PagesMatrix(scroll)
+
+    expect(pageMatrix.pages.length).toBe(1)
+    expect(pageMatrix.pages[0].length).toBe(4)
+    expect(pageMatrix.pageLengthOfX).toBe(1)
+    expect(pageMatrix.pageLengthOfY).toBe(4)
+
+    const pageIndex1 = pageMatrix.getNearestPageIndex(0, 0)
+
+    expect(pageIndex1).toMatchObject({
+      pageX: 0,
+      pageY: 0,
+    })
+
+    const pageIndex2 = pageMatrix.getNearestPageIndex(0, -175)
+
+    expect(pageIndex2).toMatchObject({
+      pageX: 0,
+      pageY: 2,
+    })
+  })
+
+  it('should work well with getPageStats()', () => {
+    const pageStats1 = pageMatrix.getPageStats(1, 0)
+
+    expect(pageStats1).toMatchObject({
+      x: -100,
+      y: 0,
+      width: 100,
+      height: 100,
+      cx: -150,
+      cy: -50,
+    })
+
+    const pageStats2 = pageMatrix.getPageStats(2, 0)
+    expect(pageStats2).toMatchObject({
+      x: -200,
+      y: 0,
+      width: 100,
+      height: 100,
+      cx: -250,
+      cy: -50,
+    })
+  })
+
+  it('The pages calculation fails to access PageStats should return the default value', () => {
+    const { wrapper } = createSlideElements()
+    scroll = new BScroll(wrapper, {})
+    scroll.scroller.scrollBehaviorX.wrapperSize = 100
+    scroll.scroller.scrollBehaviorX.contentSize = 0
+    scroll.scroller.scrollBehaviorX.maxScrollPos = 100
+    scroll.scroller.scrollBehaviorY.wrapperSize = 100
+    scroll.scroller.scrollBehaviorY.contentSize = 0
+    scroll.scroller.scrollBehaviorY.maxScrollPos = 100
+    pageMatrix = new PagesMatrix(scroll)
+
+    expect(pageMatrix.pages.length).toBe(0)
+    expect(pageMatrix.pageLengthOfX).toBe(0)
+    expect(pageMatrix.pageLengthOfY).toBe(0)
+
+    const pagesIdx: [number, number][] = [
+      [1, 0],
+      [-1, 0],
+      [1, 1],
+      [-1, -1],
+      [0, 1],
+      [0, -1],
+    ]
+    for (const idx of pagesIdx) {
+      expect(pageMatrix.getPageStats(idx[0], idx[1])).toMatchObject(
+        DEFAULT_PAGE_STATS
+      )
+    }
+
+    const pagesLoc: [number, number][] = [
+      [-100, 0],
+      [0, -100],
+    ]
+
+    for (const loc of pagesLoc) {
+      expect(pageMatrix.getNearestPageIndex(loc[0], loc[1])).toMatchObject({
+        pageX: 0,
+        pageY: 0,
+      })
+    }
+  })
+})