UNPKG

fullib-js

Version:

Full Javascript Animation Library

github.com/dev-florian/fullib-js

dev-florian/fullib-js

74 lines (57 loc) • 2.23 MB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./fullib-js/src/js/3D/Carousel.js": /*!*****************************************!*\ !*** ./fullib-js/src/js/3D/Carousel.js ***! \*****************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Carousel)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../Utils/Utils */ \"./fullib-js/src/js/Utils/Utils.js\");\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var _css_carousel3D_carousel3D_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./../../css/carousel3D/carousel3D.css */ \"./fullib-js/src/css/carousel3D/carousel3D.css\");\n/* harmony import */ var _Shaders_01_fragment_glsl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Shaders/01/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/01/fragment.glsl\");\n/* harmony import */ var _Shaders_02_fragment_glsl__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Shaders/02/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/02/fragment.glsl\");\n/* harmony import */ var _Shaders_03_fragment_glsl__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Shaders/03/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/03/fragment.glsl\");\n/* harmony import */ var _Shaders_04_fragment_glsl__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Shaders/04/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/04/fragment.glsl\");\n/* harmony import */ var _Shaders_05_fragment_glsl__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Shaders/05/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/05/fragment.glsl\");\n/* harmony import */ var _Shaders_06_fragment_glsl__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Shaders/06/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/06/fragment.glsl\");\n/* harmony import */ var _Shaders_07_fragment_glsl__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Shaders/07/fragment.glsl */ \"./fullib-js/src/js/3D/Shaders/07/fragment.glsl\");\n/* harmony import */ var _Shaders_vertex_glsl__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Shaders/vertex.glsl */ \"./fullib-js/src/js/3D/Shaders/vertex.glsl\");\n/* harmony import */ var _Displacement_disp1_jpg__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Displacement/disp1.jpg */ \"./fullib-js/src/js/3D/Displacement/disp1.jpg\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nclass Carousel extends _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\r\n constructor(options = {}) {\r\n super();\r\n\r\n //BASIC\r\n this.elem = options.elem ? (options.elem instanceof Element ? options.elem : document.querySelector(options.elem)) : document.querySelector('.carousel-3d');\r\n\r\n if (this.elem) {\r\n this.currentIndex = 0\r\n this.preset = options.preset ? options.preset : false;\r\n this.beforeTransition = options.beforeTransition !== false;\r\n this.dots = options.dots !== false;\r\n this.dotElements = [];\r\n this.autoplay = options.autoplay !== false;\r\n this.intervalId = null;\r\n this.status = {pause: false};\r\n this.speed = options.speed ? options.speed : 750;\r\n this.pause = options.pause ? options.pause : 3000;\r\n this.vertex = options.vertex ? options.vertex : _Shaders_vertex_glsl__WEBPACK_IMPORTED_MODULE_9__[\"default\"];\r\n this.fragment = options.fragment ? options.fragment : false;\r\n this.uniforms = options.uniforms ? options.uniforms : {\r\n intensity: {value: .5, type: 'f', min: 0, max: 2},\r\n width: {value: 0.5, type: 'f', min: 0, max: 10},\r\n scaleX: {value: 40, type: 'f', min: 0.1, max: 60},\r\n scaleY: {value: 40, type: 'f', min: 0.1, max: 60},\r\n radius: {value: 0.2, type: 'f', min: 0.1, max: 2},\r\n };\r\n\r\n this.breakPointTablet = options.breakPoint && options.breakPoint.tablet ? options.breakPoint.tablet : 991;\r\n this.breakPointMobile = options.breakPoint && options.breakPoint.mobile ? options.breakPoint.mobile : 991;\r\n\r\n this.touchstartX = 0\r\n this.touchendX = 0\r\n\r\n if (!this.fragment) {\r\n this.preset = this.preset ? this.preset : '04';\r\n }\r\n\r\n if (this.preset) {\r\n if (this.preset === '01') this.fragment = _Shaders_01_fragment_glsl__WEBPACK_IMPORTED_MODULE_2__[\"default\"];\r\n if (this.preset === '02') this.fragment = _Shaders_02_fragment_glsl__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\r\n if (this.preset === '03') this.fragment = _Shaders_03_fragment_glsl__WEBPACK_IMPORTED_MODULE_4__[\"default\"];\r\n if (this.preset === '04') this.fragment = _Shaders_04_fragment_glsl__WEBPACK_IMPORTED_MODULE_5__[\"default\"];\r\n if (this.preset === '05') this.fragment = _Shaders_05_fragment_glsl__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\r\n if (this.preset === '06') this.fragment = _Shaders_06_fragment_glsl__WEBPACK_IMPORTED_MODULE_7__[\"default\"];\r\n if (this.preset === '07') this.fragment = _Shaders_07_fragment_glsl__WEBPACK_IMPORTED_MODULE_8__[\"default\"];\r\n if (this.preset === '08') this.fragment = fragment08;\r\n }\r\n\r\n\r\n this.time = 0;\r\n this.textures = [];\r\n this.nextDiv = this.elem.querySelector('.next');\r\n this.prevDiv = this.elem.querySelector('.prev');\r\n this.images = this.elem.querySelectorAll('.slide');\r\n this.elem.classList.add('fullib-carousel-3d');\r\n this.elem.classList.add('init-progress');\r\n\r\n this.initSlides();\r\n }\r\n }\r\n\r\n initSlides() {\r\n this.createScene();\r\n this.elem.classList.remove('init-progress');\r\n this.elem.classList.add('init-success');\r\n\r\n this.elem.addEventListener('touchstart', e => {\r\n this.touchstartX = e.changedTouches[0].screenX\r\n })\r\n\r\n this.elem.addEventListener('touchend', e => {\r\n this.touchendX = e.changedTouches[0].screenX\r\n this.checkDirection()\r\n })\r\n\r\n if (this.autoplay) {\r\n this.resetLoop();\r\n }\r\n\r\n if (this.dots) {\r\n this.generateDots();\r\n }\r\n }\r\n\r\n createScene() {\r\n this.scene = new three__WEBPACK_IMPORTED_MODULE_11__.Scene();\r\n this.renderer = new three__WEBPACK_IMPORTED_MODULE_11__.WebGLRenderer();\r\n\r\n this.scene = new three__WEBPACK_IMPORTED_MODULE_11__.Scene();\r\n this.renderer = new three__WEBPACK_IMPORTED_MODULE_11__.WebGLRenderer();\r\n // this.width = window.innerWidth;\r\n // this.height = window.innerHeight;\r\n this.width = this.elem.innerWidth;\r\n this.height = this.elem.innerHeight;\r\n this.renderer.setPixelRatio(window.devicePixelRatio);\r\n this.renderer.setSize(this.width, this.height);\r\n this.renderer.setClearColor(0xeeeeee, 1);\r\n\r\n this.elem.appendChild(this.renderer.domElement);\r\n\r\n this.camera = new three__WEBPACK_IMPORTED_MODULE_11__.PerspectiveCamera(\r\n 70,\r\n window.innerWidth / window.innerHeight,\r\n 0.001,\r\n 1000\r\n );\r\n\r\n this.camera.position.set(0, 0, 2);\r\n\r\n this.paused = false;\r\n\r\n this.initiate(()=>{\r\n\r\n this.setupResize();\r\n this.settings();\r\n this.addObjects();\r\n this.resize();\r\n this.render();\r\n })\r\n\r\n if (this.nextDiv) {\r\n this.nextDiv.addEventListener('click', () => {\r\n this.nextSlide();\r\n })\r\n }\r\n\r\n if (this.prevDiv) {\r\n this.prevDiv.addEventListener('click', () => {\r\n this.prevSlide();\r\n })\r\n }\r\n }\r\n\r\n settings() {\r\n this.settings = {progress:0};\r\n\r\n Object.keys(this.uniforms).forEach((item)=> {\r\n this.settings[item] = this.uniforms[item].value;\r\n })\r\n }\r\n\r\n setupResize() {\r\n window.addEventListener(\"resize\", this.resize.bind(this));\r\n }\r\n\r\n initiate(cb){\r\n this.images[0].classList.add('is-visible');\r\n const promises = [];\r\n let that = this;\r\n this.images.forEach((div,i)=>{\r\n let url = div.getAttribute('data-media');\r\n if(window.innerWidth < that.breakPointTablet && div.getAttribute('data-media-tablet')){\r\n url = div.getAttribute('data-media-tablet');\r\n }\r\n if(window.innerWidth < that.breakPointMobile && div.getAttribute('data-media-mobile')){\r\n url = div.getAttribute('data-media-mobile');\r\n }\r\n\r\n let promise = new Promise(resolve => {\r\n that.textures[i] = new three__WEBPACK_IMPORTED_MODULE_11__.TextureLoader().load( url, resolve );\r\n });\r\n promises.push(promise);\r\n })\r\n\r\n Promise.all(promises).then(() => {\r\n cb();\r\n });\r\n }\r\n\r\n addObjects() {\r\n this.material = new three__WEBPACK_IMPORTED_MODULE_11__.ShaderMaterial({\r\n side: three__WEBPACK_IMPORTED_MODULE_11__.DoubleSide,\r\n uniforms: {\r\n time: {type: \"f\", value: 0},\r\n progress: {type: \"f\", value: 0},\r\n border: {type: \"f\", value: 0},\r\n intensity: {type: \"f\", value: 0},\r\n scaleX: {type: \"f\", value: 40},\r\n scaleY: {type: \"f\", value: 40},\r\n transition: {type: \"f\", value: 40},\r\n swipe: {type: \"f\", value: 0},\r\n width: {type: \"f\", value: 0},\r\n radius: {type: \"f\", value: 0},\r\n texture1: {type: \"f\", value: this.textures[0]},\r\n texture2: {type: \"f\", value: this.textures[1]},\r\n displacement: {type: \"f\", value: new three__WEBPACK_IMPORTED_MODULE_11__.TextureLoader().load(_Displacement_disp1_jpg__WEBPACK_IMPORTED_MODULE_10__[\"default\"])},\r\n resolution: {type: \"v4\", value: new three__WEBPACK_IMPORTED_MODULE_11__.Vector4()},\r\n },\r\n transparent: true,\r\n vertexShader: this.vertex,\r\n fragmentShader: this.fragment,\r\n depthTest: false,\r\n depthWrite: false\r\n });\r\n\r\n this.geometry = new three__WEBPACK_IMPORTED_MODULE_11__.PlaneGeometry(1, 1, 2, 2);\r\n\r\n this.plane = new three__WEBPACK_IMPORTED_MODULE_11__.Mesh(this.geometry, this.material);\r\n this.scene.add(this.plane);\r\n }\r\n\r\n render() {\r\n this.time += 0.05;\r\n this.material.uniforms.time.value = this.time;\r\n this.material.uniforms.progress.value = this.settings.progress;\r\n\r\n Object.keys(this.uniforms).forEach((item) => {\r\n this.material.uniforms[item].value = this.settings[item];\r\n });\r\n\r\n // this.camera.position.z = 3;\r\n // this.plane.rotation.y = 0.4*Math.sin(this.time)\r\n // this.plane.rotation.x = 0.5*Math.sin(0.4*this.time)\r\n\r\n requestAnimationFrame(this.render.bind(this));\r\n this.renderer.render(this.scene, this.camera);\r\n }\r\n\r\n\r\n resize() {\r\n this.width = this.elem.offsetWidth;\r\n this.height = this.elem.offsetHeight;\r\n this.renderer.setSize(this.width, this.height);\r\n this.camera.aspect = this.width / this.height;\r\n\r\n\r\n // image cover\r\n this.imageAspect = this.textures[0].image.height/this.textures[0].image.width;\r\n\r\n let a1; let a2;\r\n if(this.height/this.width>this.imageAspect) {\r\n a1 = (this.width/this.height) * this.imageAspect ;\r\n a2 = 1;\r\n } else{\r\n a1 = 1;\r\n a2 = (this.height/this.width) / this.imageAspect;\r\n }\r\n\r\n this.material.uniforms.resolution.value.x = this.width;\r\n this.material.uniforms.resolution.value.y = this.height;\r\n this.material.uniforms.resolution.value.z = a1;\r\n this.material.uniforms.resolution.value.w = a2;\r\n\r\n const dist = this.camera.position.z;\r\n const height = 1;\r\n this.camera.fov = 2*(180/Math.PI)*Math.atan(height/(2*dist));\r\n\r\n this.plane.scale.x = this.camera.aspect;\r\n this.plane.scale.y = 1;\r\n\r\n this.camera.updateProjectionMatrix();\r\n }\r\n\r\n startCarousel() {\r\n this.resetLoop();\r\n\r\n // Ajouter des écouteurs d'événements pour les actions utilisateur\r\n document.addEventListener('click', this.resetLoop.bind(this));\r\n }\r\n\r\n resetLoop() {\r\n if (this.intervalId) {\r\n clearTimeout(this.intervalId);\r\n }\r\n this.loop();\r\n }\r\n\r\n loop = () => {\r\n if(!this.isRunning){\r\n this.intervalId = setTimeout(() => {\r\n this.nextSlide();\r\n }, this.pause);\r\n }\r\n };\r\n\r\n nextSlide() {\r\n this.goToIndex(this.currentIndex + 1)\r\n }\r\n\r\n prevSlide() {\r\n this.goToIndex(this.currentIndex - 1)\r\n }\r\n\r\n goToIndex(index) {\r\n if (!this.isRunning) {\r\n this.isRunning = true;\r\n\r\n const indexBeforeChange = this.currentIndex;\r\n\r\n this.currentIndex = index;\r\n if (this.currentIndex < 0) {\r\n this.currentIndex = this.textures.length - 1;\r\n }\r\n if (this.currentIndex >= this.textures.length) {\r\n this.currentIndex = 0;\r\n }\r\n\r\n this.prevTexture = this.textures[this.currentIndex];\r\n\r\n this.material.uniforms.texture2.value = this.prevTexture;\r\n\r\n this.elem.classList.add('transition-progress');\r\n\r\n if (this.beforeTransition) {\r\n this.images[indexBeforeChange].classList.remove('is-visible');\r\n this.images[this.currentIndex].classList.add('is-visible');\r\n\r\n if(this.dots){\r\n this.dotElements.forEach(dot => {\r\n dot.classList.remove('active');\r\n })\r\n this.dotElements[this.currentIndex].classList.add('active');\r\n }\r\n }\r\n\r\n\r\n this.animateValue({\r\n duration: this.speed,\r\n startValue: 0,\r\n endValue: 1,\r\n updateFunction: (value) => {\r\n this.settings.progress = value;\r\n },\r\n onComplete: () => {\r\n this.elem.classList.remove('transition-progress');\r\n this.isRunning = false;\r\n this.settings.progress = 0;\r\n this.material.uniforms.texture1.value = this.prevTexture;\r\n\r\n if (!this.beforeTransition) {\r\n this.images[indexBeforeChange].classList.remove('is-visible');\r\n this.images[this.currentIndex].classList.add('is-visible');\r\n\r\n if(this.dots){\r\n this.dotElements.forEach(dot => {\r\n dot.classList.remove('active');\r\n })\r\n this.dotElements[this.currentIndex].classList.add('active');\r\n }\r\n }\r\n\r\n\r\n if(this.autoplay){\r\n this.resetLoop();\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n generateDots(){\r\n let dotsContainer = this.addElement('div', 'dots',\r\n {\r\n addTo: this.elem\r\n })\r\n\r\n this.images.forEach((image, index) => {\r\n let isActive = index === this.currentIndex ? ' active' : '';\r\n let className = 'dot';\r\n let dot = this.addElement('div', className,\r\n {\r\n addTo: dotsContainer\r\n })\r\n\r\n if(isActive){\r\n dot.classList.add('active');\r\n }\r\n\r\n if(image.getAttribute('data-dot-text')){\r\n dot.classList.add('with-text');\r\n dot.innerHTML = image.getAttribute('data-dot-text');\r\n }else{\r\n dot.classList.add('with-bulb');\r\n }\r\n\r\n dot.setAttribute('data-index', index);\r\n\r\n this.dotElements[index] = dot;\r\n\r\n dot.addEventListener('click', e => {\r\n this.goToIndex(index)\r\n })\r\n })\r\n }\r\n\r\n animateValue({duration, startValue, endValue, updateFunction, onComplete}) {\r\n const startTime = performance.now();\r\n\r\n function update() {\r\n const currentTime = performance.now();\r\n const elapsedTime = currentTime - startTime;\r\n const progress = Math.min(elapsedTime / duration, 1);\r\n const currentValue = startValue + (endValue - startValue) * progress;\r\n\r\n // Call the updateFunction with the current value\r\n updateFunction(currentValue);\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(update);\r\n } else {\r\n onComplete();\r\n }\r\n }\r\n\r\n requestAnimationFrame(update);\r\n }\r\n\r\n setPause(){\r\n this.status.pause = true;\r\n }\r\n setRun(){\r\n this.status.pause = false;\r\n }\r\n\r\n checkDirection() {\r\n if (this.touchendX < this.touchstartX) this.prevSlide()\r\n if (this.touchendX > this.touchstartX) this.nextSlide()\r\n }\r\n}\r\n\n\n//# sourceURL=webpack:///./fullib-js/src/js/3D/Carousel.js?"); /***/ }), /***/ "./fullib-js/src/js/Basic/Animation.js": /*!*********************************************!*\ !*** ./fullib-js/src/js/Basic/Animation.js ***! \*********************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Animation)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../Utils/Utils */ \"./fullib-js/src/js/Utils/Utils.js\");\n\r\n\r\nclass Animation extends _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\r\n constructor(options = {}) {\r\n super();\r\n this.elems = options.elems ? (options.elems instanceof HTMLCollection ? options.elems : document.querySelectorAll(options.elems)) : [];\r\n this.elem = options.elem && (options.elem instanceof Element || options.elem instanceof HTMLDocument ) ? this.elems.push(options.elem) : false;\r\n this.mobileBreakpoint = options.mobileBreakpoint ? options.mobileBreakpoint : 991;\r\n this.isScroll = options.scroll ? options.scroll : false;\r\n this.isScroll = options.isScrollMobile && window.innerWidth < this.mobileBreakpoint ? options.isScrollMobile : this.isScroll;\r\n this.transition = options.transition ? options.transition : 'all 0.1s linear';\r\n this.duration = options.duration ? options.duration : 500;\r\n this.delay = options.delay ? options.delay : 0;\r\n this.fromCss = options.from ? options.from : false;\r\n this.toCss = options.to ? options.to : false;\r\n this.start = options.start ? options.start : '0%';\r\n this.end = options.end ? options.end : '100%';\r\n this.timingFunction = options.timingFunction ? options.timingFunction : 'ease';\r\n this.screenHeight = window.screen.height;\r\n this.measure = options.measure ? options.measure : 'px';\r\n this.currentPurcent = 0;\r\n\r\n if(this.elems.length){\r\n this.init();\r\n }\r\n }\r\n\r\n\r\n init() {\r\n this.convertVariables();\r\n\r\n let localStorage = this;\r\n\r\n this.elems.forEach(elem => {\r\n elem.style.opacity = this.fromCssOpacity;\r\n let cssPosition = this.getDefaultPosition();\r\n elem.style.transform = cssPosition.transformFromCss;\r\n\r\n\r\n if (!this.isScroll) {\r\n if (this.isElementInViewport(elem)) {\r\n elem.style.transition = 'all ' + this.duration + 'ms ' + this.timingFunction + ' ' + this.delay + 'ms';\r\n elem.style.transform = cssPosition.transformToCss;\r\n elem.style.opacity = this.toCssOpacity;\r\n }\r\n\r\n window.addEventListener(\"scroll\", (event) => {\r\n if (this.isElementInViewport(elem)) {\r\n elem.style.transition = 'all ' + localStorage.duration + 'ms ' + localStorage.timingFunction + ' ' + localStorage.delay + 'ms';\r\n elem.style.transform = cssPosition.transformToCss;\r\n elem.style.opacity = this.toCssOpacity;\r\n } else {\r\n elem.style.transform = cssPosition.transformFromCss;\r\n elem.style.opacity = localStorage.fromCssOpacity;\r\n }\r\n });\r\n }\r\n\r\n if (this.isScroll) {\r\n this.currentPurcent = this.actionScroll(elem);\r\n elem.style.transition = this.transition;\r\n\r\n window.addEventListener(\"scroll\", (event) => {\r\n localStorage.currentPurcent = localStorage.actionScroll(elem);\r\n });\r\n }\r\n })\r\n }\r\n\r\n convertVariables() {\r\n //CONVERT\r\n this.fromCssY = typeof this.fromCss.y !== 'undefined' ? this.fromCss.y : false;\r\n this.toCssY = typeof this.toCss.y !== 'undefined' ? this.toCss.y : false;\r\n\r\n this.fromCssOpacity = typeof this.fromCss.opacity !== 'undefined' ? this.fromCss.opacity : 1;\r\n this.toCssOpacity = typeof this.toCss.opacity !== 'undefined' ? this.toCss.opacity : 1;\r\n\r\n this.fromCssX = typeof this.fromCss.x !== 'undefined' ? this.fromCss.x : false;\r\n this.toCssX = typeof this.toCss.x !== 'undefined' ? this.toCss.x : false;\r\n\r\n this.fromCssScale = typeof this.fromCss.scale !== 'undefined' ? this.fromCss.scale : false;\r\n this.toCssScale = typeof this.toCss.scale !== 'undefined' ? this.toCss.scale : false;\r\n\r\n this.fromCssRotate = typeof this.fromCss.rotate !== 'undefined' ? this.fromCss.rotate : false;\r\n this.toCssRotate = typeof this.toCss.rotate !== 'undefined' ? this.toCss.rotate : false;\r\n\r\n this.fromCssSkewX = typeof this.fromCss.skewX !== 'undefined' ? this.fromCss.skewX : false;\r\n this.toCssSkewX = typeof this.toCss.skewX !== 'undefined' ? this.toCss.skewX : false;\r\n\r\n this.fromCssSkewY = typeof this.fromCss.skewY !== 'undefined' ? this.fromCss.skewY : false;\r\n this.toCssSkewY = typeof this.toCss.skewY !== 'undefined' ? this.toCss.skewY : false;\r\n\r\n this.start = parseFloat(this.start);\r\n this.end = parseFloat(this.end);\r\n //END\r\n }\r\n\r\n getDefaultPosition() {\r\n let transformFromCss = \"\";\r\n let transformToCss = \"\";\r\n\r\n if (this.validNumber(this.fromCssX) && this.validNumber(this.toCssX)) {\r\n transformFromCss += \"translateX(\" + this.fromCssX + this.measure + \") \";\r\n transformToCss += \"translateX(\" + this.toCssX + this.measure + \") \";\r\n }\r\n\r\n if (this.validNumber(this.fromCssY) && this.validNumber(this.toCssY)) {\r\n transformFromCss += \"translateY(\" + this.fromCssY + this.measure + \") \";\r\n transformToCss += \"translateY(\" + this.toCssY + this.measure + \") \";\r\n }\r\n\r\n if (this.validNumber(this.fromCssScale) && this.validNumber(this.toCssScale)) {\r\n transformFromCss += \"scale(\" + this.fromCssScale + \") \";\r\n transformToCss += \"scale(\" + this.toCssScale + \") \";\r\n }\r\n\r\n if (this.validNumber(this.fromCssRotate) && this.validNumber(this.toCssRotate)) {\r\n transformFromCss += \"rotate(\" + this.fromCssRotate + \"deg)\";\r\n transformToCss += \"rotate(\" + this.toCssRotate + \"deg)\";\r\n }\r\n\r\n if (this.validNumber(this.fromCssSkewX) && this.validNumber(this.toCssSkewX)) {\r\n transformFromCss += \"skewX(\" + this.fromCssSkewX + \"deg)\";\r\n transformToCss += \"skewX(\" + this.toCssSkewX + \"deg)\";\r\n }\r\n\r\n if (this.validNumber(this.fromCssSkewY) && this.validNumber(this.toCssSkewY)) {\r\n transformFromCss += \"skewY(\" + this.fromCssSkewY + \"deg)\";\r\n transformToCss += \"skewY(\" + this.toCssSkewY + \"deg)\";\r\n }\r\n\r\n return {\r\n transformFromCss: transformFromCss,\r\n transformToCss: transformToCss,\r\n }\r\n }\r\n\r\n actionScroll(elem) {\r\n let scrollGlobal = window.scrollY;\r\n\r\n let elemHeight = elem.offsetHeight;\r\n let windowHeight = window.innerHeight;\r\n let scrollPositionToElem = elem.getBoundingClientRect().bottom - elemHeight;\r\n let currentPurcent = ((windowHeight - scrollPositionToElem) * 100) / (windowHeight + elemHeight);\r\n let resPurcent = Math.max(0, Math.min(100, currentPurcent));\r\n\r\n if (currentPurcent >= 0 && scrollPositionToElem <= this.screenHeight && currentPurcent >= this.start && currentPurcent <= this.end) {\r\n\r\n let scrollPurcentInView = ((currentPurcent - this.start) * 100) / (this.end - this.start);\r\n\r\n if (this.toCssOpacity >= 0) {\r\n let opacityRes = this.calcCss(this.fromCssOpacity, this.toCssOpacity, scrollPurcentInView);\r\n elem.style.opacity = opacityRes;\r\n }\r\n\r\n let transformCss = \"\";\r\n\r\n if (this.validNumber(this.fromCssX) && this.validNumber(this.toCssX)) {\r\n let cssXRes = this.calcCss(this.fromCssX, this.toCssX, scrollPurcentInView);\r\n transformCss += \"translateX(\" + cssXRes + this.measure + \") \";\r\n }\r\n\r\n if (this.validNumber(this.fromCssY) && this.validNumber(this.toCssY)) {\r\n let cssYRes = this.calcCss(this.fromCssY, this.toCssY, scrollPurcentInView);\r\n transformCss += \"translateY(\" + cssYRes + this.measure + \") \";\r\n }\r\n\r\n if (this.validNumber(this.fromCssScale) && this.validNumber(this.toCssScale)) {\r\n let cssScaleRes = this.calcCss(this.fromCssScale, this.toCssScale, scrollPurcentInView);\r\n\r\n transformCss += \"scale(\" + cssScaleRes + \")\";\r\n }\r\n\r\n if (this.validNumber(this.fromCssRotate) && this.validNumber(this.toCssRotate)) {\r\n let cssRotateRes = this.calcCss(this.fromCssRotate, this.toCssRotate, scrollPurcentInView);\r\n transformCss += \"rotate(\" + cssRotateRes + \"deg)\";\r\n }\r\n\r\n if (this.validNumber(this.fromCssSkewX) && this.validNumber(this.toCssSkewX)) {\r\n let cssSkewXRes = this.calcCss(this.fromCssSkewX, this.toCssSkewX, scrollPurcentInView);\r\n transformCss += \"skewX(\" + cssSkewXRes + \"deg)\";\r\n }\r\n\r\n if (this.validNumber(this.fromCssSkewY) && this.validNumber(this.toCssSkewY)) {\r\n let cssSkewYRes = this.calcCss(this.fromCssSkewY, this.toCssSkewY, scrollPurcentInView);\r\n transformCss += \"skewY(\" + cssSkewYRes + \"deg)\";\r\n }\r\n\r\n\r\n elem.style.transform = transformCss;\r\n }\r\n\r\n let cssPosition = this.getDefaultPosition();\r\n\r\n if (currentPurcent < this.start && currentPurcent < this.end) {\r\n if (this.validNumber(this.toCssOpacity)) {\r\n elem.style.opacity = this.fromCssOpacity;\r\n }\r\n if (cssPosition.transformToCss) {\r\n elem.style.transform = cssPosition.transformFromCss;\r\n }\r\n }\r\n\r\n if (currentPurcent > this.start && currentPurcent > this.end) {\r\n if (this.validNumber(this.toCssOpacity)) {\r\n elem.style.opacity = this.toCssOpacity;\r\n }\r\n if (cssPosition.transformFromCss) {\r\n elem.style.transform = cssPosition.transformToCss;\r\n }\r\n }\r\n\r\n return currentPurcent;\r\n }\r\n\r\n calcCss(from, to, scrollPurcentInView) {\r\n return parseFloat(((to - from) / 100) * scrollPurcentInView + from);\r\n }\r\n}\r\n\n\n//# sourceURL=webpack:///./fullib-js/src/js/Basic/Animation.js?"); /***/ }), /***/ "./fullib-js/src/js/Basic/Cursor.js": /*!******************************************!*\ !*** ./fullib-js/src/js/Basic/Cursor.js ***! \******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Cursor)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../Utils/Utils */ \"./fullib-js/src/js/Utils/Utils.js\");\n/* harmony import */ var _css_cursor_Cursor_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./../../css/cursor/Cursor.css */ \"./fullib-js/src/css/cursor/Cursor.css\");\n\r\n\r\n\r\nclass Cursor extends _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\r\n constructor(options = {}) {\r\n super();\r\n\r\n this.elem = options.elem ? (options.elem instanceof HTMLElement ? options.elem : document.querySelector(options.elem)) : false;\r\n this.elems = options.elems ? (options.elems instanceof HTMLCollection ? options.elems : document.querySelectorAll(options.elems)) : false;\r\n this.imagePath = options.imagePath ? options.imagePath : false;\r\n this.htmlContent = options.htmlContent ? options.htmlContent : false;\r\n this.position = options.position ? options.position : \"center center\";\r\n this.offsetY = options.offsetY ? options.offsetY : 0;\r\n this.offsetX = options.offsetX ? options.offsetX : 0;\r\n this.force3D = typeof options.force3D === 'undefined' ? true : options.force3D;\r\n this.imageWidth = options.imageWidth ? options.imageWidth : false;\r\n this.imageHeight = options.imageHeight ? options.imageHeight : false;\r\n this.showOnMobile = typeof options.showOnMobile === 'undefined' ? true : options.showOnMobile;\r\n this.breakpointMobile = typeof options.breakpointMobile === 'undefined' ? 991 : options.breakpointMobile;\r\n this.deformation = options.deformation ? options.deformation : true;\r\n this.deformationFactor = options.deformationFactor ? options.deformationFactor : 0.05;\r\n this.resetSkewTimeout = false;\r\n\r\n let showCursor = true;\r\n if(!this.showOnMobile && this.breakpointMobile >= window.innerWidth){\r\n showCursor = false;\r\n }\r\n\r\n if(showCursor){\r\n if(this.elem){\r\n this.elems = [this.elem];\r\n\r\n if(this.elem.getAttribute('data-image-path')){\r\n this.imagePath = this.elem.getAttribute('data-image-path');\r\n }\r\n\r\n if(this.elem.getAttribute('data-html-content')){\r\n this.htmlContent = this.elem.getAttribute('data-html-content');\r\n }\r\n\r\n if(this.elem.getAttribute('data-position')){\r\n this.position = this.elem.getAttribute('data-position');\r\n }\r\n\r\n if(this.elem.getAttribute('data-offset-y')){\r\n this.offsetY = parseFloat(this.elem.getAttribute('data-offset-y'));\r\n }\r\n\r\n if(this.elem.getAttribute('data-offset-x')){\r\n this.offsetX = parseFloat(this.elem.getAttribute('data-offset-x'));\r\n }\r\n\r\n if(this.elem.getAttribute('data-image-width')){\r\n this.imageWidth = parseFloat(this.elem.getAttribute('data-image-width'));\r\n }\r\n\r\n if(this.elem.getAttribute('data-image-height')){\r\n this.imageHeight = parseFloat(this.elem.getAttribute('data-image-height'));\r\n }\r\n\r\n }\r\n\r\n if (this.elems && (this.imagePath || this.htmlContent)) {\r\n\r\n if(this.imagePath){\r\n this.imageObject = new Image();\r\n this.imageObject.src = this.imagePath;\r\n }\r\n\r\n this.cursorHoverDiv = false;\r\n this.cursorHoverDivChildren = false;\r\n\r\n this.defautHoverEffect = options.defautHoverEffect ? options.defautHoverEffect : false;\r\n this.imageCover = typeof options.imageCover === 'undefined' ? true : options.imageCover;\r\n this.keepCursor = typeof options.keepCursor === 'undefined' ? false : options.keepCursor;\r\n\r\n if (this.imageWidth && this.imageObject) {\r\n this.imageObject.style.width = this.imageWidth + 'px';\r\n }\r\n\r\n if (this.imageHeight && this.imageObject) {\r\n this.imageObject.style.height = this.imageHeight + 'px';\r\n }\r\n\r\n if(this.imageObject){\r\n this.imageObject.onload = function (image) {\r\n this.imageWidth = image.width\r\n this.imageHeight = image.height\r\n }\r\n }\r\n\r\n\r\n this.cursorX = 0;\r\n this.cursorY = 0;\r\n\r\n this.init();\r\n }\r\n }\r\n\r\n }\r\n\r\n\r\n init() {\r\n this.createAndConfigureDiv();\r\n\r\n window.addEventListener('load', event => {\r\n this.changePosition(event)\r\n })\r\n\r\n\r\n window.addEventListener('mousemove', event => {\r\n this.changePosition(event)\r\n })\r\n\r\n this.elems.forEach(elem => {\r\n if (this.cursorHoverDiv) {\r\n\r\n elem.classList.add('elem-cursor-animation');\r\n if(this.defautHoverEffect){\r\n elem.classList.add('default-hover-anim');\r\n }\r\n\r\n if(!this.keepCursor){\r\n elem.style.cursor = 'none';\r\n }\r\n\r\n elem.addEventListener('mouseenter', event => {\r\n this.cursorHoverDiv.classList.add('active');\r\n elem.classList.add('is-hovered-elem');\r\n });\r\n\r\n elem.addEventListener('mouseleave', event => {\r\n this.cursorHoverDiv.classList.remove('active');\r\n elem.classList.remove('is-hovered-elem');\r\n });\r\n\r\n elem.addEventListener('mousemove', event => {\r\n if(!this.cursorHoverDiv.classList.contains('active')){\r\n this.cursorHoverDiv.classList.add('active');\r\n elem.classList.add('is-hovered-elem');\r\n }\r\n })\r\n }\r\n })\r\n }\r\n\r\n changePosition(event){\r\n\r\n const contentWidth = this.imageObject ? this.imageObject.width : this.cursorHoverDiv.offsetWidth;\r\n const contentHeight = this.imageObject ? this.imageObject.height : this.cursorHoverDiv.offsetHeight;\r\n\r\n if (this.position == \"center center\") {\r\n this.cursorX = event.clientX - (contentWidth / 2);\r\n this.cursorY = event.clientY - (contentHeight / 2);\r\n }\r\n\r\n if (this.position == \"bottom right\") {\r\n this.cursorX = event.clientX;\r\n this.cursorY = event.clientY - contentHeight;\r\n }\r\n\r\n if (this.position == \"bottom left\") {\r\n this.cursorX = event.clientX - contentWidth;\r\n this.cursorY = event.clientY - contentHeight;\r\n }\r\n\r\n if (this.position == \"top left\") {\r\n this.cursorX = event.clientX - contentWidth;\r\n this.cursorY = event.clientY;\r\n }\r\n\r\n if (this.position == \"top right\") {\r\n this.cursorX = event.clientX;\r\n this.cursorY = event.clientY;\r\n }\r\n\r\n if (this.position == \"center right\") {\r\n this.cursorX = event.clientX;\r\n this.cursorY = event.clientY - (contentHeight / 2);\r\n }\r\n\r\n if (this.position == \"center left\") {\r\n this.cursorX = event.clientX - contentWidth;\r\n this.cursorY = event.clientY - (contentHeight / 2);\r\n }\r\n\r\n if(this.offsetY){\r\n this.cursorY = this.cursorY + this.offsetY;\r\n }\r\n\r\n if(this.offsetX){\r\n this.cursorX = this.cursorX + this.offsetX;\r\n }\r\n\r\n let transformCss = '';\r\n if(this.force3D){\r\n transformCss = `translate3d(${this.cursorX}px, ${this.cursorY}px, 0)`;\r\n }else{\r\n transformCss = `translateX(${this.cursorX}px) translateY(${this.cursorY}px)`;\r\n }\r\n\r\n\r\n this.cursorHoverDiv.style.transform = transformCss;\r\n }\r\n\r\n createAndConfigureDiv() {\r\n const util = new _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\r\n\r\n this.cursorHoverDiv = util.addElement('div', 'cursor-hover', {\r\n addTo: document.body\r\n })\r\n\r\n this.cursorHoverDivChildren = util.addElement('div', 'cursor-hover-child', {\r\n addTo: this.cursorHoverDiv\r\n })\r\n\r\n if(this.imageCover){\r\n this.cursorHoverDiv.classList.add('is-cover');\r\n }\r\n\r\n if(this.imageObject){\r\n this.cursorHoverDivChildren.style.width = this.imageObject.style.width;\r\n this.cursorHoverDivChildren.style.height = this.imageObject.style.height;\r\n this.cursorHoverDivChildren.appendChild(this.imageObject);\r\n }else if(this.htmlContent){\r\n this.cursorHoverDivChildren.innerHTML = this.htmlContent;\r\n }\r\n }\r\n}\r\n\n\n//# sourceURL=webpack:///./fullib-js/src/js/Basic/Cursor.js?"); /***/ }), /***/ "./fullib-js/src/js/Basic/DynamicBackground.js": /*!*****************************************************!*\ !*** ./fullib-js/src/js/Basic/DynamicBackground.js ***! \*****************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ DynamicBackground)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../Utils/Utils */ \"./fullib-js/src/js/Utils/Utils.js\");\n\r\n\r\nclass DynamicBackground extends _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\r\n constructor(options = {}) {\r\n super();\r\n this.elems = options.elems ? (options.elems instanceof HTMLCollection ? options.elems : document.querySelectorAll(options.elems)) : document.querySelectorAll('.dynamic-background');\r\n this.transition = options.transition ? options.transition : 'background-color 1s linear';\r\n this.body = document.body;\r\n this.backgroundColor = options.backgroundColor ? options.backgroundColor : 'initial';\r\n\r\n if(this.elems){\r\n this.init();\r\n }\r\n }\r\n\r\n\r\n init() {\r\n let localStore = this;\r\n\r\n this.elems.forEach(elem => {\r\n elem.classList.add('change-background');\r\n this.body.style.transition = this.transition;\r\n\r\n let backgroundColorVar = elem.getAttribute('data-background-color') ? elem.getAttribute('data-background-color') : this.backgroundColor;\r\n\r\n\r\n if (this.isElementInViewport(elem)) {\r\n this.body.style.backgroundColor = backgroundColorVar;\r\n }\r\n\r\n window.addEventListener('scroll', function () {\r\n if (localStore.isElementInViewport(elem)) {\r\n localStore.body.style.backgroundColor = backgroundColorVar;\r\n } else {\r\n localStore.body.style.backgroundColor = \"initial\";\r\n }\r\n });\r\n })\r\n }\r\n}\r\n\n\n//# sourceURL=webpack:///./fullib-js/src/js/Basic/DynamicBackground.js?"); /***/ }), /***/ "./fullib-js/src/js/Basic/ImageBlob.js": /*!*********************************************!*\ !*** ./fullib-js/src/js/Basic/ImageBlob.js ***! \*********************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ImageBlob)\n/* harmony export */ });\n/* harmony import */ var _css_imageBlob_imageBlob_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../css/imageBlob/imageBlob.css */ \"./fullib-js/src/css/imageBlob/imageBlob.css\");\n/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./../Utils/Utils */ \"./fullib-js/src/js/Utils/Utils.js\");\n\r\n\r\n\r\nclass ImageBlob extends _Utils_Utils__WEBPACK_IMPORTED_MODULE_1__[\"default\"]{\r\n constructor(options = {}) {\r\n super();\r\n this.elems = options.elems ? (options.elems instanceof HTMLCollection ? options.elems : document.querySelectorAll(options.elems)) : document.querySelectorAll('.blobed');\r\n this.currentWindowWidth = window.innerWidth;\r\n this.width = options.width ? options.width : 400;\r\n this.height = options.height ? options.height : 400;\r\n this.autoResponsive = options.autoResponsive ? options.autoResponsive : true;\r\n\r\n if(this.elems){\r\n this.init();\r\n }\r\n }\r\n\r\n\r\n init() {\r\n this.elems.forEach(imageElem => {\r\n let srcElem = imageElem.getAttribute('src');\r\n let classNamesElem = imageElem.classList;\r\n let idElem = imageElem.getAttribute('id');\r\n let parentElem = imageElem.parentNode;\r\n let imageWidth = imageElem.getAttribute('width') ? imageElem.getAttribute('width') : this.width;\r\n let imageHeight = imageElem.getAttribute('height') ? imageElem.getAttribute('height') : this.height;\r\n\r\n imageElem.classList.add('blob');\r\n imageElem.remove();\r\n\r\n //ADDING DIV TO DOM\r\n let higther = this.addElement('div', classNamesElem, {\r\n id: idElem,\r\n addTo: parentElem,\r\n })\r\n\r\n let medium = this.addElement('div', 'blob-inner', {\r\n id: idElem,\r\n addTo: higther,\r\n })\r\n\r\n let little = this.addElement('span', 'blob-img', {\r\n id: idElem,\r\n addTo: medium,\r\n })\r\n\r\n //ADDING CSS\r\n little.style.backgroundImage = \"url('\" + srcElem + \"')\";\r\n medium.style.minWidth = imageWidth ? imageWidth + \"px\" : '400px';\r\n medium.style.maxWidth = imageWidth ? imageWidth + \"px\" : '400px';\r\n medium.style.minHeight = imageHeight ? imageHeight + \"px\" : '400px';\r\n medium.style.maxHeight = imageHeight ? imageHeight + \"px\" : '400px';\r\n\r\n //AUTO RESPONSIVE\r\n if (this.autoResponsive && this.currentWindowWidth < 767) {\r\n let sizeResized = this.currentWindowWidth - 80;\r\n if (sizeResized < imageWidth) {\r\n medium.style.minWidth = sizeResized + \"px\";\r\n medium.style.maxWidth = sizeResized + \"px\";\r\n medium.style.minHeight = sizeResized + \"px\";\r\n medium.style.maxHeight = sizeResized + \"px\";\r\n }\r\n }\r\n\r\n //AUTO RESPONSIVE RESIZE\r\n if (this.currentWindowWidth < 767 && this.autoResponsive) {\r\n window.addEventListener(\"resize\", function () {\r\n let resizedWindowWidth = window.innerWidth;\r\n if (resizedWindowWidth < 767) {\r\n let sizeResized = resizedWindowWidth - 80;\r\n if (sizeResized < imageWidth) {\r\n medium.style.minWidth = sizeResized + \"px\";\r\n medium.style.maxWidth = sizeResized + \"px\";\r\n medium.style.minHeight = sizeResized + \"px\";\r\n medium.style.maxHeight = sizeResized + \"px\";\r\n }\r\n }\r\n });\r\n }\r\n })\r\n\r\n }\r\n}\r\n\n\n//# sourceURL=webpack:///./fullib-js/src/js/Basic/ImageBlob.js?"); /***/ }), /***/ "./fullib-js/src/js/Basic/LottieHelper.js": /*!************************************************!*\ !*** ./fullib-js/src/js/Basic/LottieHelper.js ***! \************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ LottieHelper)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../Utils/Utils */ \"./fullib-js/src/js/Utils/Utils.js\");\n/* harmony import */ var lottie_web__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lottie-web */ \"./node_modules/lottie-web/build/player/lottie.js\");\n/* harmony import */ var lottie_web__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lottie_web__WEBPACK_IMPORTED_MODULE_1__);\n\r\n\r\n\r\nclass LottieHelper extends _Utils_Utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\r\n constructor(options = {}) {\r\n super();\r\n this.elems = options.elems ? (options.elems instanceof HTMLCollection ? options.elems : document.querySelectorAll(options.elems)) : document.querySelectorAll('.lottie-helper');\r\n\r\n if(this.elems){\r\n this.init();\r\n }\r\n }\r\n\r\n\r\n init() {\r\n let localStorage = this;\r\n\r\n this.elems.forEach(elem => {\r\n let file = elem.getAttribute('data-lottie-file');\r\n let click = elem.getAttribute('data-lottie-click');\r\n let hover = elem.getAttribute('data-lottie-hover');\r\n let scroll = elem.getAttribute('data-lottie-scroll');\r\n let render = elem.getAttribute('data-lottie-render') ? elem.getAttribute('data-lottie-render') : 'canvas';\r\n let speed = elem.getAttribute('data-lottie-speed');\r\n let autoplay = true;\r\n let loop = true;\r\n\r\n if (click) {\r\n loop = false;\r\n autoplay = false;\r\n }\r\n\r\n if (hover) {\r\n loop = true;\r\n autoplay = false;\r\n }\r\n\r\n