本文整理汇总了TypeScript中hammerjs.Manager.on方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Manager.on方法的具体用法？TypeScript Manager.on怎么用？TypeScript Manager.on使用的例子？那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类hammerjs.Manager的用法示例。
在下文中一共展示了Manager.on方法的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()
})
}示例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])
}
}示例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()
}
}
}
})
}示例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()
}
}
})
}示例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()
}
}
})
}