暂无描述
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

aos.cjs.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. 'use strict';
  2. function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  3. var throttle = _interopDefault(require('lodash.throttle'));
  4. var debounce = _interopDefault(require('lodash.debounce'));
  5. var callback = function callback() {};
  6. function containsAOSNode(nodes) {
  7. var i = void 0,
  8. currentNode = void 0,
  9. result = void 0;
  10. for (i = 0; i < nodes.length; i += 1) {
  11. currentNode = nodes[i];
  12. if (currentNode.dataset && currentNode.dataset.aos) {
  13. return true;
  14. }
  15. result = currentNode.children && containsAOSNode(currentNode.children);
  16. if (result) {
  17. return true;
  18. }
  19. }
  20. return false;
  21. }
  22. function check(mutations) {
  23. if (!mutations) return;
  24. mutations.forEach(function (mutation) {
  25. var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
  26. var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
  27. var allNodes = addedNodes.concat(removedNodes);
  28. if (containsAOSNode(allNodes)) {
  29. return callback();
  30. }
  31. });
  32. }
  33. function getMutationObserver() {
  34. return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  35. }
  36. function isSupported() {
  37. return !!getMutationObserver();
  38. }
  39. function ready(selector, fn) {
  40. var doc = window.document;
  41. var MutationObserver = getMutationObserver();
  42. var observer = new MutationObserver(check);
  43. callback = fn;
  44. observer.observe(doc.documentElement, {
  45. childList: true,
  46. subtree: true,
  47. removedNodes: true
  48. });
  49. }
  50. var observer = { isSupported: isSupported, ready: ready };
  51. var classCallCheck = function (instance, Constructor) {
  52. if (!(instance instanceof Constructor)) {
  53. throw new TypeError("Cannot call a class as a function");
  54. }
  55. };
  56. var createClass = function () {
  57. function defineProperties(target, props) {
  58. for (var i = 0; i < props.length; i++) {
  59. var descriptor = props[i];
  60. descriptor.enumerable = descriptor.enumerable || false;
  61. descriptor.configurable = true;
  62. if ("value" in descriptor) descriptor.writable = true;
  63. Object.defineProperty(target, descriptor.key, descriptor);
  64. }
  65. }
  66. return function (Constructor, protoProps, staticProps) {
  67. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  68. if (staticProps) defineProperties(Constructor, staticProps);
  69. return Constructor;
  70. };
  71. }();
  72. var _extends = Object.assign || function (target) {
  73. for (var i = 1; i < arguments.length; i++) {
  74. var source = arguments[i];
  75. for (var key in source) {
  76. if (Object.prototype.hasOwnProperty.call(source, key)) {
  77. target[key] = source[key];
  78. }
  79. }
  80. }
  81. return target;
  82. };
  83. /**
  84. * Device detector
  85. */
  86. 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;
  87. 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;
  88. 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;
  89. 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;
  90. function ua() {
  91. return navigator.userAgent || navigator.vendor || window.opera || '';
  92. }
  93. var Detector = function () {
  94. function Detector() {
  95. classCallCheck(this, Detector);
  96. }
  97. createClass(Detector, [{
  98. key: 'phone',
  99. value: function phone() {
  100. var a = ua();
  101. return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
  102. }
  103. }, {
  104. key: 'mobile',
  105. value: function mobile() {
  106. var a = ua();
  107. return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
  108. }
  109. }, {
  110. key: 'tablet',
  111. value: function tablet() {
  112. return this.mobile() && !this.phone();
  113. }
  114. // http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
  115. }, {
  116. key: 'ie11',
  117. value: function ie11() {
  118. return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
  119. }
  120. }]);
  121. return Detector;
  122. }();
  123. var detect = new Detector();
  124. /**
  125. * Adds multiple classes on node
  126. * @param {DOMNode} node
  127. * @param {array} classes
  128. */
  129. var addClasses = function addClasses(node, classes) {
  130. return classes && classes.forEach(function (className) {
  131. return node.classList.add(className);
  132. });
  133. };
  134. /**
  135. * Removes multiple classes from node
  136. * @param {DOMNode} node
  137. * @param {array} classes
  138. */
  139. var removeClasses = function removeClasses(node, classes) {
  140. return classes && classes.forEach(function (className) {
  141. return node.classList.remove(className);
  142. });
  143. };
  144. var fireEvent = function fireEvent(eventName, data) {
  145. var customEvent = void 0;
  146. if (detect.ie11()) {
  147. customEvent = document.createEvent('CustomEvent');
  148. customEvent.initCustomEvent(eventName, true, true, { detail: data });
  149. } else {
  150. customEvent = new CustomEvent(eventName, {
  151. detail: data
  152. });
  153. }
  154. return document.dispatchEvent(customEvent);
  155. };
  156. /**
  157. * Set or remove aos-animate class
  158. * @param {node} el element
  159. * @param {int} top scrolled distance
  160. */
  161. var applyClasses = function applyClasses(el, top) {
  162. var options = el.options,
  163. position = el.position,
  164. node = el.node,
  165. data = el.data;
  166. var hide = function hide() {
  167. if (!el.animated) return;
  168. removeClasses(node, options.animatedClassNames);
  169. fireEvent('aos:out', node);
  170. if (el.options.id) {
  171. fireEvent('aos:in:' + el.options.id, node);
  172. }
  173. el.animated = false;
  174. };
  175. var show = function show() {
  176. if (el.animated) return;
  177. addClasses(node, options.animatedClassNames);
  178. fireEvent('aos:in', node);
  179. if (el.options.id) {
  180. fireEvent('aos:in:' + el.options.id, node);
  181. }
  182. el.animated = true;
  183. };
  184. if (options.mirror && top >= position.out && !options.once) {
  185. hide();
  186. } else if (top >= position.in) {
  187. show();
  188. } else if (el.animated && !options.once) {
  189. hide();
  190. }
  191. };
  192. /**
  193. * Scroll logic - add or remove 'aos-animate' class on scroll
  194. *
  195. * @param {array} $elements array of elements nodes
  196. * @return {void}
  197. */
  198. var handleScroll = function handleScroll($elements) {
  199. return $elements.forEach(function (el, i) {
  200. return applyClasses(el, window.pageYOffset);
  201. });
  202. };
  203. /**
  204. * Get offset of DOM element
  205. * like there were no transforms applied on it
  206. *
  207. * @param {Node} el [DOM element]
  208. * @return {Object} [top and left offset]
  209. */
  210. var offset = function offset(el) {
  211. var _x = 0;
  212. var _y = 0;
  213. while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
  214. _x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
  215. _y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
  216. el = el.offsetParent;
  217. }
  218. return {
  219. top: _y,
  220. left: _x
  221. };
  222. };
  223. /**
  224. * Get inline option with a fallback.
  225. *
  226. * @param {Node} el [Dom element]
  227. * @param {String} key [Option key]
  228. * @param {String} fallback [Default (fallback) value]
  229. * @return {Mixed} [Option set with inline attributes or fallback value if not set]
  230. */
  231. var getInlineOption = (function (el, key, fallback) {
  232. var attr = el.getAttribute('data-aos-' + key);
  233. if (typeof attr !== 'undefined') {
  234. if (attr === 'true') {
  235. return true;
  236. } else if (attr === 'false') {
  237. return false;
  238. }
  239. }
  240. return attr || fallback;
  241. });
  242. /**
  243. * Calculate offset
  244. * basing on element's settings like:
  245. * - anchor
  246. * - offset
  247. *
  248. * @param {Node} el [Dom element]
  249. * @return {Integer} [Final offset that will be used to trigger animation in good position]
  250. */
  251. var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
  252. var windowHeight = window.innerHeight;
  253. var anchor = getInlineOption(el, 'anchor');
  254. var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
  255. var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
  256. var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
  257. var finalEl = el;
  258. if (anchor && document.querySelectorAll(anchor)) {
  259. finalEl = document.querySelectorAll(anchor)[0];
  260. }
  261. var triggerPoint = offset(finalEl).top - windowHeight;
  262. switch (anchorPlacement) {
  263. case 'top-bottom':
  264. // Default offset
  265. break;
  266. case 'center-bottom':
  267. triggerPoint += finalEl.offsetHeight / 2;
  268. break;
  269. case 'bottom-bottom':
  270. triggerPoint += finalEl.offsetHeight;
  271. break;
  272. case 'top-center':
  273. triggerPoint += windowHeight / 2;
  274. break;
  275. case 'center-center':
  276. triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
  277. break;
  278. case 'bottom-center':
  279. triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
  280. break;
  281. case 'top-top':
  282. triggerPoint += windowHeight;
  283. break;
  284. case 'bottom-top':
  285. triggerPoint += windowHeight + finalEl.offsetHeight;
  286. break;
  287. case 'center-top':
  288. triggerPoint += windowHeight + finalEl.offsetHeight / 2;
  289. break;
  290. }
  291. return triggerPoint + additionalOffset;
  292. };
  293. var getPositionOut = function getPositionOut(el, defaultOffset) {
  294. var windowHeight = window.innerHeight;
  295. var anchor = getInlineOption(el, 'anchor');
  296. var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
  297. var finalEl = el;
  298. if (anchor && document.querySelectorAll(anchor)) {
  299. finalEl = document.querySelectorAll(anchor)[0];
  300. }
  301. var elementOffsetTop = offset(finalEl).top;
  302. return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
  303. };
  304. /* Clearing variables */
  305. var prepare = function prepare($elements, options) {
  306. $elements.forEach(function (el, i) {
  307. var mirror = getInlineOption(el.node, 'mirror', options.mirror);
  308. var once = getInlineOption(el.node, 'once', options.once);
  309. var id = getInlineOption(el.node, 'id');
  310. var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
  311. var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
  312. return typeof className === 'string';
  313. });
  314. if (options.initClassName) {
  315. el.node.classList.add(options.initClassName);
  316. }
  317. el.position = {
  318. in: getPositionIn(el.node, options.offset, options.anchorPlacement),
  319. out: mirror && getPositionOut(el.node, options.offset)
  320. };
  321. el.options = {
  322. once: once,
  323. mirror: mirror,
  324. animatedClassNames: animatedClassNames,
  325. id: id
  326. };
  327. });
  328. return $elements;
  329. };
  330. /**
  331. * Generate initial array with elements as objects
  332. * This array will be extended later with elements attributes values
  333. * like 'position'
  334. */
  335. var elements = (function () {
  336. var elements = document.querySelectorAll('[data-aos]');
  337. return Array.prototype.map.call(elements, function (node) {
  338. return { node: node };
  339. });
  340. });
  341. /**
  342. * *******************************************************
  343. * AOS (Animate on scroll) - wowjs alternative
  344. * made to animate elements on scroll in both directions
  345. * *******************************************************
  346. */
  347. /**
  348. * Private variables
  349. */
  350. var $aosElements = [];
  351. var initialized = false;
  352. /**
  353. * Default options
  354. */
  355. var options = {
  356. offset: 120,
  357. delay: 0,
  358. easing: 'ease',
  359. duration: 400,
  360. disable: false,
  361. once: false,
  362. mirror: false,
  363. anchorPlacement: 'top-bottom',
  364. startEvent: 'DOMContentLoaded',
  365. animatedClassName: 'aos-animate',
  366. initClassName: 'aos-init',
  367. useClassNames: false,
  368. disableMutationObserver: false,
  369. throttleDelay: 99,
  370. debounceDelay: 50
  371. };
  372. // Detect not supported browsers (<=IE9)
  373. // http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
  374. var isBrowserNotSupported = function isBrowserNotSupported() {
  375. return document.all && !window.atob;
  376. };
  377. var initializeScroll = function initializeScroll() {
  378. // Extend elements objects in $aosElements with their positions
  379. $aosElements = prepare($aosElements, options);
  380. // Perform scroll event, to refresh view and show/hide elements
  381. handleScroll($aosElements);
  382. /**
  383. * Handle scroll event to animate elements on scroll
  384. */
  385. window.addEventListener('scroll', throttle(function () {
  386. handleScroll($aosElements, options.once);
  387. }, options.throttleDelay));
  388. return $aosElements;
  389. };
  390. /**
  391. * Refresh AOS
  392. */
  393. var refresh = function refresh() {
  394. var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  395. // Allow refresh only when it was first initialized on startEvent
  396. if (initialize) initialized = true;
  397. if (initialized) initializeScroll();
  398. };
  399. /**
  400. * Hard refresh
  401. * create array with new elements and trigger refresh
  402. */
  403. var refreshHard = function refreshHard() {
  404. $aosElements = elements();
  405. if (isDisabled(options.disable) || isBrowserNotSupported()) {
  406. return disable();
  407. }
  408. refresh();
  409. };
  410. /**
  411. * Disable AOS
  412. * Remove all attributes to reset applied styles
  413. */
  414. var disable = function disable() {
  415. $aosElements.forEach(function (el, i) {
  416. el.node.removeAttribute('data-aos');
  417. el.node.removeAttribute('data-aos-easing');
  418. el.node.removeAttribute('data-aos-duration');
  419. el.node.removeAttribute('data-aos-delay');
  420. if (options.initClassName) {
  421. el.node.classList.remove(options.initClassName);
  422. }
  423. if (options.animatedClassName) {
  424. el.node.classList.remove(options.animatedClassName);
  425. }
  426. });
  427. };
  428. /**
  429. * Check if AOS should be disabled based on provided setting
  430. */
  431. var isDisabled = function isDisabled(optionDisable) {
  432. return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
  433. };
  434. /**
  435. * Initializing AOS
  436. * - Create options merging defaults with user defined options
  437. * - Set attributes on <body> as global setting - css relies on it
  438. * - Attach preparing elements to options.startEvent,
  439. * window resize and orientation change
  440. * - Attach function that handle scroll and everything connected to it
  441. * to window scroll event and fire once document is ready to set initial state
  442. */
  443. var init = function init(settings) {
  444. options = _extends(options, settings);
  445. // Create initial array with elements -> to be fullfilled later with prepare()
  446. $aosElements = elements();
  447. /**
  448. * Disable mutation observing if not supported
  449. */
  450. if (!options.disableMutationObserver && !observer.isSupported()) {
  451. 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 ');
  452. options.disableMutationObserver = true;
  453. }
  454. /**
  455. * Observe [aos] elements
  456. * If something is loaded by AJAX
  457. * it'll refresh plugin automatically
  458. */
  459. if (!options.disableMutationObserver) {
  460. observer.ready('[data-aos]', refreshHard);
  461. }
  462. /**
  463. * Don't init plugin if option `disable` is set
  464. * or when browser is not supported
  465. */
  466. if (isDisabled(options.disable) || isBrowserNotSupported()) {
  467. return disable();
  468. }
  469. /**
  470. * Set global settings on body, based on options
  471. * so CSS can use it
  472. */
  473. document.querySelector('body').setAttribute('data-aos-easing', options.easing);
  474. document.querySelector('body').setAttribute('data-aos-duration', options.duration);
  475. document.querySelector('body').setAttribute('data-aos-delay', options.delay);
  476. /**
  477. * Handle initializing
  478. */
  479. if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
  480. // Listen to options.startEvent and initialize AOS
  481. document.addEventListener(options.startEvent, function () {
  482. refresh(true);
  483. });
  484. } else {
  485. window.addEventListener('load', function () {
  486. refresh(true);
  487. });
  488. }
  489. if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
  490. // Initialize AOS if default startEvent was already fired
  491. refresh(true);
  492. }
  493. /**
  494. * Refresh plugin on window resize or orientation change
  495. */
  496. window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
  497. window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
  498. return $aosElements;
  499. };
  500. /**
  501. * Export Public API
  502. */
  503. var aos = {
  504. init: init,
  505. refresh: refresh,
  506. refreshHard: refreshHard
  507. };
  508. module.exports = aos;