TypeScript hammerjs.Manager类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中hammerjs.Manager类的典型用法代码示例。如果您正苦于以下问题：TypeScript Manager类的具体用法？TypeScript Manager怎么用？TypeScript Manager使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了Manager类的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: CloseSwipeHandler

export default function CloseSwipeHandler(el: HTMLElement, ctrl: SideMenuCtrl) {

  const mc = new Hammer.Manager(el, {
    inputClass: Hammer.TouchInput
  })
  mc.add(new Hammer.Swipe({
    direction: Hammer.DIRECTION_HORIZONTAL,
    threshold: 10,
    velocity: 0.4
  }))

  mc.on('swipeleft', () => {
    ctrl.close()
  })
}

开发者ID:mbensley，项目名称:lichobile，代码行数:15，代码来源:CloseSwipeHandler.ts

示例2: handleMenuOpen

function handleMenuOpen({ dom }: Mithril.DOMNode) {
  const mainEl = dom as HTMLElement
  const mc = new Hammer.Manager(mainEl, {
    inputClass: Hammer.TouchInput
  })
  mc.add(new Hammer.Pan({
    direction: Hammer.DIRECTION_HORIZONTAL,
    threshold: 5
  }))

  const defaultHandlers: HammerHandlers = EdgeOpenHandler(menu.mainMenuCtrl)
  for (const eventName in defaultHandlers) {
    mc.on(eventName, defaultHandlers[eventName])
  }
}

开发者ID:mbensley，项目名称:lichobile，代码行数:15，代码来源:layout.ts

示例3: CloseSlideHandler

export default function CloseSlideHandler(el: HTMLElement, ctrl: SideMenuCtrl) {

  const side = ctrl.side
  const menuWidth = getMenuWidth()

  const state: CloseSlideHandlerState = {
    backDropElement: null,
    startingY: 0,
    isScrolling: false
  }

  const mc = new Hammer.Manager(el, {
    inputClass: Hammer.TouchInput
  })
  mc.add(new Hammer.Pan({
    direction: Hammer.DIRECTION_HORIZONTAL,
    threshold: 10
  }))

  mc.on('panstart', (e: HammerInput) => {
    state.backDropElement = ctrl.getBackdropEl()
    state.startingY = e.center.y
    state.isScrolling = false
  })
  mc.on('panmove', (e: HammerInput) => {
    // if scrolling shutdown everything
    if (!state.isScrolling) {
      // disable scrolling of content when sliding menu
      e.preventDefault()

      // if not already scroll prevented check if scrolling
      if (!e.srcEvent.defaultPrevented) {
        // set scrolling if moved vertically by more than scroll threshold
        state.isScrolling = Math.abs(state.startingY - e.center.y) > 5

        if (state.isScrolling) return
      }

      if (side === 'left') {
        if (e.deltaX < 0 && e.deltaX >= -menuWidth) {
          translateMenu(el, e.deltaX)
          backdropOpacity(state.backDropElement!, ((menuWidth + e.deltaX) / menuWidth * 100) / 100 * BACKDROP_OPACITY)
        }
      } else {
        if (e.deltaX > 0 && e.deltaX <= menuWidth) {
          translateMenu(el, e.deltaX)
          backdropOpacity(state.backDropElement!, ((menuWidth - e.deltaX) / menuWidth * 100) / 100 * BACKDROP_OPACITY)
        }
      }
    }
  })
  mc.on('panend pancancel', (e: HammerInput) => {
    if (!state.isScrolling) {
      state.isScrolling = false
      // we don't want to close menu accidentaly when scrolling thus it is important
      // to check X velocity only
      const velocity = e.velocityX
      if (side === 'left') {
        if (
          velocity <= 0 &&
          (e.deltaX < -(menuWidth - menuWidth * OPEN_AFTER_SLIDE_RATIO) || velocity < -0.4)
        ) {
          ctrl.close()
        }
        else {
          ctrl.open()
        }
      } else {
        if (
          velocity >= 0 &&
          (e.deltaX > (menuWidth - menuWidth * OPEN_AFTER_SLIDE_RATIO) || velocity > 0.4)
        ) {
          ctrl.close()
        }
        else {
          ctrl.open()
        }
      }
    }
  })
}

开发者ID:mbensley，项目名称:lichobile，代码行数:81，代码来源:CloseSlideHandler.ts

示例4: OpenSlideHandler

export default function OpenSlideHandler(
  mainEl: HTMLElement
) {

  const maxSlide = menu.getMenuWidth()

  const state: OpenSlideHandlerState = {
    menuElement: null,
    backDropElement: null,
    canSlide: false
  }

  const mc = new Hammer.Manager(mainEl, {
    inputClass: Hammer.TouchInput
  })
  mc.add(new Hammer.Pan({
    direction: Hammer.DIRECTION_HORIZONTAL,
    threshold: 5
  }))

  mc.on('panstart', (e: HammerInput) => {
    if (
      // TODO: fix this in a better way
      e.target.nodeName === 'PIECE' ||
      e.target.nodeName === 'SQUARE' ||
      e.target.className.startsWith('cg-board manipulable') ||
      e.center.x > MAX_EDGE_CAN_SLIDE
    ) {
      state.canSlide = false
    } else {
      state.menuElement = document.getElementById('side_menu')
      state.backDropElement = document.getElementById('menu-close-overlay')
      if (state.menuElement && state.backDropElement) {
        state.menuElement.style.visibility = 'visible'
        state.backDropElement.style.visibility = 'visible'
        state.canSlide = true
        menu.isSliding(true)
        redraw()
      }
    }
  })
  mc.on('panmove', (e: HammerInput) => {
    if (state.canSlide) {
      // disable scrolling of content when sliding menu
      e.preventDefault()
      const delta = e.deltaX
      if (delta <= maxSlide) {
        menu.translateMenu(state.menuElement!, -maxSlide + delta)
        menu.backdropOpacity(state.backDropElement!, (delta / maxSlide * 100) / 100 / 2)
      }
    }
  })
  mc.on('panend pancancel', (e: HammerInput) => {
    if (state.canSlide) {
      menu.isSliding(false)
      state.canSlide = false
      const velocity = e.velocityX
      const delta = e.deltaX
      if (
        velocity >= 0 &&
        (delta >= maxSlide * menu.OPEN_AFTER_SLIDE_RATIO || velocity > 0.2)
      ) {
        menu.open()
      } else {
        menu.close()
      }
    }
  })
}

开发者ID:sepiropht，项目名称:lichobile，代码行数:69，代码来源:OpenSlideHandler.ts

示例5: CloseSlideHandler

export default function CloseSlideHandler(el: HTMLElement) {

  const maxSlide = menu.getMenuWidth()

  const state: CloseSlideHandlerState = {
    backDropElement: null,
    startingY: 0,
    isScrolling: false
  }

  const mc = new Hammer.Manager(el, {
    inputClass: Hammer.TouchInput
  })
  mc.add(new Hammer.Pan({
    direction: Hammer.DIRECTION_HORIZONTAL,
    threshold: 10
  }))

  mc.on('panstart', (e: HammerInput) => {
    state.backDropElement = document.getElementById('menu-close-overlay')
    state.startingY = e.center.y
    state.isScrolling = false
  })
  mc.on('panmove', (e: HammerInput) => {
    // if scrolling shutdown everything
    if (!state.isScrolling) {
      // disable scrolling of content when sliding menu
      e.preventDefault()

      // if not already scroll prevented check if scrolling
      if (!e.srcEvent.defaultPrevented) {
        // set scrolling if moved vertically by more than scroll threshold
        state.isScrolling = Math.abs(state.startingY - e.center.y) > 5

        if (state.isScrolling) return
      }

      if (e.deltaX < 0 && e.deltaX >= -maxSlide) {
        menu.translateMenu(el, e.deltaX)
        menu.backdropOpacity(state.backDropElement!, ((maxSlide + e.deltaX) / maxSlide * 100) / 100 / 2)
      }
    }
  })
  mc.on('panend pancancel', (e: HammerInput) => {
    if (!state.isScrolling) {
      state.isScrolling = false
      // we don't want to close menu accidentaly when scrolling thus it is important
      // to check X velocity only
      const velocity = e.velocityX
      if (
        velocity <= 0 &&
        (e.deltaX < -(maxSlide - maxSlide * menu.OPEN_AFTER_SLIDE_RATIO) || velocity < -0.4)
      ) {
        menu.close()
      }
      else {
        menu.open()
      }
    }
  })
}

开发者ID:sepiropht，项目名称:lichobile，代码行数:61，代码来源:CloseSlideHandler.ts

注：本文中的hammerjs.Manager类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。