Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'develop' of https://github.com/woothemes/FlexSlider int…

…o clean-develop
  • Loading branch information...
commit 19b8d8478718da7d013d12ff1d6a51ba819e9c12 2 parents b16ffc5 + 182cac6
@mattyza mattyza authored
Showing with 44 additions and 4 deletions.
  1. +44 −4 jquery.flexslider.js
View
48 jquery.flexslider.js
@@ -36,7 +36,9 @@
methods = {
init: function() {
slider.animating = false;
- slider.currentSlide = slider.vars.startAt;
+ // Get current slide and make sure it is a number
+ slider.currentSlide = parseInt( ( slider.vars.startAt ? slider.vars.startAt : 0) );
+ if ( isNaN( slider.currentSlide ) ) slider.currentSlide = 0;
slider.animatingTo = slider.currentSlide;
slider.atEnd = (slider.currentSlide === 0 || slider.currentSlide === slider.last);
slider.containerSelector = slider.vars.selector.substr(0,slider.vars.selector.search(' '));
@@ -52,6 +54,9 @@
// SLIDESHOW:
slider.manualPause = false;
slider.stopped = false;
+ //PAUSE WHEN INVISIBLE
+ slider.started = false;
+ slider.startTimeout = null;
// TOUCH/USECSS:
slider.transitions = !slider.vars.video && !fade && slider.vars.useCSS && (function() {
var obj = document.createElement('div'),
@@ -110,6 +115,9 @@
// PAUSEPLAY
if (slider.vars.pausePlay) methods.pausePlay.setup();
+ //PAUSE WHEN INVISIBLE
+ if (slider.vars.slideshow && slider.vars.pauseInvisible) methods.pauseInvisible.init();
+
// SLIDSESHOW
if (slider.vars.slideshow) {
if (slider.vars.pauseOnHover) {
@@ -120,7 +128,10 @@
});
}
// initialize animation
- (slider.vars.initDelay > 0) ? setTimeout(slider.play, slider.vars.initDelay) : slider.play();
+ //If we're visible, or we don't use PageVisibility API
+ if(!slider.vars.pauseInvisible || !methods.pauseInvisible.isHidden()) {
+ (slider.vars.initDelay > 0) ? slider.startTimeout = setTimeout(slider.play, slider.vars.initDelay) : slider.play();
+ }
}
// ASNAV:
@@ -581,6 +592,34 @@
case "pause": $obj.pause(); break;
}
},
+ pauseInvisible: {
+ visProp: null,
+ init: function() {
+ var prefixes = ['webkit','moz','ms','o'];
+
+ if ('hidden' in document) return 'hidden';
+ for (var i = 0; i < prefixes.length; i++) {
+ if ((prefixes[i] + 'Hidden') in document)
+ methods.pauseInvisible.visProp = prefixes[i] + 'Hidden';
+ }
+ if (methods.pauseInvisible.visProp) {
+ var evtname = methods.pauseInvisible.visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
+ document.addEventListener(evtname, function() {
+ if (methods.pauseInvisible.isHidden()) {
+ if(slider.startTimeout) clearTimeout(slider.startTimeout); //If clock is ticking, stop timer and prevent from starting while invisible
+ else slider.pause(); //Or just pause
+ }
+ else {
+ if(slider.started) slider.play(); //Initiated before, just play
+ else (slider.vars.initDelay > 0) ? setTimeout(slider.play, slider.vars.initDelay) : slider.play(); //Didn't init before: simply init or wait for it
+ }
+ });
+ }
+ },
+ isHidden: function() {
+ return document[methods.pauseInvisible.visProp] || false;
+ }
+ },
setToClearWatchedEvent: function() {
clearTimeout(watchedEventClearTimer);
watchedEventClearTimer = setTimeout(function() {
@@ -731,7 +770,7 @@
// SLIDESHOW:
slider.play = function() {
slider.animatedSlides = slider.animatedSlides || setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
- slider.playing = true;
+ slider.started = slider.playing = true;
// PAUSEPLAY:
if (slider.vars.pausePlay) methods.pausePlay.update("pause");
// SYNC:
@@ -869,7 +908,7 @@
minItems = slider.vars.minItems,
maxItems = slider.vars.maxItems;
- slider.w = slider.width();
+ slider.w = (slider.viewport===undefined) ? slider.width() : slider.viewport.width();
slider.h = slide.height();
slider.boxPadding = slide.outerWidth() - slide.width();
@@ -1010,6 +1049,7 @@
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
+ pauseInvisible: true, //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
Please sign in to comment.
Something went wrong with that request. Please try again.