Sin descripción
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

aos.esm.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. import throttle from 'lodash.throttle';
  2. import debounce from 'lodash.debounce';
  3. var callback = function callback() {};
  4. function containsAOSNode(nodes) {
  5. var i = void 0,
  6. currentNode = void 0,
  7. result = void 0;
  8. for (i = 0; i < nodes.length; i += 1) {
  9. currentNode = nodes[i];
  10. if (currentNode.dataset && currentNode.dataset.aos) {
  11. return true;
  12. }
  13. result = currentNode.children && containsAOSNode(currentNode.children);
  14. if (result) {
  15. return true;
  16. }
  17. }
  18. return false;
  19. }
  20. function check(mutations) {
  21. if (!mutations) return;
  22. mutations.forEach(function (mutation) {
  23. var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
  24. var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
  25. var allNodes = addedNodes.concat(removedNodes);
  26. if (containsAOSNode(allNodes)) {
  27. return callback();
  28. }
  29. });
  30. }
  31. function getMutationObserver() {
  32. return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  33. }
  34. function isSupported() {
  35. return !!getMutationObserver();
  36. }
  37. function ready(selector, fn) {
  38. var doc = window.document;
  39. var MutationObserver = getMutationObserver();
  40. var observer = new MutationObserver(check);
  41. callback = fn;
  42. observer.observe(doc.documentElement, {
  43. childList: true,
  44. subtree: true,
  45. removedNodes: true
  46. });
  47. }
  48. var observer = { isSupported: isSupported, ready: ready };
  49. var classCallCheck = function (instance, Constructor) {
  50. if (!(instance instanceof Constructor)) {
  51. throw new TypeError("Cannot call a class as a function");
  52. }
  53. };
  54. var createClass = function () {
  55. function defineProperties(target, props) {
  56. for (var i = 0; i < props.length; i++) {
  57. var descriptor = props[i];
  58. descriptor.enumerable = descriptor.enumerable || false;
  59. descriptor.configurable = true;
  60. if ("value" in descriptor) descriptor.writable = true;
  61. Object.defineProperty(target, descriptor.key, descriptor);
  62. }
  63. }
  64. return function (Constructor, protoProps, staticProps) {
  65. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  66. if (staticProps) defineProperties(Constructor, staticProps);
  67. return Constructor;
  68. };
  69. }();
  70. var _extends = Object.assign || function (target) {
  71. for (var i = 1; i < arguments.length; i++) {
  72. var source = arguments[i];
  73. for (var key in source) {
  74. if (Object.prototype.hasOwnProperty.call(source, key)) {
  75. target[key] = source[key];
  76. }
  77. }
  78. }
  79. return target;
  80. };
  81. /**
  82. * Device detector
  83. */
  84. var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
  85. var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
  86. var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
  87. var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
  88. function ua() {
  89. return navigator.userAgent || navigator.vendor || window.opera || '';
  90. }
  91. var Detector = function () {
  92. function Detector() {
  93. classCallCheck(this, Detector);
  94. }
  95. createClass(Detector, [{
  96. key: 'phone',
  97. value: function phone() {
  98. var a = ua();
  99. return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
  100. }
  101. }, {
  102. key: 'mobile',
  103. value: function mobile() {
  104. var a = ua();
  105. return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
  106. }
  107. }, {
  108. key: 'tablet',
  109. value: function tablet() {
  110. return this.mobile() && !this.phone();
  111. }
  112. // http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
  113. }, {
  114. key: 'ie11',
  115. value: function ie11() {
  116. return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
  117. }
  118. }]);
  119. return Detector;
  120. }();
  121. var detect = new Detector();
  122. /**
  123. * Adds multiple classes on node
  124. * @param {DOMNode} node
  125. * @param {array} classes
  126. */
  127. var addClasses = function addClasses(node, classes) {
  128. return classes && classes.forEach(function (className) {
  129. return node.classList.add(className);
  130. });
  131. };
  132. /**
  133. * Removes multiple classes from node
  134. * @param {DOMNode} node
  135. * @param {array} classes
  136. */
  137. var removeClasses = function removeClasses(node, classes) {
  138. return classes && classes.forEach(function (className) {
  139. return node.classList.remove(className);
  140. });
  141. };
  142. var fireEvent = function fireEvent(eventName, data) {
  143. var customEvent = void 0;
  144. if (detect.ie11()) {
  145. customEvent = document.createEvent('CustomEvent');
  146. customEvent.initCustomEvent(eventName, true, true, { detail: data });
  147. } else {
  148. customEvent = new CustomEvent(eventName, {
  149. detail: data
  150. });
  151. }
  152. return document.dispatchEvent(customEvent);
  153. };
  154. /**
  155. * Set or remove aos-animate class
  156. * @param {node} el element
  157. * @param {int} top scrolled distance
  158. */
  159. var applyClasses = function applyClasses(el, top) {
  160. var options = el.options,
  161. position = el.position,
  162. node = el.node,
  163. data = el.data;
  164. var hide = function hide() {
  165. if (!el.animated) return;
  166. removeClasses(node, options.animatedClassNames);
  167. fireEvent('aos:out', node);
  168. if (el.options.id) {
  169. fireEvent('aos:in:' + el.options.id, node);
  170. }
  171. el.animated = false;
  172. };
  173. var show = function show() {
  174. if (el.animated) return;
  175. addClasses(node, options.animatedClassNames);
  176. fireEvent('aos:in', node);
  177. if (el.options.id) {
  178. fireEvent('aos:in:' + el.options.id, node);
  179. }
  180. el.animated = true;
  181. };
  182. if (options.mirror && top >= position.out && !options.once) {
  183. hide();
  184. } else if (top >= position.in) {
  185. show();
  186. } else if (el.animated && !options.once) {
  187. hide();
  188. }
  189. };
  190. /**
  191. * Scroll logic - add or remove 'aos-animate' class on scroll
  192. *
  193. * @param {array} $elements array of elements nodes
  194. * @return {void}
  195. */
  196. var handleScroll = function handleScroll($elements) {
  197. return $elements.forEach(function (el, i) {
  198. return applyClasses(el, window.pageYOffset);
  199. });
  200. };
  201. /**
  202. * Get offset of DOM element
  203. * like there were no transforms applied on it
  204. *
  205. * @param {Node} el [DOM element]
  206. * @return {Object} [top and left offset]
  207. */
  208. var offset = function offset(el) {
  209. var _x = 0;
  210. var _y = 0;
  211. while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
  212. _x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
  213. _y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
  214. el = el.offsetParent;
  215. }
  216. return {
  217. top: _y,
  218. left: _x
  219. };
  220. };
  221. /**
  222. * Get inline option with a fallback.
  223. *
  224. * @param {Node} el [Dom element]
  225. * @param {String} key [Option key]
  226. * @param {String} fallback [Default (fallback) value]
  227. * @return {Mixed} [Option set with inline attributes or fallback value if not set]
  228. */
  229. var getInlineOption = (function (el, key, fallback) {
  230. var attr = el.getAttribute('data-aos-' + key);
  231. if (typeof attr !== 'undefined') {
  232. if (attr === 'true') {
  233. return true;
  234. } else if (attr === 'false') {
  235. return false;
  236. }
  237. }
  238. return attr || fallback;
  239. });
  240. /**
  241. * Calculate offset
  242. * basing on element's settings like:
  243. * - anchor
  244. * - offset
  245. *
  246. * @param {Node} el [Dom element]
  247. * @return {Integer} [Final offset that will be used to trigger animation in good position]
  248. */
  249. var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
  250. var windowHeight = window.innerHeight;
  251. var anchor = getInlineOption(el, 'anchor');
  252. var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
  253. var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
  254. var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
  255. var finalEl = el;
  256. if (anchor && document.querySelectorAll(anchor)) {
  257. finalEl = document.querySelectorAll(anchor)[0];
  258. }
  259. var triggerPoint = offset(finalEl).top - windowHeight;
  260. switch (anchorPlacement) {
  261. case 'top-bottom':
  262. // Default offset
  263. break;
  264. case 'center-bottom':
  265. triggerPoint += finalEl.offsetHeight / 2;
  266. break;
  267. case 'bottom-bottom':
  268. triggerPoint += finalEl.offsetHeight;
  269. break;
  270. case 'top-center':
  271. triggerPoint += windowHeight / 2;
  272. break;
  273. case 'center-center':
  274. triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
  275. break;
  276. case 'bottom-center':
  277. triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
  278. break;
  279. case 'top-top':
  280. triggerPoint += windowHeight;
  281. break;
  282. case 'bottom-top':
  283. triggerPoint += windowHeight + finalEl.offsetHeight;
  284. break;
  285. case 'center-top':
  286. triggerPoint += windowHeight + finalEl.offsetHeight / 2;
  287. break;
  288. }
  289. return triggerPoint + additionalOffset;
  290. };
  291. var getPositionOut = function getPositionOut(el, defaultOffset) {
  292. var windowHeight = window.innerHeight;
  293. var anchor = getInlineOption(el, 'anchor');
  294. var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
  295. var finalEl = el;
  296. if (anchor && document.querySelectorAll(anchor)) {
  297. finalEl = document.querySelectorAll(anchor)[0];
  298. }
  299. var elementOffsetTop = offset(finalEl).top;
  300. return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
  301. };
  302. /* Clearing variables */
  303. var prepare = function prepare($elements, options) {
  304. $elements.forEach(function (el, i) {
  305. var mirror = getInlineOption(el.node, 'mirror', options.mirror);
  306. var once = getInlineOption(el.node, 'once', options.once);
  307. var id = getInlineOption(el.node, 'id');
  308. var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
  309. var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
  310. return typeof className === 'string';
  311. });
  312. if (options.initClassName) {
  313. el.node.classList.add(options.initClassName);
  314. }
  315. el.position = {
  316. in: getPositionIn(el.node, options.offset, options.anchorPlacement),
  317. out: mirror && getPositionOut(el.node, options.offset)
  318. };
  319. el.options = {
  320. once: once,
  321. mirror: mirror,
  322. animatedClassNames: animatedClassNames,
  323. id: id
  324. };
  325. });
  326. return $elements;
  327. };
  328. /**
  329. * Generate initial array with elements as objects
  330. * This array will be extended later with elements attributes values
  331. * like 'position'
  332. */
  333. var elements = (function () {
  334. var elements = document.querySelectorAll('[data-aos]');
  335. return Array.prototype.map.call(elements, function (node) {
  336. return { node: node };
  337. });
  338. });
  339. /**
  340. * *******************************************************
  341. * AOS (Animate on scroll) - wowjs alternative
  342. * made to animate elements on scroll in both directions
  343. * *******************************************************
  344. */
  345. /**
  346. * Private variables
  347. */
  348. var $aosElements = [];
  349. var initialized = false;
  350. /**
  351. * Default options
  352. */
  353. var options = {
  354. offset: 120,
  355. delay: 0,
  356. easing: 'ease',
  357. duration: 400,
  358. disable: false,
  359. once: false,
  360. mirror: false,
  361. anchorPlacement: 'top-bottom',
  362. startEvent: 'DOMContentLoaded',
  363. animatedClassName: 'aos-animate',
  364. initClassName: 'aos-init',
  365. useClassNames: false,
  366. disableMutationObserver: false,
  367. throttleDelay: 99,
  368. debounceDelay: 50
  369. };
  370. // Detect not supported browsers (<=IE9)
  371. // http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
  372. var isBrowserNotSupported = function isBrowserNotSupported() {
  373. return document.all && !window.atob;
  374. };
  375. var initializeScroll = function initializeScroll() {
  376. // Extend elements objects in $aosElements with their positions
  377. $aosElements = prepare($aosElements, options);
  378. // Perform scroll event, to refresh view and show/hide elements
  379. handleScroll($aosElements);
  380. /**
  381. * Handle scroll event to animate elements on scroll
  382. */
  383. window.addEventListener('scroll', throttle(function () {
  384. handleScroll($aosElements, options.once);
  385. }, options.throttleDelay));
  386. return $aosElements;
  387. };
  388. /**
  389. * Refresh AOS
  390. */
  391. var refresh = function refresh() {
  392. var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  393. // Allow refresh only when it was first initialized on startEvent
  394. if (initialize) initialized = true;
  395. if (initialized) initializeScroll();
  396. };
  397. /**
  398. * Hard refresh
  399. * create array with new elements and trigger refresh
  400. */
  401. var refreshHard = function refreshHard() {
  402. $aosElements = elements();
  403. if (isDisabled(options.disable) || isBrowserNotSupported()) {
  404. return disable();
  405. }
  406. refresh();
  407. };
  408. /**
  409. * Disable AOS
  410. * Remove all attributes to reset applied styles
  411. */
  412. var disable = function disable() {
  413. $aosElements.forEach(function (el, i) {
  414. el.node.removeAttribute('data-aos');
  415. el.node.removeAttribute('data-aos-easing');
  416. el.node.removeAttribute('data-aos-duration');
  417. el.node.removeAttribute('data-aos-delay');
  418. if (options.initClassName) {
  419. el.node.classList.remove(options.initClassName);
  420. }
  421. if (options.animatedClassName) {
  422. el.node.classList.remove(options.animatedClassName);
  423. }
  424. });
  425. };
  426. /**
  427. * Check if AOS should be disabled based on provided setting
  428. */
  429. var isDisabled = function isDisabled(optionDisable) {
  430. return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
  431. };
  432. /**
  433. * Initializing AOS
  434. * - Create options merging defaults with user defined options
  435. * - Set attributes on <body> as global setting - css relies on it
  436. * - Attach preparing elements to options.startEvent,
  437. * window resize and orientation change
  438. * - Attach function that handle scroll and everything connected to it
  439. * to window scroll event and fire once document is ready to set initial state
  440. */
  441. var init = function init(settings) {
  442. options = _extends(options, settings);
  443. // Create initial array with elements -> to be fullfilled later with prepare()
  444. $aosElements = elements();
  445. /**
  446. * Disable mutation observing if not supported
  447. */
  448. if (!options.disableMutationObserver && !observer.isSupported()) {
  449. console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
  450. options.disableMutationObserver = true;
  451. }
  452. /**
  453. * Observe [aos] elements
  454. * If something is loaded by AJAX
  455. * it'll refresh plugin automatically
  456. */
  457. if (!options.disableMutationObserver) {
  458. observer.ready('[data-aos]', refreshHard);
  459. }
  460. /**
  461. * Don't init plugin if option `disable` is set
  462. * or when browser is not supported
  463. */
  464. if (isDisabled(options.disable) || isBrowserNotSupported()) {
  465. return disable();
  466. }
  467. /**
  468. * Set global settings on body, based on options
  469. * so CSS can use it
  470. */
  471. document.querySelector('body').setAttribute('data-aos-easing', options.easing);
  472. document.querySelector('body').setAttribute('data-aos-duration', options.duration);
  473. document.querySelector('body').setAttribute('data-aos-delay', options.delay);
  474. /**
  475. * Handle initializing
  476. */
  477. if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
  478. // Listen to options.startEvent and initialize AOS
  479. document.addEventListener(options.startEvent, function () {
  480. refresh(true);
  481. });
  482. } else {
  483. window.addEventListener('load', function () {
  484. refresh(true);
  485. });
  486. }
  487. if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
  488. // Initialize AOS if default startEvent was already fired
  489. refresh(true);
  490. }
  491. /**
  492. * Refresh plugin on window resize or orientation change
  493. */
  494. window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
  495. window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
  496. return $aosElements;
  497. };
  498. /**
  499. * Export Public API
  500. */
  501. var aos = {
  502. init: init,
  503. refresh: refresh,
  504. refreshHard: refreshHard
  505. };
  506. export default aos;