{ "version": 3, "sources": ["../../../src/js/modules/hero-slider.js"], "sourcesContent": ["// import KeenSlider from 'keen-slider'\nconsole.log('hero-slider.js')\nconst slides = document.querySelectorAll('.card')\nconst cursor = document.querySelector('.arrow-cursor')\n\nconst hero = document.querySelector('.hero')\nhero.addEventListener('mousemove', event => {\n\tconst x = event.pageX\n\tconst y = event.pageY\n\tconst width = window.innerWidth\n\tconst halfWidth = width / 2\n\tcursor.style.top = y + 'px'\n\tcursor.style.left = x + 'px'\n\tif (x > halfWidth) {\n\t\tcursor.classList.remove('left')\n\t\tcursor.classList.add('right')\n\t} else {\n\t\tcursor.classList.remove('right')\n\t\tcursor.classList.add('left')\n\t}\n})\nhero.addEventListener('mouseleave', () => {\n\tcursor.style.opacity = 0\n})\nhero.addEventListener('mouseenter', () => {\n\tcursor.style.opacity = 1\n})\n\nlet bounds\nfunction rotateToMouse(e) {\n\tconst mouseX = e.pageX\n\tconst mouseY = e.pageY\n\tconst leftX = mouseX - bounds.x\n\tconst topY = mouseY - bounds.y\n\tconst center = {\n\t\tx: leftX - bounds.width / 2,\n\t\ty: topY - bounds.height / 2,\n\t}\n\tconst distance = Math.sqrt(center.x ** 2 + center.y ** 2)\n\tconst img = document.querySelector('.hero img')\n\n\tslides.forEach(slide => {\n\t\tslide.style.transform = `\n\t\trotate3d(\n\t\t\t${-center.y / 100},\n\t\t\t${center.x / 100},\n\t\t\t0,\n\t\t\t${Math.log(distance) * 1.1}deg\n\t\t)\n\t`\n\t})\n}\nslides.forEach(slide => {\n\tslide.addEventListener('mouseenter', () => {\n\t\tbounds = hero.getBoundingClientRect()\n\t\tdocument.addEventListener('mousemove', rotateToMouse)\n\t})\n\n\tslide.addEventListener('mouseleave', () => {\n\t\tdocument.removeEventListener('mousemove', rotateToMouse)\n\t\tslide.style.transform = ''\n\t})\n})\n\nfunction navigation(slider) {\n\tlet wrapper, dots\n\tfunction markup(remove) {\n\t\twrapperMarkup(remove)\n\t\tdotMarkup(remove)\n\t}\n\tfunction removeElement(element) {\n\t\telement.parentNode.removeChild(element)\n\t\tconsole.log('removeElement')\n\t}\n\tfunction createDiv(className) {\n\t\tvar div = document.createElement('div')\n\t\tvar classNames = className.split(' ')\n\t\tclassNames.forEach(name => div.classList.add(name))\n\t\treturn div\n\t}\n\tfunction dotMarkup(remove) {\n\t\tif (remove) {\n\t\t\tremoveElement(dots)\n\t\t\treturn\n\t\t}\n\t\tdots = createDiv('dots')\n\t\tslider.track.details.slides.forEach((_e, idx) => {\n\t\t\tvar dot = createDiv('dot')\n\t\t\tdot.addEventListener('click', () => slider.moveToIdx(idx))\n\t\t\tdots.appendChild(dot)\n\t\t})\n\n\t\twrapper.appendChild(dots)\n\t}\n\n\tfunction wrapperMarkup(remove) {\n\t\tif (remove) {\n\t\t\tvar parent = wrapper.parentNode\n\t\t\twhile (wrapper.firstChild)\n\t\t\t\tparent.insertBefore(wrapper.firstChild, wrapper)\n\t\t\tremoveElement(wrapper)\n\t\t\treturn\n\t\t}\n\t\twrapper = createDiv('slider-wrapper')\n\t\tslider.container.parentNode.appendChild(wrapper)\n\t\twrapper.appendChild(slider.container)\n\t}\n\n\tfunction updateClasses() {\n\t\tvar slide = slider.track.details.rel\n\t\tcursor.dataset.color = slider.slides[slide].dataset.cursorcolor\n\t\tArray.from(dots.children).forEach(function (dot, idx) {\n\t\t\tidx === slide\n\t\t\t\t? dot.classList.add('dot--active')\n\t\t\t\t: dot.classList.remove('dot--active')\n\t\t})\n\t}\n\tslider.on('created', () => {\n\t\tmarkup()\n\t\tupdateClasses()\n\t})\n\tslider.on('optionsChanged', () => {\n\t\tmarkup(true)\n\t\tmarkup()\n\t\tupdateClasses()\n\t})\n\tslider.on('slideChanged', () => {\n\t\tupdateClasses()\n\t})\n\tslider.on('destroyed', () => {\n\t\tmarkup(true)\n\t})\n\n\tslides.forEach(slide => {\n\t\tslide.addEventListener('click', event => {\n\t\t\tif (event.clientX > window.innerWidth / 2) {\n\t\t\t\tslider.next()\n\t\t\t} else {\n\t\t\t\tslider.prev()\n\t\t\t}\n\t\t})\n\t})\n}\n\nif (document.querySelector('.slider')) {\n\tlet slider = new KeenSlider(\n\t\t'.slider',\n\t\t{\n\t\t\tslides: {\n\t\t\t\tslidesPerView: 1,\n\t\t\t\tspacing: 100,\n\t\t\t},\n\t\t\tloop: true,\n\t\t},\n\t\t[navigation]\n\t)\n\tsetTimeout(() => {\n\t\tslider.update()\n\t}, 1000)\n}\nconst button = document.querySelector('.button')\nconst dots = document.querySelector('.dots')\n\nif (dots || button) {\n\tdots.addEventListener('mouseenter', () => {\n\t\tcursor.style.opacity = 0\n\t})\n\tdots.addEventListener('mouseleave', () => {\n\t\tcursor.style.opacity = 1\n\t})\n\tbutton.addEventListener('mouseenter', () => {\n\t\tcursor.style.opacity = 0\n\t})\n\tbutton.addEventListener('mouseleave', () => {\n\t\tcursor.style.opacity = 1\n\t})\n}\n"], "mappings": "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", "names": ["slides", "cursor", "hero", "event", "x", "y", "halfWidth", "bounds", "rotateToMouse", "mouseX", "mouseY", "leftX", "topY", "center", "distance", "img", "slide", "navigation", "slider", "wrapper", "dots", "markup", "remove", "wrapperMarkup", "dotMarkup", "removeElement", "element", "createDiv", "className", "div", "classNames", "name", "_e", "idx", "dot", "parent", "updateClasses", "button"] }