2020-09-19 16:08:07 +02:00
let showcase = $ ( "#imgBig" ) ;
let showcaseButtonContainer = $ ( "#photoButtonsContainer" ) ;
let showcaseDownload = $ ( "#downloadButton" ) ;
let photoOverlay = $ ( "#photoOverlay" ) ;
let headerTop = $ ( "#header-top" ) ;
let sideNav = $ ( "#menuSidenav" ) ;
let loading = $ ( "#loadingIconContainer" ) ;
let move _photo = false ;
let grab _offsetX = 0 ;
let grab _offsetY = 0 ;
let idle _time = 0 ;
let isMobile = window . matchMedia ( "only screen and (max-width: 480px)" ) . matches ;
let isMouseOverButtons = false ;
$ ( document ) . ready (
function ( ) {
showcase . bind ( "mousewheel" , function ( event , delta ) {
let min _width = $ ( window ) . width ( ) / 5 ;
let min _height = $ ( window ) . height ( ) / 5 ;
let max _width = $ ( window ) . width ( ) * 5 ;
let max _height = $ ( window ) . height ( ) * 5 ;
let scale = 150 / 100 ;
if ( delta < 0 )
scale = 1 / scale ;
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
let offsetX = event . pageX - ( showcase . position ( ) . left + showcase . width ( ) / 2 ) ;
let offsetY = cursorY - ( showcase . position ( ) . top + showcase . height ( ) / 2 ) ;
let new _width = showcase . width ( ) * scale ;
let new _height = showcase . height ( ) * scale ;
if ( new _width > max _width || new _width < min _width )
new _width = 0 ;
if ( new _height > max _height || new _height < min _height )
new _height = 0 ;
if ( new _width !== 0 && new _height !== 0 ) {
let new _left = event . pageX - ( offsetX * scale ) ;
let new _top = cursorY - ( offsetY * scale ) ;
showcase . width ( new _width ) ;
showcase . height ( new _height ) ;
if ( new _height > $ ( window ) . height ( ) || new _width > $ ( window ) . width ( ) ) {
showcase . css ( 'left' , new _left + 'px' ) ;
showcase . css ( 'top' , new _top + 'px' ) ;
showcase . css ( 'cursor' , 'move' ) ;
}
else {
showcase . css ( 'left' , $ ( window ) . width ( ) / 2 + 'px' ) ;
showcase . css ( 'top' , $ ( window ) . height ( ) / 2 + 'px' ) ;
showcase . css ( 'cursor' , 'default' ) ;
}
}
return false ;
} ) ;
document . getElementById ( "photosTitle" ) . scrollIntoView ( ) ;
showcase . on ( 'dragstart' , function ( event ) { event . preventDefault ( ) ; } ) ; // Stop image drag out of page
if ( ! isMobile )
setInterval ( timerIncrement , 100 ) ;
}
) ;
$ ( document ) . mousemove ( function ( event ) {
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
let elem = document . elementFromPoint ( event . pageX , cursorY ) ;
isMouseOverButtons = ! ( elem . id === "closeBack" || elem . id === "loadingIconContainer" || elem . id === showcase . attr ( 'id' ) ) ; // Prevent entering fullscreen when cursor on control buttons
idle _time = 0 ;
} ) ;
showcase . mousemove ( function ( event ) {
if ( showcase . height ( ) > $ ( window ) . height ( ) || showcase . width ( ) > $ ( window ) . width ) {
showcase . css ( 'cursor' , 'move' ) ;
if ( move _photo ) {
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
let offsetX = event . pageX - ( showcase . position ( ) . left + showcase . width ( ) / 2 ) ;
let offsetY = cursorY - ( showcase . position ( ) . top + showcase . height ( ) / 2 ) ;
let new _left = showcase . position ( ) . left + showcase . width ( ) / 2 + offsetX - grab _offsetX ;
let new _top = showcase . position ( ) . top + showcase . height ( ) / 2 + offsetY - grab _offsetY ;
showcase . css ( 'left' , new _left + 'px' ) ;
showcase . css ( 'top' , new _top + 'px' ) ;
}
}
else {
showcase . css ( 'cursor' , 'default' ) ;
}
} ) ;
showcase . mousedown ( function ( event ) {
move _photo = true ;
let cursorY = event . pageY - $ ( window ) . scrollTop ( ) ;
grab _offsetX = event . pageX - ( showcase . position ( ) . left + showcase . width ( ) / 2 ) ;
grab _offsetY = cursorY - ( showcase . position ( ) . top + showcase . height ( ) / 2 ) ;
if ( isMobile )
toggleFullscreen ( ) ;
} ) ;
showcase . mouseup ( function ( ) {
move _photo = false ;
} ) ;
showcase . mouseleave ( function ( ) {
move _photo = false ;
} ) ;
/ *
* Display selected image in showcase
* When clicked , display image in full size
* /
function displayBig ( elem ) {
isMouseOverButtons = false ; // Allow fullscreen when clicking on an image without mouving the mouse
changeImage ( $ ( elem ) . attr ( 'src' ) ) ;
hideTopBar ( ) ;
disableFullscreen ( ) ;
photoOverlay . fadeIn ( 500 ) ;
$ ( 'body' ) . css ( 'overflow' , 'hidden' ) ;
}
function getSourceFromThumbnail ( source ) {
return source . replace ( "photos_thumb/" , "photos/" ) ;
}
function getThumbnailFromSource ( source ) {
return source . replace ( "photos/" , "photos_thumb/" ) ;
}
/ *
* Hide showcase image
* /
function closeBig ( ) {
showTopBar ( ) ;
disableFullscreen ( ) ;
photoOverlay . fadeOut ( 500 ) ;
$ ( 'body' ) . css ( 'overflow' , 'auto' ) ;
scrollToShowcaseImage ( ) ;
}
function scrollToShowcaseImage ( ) {
let source = showcase . attr ( 'src' ) ;
let image = $ ( "img[src$='" + getThumbnailFromSource ( source ) + "']" ) ;
if ( image !== undefined ) {
image . get ( 0 ) . scrollIntoView ( ) ;
}
}
function enableFullscreen ( ) {
showcaseButtonContainer . fadeOut ( 500 ) ;
}
function disableFullscreen ( ) {
showcaseButtonContainer . fadeIn ( 500 ) ;
}
function toggleFullscreen ( ) {
if ( isFullscreen ( ) )
disableFullscreen ( ) ;
else
enableFullscreen ( ) ;
}
function hideTopBar ( ) {
headerTop . fadeOut ( 500 ) ;
sideNav . fadeOut ( 500 ) ;
}
function showTopBar ( ) {
headerTop . fadeIn ( 500 ) ;
sideNav . fadeIn ( 500 ) ;
}
function isFullscreen ( ) {
return showcaseButtonContainer . css ( "display" ) === "none" ;
}
function timerIncrement ( ) {
if ( isMouseOverButtons )
idle _time = 0 ;
else
idle _time = idle _time + 1 ;
if ( idle _time > 10 && ! isFullscreen ( ) ) { // 1 second
enableFullscreen ( ) ;
} else if ( idle _time <= 10 && isFullscreen ( ) ) {
disableFullscreen ( ) ;
}
}
/ *
* Control images with keyboard arrows
* /
$ ( document ) . keydown ( function ( e ) {
switch ( e . keyCode ) {
case 37 : // left
displayNext ( - 1 ) ;
break ;
case 39 : // right
displayNext ( 1 ) ;
break ;
case 27 : // escape
closeBig ( ) ;
break ;
default :
return ; // exit this handler for other keys
}
e . preventDefault ( ) ; // prevent the default action (scroll / move caret)
} ) ;
/ *
* Display next / last image in showcase . When reaching end / start , loop back to start / end
* /
function displayNext ( direction ) {
let currentSrc = showcase . attr ( 'src' ) ;
let photos = document . getElementsByClassName ( "photo" ) ;
let current = 0 ;
for ( let i = 0 ; i < photos . length ; i ++ ) {
if ( getSourceFromThumbnail ( $ ( photos [ i ] ) . attr ( 'src' ) ) === currentSrc ) {
current = i ;
}
}
let next = current + direction ;
let nextId = "" ;
if ( direction > 0 ) {
nextId = "#photo-0" ;
} else {
nextId = "#photo-" + ( photos . length - 1 ) ;
}
if ( document . getElementById ( "photo-" + next ) != null ) {
nextId = "#photo-" + next ;
}
let nextSrc = $ ( nextId ) . attr ( 'src' ) ;
changeImage ( nextSrc ) ;
}
/ *
* Change image source , link and download
* /
function changeImage ( thumb ) {
displayLoading ( ) ;
showcase . css ( 'display' , 'none' ) ;
showcase . on ( 'load' , function ( ) {
hideLoading ( ) ;
showcase . css ( 'display' , 'block' ) ;
if ( $ ( showcase ) . width ( ) > $ ( window ) . width ( ) ) { // prevent display problems on portait devices
let scale = $ ( window ) . width ( ) * 0.9 / $ ( showcase ) . width ( ) ;
$ ( showcase ) . width ( scale * $ ( showcase ) . width ( ) ) ;
$ ( showcase ) . height ( scale * $ ( showcase ) . height ( ) ) ;
}
} ) ;
let source = getSourceFromThumbnail ( thumb ) ;
showcase . attr ( "src" , source ) ;
showcase . css ( {
width : 'auto' ,
height : '90%' ,
} ) ;
showcase . css ( 'left' , $ ( window ) . width ( ) / 2 + 'px' ) ;
showcase . css ( 'top' , $ ( window ) . height ( ) / 2 + 'px' ) ;
showcaseDownload . attr ( "href" , source ) ;
}
function displayLoading ( ) {
loading . show ( ) ;
}
function hideLoading ( ) {
loading . fadeOut ( 200 ) ;
}