Merge remote-tracking branch 'refs/remotes/origin/dev'

README.md

@@ -2,7 +2,8 @@
 
 ![preview](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png)
 ![compatibility](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/compatible.gif)
-![fullPage.js version](https://img.shields.io/badge/fullPage.js-v2.7.5-brightgreen.svg)
+
+![fullPage.js version](https://img.shields.io/badge/fullPage.js-v2.7.6-brightgreen.svg)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 7Kb gziped!
 
@@ -714,7 +715,7 @@ gulp css
 // Only compress the JS
 gulp js
 
-// Runs all three tasks
+// Runs the css and js tasks (not the scss)
 gulp
 ```
 
@@ -743,8 +744,9 @@ If you want your page to be listed here. Please <a href="mailto:alvaro@alvarotri
 
 - https://www.britishairways.com/en-gb/information/travel-classes/experience-our-cabins
 - https://www.sony-asia.com/microsite/mdr-10/
-- https://www.saltaboombox.com.ar
 - https://www.yourprimer.com/
+- https://burntmovie.com/
+- https://essenso.com/
 - https://www.battlefield.com/
 - https://www.kibey.com/
 - https://www.newjumoconcept.com/

dist/jquery.fullpage.js

@@ -1,5 +1,5 @@
 /*!
- * fullPage 2.7.5
+ * fullPage 2.7.6
  * https://github.com/alvarotrigo/fullPage.js
  * @license MIT licensed
  *
@@ -380,11 +380,12 @@
  FP.reBuild = function(resizing){
  if(container.hasClass(DESTROYED)){ return; } //nothing to do if the plugin was destroyed
 
+ isResizing = true;
  requestAnimFrame(function(){
  isResizing = true;
  });
 
- var windowsWidth = $window.width();
+ var windowsWidth = window.outerWidth;
  windowsHeight = $window.height(); //updating global var
 
  //text resizing
@@ -429,6 +430,7 @@
  FP.silentMoveTo(sectionIndex + 1);
  }
 
+ isResizing = false;
  requestAnimFrame(function(){
  isResizing = false;
  });
@@ -499,7 +501,7 @@
 
  //no anchors option? Checking for them in the DOM attributes
  if(!options.anchors.length){
- options.anchors = $('[data-anchor]').map(function(){
+ options.anchors = $(options.sectionSelector + '[data-anchor]').map(function(){
  return $(this).data('anchor').toString();
  }).get();
  }
@@ -939,7 +941,7 @@
  if (activeSection.find(SLIDES_WRAPPER_SEL).length && Math.abs(touchStartX - touchEndX) > (Math.abs(touchStartY - touchEndY))) {
 
  //is the movement greater than the minimum resistance to scroll?
- if (Math.abs(touchStartX - touchEndX) > ($window.width() / 100 * options.touchSensitivity)) {
+ if (Math.abs(touchStartX - touchEndX) > (window.outerWidth / 100 * options.touchSensitivity)) {
  if (touchStartX > touchEndX) {
  if(isScrollAllowed.m.right){
  FP.moveSlideRight(); //next
@@ -1178,7 +1180,7 @@
  if(typeof dest === 'undefined'){ return; } //there's no element to scroll, leaving the function
 
  //auto height? Scrolling only a bit, the next element's height. Otherwise the whole viewport.
- var dtop = element.hasClass(AUTO_HEIGHT) ? (dest.top - windowsHeight + element.height()) : dest.top;
+ var dtop = element.hasClass(AUTO_HEIGHT) && dest.top ? (dest.top - windowsHeight + element.height()) : dest.top;
 
  //local variables
  var v = {
@@ -1219,10 +1221,9 @@
  if($.isFunction(options.onLeave) && !v.localIsResizing){
  if(options.onLeave.call(v.activeSection, v.leavingSection, (v.sectionIndex + 1), v.yMovement) === false){
  return;
- }else{
- stopMedia(v.activeSection);
  }
  }
+ stopMedia(v.activeSection);
 
  element.addClass(ACTIVE).siblings().removeClass(ACTIVE);
  lazyLoad(element);
@@ -1370,11 +1371,7 @@
  * Lazy loads image, video and audio elements.
  */
  function lazyLoad(destiny){
- //Lazy loading images, videos and audios
- var slide = destiny.find(SLIDE_ACTIVE_SEL);
- if( slide.length ) {
- destiny = $(slide);
- }
+ var destiny = getSlideOrSection(destiny);
 
  destiny.find('img[data-src], source[data-src], audio[data-src]').each(function(){
  $(this).attr('src', $(this).data('src'));
@@ -1390,6 +1387,8 @@
  * Plays video and audio elements.
  */
  function playMedia(destiny){
+ var destiny = getSlideOrSection(destiny);
+
  //playing HTML5 media elements
  destiny.find('video, audio').each(function(){
  var element = $(this).get(0);
@@ -1404,6 +1403,8 @@
  * Stops video and audio elements.
  */
  function stopMedia(destiny){
+ var destiny = getSlideOrSection(destiny);
+
  //stopping HTML5 media elements
  destiny.find('video, audio').each(function(){
  var element = $(this).get(0);
@@ -1414,6 +1415,18 @@
  });
  }
 
+ /**
+ * Gets the active slide (or section) for the given section
+ */
+ function getSlideOrSection(destiny){
+ var slide = destiny.find(SLIDE_ACTIVE_SEL);
+ if( slide.length ) {
+ destiny = $(slide);
+ }
+
+ return destiny;
+ }
+
  /**
  * Scrolls to the anchor in the URL when loading the site
  */
@@ -1662,13 +1675,13 @@
  var anchorLink = section.data('anchor');
  var slidesNav = section.find(SLIDES_NAV_SEL);
  var slideAnchor = getAnchor(destiny);
+ var prevSlide = section.find(SLIDE_ACTIVE_SEL);
 
  //caching the value of isResizing at the momment the function is called
  //because it will be checked later inside a setTimeout and the value might change
  var localIsResizing = isResizing;
 
  if(options.onSlideLeave){
- var prevSlide = section.find(SLIDE_ACTIVE_SEL);
  var prevSlideIndex = prevSlide.index();
  var xMovement = getXmovement(prevSlideIndex, slideIndex);
 
@@ -1682,6 +1695,7 @@
  }
  }
  }
+ stopMedia(prevSlide);
 
  destiny.addClass(ACTIVE).siblings().removeClass(ACTIVE);
  if(!localIsResizing){
@@ -1706,6 +1720,8 @@
  if(!localIsResizing){
  $.isFunction( options.afterSlideLoad ) && options.afterSlideLoad.call( destiny, anchorLink, (sectionIndex + 1), slideAnchor, slideIndex);
  }
+ playMedia(destiny);
+
  //letting them slide again
  slideMoving = false;
  };
@@ -1773,7 +1789,7 @@
  var heightLimit = options.responsiveHeight;
 
  //only calculating what we need. Remember its called on the resize event.
- var isBreakingPointWidth = widthLimit && $window.width() < widthLimit;
+ var isBreakingPointWidth = widthLimit && window.outerWidth < widthLimit;
  var isBreakingPointHeight = heightLimit && $window.height() < heightLimit;
 
  if(widthLimit && heightLimit){
@@ -1979,7 +1995,7 @@
  */
  function getSectionByAnchor(sectionAnchor){
  //section
- var section = $(SECTION_SEL + '[data-anchor="'+sectionAnchor+'"]');
+ var section = container.find(SECTION_SEL + '[data-anchor="'+sectionAnchor+'"]');
  if(!section.length){
  section = $(SECTION_SEL).eq( (sectionAnchor -1) );
  }
@@ -2451,7 +2467,7 @@
 
  //removing added classes
  $(SECTION_SEL + ', ' + SLIDE_SEL).each(function(){
- removeSlimScroll($(this));
+ options.scrollOverflowHandler.remove($(this));
  $(this).removeClass(TABLE + ' ' + ACTIVE);
  });
 
@@ -2465,6 +2481,12 @@
 
  //scrolling the page to the top with no animation
  $htmlBody.scrollTop(0);
+
+ //removing selectors
+ var usedSelectors = [SECTION, SLIDE, SLIDES_CONTAINER];
+ $.each(usedSelectors, function(index, value){
+ $('.' + value).removeClass(value);
+ });
  }
 
  /*

examples/autoMediaPlayPause.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html xmlns="https://www.w3.org/1999/xhtml">
+
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Background video - fullPage.js</title>
+ <meta name="author" content="Alvaro Trigo Lopez" />
+ <meta name="description" content="fullPage full-screen backgrounds." />
+ <meta name="keywords" content="fullpage,jquery,demo,screen,fullscreen,backgrounds,full-screen" />
+ <meta name="Resource-type" content="Document" />
+
+
+ <link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
+ <link rel="stylesheet" type="text/css" href="examples.css" />
+
+ <!--[if IE]>
+ <script type="text/javascript">
+ var console = { log: function() {} };
+ </script>
+ <![endif]-->
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
+
+ <script type="text/javascript" src="../jquery.fullPage.js"></script>
+ <script type="text/javascript" src="examples.js"></script>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $('#fullpage').fullpage({
+ verticalCentered: true,
+ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
+ });
+ });
+ </script>
+
+</head>
+<body>
+
+<select id="demosMenu">
+ <option selected>Choose Demo</option>
+ <option id="backgrounds">Background images</option>
+ <option id="backgroundVideo">Background video</option>
+ <option id="gradientBackgrounds">Gradient backgrounds</option>
+ <option id="backgroundsFixed">Fixed fullscreen backgrounds</option>
+ <option id="looping">Looping</option>
+ <option id="noAnchor">No anchor links</option>
+ <option id="scrollingSpeed">Scrolling speed</option>
+ <option id="easing">Easing</option>
+ <option id="callbacks">Callbacks</option>
+ <option id="css3">CSS3</option>
+ <option id="continuous">Continuous scrolling</option>
+ <option id="normalScroll">Normal scrolling</option>
+ <option id="scrollBar">Scroll bar enabled</option>
+ <option id="scrolling">Scroll inside sections and slides</option>
+ <option id="navigationV">Vertical navigation dots</option>
+ <option id="navigationH">Horizontal navigation dots</option>
+ <option id="fixedHeaders">Fixed headers</option>
+ <option id="apple">Apple iPhone demo (animations)</option>
+ <option id="oneSection">One single section</option>
+ <option id="responsiveHeight">Responsive Height</option>
+ <option id="responsiveWidth">Responsive Width</option>
+ <option id="methods">Methods</option>
+</select>
+
+<div id="fullpage">
+ <div class="section " id="section0">
+ <h1>auto play/pause</h1>
+ <p>When using the tag `autoplay` in the media element fullpage.js automatically plays media elements when accessing to the section/slide in which they are</p>
+ </div>
+ <div class="section" id="section1">
+ <div class="slide" id="slide1">
+ <h1>Videos</h1>
+ <video autoplay loop muted id="myVideo">
+ <source src="imgs/flowers.mp4" type="video/mp4">
+ <source src="imgs/flowers.webm" type="video/webm">
+ Your browser does not support the audio element.
+ </video>
+ </div>
+ <div class="slide" id="slide2">
+ <h1>Audio</h1>
+ <audio autoplay controls="">
+ <source src="imgs/horse.ogg" type="audio/ogg">
+ <source src="imgs/horse.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+ </div>
+ </div>
+ <div class="section" id="section2">
+ <h1>Audio</h1>
+ <audio autoplay controls="">
+ <source src="imgs/horse.ogg" type="audio/ogg">
+ <source src="imgs/horse.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+ </div>
+</div>
+
+</body>
+</html>