jquery.fullPage.js 111 KB

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