vendor: 4,318 bytes, lines 1-107
1/*! 2 * simpleParallax - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images or videos, 3 * @date: 20-08-2020 14:0:14, 4 * @version: 5.6.2, 5 * @link: https://simpleparallax.com/ 6 */ 7(function webpackUniversalModuleDefinition(root, factory) { 8 if(typeof exports === 'object' && typeof module === 'object') 9 module.exports = factory(); 10 else if(typeof define === 'function' && define.amd) 11 define("simpleParallax", [], factory); 12 else if(typeof exports === 'object') 13 exports["simpleParallax"] = factory(); 14 else 15 root["simpleParallax"] = factory(); 16})(window, function() { 17return /******/ (function(modules) { // webpackBootstrap 18/******/ // The module cache 19/******/ var installedModules = {}; 20/******/ 21/******/ // The require function 22/******/ function __webpack_require__(moduleId) { 23/******/ 24/******/ // Check if module is in cache 25/******/ if(installedModules[moduleId]) { 26/******/ return installedModules[moduleId].exports; 27/******/ } 28/******/ // Create a new module (and put it into the cache) 29/******/ var module = installedModules[moduleId] = { 30/******/ i: moduleId, 31/******/ l: false, 32/******/ exports: {} 33/******/ }; 34/******/ 35/******/ // Execute the module function 36/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 37/******/ 38/******/ // Flag the module as loaded 39/******/ module.l = true; 40/******/ 41/******/ // Return the exports of the module 42/******/ return module.exports; 43/******/ } 44/******/ 45/******/ 46/******/ // expose the modules object (__webpack_modules__) 47/******/ __webpack_require__.m = modules; 48/******/ 49/******/ // expose the module cache 50/******/ __webpack_require__.c = installedModules; 51/******/ 52/******/ // define getter function for harmony exports 53/******/ __webpack_require__.d = function(exports, name, getter) { 54/******/ if(!__webpack_require__.o(exports, name)) { 55/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 56/******/ } 57/******/ }; 58/******/ 59/******/ // define __esModule on exports 60/******/ __webpack_require__.r = function(exports) { 61/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 62/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 63/******/ } 64/******/ Object.defineProperty(exports, '__esModule', { value: true }); 65/******/ }; 66/******/ 67/******/ // create a fake namespace object 68/******/ // mode & 1: value is a module id, require it 69/******/ // mode & 2: merge all properties of value into the ns 70/******/ // mode & 4: return value when already ns object 71/******/ // mode & 8|1: behave like require 72/******/ __webpack_require__.t = function(value, mode) { 73/******/ if(mode & 1) value = __webpack_require__(value); 74/******/ if(mode & 8) return value; 75/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 76/******/ var ns = Object.create(null); 77/******/ __webpack_require__.r(ns); 78/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 79/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 80/******/ return ns; 81/******/ }; 82/******/ 83/******/ // getDefaultExport function for compatibility with non-harmony modules 84/******/ __webpack_require__.n = function(module) { 85/******/ var getter = module && module.__esModule ? 86/******/ function getDefault() { return module['default']; } : 87/******/ function getModuleExports() { return module; }; 88/******/ __webpack_require__.d(getter, 'a', getter); 89/******/ return getter; 90/******/ }; 91/******/ 92/******/ // Object.prototype.hasOwnProperty.call 93/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 94/******/ 95/******/ // __webpack_public_path__ 96/******/ __webpack_require__.p = ""; 97/******/ 98/******/ 99/******/ // Load entry module and return exports 100/******/ return __webpack_require__(__webpack_require__.s = 0); 101/******/ }) 102/************************************************************************/ 103/******/ ([ 104/* 0 */ 105/***/ (function(module, __webpack_exports__, __webpack_require__) { 106 107"use strict";
108// ESM COMPAT FLAG 109__webpack_require__.r(__webpack_exports__); 110 111// EXPORTS 112__webpack_require__.d(__webpack_exports__, "default", function() { return /* binding */ simpleParallax_SimpleParallax; }); 113 114// CONCATENATED MODULE: ./src/helpers/isSupportedBrowser.js 115// need closest support 116// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill 117// need Intersection Observer support 118// https://github.com/w3c/IntersectionObserver/tree/master/polyfill 119var isSupportedBrowser = function isSupportedBrowser() { 120 return Element.prototype.closest && 'IntersectionObserver' in window; 121}; 122 123/* harmony default export */ var helpers_isSupportedBrowser = (isSupportedBrowser); 124// CONCATENATED MODULE: ./src/helpers/viewport.js 125function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 126 127function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 128 129function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 130 131var Viewport = /*#__PURE__*/function () { 132 function Viewport() { 133 _classCallCheck(this, Viewport); 134 135 this.positions = { 136 top: 0, 137 bottom: 0, 138 height: 0 139 }; 140 } 141 142 _createClass(Viewport, [{ 143 key: "setViewportTop", 144 value: function setViewportTop(container) { 145 // if this is a custom container, user the scrollTop 146 this.positions.top = container ? container.scrollTop : window.pageYOffset; 147 return this.positions; 148 } 149 }, { 150 key: "setViewportBottom", 151 value: function setViewportBottom() { 152 this.positions.bottom = this.positions.top + this.positions.height; 153 return this.positions; 154 } 155 }, { 156 key: "setViewportAll", 157 value: function setViewportAll(container) { 158 // if this is a custom container, user the scrollTop 159 this.positions.top = container ? container.scrollTop : window.pageYOffset; // if this is a custom container, get the height from the custom container itself 160 161 this.positions.height = container ? container.clientHeight : document.documentElement.clientHeight; 162 this.positions.bottom = this.positions.top + this.positions.height; 163 return this.positions; 164 } 165 }]); 166 167 return Viewport; 168}(); 169 170var viewport = new Viewport(); 171 172// CONCATENATED MODULE: ./src/helpers/convertToArray.js 173// check whether the element is a Node List, a HTML Collection or an array 174// return an array of nodes 175var convertToArray = function convertToArray(elements) { 176 if (NodeList.prototype.isPrototypeOf(elements) || HTMLCollection.prototype.isPrototypeOf(elements)) return Array.from(elements); 177 if (typeof elements === 'string' || elements instanceof String) return document.querySelectorAll(elements); 178 return [elements]; 179}; 180 181/* harmony default export */ var helpers_convertToArray = (convertToArray); 182// CONCATENATED MODULE: ./src/helpers/cssTransform.js 183// Detect css transform 184var cssTransform = function cssTransform() { 185 var prefixes = 'transform webkitTransform mozTransform oTransform msTransform'.split(' '); 186 var transform; 187 var i = 0; 188 189 while (transform === undefined) { 190 transform = document.createElement('div').style[prefixes[i]] !== undefined ? prefixes[i] : undefined; 191 i += 1; 192 } 193 194 return transform; 195}; 196 197/* harmony default export */ var helpers_cssTransform = (cssTransform()); 198// CONCATENATED MODULE: ./src/helpers/isImageLoaded.js 199// check if media is fully loaded 200var isImageLoaded = function isImageLoaded(media) { 201 // if the media is a video, return true 202 if (media.tagName.toLowerCase() !== 'img' && media.tagName.toLowerCase() !== 'picture') { 203 return true; 204 } // check if media is set as the parameter 205 206 207 if (!media) { 208 return false;
209 } // check if media has been 100% loaded 210 211 212 if (!media.complete) { 213 return false; 214 } // check if the media is displayed 215 216 217 if (typeof media.naturalWidth !== 'undefined' && media.naturalWidth === 0) { 218 return false; 219 } 220 221 return true; 222}; 223 224/* harmony default export */ var helpers_isImageLoaded = (isImageLoaded); 225// CONCATENATED MODULE: ./src/instances/parallax.js 226function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } 227 228function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 229 230function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } 231 232function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } 233 234function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } 235 236function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } 237 238function parallax_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 239 240function parallax_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 241 242function parallax_createClass(Constructor, protoProps, staticProps) { if (protoProps) parallax_defineProperties(Constructor.prototype, protoProps); if (staticProps) parallax_defineProperties(Constructor, staticProps); return Constructor; } 243 244 245 246 247 248var parallax_ParallaxInstance = /*#__PURE__*/function () { 249 function ParallaxInstance(element, options) { 250 var _this = this; 251 252 parallax_classCallCheck(this, ParallaxInstance); 253 254 // set the element & settings 255 this.element = element; 256 this.elementContainer = element; 257 this.settings = options; 258 this.isVisible = true; 259 this.isInit = false; 260 this.oldTranslateValue = -1; 261 this.init = this.init.bind(this); 262 this.customWrapper = this.settings.customWrapper && this.element.closest(this.settings.customWrapper) ? this.element.closest(this.settings.customWrapper) : null; // check if images has not been loaded yet 263 264 if (helpers_isImageLoaded(element)) { 265 this.init(); 266 } else { 267 this.element.addEventListener('load', function () { 268 // timeout to ensure the image is fully loaded into the DOM 269 setTimeout(function () { 270 _this.init(true); 271 }, 50); 272 }); 273 } 274 } 275 276 parallax_createClass(ParallaxInstance, [{ 277 key: "init", 278 value: function init(asyncInit) { 279 var _this2 = this; 280 281 // for some reason, <picture> are init an infinite time on windows OS 282 if (this.isInit) return; 283 284 if (asyncInit) { 285 // in case the image is lazy loaded, the rangemax should be cleared 286 // so it will be updated in the next getTranslateValue() 287 this.rangeMax = null; 288 } // check if element has not been already initialized with simpleParallax 289 290 291 if (this.element.closest('.simpleParallax')) return; 292 293 if (this.settings.overflow === false) { 294 // if overflow option is set to false 295 // wrap the element into a div to apply overflow 296 this.wrapElement(this.element); 297 } // apply the transform style on the image 298 299 300 this.setTransformCSS(); // get the current element offset 301 302 this.getElementOffset(); // init the Intesection Observer 303 304 this.intersectionObserver(); // get its translated value 305 306 this.getTranslateValue(); // apply its translation even if not visible for the first init 307 308 this.animate(); // if a delay has been set 309 310 if (this.settings.delay > 0) { 311 // apply a timeout to avoid buggy effect 312 setTimeout(function () { 313 // apply the transition style on the image 314 _this2.setTransitionCSS(); //add isInit class 315 316 317 _this2.elementContainer.classList.add('simple-parallax-initialized'); 318 }, 10); 319 } else { 320 //add isInit class 321 this.elementContainer.classList.add('simple-parallax-initialized'); 322 } // for some reason, <picture> are init an infinite time on windows OS 323 324 325 this.isInit = true; 326 } // if overflow option is set to false 327 // wrap the element into a .simpleParallax div and apply overflow hidden to hide the image excedant (result of the scale) 328 329 }, { 330 key: "wrapElement", 331 value: function wrapElement() { 332 // check is current image is in a <picture> tag 333 var elementToWrap = this.element.closest('picture') || this.element; // create a .simpleParallax wrapper container 334 // if there is a custom wrapper 335 // override the wrapper with it 336 337 var wrapper = this.customWrapper || document.createElement('div'); 338 wrapper.classList.add('simpleParallax'); 339 wrapper.style.overflow = 'hidden'; // append the image inside the new wrapper 340 341 if (!this.customWrapper) { 342 elementToWrap.parentNode.insertBefore(wrapper, elementToWrap); 343 wrapper.appendChild(elementToWrap); 344 } 345 346 this.elementContainer = wrapper; 347 } // unwrap the element from .simpleParallax wrapper container 348 349 }, { 350 key: "unWrapElement", 351 value: function unWrapElement() { 352 var wrapper = this.elementContainer; // if there is a custom wrapper, we jusy need to remove the class and style 353 354 if (this.customWrapper) { 355 wrapper.classList.remove('simpleParallax'); 356 wrapper.style.overflow = ''; 357 } else { 358 wrapper.replaceWith.apply(wrapper, _toConsumableArray(wrapper.childNodes)); 359 } 360 } // apply default style on element 361 362 }, { 363 key: "setTransformCSS", 364 value: function setTransformCSS() { 365 if (this.settings.overflow === false) { 366 // if overflow option is set to false 367 // add scale style so the image can be translated without getting out of its container 368 this.element.style[helpers_cssTransform] = "scale(".concat(this.settings.scale, ")"); 369 } // add will-change CSS property to improve perfomance 370 371 372 this.element.style.willChange = 'transform'; 373 } // apply the transition effet 374 375 }, { 376 key: "setTransitionCSS", 377 value: function setTransitionCSS() { 378 // add transition option 379 this.element.style.transition = "transform ".concat(this.settings.delay, "s ").concat(this.settings.transition); 380 } // remove style of the element 381 382 }, { 383 key: "unSetStyle", 384 value: function unSetStyle() { 385 // remove will change inline style 386 this.element.style.willChange = ''; 387 this.element.style[helpers_cssTransform] = ''; 388 this.element.style.transition = ''; 389 } // get the current element offset 390 391 }, { 392 key: "getElementOffset", 393 value: function getElementOffset() { 394 // get position of the element 395 var positions = this.elementContainer.getBoundingClientRect(); // get height 396 397 this.elementHeight = positions.height; // get offset top 398 399 this.elementTop = positions.top + viewport.positions.top; // if there is a custom container 400 401 if (this.settings.customContainer) { 402 // we need to do some calculation to get the position from the parent rather than the viewport 403 var parentPositions = this.settings.customContainer.getBoundingClientRect(); 404 this.elementTop = positions.top - parentPositions.top + viewport.positions.top; 405 } // get offset bottom 406 407 408 this.elementBottom = this.elementHeight + this.elementTop; 409 } // build the Threshold array to cater change for every pixel scrolled 410 411 }, { 412 key: "buildThresholdList", 413 value: function buildThresholdList() { 414 var thresholds = []; 415 416 for (var i = 1.0; i <= this.elementHeight; i++) { 417 var ratio = i / this.elementHeight; 418 thresholds.push(ratio); 419 } 420 421 return thresholds; 422 } // create the Intersection Observer 423 424 }, { 425 key: "intersectionObserver", 426 value: function intersectionObserver() { 427 var options = { 428 root: null, 429 threshold: this.buildThresholdList() 430 }; 431 this.observer = new IntersectionObserver(this.intersectionObserverCallback.bind(this), options); 432 this.observer.observe(this.element); 433 } // Intersection Observer Callback to set the element at visible state or not 434 435 }, { 436 key: "intersectionObserverCallback", 437 value: function intersectionObserverCallback(entries) { 438 var _this3 = this; 439
440 entries.forEach(function (entry) { 441 if (entry.isIntersecting) { 442 _this3.isVisible = true; 443 } else { 444 _this3.isVisible = false; 445 } 446 }); 447 } // check if the current element is visible in the Viewport 448 // for browser that not support Intersection Observer API 449 450 }, { 451 key: "checkIfVisible", 452 value: function checkIfVisible() { 453 return this.elementBottom > viewport.positions.top && this.elementTop < viewport.positions.bottom; 454 } // calculate the range between image will be translated 455 456 }, { 457 key: "getRangeMax", 458 value: function getRangeMax() { 459 // get the real height of the image without scale 460 var elementImageHeight = this.element.clientHeight; // range is calculate with the image height by the scale 461 462 this.rangeMax = elementImageHeight * this.settings.scale - elementImageHeight; 463 } // get the percentage and the translate value to apply on the element 464 465 }, { 466 key: "getTranslateValue", 467 value: function getTranslateValue() { 468 // calculate the % position of the element comparing to the viewport 469 // rounding percentage to a 1 number float to avoid unn unnecessary calculation 470 var percentage = ((viewport.positions.bottom - this.elementTop) / ((viewport.positions.height + this.elementHeight) / 100)).toFixed(1); // sometime the percentage exceeds 100 or goes below 0 471 472 percentage = Math.min(100, Math.max(0, percentage)); // if a maxTransition has been set, we round the percentage to that number 473 474 if (this.settings.maxTransition !== 0 && percentage > this.settings.maxTransition) { 475 percentage = this.settings.maxTransition; 476 } // sometime the same percentage is returned 477 // if so we don't do aything 478 479 480 if (this.oldPercentage === percentage) { 481 return false; 482 } // if not range max is set, recalculate it 483 484 485 if (!this.rangeMax) { 486 this.getRangeMax(); 487 } // transform this % into the max range of the element 488 // rounding translateValue to a non float int - as minimum pixel for browser to render is 1 (no 0.5) 489 490 491 this.translateValue = (percentage / 100 * this.rangeMax - this.rangeMax / 2).toFixed(0); // sometime the same translate value is returned 492 // if so we don't do aything 493 494 if (this.oldTranslateValue === this.translateValue) { 495 return false; 496 } // store the current percentage 497 498 499 this.oldPercentage = percentage; 500 this.oldTranslateValue = this.translateValue; 501 return true; 502 } // animate the image 503 504 }, { 505 key: "animate", 506 value: function animate() { 507 var translateValueY = 0; 508 var translateValueX = 0; 509 var inlineCss; 510 511 if (this.settings.orientation.includes('left') || this.settings.orientation.includes('right')) { 512 // if orientation option is left or right 513 // use horizontal axe - X axe 514 translateValueX = "".concat(this.settings.orientation.includes('left') ? this.translateValue * -1 : this.translateValue, "px"); 515 } 516 517 if (this.settings.orientation.includes('up') || this.settings.orientation.includes('down')) { 518 // if orientation option is up or down 519 // use vertical axe - Y axe 520 translateValueY = "".concat(this.settings.orientation.includes('up') ? this.translateValue * -1 : this.translateValue, "px"); 521 } // set style to apply to the element 522 523 524 if (this.settings.overflow === false) { 525 // if overflow option is set to false 526 // add the scale style 527 inlineCss = "translate3d(".concat(translateValueX, ", ").concat(translateValueY, ", 0) scale(").concat(this.settings.scale, ")"); 528 } else { 529 inlineCss = "translate3d(".concat(translateValueX, ", ").concat(translateValueY, ", 0)"); 530 } // add style on the element using the adequate CSS transform 531 532 533 this.element.style[helpers_cssTransform] = inlineCss; 534 } 535 }]); 536 537 return ParallaxInstance; 538}(); 539 540/* harmony default export */ var parallax = (parallax_ParallaxInstance); 541// CONCATENATED MODULE: ./src/simpleParallax.js 542function simpleParallax_toConsumableArray(arr) { return simpleParallax_arrayWithoutHoles(arr) || simpleParallax_iterableToArray(arr) || simpleParallax_unsupportedIterableToArray(arr) || simpleParallax_nonIterableSpread(); } 543 544function simpleParallax_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 545 546function simpleParallax_iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } 547 548function simpleParallax_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return simpleParallax_arrayLikeToArray(arr); } 549 550function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || simpleParallax_unsupportedIterableToArray(arr, i) || _nonIterableRest(); } 551 552function _nonIterableRest() { throw new TypeError("Invalid attempt to de
552structure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 553 554function simpleParallax_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return simpleParallax_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return simpleParallax_arrayLikeToArray(o, minLen); } 555 556function simpleParallax_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } 557 558function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } 559 560function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } 561 562function simpleParallax_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 563 564function simpleParallax_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 565 566function simpleParallax_createClass(Constructor, protoProps, staticProps) { if (protoProps) simpleParallax_defineProperties(Constructor.prototype, protoProps); if (staticProps) simpleParallax_defineProperties(Constructor, staticProps); return Constructor; } 567 568 569 570 571 572var isInit = false; 573var instances = []; 574var frameID; 575var resizeID; 576 577var simpleParallax_SimpleParallax = /*#__PURE__*/function () { 578 function SimpleParallax(elements, options) { 579 simpleParallax_classCallCheck(this, SimpleParallax); 580 581 if (!elements) return; // check if the browser support simpleParallax 582 583 if (!helpers_isSupportedBrowser()) return; 584 this.elements = helpers_convertToArray(elements); 585 this.defaults = { 586 delay: 0, 587 orientation: 'up', 588 scale: 1.3, 589 overflow: false, 590 transition: 'cubic-bezier(0,0,0,1)', 591 customContainer: '', 592 customWrapper: '', 593 maxTransition: 0 594 }; 595 this.settings = Object.assign(this.defaults, options); 596 597 if (this.settings.customContainer) { 598 var _convertToArray = helpers_convertToArray(this.settings.customContainer); 599 600 var _convertToArray2 = _slicedToArray(_convertToArray, 1); 601 602 this.customContainer = _convertToArray2[0]; 603 } 604 605 this.lastPosition = -1; 606 this.resizeIsDone = this.resizeIsDone.bind(this); 607 this.refresh = this.refresh.bind(this); 608 this.proceedRequestAnimationFrame = this.proceedRequestAnimationFrame.bind(this); 609 this.init(); 610 } 611 612 simpleParallax_createClass(SimpleParallax, [{ 613 key: "init", 614 value: function init() { 615 var _this = this; 616 617 viewport.setViewportAll(this.customContainer); 618 instances = [].concat(simpleParallax_toConsumableArray(this.elements.map(function (element) { 619 return new parallax(element, _this.settings); 620 })), simpleParallax_toConsumableArray(instances)); // update the instance length 621 // instancesLength = instances.length; 622 // only if this is the first simpleParallax init 623 624 if (!isInit) { 625 // init the frame 626 this.proceedRequestAnimationFrame(); 627 window.addEventListener('resize', this.resizeIsDone); 628 isInit = true; 629 } 630 } // wait for resize to be completely done 631 632 }, { 633 key: "resizeIsDone", 634 value: function resizeIsDone() { 635 clearTimeout(resizeID); 636 resizeID = setTimeout(this.refresh, 200); 637 } // animation frame 638 639 }, { 640 key: "proceedRequestAnimationFrame", 641 value: function proceedRequestAnimationFrame() { 642 var _this2 = this; 643 644 // get the offset top of the viewport 645 viewport.setViewportTop(this.customContainer); 646 647 if (this.lastPosition === viewport.positions.top) { 648 // if last position if the same than the curent one 649 // callback the animationFrame and exit the current loop 650 frameID = window.requestAnimationFrame(this.proceedRequestAnimationFrame); 651 return; 652 } // get the offset bottom of the viewport 653 654 655 viewport.setViewportBottom(); // proceed with the current element 656
657 instances.forEach(function (instance) { 658 _this2.proceedElement(instance); 659 }); // callback the animationFrame 660 661 frameID = window.requestAnimationFrame(this.proceedRequestAnimationFrame); // store the last position 662 663 this.lastPosition = viewport.positions.top; 664 } // proceed the element 665 666 }, { 667 key: "proceedElement", 668 value: function proceedElement(instance) { 669 var isVisible = false; // if this is a custom container 670 // use old function to check if element visible 671 672 if (this.customContainer) { 673 isVisible = instance.checkIfVisible(); // else, use response from Intersection Observer API Callback 674 } else { 675 isVisible = instance.isVisible; 676 } // if element not visible, stop it 677 678 679 if (!isVisible) return; // if percentage is equal to the last one, no need to continue 680 681 if (!instance.getTranslateValue()) { 682 return; 683 } // animate the image 684 685 686 instance.animate(); 687 } 688 }, { 689 key: "refresh", 690 value: function refresh() { 691 // re-get all the viewport positions 692 viewport.setViewportAll(this.customContainer); 693 instances.forEach(function (instance) { 694 // re-get the current element offset 695 instance.getElementOffset(); // re-get the range if the current element 696 697 instance.getRangeMax(); 698 }); // force the request animation frame to fired 699 700 this.lastPosition = -1; 701 } 702 }, { 703 key: "destroy", 704 value: function destroy() { 705 var _this3 = this; 706 707 var instancesToDestroy = []; // remove all instances that need to be destroyed from the instances array 708 709 instances = instances.filter(function (instance) { 710 if (_this3.elements.includes(instance.element)) { 711 // push instance that need to be destroyed into instancesToDestroy 712 instancesToDestroy.push(instance); 713 return false; 714 } 715 716 return instance; 717 }); 718 instancesToDestroy.forEach(function (instance) { 719 // unset style 720 instance.unSetStyle(); 721 722 if (_this3.settings.overflow === false) { 723 // if overflow option is set to false 724 // unwrap the element from .simpleParallax wrapper container 725 instance.unWrapElement(); 726 } 727 }); // if no instances left, remove the raf and resize event = simpleParallax fully destroyed 728 729 if (!instances.length) { 730 // cancel the animation frame 731 window.cancelAnimationFrame(frameID); // detach the resize event 732 733 window.removeEventListener('resize', this.refresh); // Reset isInit 734 735 isInit = false; 736 } 737 } 738 }]); 739 740 return SimpleParallax; 741}(); 742 743 744 745/***/ }) 746/******/ ])["default"]; 747});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.