@ -133,24 +133,25 @@ export function initImageDiff() {
$container . find ( '.bounds-info-before .bounds-info-height' ) . text ( ` ${ sizes . image2 [ 0 ] . naturalHeight } px ` ) . addClass ( heightChanged ? 'red' : '' ) ;
}
sizes . image1 . css ( {
width : sizes . size1 . width * factor ,
height : sizes . size1 . height * factor
} ) ;
sizes . image1 . parent ( ) . css ( {
margin : ` 10px auto ` ,
width : sizes . size1 . width * factor + 2 ,
height : sizes . size1 . height * factor + 2
} ) ;
sizes . image2 . css ( {
width : sizes . size2 . width * factor ,
height : sizes . size2 . height * factor
} ) ;
sizes . image2 . parent ( ) . css ( {
margin : ` 10px auto ` ,
width : sizes . size2 . width * factor + 2 ,
height : sizes . size2 . height * factor + 2
} ) ;
const image1 = sizes . image1 [ 0 ] ;
if ( image1 ) {
const container = image1 . parentNode ;
image1 . style . width = ` ${ sizes . size1 . width * factor } px ` ;
image1 . style . height = ` ${ sizes . size1 . height * factor } px ` ;
container . style . margin = '10px auto' ;
container . style . width = ` ${ sizes . size1 . width * factor + 2 } px ` ;
container . style . height = ` ${ sizes . size1 . height * factor + 2 } px ` ;
}
const image2 = sizes . image2 [ 0 ] ;
if ( image2 ) {
const container = image2 . parentNode ;
image2 . style . width = ` ${ sizes . size2 . width * factor } px ` ;
image2 . style . height = ` ${ sizes . size2 . height * factor } px ` ;
container . style . margin = '10px auto' ;
container . style . width = ` ${ sizes . size2 . width * factor + 2 } px ` ;
container . style . height = ` ${ sizes . size2 . height * factor + 2 } px ` ;
}
}
function initSwipe ( sizes ) {
@ -159,36 +160,39 @@ export function initImageDiff() {
factor = ( diffContainerWidth - 12 ) / sizes . max . width ;
}
sizes . image1 . css ( {
width : sizes . size1 . width * factor ,
height : sizes . size1 . height * factor
} ) ;
sizes . image1 . parent ( ) . css ( {
margin : ` 0px ${ sizes . ratio [ 0 ] * factor } px ` ,
width : sizes . size1 . width * factor + 2 ,
height : sizes . size1 . height * factor + 2
} ) ;
sizes . image1 . parent ( ) . parent ( ) . css ( {
padding : ` ${ sizes . ratio [ 1 ] * factor } px 0 0 0 ` ,
width : sizes . max . width * factor + 2
} ) ;
sizes . image2 . css ( {
width : sizes . size2 . width * factor ,
height : sizes . size2 . height * factor
} ) ;
sizes . image2 . parent ( ) . css ( {
margin : ` ${ sizes . ratio [ 3 ] * factor } px ${ sizes . ratio [ 2 ] * factor } px ` ,
width : sizes . size2 . width * factor + 2 ,
height : sizes . size2 . height * factor + 2
} ) ;
sizes . image2 . parent ( ) . parent ( ) . css ( {
width : sizes . max . width * factor + 2 ,
height : sizes . max . height * factor + 2
} ) ;
$container . find ( '.diff-swipe' ) . css ( {
width : sizes . max . width * factor + 2 ,
height : sizes . max . height * factor + 30 /* extra height for inner "position: absolute" elements */ ,
} ) ;
const image1 = sizes . image1 [ 0 ] ;
if ( image1 ) {
const container = image1 . parentNode ;
const swipeFrame = container . parentNode ;
image1 . style . width = ` ${ sizes . size1 . width * factor } px ` ;
image1 . style . height = ` ${ sizes . size1 . height * factor } px ` ;
container . style . margin = ` 0px ${ sizes . ratio [ 0 ] * factor } px ` ;
container . style . width = ` ${ sizes . size1 . width * factor + 2 } px ` ;
container . style . height = ` ${ sizes . size1 . height * factor + 2 } px ` ;
swipeFrame . style . padding = ` ${ sizes . ratio [ 1 ] * factor } px 0 0 0 ` ;
swipeFrame . style . width = ` ${ sizes . max . width * factor + 2 } px ` ;
}
const image2 = sizes . image2 [ 0 ] ;
if ( image2 ) {
const container = image2 . parentNode ;
const swipeFrame = container . parentNode ;
image2 . style . width = ` ${ sizes . size2 . width * factor } px ` ;
image2 . style . height = ` ${ sizes . size2 . height * factor } px ` ;
container . style . margin = ` ${ sizes . ratio [ 3 ] * factor } px ${ sizes . ratio [ 2 ] * factor } px ` ;
container . style . width = ` ${ sizes . size2 . width * factor + 2 } px ` ;
container . style . height = ` ${ sizes . size2 . height * factor + 2 } px ` ;
swipeFrame . style . width = ` ${ sizes . max . width * factor + 2 } px ` ;
swipeFrame . style . height = ` ${ sizes . max . height * factor + 2 } px ` ;
}
// extra height for inner "position: absolute" elements
const swipe = $container . find ( '.diff-swipe' ) [ 0 ] ;
if ( swipe ) {
swipe . style . width = ` ${ sizes . max . width * factor + 2 } px ` ;
swipe . style . height = ` ${ sizes . max . height * factor + 30 } px ` ;
}
$container . find ( '.swipe-bar' ) . on ( 'mousedown' , function ( e ) {
e . preventDefault ( ) ;
@ -200,13 +204,9 @@ export function initImageDiff() {
e2 . preventDefault ( ) ;
const value = Math . max ( 0 , Math . min ( e2 . clientX - $swipeFrame . offset ( ) . left , width ) ) ;
$swipeBar [ 0 ] . style . left = ` ${ value } px ` ;
$container . find ( '.swipe-container' ) [ 0 ] . style . width = ` ${ $swipeFrame . width ( ) - value } px ` ;
$swipeBar . css ( {
left : value
} ) ;
$container . find ( '.swipe-container' ) . css ( {
width : $swipeFrame . width ( ) - value
} ) ;
$ ( document ) . on ( 'mouseup.diff-swipe' , ( ) => {
$ ( document ) . off ( '.diff-swipe' ) ;
} ) ;