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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
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