jquery.fullPage.js 92 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555
  1. /*!
  2. * fullPage 2.7.1
  3. * https://github.com/alvarotrigo/fullPage.js
  4. * @license MIT licensed
  5. *
  6. * Copyright (C) 2015 alvarotrigo.com - A project by Alvaro Trigo
  7. */
  8. (function(global, factory) {
  9. 'use strict';
  10. if (typeof define === 'function' && define.amd) {
  11. define(['jquery'], function($) {
  12. return factory($, global, global.document, global.Math);
  13. });
  14. } else if (typeof exports !== 'undefined') {
  15. module.exports = factory(require('jquery'), global, global.document, global.Math);
  16. } else {
  17. factory(jQuery, global, global.document, global.Math);
  18. }
  19. })(typeof window !== 'undefined' ? window : this, function($, window, document, Math, undefined) {
  20. 'use strict';
  21. // keeping central set of classnames and selectors
  22. var WRAPPER = 'fullpage-wrapper';
  23. var WRAPPER_SEL = '.' + WRAPPER;
  24. // slimscroll
  25. var SCROLLABLE = 'fp-scrollable';
  26. var SCROLLABLE_SEL = '.' + SCROLLABLE;
  27. var SLIMSCROLL_BAR_SEL = '.slimScrollBar';
  28. var SLIMSCROLL_RAIL_SEL = '.slimScrollRail';
  29. // util
  30. var RESPONSIVE = 'fp-responsive';
  31. var NO_TRANSITION = 'fp-notransition';
  32. var DESTROYED = 'fp-destroyed';
  33. var ENABLED = 'fp-enabled';
  34. var VIEWING_PREFIX = 'fp-viewing';
  35. var ACTIVE = 'active';
  36. var ACTIVE_SEL = '.' + ACTIVE;
  37. // section
  38. var SECTION_DEFAULT_SEL = '.section';
  39. var SECTION = 'fp-section';
  40. var SECTION_SEL = '.' + SECTION;
  41. var SECTION_ACTIVE_SEL = SECTION_SEL + ACTIVE_SEL;
  42. var SECTION_FIRST_SEL = SECTION_SEL + ':first';
  43. var SECTION_LAST_SEL = SECTION_SEL + ':last';
  44. var TABLE_CELL = 'fp-tableCell';
  45. var TABLE_CELL_SEL = '.' + TABLE_CELL;
  46. var AUTO_HEIGHT = 'fp-auto-height';
  47. var AUTO_HEIGHT_SEL = '.fp-auto-height';
  48. // section nav
  49. var SECTION_NAV = 'fp-nav';
  50. var SECTION_NAV_SEL = '#' + SECTION_NAV;
  51. var SECTION_NAV_TOOLTIP = 'fp-tooltip';
  52. var SHOW_ACTIVE_TOOLTIP = 'fp-show-active';
  53. // slide
  54. var SLIDE_DEFAULT_SEL = '.slide';
  55. var SLIDE = 'fp-slide';
  56. var SLIDE_SEL = '.' + SLIDE;
  57. var SLIDE_ACTIVE_SEL = SLIDE_SEL + ACTIVE_SEL;
  58. var SLIDES_WRAPPER = 'fp-slides';
  59. var SLIDES_WRAPPER_SEL = '.' + SLIDES_WRAPPER;
  60. var SLIDES_CONTAINER = 'fp-slidesContainer';
  61. var SLIDES_CONTAINER_SEL = '.' + SLIDES_CONTAINER;
  62. var TABLE = 'fp-table';
  63. // slide nav
  64. var SLIDES_NAV = 'fp-slidesNav';
  65. var SLIDES_NAV_SEL = '.' + SLIDES_NAV;
  66. var SLIDES_NAV_LINK_SEL = SLIDES_NAV_SEL + ' a';
  67. var SLIDES_ARROW = 'fp-controlArrow';
  68. var SLIDES_ARROW_SEL = '.' + SLIDES_ARROW;
  69. var SLIDES_PREV = 'fp-prev';
  70. var SLIDES_PREV_SEL = '.' + SLIDES_PREV;
  71. var SLIDES_ARROW_PREV = SLIDES_ARROW + ' ' + SLIDES_PREV;
  72. var SLIDES_ARROW_PREV_SEL = SLIDES_ARROW_SEL + SLIDES_PREV_SEL;
  73. var SLIDES_NEXT = 'fp-next';
  74. var SLIDES_NEXT_SEL = '.' + SLIDES_NEXT;
  75. var SLIDES_ARROW_NEXT = SLIDES_ARROW + ' ' + SLIDES_NEXT;
  76. var SLIDES_ARROW_NEXT_SEL = SLIDES_ARROW_SEL + SLIDES_NEXT_SEL;
  77. var $window = $(window);
  78. var $document = $(document);
  79. var afterSectionLoadsId;
  80. var afterSlideLoadsId;
  81. $.fn.fullpage = function(options) {
  82. // common jQuery objects
  83. var $htmlBody = $('html, body');
  84. var $body = $('body');
  85. var FP = $.fn.fullpage;
  86. // Create some defaults, extending them with any options that were provided
  87. options = $.extend({
  88. //navigation
  89. menu: false,
  90. anchors:[],
  91. lockAnchors: false,
  92. navigation: false,
  93. navigationPosition: 'right',
  94. navigationTooltips: [],
  95. showActiveTooltip: false,
  96. slidesNavigation: false,
  97. slidesNavPosition: 'bottom',
  98. scrollBar: false,
  99. //scrolling
  100. css3: true,
  101. scrollingSpeed: 700,
  102. autoScrolling: true,
  103. fitToSection: true,
  104. fitToSectionDelay: 1000,
  105. easing: 'easeInOutCubic',
  106. easingcss3: 'ease',
  107. loopBottom: false,
  108. loopTop: false,
  109. loopHorizontal: true,
  110. continuousVertical: false,
  111. normalScrollElements: null,
  112. scrollOverflow: false,
  113. touchSensitivity: 5,
  114. normalScrollElementTouchThreshold: 5,
  115. //Accessibility
  116. keyboardScrolling: true,
  117. animateAnchor: true,
  118. recordHistory: true,
  119. //design
  120. controlArrows: true,
  121. controlArrowColor: '#fff',
  122. verticalCentered: true,
  123. resize: false,
  124. sectionsColor : [],
  125. paddingTop: 0,
  126. paddingBottom: 0,
  127. fixedElements: null,
  128. responsive: 0, //backwards compabitility with responsiveWiddth
  129. responsiveWidth: 0,
  130. responsiveHeight: 0,
  131. //Custom selectors
  132. sectionSelector: SECTION_DEFAULT_SEL,
  133. slideSelector: SLIDE_DEFAULT_SEL,
  134. //events
  135. afterLoad: null,
  136. onLeave: null,
  137. afterRender: null,
  138. afterResize: null,
  139. afterReBuild: null,
  140. afterSlideLoad: null,
  141. onSlideLeave: null
  142. }, options);
  143. displayWarnings();
  144. //easeInOutCubic animation included in the plugin
  145. $.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;}});
  146. //TO BE REMOVED in future versions. Maintained temporaly for backwards compatibility.
  147. $.extend($.easing,{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }});
  148. /**
  149. * Sets the autoScroll option.
  150. * It changes the scroll bar visibility and the history of the site as a result.
  151. */
  152. FP.setAutoScrolling = function(value, type){
  153. setVariableState('autoScrolling', value, type);
  154. var element = $(SECTION_ACTIVE_SEL);
  155. if(options.autoScrolling && !options.scrollBar){
  156. $htmlBody.css({
  157. 'overflow' : 'hidden',
  158. 'height' : '100%'
  159. });
  160. FP.setRecordHistory(options.recordHistory, 'internal');
  161. //for IE touch devices
  162. container.css({
  163. '-ms-touch-action': 'none',
  164. 'touch-action': 'none'
  165. });
  166. if(element.length){
  167. //moving the container up
  168. silentScroll(element.position().top);
  169. }
  170. }else{
  171. $htmlBody.css({
  172. 'overflow' : 'visible',
  173. 'height' : 'initial'
  174. });
  175. FP.setRecordHistory(false, 'internal');
  176. //for IE touch devices
  177. container.css({
  178. '-ms-touch-action': '',
  179. 'touch-action': ''
  180. });
  181. silentScroll(0);
  182. //scrolling the page to the section with no animation
  183. if (element.length) {
  184. $htmlBody.scrollTop(element.position().top);
  185. }
  186. }
  187. };
  188. /**
  189. * Defines wheter to record the history for each hash change in the URL.
  190. */
  191. FP.setRecordHistory = function(value, type){
  192. setVariableState('recordHistory', value, type);
  193. };
  194. /**
  195. * Defines the scrolling speed
  196. */
  197. FP.setScrollingSpeed = function(value, type){
  198. setVariableState('scrollingSpeed', value, type);
  199. };
  200. /**
  201. * Sets fitToSection
  202. */
  203. FP.setFitToSection = function(value, type){
  204. setVariableState('fitToSection', value, type);
  205. };
  206. /**
  207. * Sets lockAnchors
  208. */
  209. FP.setLockAnchors = function(value){
  210. options.lockAnchors = value;
  211. };
  212. /**
  213. * Adds or remove the possiblity of scrolling through sections by using the mouse wheel or the trackpad.
  214. */
  215. FP.setMouseWheelScrolling = function (value){
  216. if(value){
  217. addMouseWheelHandler();
  218. }else{
  219. removeMouseWheelHandler();
  220. }
  221. };
  222. /**
  223. * Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures.
  224. * Optionally a second parameter can be used to specify the direction for which the action will be applied.
  225. *
  226. * @param directions string containing the direction or directions separated by comma.
  227. */
  228. FP.setAllowScrolling = function (value, directions){
  229. if(typeof directions !== 'undefined'){
  230. directions = directions.replace(/ /g,'').split(',');
  231. $.each(directions, function (index, direction){
  232. setIsScrollAllowed(value, direction, 'm');
  233. });
  234. }
  235. else if(value){
  236. FP.setMouseWheelScrolling(true);
  237. addTouchHandler();
  238. }else{
  239. FP.setMouseWheelScrolling(false);
  240. removeTouchHandler();
  241. }
  242. };
  243. /**
  244. * Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys
  245. */
  246. FP.setKeyboardScrolling = function (value, directions){
  247. if(typeof directions !== 'undefined'){
  248. directions = directions.replace(/ /g,'').split(',');
  249. $.each(directions, function (index, direction){
  250. setIsScrollAllowed(value, direction, 'k');
  251. });
  252. }else{
  253. options.keyboardScrolling = value;
  254. }
  255. };
  256. /**
  257. * Moves the page up one section.
  258. */
  259. FP.moveSectionUp = function(){
  260. var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL);
  261. //looping to the bottom if there's no more sections above
  262. if (!prev.length && (options.loopTop || options.continuousVertical)) {
  263. prev = $(SECTION_SEL).last();
  264. }
  265. if (prev.length) {
  266. scrollPage(prev, null, true);
  267. }
  268. };
  269. /**
  270. * Moves the page down one section.
  271. */
  272. FP.moveSectionDown = function (){
  273. var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);
  274. //looping to the top if there's no more sections below
  275. if(!next.length &&
  276. (options.loopBottom || options.continuousVertical)){
  277. next = $(SECTION_SEL).first();
  278. }
  279. if(next.length){
  280. scrollPage(next, null, false);
  281. }
  282. };
  283. /**
  284. * Moves the page to the given section and slide with no animation.
  285. * Anchors or index positions can be used as params.
  286. */
  287. FP.silentMoveTo = function(sectionAnchor, slideAnchor){
  288. requestAnimFrame(function(){
  289. FP.setScrollingSpeed (0, 'internal');
  290. });
  291. FP.moveTo(sectionAnchor, slideAnchor)
  292. requestAnimFrame(function(){
  293. FP.setScrollingSpeed (originals.scrollingSpeed, 'internal');
  294. });
  295. };
  296. /**
  297. * Moves the page to the given section and slide.
  298. * Anchors or index positions can be used as params.
  299. */
  300. FP.moveTo = function (sectionAnchor, slideAnchor){
  301. var destiny = getSectionByAnchor(sectionAnchor);
  302. if (typeof slideAnchor !== 'undefined'){
  303. scrollPageAndSlide(sectionAnchor, slideAnchor);
  304. }else if(destiny.length > 0){
  305. scrollPage(destiny);
  306. }
  307. };
  308. /**
  309. * Slides right the slider of the active section.
  310. */
  311. FP.moveSlideRight = function(){
  312. moveSlide('next');
  313. };
  314. /**
  315. * Slides left the slider of the active section.
  316. */
  317. FP.moveSlideLeft = function(){
  318. moveSlide('prev');
  319. };
  320. /**
  321. * When resizing is finished, we adjust the slides sizes and positions
  322. */
  323. FP.reBuild = function(resizing){
  324. if(container.hasClass(DESTROYED)){ return; } //nothing to do if the plugin was destroyed
  325. requestAnimFrame(function(){
  326. isResizing = true;
  327. });
  328. var windowsWidth = $window.width();
  329. windowsHeight = $window.height(); //updating global var
  330. //text resizing
  331. if (options.resize) {
  332. resizeMe(windowsHeight, windowsWidth);
  333. }
  334. $(SECTION_SEL).each(function(){
  335. var slidesWrap = $(this).find(SLIDES_WRAPPER_SEL);
  336. var slides = $(this).find(SLIDE_SEL);
  337. //adjusting the height of the table-cell for IE and Firefox
  338. if(options.verticalCentered){
  339. $(this).find(TABLE_CELL_SEL).css('height', getTableHeight($(this)) + 'px');
  340. }
  341. $(this).css('height', windowsHeight + 'px');
  342. //resizing the scrolling divs
  343. if(options.scrollOverflow){
  344. if(slides.length){
  345. slides.each(function(){
  346. createSlimScrolling($(this));
  347. });
  348. }else{
  349. createSlimScrolling($(this));
  350. }
  351. }
  352. //adjusting the position fo the FULL WIDTH slides...
  353. if (slides.length > 1) {
  354. landscapeScroll(slidesWrap, slidesWrap.find(SLIDE_ACTIVE_SEL));
  355. }
  356. });
  357. var activeSection = $(SECTION_ACTIVE_SEL);
  358. var sectionIndex = activeSection.index(SECTION_SEL);
  359. //isn't it the first section?
  360. if(sectionIndex){
  361. //adjusting the position for the current section
  362. FP.silentMoveTo(sectionIndex + 1);
  363. }
  364. requestAnimFrame(function(){
  365. isResizing = false;
  366. });
  367. $.isFunction( options.afterResize ) && resizing && options.afterResize.call(container);
  368. $.isFunction( options.afterReBuild ) && !resizing && options.afterReBuild.call(container);
  369. };
  370. /**
  371. * Turns fullPage.js to normal scrolling mode when the viewport `width` or `height`
  372. * are smaller than the set limit values.
  373. */
  374. FP.setResponsive = function (active){
  375. var isResponsive = container.hasClass(RESPONSIVE);
  376. if(active){
  377. if(!isResponsive){
  378. FP.setAutoScrolling(false, 'internal');
  379. FP.setFitToSection(false, 'internal');
  380. $(SECTION_NAV_SEL).hide();
  381. container.addClass(RESPONSIVE);
  382. }
  383. }
  384. else if(isResponsive){
  385. FP.setAutoScrolling(originals.autoScrolling, 'internal');
  386. FP.setFitToSection(originals.autoScrolling, 'internal');
  387. $(SECTION_NAV_SEL).show();
  388. container.removeClass(RESPONSIVE);
  389. }
  390. }
  391. //flag to avoid very fast sliding for landscape sliders
  392. var slideMoving = false;
  393. var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/);
  394. var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
  395. var container = $(this);
  396. var windowsHeight = $window.height();
  397. var isResizing = false;
  398. var isWindowFocused = true;
  399. var lastScrolledDestiny;
  400. var lastScrolledSlide;
  401. var canScroll = true;
  402. var scrollings = [];
  403. var nav;
  404. var controlPressed;
  405. var isScrollAllowed = {};
  406. isScrollAllowed.m = { 'up':true, 'down':true, 'left':true, 'right':true };
  407. isScrollAllowed.k = $.extend(true,{}, isScrollAllowed.m);
  408. var originals = $.extend(true, {}, options); //deep copy
  409. //timeouts
  410. var resizeId;
  411. var afterSectionLoadsId;
  412. var afterSlideLoadsId;
  413. var scrollId;
  414. var scrollId2;
  415. var keydownId;
  416. if($(this).length){
  417. init();
  418. }
  419. function init(){
  420. container.css({
  421. 'height': '100%',
  422. 'position': 'relative'
  423. });
  424. //adding a class to recognize the container internally in the code
  425. container.addClass(WRAPPER);
  426. $('html').addClass(ENABLED);
  427. //if css3 is not supported, it will use jQuery animations
  428. if(options.css3){
  429. options.css3 = support3d();
  430. }
  431. //no anchors option? Checking for them in the DOM attributes
  432. if(!options.anchors.length){
  433. options.anchors = $('[data-anchor]').map(function(){
  434. return $(this).data('anchor').toString();
  435. }).get();
  436. }
  437. FP.setAllowScrolling(true);
  438. container.removeClass(DESTROYED); //in case it was destroyed before initilizing it again
  439. addInternalSelectors();
  440. //styling the sections / slides / menu
  441. $(SECTION_SEL).each(function(index){
  442. var section = $(this);
  443. var slides = section.find(SLIDE_SEL);
  444. var numSlides = slides.length;
  445. styleSection(section, index);
  446. styleMenu(section, index);
  447. // if there's any slide
  448. if (numSlides > 0) {
  449. styleSlides(section, slides, numSlides);
  450. }else{
  451. if(options.verticalCentered){
  452. addTableClass(section);
  453. }
  454. }
  455. });
  456. FP.setAutoScrolling(options.autoScrolling, 'internal');
  457. //the starting point is a slide?
  458. var activeSlide = $(SECTION_ACTIVE_SEL).find(SLIDE_ACTIVE_SEL);
  459. //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.
  460. if( activeSlide.length && ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) !== 0 || ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) === 0 && activeSlide.index() !== 0))){
  461. silentLandscapeScroll(activeSlide);
  462. }
  463. //fixed elements need to be moved out of the plugin container due to problems with CSS3.
  464. if(options.fixedElements && options.css3){
  465. $(options.fixedElements).appendTo($body);
  466. }
  467. //vertical centered of the navigation + active bullet
  468. if(options.navigation){
  469. addVerticalNavigation();
  470. }
  471. if(options.scrollOverflow){
  472. if(document.readyState === 'complete'){
  473. createSlimScrollingHandler();
  474. }
  475. //after DOM and images are loaded
  476. $window.on('load', createSlimScrollingHandler);
  477. }else{
  478. afterRenderActions();
  479. }
  480. responsive();
  481. //for animateAnchor:false
  482. if(!options.animateAnchor){
  483. //getting the anchor link in the URL and deleting the `#`
  484. var value = window.location.hash.replace('#', '').split('/');
  485. var destiny = value[0];
  486. if(destiny.length){
  487. var section = $('[data-anchor="'+destiny+'"]');
  488. if(section.length){
  489. if(options.autoScrolling){
  490. silentScroll(section.position().top);
  491. }
  492. else{
  493. silentScroll(0);
  494. //scrolling the page to the section with no animation
  495. $htmlBody.scrollTop(section.position().top);
  496. }
  497. activateMenuAndNav(destiny, null);
  498. $.isFunction( options.afterLoad ) && options.afterLoad.call( section, destiny, (section.index(SECTION_SEL) + 1));
  499. //updating the active class
  500. section.addClass(ACTIVE).siblings().removeClass(ACTIVE);
  501. }
  502. }
  503. }
  504. //setting the class for the body element
  505. setBodyClass();
  506. $window.on('load', function() {
  507. scrollToAnchor();
  508. });
  509. }
  510. /**
  511. * Styles the horizontal slides for a section.
  512. */
  513. function styleSlides(section, slides, numSlides){
  514. var sliderWidth = numSlides * 100;
  515. var slideWidth = 100 / numSlides;
  516. slides.wrapAll('<div class="' + SLIDES_CONTAINER + '" />');
  517. slides.parent().wrap('<div class="' + SLIDES_WRAPPER + '" />');
  518. section.find(SLIDES_CONTAINER_SEL).css('width', sliderWidth + '%');
  519. if(numSlides > 1){
  520. if(options.controlArrows){
  521. createSlideArrows(section);
  522. }
  523. if(options.slidesNavigation){
  524. addSlidesNavigation(section, numSlides);
  525. }
  526. }
  527. slides.each(function(index) {
  528. $(this).css('width', slideWidth + '%');
  529. if(options.verticalCentered){
  530. addTableClass($(this));
  531. }
  532. });
  533. var startingSlide = section.find(SLIDE_ACTIVE_SEL);
  534. //if the slide won't be an starting point, the default will be the first one
  535. //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.
  536. if( startingSlide.length && ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) !== 0 || ($(SECTION_ACTIVE_SEL).index(SECTION_SEL) === 0 && startingSlide.index() !== 0))){
  537. silentLandscapeScroll(startingSlide);
  538. }else{
  539. slides.eq(0).addClass(ACTIVE);
  540. }
  541. }
  542. /**
  543. * Styling vertical sections
  544. */
  545. function styleSection(section, index){
  546. //if no active section is defined, the 1st one will be the default one
  547. if(!index && $(SECTION_ACTIVE_SEL).length === 0) {
  548. section.addClass(ACTIVE);
  549. }
  550. section.css('height', windowsHeight + 'px');
  551. if(options.paddingTop){
  552. section.css('padding-top', options.paddingTop);
  553. }
  554. if(options.paddingBottom){
  555. section.css('padding-bottom', options.paddingBottom);
  556. }
  557. if (typeof options.sectionsColor[index] !== 'undefined') {
  558. section.css('background-color', options.sectionsColor[index]);
  559. }
  560. }
  561. /**
  562. * Sets the data-anchor attributes to the menu elements and activates the current one.
  563. */
  564. function styleMenu(section, index){
  565. if (typeof options.anchors[index] !== 'undefined') {
  566. section.attr('data-anchor', options.anchors[index]);
  567. //activating the menu / nav element on load
  568. if(section.hasClass(ACTIVE)){
  569. activateMenuAndNav(options.anchors[index], index);
  570. }
  571. }
  572. //moving the menu outside the main container if it is inside (avoid problems with fixed positions when using CSS3 tranforms)
  573. if(options.menu && options.css3 && $(options.menu).closest(WRAPPER_SEL).length){
  574. $(options.menu).appendTo($body);
  575. }
  576. }
  577. /**
  578. * Adds internal classes to be able to provide customizable selectors
  579. * keeping the link with the style sheet.
  580. */
  581. function addInternalSelectors(){
  582. //adding internal class names to void problem with common ones
  583. $(options.sectionSelector).each(function(){
  584. $(this).addClass(SECTION);
  585. });
  586. $(options.slideSelector).each(function(){
  587. $(this).addClass(SLIDE);
  588. });
  589. }
  590. /**
  591. * Creates the control arrows for the given section
  592. */
  593. function createSlideArrows(section){
  594. section.find(SLIDES_WRAPPER_SEL).after('<div class="' + SLIDES_ARROW_PREV + '"></div><div class="' + SLIDES_ARROW_NEXT + '"></div>');
  595. if(options.controlArrowColor!='#fff'){
  596. section.find(SLIDES_ARROW_NEXT_SEL).css('border-color', 'transparent transparent transparent '+options.controlArrowColor);
  597. section.find(SLIDES_ARROW_PREV_SEL).css('border-color', 'transparent '+ options.controlArrowColor + ' transparent transparent');
  598. }
  599. if(!options.loopHorizontal){
  600. section.find(SLIDES_ARROW_PREV_SEL).hide();
  601. }
  602. }
  603. /**
  604. * Creates a vertical navigation bar.
  605. */
  606. function addVerticalNavigation(){
  607. $body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>');
  608. var nav = $(SECTION_NAV_SEL);
  609. nav.addClass(function() {
  610. return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
  611. });
  612. for (var i = 0; i < $(SECTION_SEL).length; i++) {
  613. var link = '';
  614. if (options.anchors.length) {
  615. link = options.anchors[i];
  616. }
  617. var li = '<li><a href="#' + link + '"><span></span></a>';
  618. // Only add tooltip if needed (defined by user)
  619. var tooltip = options.navigationTooltips[i];
  620. if (typeof tooltip !== 'undefined' && tooltip !== '') {
  621. li += '<div class="' + SECTION_NAV_TOOLTIP + ' ' + options.navigationPosition + '">' + tooltip + '</div>';
  622. }
  623. li += '</li>';
  624. nav.find('ul').append(li);
  625. }
  626. //centering it vertically
  627. $(SECTION_NAV_SEL).css('margin-top', '-' + ($(SECTION_NAV_SEL).height()/2) + 'px');
  628. //activating the current active section
  629. $(SECTION_NAV_SEL).find('li').eq($(SECTION_ACTIVE_SEL).index(SECTION_SEL)).find('a').addClass(ACTIVE);
  630. }
  631. /**
  632. * Creates the slim scroll scrollbar for the sections and slides inside them.
  633. */
  634. function createSlimScrollingHandler(){
  635. $(SECTION_SEL).each(function(){
  636. var slides = $(this).find(SLIDE_SEL);
  637. if(slides.length){
  638. slides.each(function(){
  639. createSlimScrolling($(this));
  640. });
  641. }else{
  642. createSlimScrolling($(this));
  643. }
  644. });
  645. afterRenderActions();
  646. }
  647. /**
  648. * Actions and callbacks to fire afterRender
  649. */
  650. function afterRenderActions(){
  651. var section = $(SECTION_ACTIVE_SEL);
  652. solveBugSlimScroll(section);
  653. lazyLoad(section);
  654. playMedia(section);
  655. $.isFunction( options.afterLoad ) && options.afterLoad.call(section, section.data('anchor'), (section.index(SECTION_SEL) + 1));
  656. $.isFunction( options.afterRender ) && options.afterRender.call(container);
  657. }
  658. /**
  659. * Solves a bug with slimScroll vendor library #1037, #553
  660. */
  661. function solveBugSlimScroll(section){
  662. var slides = section.find('SLIDES_WRAPPER');
  663. var scrollableWrap = section.find(SCROLLABLE_SEL);
  664. if(slides.length){
  665. scrollableWrap = slides.find(SLIDE_ACTIVE_SEL);
  666. }
  667. scrollableWrap.mouseover();
  668. }
  669. var isScrolling = false;
  670. //when scrolling...
  671. $window.on('scroll', scrollHandler);
  672. function scrollHandler(){
  673. var currentSection;
  674. if(!options.autoScrolling || options.scrollBar){
  675. var currentScroll = $window.scrollTop();
  676. var visibleSectionIndex = 0;
  677. var initial = Math.abs(currentScroll - document.querySelectorAll(SECTION_SEL)[0].offsetTop);
  678. //taking the section which is showing more content in the viewport
  679. var sections = document.querySelectorAll(SECTION_SEL);
  680. for (var i = 0; i < sections.length; ++i) {
  681. var section = sections[i];
  682. var current = Math.abs(currentScroll - section.offsetTop);
  683. if(current < initial){
  684. visibleSectionIndex = i;
  685. initial = current;
  686. }
  687. }
  688. //geting the last one, the current one on the screen
  689. currentSection = $(sections).eq(visibleSectionIndex);
  690. }
  691. //setting the visible section as active when manually scrolling
  692. if(!options.autoScrolling || options.scrollBar){
  693. //executing only once the first time we reach the section
  694. if(!currentSection.hasClass(ACTIVE) && !currentSection.hasClass(AUTO_HEIGHT)){
  695. isScrolling = true;
  696. var leavingSection = $(SECTION_ACTIVE_SEL);
  697. var leavingSectionIndex = leavingSection.index(SECTION_SEL) + 1;
  698. var yMovement = getYmovement(currentSection);
  699. var anchorLink = currentSection.data('anchor');
  700. var sectionIndex = currentSection.index(SECTION_SEL) + 1;
  701. var activeSlide = currentSection.find(SLIDE_ACTIVE_SEL);
  702. if(activeSlide.length){
  703. var slideAnchorLink = activeSlide.data('anchor');
  704. var slideIndex = activeSlide.index();
  705. }
  706. if(canScroll){
  707. currentSection.addClass(ACTIVE).siblings().removeClass(ACTIVE);
  708. $.isFunction( options.onLeave ) && options.onLeave.call( leavingSection, leavingSectionIndex, sectionIndex, yMovement);
  709. $.isFunction( options.afterLoad ) && options.afterLoad.call( currentSection, anchorLink, sectionIndex);
  710. lazyLoad(currentSection);
  711. FP.setFitToSection(!currentSection.hasClass(AUTO_HEIGHT));
  712. activateMenuAndNav(anchorLink, sectionIndex - 1);
  713. if(options.anchors.length){
  714. //needed to enter in hashChange event when using the menu with anchor links
  715. lastScrolledDestiny = anchorLink;
  716. setState(slideIndex, slideAnchorLink, anchorLink, sectionIndex);
  717. }
  718. }
  719. //small timeout in order to avoid entering in hashChange event when scrolling is not finished yet
  720. clearTimeout(scrollId);
  721. scrollId = setTimeout(function(){
  722. isScrolling = false;
  723. }, 100);
  724. }
  725. if(options.fitToSection){
  726. //for the auto adjust of the viewport to fit a whole section
  727. clearTimeout(scrollId2);
  728. scrollId2 = setTimeout(function(){
  729. //checking fitToSection again in case it was set to false before the timeout delay
  730. if(canScroll && options.fitToSection){
  731. //allows to scroll to an active section and
  732. //if the section is already active, we prevent firing callbacks
  733. if($(SECTION_ACTIVE_SEL).is(currentSection)){
  734. requestAnimFrame(function(){
  735. isResizing = true;
  736. });
  737. }
  738. scrollPage(currentSection);
  739. isResizing = false;
  740. }
  741. }, options.fitToSectionDelay);
  742. }
  743. }
  744. }
  745. /**
  746. * Determines whether the active section or slide is scrollable through and scrolling bar
  747. */
  748. function isScrollable(activeSection){
  749. //if there are landscape slides, we check if the scrolling bar is in the current one or not
  750. if(activeSection.find(SLIDES_WRAPPER_SEL).length){
  751. return activeSection.find(SLIDE_ACTIVE_SEL).find(SCROLLABLE_SEL);
  752. }
  753. return activeSection.find(SCROLLABLE_SEL);
  754. }
  755. /**
  756. * Determines the way of scrolling up or down:
  757. * by 'automatically' scrolling a section or by using the default and normal scrolling.
  758. */
  759. function scrolling(type, scrollable){
  760. if (!isScrollAllowed.m[type]){
  761. return;
  762. }
  763. var check, scrollSection;
  764. if(type == 'down'){
  765. check = 'bottom';
  766. scrollSection = FP.moveSectionDown;
  767. }else{
  768. check = 'top';
  769. scrollSection = FP.moveSectionUp;
  770. }
  771. if(scrollable.length > 0 ){
  772. //is the scrollbar at the start/end of the scroll?
  773. if(isScrolled(check, scrollable)){
  774. scrollSection();
  775. }else{
  776. return true;
  777. }
  778. }else{
  779. // moved up/down
  780. scrollSection();
  781. }
  782. }
  783. var touchStartY = 0;
  784. var touchStartX = 0;
  785. var touchEndY = 0;
  786. var touchEndX = 0;
  787. /* Detecting touch events
  788. * As we are changing the top property of the page on scrolling, we can not use the traditional way to detect it.
  789. * This way, the touchstart and the touch moves shows an small difference between them which is the
  790. * used one to determine the direction.
  791. */
  792. function touchMoveHandler(event){
  793. var e = event.originalEvent;
  794. // additional: if one of the normalScrollElements isn't within options.normalScrollElementTouchThreshold hops up the DOM chain
  795. if (!checkParentForNormalScrollElement(event.target) && isReallyTouch(e) ) {
  796. if(options.autoScrolling){
  797. //preventing the easing on iOS devices
  798. event.preventDefault();
  799. }
  800. var activeSection = $(SECTION_ACTIVE_SEL);
  801. var scrollable = isScrollable(activeSection);
  802. if (canScroll && !slideMoving) { //if theres any #
  803. var touchEvents = getEventsPage(e);
  804. touchEndY = touchEvents.y;
  805. touchEndX = touchEvents.x;
  806. //if movement in the X axys is greater than in the Y and the currect section has slides...
  807. if (activeSection.find(SLIDES_WRAPPER_SEL).length && Math.abs(touchStartX - touchEndX) > (Math.abs(touchStartY - touchEndY))) {
  808. //is the movement greater than the minimum resistance to scroll?
  809. if (Math.abs(touchStartX - touchEndX) > ($window.width() / 100 * options.touchSensitivity)) {
  810. if (touchStartX > touchEndX) {
  811. if(isScrollAllowed.m.right){
  812. FP.moveSlideRight(); //next
  813. }
  814. } else {
  815. if(isScrollAllowed.m.left){
  816. FP.moveSlideLeft(); //prev
  817. }
  818. }
  819. }
  820. }
  821. //vertical scrolling (only when autoScrolling is enabled)
  822. else if(options.autoScrolling){
  823. //is the movement greater than the minimum resistance to scroll?
  824. if (Math.abs(touchStartY - touchEndY) > ($window.height() / 100 * options.touchSensitivity)) {
  825. if (touchStartY > touchEndY) {
  826. scrolling('down', scrollable);
  827. } else if (touchEndY > touchStartY) {
  828. scrolling('up', scrollable);
  829. }
  830. }
  831. }
  832. }
  833. }
  834. }
  835. /**
  836. * recursive function to loop up the parent nodes to check if one of them exists in options.normalScrollElements
  837. * Currently works well for iOS - Android might need some testing
  838. * @param {Element} el target element / jquery selector (in subsequent nodes)
  839. * @param {int} hop current hop compared to options.normalScrollElementTouchThreshold
  840. * @return {boolean} true if there is a match to options.normalScrollElements
  841. */
  842. function checkParentForNormalScrollElement (el, hop) {
  843. hop = hop || 0;
  844. var parent = $(el).parent();
  845. if (hop < options.normalScrollElementTouchThreshold &&
  846. parent.is(options.normalScrollElements) ) {
  847. return true;
  848. } else if (hop == options.normalScrollElementTouchThreshold) {
  849. return false;
  850. } else {
  851. return checkParentForNormalScrollElement(parent, ++hop);
  852. }
  853. }
  854. /**
  855. * As IE >= 10 fires both touch and mouse events when using a mouse in a touchscreen
  856. * this way we make sure that is really a touch event what IE is detecting.
  857. */
  858. function isReallyTouch(e){
  859. //if is not IE || IE is detecting `touch` or `pen`
  860. return typeof e.pointerType === 'undefined' || e.pointerType != 'mouse';
  861. }
  862. /**
  863. * Handler for the touch start event.
  864. */
  865. function touchStartHandler(event){
  866. var e = event.originalEvent;
  867. //stopping the auto scroll to adjust to a section
  868. if(options.fitToSection){
  869. $htmlBody.stop();
  870. }
  871. if(isReallyTouch(e)){
  872. var touchEvents = getEventsPage(e);
  873. touchStartY = touchEvents.y;
  874. touchStartX = touchEvents.x;
  875. }
  876. }
  877. /**
  878. * Gets the average of the last `number` elements of the given array.
  879. */
  880. function getAverage(elements, number){
  881. var sum = 0;
  882. //taking `number` elements from the end to make the average, if there are not enought, 1
  883. var lastElements = elements.slice(Math.max(elements.length - number, 1));
  884. for(var i = 0; i < lastElements.length; i++){
  885. sum = sum + lastElements[i];
  886. }
  887. return Math.ceil(sum/number);
  888. }
  889. /**
  890. * Detecting mousewheel scrolling
  891. *
  892. * http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
  893. * http://www.sitepoint.com/html5-javascript-mouse-wheel/
  894. */
  895. var prevTime = new Date().getTime();
  896. function MouseWheelHandler(e) {
  897. var curTime = new Date().getTime();
  898. //autoscrolling and not zooming?
  899. if(options.autoScrolling && !controlPressed){
  900. // cross-browser wheel delta
  901. e = e || window.event;
  902. var value = e.wheelDelta || -e.deltaY || -e.detail;
  903. var delta = Math.max(-1, Math.min(1, value));
  904. //Limiting the array to 150 (lets not waste memory!)
  905. if(scrollings.length > 149){
  906. scrollings.shift();
  907. }
  908. //keeping record of the previous scrollings
  909. scrollings.push(Math.abs(value));
  910. //preventing to scroll the site on mouse wheel when scrollbar is present
  911. if(options.scrollBar){
  912. e.preventDefault ? e.preventDefault() : e.returnValue = false;
  913. }
  914. var activeSection = $(SECTION_ACTIVE_SEL);
  915. var scrollable = isScrollable(activeSection);
  916. //time difference between the last scroll and the current one
  917. var timeDiff = curTime-prevTime;
  918. prevTime = curTime;
  919. //haven't they scrolled in a while?
  920. //(enough to be consider a different scrolling action to scroll another section)
  921. if(timeDiff > 200){
  922. //emptying the array, we dont care about old scrollings for our averages
  923. scrollings = [];
  924. }
  925. if(canScroll){
  926. var averageEnd = getAverage(scrollings, 10);
  927. var averageMiddle = getAverage(scrollings, 70);
  928. var isAccelerating = averageEnd >= averageMiddle;
  929. //to avoid double swipes...
  930. if(isAccelerating){
  931. //scrolling down?
  932. if (delta < 0) {
  933. scrolling('down', scrollable);
  934. //scrolling up?
  935. }else {
  936. scrolling('up', scrollable);
  937. }
  938. }
  939. }
  940. return false;
  941. }
  942. if(options.fitToSection){
  943. //stopping the auto scroll to adjust to a section
  944. $htmlBody.stop();
  945. }
  946. }
  947. /**
  948. * Slides a slider to the given direction.
  949. */
  950. function moveSlide(direction){
  951. var activeSection = $(SECTION_ACTIVE_SEL);
  952. var slides = activeSection.find(SLIDES_WRAPPER_SEL);
  953. var numSlides = slides.find(SLIDE_SEL).length;
  954. // more than one slide needed and nothing should be sliding
  955. if (!slides.length || slideMoving || numSlides < 2) {
  956. return;
  957. }
  958. var currentSlide = slides.find(SLIDE_ACTIVE_SEL);
  959. var destiny = null;
  960. if(direction === 'prev'){
  961. destiny = currentSlide.prev(SLIDE_SEL);
  962. }else{
  963. destiny = currentSlide.next(SLIDE_SEL);
  964. }
  965. //isn't there a next slide in the secuence?
  966. if(!destiny.length){
  967. //respect loopHorizontal settin
  968. if (!options.loopHorizontal) return;
  969. if(direction === 'prev'){
  970. destiny = currentSlide.siblings(':last');
  971. }else{
  972. destiny = currentSlide.siblings(':first');
  973. }
  974. }
  975. slideMoving = true;
  976. landscapeScroll(slides, destiny);
  977. }
  978. /**
  979. * Maintains the active slides in the viewport
  980. * (Because he `scroll` animation might get lost with some actions, such as when using continuousVertical)
  981. */
  982. function keepSlidesPosition(){
  983. $(SLIDE_ACTIVE_SEL).each(function(){
  984. silentLandscapeScroll($(this), 'internal');
  985. });
  986. }
  987. //IE < 10 pollify for requestAnimationFrame
  988. window.requestAnimFrame = function(){
  989. return window.requestAnimationFrame || function(callback){ callback() }
  990. }();
  991. /**
  992. * Scrolls the site to the given element and scrolls to the slide if a callback is given.
  993. */
  994. function scrollPage(element, callback, isMovementUp){
  995. //requestAnimFrame is used in order to prevent a Chrome 44 bug (http://stackoverflow.com/a/31961816/1081396)
  996. requestAnimFrame(function(){
  997. var dest = element.position();
  998. if(typeof dest === 'undefined'){ return; } //there's no element to scroll, leaving the function
  999. //auto height? Scrolling only a bit, the next element's height. Otherwise the whole viewport.
  1000. var dtop = element.hasClass(AUTO_HEIGHT) ? (dest.top == 0 ? 0 : dest.top - windowsHeight + element.height()) : dest.top;
  1001. //local variables
  1002. var v = {
  1003. element: element,
  1004. callback: callback,
  1005. isMovementUp: isMovementUp,
  1006. dest: dest,
  1007. dtop: dtop,
  1008. yMovement: getYmovement(element),
  1009. anchorLink: element.data('anchor'),
  1010. sectionIndex: element.index(SECTION_SEL),
  1011. activeSlide: element.find(SLIDE_ACTIVE_SEL),
  1012. activeSection: $(SECTION_ACTIVE_SEL),
  1013. leavingSection: $(SECTION_ACTIVE_SEL).index(SECTION_SEL) + 1,
  1014. //caching the value of isResizing at the momment the function is called
  1015. //because it will be checked later inside a setTimeout and the value might change
  1016. localIsResizing: isResizing
  1017. };
  1018. //quiting when destination scroll is the same as the current one
  1019. if((v.activeSection.is(element) && !isResizing) || (options.scrollBar && $window.scrollTop() === v.dtop && !element.hasClass(AUTO_HEIGHT) )){ return; }
  1020. if(v.activeSlide.length){
  1021. var slideAnchorLink = v.activeSlide.data('anchor');
  1022. var slideIndex = v.activeSlide.index();
  1023. }
  1024. // If continuousVertical && we need to wrap around
  1025. if (options.autoScrolling && options.continuousVertical && typeof (v.isMovementUp) !== "undefined" &&
  1026. ((!v.isMovementUp && v.yMovement == 'up') || // Intending to scroll down but about to go up or
  1027. (v.isMovementUp && v.yMovement == 'down'))) { // intending to scroll up but about to go down
  1028. v = createInfiniteSections(v);
  1029. }
  1030. //callback (onLeave) if the site is not just resizing and readjusting the slides
  1031. if($.isFunction(options.onLeave) && !v.localIsResizing){
  1032. if(options.onLeave.call(v.activeSection, v.leavingSection, (v.sectionIndex + 1), v.yMovement) === false){
  1033. return;
  1034. }else{
  1035. stopMedia(v.activeSection);
  1036. }
  1037. }
  1038. element.addClass(ACTIVE).siblings().removeClass(ACTIVE);
  1039. lazyLoad(element);
  1040. //preventing from activating the MouseWheelHandler event
  1041. //more than once if the page is scrolling
  1042. canScroll = false;
  1043. setState(slideIndex, slideAnchorLink, v.anchorLink, v.sectionIndex);
  1044. performMovement(v);
  1045. //flag to avoid callingn `scrollPage()` twice in case of using anchor links
  1046. lastScrolledDestiny = v.anchorLink;
  1047. //avoid firing it twice (as it does also on scroll)
  1048. activateMenuAndNav(v.anchorLink, v.sectionIndex);
  1049. });
  1050. }
  1051. /**
  1052. * Performs the movement (by CSS3 or by jQuery)
  1053. */
  1054. function performMovement(v){
  1055. // using CSS3 translate functionality
  1056. if (options.css3 && options.autoScrolling && !options.scrollBar) {
  1057. var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
  1058. transformContainer(translate3d, true);
  1059. //even when the scrollingSpeed is 0 there's a little delay, which might cause the
  1060. //scrollingSpeed to change in case of using silentMoveTo();
  1061. if(options.scrollingSpeed){
  1062. afterSectionLoadsId = setTimeout(function () {
  1063. afterSectionLoads(v);
  1064. }, options.scrollingSpeed);
  1065. }else{
  1066. afterSectionLoads(v);
  1067. }
  1068. }
  1069. // using jQuery animate
  1070. else{
  1071. var scrollSettings = getScrollSettings(v);
  1072. $(scrollSettings.element).animate(
  1073. scrollSettings.options,
  1074. options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body`
  1075. afterSectionLoads(v);
  1076. });
  1077. }
  1078. }
  1079. /**
  1080. * Gets the scrolling settings depending on the plugin autoScrolling option
  1081. */
  1082. function getScrollSettings(v){
  1083. var scroll = {};
  1084. if(options.autoScrolling && !options.scrollBar){
  1085. scroll.options = { 'top': -v.dtop};
  1086. scroll.element = WRAPPER_SEL;
  1087. }else{
  1088. scroll.options = { 'scrollTop': v.dtop};
  1089. scroll.element = 'html, body';
  1090. }
  1091. return scroll;
  1092. }
  1093. /**
  1094. * Adds sections before or after the current one to create the infinite effect.
  1095. */
  1096. function createInfiniteSections(v){
  1097. // Scrolling down
  1098. if (!v.isMovementUp) {
  1099. // Move all previous sections to after the active section
  1100. $(SECTION_ACTIVE_SEL).after(v.activeSection.prevAll(SECTION_SEL).get().reverse());
  1101. }
  1102. else { // Scrolling up
  1103. // Move all next sections to before the active section
  1104. $(SECTION_ACTIVE_SEL).before(v.activeSection.nextAll(SECTION_SEL));
  1105. }
  1106. // Maintain the displayed position (now that we changed the element order)
  1107. silentScroll($(SECTION_ACTIVE_SEL).position().top);
  1108. // Maintain the active slides visible in the viewport
  1109. keepSlidesPosition();
  1110. // save for later the elements that still need to be reordered
  1111. v.wrapAroundElements = v.activeSection;
  1112. // Recalculate animation variables
  1113. v.dest = v.element.position();
  1114. v.dtop = v.dest.top;
  1115. v.yMovement = getYmovement(v.element);
  1116. return v;
  1117. }
  1118. /**
  1119. * Fix section order after continuousVertical changes have been animated
  1120. */
  1121. function continuousVerticalFixSectionOrder (v) {
  1122. // If continuousVertical is in effect (and autoScrolling would also be in effect then),
  1123. // finish moving the elements around so the direct navigation will function more simply
  1124. if (!v.wrapAroundElements || !v.wrapAroundElements.length) {
  1125. return;
  1126. }
  1127. if (v.isMovementUp) {
  1128. $(SECTION_FIRST_SEL).before(v.wrapAroundElements);
  1129. }
  1130. else {
  1131. $(SECTION_LAST_SEL).after(v.wrapAroundElements);
  1132. }
  1133. silentScroll($(SECTION_ACTIVE_SEL).position().top);
  1134. // Maintain the active slides visible in the viewport
  1135. keepSlidesPosition();
  1136. }
  1137. /**
  1138. * Actions to do once the section is loaded.
  1139. */
  1140. function afterSectionLoads (v){
  1141. continuousVerticalFixSectionOrder(v);
  1142. v.element.find('.fp-scrollable').mouseover();
  1143. FP.setFitToSection(!v.element.hasClass(AUTO_HEIGHT));
  1144. //callback (afterLoad) if the site is not just resizing and readjusting the slides
  1145. $.isFunction(options.afterLoad) && !v.localIsResizing && options.afterLoad.call(v.element, v.anchorLink, (v.sectionIndex + 1));
  1146. playMedia(v.element)
  1147. canScroll = true;
  1148. $.isFunction(v.callback) && v.callback.call(this);
  1149. }
  1150. /**
  1151. * Lazy loads image, video and audio elements.
  1152. */
  1153. function lazyLoad(destiny){
  1154. //Lazy loading images, videos and audios
  1155. var slide = destiny.find(SLIDE_ACTIVE_SEL);
  1156. if( slide.length ) {
  1157. destiny = $(slide);
  1158. }
  1159. destiny.find('img[data-src], source[data-src], audio[data-src]').each(function(){
  1160. $(this).attr('src', $(this).data('src'));
  1161. $(this).removeAttr('data-src');
  1162. if($(this).is('source')){
  1163. $(this).closest('video').get(0).load();
  1164. }
  1165. });
  1166. }
  1167. /**
  1168. * Plays video and audio elements.
  1169. */
  1170. function playMedia(destiny){
  1171. //playing HTML5 media elements
  1172. destiny.find('video, audio').each(function(){
  1173. var element = $(this).get(0);
  1174. if( element.hasAttribute('autoplay') && typeof element.play === 'function' ) {
  1175. element.play();
  1176. }
  1177. });
  1178. }
  1179. /**
  1180. * Stops video and audio elements.
  1181. */
  1182. function stopMedia(destiny){
  1183. //stopping HTML5 media elements
  1184. destiny.find('video, audio').each(function(){
  1185. var element = $(this).get(0);
  1186. if( !element.hasAttribute('data-ignore') && typeof element.pause === 'function' ) {
  1187. element.pause();
  1188. }
  1189. });
  1190. }
  1191. /**
  1192. * Scrolls to the anchor in the URL when loading the site
  1193. */
  1194. function scrollToAnchor(){
  1195. //getting the anchor link in the URL and deleting the `#`
  1196. var value = window.location.hash.replace('#', '').split('/');
  1197. var section = value[0];
  1198. var slide = value[1];
  1199. if(section){ //if theres any #
  1200. scrollPageAndSlide(section, slide);
  1201. }
  1202. }
  1203. //detecting any change on the URL to scroll to the given anchor link
  1204. //(a way to detect back history button as we play with the hashes on the URL)
  1205. $window.on('hashchange', hashChangeHandler);
  1206. function hashChangeHandler(){
  1207. if(!isScrolling && !options.lockAnchors){
  1208. var value = window.location.hash.replace('#', '').split('/');
  1209. var section = value[0];
  1210. var slide = value[1];
  1211. if(section.length){
  1212. //when moving to a slide in the first section for the first time (first time to add an anchor to the URL)
  1213. var isFirstSlideMove = (typeof lastScrolledDestiny === 'undefined');
  1214. var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' && typeof slide === 'undefined' && !slideMoving);
  1215. /*in order to call scrollpage() only once for each destination at a time
  1216. It is called twice for each scroll otherwise, as in case of using anchorlinks `hashChange`
  1217. event is fired on every scroll too.*/
  1218. if ((section && section !== lastScrolledDestiny) && !isFirstSlideMove || isFirstScrollMove || (!slideMoving && lastScrolledSlide != slide )) {
  1219. scrollPageAndSlide(section, slide);
  1220. }
  1221. }
  1222. }
  1223. }
  1224. /**
  1225. * Sliding with arrow keys, both, vertical and horizontal
  1226. */
  1227. $document.keydown(keydownHandler);
  1228. //to prevent scrolling while zooming
  1229. $document.keyup(function(e){
  1230. if(isWindowFocused){ //the keyup gets fired on new tab ctrl + t in Firefox
  1231. controlPressed = e.ctrlKey;
  1232. }
  1233. });
  1234. //when opening a new tab (ctrl + t), `control` won't be pressed when comming back.
  1235. $(window).blur(function() {
  1236. isWindowFocused = false;
  1237. controlPressed = false;
  1238. });
  1239. var keydownId;
  1240. function keydownHandler(e) {
  1241. clearTimeout(keydownId);
  1242. var activeElement = $(':focus');
  1243. if(!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select') &&
  1244. options.keyboardScrolling && options.autoScrolling){
  1245. var keyCode = e.which;
  1246. //preventing the scroll with arrow keys & spacebar & Page Up & Down keys
  1247. var keyControls = [40, 38, 32, 33, 34];
  1248. if($.inArray(keyCode, keyControls) > -1){
  1249. e.preventDefault();
  1250. }
  1251. controlPressed = e.ctrlKey;
  1252. keydownId = setTimeout(function(){
  1253. onkeydown(e);
  1254. },150);
  1255. }
  1256. }
  1257. /**
  1258. * Keydown event
  1259. */
  1260. function onkeydown(e){
  1261. var shiftPressed = e.shiftKey;
  1262. switch (e.which) {
  1263. //up
  1264. case 38:
  1265. case 33:
  1266. if(isScrollAllowed.k.up){
  1267. FP.moveSectionUp();
  1268. }
  1269. break;
  1270. //down
  1271. case 32: //spacebar
  1272. if(shiftPressed && isScrollAllowed.k.up){
  1273. FP.moveSectionUp();
  1274. break;
  1275. }
  1276. case 40:
  1277. case 34:
  1278. if(isScrollAllowed.k.down){
  1279. FP.moveSectionDown();
  1280. }
  1281. break;
  1282. //Home
  1283. case 36:
  1284. if(isScrollAllowed.k.up){
  1285. FP.moveTo(1);
  1286. }
  1287. break;
  1288. //End
  1289. case 35:
  1290. if(isScrollAllowed.k.down){
  1291. FP.moveTo( $(SECTION_SEL).length );
  1292. }
  1293. break;
  1294. //left
  1295. case 37:
  1296. if(isScrollAllowed.k.left){
  1297. FP.moveSlideLeft();
  1298. }
  1299. break;
  1300. //right
  1301. case 39:
  1302. if(isScrollAllowed.k.right){
  1303. FP.moveSlideRight();
  1304. }
  1305. break;
  1306. default:
  1307. return; // exit this handler for other keys
  1308. }
  1309. }
  1310. //binding the mousemove when the mouse's middle button is released
  1311. container.mousedown(function(e){
  1312. //middle button
  1313. if (e.which == 2){
  1314. oldPageY = e.pageY;
  1315. container.on('mousemove', mouseMoveHandler);
  1316. }
  1317. });
  1318. //unbinding the mousemove when the mouse's middle button is released
  1319. container.mouseup(function(e){
  1320. //middle button
  1321. if (e.which == 2){
  1322. container.off('mousemove');
  1323. }
  1324. });
  1325. /**
  1326. * Detecting the direction of the mouse movement.
  1327. * Used only for the middle button of the mouse.
  1328. */
  1329. var oldPageY = 0;
  1330. function mouseMoveHandler(e){
  1331. // moving up
  1332. if(canScroll){
  1333. if (e.pageY < oldPageY){
  1334. FP.moveSectionUp();
  1335. // moving downw
  1336. }else if(e.pageY > oldPageY){
  1337. FP.moveSectionDown();
  1338. }
  1339. }
  1340. oldPageY = e.pageY;
  1341. }
  1342. /**
  1343. * Scrolls to the section when clicking the navigation bullet
  1344. */
  1345. $document.on('click touchstart', SECTION_NAV_SEL + ' a', function(e){
  1346. e.preventDefault();
  1347. var index = $(this).parent().index();
  1348. scrollPage($(SECTION_SEL).eq(index));
  1349. });
  1350. /**
  1351. * Scrolls the slider to the given slide destination for the given section
  1352. */
  1353. $document.on('click touchstart', SLIDES_NAV_LINK_SEL, function(e){
  1354. e.preventDefault();
  1355. var slides = $(this).closest(SECTION_SEL).find(SLIDES_WRAPPER_SEL);
  1356. var destiny = slides.find(SLIDE_SEL).eq($(this).closest('li').index());
  1357. landscapeScroll(slides, destiny);
  1358. });
  1359. /**
  1360. * Applying normalScroll elements.
  1361. * Ignoring the scrolls over the specified selectors.
  1362. */
  1363. if(options.normalScrollElements){
  1364. $document.on('mouseenter', options.normalScrollElements, function () {
  1365. FP.setMouseWheelScrolling(false);
  1366. });
  1367. $document.on('mouseleave', options.normalScrollElements, function(){
  1368. FP.setMouseWheelScrolling(true);
  1369. });
  1370. }
  1371. /**
  1372. * Scrolling horizontally when clicking on the slider controls.
  1373. */
  1374. $(SECTION_SEL).on('click touchstart', SLIDES_ARROW_SEL, function() {
  1375. if ($(this).hasClass(SLIDES_PREV)) {
  1376. if(isScrollAllowed.m.left){
  1377. FP.moveSlideLeft();
  1378. }
  1379. } else {
  1380. if(isScrollAllowed.m.right){
  1381. FP.moveSlideRight();
  1382. }
  1383. }
  1384. });
  1385. /**
  1386. * Scrolls horizontal sliders.
  1387. */
  1388. function landscapeScroll(slides, destiny){
  1389. var destinyPos = destiny.position();
  1390. var slideIndex = destiny.index();
  1391. var section = slides.closest(SECTION_SEL);
  1392. var sectionIndex = section.index(SECTION_SEL);
  1393. var anchorLink = section.data('anchor');
  1394. var slidesNav = section.find(SLIDES_NAV_SEL);
  1395. var slideAnchor = getSlideAnchor(destiny);
  1396. //caching the value of isResizing at the momment the function is called
  1397. //because it will be checked later inside a setTimeout and the value might change
  1398. var localIsResizing = isResizing;
  1399. if(options.onSlideLeave){
  1400. var prevSlide = section.find(SLIDE_ACTIVE_SEL);
  1401. var prevSlideIndex = prevSlide.index();
  1402. var xMovement = getXmovement(prevSlideIndex, slideIndex);
  1403. //if the site is not just resizing and readjusting the slides
  1404. if(!localIsResizing && xMovement!=='none'){
  1405. if($.isFunction( options.onSlideLeave )){
  1406. if(options.onSlideLeave.call( prevSlide, anchorLink, (sectionIndex + 1), prevSlideIndex, xMovement, slideIndex ) === false){
  1407. slideMoving = false;
  1408. return;
  1409. }
  1410. }
  1411. }
  1412. }
  1413. destiny.addClass(ACTIVE).siblings().removeClass(ACTIVE);
  1414. if(!localIsResizing){
  1415. lazyLoad(destiny);
  1416. }
  1417. if(!options.loopHorizontal && options.controlArrows){
  1418. //hidding it for the fist slide, showing for the rest
  1419. section.find(SLIDES_ARROW_PREV_SEL).toggle(slideIndex!==0);
  1420. //hidding it for the last slide, showing for the rest
  1421. section.find(SLIDES_ARROW_NEXT_SEL).toggle(!destiny.is(':last-child'));
  1422. }
  1423. //only changing the URL if the slides are in the current section (not for resize re-adjusting)
  1424. if(section.hasClass(ACTIVE)){
  1425. setState(slideIndex, slideAnchor, anchorLink, sectionIndex);
  1426. }
  1427. var afterSlideLoads = function(){
  1428. //if the site is not just resizing and readjusting the slides
  1429. if(!localIsResizing){
  1430. $.isFunction( options.afterSlideLoad ) && options.afterSlideLoad.call( destiny, anchorLink, (sectionIndex + 1), slideAnchor, slideIndex);
  1431. }
  1432. //letting them slide again
  1433. slideMoving = false;
  1434. };
  1435. if(options.css3){
  1436. var translate3d = 'translate3d(-' + Math.round(destinyPos.left) + 'px, 0px, 0px)';
  1437. addAnimation(slides.find(SLIDES_CONTAINER_SEL), options.scrollingSpeed>0).css(getTransforms(translate3d));
  1438. afterSlideLoadsId = setTimeout(function(){
  1439. afterSlideLoads();
  1440. }, options.scrollingSpeed, options.easing);
  1441. }else{
  1442. slides.animate({
  1443. scrollLeft : Math.round(destinyPos.left)
  1444. }, options.scrollingSpeed, options.easing, function() {
  1445. afterSlideLoads();
  1446. });
  1447. }
  1448. slidesNav.find(ACTIVE_SEL).removeClass(ACTIVE);
  1449. slidesNav.find('li').eq(slideIndex).find('a').addClass(ACTIVE);
  1450. }
  1451. //when resizing the site, we adjust the heights of the sections, slimScroll...
  1452. $window.resize(resizeHandler);
  1453. var previousHeight = windowsHeight;
  1454. function resizeHandler(){
  1455. //checking if it needs to get responsive
  1456. responsive();
  1457. // rebuild immediately on touch devices
  1458. if (isTouchDevice) {
  1459. var activeElement = $(document.activeElement);
  1460. //if the keyboard is NOT visible
  1461. if (!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select')) {
  1462. var currentHeight = $window.height();
  1463. //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)
  1464. if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ){
  1465. FP.reBuild(true);
  1466. previousHeight = currentHeight;
  1467. }
  1468. }
  1469. }else{
  1470. //in order to call the functions only when the resize is finished
  1471. //http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
  1472. clearTimeout(resizeId);
  1473. resizeId = setTimeout(function(){
  1474. FP.reBuild(true);
  1475. }, 350);
  1476. }
  1477. }
  1478. /**
  1479. * Checks if the site needs to get responsive and disables autoScrolling if so.
  1480. * A class `fp-responsive` is added to the plugin's container in case the user wants to use it for his own responsive CSS.
  1481. */
  1482. function responsive(){
  1483. var widthLimit = options.responsive || options.responsiveWidth; //backwards compatiblity
  1484. var heightLimit = options.responsiveHeight;
  1485. if(widthLimit){
  1486. FP.setResponsive($window.width() < widthLimit);
  1487. }
  1488. if(heightLimit){
  1489. var isResponsive = container.hasClass(RESPONSIVE);
  1490. //if its not already in responsive mode because of the `width` limit
  1491. if(!isResponsive){
  1492. FP.setResponsive($window.height() < heightLimit);
  1493. }
  1494. }
  1495. }
  1496. /**
  1497. * Adds transition animations for the given element
  1498. */
  1499. function addAnimation(element){
  1500. var transition = 'all ' + options.scrollingSpeed + 'ms ' + options.easingcss3;
  1501. element.removeClass(NO_TRANSITION);
  1502. return element.css({
  1503. '-webkit-transition': transition,
  1504. 'transition': transition
  1505. });
  1506. }
  1507. /**
  1508. * Remove transition animations for the given element
  1509. */
  1510. function removeAnimation(element){
  1511. return element.addClass(NO_TRANSITION);
  1512. }
  1513. /**
  1514. * Resizing of the font size depending on the window size as well as some of the images on the site.
  1515. */
  1516. function resizeMe(displayHeight, displayWidth) {
  1517. //Standard dimensions, for which the body font size is correct
  1518. var preferredHeight = 825;
  1519. var preferredWidth = 900;
  1520. if (displayHeight < preferredHeight || displayWidth < preferredWidth) {
  1521. var heightPercentage = (displayHeight * 100) / preferredHeight;
  1522. var widthPercentage = (displayWidth * 100) / preferredWidth;
  1523. var percentage = Math.min(heightPercentage, widthPercentage);
  1524. var newFontSize = percentage.toFixed(2);
  1525. $body.css('font-size', newFontSize + '%');
  1526. } else {
  1527. $body.css('font-size', '100%');
  1528. }
  1529. }
  1530. /**
  1531. * Activating the website navigation dots according to the given slide name.
  1532. */
  1533. function activateNavDots(name, sectionIndex){
  1534. if(options.navigation){
  1535. $(SECTION_NAV_SEL).find(ACTIVE_SEL).removeClass(ACTIVE);
  1536. if(name){
  1537. $(SECTION_NAV_SEL).find('a[href="#' + name + '"]').addClass(ACTIVE);
  1538. }else{
  1539. $(SECTION_NAV_SEL).find('li').eq(sectionIndex).find('a').addClass(ACTIVE);
  1540. }
  1541. }
  1542. }
  1543. /**
  1544. * Activating the website main menu elements according to the given slide name.
  1545. */
  1546. function activateMenuElement(name){
  1547. if(options.menu){
  1548. $(options.menu).find(ACTIVE_SEL).removeClass(ACTIVE);
  1549. $(options.menu).find('[data-menuanchor="'+name+'"]').addClass(ACTIVE);
  1550. }
  1551. }
  1552. function activateMenuAndNav(anchor, index){
  1553. activateMenuElement(anchor);
  1554. activateNavDots(anchor, index);
  1555. }
  1556. /**
  1557. * Return a boolean depending on whether the scrollable element is at the end or at the start of the scrolling
  1558. * depending on the given type.
  1559. */
  1560. function isScrolled(type, scrollable){
  1561. if(type === 'top'){
  1562. return !scrollable.scrollTop();
  1563. }else if(type === 'bottom'){
  1564. return scrollable.scrollTop() + 1 + scrollable.innerHeight() >= scrollable[0].scrollHeight;
  1565. }
  1566. }
  1567. /**
  1568. * Retuns `up` or `down` depending on the scrolling movement to reach its destination
  1569. * from the current section.
  1570. */
  1571. function getYmovement(destiny){
  1572. var fromIndex = $(SECTION_ACTIVE_SEL).index(SECTION_SEL);
  1573. var toIndex = destiny.index(SECTION_SEL);
  1574. if( fromIndex == toIndex){
  1575. return 'none';
  1576. }
  1577. if(fromIndex > toIndex){
  1578. return 'up';
  1579. }
  1580. return 'down';
  1581. }
  1582. /**
  1583. * Retuns `right` or `left` depending on the scrolling movement to reach its destination
  1584. * from the current slide.
  1585. */
  1586. function getXmovement(fromIndex, toIndex){
  1587. if( fromIndex == toIndex){
  1588. return 'none';
  1589. }
  1590. if(fromIndex > toIndex){
  1591. return 'left';
  1592. }
  1593. return 'right';
  1594. }
  1595. function createSlimScrolling(element){
  1596. //needed to make `scrollHeight` work under Opera 12
  1597. element.css('overflow', 'hidden');
  1598. //in case element is a slide
  1599. var section = element.closest(SECTION_SEL);
  1600. var scrollable = element.find(SCROLLABLE_SEL);
  1601. var contentHeight;
  1602. //if there was scroll, the contentHeight will be the one in the scrollable section
  1603. if(scrollable.length){
  1604. contentHeight = scrollable.get(0).scrollHeight;
  1605. }else{
  1606. contentHeight = element.get(0).scrollHeight;
  1607. if(options.verticalCentered){
  1608. contentHeight = element.find(TABLE_CELL_SEL).get(0).scrollHeight;
  1609. }
  1610. }
  1611. var scrollHeight = windowsHeight - parseInt(section.css('padding-bottom')) - parseInt(section.css('padding-top'));
  1612. //needs scroll?
  1613. if ( contentHeight > scrollHeight) {
  1614. //was there already an scroll ? Updating it
  1615. if(scrollable.length){
  1616. scrollable.css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px');
  1617. }
  1618. //creating the scrolling
  1619. else{
  1620. if(options.verticalCentered){
  1621. element.find(TABLE_CELL_SEL).wrapInner('<div class="' + SCROLLABLE + '" />');
  1622. }else{
  1623. element.wrapInner('<div class="' + SCROLLABLE + '" />');
  1624. }
  1625. element.find(SCROLLABLE_SEL).slimScroll({
  1626. allowPageScroll: true,
  1627. height: scrollHeight + 'px',
  1628. size: '10px',
  1629. alwaysVisible: true
  1630. });
  1631. }
  1632. }
  1633. //removing the scrolling when it is not necessary anymore
  1634. else{
  1635. removeSlimScroll(element);
  1636. }
  1637. //undo
  1638. element.css('overflow', '');
  1639. }
  1640. function removeSlimScroll(element){
  1641. element.find(SCROLLABLE_SEL).children().first().unwrap().unwrap();
  1642. element.find(SLIMSCROLL_BAR_SEL).remove();
  1643. element.find(SLIMSCROLL_RAIL_SEL).remove();
  1644. }
  1645. function addTableClass(element){
  1646. element.addClass(TABLE).wrapInner('<div class="' + TABLE_CELL + '" style="height:' + getTableHeight(element) + 'px;" />');
  1647. }
  1648. function getTableHeight(element){
  1649. var sectionHeight = windowsHeight;
  1650. if(options.paddingTop || options.paddingBottom){
  1651. var section = element;
  1652. if(!section.hasClass(SECTION)){
  1653. section = element.closest(SECTION_SEL);
  1654. }
  1655. var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom'));
  1656. sectionHeight = (windowsHeight - paddings);
  1657. }
  1658. return sectionHeight;
  1659. }
  1660. /**
  1661. * Adds a css3 transform property to the container class with or without animation depending on the animated param.
  1662. */
  1663. function transformContainer(translate3d, animated){
  1664. if(animated){
  1665. addAnimation(container);
  1666. }else{
  1667. removeAnimation(container);
  1668. }
  1669. container.css(getTransforms(translate3d));
  1670. //syncronously removing the class after the animation has been applied.
  1671. setTimeout(function(){
  1672. container.removeClass(NO_TRANSITION);
  1673. },10);
  1674. }
  1675. /**
  1676. * Gets a section by its anchor / index
  1677. */
  1678. function getSectionByAnchor(sectionAnchor){
  1679. //section
  1680. var section = $(SECTION_SEL + '[data-anchor="'+sectionAnchor+'"]');
  1681. if(!section.length){
  1682. section = $(SECTION_SEL).eq( (sectionAnchor -1) );
  1683. }
  1684. return section;
  1685. }
  1686. /**
  1687. * Gets a slide inside a given section by its anchor / index
  1688. */
  1689. function getSlideByAnchor(slideAnchor, section){
  1690. var slides = section.find(SLIDES_WRAPPER_SEL);
  1691. var slide = slides.find(SLIDE_SEL + '[data-anchor="'+slideAnchor+'"]');
  1692. if(!slide.length){
  1693. slide = slides.find(SLIDE_SEL).eq(slideAnchor);
  1694. }
  1695. return slide;
  1696. }
  1697. /**
  1698. * Scrolls to the given section and slide anchors
  1699. */
  1700. function scrollPageAndSlide(destiny, slide){
  1701. var section = getSectionByAnchor(destiny);
  1702. //default slide
  1703. if (typeof slide === 'undefined') {
  1704. slide = 0;
  1705. }
  1706. //we need to scroll to the section and then to the slide
  1707. if (destiny !== lastScrolledDestiny && !section.hasClass(ACTIVE)){
  1708. scrollPage(section, function(){
  1709. scrollSlider(section, slide);
  1710. });
  1711. }
  1712. //if we were already in the section
  1713. else{
  1714. scrollSlider(section, slide);
  1715. }
  1716. }
  1717. /**
  1718. * Scrolls the slider to the given slide destination for the given section
  1719. */
  1720. function scrollSlider(section, slideAnchor){
  1721. if(typeof slideAnchor !== 'undefined'){
  1722. var slides = section.find(SLIDES_WRAPPER_SEL);
  1723. var destiny = getSlideByAnchor(slideAnchor, section);
  1724. if(destiny.length){
  1725. landscapeScroll(slides, destiny);
  1726. }
  1727. }
  1728. }
  1729. /**
  1730. * Creates a landscape navigation bar with dots for horizontal sliders.
  1731. */
  1732. function addSlidesNavigation(section, numSlides){
  1733. section.append('<div class="' + SLIDES_NAV + '"><ul></ul></div>');
  1734. var nav = section.find(SLIDES_NAV_SEL);
  1735. //top or bottom
  1736. nav.addClass(options.slidesNavPosition);
  1737. for(var i=0; i< numSlides; i++){
  1738. nav.find('ul').append('<li><a href="#"><span></span></a></li>');
  1739. }
  1740. //centering it
  1741. nav.css('margin-left', '-' + (nav.width()/2) + 'px');
  1742. nav.find('li').first().find('a').addClass(ACTIVE);
  1743. }
  1744. /**
  1745. * Sets the state of the website depending on the active section/slide.
  1746. * It changes the URL hash when needed and updates the body class.
  1747. */
  1748. function setState(slideIndex, slideAnchor, anchorLink, sectionIndex){
  1749. var sectionHash = '';
  1750. if(options.anchors.length && !options.lockAnchors){
  1751. //isn't it the first slide?
  1752. if(slideIndex){
  1753. if(typeof anchorLink !== 'undefined'){
  1754. sectionHash = anchorLink;
  1755. }
  1756. //slide without anchor link? We take the index instead.
  1757. if(typeof slideAnchor === 'undefined'){
  1758. slideAnchor = slideIndex;
  1759. }
  1760. lastScrolledSlide = slideAnchor;
  1761. setUrlHash(sectionHash + '/' + slideAnchor);
  1762. //first slide won't have slide anchor, just the section one
  1763. }else if(typeof slideIndex !== 'undefined'){
  1764. lastScrolledSlide = slideAnchor;
  1765. setUrlHash(anchorLink);
  1766. }
  1767. //section without slides
  1768. else{
  1769. setUrlHash(anchorLink);
  1770. }
  1771. }
  1772. setBodyClass();
  1773. }
  1774. /**
  1775. * Sets the URL hash.
  1776. */
  1777. function setUrlHash(url){
  1778. if(options.recordHistory){
  1779. location.hash = url;
  1780. }else{
  1781. //Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :)
  1782. if(isTouchDevice || isTouch){
  1783. history.replaceState(undefined, undefined, '#' + url);
  1784. }else{
  1785. var baseUrl = window.location.href.split('#')[0];
  1786. window.location.replace( baseUrl + '#' + url );
  1787. }
  1788. }
  1789. }
  1790. /**
  1791. * Gets the anchor for the given slide. Its index will be used if there's none.
  1792. */
  1793. function getSlideAnchor(slide){
  1794. var slideAnchor = slide.data('anchor');
  1795. var slideIndex = slide.index();
  1796. //Slide without anchor link? We take the index instead.
  1797. if(typeof slideAnchor === 'undefined'){
  1798. slideAnchor = slideIndex;
  1799. }
  1800. return slideAnchor;
  1801. }
  1802. /**
  1803. * Sets a class for the body of the page depending on the active section / slide
  1804. */
  1805. function setBodyClass(){
  1806. var section = $(SECTION_ACTIVE_SEL);
  1807. var slide = section.find(SLIDE_ACTIVE_SEL);
  1808. var sectionAnchor = section.data('anchor');
  1809. var slideAnchor = getSlideAnchor(slide);
  1810. var sectionIndex = section.index(SECTION_SEL);
  1811. var text = sectionIndex;
  1812. if (options.anchors.length) {
  1813. text = sectionAnchor;
  1814. }
  1815. text = String(text);
  1816. if (slide.length) {
  1817. text = text + '-' + slideAnchor;
  1818. }
  1819. //changing slash for dash to make it a valid CSS style
  1820. text = text.replace('/', '-').replace('#','');
  1821. //removing previous anchor classes
  1822. var classRe = new RegExp('\\b\\s?' + VIEWING_PREFIX + '-[^\\s]+\\b', "g");
  1823. $body[0].className = $body[0].className.replace(classRe, '');
  1824. //adding the current anchor
  1825. $body.addClass(VIEWING_PREFIX + '-' + text);
  1826. }
  1827. /**
  1828. * Checks for translate3d support
  1829. * @return boolean
  1830. * http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
  1831. */
  1832. function support3d() {
  1833. var el = document.createElement('p'),
  1834. has3d,
  1835. transforms = {
  1836. 'webkitTransform':'-webkit-transform',
  1837. 'OTransform':'-o-transform',
  1838. 'msTransform':'-ms-transform',
  1839. 'MozTransform':'-moz-transform',
  1840. 'transform':'transform'
  1841. };
  1842. // Add it to the body to get the computed style.
  1843. document.body.insertBefore(el, null);
  1844. for (var t in transforms) {
  1845. if (el.style[t] !== undefined) {
  1846. el.style[t] = 'translate3d(1px,1px,1px)';
  1847. has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
  1848. }
  1849. }
  1850. document.body.removeChild(el);
  1851. return (has3d !== undefined && has3d.length > 0 && has3d !== 'none');
  1852. }
  1853. /**
  1854. * Removes the auto scrolling action fired by the mouse wheel and trackpad.
  1855. * After this function is called, the mousewheel and trackpad movements won't scroll through sections.
  1856. */
  1857. function removeMouseWheelHandler(){
  1858. if (document.addEventListener) {
  1859. document.removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
  1860. document.removeEventListener('wheel', MouseWheelHandler, false); //Firefox
  1861. document.removeEventListener('DOMMouseScroll', MouseWheelHandler, false); //old Firefox
  1862. } else {
  1863. document.detachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
  1864. }
  1865. }
  1866. /**
  1867. * Adds the auto scrolling action for the mouse wheel and trackpad.
  1868. * After this function is called, the mousewheel and trackpad movements will scroll through sections
  1869. */
  1870. function addMouseWheelHandler(){
  1871. if (document.addEventListener) {
  1872. document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
  1873. document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
  1874. document.addEventListener('DOMMouseScroll', MouseWheelHandler, false); //Old Firefox
  1875. } else {
  1876. document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
  1877. }
  1878. }
  1879. /**
  1880. * Adds the possibility to auto scroll through sections on touch devices.
  1881. */
  1882. function addTouchHandler(){
  1883. if(isTouchDevice || isTouch){
  1884. //Microsoft pointers
  1885. var MSPointer = getMSPointer();
  1886. $(WRAPPER_SEL).off('touchstart ' + MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
  1887. $(WRAPPER_SEL).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
  1888. }
  1889. }
  1890. /**
  1891. * Removes the auto scrolling for touch devices.
  1892. */
  1893. function removeTouchHandler(){
  1894. if(isTouchDevice || isTouch){
  1895. //Microsoft pointers
  1896. var MSPointer = getMSPointer();
  1897. $(WRAPPER_SEL).off('touchstart ' + MSPointer.down);
  1898. $(WRAPPER_SEL).off('touchmove ' + MSPointer.move);
  1899. }
  1900. }
  1901. /*
  1902. * Returns and object with Microsoft pointers (for IE<11 and for IE >= 11)
  1903. * http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
  1904. */
  1905. function getMSPointer(){
  1906. var pointer;
  1907. //IE >= 11 & rest of browsers
  1908. if(window.PointerEvent){
  1909. pointer = { down: 'pointerdown', move: 'pointermove'};
  1910. }
  1911. //IE < 11
  1912. else{
  1913. pointer = { down: 'MSPointerDown', move: 'MSPointerMove'};
  1914. }
  1915. return pointer;
  1916. }
  1917. /**
  1918. * Gets the pageX and pageY properties depending on the browser.
  1919. * https://github.com/alvarotrigo/fullPage.js/issues/194#issuecomment-34069854
  1920. */
  1921. function getEventsPage(e){
  1922. var events = [];
  1923. events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
  1924. events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);
  1925. //in touch devices with scrollBar:true, e.pageY is detected, but we have to deal with touch events. #1008
  1926. if(isTouch && isReallyTouch(e) && options.scrollBar){
  1927. events.y = e.touches[0].pageY;
  1928. events.x = e.touches[0].pageX;
  1929. }
  1930. return events;
  1931. }
  1932. /**
  1933. * Slides silently (with no animation) the active slider to the given slide.
  1934. */
  1935. function silentLandscapeScroll(activeSlide, noCallbacks){
  1936. FP.setScrollingSpeed (0, 'internal');
  1937. if(typeof noCallbacks !== 'undefined'){
  1938. //preventing firing callbacks afterSlideLoad etc.
  1939. isResizing = true;
  1940. }
  1941. landscapeScroll(activeSlide.closest(SLIDES_WRAPPER_SEL), activeSlide);
  1942. if(typeof noCallbacks !== 'undefined'){
  1943. isResizing = false;
  1944. }
  1945. FP.setScrollingSpeed(originals.scrollingSpeed, 'internal');
  1946. }
  1947. /**
  1948. * Scrolls silently (with no animation) the page to the given Y position.
  1949. */
  1950. function silentScroll(top){
  1951. if(options.scrollBar){
  1952. container.scrollTop(top);
  1953. }
  1954. else if (options.css3) {
  1955. var translate3d = 'translate3d(0px, -' + top + 'px, 0px)';
  1956. transformContainer(translate3d, false);
  1957. }
  1958. else {
  1959. container.css('top', -top);
  1960. }
  1961. }
  1962. /**
  1963. * Returns the cross-browser transform string.
  1964. */
  1965. function getTransforms(translate3d){
  1966. return {
  1967. '-webkit-transform': translate3d,
  1968. '-moz-transform': translate3d,
  1969. '-ms-transform':translate3d,
  1970. 'transform': translate3d
  1971. };
  1972. }
  1973. /**
  1974. * Allowing or disallowing the mouse/swipe scroll in a given direction. (not for keyboard)
  1975. * @type m (mouse) or k (keyboard)
  1976. */
  1977. function setIsScrollAllowed(value, direction, type){
  1978. switch (direction){
  1979. case 'up': isScrollAllowed[type].up = value; break;
  1980. case 'down': isScrollAllowed[type].down = value; break;
  1981. case 'left': isScrollAllowed[type].left = value; break;
  1982. case 'right': isScrollAllowed[type].right = value; break;
  1983. case 'all':
  1984. if(type == 'm'){
  1985. FP.setAllowScrolling(value);
  1986. }else{
  1987. FP.setKeyboardScrolling(value);
  1988. }
  1989. }
  1990. }
  1991. /*
  1992. * Destroys fullpage.js plugin events and optinally its html markup and styles
  1993. */
  1994. FP.destroy = function(all){
  1995. FP.setAutoScrolling(false, 'internal');
  1996. FP.setAllowScrolling(false);
  1997. FP.setKeyboardScrolling(false);
  1998. container.addClass(DESTROYED);
  1999. clearTimeout(afterSlideLoadsId);
  2000. clearTimeout(afterSectionLoadsId);
  2001. clearTimeout(resizeId);
  2002. clearTimeout(scrollId);
  2003. clearTimeout(scrollId2);
  2004. $window
  2005. .off('scroll', scrollHandler)
  2006. .off('hashchange', hashChangeHandler)
  2007. .off('resize', resizeHandler);
  2008. $document
  2009. .off('click', SECTION_NAV_SEL + ' a')
  2010. .off('mouseenter', SECTION_NAV_SEL + ' li')
  2011. .off('mouseleave', SECTION_NAV_SEL + ' li')
  2012. .off('click', SLIDES_NAV_LINK_SEL)
  2013. .off('mouseover', options.normalScrollElements)
  2014. .off('mouseout', options.normalScrollElements);
  2015. $(SECTION_SEL)
  2016. .off('click', SLIDES_ARROW_SEL);
  2017. clearTimeout(afterSlideLoadsId);
  2018. clearTimeout(afterSectionLoadsId);
  2019. //lets make a mess!
  2020. if(all){
  2021. destroyStructure();
  2022. }
  2023. };
  2024. /*
  2025. * Removes inline styles added by fullpage.js
  2026. */
  2027. function destroyStructure(){
  2028. //reseting the `top` or `translate` properties to 0
  2029. silentScroll(0);
  2030. $(SECTION_NAV_SEL + ', ' + SLIDES_NAV_SEL + ', ' + SLIDES_ARROW_SEL).remove();
  2031. //removing inline styles
  2032. $(SECTION_SEL).css( {
  2033. 'height': '',
  2034. 'background-color' : '',
  2035. 'padding': ''
  2036. });
  2037. $(SLIDE_SEL).css( {
  2038. 'width': ''
  2039. });
  2040. container.css({
  2041. 'height': '',
  2042. 'position': '',
  2043. '-ms-touch-action': '',
  2044. 'touch-action': ''
  2045. });
  2046. $htmlBody.css({
  2047. 'overflow': '',
  2048. 'height': ''
  2049. });
  2050. // remove .fp-enabled class
  2051. $('html').removeClass(ENABLED);
  2052. // remove all of the .fp-viewing- classes
  2053. $.each($body.get(0).className.split(/\s+/), function (index, className) {
  2054. if (className.indexOf(VIEWING_PREFIX) === 0) {
  2055. $body.removeClass(className);
  2056. }
  2057. });
  2058. //removing added classes
  2059. $(SECTION_SEL + ', ' + SLIDE_SEL).each(function(){
  2060. removeSlimScroll($(this));
  2061. $(this).removeClass(TABLE + ' ' + ACTIVE);
  2062. });
  2063. removeAnimation(container);
  2064. //Unwrapping content
  2065. container.find(TABLE_CELL_SEL + ', ' + SLIDES_CONTAINER_SEL + ', ' + SLIDES_WRAPPER_SEL).each(function(){
  2066. //unwrap not being use in case there's no child element inside and its just text
  2067. $(this).replaceWith(this.childNodes);
  2068. });
  2069. //scrolling the page to the top with no animation
  2070. $htmlBody.scrollTop(0);
  2071. }
  2072. /*
  2073. * Sets the state for a variable with multiple states (original, and temporal)
  2074. * Some variables such as `autoScrolling` or `recordHistory` might change automatically its state when using `responsive` or `autoScrolling:false`.
  2075. * This function is used to keep track of both states, the original and the temporal one.
  2076. * If type is not 'internal', then we assume the user is globally changing the variable.
  2077. */
  2078. function setVariableState(variable, value, type){
  2079. options[variable] = value;
  2080. if(type !== 'internal'){
  2081. originals[variable] = value;
  2082. }
  2083. }
  2084. /**
  2085. * Displays warnings
  2086. */
  2087. function displayWarnings(){
  2088. // Disable mutually exclusive settings
  2089. if (options.continuousVertical &&
  2090. (options.loopTop || options.loopBottom)) {
  2091. options.continuousVertical = false;
  2092. showError('warn', 'Option `loopTop/loopBottom` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled');
  2093. }
  2094. if(options.scrollBar && options.scrollOverflow){
  2095. showError('warn', 'Option `scrollBar` is mutually exclusive with `scrollOverflow`. Sections with scrollOverflow might not work well in Firefox');
  2096. }
  2097. if(options.continuousVertical && options.scrollBar){
  2098. options.continuousVertical = false;
  2099. showError('warn', 'Option `scrollBar` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled');
  2100. }
  2101. //anchors can not have the same value as any element ID or NAME
  2102. $.each(options.anchors, function(index, name){
  2103. if($('#' + name).length || $('[name="'+name+'"]').length ){
  2104. showError('error', 'data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE).');
  2105. }
  2106. });
  2107. }
  2108. /**
  2109. * Shows a message in the console of the given type.
  2110. */
  2111. function showError(type, text){
  2112. console && console[type] && console[type]('fullPage: ' + text);
  2113. }
  2114. };
  2115. });