morethanwords
4 years ago
18 changed files with 1540 additions and 112 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
import { ripple } from "./ripple"; |
||||
|
||||
const ButtonIcon = (className: string, options: Partial<{noRipple: true, onlyMobile: true}> = {}) => { |
||||
const button = document.createElement('button'); |
||||
button.className = `btn-icon tgico-${className}`; |
||||
if(!options.noRipple) ripple(button); |
||||
if(options.onlyMobile) button.classList.add('only-handhelds'); |
||||
return button; |
||||
}; |
||||
|
||||
export default ButtonIcon; |
||||
@ -0,0 +1,34 @@
@@ -0,0 +1,34 @@
|
||||
import ButtonIcon from "./buttonIcon"; |
||||
import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu"; |
||||
import { openBtnMenu } from "./misc"; |
||||
|
||||
const ButtonMenuToggle = (options: Partial<{noRipple: true, onlyMobile: true}> = {}, direction: 'bottom-left', buttons: ButtonMenuItemOptions[]) => { |
||||
const button = ButtonIcon('more', options); |
||||
const btnMenu = ButtonMenu(buttons); |
||||
btnMenu.classList.add(direction); |
||||
ButtonMenuToggleHandler(button); |
||||
button.append(btnMenu); |
||||
return button; |
||||
}; |
||||
|
||||
const ButtonMenuToggleHandler = (el: HTMLElement) => { |
||||
(el as HTMLElement).addEventListener('click', (e) => { |
||||
//console.log('click pageIm');
|
||||
if(!el.classList.contains('btn-menu-toggle')) return false; |
||||
|
||||
//window.removeEventListener('mousemove', onMouseMove);
|
||||
let openedMenu = el.querySelector('.btn-menu') as HTMLDivElement; |
||||
e.cancelBubble = true; |
||||
//cancelEvent(e);
|
||||
|
||||
if(el.classList.contains('menu-open')) { |
||||
el.classList.remove('menu-open'); |
||||
openedMenu.classList.remove('active'); |
||||
} else { |
||||
openBtnMenu(openedMenu); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
export { ButtonMenuToggleHandler }; |
||||
export default ButtonMenuToggle; |
||||
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
export default class SwipeHandler { |
||||
private xDown: number; |
||||
private yDown: number; |
||||
|
||||
constructor(element: HTMLElement, private onSwipe: (xDiff: number, yDiff: number) => boolean) { |
||||
element.addEventListener('touchstart', this.handleTouchStart, false); |
||||
element.addEventListener('touchmove', this.handleTouchMove, false); |
||||
} |
||||
|
||||
handleTouchStart = (evt: TouchEvent) => { |
||||
// * Fix for seek input
|
||||
if((evt.target as HTMLElement).tagName == 'INPUT') { |
||||
this.xDown = this.yDown = null; |
||||
return; |
||||
} |
||||
|
||||
const firstTouch = evt.touches[0]; |
||||
this.xDown = firstTouch.clientX; |
||||
this.yDown = firstTouch.clientY; |
||||
}; |
||||
|
||||
handleTouchMove = (evt: TouchEvent) => { |
||||
if(this.xDown == null || this.yDown == null) { |
||||
return; |
||||
} |
||||
|
||||
const xUp = evt.touches[0].clientX; |
||||
const yUp = evt.touches[0].clientY; |
||||
|
||||
const xDiff = this.xDown - xUp; |
||||
const yDiff = this.yDown - yUp; |
||||
|
||||
// if(Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
|
||||
// if(xDiff > 0) { /* left swipe */
|
||||
|
||||
// } else { /* right swipe */
|
||||
|
||||
// }
|
||||
// } else {
|
||||
// if(yDiff > 0) { /* up swipe */
|
||||
|
||||
// } else { /* down swipe */
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
/* reset values */ |
||||
if(this.onSwipe(xDiff, yDiff)) { |
||||
this.xDown = null; |
||||
this.yDown = null; |
||||
} |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue