import ko from "knockout" ; const supportTouchEvents = "ontouchstart" in window ; let xStart = null ; let yStart = null ; let arrowButton = null ; declare global { interface Window { visualViewport ? : { offsetLeft : Readonly < number > ; offsetTop : Readonly < number > ; pageLeft : Readonly < number > ; pageTop : Readonly < number > ; width : Readonly < number > ; height : Readonly < number > ; scale : Readonly < number > ; } ; } } ko . bindingHandlers . swipePages = { init ( element , valueAccessor ) { if ( supportTouchEvents && ko . unwrap ( valueAccessor ( ) ) ) { element . addEventListener ( "touchstart" , event => { if ( event . touches . length > 1 ) { return ; } if ( window . visualViewport && window . visualViewport . scale > 1 ) { return ; } const viewportElement = document . getElementById ( "vivliostyle-viewer-viewport" ) ; if ( viewportElement && viewportElement . scrollWidth > viewportElement . clientWidth ) { return ; } xStart = event . touches [ 0 ] . clientX ; yStart = event . touches [ 0 ] . clientY ; } ) ; element . addEventListener ( "touchmove" , event => { if ( event . touches . length > 1 ) { return ; } if ( xStart !== null && yStart !== null ) { const xDiff = event . touches [ 0 ] . clientX - xStart ; const yDiff = event . touches [ 0 ] . clientY - yStart ; if ( Math . abs ( xDiff ) > Math . abs ( yDiff ) ) { if ( xDiff < 0 ) { arrowButton = document . getElementById ( "vivliostyle-page-navigation-right" ) ; } else { arrowButton = document . getElementById ( "vivliostyle-page-navigation-left" ) ; } } if ( Math . abs ( xDiff ) + Math . abs ( yDiff ) >= 16 ) { if ( arrowButton ) { arrowButton . click ( ) ; ko . utils . toggleDomNodeCssClass ( arrowButton , "active" , true ) ; } xStart = null ; yStart = null ; } } } ) ; element . addEventListener ( "touchend" , ( ) => { if ( arrowButton ) { ko . utils . toggleDomNodeCssClass ( arrowButton , "active" , false ) ; } arrowButton = null ; xStart = null ; yStart = null ; } ) ; } } } ;