uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
1,576 lines (972 loc) • 83.3 kB
JavaScript
/*
*************************************
* <!-- Advanced Slider (Special Effects) -->
*************************************
*/
import {
UixModuleInstance,
UixDebounce,
} from '@uixkit/core/_global/js';
import PixiPlugin from '@uixkit/plugins/GSAP/esm/PixiPlugin';
import '../scss/_special.scss';
export const ADVANCED_SLIDER_FILTER = ( ( module, $, window, document ) => {
if ( window.ADVANCED_SLIDER_FILTER === null ) return false;
module.ADVANCED_SLIDER_FILTER = module.ADVANCED_SLIDER_FILTER || {};
module.ADVANCED_SLIDER_FILTER.version = '0.3.6';
module.ADVANCED_SLIDER_FILTER.pageLoaded = function() {
// Remove pixi.js banner from the console
PIXI.utils.skipHello();
let windowWidth = window.innerWidth,
windowHeight = window.innerHeight;
let animSpeed = 1000;
const $sliderWrapper = $( '.uix-advanced-slider-sp' );
let
//Save different canvas heights as an array
canvasHeights = [],
//Basic webGL renderers
rendererOuterID = 'uix-advanced-slider-sp__canvas-container',
rendererCanvasID = 'uix-advanced-slider-sp__canvas',
renderer,
//PIXI
renderer__filter,
rendererCanvasID__filter = rendererCanvasID,
stage__filter,
container__items,
displacementSprite,
displacementFilter;
sliderInit( false );
function windowUpdate() {
// Check window width has actually changed and it's not just iOS triggering a resize event on scroll
if ( window.innerWidth != windowWidth ) {
// Update the window width for next time
windowWidth = window.innerWidth;
// Do stuff here
sliderInit( true );
}
}
// Add function to the window that should be resized
const debounceFuncWindow = UixDebounce(windowUpdate, 50);
window.removeEventListener('resize', debounceFuncWindow);
window.addEventListener('resize', debounceFuncWindow);
/*
* Initialize slideshow
*
* @param {Boolean} resize - Determine whether the window size changes.
* @return {Void}
*/
function sliderInit( resize ) {
$sliderWrapper.each( function() {
const $this = $( this );
const $items = $this.find( '.uix-advanced-slider-sp__item' ),
$first = $items.first(),
activated = $this.data( 'activated' );
let nativeItemW,
nativeItemH;
if ( typeof activated === typeof undefined || activated === 0 ) {
//Get parameter configuration from the data-* attribute of HTML
let dataControlsPagination = $this.data( 'controls-pagination' ),
dataControlsArrows = $this.data( 'controls-arrows' ),
dataDraggable = $this.data( 'draggable' ),
dataDraggableCursor = $this.data( 'draggable-cursor' ),
dataCountTotal = $this.data( 'count-total' ),
dataCountCur = $this.data( 'count-now' ),
dataSpeed = $this.data( 'speed' ),
dataFilterTexture = $this.data( 'filter-texture' );
if ( typeof dataControlsPagination === typeof undefined ) dataControlsPagination = '.uix-advanced-slider-sp__pagination';
if ( typeof dataControlsArrows === typeof undefined || dataControlsArrows == false ) dataControlsArrows = '.uix-advanced-slider-sp__arrows';
if ( typeof dataDraggable === typeof undefined ) dataDraggable = false;
if ( typeof dataDraggableCursor === typeof undefined || dataDraggableCursor == false ) dataDraggableCursor = 'move';
if ( typeof dataCountTotal === typeof undefined ) dataCountTotal = 'p.count em.count';
if ( typeof dataCountCur === typeof undefined ) dataCountCur = 'p.count em.current';
if ( typeof dataFilterTexture === typeof undefined || !dataFilterTexture || dataFilterTexture == '' ) dataFilterTexture = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
//Autoplay parameters
let dataAuto = $this.data( 'auto' ),
dataTiming = $this.data( 'timing' ),
dataLoop = $this.data( 'loop' );
if ( typeof dataAuto === typeof undefined ) dataAuto = false;
if ( typeof dataTiming === typeof undefined ) dataTiming = 10000;
if ( typeof dataLoop === typeof undefined ) dataLoop = false;
//Autoplay times
let playTimes;
//A function called "timer" once every second (like a digital watch).
$this[0].animatedSlides;
//Get the animation speed
//-------------------------------------
if ( typeof dataSpeed != typeof undefined && dataSpeed != false ) {
animSpeed = dataSpeed;
}
//Display all images
//-------------------------------------
if ( !Modernizr.webgl ) {
$this.find( 'img' ).css( 'visibility', 'visible' );
}
//Initialize the first item container
//-------------------------------------
$items.addClass( 'next' );
$first.addClass( 'is-active' );
TweenMax.set( $items, {
alpha : 0,
onComplete : function() {
TweenMax.to( $first, animSpeed/1000, {
alpha : 1,
delay : animSpeed/1000
});
}
});
if ( $first.find( 'video' ).length > 0 ) {
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $first.find( 'video' ).attr( 'id' ) );
let videoURL = $first.find( 'source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $first.attr( 'src' );
if ( typeof videoURL != typeof undefined ) {
video.addEventListener( 'loadedmetadata', function( e ) {
$this.css( 'height', this.videoHeight*($this.width()/this.videoWidth) + 'px' );
nativeItemW = this.videoWidth;
nativeItemH = this.videoHeight;
//Initialize all the items to the stage
addItemsToStage( $this, nativeItemW, nativeItemH, dataControlsPagination, dataControlsArrows, dataLoop, dataDraggable, dataDraggableCursor, dataCountTotal, dataCountCur, dataFilterTexture );
}, false);
video.src = videoURL;
}
} else {
let imgURL = $first.find( 'img' ).attr( 'src' );
if ( typeof imgURL != typeof undefined ) {
const img = new Image();
img.onload = function() {
$this.css( 'height', $this.width()*(this.height/this.width) + 'px' );
nativeItemW = this.width;
nativeItemH = this.height;
//Initialize all the items to the stage
addItemsToStage( $this, nativeItemW, nativeItemH, dataControlsPagination, dataControlsArrows, dataLoop, dataDraggable, dataDraggableCursor, dataCountTotal, dataCountCur, dataFilterTexture );
};
img.src = imgURL;
}
}
//Autoplay Slider
//-------------------------------------
if ( !resize ) {
if ( dataAuto && !isNaN( parseFloat( dataTiming ) ) && isFinite( dataTiming ) ) {
sliderAutoPlay( playTimes, dataTiming, dataLoop, $this, dataCountTotal, dataCountCur, dataControlsPagination, dataControlsArrows );
const autoplayEnter = function() {
clearInterval( $this[0].animatedSlides );
};
const autoplayLeave = function() {
sliderAutoPlay( playTimes, dataTiming, dataLoop, $this, dataCountTotal, dataCountCur, dataControlsPagination, dataControlsArrows );
};
// Do not use the `off()` method, otherwise it will cause the second mouseenter to be invalid
$this.on( 'mouseenter', autoplayEnter );
$this.on( 'mouseleave', autoplayLeave );
// To determine if it is a touch screen.
if (Modernizr.touchevents) {
$this.on( 'pointerenter', autoplayEnter );
$this.on( 'pointerleave', autoplayLeave );
}
}
}
//Prevents front-end javascripts that are activated with AJAX to repeat loading.
$this.data( 'activated', 1 );
}//endif activated
});
}
/*
* Trigger slider autoplay
*
* @param {Function} playTimes - Number of times.
* @param {Number} timing - Autoplay interval.
* @param {Boolean} loop - Gives the slider a seamless infinite loop.
* @param {Element} slider - Selector of the slider .
* @param {String} countTotalID - Total number ID or class of counter.
* @param {String} countCurID - Current number ID or class of counter.
* @param {String} paginationID - Navigation ID for paging control of each slide.
* @param {String} arrowsID - Previous/Next arrow navigation ID.
* @return {Void} - The constructor.
*/
function sliderAutoPlay( playTimes, timing, loop, slider, countTotalID, countCurID, paginationID, arrowsID ) {
const items = slider.find( '.uix-advanced-slider-sp__item' ),
total = items.length;
slider[0].animatedSlides = setInterval( function() {
playTimes = parseFloat( items.filter( '.is-active' ).index() );
playTimes++;
if ( !loop ) {
if ( playTimes < total && playTimes >= 0 ) sliderUpdates( playTimes, slider, 'next', countTotalID, countCurID, paginationID, arrowsID, loop );
} else {
if ( playTimes == total ) playTimes = 0;
if ( playTimes < 0 ) playTimes = total-1;
//Prevent problems with styles when switching in positive order
if ( playTimes == 0 ) {
sliderUpdates( playTimes, slider, 'prev', countTotalID, countCurID, paginationID, arrowsID, loop );
} else {
sliderUpdates( playTimes, slider, 'next', countTotalID, countCurID, paginationID, arrowsID, loop );
}
}
}, timing );
}
/*
* Initialize all the items to the stage
*
* @param {Element} slider - Current selector of each slider.
* @param {Number} nativeItemW - Returns the intrinsic width of the image/video.
* @param {Number} nativeItemH - Returns the intrinsic height of the image/video.
* @param {String} paginationID - Navigation ID for paging control of each slide.
* @param {String} arrowsID - Previous/Next arrow navigation ID.
* @param {Boolean} loop - Gives the slider a seamless infinite loop.
* @param {Boolean} draggable - Allow drag and drop on the slider.
* @param {String} draggableCursor - Drag & Drop Change icon/cursor while dragging.
* @param {String} countTotalID - Total number ID or class of counter.
* @param {String} countCurID - Current number ID or class of counter.
* @param {String} filterTexture - The texture used for the displacement map.
* @return {Void}
*/
function addItemsToStage( slider, nativeItemW, nativeItemH, paginationID, arrowsID, loop, draggable, draggableCursor, countTotalID, countCurID, filterTexture ) {
const $this = slider,
$items = $this.find( '.uix-advanced-slider-sp__item' ),
$first = $items.first(),
itemsTotal = $items.length;
//If arrows does not exist on the page, it will be added by default,
//and the drag and drop function will be activated.
if ( $( arrowsID ).length == 0 ) {
$( 'body' ).prepend( '<div style="display:none;" class="uix-advanced-slider-sp__arrows '+arrowsID.replace('#','').replace('.','')+'"><a href="#" class="uix-advanced-slider-sp__arrows--prev"></a><a href="#" class="uix-advanced-slider-sp__arrows--next"></a></div>' );
}
//Add identifiers for the first and last items
$items.last().addClass( 'last' );
$items.first().addClass( 'first' );
//Prevent bubbling
if ( itemsTotal == 1 ) {
$( paginationID ).hide();
$( arrowsID ).hide();
}
if ( Modernizr.webgl ) {
//Load slides to canvas
//-------------------------------------
if ( $( '#' + rendererCanvasID ).length == 0 ) {
$this.prepend( '<div id="'+rendererOuterID+'" class="uix-advanced-slider-sp__canvas-container"><canvas id="'+rendererCanvasID+'"></canvas></div>' );
}
//Save different canvas heights as an array
//-------------------------------------
$this.find( '.uix-advanced-slider-sp__item' ).each( function( index ) {
const $thisItem = $( this );
if ( $thisItem.find( 'video' ).length > 0 ) {
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $thisItem.find( 'video' ).attr( 'id' ) );
let videoURL = $thisItem.find( 'video source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $thisItem.attr( 'src' );
video.addEventListener( 'loadedmetadata', function( e ) {
let curW = this.videoWidth,
curH = this.videoHeight,
newW = curW,
newH = curH;
newW = $this.width();
//Scaled/Proportional Content
newH = curH*(newW/curW);
//Save different canvas heights as an array
if ( canvasHeights.length < itemsTotal ) {
canvasHeights.push( newH );
}
}, false);
video.src = videoURL;
} else {
let imgURL = $thisItem.find( 'img' ).attr( 'src' ),
imgCur = new Image();
imgCur.onload = function() {
let curW_img = this.width,
curH_img = this.height,
newW_img = curW_img,
newH_img = curH_img;
newW_img = $this.width();
//Scaled/Proportional Content
newH_img = curH_img*(newW_img/curW_img);
//Save different canvas heights as an array
if ( canvasHeights.length < itemsTotal ) {
canvasHeights.push( newH_img );
}
};
imgCur.src = imgURL;
}
});//$this.find( '.uix-advanced-slider-sp__item' ).each
//Basic webGL renderers
//-------------------------------------
renderer = new PIXI.Application({
width : $this.width(),
height : $this.height(),
transparent : true,
antialias : true,
autoResize : true,
view : document.getElementById( rendererCanvasID )
});
renderer__filter = new PIXI.autoDetectRenderer({
width : $this.width(),
height : $this.height(),
transparent : true,
view : document.getElementById( rendererCanvasID__filter )
});
//
//
stage__filter = new PIXI.Container();
container__items = new PIXI.Container();
displacementSprite = ( /^.*\.(avi|AVI|wmv|WMV|flv|FLV|mpg|MPG|mp4|MP4)/.test( filterTexture ) ) ? new PIXI.Sprite( PIXI.Texture.from( filterTexture ) ) : new PIXI.Sprite.from( filterTexture );
displacementFilter = new PIXI.filters.DisplacementFilter( displacementSprite );
//----------------------------------------------------------------------------------
//--------------------------------- Brightness Effect -------------------------------
//----------------------------------------------------------------------------------
//Usage of returning sprite object: renderer.stage.children[index]
if ( $this.hasClass( 'uix-advanced-slider-sp--eff-brightness' ) ) {
$this.find( '.uix-advanced-slider-sp__item' ).each( function( index ) {
const $thisItem = $( this );
//Load sprite from each slider to canvas
//-------------------------------------
let curSprite;
if ( $thisItem.find( 'video' ).length > 0 ) {
// create a video texture from a path
let videoURL = $thisItem.find( 'source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $thisItem.attr( 'src' );
const texture = PIXI.Texture.from( videoURL );
curSprite = new PIXI.Sprite( texture );
// pause the video
const videoSource = texture.baseTexture.resource.source;
videoSource.autoplay = false;
videoSource.pause();
videoSource.currentTime = 0;
videoSource.muted = true;
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $thisItem.find( 'video' ).attr( 'id' ) );
video.addEventListener( 'loadedmetadata', function( e ) {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
}, false);
video.src = videoURL;
} else {
let imgURL = $thisItem.find( 'img' ).attr( 'src' ),
imgCur = new Image();
curSprite = new PIXI.Sprite.from( imgURL );
imgCur.onload = function() {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
};
imgCur.src = imgURL;
}
// center the sprite's anchor point
curSprite.anchor.set( 0 );
// sprite size
curSprite.width = renderer.view.width;
curSprite.height = renderer.view.height;
//Avoid error texture rendering errors ***!Important***
TweenMax.set( curSprite, {
alpha : 0
});
//Render updated scene
//-------------------------------------
renderer.stage.addChild( curSprite );
});
//Initialize the default height of canvas
//-------------------------------------
setTimeout( function() {
canvasDefaultInit( $this, $first );
}, animSpeed );
}// end effect
//----------------------------------------------------------------------------------
//--------------------------------- Liquid Distortion Effect -----------------------
//----------------------------------------------------------------------------------
//Usage of returning sprite object: container__items.children[index]
if ( $this.hasClass( 'uix-advanced-slider-sp--eff-liquid' ) ) {
$this.find( '.uix-advanced-slider-sp__item' ).each( function( index ) {
const $thisItem = $( this );
//Load sprite from each slider to canvas
//-------------------------------------
let curSprite,
canvasRatio = $this.width()/nativeItemW;
if ( $thisItem.find( 'video' ).length > 0 ) {
// create a video texture from a path
let videoURL = $thisItem.find( 'source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $thisItem.attr( 'src' );
const texture = PIXI.Texture.from( videoURL );
curSprite = new PIXI.Sprite( texture );
// pause the video
const videoSource = texture.baseTexture.resource.source;
videoSource.autoplay = false;
videoSource.pause();
videoSource.currentTime = 0;
videoSource.muted = true;
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $thisItem.find( 'video' ).attr( 'id' ) );
video.addEventListener( 'loadedmetadata', function( e ) {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
}, false);
video.src = videoURL;
} else {
let imgURL = $thisItem.find( 'img' ).attr( 'src' ),
imgCur = new Image();
curSprite = new PIXI.Sprite.from( imgURL );
imgCur.onload = function() {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
};
imgCur.src = imgURL;
}
// center the sprite's anchor point
curSprite.anchor.set( 0 );
// sprite size
curSprite.width = renderer.view.width;
curSprite.height = renderer.view.height;
//Need to scale according to the screen
curSprite.scale.set( canvasRatio );
//Render updated scene
//-------------------------------------
container__items.addChild( curSprite );
//Add child container to the main container
//-------------------------------------
stage__filter.addChild( container__items );
// Enable Interactions
stage__filter.interactive = true;
//Set the filter to stage and set some default values for the animation
//-------------------------------------
//A texture stores the information that represents an image
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
stage__filter.filters = [ displacementFilter ];
//Add filter container to the main container
//-------------------------------------
displacementSprite.anchor.set( 0.5 );
displacementSprite.x = renderer__filter.width / 2;
displacementSprite.y = renderer__filter.height / 2;
displacementSprite.scale.x = 1;
displacementSprite.scale.y = 1;
// PIXI tries to fit the filter bounding box to the renderer so we optionally bypass
displacementFilter.autoFit = false;
stage__filter.addChild( displacementSprite );
//Animation Effects
//-------------------------------------
const ticker = new PIXI.Ticker();
ticker.autoStart = true;
ticker.add( function( delta ) {
// Render updated scene
renderer__filter.render( stage__filter );
});
});
//Initialize the default height of canvas
//-------------------------------------
setTimeout( function() {
canvasDefaultInit( $this, $first );
}, animSpeed );
}// end effect
//----------------------------------------------------------------------------------
//--------------------------------- Liquid Distortion Effect 2 -----------------------
//----------------------------------------------------------------------------------
//Usage of returning sprite object: container__items.children[index]
if ( $this.hasClass( 'uix-advanced-slider-sp--eff-liquid2' ) ) {
$this.find( '.uix-advanced-slider-sp__item' ).each( function( index ) {
const $thisItem = $( this );
//Load sprite from each slider to canvas
//-------------------------------------
let curSprite,
canvasRatio = $this.width()/nativeItemW;
if ( $thisItem.find( 'video' ).length > 0 ) {
// create a video texture from a path
let videoURL = $thisItem.find( 'source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $thisItem.attr( 'src' );
const texture = PIXI.Texture.from( videoURL );
curSprite = new PIXI.Sprite( texture );
// pause the video
const videoSource = texture.baseTexture.resource.source;
videoSource.autoplay = false;
videoSource.pause();
videoSource.currentTime = 0;
videoSource.muted = true;
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $thisItem.find( 'video' ).attr( 'id' ) );
video.addEventListener( 'loadedmetadata', function( e ) {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
}, false);
video.src = videoURL;
} else {
let imgURL = $thisItem.find( 'img' ).attr( 'src' ),
imgCur = new Image();
curSprite = new PIXI.Sprite.from( imgURL );
imgCur.onload = function() {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
};
imgCur.src = imgURL;
}
// center the sprite's anchor point
curSprite.anchor.set( 0 );
// sprite size
curSprite.width = renderer.view.width;
curSprite.height = renderer.view.height;
//Need to scale according to the screen
curSprite.scale.set( canvasRatio );
//Avoid error texture rendering errors ***!Important***
TweenMax.set( curSprite, {
alpha : 0
});
//Render updated scene
//-------------------------------------
container__items.addChild( curSprite );
//Add child container to the main container
//-------------------------------------
stage__filter.addChild( container__items );
// Enable Interactions
stage__filter.interactive = true;
//Set the filter to stage and set some default values for the animation
//-------------------------------------
//A texture stores the information that represents an image
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP;
stage__filter.filters = [ displacementFilter ];
//Add filter container to the main container
//-------------------------------------
displacementSprite.anchor.set( 0.5 );
displacementSprite.x = renderer__filter.width / 2;
displacementSprite.y = renderer__filter.height / 2;
// PIXI tries to fit the filter bounding box to the renderer so we optionally bypass
displacementFilter.autoFit = false;
stage__filter.addChild( displacementSprite );
//Animation Effects
//-------------------------------------
const ticker = new PIXI.Ticker();
ticker.autoStart = true;
ticker.add( function( delta ) {
// Render updated scene
renderer__filter.render( stage__filter );
});
});
//Initialize the default height of canvas
//-------------------------------------
setTimeout( function() {
canvasDefaultInit( $this, $first );
}, animSpeed );
}// end effect
//----------------------------------------------------------------------------------
//--------------------------------- Liquid Distortion Effect 3 -----------------------
//----------------------------------------------------------------------------------
//Usage of returning sprite object: container__items.children[index]
if ( $this.hasClass( 'uix-advanced-slider-sp--eff-liquid3' ) ) {
$this.find( '.uix-advanced-slider-sp__item' ).each( function( index ) {
const $thisItem = $( this );
//Load sprite from each slider to canvas
//-------------------------------------
let curSprite,
canvasRatio = $this.width()/nativeItemW;
if ( $thisItem.find( 'video' ).length > 0 ) {
// create a video texture from a path
let videoURL = $thisItem.find( 'source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $thisItem.attr( 'src' );
const texture = PIXI.Texture.from( videoURL );
curSprite = new PIXI.Sprite( texture );
// pause the video
const videoSource = texture.baseTexture.resource.source;
videoSource.autoplay = false;
videoSource.pause();
videoSource.currentTime = 0;
videoSource.muted = true;
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $thisItem.find( 'video' ).attr( 'id' ) );
video.addEventListener( 'loadedmetadata', function( e ) {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
}, false);
video.src = videoURL;
} else {
let imgURL = $thisItem.find( 'img' ).attr( 'src' ),
imgCur = new Image();
curSprite = new PIXI.Sprite.from( imgURL );
imgCur.onload = function() {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
};
imgCur.src = imgURL;
}
// center the sprite's anchor point
curSprite.anchor.set( 0 );
// sprite size
curSprite.width = renderer.view.width;
curSprite.height = renderer.view.height;
//Need to scale according to the screen
curSprite.scale.set( canvasRatio );
//Avoid error texture rendering errors ***!Important***
TweenMax.set( curSprite, {
alpha : 0
});
//Render updated scene
//-------------------------------------
container__items.addChild( curSprite );
//Add child container to the main container
//-------------------------------------
stage__filter.addChild( container__items );
// Enable Interactions
stage__filter.interactive = true;
//Set the filter to stage and set some default values for the animation
//-------------------------------------
//A texture stores the information that represents an image
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
stage__filter.filters = [ displacementFilter ];
//Add filter container to the main container
//-------------------------------------
displacementSprite.anchor.set( 0.5 );
displacementSprite.x = renderer__filter.width / 2;
displacementSprite.y = renderer__filter.height / 2;
// PIXI tries to fit the filter bounding box to the renderer so we optionally bypass
displacementFilter.autoFit = false;
stage__filter.addChild( displacementSprite );
//Animation Effects
//-------------------------------------
const ticker = new PIXI.Ticker();
ticker.autoStart = true;
ticker.add( function( delta ) {
//Need the displacementSprite.texture.baseTexture.wrapMode is "PIXI.WRAP_MODES.REPEAT"
displacementSprite.x += 1 * delta;
displacementSprite.y += 0.3;
// Render updated scene
renderer__filter.render( stage__filter );
});
});
//Initialize the default height of canvas
//-------------------------------------
setTimeout( function() {
canvasDefaultInit( $this, $first );
}, animSpeed );
}// end effect
//----------------------------------------------------------------------------------
//--------------------------------- Parallax Effect -------------------------------
//----------------------------------------------------------------------------------
//Usage of returning sprite object: container__items.children[index]
if ( $this.hasClass( 'uix-advanced-slider-sp--eff-parallax' ) ) {
$this.find( '.uix-advanced-slider-sp__item' ).each( function( index ) {
const $thisItem = $( this );
//Load sprite from each slider to canvas
//-------------------------------------
let curSprite,
canvasRatio = $this.width()/nativeItemW;
if ( $thisItem.find( 'video' ).length > 0 ) {
// create a video texture from a path
let videoURL = $thisItem.find( 'source:first' ).attr( 'src' );
if ( typeof videoURL === typeof undefined ) videoURL = $thisItem.attr( 'src' );
const texture = PIXI.Texture.from( videoURL );
curSprite = new PIXI.Sprite( texture );
// pause the video
const videoSource = texture.baseTexture.resource.source;
videoSource.autoplay = false;
videoSource.pause();
videoSource.currentTime = 0;
videoSource.muted = true;
//Returns the dimensions (intrinsic height and width ) of the video
const video = document.getElementById( $thisItem.find( 'video' ).attr( 'id' ) );
video.addEventListener( 'loadedmetadata', function( e ) {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
}, false);
video.src = videoURL;
} else {
let imgURL = $thisItem.find( 'img' ).attr( 'src' ),
imgCur = new Image();
curSprite = new PIXI.Sprite.from( imgURL );
imgCur.onload = function() {
//At the same time change the height of the canvas
renderer.view.style.width = $this.width() + 'px';
renderer.view.style.height = canvasHeights[index] + 'px';
};
imgCur.src = imgURL;
}
// center the sprite's anchor point
curSprite.anchor.set( 0 );
// sprite size
curSprite.width = renderer.view.width;
curSprite.height = renderer.view.height;
//Need to scale according to the screen
curSprite.scale.set( canvasRatio );
//Avoid error texture rendering errors ***!Important***
TweenMax.set( curSprite, {
alpha : 0
});
//Render updated scene
//-------------------------------------
container__items.addChild( curSprite );
//Add child container to the main container
//-------------------------------------
stage__filter.addChild( container__items );
// Enable Interactions
stage__filter.interactive = true;
// Create mask
//-------------------------------------
//current mask
const curSpriteMask = new PIXI.Graphics();
curSpriteMask.lineStyle( 0 );
curSpriteMask.beginFill( 0xFFFFFF );
curSpriteMask.moveTo(0,0);
curSpriteMask.lineTo( renderer.view.width, 0 );
curSpriteMask.lineTo( renderer.view.width, renderer.view.height );
curSpriteMask.lineTo( 0, renderer.view.height );
curSpriteMask.endFill();
curSpriteMask.position.x = 0;
curSpriteMask.position.y = 0;
curSprite.mask = curSpriteMask;
stage__filter.addChild( curSpriteMask ); //Do not add to the container
//Animation Effects
//-------------------------------------
const ticker = new PIXI.Ticker();
ticker.autoStart = true;
ticker.add( function( delta ) {
// Render updated scene
renderer__filter.render( stage__filter );
});
});
//Initialize the default height of canvas
//-------------------------------------
setTimeout( function() {
canvasDefaultInit( $this, $first );
}, animSpeed );
}// end effect
//Canvas Interactions
//-------------------------------------
transitionInteractions( 0, itemsTotal-1, $this, 'in', 'next' );
}
// Fires local videos asynchronously with slider switch.
//-------------------------------------
if ( !Modernizr.webgl ) normalSliderVideoInit( $items, false );
//Pagination dots
//-------------------------------------
let _dot = '',
_dotActive = '';
_dot += '<ul>';
for ( let i = 0; i < itemsTotal; i++ ) {
_dotActive = ( i == 0 ) ? 'class="is-active"' : '';
_dot += '<li><a '+_dotActive+' data-index="'+i+'" href="javascript:"></a></li>';
}
_dot += '</ul>';
if ( $( paginationID ).html() == '' ) $( paginationID ).html( _dot );
$( paginationID ).find( 'li a' ).off( 'click' ).on( 'click', function( e ) {
e.preventDefault();
//Prevent buttons' events from firing multiple times
const $btn = $( this );
if ( $btn.attr( 'aria-disabled' ) == 'true' ) return false;
$( paginationID ).find( 'li a' ).attr( 'aria-disabled', 'true' );
$( paginationID ).find( 'li a' )
.delay(animSpeed)
.queue(function(next) { $( paginationID ).find( 'li a' ).attr( 'aria-disabled', 'false' ); next(); });
//
if ( !$( this ).hasClass( 'is-active' ) ) {
//Determine the direction
let curDir = 'prev';
if ( $( this ).attr( 'data-index' ) > parseFloat( $items.filter( '.is-active' ).index() ) ) {
curDir = 'next';
}
//Canvas Interactions
transitionInteractions( $items.filter( '.is-active' ).index(), $items.filter( '.leave' ).index(), $this, 'out', curDir );
//Update the current and previous/next items
sliderUpdates( $( this ).attr( 'data-index' ), $this, curDir, countTotalID, countCurID, paginationID, arrowsID, loop );
//Pause the auto play event
clearInterval( $this[0].animatedSlides );
}
});
//Next/Prev buttons
//-------------------------------------
const _prev = $( arrowsID ).find( '.uix-advanced-slider-sp__arrows--prev' ),
_next = $( arrowsID ).find( '.uix-advanced-slider-sp__arrows--next' );
$( arrowsID ).find( 'a' ).attr( 'href', 'javascript:' );
$( arrowsID ).find( 'a' ).removeClass( 'is-disabled' );
if ( !loop ) {
_prev.addClass( 'is-disabled' );
}
_prev.off( 'click' ).on( 'click', function( e ) {
e.preventDefault();
//Pause the auto play event
clearInterval( $this[0].animatedSlides );
//Move animation
prevMove();
});
_next.off( 'click' ).on( 'click', function( e ) {
e.preventDefault();
//Pause the auto play event
clearInterval( $this[0].animatedSlides );
//Move animation
nextMove();
});
function prevMove() {
//Prevent buttons' events from firing multiple times
if ( _prev.attr( 'aria-disabled' ) == 'true' ) return false;
_prev.attr( 'aria-disabled', 'true' );
_prev
.delay(animSpeed)
.queue(function(next) { _prev.attr( 'aria-disabled', 'false' ); next(); });
//
if ( _prev.hasClass( 'is-disabled' ) ) return false;
//Canvas Interactions
transitionInteractions( $items.filter( '.is-active' ).index(), $items.filter( '.leave' ).index(), $this, 'out', 'prev' );
//Update the current and previous items
sliderUpdates( parseFloat( $items.filter( '.is-active' ).index() ) - 1, $this, 'prev', countTotalID, countCurID, paginationID, arrowsID, loop );
}
function nextMove() {
//Prevent buttons' events from firing multiple times
if ( _next.attr( 'aria-disabled' ) == 'true' ) return false;
_next.attr( 'aria-disabled', 'true' );
_next
.delay(animSpeed)
.queue(function(next) { _next.attr( 'aria-disabled', 'false' ); next(); });
//
if ( _next.hasClass( 'is-disabled' ) ) return false;
//Canvas Interactions
transitionInteractions( $items.filter( '.is-active' ).index(), $items.filter( '.leave' ).index(), $this, 'out', 'next' );
//Update the current and next items
sliderUpdates( parseFloat( $items.filter( '.is-active' ).index() ) + 1, $this, 'next', countTotalID, countCurID, paginationID, arrowsID, loop );
}
//Added touch method to mobile device and desktop
//-------------------------------------
const $dragTrigger = $this.find( '.uix-advanced-slider-sp__inner' );
let mouseX, mouseY;
let isMoving = false;
//Avoid images causing mouseup to fail
$dragTrigger.find( 'img' ).css({
'pointer-events': 'none',
'user-select': 'none'
});
//Make the cursor a move icon when a user hovers over an item
if ( draggable && draggableCursor != '' && draggableCursor != false ) $dragTrigger.css( 'cursor', draggableCursor );
//draggable for touch devices
if (Modernizr.touchevents) draggable = true;
if ( draggable ) {
$dragTrigger[0].removeEventListener( 'mousedown', dragStart );
document.removeEventListener( 'mouseup', dragEnd );
$dragTrigger[0].removeEventListener( 'touchstart', dragStart );
document.removeEventListener( 'touchend', dragEnd );
//
$dragTrigger[0].addEventListener( 'mousedown', dragStart );
$dragTrigger[0].addEventListener( 'touchstart', dragStart );
}
function dragStart(e) {
//Do not use "e.preventDefault()" to avoid prevention page scroll on drag in IOS and Android
const touches = e.touches;
if ( touches && touches.length ) {
mouseX = touches[0].clientX;
mouseY = touches[0].clientY;
} else {
mouseX = e.clientX;
mouseY = e.clientY;
}
document.addEventListener( 'mouseup', dragEnd );
document.addEventListener( 'mousemove', dragProcess );
document.addEventListener( 'touchend', dragEnd );
document.addEventListener( 'touchmove', dragProcess );
}
function dragProcess(e) {
const touches = e.touches;
let offsetX, offsetY;
if ( touches && touches.length ) {
offsetX = mouseX - touches[0].clientX,
offsetY = mouseY - touches[0].clientY;
} else {
offsetX = mouseX - e.clientX,
offsetY = mouseY - e.clientY;
}
//--- left
if ( offsetX >= 50) {
if ( !isMoving ) {
isMoving = true;
nextMove();
}
}
//--- right
if ( offsetX <= -50) {
if ( !isMoving ) {
isMoving = true;
prevMove();
}
}
//--- up
if ( offsetY >= 50) {
}
//--- down
if ( offsetY <= -50) {
}
}
function dragEnd(e) {
document.removeEventListener( 'mousemove', dragProcess);
document.removeEventListener( 'touchmove', dragProcess);
//restore move action status
setTimeout( function() {
isMoving = false;
}, animSpeed);
}
}
/*
* Transition Between Slides
*
* @param {Number} elementIndex - Index of current slider.
* @param {Element} slider - Selector of the slider .
* @param {String} dir - Switching direction indicator.
* @param {String} countTotalID - Total number ID or class of counter.
* @param {String} countCurID - Current number ID or class of counter.
* @param {String} paginationID - Navigation ID for paging control of each slide.
* @param {String} arrowsID - Previous/Next arrow navigation ID.
* @param {Boolean} loop - Gives the slider a seamless infinite loop.
* @return {Void}
*/
function sliderUpdates( elementIndex, slider, dir, countTotalID, countCurID, paginationID, arrowsID, loop ) {
const $items = slider.find( '.uix-advanced-slider-sp__item' ),
total = $items.length;
//Prevent bubbling
if ( total == 1 ) {
$( paginationID ).hide();
$( arrowsID ).hide();
return false;
}
//Transition Interception
//-------------------------------------
if ( loop ) {
if ( elementIndex == total ) elementIndex = 0;
if ( elementIndex < 0 ) elementIndex = total-1;
} else {
$( arrowsID ).find( 'a' ).removeClass( 'is-disabled' );
if ( elementIndex == total - 1 ) $( arrowsID ).find( '.uix-advanced-slider-sp__arrows--next' ).addClass( 'is-disabled' );
if ( elementIndex == 0 ) $( arrowsID ).find( '.uix-advanced-slider-sp__arrows--prev' ).addClass( 'is-disabled' );
}
// To determine if it is a touch screen.
//-------------------------------------
if (Modernizr.touchevents) {
if ( elementIndex == total ) elementIndex = total-1;
if ( elementIndex < 0 ) elementIndex = 0;
//Prevent bubbling
if ( !loop ) {
//first item
if ( elementIndex == 0 ) {
$( arrowsID ).find( '.uix-advanced-slider-sp__arrows--prev' ).addClass( 'is-disabled' );
}
//last item
if ( elementIndex == total - 1 ) {
$( arrowsID ).find( '.uix-advanced-slider-sp__arrows--next' ).addClass( 'is-disabled' );
}
}
}
// call the current item
//-------------------------------------
const $current = $items.eq( elementIndex );
//Determine the direction and add class to switching direction indicator.
//-------------------------------------
let dirIndicatorClass = '';
if ( dir == 'prev' ) dirIndicatorClass = 'prev';
if ( dir == 'next' ) dirIndicatorClass = 'next';
//Add transition class to Controls Pagination
//-------------------------------------
$( paginationID ).find( 'li a' ).removeClass( 'leave' );
$( paginationID ).find( 'li a.is-active' ).removeClass( 'is-active' ).addClass( 'leave' );
$( paginationID ).find( 'li a[data-index="'+elementIndex+'"]' ).addClass( 'is-active' ).removeClass( 'leave' );
//Add transition class to each item
//-------------------------------------
$items.removeClass( 'leave prev next' );
$items.addClass( dirIndicatorClass );
slider.find( '.uix-advanced-slider-sp__item.is-active' ).removeClass( 'is-active' ).addClass( 'leave ' + dirIndicatorClass );
$current.addClass( 'is-active ' + dirIndicatorClass ).removeClass( 'leave' );
//Display counter
//-------------------------------------
$( countTotalID ).text( total );
$( countCurID ).text( parseFloat( elementIndex ) + 1 );
// Fires local videos asynchronously with slider switch.
//-------------------------------------
if ( !Modernizr.webgl )