import * as SpriteSpin from '../core' ; import * as Utils from '../utils' ; ( ( ) => { const NAME = 'panorama' ; interface PanoramaState { scale : number ; } function getState ( data ) { return SpriteSpin . getPluginState ( data , NAME ) as PanoramaState ; } function onLoad ( e , data ) { const state = getState ( data ) ; const sprite = data . metrics [ 0 ] ; if ( ! sprite ) { return ; } if ( data . orientation === 'horizontal' ) { state . scale = data . target . innerHeight ( ) / sprite . sampledHeight ; data . frames = sprite . sampledWidth ; } else { state . scale = data . target . innerWidth ( ) / sprite . sampledWidth ; data . frames = sprite . sampledHeight ; } const width = Math . floor ( sprite . sampledWidth * state . scale ) ; const height = Math . floor ( sprite . sampledHeight * state . scale ) ; data . stage . css ( { 'background-image' : `url(${ data . source [ sprite . id ] })` , 'background-repeat' : 'repeat-both' , '-webkit-background-size' : `${ width }px ${ height }px` , '-moz-background-size' : `${ width }px ${ height }px` , '-o-background-size' : `${ width }px ${ height }px` , 'background-size' : `${ width }px ${ height }px` } ) ; } function onDraw ( e , data ) { const state = getState ( data ) ; const px = data . orientation === 'horizontal' ? 1 : 0 ; const py = px ? 0 : 1 ; const offset = data . frame % data . frames ; const left = Math . round ( px * offset * state . scale ) ; const top = Math . round ( py * offset * state . scale ) ; data . stage . css ( { 'background-position' : `${ left }px ${ top }px` } ) ; } SpriteSpin . registerPlugin ( NAME , { name : NAME , onLoad : onLoad , onDraw : onDraw } ) ; } ) ( ) ;