Team:NCTU Formosa/fullpage.js
/*!
* fullPage 2.6.9 * https://github.com/alvarotrigo/fullPage.js * @license MIT licensed * * Copyright (C) 2015 alvarotrigo.com - A project by Alvaro Trigo */
(function(global, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], function($) {
return factory($, global, global.document, global.Math);
});
} else if (typeof exports !== 'undefined') {
module.exports = factory(require('jquery'), global, global.document, global.Math);
} else {
factory(jQuery, global, global.document, global.Math);
}
})(typeof window !== 'undefined' ? window : this, function($, window, document, Math, undefined) {
'use strict';
// keeping central set of classnames and selectors var WRAPPER = 'fullpage-wrapper'; var WRAPPER_SEL = '.' + WRAPPER;
// slimscroll var SCROLLABLE = 'fp-scrollable'; var SCROLLABLE_SEL = '.' + SCROLLABLE; var SLIMSCROLL_BAR_SEL = '.slimScrollBar'; var SLIMSCROLL_RAIL_SEL = '.slimScrollRail';
// util var RESPONSIVE = 'fp-responsive'; var NO_TRANSITION = 'fp-notransition'; var DESTROYED = 'fp-destroyed'; var ENABLED = 'fp-enabled'; var VIEWING_PREFIX = 'fp-viewing'; var ACTIVE = 'active'; var ACTIVE_SEL = '.' + ACTIVE;
// section var SECTION_DEFAULT_SEL = '.section'; var SECTION = 'fp-section'; var SECTION_SEL = '.' + SECTION; var SECTION_ACTIVE_SEL = SECTION_SEL + ACTIVE_SEL; var SECTION_FIRST_SEL = SECTION_SEL + ':first'; var SECTION_LAST_SEL = SECTION_SEL + ':last'; var TABLE_CELL = 'fp-tableCell'; var TABLE_CELL_SEL = '.' + TABLE_CELL; var AUTO_HEIGHT = 'fp-auto-height';
// section nav var SECTION_NAV = 'fp-nav'; var SECTION_NAV_SEL = '#' + SECTION_NAV; var SECTION_NAV_TOOLTIP = 'fp-tooltip'; var SHOW_ACTIVE_TOOLTIP = 'fp-show-active';
// slide var SLIDE_DEFAULT_SEL = '.slide'; var SLIDE = 'fp-slide'; var SLIDE_SEL = '.' + SLIDE; var SLIDE_ACTIVE_SEL = SLIDE_SEL + ACTIVE_SEL; var SLIDES_WRAPPER = 'fp-slides'; var SLIDES_WRAPPER_SEL = '.' + SLIDES_WRAPPER; var SLIDES_CONTAINER = 'fp-slidesContainer'; var SLIDES_CONTAINER_SEL = '.' + SLIDES_CONTAINER; var TABLE = 'fp-table';
// slide nav var SLIDES_NAV = 'fp-slidesNav'; var SLIDES_NAV_SEL = '.' + SLIDES_NAV; var SLIDES_NAV_LINK_SEL = SLIDES_NAV_SEL + ' a'; var SLIDES_ARROW = 'fp-controlArrow'; var SLIDES_ARROW_SEL = '.' + SLIDES_ARROW; var SLIDES_PREV = 'fp-prev'; var SLIDES_PREV_SEL = '.' + SLIDES_PREV; var SLIDES_ARROW_PREV = SLIDES_ARROW + ' ' + SLIDES_PREV; var SLIDES_ARROW_PREV_SEL = SLIDES_ARROW_SEL + SLIDES_PREV_SEL; var SLIDES_NEXT = 'fp-next'; var SLIDES_NEXT_SEL = '.' + SLIDES_NEXT; var SLIDES_ARROW_NEXT = SLIDES_ARROW + ' ' + SLIDES_NEXT; var SLIDES_ARROW_NEXT_SEL = SLIDES_ARROW_SEL + SLIDES_NEXT_SEL;
var $window = $(window); var $document = $(document);
var afterSectionLoadsId; var afterSlideLoadsId;
$.fn.fullpage = function(options) {
// common jQuery objects
var $htmlBody = $('html, body');
var $body = $('body');
var FP = $.fn.fullpage;
// Create some defaults, extending them with any options that were provided
options = $.extend({
//navigation
menu: false,
anchors:[],
lockAnchors: false,
navigation: false,
navigationPosition: 'right',
navigationTooltips: [],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
scrollBar: false,
//scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: null,
scrollOverflow: false,
touchSensitivity: 5,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//design
controlArrows: true,
controlArrowColor: '#fff',
verticalCentered: true,
resize: false,
sectionsColor : [],
paddingTop: 0,
paddingBottom: 0,
fixedElements: null,
responsive: 0, //backwards compabitility with responsiveWiddth
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: SECTION_DEFAULT_SEL,
slideSelector: SLIDE_DEFAULT_SEL,
//events
afterLoad: null,
onLeave: null,
afterRender: null,
afterResize: null,
afterReBuild: null,
afterSlideLoad: null,
onSlideLeave: null
}, options);
displayWarnings();
//easeInOutCubic animation included in the plugin
$.extend($.easing,{ easeInOutCubic: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b;}});
//TO BE REMOVED in future versions. Maintained temporaly for backwards compatibility.
$.extend($.easing,{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }});
/**
* Sets the autoScroll option.
* It changes the scroll bar visibility and the history of the site as a result.
*/
FP.setAutoScrolling = function(value, type){
setVariableState('autoScrolling', value, type);
var element = $(SECTION_ACTIVE_SEL);
if(options.autoScrolling && !options.scrollBar){
$htmlBody.css({
'overflow' : 'hidden',
'height' : '100%'
});
FP.setRecordHistory(options.recordHistory, 'internal');
//for IE touch devices
container.css({
'-ms-touch-action': 'none',
'touch-action': 'none'
});
if(element.length){
//moving the container up
silentScroll(element.position().top);
}
}else{
$htmlBody.css({
'overflow' : 'visible',
'height' : 'initial'
});
FP.setRecordHistory(false, 'internal');
//for IE touch devices
container.css({
'-ms-touch-action': ,
'touch-action':
});
silentScroll(0);
//scrolling the page to the section with no animation
if (element.length) {
$htmlBody.scrollTop(element.position().top);
}
}
};
/**
* Defines wheter to record the history for each hash change in the URL.
*/
FP.setRecordHistory = function(value, type){
setVariableState('recordHistory', value, type);
};
/**
* Defines the scrolling speed
*/
FP.setScrollingSpeed = function(value, type){
setVariableState('scrollingSpeed', value, type);
};
/**
* Sets fitToSection
*/
FP.setFitToSection = function(value, type){
setVariableState('fitToSection', value, type);
};
/**
* Sets lockAnchors
*/
FP.setLockAnchors = function(value){
options.lockAnchors = value;
};
/**
* Adds or remove the possiblity of scrolling through sections by using the mouse wheel or the trackpad.
*/
FP.setMouseWheelScrolling = function (value){
if(value){
addMouseWheelHandler();
}else{
removeMouseWheelHandler();
}
};
/**
* Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures.
* Optionally a second parameter can be used to specify the direction for which the action will be applied.
*
* @param directions string containing the direction or directions separated by comma.
*/
FP.setAllowScrolling = function (value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,).split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
FP.setMouseWheelScrolling(true);
addTouchHandler();
}else{
FP.setMouseWheelScrolling(false);
removeTouchHandler();
}
};
/**
* Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys
*/
FP.setKeyboardScrolling = function (value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,).split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'k');
});
}else{
options.keyboardScrolling = value;
}
};
/**
* Moves the page up one section.
*/
FP.moveSectionUp = function(){
var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL);
//looping to the bottom if there's no more sections above
if (!prev.length && (options.loopTop || options.continuousVertical)) {
prev = $(SECTION_SEL).last();
}
if (prev.length) {
scrollPage(prev, null, true);
}
};
/**
* Moves the page down one section.
*/
FP.moveSectionDown = function (){
var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);
//looping to the top if there's no more sections below
if(!next.length &&
(options.loopBottom || options.continuousVertical)){
next = $(SECTION_SEL).first();
}
if(next.length){
// before slide move callback
if(options.onBeforeMoveSection && $.isFunction( options.onBeforeMoveSection )){
if(options.onBeforeMoveSection.call(this, direction, currentSlide, destiny, slides, activeSection) === false){
return;
}
}
scrollPage(next, null, false);
}
};
/**
* Moves the page to the given section and slide with no animation.
* Anchors or index positions can be used as params.
*/
FP.silentMoveTo = function(sectionAnchor, slideAnchor){
FP.setScrollingSpeed (0, 'internal');
FP.moveTo(sectionAnchor, slideAnchor)
FP.setScrollingSpeed (originals.scrollingSpeed, 'internal');
};
/**
* Moves the page to the given section and slide.
* Anchors or index positions can be used as params.
*/
FP.moveTo = function (sectionAnchor, slideAnchor){
var destiny = getSectionByAnchor(sectionAnchor);
if (typeof slideAnchor !== 'undefined'){
scrollPageAndSlide(sectionAnchor, slideAnchor);
}else if(destiny.length > 0){
scrollPage(destiny);
}
};
/**
* Slides right the slider of the active section.
*/
FP.moveSlideRight = function(){
moveSlide('next');
};
/**
* Slides left the slider of the active section.
*/
FP.moveSlideLeft = function(){
moveSlide('prev');
};
/**
* When resizing is finished, we adjust the slides sizes and positions
*/
FP.reBuild = function(resizing){
if(container.hasClass(DESTROYED)){ return; } //nothing to do if the plugin was destroyed
isResizing = true;
var windowsWidth = $window.width();
windowsHeight = $window.height(); //updating global var
//text resizing
if (options.resize) {
resizeMe(windowsHeight, windowsWidth);
}
$(SECTION_SEL).each(function(){
var slidesWrap = $(this).find(SLIDES_WRAPPER_SEL);
var slides = $(this).find(SLIDE_SEL);
//adjusting the height of the table-cell for IE and Firefox
if(options.verticalCentered){
$(this).find(TABLE_CELL_SEL).css('height', getTableHeight($(this)) + 'px');
}
$(this).css('height', windowsHeight + 'px');
//resizing the scrolling divs
if(options.scrollOverflow){
if(slides.length){
slides.each(function(){
createSlimScrolling($(this));
});
}else{
createSlimScrolling($(this));
}
}
//adjusting the position fo the FULL WIDTH slides...
if (slides.length > 1) {
landscapeScroll(slidesWrap, slidesWrap.find(SLIDE_ACTIVE_SEL));
}
});
var activeSection = $(SECTION_ACTIVE_SEL);
var sectionIndex = activeSection.index(SECTION_SEL);
//isn't it the first section?
if(sectionIndex){
//adjusting the position for the current section
FP.silentMoveTo(sectionIndex + 1);
}
isResizing = false;
$.isFunction( options.afterResize ) && resizing && options.afterResize.call(container);
$.isFunction( options.afterReBuild ) && !resizing && options.afterReBuild.call(container);
};
/**
* Turns fullPage.js to normal scrolling mode when the viewport `width` or `height`
* are smaller than the set limit values.
*/
FP.setResponsive = function (active){
var isResponsive = container.hasClass(RESPONSIVE);
if(active){
if(!isResponsive){
FP.setAutoScrolling(false, 'internal');
FP.setFitToSection(false, 'internal');
$(SECTION_NAV_SEL).hide();
container.addClass(RESPONSIVE);
}
}
else if(isResponsive){
FP.setAutoScrolling(originals.autoScrolling, 'internal');
FP.setFitToSection(originals.autoScrolling, 'internal');
$(SECTION_NAV_SEL).show();
container.removeClass(RESPONSIVE);
}
}
//flag to avoid very fast sliding for landscape sliders
var slideMoving = false;
var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/);
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
var container = $(this);
var windowsHeight = $window.height();
var isResizing = false;
var lastScrolledDestiny;
var lastScrolledSlide;
var canScroll = true;
var scrollings = [];
var nav;
var controlPressed;
var isScrollAllowed = {};
isScrollAllowed.m = { 'up':true, 'down':true, 'left':true, 'right':true };
isScrollAllowed.k = $.extend(true,{}, isScrollAllowed.m);
var originals = $.extend(true, {}, options); //deep copy
//timeouts
var resizeId;
var afterSectionLoadsId;
var afterSlideLoadsId;
var scrollId;
var scrollId2;
var keydownId;
if($(this).length){
init();
}
function init(){
container.css({
'height': '100%',
'position': 'relative'
});
//adding a class to recognize the container internally in the code
container.addClass(WRAPPER);
$('html').addClass(ENABLED);
//if css3 is not supported, it will use jQuery animations
if(options.css3){
options.css3 = support3d();
}
//no anchors option? Checking for them in the DOM attributes
if(!options.anchors.length){
options.anchors = $('[data-anchor]').map(function(){
return $(this).data('anchor').toString();
}).get();
}
FP.setAllowScrolling(true);
container.removeClass(DESTROYED); //in case it was destroyed before initilizing it again
addInternalSelectors();
//styling the sections / slides / menu
$(SECTION_SEL).each(function(index){
var section = $(this);
var slides = section.find(SLIDE_SEL);
var numSlides = slides.length;
styleSection(section, index);
styleMenu(section, index);
// if there's any slide
if (numSlides > 0) {
styleSlides(section, slides, numSlides);
}else{
if(options.verticalCentered){
addTableClass(section);
}
}
});
FP.setAutoScrolling(options.autoScrolling, 'internal');
//the starting point is a slide?
var activeSlide = $(SECTION_ACTIVE_SEL).find(SLIDE_ACTIVE_SEL);
//the active section isn't the first one? Is not the first slide of the first section? Then we load that section/slide by default.
if( activeSlide.length && ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) !== 0 || ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) === 0 && activeSlide.index() !== 0))){
silentLandscapeScroll(activeSlide);
}
//fixed elements need to be moved out of the plugin container due to problems with CSS3.
if(options.fixedElements && options.css3){
$(options.fixedElements).appendTo($body);
}
//vertical centered of the navigation + active bullet
if(options.navigation){
addVerticalNavigation();
}
if(options.scrollOverflow){
if(document.readyState === 'complete'){
createSlimScrollingHandler();
}
//after DOM and images are loaded
$window.on('load', createSlimScrollingHandler);
}else{
afterRenderActions();
}
responsive();
//for animateAnchor:false
if(!options.animateAnchor){
//getting the anchor link in the URL and deleting the `#`
var value = window.location.hash.replace('#', ).split('/');
var destiny = value[0];
if(destiny.length){
var section = $('[data-anchor="'+destiny+'"]');
if(section.length){
if(options.autoScrolling){
silentScroll(section.position().top);
}
else{
silentScroll(0);
//scrolling the page to the section with no animation
$htmlBody.scrollTop(section.position().top);
}
activateMenuAndNav(destiny, null);
$.isFunction( options.afterLoad ) && options.afterLoad.call( section, destiny, (section.index(SECTION_SEL) + 1));
//updating the active class
section.addClass(ACTIVE).siblings().removeClass(ACTIVE);
}
}
}
//setting the class for the body element
setBodyClass();
$window.on('load', function() {
scrollToAnchor();
});
}
/**
* Styles the horizontal slides for a section.
*/
function styleSlides(section, slides, numSlides){
var sliderWidth = numSlides * 100;
var slideWidth = 100 / numSlides;
slides.wrapAll('<div class="' + SLIDES_CONTAINER + '" />');
slides.parent().wrap('<div class="' + SLIDES_WRAPPER + '" />');
section.find(SLIDES_CONTAINER_SEL).css('width', sliderWidth + '%');
if(numSlides > 1){
if(options.controlArrows){
createSlideArrows(section);
}
if(options.slidesNavigation){
addSlidesNavigation(section, numSlides);
}
}
slides.each(function(index) {
$(this).css('width', slideWidth + '%');
if(options.verticalCentered){
addTableClass($(this));
}
});
var startingSlide = section.find(SLIDE_ACTIVE_SEL);
//if the slide won't be an starting point, the default will be the first one
if(!startingSlide.length){
slides.eq(0).addClass(ACTIVE);
}
//is there a starting point for a non-starting section?
else{
silentLandscapeScroll(startingSlide);
}
}
/**
* Styling vertical sections
*/
function styleSection(section, index){
//if no active section is defined, the 1st one will be the default one
if(!index && $(SECTION_ACTIVE_SEL).length === 0) {
section.addClass(ACTIVE);
}
section.css('height', windowsHeight + 'px');
if(options.paddingTop){
section.css('padding-top', options.paddingTop);
}
if(options.paddingBottom){
section.css('padding-bottom', options.paddingBottom);
}
if (typeof options.sectionsColor[index] !== 'undefined') {
section.css('background-color', options.sectionsColor[index]);
}
}
/**
* Sets the data-anchor attributes to the menu elements and activates the current one.
*/
function styleMenu(section, index){
if (typeof options.anchors[index] !== 'undefined') {
section.attr('data-anchor', options.anchors[index]);
//activating the menu / nav element on load
if(section.hasClass(ACTIVE)){
activateMenuAndNav(options.anchors[index], index);
}
}
//moving the menu outside the main container if it is inside (avoid problems with fixed positions when using CSS3 tranforms)
if(options.menu && options.css3 && $(options.menu).closest(WRAPPER_SEL).length){
$(options.menu).appendTo($body);
}
}
/**
* Adds internal classes to be able to provide customizable selectors
* keeping the link with the style sheet.
*/
function addInternalSelectors(){
//adding internal class names to void problem with common ones
$(options.sectionSelector).each(function(){
$(this).addClass(SECTION);
});
$(options.slideSelector).each(function(){
$(this).addClass(SLIDE);
});
}
/**
* Creates the control arrows for the given section
*/
function createSlideArrows(section){
section.find(SLIDES_WRAPPER_SEL).after('');
if(options.controlArrowColor!='#fff'){
section.find(SLIDES_ARROW_NEXT_SEL).css('border-color', 'transparent transparent transparent '+options.controlArrowColor);
section.find(SLIDES_ARROW_PREV_SEL).css('border-color', 'transparent '+ options.controlArrowColor + ' transparent transparent');
}
if(!options.loopHorizontal){
section.find(SLIDES_ARROW_PREV_SEL).hide();
}
}
/**
* Creates a vertical navigation bar.
*/
function addVerticalNavigation(){
$body.append('var nav = $(SECTION_NAV_SEL);
nav.addClass(function() {
return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
});
for (var i = 0; i < $(SECTION_SEL).length; i++) {
var link = ;
if (options.anchors.length) {
link = options.anchors[i];
}
var li = '}li += '
nav.find('ul').append(li);
}
//centering it vertically
$(SECTION_NAV_SEL).css('margin-top', '-' + ($(SECTION_NAV_SEL).height()/2) + 'px');
//activating the current active section
$(SECTION_NAV_SEL).find('li').eq($(SECTION_ACTIVE_SEL).index(SECTION_SEL)).find('a').addClass(ACTIVE);
}
/**
* Creates the slim scroll scrollbar for the sections and slides inside them.
*/
function createSlimScrollingHandler(){
$(SECTION_SEL).each(function(){
var slides = $(this).find(SLIDE_SEL);
if(slides.length){
slides.each(function(){
createSlimScrolling($(this));
});
}else{
createSlimScrolling($(this));
}
});
afterRenderActions();
}
/**
* Actions and callbacks to fire afterRender
*/
function afterRenderActions(){
var section = $(SECTION_ACTIVE_SEL);
solveBugSlimScroll(section);
lazyLoad(section);
playMedia(section);
$.isFunction( options.afterLoad ) && options.afterLoad.call(section, section.data('anchor'), (section.index(SECTION_SEL) + 1));
$.isFunction( options.afterRender ) && options.afterRender.call(container);
}
/**
* Solves a bug with slimScroll vendor library #1037, #553
*/
function solveBugSlimScroll(section){
var slides = section.find('SLIDES_WRAPPER');
var scrollableWrap = section.find(SCROLLABLE_SEL);
if(slides.length){
scrollableWrap = slides.find(SLIDE_ACTIVE_SEL);
}
scrollableWrap.mouseover();
}
var isScrolling = false;
//when scrolling...
$window.on('scroll', scrollHandler);
function scrollHandler(){
var currentSection;
if(!options.autoScrolling || options.scrollBar){
var currentScroll = $window.scrollTop();
var visibleSectionIndex = 0;
var initial = Math.abs(currentScroll - document.querySelectorAll(SECTION_SEL)[0].offsetTop);
//taking the section which is showing more content in the viewport
var sections = document.querySelectorAll(SECTION_SEL);
for (var i = 0; i < sections.length; ++i) {
var section = sections[i];
var current = Math.abs(currentScroll - section.offsetTop);
if(current < initial){
visibleSectionIndex = i;
initial = current;
}
}
//geting the last one, the current one on the screen
currentSection = $(sections).eq(visibleSectionIndex);
}
if(!options.autoScrolling || options.scrollBar){
//executing only once the first time we reach the section
if(!currentSection.hasClass(ACTIVE)){
isScrolling = true;
var leavingSection = $(SECTION_ACTIVE_SEL);
var leavingSectionIndex = leavingSection.index(SECTION_SEL) + 1;
var yMovement = getYmovement(currentSection);
var anchorLink = currentSection.data('anchor');
var sectionIndex = currentSection.index(SECTION_SEL) + 1;
var activeSlide = currentSection.find(SLIDE_ACTIVE_SEL);
if(activeSlide.length){
var slideAnchorLink = activeSlide.data('anchor');
var slideIndex = activeSlide.index();
}
if(canScroll){
currentSection.addClass(ACTIVE).siblings().removeClass(ACTIVE);
$.isFunction( options.onLeave ) && options.onLeave.call( leavingSection, leavingSectionIndex, sectionIndex, yMovement);
$.isFunction( options.afterLoad ) && options.afterLoad.call( currentSection, anchorLink, sectionIndex);
lazyLoad(currentSection);
activateMenuAndNav(anchorLink, sectionIndex - 1);
if(options.anchors.length){
//needed to enter in hashChange event when using the menu with anchor links
lastScrolledDestiny = anchorLink;
setState(slideIndex, slideAnchorLink, anchorLink, sectionIndex);
}
}
//small timeout in order to avoid entering in hashChange event when scrolling is not finished yet
clearTimeout(scrollId);
scrollId = setTimeout(function(){
isScrolling = false;
}, 100);
}
if(options.fitToSection){
//for the auto adjust of the viewport to fit a whole section
clearTimeout(scrollId2);
scrollId2 = setTimeout(function(){
if(canScroll){
//allows to scroll to an active section and
//if the section is already active, we prevent firing callbacks
if($(SECTION_ACTIVE_SEL).is(currentSection)){
isResizing = true;
}
scrollPage(currentSection);
isResizing = false;
}
}, options.fitToSectionDelay);
}
}
}
/**
* Determines whether the active section or slide is scrollable through and scrolling bar
*/
function isScrollable(activeSection){
//if there are landscape slides, we check if the scrolling bar is in the current one or not
if(activeSection.find(SLIDES_WRAPPER_SEL).length){
return activeSection.find(SLIDE_ACTIVE_SEL).find(SCROLLABLE_SEL);
}
return activeSection.find(SCROLLABLE_SEL);
}
/**
* Determines the way of scrolling up or down:
* by 'automatically' scrolling a section or by using the default and normal scrolling.
*/
function scrolling(type, scrollable){
if (!isScrollAllowed.m[type]){
return;
}
var check, scrollSection;
if(type == 'down'){
check = 'bottom';
scrollSection = FP.moveSectionDown;
}else{
check = 'top';
scrollSection = FP.moveSectionUp;
}
if(scrollable.length > 0 ){
//is the scrollbar at the start/end of the scroll?
if(isScrolled(check, scrollable)){
scrollSection();
}else{
return true;
}
}else{
// moved up/down
scrollSection();
}
}
var touchStartY = 0;
var touchStartX = 0;
var touchEndY = 0;
var touchEndX = 0;
/* Detecting touch events
* As we are changing the top property of the page on scrolling, we can not use the traditional way to detect it.
* This way, the touchstart and the touch moves shows an small difference between them which is the
* used one to determine the direction.
*/
function touchMoveHandler(event){
var e = event.originalEvent;
// additional: if one of the normalScrollElements isn't within options.normalScrollElementTouchThreshold hops up the DOM chain
if (!checkParentForNormalScrollElement(event.target) && isReallyTouch(e) ) {
if(options.autoScrolling){
//preventing the easing on iOS devices
event.preventDefault();
}
var activeSection = $(SECTION_ACTIVE_SEL);
var scrollable = isScrollable(activeSection);
if (canScroll && !slideMoving) { //if theres any #
var touchEvents = getEventsPage(e);
touchEndY = touchEvents.y;
touchEndX = touchEvents.x;
//if movement in the X axys is greater than in the Y and the currect section has slides...
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 (touchStartX > touchEndX) {
if(isScrollAllowed.m.right){
FP.moveSlideRight(); //next
}
} else {
if(isScrollAllowed.m.left){
FP.moveSlideLeft(); //prev
}
}
}
}
//vertical scrolling (only when autoScrolling is enabled)
else if(options.autoScrolling){
//is the movement greater than the minimum resistance to scroll?
if (Math.abs(touchStartY - touchEndY) > ($window.height() / 100 * options.touchSensitivity)) {
if (touchStartY > touchEndY) {
scrolling('down', scrollable);
} else if (touchEndY > touchStartY) {
scrolling('up', scrollable);
}
}
}
}
}
}
/**
* recursive function to loop up the parent nodes to check if one of them exists in options.normalScrollElements
* Currently works well for iOS - Android might need some testing
* @param {Element} el target element / jquery selector (in subsequent nodes)
* @param {int} hop current hop compared to options.normalScrollElementTouchThreshold
* @return {boolean} true if there is a match to options.normalScrollElements
*/
function checkParentForNormalScrollElement (el, hop) {
hop = hop || 0;
var parent = $(el).parent();
if (hop < options.normalScrollElementTouchThreshold &&
parent.is(options.normalScrollElements) ) {
return true;
} else if (hop == options.normalScrollElementTouchThreshold) {
return false;
} else {
return checkParentForNormalScrollElement(parent, ++hop);
}
}
/**
* As IE >= 10 fires both touch and mouse events when using a mouse in a touchscreen
* this way we make sure that is really a touch event what IE is detecting.
*/
function isReallyTouch(e){
//if is not IE || IE is detecting `touch` or `pen`
return typeof e.pointerType === 'undefined' || e.pointerType != 'mouse';
}
/**
* Handler for the touch start event.
*/
function touchStartHandler(event){
var e = event.originalEvent;
//stopping the auto scroll to adjust to a section
if(options.fitToSection){
$htmlBody.stop();
}
if(isReallyTouch(e)){
var touchEvents = getEventsPage(e);
touchStartY = touchEvents.y;
touchStartX = touchEvents.x;
}
}
/**
* Gets the average of the last `number` elements of the given array.
*/
function getAverage(elements, number){
var sum = 0;
//taking `number` elements from the end to make the average, if there are not enought, 1
var lastElements = elements.slice(Math.max(elements.length - number, 1));
for(var i = 0; i < lastElements.length; i++){
sum = sum + lastElements[i];
}
return Math.ceil(sum/number);
}
/**
* Detecting mousewheel scrolling
*
* http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
* http://www.sitepoint.com/html5-javascript-mouse-wheel/
*/
var prevTime = new Date().getTime();
function MouseWheelHandler(e) {
var curTime = new Date().getTime();
//autoscrolling and not zooming?
if(options.autoScrolling && !controlPressed){
// cross-browser wheel delta
e = e || window.event;
var value = e.wheelDelta || -e.deltaY || -e.detail;
var delta = Math.max(-1, Math.min(1, value));
//Limiting the array to 150 (lets not waste memory!)
if(scrollings.length > 149){
scrollings.shift();
}
//keeping record of the previous scrollings
scrollings.push(Math.abs(value));
//preventing to scroll the site on mouse wheel when scrollbar is present
if(options.scrollBar){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
var activeSection = $(SECTION_ACTIVE_SEL);
var scrollable = isScrollable(activeSection);
//time difference between the last scroll and the current one
var timeDiff = curTime-prevTime;
prevTime = curTime;
//haven't they scrolled in a while?
//(enough to be consider a different scrolling action to scroll another section)
if(timeDiff > 200){
//emptying the array, we dont care about old scrollings for our averages
scrollings = [];
}
if(canScroll){
var averageEnd = getAverage(scrollings, 10);
var averageMiddle = getAverage(scrollings, 70);
var isAccelerating = averageEnd >= averageMiddle;
//to avoid double swipes...
if(isAccelerating){
//scrolling down?
if (delta < 0) {
scrolling('down', scrollable);
//scrolling up?
}else {
scrolling('up', scrollable);
}
}
}
return false;
}
if(options.fitToSection){
//stopping the auto scroll to adjust to a section
$htmlBody.stop();
}
}
/**
* Slides a slider to the given direction.
*/
function moveSlide(direction){
var activeSection = $(SECTION_ACTIVE_SEL);
var slides = activeSection.find(SLIDES_WRAPPER_SEL);
var numSlides = slides.find(SLIDE_SEL).length;
// more than one slide needed and nothing should be sliding
if (!slides.length || slideMoving || numSlides < 2) {
return;
}
var currentSlide = slides.find(SLIDE_ACTIVE_SEL);
var destiny = null;
if(direction === 'prev'){
destiny = currentSlide.prev(SLIDE_SEL);
}else{
destiny = currentSlide.next(SLIDE_SEL);
}
//isn't there a next slide in the secuence?
if(!destiny.length){
//respect loopHorizontal settin
if (!options.loopHorizontal) return;
if(direction === 'prev'){
destiny = currentSlide.siblings(':last');
}else{
destiny = currentSlide.siblings(':first');
}
}
slideMoving = true;
landscapeScroll(slides, destiny);
}
/**
* Maintains the active slides in the viewport
* (Because he `scroll` animation might get lost with some actions, such as when using continuousVertical)
*/
function keepSlidesPosition(){
$(SLIDE_ACTIVE_SEL).each(function(){
silentLandscapeScroll($(this), 'internal');
});
}
//IE < 10 pollify for requestAnimationFrame
window.requestAnimFrame = function(){
return window.requestAnimationFrame || function(callback){ callback() }
}();
/**
* Scrolls the site to the given element and scrolls to the slide if a callback is given.
*/
function scrollPage(element, callback, isMovementUp){
//requestAnimFrame is used in order to prevent a Chrome 44 bug (http://stackoverflow.com/a/31961816/1081396)
requestAnimFrame(function(){
var dest = element.position();
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;
//local variables
var v = {
element: element,
callback: callback,
isMovementUp: isMovementUp,
dest: dest,
dtop: dtop,
yMovement: getYmovement(element),
anchorLink: element.data('anchor'),
sectionIndex: element.index(SECTION_SEL),
activeSlide: element.find(SLIDE_ACTIVE_SEL),
activeSection: $(SECTION_ACTIVE_SEL),
leavingSection: $(SECTION_ACTIVE_SEL).index(SECTION_SEL) + 1,
//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
localIsResizing: isResizing
};
//quiting when destination scroll is the same as the current one
if((v.activeSection.is(element) && !isResizing) || (options.scrollBar && $window.scrollTop() === v.dtop)){ return; }
if(v.activeSlide.length){
var slideAnchorLink = v.activeSlide.data('anchor');
var slideIndex = v.activeSlide.index();
}
// If continuousVertical && we need to wrap around
if (options.autoScrolling && options.continuousVertical && typeof (v.isMovementUp) !== "undefined" &&
((!v.isMovementUp && v.yMovement == 'up') || // Intending to scroll down but about to go up or
(v.isMovementUp && v.yMovement == 'down'))) { // intending to scroll up but about to go down
v = createInfiniteSections(v);
}
//callback (onLeave) if the site is not just resizing and readjusting the slides
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);
}
}
element.addClass(ACTIVE).siblings().removeClass(ACTIVE);
//preventing from activating the MouseWheelHandler event
//more than once if the page is scrolling
canScroll = false;
setState(slideIndex, slideAnchorLink, v.anchorLink, v.sectionIndex);
performMovement(v);
//flag to avoid callingn `scrollPage()` twice in case of using anchor links
lastScrolledDestiny = v.anchorLink;
//avoid firing it twice (as it does also on scroll)
activateMenuAndNav(v.anchorLink, v.sectionIndex);
});
}
/**
* Performs the movement (by CSS3 or by jQuery)
*/
function performMovement(v){
// using CSS3 translate functionality
if (options.css3 && options.autoScrolling && !options.scrollBar) {
var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
transformContainer(translate3d, true);
//even when the scrollingSpeed is 0 there's a little delay, which might cause the
//scrollingSpeed to change in case of using silentMoveTo();
if(options.scrollingSpeed){
afterSectionLoadsId = setTimeout(function () {
afterSectionLoads(v);
}, options.scrollingSpeed);
}else{
afterSectionLoads(v);
}
}
// using jQuery animate
else{
var scrollSettings = getScrollSettings(v);
$(scrollSettings.element).animate(
scrollSettings.options,
options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body`
afterSectionLoads(v);
});
}
}
/**
* Gets the scrolling settings depending on the plugin autoScrolling option
*/
function getScrollSettings(v){
var scroll = {};
if(options.autoScrolling && !options.scrollBar){
scroll.options = { 'top': -v.dtop};
scroll.element = WRAPPER_SEL;
}else{
scroll.options = { 'scrollTop': v.dtop};
scroll.element = 'html, body';
}
return scroll;
}
/**
* Adds sections before or after the current one to create the infinite effect.
*/
function createInfiniteSections(v){
// Scrolling down
if (!v.isMovementUp) {
// Move all previous sections to after the active section
$(SECTION_ACTIVE_SEL).after(v.activeSection.prevAll(SECTION_SEL).get().reverse());
}
else { // Scrolling up
// Move all next sections to before the active section
$(SECTION_ACTIVE_SEL).before(v.activeSection.nextAll(SECTION_SEL));
}
// Maintain the displayed position (now that we changed the element order)
silentScroll($(SECTION_ACTIVE_SEL).position().top);
// Maintain the active slides visible in the viewport
keepSlidesPosition();
// save for later the elements that still need to be reordered
v.wrapAroundElements = v.activeSection;
// Recalculate animation variables
v.dest = v.element.position();
v.dtop = v.dest.top;
v.yMovement = getYmovement(v.element);
return v;
}
/**
* Fix section order after continuousVertical changes have been animated
*/
function continuousVerticalFixSectionOrder (v) {
// If continuousVertical is in effect (and autoScrolling would also be in effect then),
// finish moving the elements around so the direct navigation will function more simply
if (!v.wrapAroundElements || !v.wrapAroundElements.length) {
return;
}
if (v.isMovementUp) {
$(SECTION_FIRST_SEL).before(v.wrapAroundElements);
}
else {
$(SECTION_LAST_SEL).after(v.wrapAroundElements);
}
silentScroll($(SECTION_ACTIVE_SEL).position().top);
// Maintain the active slides visible in the viewport
keepSlidesPosition();
}
/**
* Actions to do once the section is loaded.
*/
function afterSectionLoads (v){
continuousVerticalFixSectionOrder(v);
v.element.find('.fp-scrollable').mouseover();
//callback (afterLoad) if the site is not just resizing and readjusting the slides
$.isFunction(options.afterLoad) && !v.localIsResizing && options.afterLoad.call(v.element, v.anchorLink, (v.sectionIndex + 1));
lazyLoad(v.element);
playMedia(v.element)
canScroll = true;
$.isFunction(v.callback) && v.callback.call(this);
}
/**
* 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);
}
destiny.find('img[data-src], source[data-src], audio[data-src]').each(function(){
$(this).attr('src', $(this).data('src'));
$(this).removeAttr('data-src');
if($(this).is('source')){
$(this).closest('video').get(0).load();
}
});
}
/**
* Plays video and audio elements.
*/
function playMedia(destiny){
//playing HTML5 media elements
destiny.find('video, audio').each(function(){
var element = $(this).get(0);
if( element.hasAttribute('autoplay') && typeof element.play === 'function' ) {
element.play();
}
});
}
/**
* Stops video and audio elements.
*/
function stopMedia(destiny){
//stopping HTML5 media elements
destiny.find('video, audio').each(function(){
var element = $(this).get(0);
if( !element.hasAttribute('data-ignore') && typeof element.pause === 'function' ) {
element.pause();
}
});
}
/**
* Scrolls to the anchor in the URL when loading the site
*/
function scrollToAnchor(){
//getting the anchor link in the URL and deleting the `#`
var value = window.location.hash.replace('#', ).split('/');
var section = value[0];
var slide = value[1];
if(section){ //if theres any #
scrollPageAndSlide(section, slide);
}
}
//detecting any change on the URL to scroll to the given anchor link
//(a way to detect back history button as we play with the hashes on the URL)
$window.on('hashchange', hashChangeHandler);
function hashChangeHandler(){
if(!isScrolling && !options.lockAnchors){
var value = window.location.hash.replace('#', ).split('/');
var section = value[0];
var slide = value[1];
if(section.length){
//when moving to a slide in the first section for the first time (first time to add an anchor to the URL)
var isFirstSlideMove = (typeof lastScrolledDestiny === 'undefined');
var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' && typeof slide === 'undefined' && !slideMoving);
/*in order to call scrollpage() only once for each destination at a time
It is called twice for each scroll otherwise, as in case of using anchorlinks `hashChange`
event is fired on every scroll too.*/
if ((section && section !== lastScrolledDestiny) && !isFirstSlideMove || isFirstScrollMove || (!slideMoving && lastScrolledSlide != slide )) {
scrollPageAndSlide(section, slide);
}
}
}
}
/**
* Sliding with arrow keys, both, vertical and horizontal
*/
$document.keydown(keydownHandler);
//to prevent scrolling while zooming
$document.keyup(function(e){
controlPressed = e.ctrlKey;
});
//when opening a new tab (ctrl + t), `control` won't be pressed when comming back.
$(window).blur(function() {
controlPressed = false;
});
var keydownId;
function keydownHandler(e) {
clearTimeout(keydownId);
var activeElement = $(':focus');
if(!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select') &&
options.keyboardScrolling && options.autoScrolling){
var keyCode = e.which;
//preventing the scroll with arrow keys & spacebar & Page Up & Down keys
var keyControls = [40, 38, 32, 33, 34];
if($.inArray(keyCode, keyControls) > -1){
e.preventDefault();
}
keydownId = setTimeout(function(){
onkeydown(e);
},150);
}
}
/**
* Keydown event
*/
function onkeydown(e){
var shiftPressed = e.shiftKey;
controlPressed = e.ctrlKey;
switch (e.which) {
//up
case 38:
case 33:
if(isScrollAllowed.k.up){
FP.moveSectionUp();
}
break;
//down
case 32: //spacebar
if(shiftPressed && isScrollAllowed.k.up){
FP.moveSectionUp();
break;
}
case 40:
case 34:
if(isScrollAllowed.k.down){
FP.moveSectionDown();
}
break;
//Home
case 36:
if(isScrollAllowed.k.up){
FP.moveTo(1);
}
break;
//End
case 35:
if(isScrollAllowed.k.down){
FP.moveTo( $(SECTION_SEL).length );
}
break;
//left
case 37:
if(isScrollAllowed.k.left){
FP.moveSlideLeft();
}
break;
//right
case 39:
if(isScrollAllowed.k.right){
FP.moveSlideRight();
}
break;
default:
return; // exit this handler for other keys
}
}
//binding the mousemove when the mouse's middle button is released
container.mousedown(function(e){
//middle button
if (e.which == 2){
oldPageY = e.pageY;
container.on('mousemove', mouseMoveHandler);
}
});
//unbinding the mousemove when the mouse's middle button is released
container.mouseup(function(e){
//middle button
if (e.which == 2){
container.off('mousemove');
}
});
/**
* Detecting the direction of the mouse movement.
* Used only for the middle button of the mouse.
*/
var oldPageY = 0;
function mouseMoveHandler(e){
// moving up
if(canScroll){
if (e.pageY < oldPageY){
FP.moveSectionUp();
// moving downw
}else if(e.pageY > oldPageY){
FP.moveSectionDown();
}
}
oldPageY = e.pageY;
}
/**
* Scrolls to the section when clicking the navigation bullet
*/
$document.on('click touchstart', SECTION_NAV_SEL + ' a', function(e){
e.preventDefault();
var index = $(this).parent().index();
scrollPage($(SECTION_SEL).eq(index));
});
/**
* Scrolls the slider to the given slide destination for the given section
*/
$document.on('click touchstart', SLIDES_NAV_LINK_SEL, function(e){
e.preventDefault();
var slides = $(this).closest(SECTION_SEL).find(SLIDES_WRAPPER_SEL);
var destiny = slides.find(SLIDE_SEL).eq($(this).closest('li').index());
landscapeScroll(slides, destiny);
});
/**
* Applying normalScroll elements.
* Ignoring the scrolls over the specified selectors.
*/
if(options.normalScrollElements){
$document.on('mouseenter', options.normalScrollElements, function () {
FP.setMouseWheelScrolling(false);
});
$document.on('mouseleave', options.normalScrollElements, function(){
FP.setMouseWheelScrolling(true);
});
}
/**
* Scrolling horizontally when clicking on the slider controls.
*/
$(SECTION_SEL).on('click touchstart', SLIDES_ARROW_SEL, function() {
if ($(this).hasClass(SLIDES_PREV)) {
if(isScrollAllowed.m.left){
FP.moveSlideLeft();
}
} else {
if(isScrollAllowed.m.right){
FP.moveSlideRight();
}
}
});
/**
* Scrolls horizontal sliders.
*/
function landscapeScroll(slides, destiny){
var destinyPos = destiny.position();
var slideIndex = destiny.index();
var section = slides.closest(SECTION_SEL);
var sectionIndex = section.index(SECTION_SEL);
var anchorLink = section.data('anchor');
var slidesNav = section.find(SLIDES_NAV_SEL);
var slideAnchor = getSlideAnchor(destiny);
//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);
//if the site is not just resizing and readjusting the slides
if(!localIsResizing && xMovement!=='none'){
if($.isFunction( options.onSlideLeave )){
if(options.onSlideLeave.call( prevSlide, anchorLink, (sectionIndex + 1), prevSlideIndex, xMovement, slideIndex ) === false){
slideMoving = false;
return;
}
}
}
}
destiny.addClass(ACTIVE).siblings().removeClass(ACTIVE);
lazyLoad(destiny);
if(!options.loopHorizontal && options.controlArrows){
//hidding it for the fist slide, showing for the rest
section.find(SLIDES_ARROW_PREV_SEL).toggle(slideIndex!==0);
//hidding it for the last slide, showing for the rest
section.find(SLIDES_ARROW_NEXT_SEL).toggle(!destiny.is(':last-child'));
}
//only changing the URL if the slides are in the current section (not for resize re-adjusting)
if(section.hasClass(ACTIVE)){
setState(slideIndex, slideAnchor, anchorLink, sectionIndex);
}
var afterSlideLoads = function(){
//if the site is not just resizing and readjusting the slides
if(!localIsResizing){
$.isFunction( options.afterSlideLoad ) && options.afterSlideLoad.call( destiny, anchorLink, (sectionIndex + 1), slideAnchor, slideIndex);
}
//letting them slide again
slideMoving = false;
};
if(options.css3){
var translate3d = 'translate3d(-' + Math.round(destinyPos.left) + 'px, 0px, 0px)';
addAnimation(slides.find(SLIDES_CONTAINER_SEL), options.scrollingSpeed>0).css(getTransforms(translate3d));
afterSlideLoadsId = setTimeout(function(){
afterSlideLoads();
}, options.scrollingSpeed, options.easing);
}else{
slides.animate({
scrollLeft : Math.round(destinyPos.left)
}, options.scrollingSpeed, options.easing, function() {
afterSlideLoads();
});
}
slidesNav.find(ACTIVE_SEL).removeClass(ACTIVE);
slidesNav.find('li').eq(slideIndex).find('a').addClass(ACTIVE);
}
//when resizing the site, we adjust the heights of the sections, slimScroll...
$window.resize(resizeHandler);
var previousHeight = windowsHeight;
function resizeHandler(){
//checking if it needs to get responsive
responsive();
// rebuild immediately on touch devices
if (isTouchDevice) {
var activeElement = $(document.activeElement);
//if the keyboard is NOT visible
if (!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select')) {
var currentHeight = $window.height();
//making sure the change in the viewport size is enough to force a rebuild. (20 % of the window to avoid problems when hidding scroll bars)
if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ){
FP.reBuild(true);
previousHeight = currentHeight;
}
}
}else{
//in order to call the functions only when the resize is finished
//http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
clearTimeout(resizeId);
resizeId = setTimeout(function(){
FP.reBuild(true);
}, 350);
}
}
/**
* Checks if the site needs to get responsive and disables autoScrolling if so.
* A class `fp-responsive` is added to the plugin's container in case the user wants to use it for his own responsive CSS.
*/
function responsive(){
var widthLimit = options.responsive || options.responsiveWidth; //backwards compatiblity
var heightLimit = options.responsiveHeight;
if(widthLimit){
FP.setResponsive($window.width() < widthLimit);
}
if(heightLimit){
var isResponsive = container.hasClass(RESPONSIVE);
//if its not already in responsive mode because of the `width` limit
if(!isResponsive){
FP.setResponsive($window.height() < heightLimit);
}
}
}
/**
* Adds transition animations for the given element
*/
function addAnimation(element){
var transition = 'all ' + options.scrollingSpeed + 'ms ' + options.easingcss3;
element.removeClass(NO_TRANSITION);
return element.css({
'-webkit-transition': transition,
'transition': transition
});
}
/**
* Remove transition animations for the given element
*/
function removeAnimation(element){
return element.addClass(NO_TRANSITION);
}
/**
* Resizing of the font size depending on the window size as well as some of the images on the site.
*/
function resizeMe(displayHeight, displayWidth) {
//Standard dimensions, for which the body font size is correct
var preferredHeight = 825;
var preferredWidth = 900;
if (displayHeight < preferredHeight || displayWidth < preferredWidth) {
var heightPercentage = (displayHeight * 100) / preferredHeight;
var widthPercentage = (displayWidth * 100) / preferredWidth;
var percentage = Math.min(heightPercentage, widthPercentage);
var newFontSize = percentage.toFixed(2);
$body.css('font-size', newFontSize + '%');
} else {
$body.css('font-size', '100%');
}
}
/**
* Activating the website navigation dots according to the given slide name.
*/
function activateNavDots(name, sectionIndex){
if(options.navigation){
$(SECTION_NAV_SEL).find(ACTIVE_SEL).removeClass(ACTIVE);
if(name){
$(SECTION_NAV_SEL).find('a[href="#' + name + '"]').addClass(ACTIVE);
}else{
$(SECTION_NAV_SEL).find('li').eq(sectionIndex).find('a').addClass(ACTIVE);
}
}
}
/**
* Activating the website main menu elements according to the given slide name.
*/
function activateMenuElement(name){
if(options.menu){
$(options.menu).find(ACTIVE_SEL).removeClass(ACTIVE);
$(options.menu).find('[data-menuanchor="'+name+'"]').addClass(ACTIVE);
}
}
function activateMenuAndNav(anchor, index){
activateMenuElement(anchor);
activateNavDots(anchor, index);
}
/**
* Return a boolean depending on whether the scrollable element is at the end or at the start of the scrolling
* depending on the given type.
*/
function isScrolled(type, scrollable){
if(type === 'top'){
return !scrollable.scrollTop();
}else if(type === 'bottom'){
return scrollable.scrollTop() + 1 + scrollable.innerHeight() >= scrollable[0].scrollHeight;
}
}
/**
* Retuns `up` or `down` depending on the scrolling movement to reach its destination
* from the current section.
*/
function getYmovement(destiny){
var fromIndex = $(SECTION_ACTIVE_SEL).index(SECTION_SEL);
var toIndex = destiny.index(SECTION_SEL);
if( fromIndex == toIndex){
return 'none';
}
if(fromIndex > toIndex){
return 'up';
}
return 'down';
}
/**
* Retuns `right` or `left` depending on the scrolling movement to reach its destination
* from the current slide.
*/
function getXmovement(fromIndex, toIndex){
if( fromIndex == toIndex){
return 'none';
}
if(fromIndex > toIndex){
return 'left';
}
return 'right';
}
function createSlimScrolling(element){
//needed to make `scrollHeight` work under Opera 12
element.css('overflow', 'hidden');
//in case element is a slide
var section = element.closest(SECTION_SEL);
var scrollable = element.find(SCROLLABLE_SEL);
var contentHeight;
//if there was scroll, the contentHeight will be the one in the scrollable section
if(scrollable.length){
contentHeight = scrollable.get(0).scrollHeight;
}else{
contentHeight = element.get(0).scrollHeight;
if(options.verticalCentered){
contentHeight = element.find(TABLE_CELL_SEL).get(0).scrollHeight;
}
}
var scrollHeight = windowsHeight - parseInt(section.css('padding-bottom')) - parseInt(section.css('padding-top'));
//needs scroll?
if ( contentHeight > scrollHeight) {
//was there already an scroll ? Updating it
if(scrollable.length){
scrollable.css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px');
}
//creating the scrolling
else{
if(options.verticalCentered){
element.find(TABLE_CELL_SEL).wrapInner('<div class="' + SCROLLABLE + '" />');
}else{
element.wrapInner('<div class="' + SCROLLABLE + '" />');
}
element.find(SCROLLABLE_SEL).slimScroll({
allowPageScroll: true,
height: scrollHeight + 'px',
size: '10px',
alwaysVisible: true
});
}
}
//removing the scrolling when it is not necessary anymore
else{
removeSlimScroll(element);
}
//undo
element.css('overflow', );
}
function removeSlimScroll(element){
element.find(SCROLLABLE_SEL).children().first().unwrap().unwrap();
element.find(SLIMSCROLL_BAR_SEL).remove();
element.find(SLIMSCROLL_RAIL_SEL).remove();
}
function addTableClass(element){
element.addClass(TABLE).wrapInner('<div class="' + TABLE_CELL + '" style="height:' + getTableHeight(element) + 'px;" />');
}
function getTableHeight(element){
var sectionHeight = windowsHeight;
if(options.paddingTop || options.paddingBottom){
var section = element;
if(!section.hasClass(SECTION)){
section = element.closest(SECTION_SEL);
}
var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom'));
sectionHeight = (windowsHeight - paddings);
}
return sectionHeight;
}
/**
* Adds a css3 transform property to the container class with or without animation depending on the animated param.
*/
function transformContainer(translate3d, animated){
if(animated){
addAnimation(container);
}else{
removeAnimation(container);
}
container.css(getTransforms(translate3d));
//syncronously removing the class after the animation has been applied.
setTimeout(function(){
container.removeClass(NO_TRANSITION);
},10);
}
/**
* Gets a section by its anchor / index
*/
function getSectionByAnchor(sectionAnchor){
//section
var section = $(SECTION_SEL + '[data-anchor="'+sectionAnchor+'"]');
if(!section.length){
section = $(SECTION_SEL).eq( (sectionAnchor -1) );
}
return section;
}
/**
* Gets a slide inside a given section by its anchor / index
*/
function getSlideByAnchor(slideAnchor, section){
var slides = section.find(SLIDES_WRAPPER_SEL);
var slide = slides.find(SLIDE_SEL + '[data-anchor="'+slideAnchor+'"]');
if(!slide.length){
slide = slides.find(SLIDE_SEL).eq(slideAnchor);
}
return slide;
}
/**
* Scrolls to the given section and slide anchors
*/
function scrollPageAndSlide(destiny, slide){
var section = getSectionByAnchor(destiny);
//default slide
if (typeof slide === 'undefined') {
slide = 0;
}
//we need to scroll to the section and then to the slide
if (destiny !== lastScrolledDestiny && !section.hasClass(ACTIVE)){
scrollPage(section, function(){
scrollSlider(section, slide);
});
}
//if we were already in the section
else{
scrollSlider(section, slide);
}
}
/**
* Scrolls the slider to the given slide destination for the given section
*/
function scrollSlider(section, slideAnchor){
if(typeof slideAnchor !== 'undefined'){
var slides = section.find(SLIDES_WRAPPER_SEL);
var destiny = getSlideByAnchor(slideAnchor, section);
if(destiny.length){
landscapeScroll(slides, destiny);
}
}
}
/**
* Creates a landscape navigation bar with dots for horizontal sliders.
*/
function addSlidesNavigation(section, numSlides){
section.append('var nav = section.find(SLIDES_NAV_SEL);
//top or bottom
nav.addClass(options.slidesNavPosition);
for(var i=0; i< numSlides; i++){
nav.find('ul').append('}
//centering it
nav.css('margin-left', '-' + (nav.width()/2) + 'px');
nav.find('li').first().find('a').addClass(ACTIVE);
}
/**
* Sets the state of the website depending on the active section/slide.
* It changes the URL hash when needed and updates the body class.
*/
function setState(slideIndex, slideAnchor, anchorLink, sectionIndex){
var sectionHash = ;
if(options.anchors.length && !options.lockAnchors){
//isn't it the first slide?
if(slideIndex){
if(typeof anchorLink !== 'undefined'){
sectionHash = anchorLink;
}
//slide without anchor link? We take the index instead.
if(typeof slideAnchor === 'undefined'){
slideAnchor = slideIndex;
}
lastScrolledSlide = slideAnchor;
setUrlHash(sectionHash + '/' + slideAnchor);
//first slide won't have slide anchor, just the section one
}else if(typeof slideIndex !== 'undefined'){
lastScrolledSlide = slideAnchor;
setUrlHash(anchorLink);
}
//section without slides
else{
setUrlHash(anchorLink);
}
}
setBodyClass();
}
/**
* Sets the URL hash.
*/
function setUrlHash(url){
if(options.recordHistory){
location.hash = url;
}else{
//Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :)
if(isTouchDevice || isTouch){
history.replaceState(undefined, undefined, '#' + url);
}else{
var baseUrl = window.location.href.split('#')[0];
window.location.replace( baseUrl + '#' + url );
}
}
}
/**
* Gets the anchor for the given slide. Its index will be used if there's none.
*/
function getSlideAnchor(slide){
var slideAnchor = slide.data('anchor');
var slideIndex = slide.index();
//Slide without anchor link? We take the index instead.
if(typeof slideAnchor === 'undefined'){
slideAnchor = slideIndex;
}
return slideAnchor;
}
/**
* Sets a class for the body of the page depending on the active section / slide
*/
function setBodyClass(){
var section = $(SECTION_ACTIVE_SEL);
var slide = section.find(SLIDE_ACTIVE_SEL);
var sectionAnchor = section.data('anchor');
var slideAnchor = getSlideAnchor(slide);
var sectionIndex = section.index(SECTION_SEL);
var text = String(sectionIndex);
if(options.anchors.length){
text = sectionAnchor;
}
if(slide.length){
text = text + '-' + slideAnchor;
}
//changing slash for dash to make it a valid CSS style
text = text.replace('/', '-').replace('#',);
//removing previous anchor classes
var classRe = new RegExp('\\b\\s?' + VIEWING_PREFIX + '-[^\\s]+\\b', "g");
$body[0].className = $body[0].className.replace(classRe, );
//adding the current anchor
$body.addClass(VIEWING_PREFIX + '-' + text);
}
/**
* Checks for translate3d support
* @return boolean
* http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
*/
function support3d() {
var el = document.createElement('p'),
has3d,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'msTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'transform':'transform'
};
// Add it to the body to get the computed style.
document.body.insertBefore(el, null);
for (var t in transforms) {
if (el.style[t] !== undefined) {
el.style[t] = 'translate3d(1px,1px,1px)';
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
document.body.removeChild(el);
return (has3d !== undefined && has3d.length > 0 && has3d !== 'none');
}
/**
* Removes the auto scrolling action fired by the mouse wheel and trackpad.
* After this function is called, the mousewheel and trackpad movements won't scroll through sections.
*/
function removeMouseWheelHandler(){
if (document.addEventListener) {
document.removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
document.removeEventListener('wheel', MouseWheelHandler, false); //Firefox
document.removeEventListener('DOMMouseScroll', MouseWheelHandler, false); //old Firefox
} else {
document.detachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
}
}
/**
* Adds the auto scrolling action for the mouse wheel and trackpad.
* After this function is called, the mousewheel and trackpad movements will scroll through sections
*/
function addMouseWheelHandler(){
if (document.addEventListener) {
document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
document.addEventListener('DOMMouseScroll', MouseWheelHandler, false); //Old Firefox
} else {
document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
}
}
/**
* Adds the possibility to auto scroll through sections on touch devices.
*/
function addTouchHandler(){
if(isTouchDevice || isTouch){
//Microsoft pointers
var MSPointer = getMSPointer();
$(WRAPPER_SEL).off('touchstart ' + MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
$(WRAPPER_SEL).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
}
}
/**
* Removes the auto scrolling for touch devices.
*/
function removeTouchHandler(){
if(isTouchDevice || isTouch){
//Microsoft pointers
var MSPointer = getMSPointer();
$(WRAPPER_SEL).off('touchstart ' + MSPointer.down);
$(WRAPPER_SEL).off('touchmove ' + MSPointer.move);
}
}
/*
* Returns and object with Microsoft pointers (for IE<11 and for IE >= 11)
* http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
*/
function getMSPointer(){
var pointer;
//IE >= 11 & rest of browsers
if(window.PointerEvent){
pointer = { down: 'pointerdown', move: 'pointermove'};
}
//IE < 11
else{
pointer = { down: 'MSPointerDown', move: 'MSPointerMove'};
}
return pointer;
}
/**
* Gets the pageX and pageY properties depending on the browser.
* https://github.com/alvarotrigo/fullPage.js/issues/194#issuecomment-34069854
*/
function getEventsPage(e){
var events = [];
events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);
//in touch devices with scrollBar:true, e.pageY is detected, but we have to deal with touch events. #1008
if(isTouch && isReallyTouch(e) && options.scrollBar){
events.y = e.touches[0].pageY;
events.x = e.touches[0].pageX;
}
return events;
}
/**
* Slides silently (with no animation) the active slider to the given slide.
*/
function silentLandscapeScroll(activeSlide, noCallbacks){
FP.setScrollingSpeed (0, 'internal');
if(typeof noCallbacks !== 'undefined'){
//preventing firing callbacks afterSlideLoad etc.
isResizing = true;
}
landscapeScroll(activeSlide.closest(SLIDES_WRAPPER_SEL), activeSlide);
if(typeof noCallbacks !== 'undefined'){
isResizing = false;
}
FP.setScrollingSpeed(originals.scrollingSpeed, 'internal');
}
/**
* Scrolls silently (with no animation) the page to the given Y position.
*/
function silentScroll(top){
if(options.scrollBar){
container.scrollTop(top);
}
else if (options.css3) {
var translate3d = 'translate3d(0px, -' + top + 'px, 0px)';
transformContainer(translate3d, false);
}
else {
container.css('top', -top);
}
}
/**
* Returns the cross-browser transform string.
*/
function getTransforms(translate3d){
return {
'-webkit-transform': translate3d,
'-moz-transform': translate3d,
'-ms-transform':translate3d,
'transform': translate3d
};
}
/**
* Allowing or disallowing the mouse/swipe scroll in a given direction. (not for keyboard)
* @type m (mouse) or k (keyboard)
*/
function setIsScrollAllowed(value, direction, type){
switch (direction){
case 'up': isScrollAllowed[type].up = value; break;
case 'down': isScrollAllowed[type].down = value; break;
case 'left': isScrollAllowed[type].left = value; break;
case 'right': isScrollAllowed[type].right = value; break;
case 'all':
if(type == 'm'){
FP.setAllowScrolling(value);
}else{
FP.setKeyboardScrolling(value);
}
}
}
/*
* Destroys fullpage.js plugin events and optinally its html markup and styles
*/
FP.destroy = function(all){
FP.setAutoScrolling(false, 'internal');
FP.setAllowScrolling(false);
FP.setKeyboardScrolling(false);
container.addClass(DESTROYED);
clearTimeout(afterSlideLoadsId);
clearTimeout(afterSectionLoadsId);
clearTimeout(resizeId);
clearTimeout(scrollId);
clearTimeout(scrollId2);
$window
.off('scroll', scrollHandler)
.off('hashchange', hashChangeHandler)
.off('resize', resizeHandler);
$document
.off('click', SECTION_NAV_SEL + ' a')
.off('mouseenter', SECTION_NAV_SEL + ' li')
.off('mouseleave', SECTION_NAV_SEL + ' li')
.off('click', SLIDES_NAV_LINK_SEL)
.off('mouseover', options.normalScrollElements)
.off('mouseout', options.normalScrollElements);
$(SECTION_SEL)
.off('click', SLIDES_ARROW_SEL);
clearTimeout(afterSlideLoadsId);
clearTimeout(afterSectionLoadsId);
//lets make a mess!
if(all){
destroyStructure();
}
};
/*
* Removes inline styles added by fullpage.js
*/
function destroyStructure(){
//reseting the `top` or `translate` properties to 0
silentScroll(0);
$(SECTION_NAV_SEL + ', ' + SLIDES_NAV_SEL + ', ' + SLIDES_ARROW_SEL).remove();
//removing inline styles
$(SECTION_SEL).css( {
'height': ,
'background-color' : ,
'padding':
});
$(SLIDE_SEL).css( {
'width':
});
container.css({
'height': ,
'position': ,
'-ms-touch-action': ,
'touch-action':
});
$htmlBody.css({
'overflow': ,
'height':
});
// remove .fp-enabled class
$('html').removeClass(ENABLED);
// remove all of the .fp-viewing- classes
$.each($body.get(0).className.split(/\s+/), function (index, className) {
if (className.indexOf(VIEWING_PREFIX) === 0) {
$body.removeClass(className);
}
});
//removing added classes
$(SECTION_SEL + ', ' + SLIDE_SEL).each(function(){
removeSlimScroll($(this));
$(this).removeClass(TABLE + ' ' + ACTIVE);
});
removeAnimation(container);
//Unwrapping content
container.find(TABLE_CELL_SEL + ', ' + SLIDES_CONTAINER_SEL + ', ' + SLIDES_WRAPPER_SEL).each(function(){
//unwrap not being use in case there's no child element inside and its just text
$(this).replaceWith(this.childNodes);
});
//scrolling the page to the top with no animation
$htmlBody.scrollTop(0);
}
/*
* Sets the state for a variable with multiple states (original, and temporal)
* Some variables such as `autoScrolling` or `recordHistory` might change automatically its state when using `responsive` or `autoScrolling:false`.
* This function is used to keep track of both states, the original and the temporal one.
* If type is not 'internal', then we assume the user is globally changing the variable.
*/
function setVariableState(variable, value, type){
options[variable] = value;
if(type !== 'internal'){
originals[variable] = value;
}
}
/**
* Displays warnings
*/
function displayWarnings(){
// Disable mutually exclusive settings
if (options.continuousVertical &&
(options.loopTop || options.loopBottom)) {
options.continuousVertical = false;
showError('warn', 'Option `loopTop/loopBottom` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled');
}
if(options.scrollBar && options.scrollOverflow){
showError('warn', 'Option `scrollBar` is mutually exclusive with `scrollOverflow`. Sections with scrollOverflow might not work well in Firefox');
}
if(options.continuousVertical && options.scrollBar){
options.continuousVertical = false;
showError('warn', 'Option `scrollBar` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled');
}
//anchors can not have the same value as any element ID or NAME
$.each(options.anchors, function(index, name){
if($('#' + name).length || $('[name="'+name+'"]').length ){
showError('error', 'data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE).');
}
});
}
/**
* Shows a message in the console of the given type.
*/
function showError(type, text){
console && console[type] && console[type]('fullPage: ' + text);
}
};
});