BossBey File Manager

Editing: image-comparison.js

return this.each(function() {
			var $this = $(this),
				offset_ratio = $this.attr('data-offset') ? $this.attr('data-offset') : 0.5,
				orientation = $this.attr('data-orientation') ? $this.attr('data-orientation') : 'horizontal',
				handle_action = $this.attr('data-handle-action') ? $this.attr('data-handle-action') : 'click',
				$before_img = $this.find('.porto-image-comparison-before'),
				$after_img = $this.find('.porto-image-comparison-after'),
				$handle = $this.find('.porto-image-comparison-handle'),
				width1 = 0,
				height1 = 0,
				this_left = 0,
				this_top = 0,
				resize_timer = null;

var moveEnter = function( e ) {
				if ( ( e.distX > e.distY && e.distX < -e.distY || e.distX < e.distY && e.distX > -e.distY ) && 'vertical' !== orientation ) {
					e.preventDefault();
				} else if ( ( e.distX < e.distY && e.distX < -e.distY || e.distX > e.distY && e.distX > -e.distY ) && 'vertical' === orientation ) {
					e.preventDefault();
				}

$this.addClass( 'active' );
				var this_offset = $this.offset();
				width1 = $before_img.width();
				height1 = $before_img.height();
				this_left = this_offset.left;
				this_top = this_offset.top;
			};

$( window ).on( 'resize.porto-image-comparison', function( e ) {
				if ( resize_timer ) {
					clearTimeout( resize_timer );
				}

resize_timer = setTimeout( function() {
					var w = $before_img.width(),
						h = $before_img.height(),
						t = { w: w + 'px', h: h + 'px', cw: w * offset_ratio + 'px', ch: h * offset_ratio + 'px' };
					$handle.css( 'vertical' === orientation ? 'top' : 'left','vertical' === orientation ? h * offset_ratio : w * offset_ratio );
					resizeFn( $this, $before_img, $after_img, orientation, t );
				}, 300 );
			} );

var moveTarget = 'handle_only' == handle_action ? $handle : $this;
			moveTarget.on( 'movestart', moveEnter );
			moveTarget.on( 'move', moveHandle );
			moveTarget.on( 'moveend', function() {
				$this.removeClass( 'active' );
			} );

if ( 'hover' == handle_action ) {
				$this.on( 'mouseenter', moveEnter );
				$this.on( 'mousemove', moveHandle );
				$this.on( 'mouseleave', function() {
					$this.removeClass( 'active' );
				} );
			}
			$handle.on( 'touchmove', function( e ) {
				e.preventDefault();
			} );
			$this.find( 'img' ).on( 'mousedown', function( e ) {
				e.preventDefault();
			} );

if ( 'click' == handle_action ) {
				$this.on( 'click', function(e) {
					var this_left = $this.offset().left,
						this_top = $this.offset().top;

width1 = $before_img.width();
					height1 = $before_img.height();

offset_ratio = getRatio( e.pageX, e.pageY, orientation, this_left, this_top, width1, height1 );

$this.addClass( 'active' );
					if ( 'vertical' == orientation ) {
						$handle.stop( true, true ).animate(
							{ top: height1 * offset_ratio + 'px' },
							{
								queue: false,
								duration: 300,
								easing: 'easeOutQuad',
								step: function( s ) {
									var t = { w: width1 + 'px', h: height1 + 'px', cw: height1 * ( s / width1 ) + 'px', ch: s + 'px' };
									resizeFn( $this, $before_img, $after_img, orientation, t );
								},
								complete: function() {
									$this.removeClass( 'active' );
								}
							}
						);
					} else {
						$handle.stop( true, true ).animate(
							{ left: width1 * offset_ratio + 'px' },
							{
								queue: false,
								duration: 300,
								easing: 'easeOutQuad',
								step: function( s ) {
									var t = { w: width1 + 'px', h: height1 + 'px', cw: s + 'px', ch: height1 * ( s / width1 ) + 'px' };
									resizeFn( $this, $before_img, $after_img, orientation, t );
								},
								complete: function() {
									$this.removeClass( 'active' );
								}
							}
						);
					}
				} );
			}

$this.addClass( 'initialized' );

$( window ).trigger( 'resize.porto-image-comparison' );

});

};

$( window ).on( 'load', function() {
		$( '.porto-image-comparison' ).portoImageCompare();

$( document.body ).on( 'porto_init', function( e, $wrap ) {
			$wrap.find( '.porto-image-comparison' ).portoImageCompare();
		} );
	} );
})(jQuery);

Cancel