{"version":3,"sources":["core/imageParallax.js","attributes/imageParallax.js"],"names":["dmx","imageParallax","running","elements","Set","lastPosition","start","node","add","opts","dmxImageParallax","container","overflow","wrap","style","setProperty","scale","delay","transition","requestAnimationFrame","animate","stop","delete","size","forEach","updateElement","wrapper","document","createElement","className","parentNode","insertBefore","appendChild","offsetParent","elmRect","getBoundingClientRect","width","height","viewport","getScrollParent","window","viewportRect","top","left","right","innerWidth","bottom","innerHeight","perc","max","clientHeight","val","translateX","translateY","orientation","indexOf","transform","getPropertyValue","isScrollParent","getComputedStyle","test","overflowX","overflowY","e","Attribute","attr","modifiers","value"],"mappings":"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","file":"dmxImageParallax.js","sourcesContent":["dmx.imageParallax = {\r\n  running: false,\r\n\r\n  elements: new Set(),\r\n\r\n  lastPosition: -1,\r\n\r\n  start: function (node) {\r\n    dmx.imageParallax.elements.add(node);\r\n\r\n    var opts = node.dmxImageParallax;\r\n\r\n    opts.container = node;\r\n\r\n    if (!opts.overflow) {\r\n      opts.container = dmx.imageParallax.wrap(node);\r\n      node.style.setProperty('transform', `scale(${opts.scale})`);\r\n    }\r\n\r\n    if (opts.delay > 0) {\r\n      node.style.setProperty('transition', `transform ${opts.delay}s ${opts.transition}`);\r\n    }\r\n\r\n    node.style.setProperty('will-change', 'transform');\r\n\r\n    if (!dmx.imageParallax.running) {\r\n      dmx.imageParallax.running = true;\r\n      requestAnimationFrame(dmx.imageParallax.animate);\r\n    }\r\n  },\r\n\r\n  stop: function (node) {\r\n    dmx.imageParallax.elements.delete(node);\r\n    if (dmx.imageParallax.elements.size === 0) {\r\n      dmx.imageParallax.running = false;\r\n    }\r\n  },\r\n\r\n  animate: function () {\r\n    if (!dmx.imageParallax.running) return;\r\n\r\n    dmx.imageParallax.elements.forEach(function (node) {\r\n      dmx.imageParallax.updateElement(node);\r\n    });\r\n\r\n    requestAnimationFrame(dmx.imageParallax.animate);\r\n  },\r\n\r\n  wrap: function (node) {\r\n    var wrapper = document.createElement('div');\r\n    wrapper.className = node.className;\r\n    wrapper.style.setProperty('display', 'inline-block');\r\n    wrapper.style.setProperty('overflow', 'hidden');\r\n    node.parentNode.insertBefore(wrapper, node);\r\n    wrapper.appendChild(node);\r\n    return wrapper;\r\n  },\r\n\r\n  updateElement: function (node) {\r\n    if (!node.offsetParent) return;\r\n\r\n    var opts = node.dmxImageParallax;\r\n    var elmRect = opts.container.getBoundingClientRect();\r\n\r\n    if (elmRect.width === 0 || elmRect.height === 0) return;\r\n\r\n    var viewport = dmx.imageParallax.getScrollParent(node);\r\n\r\n    if (viewport == window) {\r\n      var viewportRect = {\r\n        top: 0,\r\n        left: 0,\r\n        right: window.innerWidth,\r\n        bottom: window.innerHeight,\r\n        width: window.innerWidth,\r\n        height: window.innerHeight,\r\n      };\r\n    } else {\r\n      var viewportRect = viewport.getBoundingClientRect();\r\n    }\r\n\r\n    if (elmRect.bottom < viewportRect.top || elmRect.top > viewportRect.bottom)\r\n      return;\r\n\r\n    var perc =\r\n      (viewportRect.bottom - elmRect.top) /\r\n      (viewportRect.height + elmRect.height);\r\n    var max = node.clientHeight * opts.scale - node.clientHeight;\r\n    var val = ~~(perc * max - max / 2);\r\n\r\n    var translateX = 0;\r\n    var translateY = 0;\r\n\r\n    if (opts.orientation.indexOf('left') != -1) {\r\n      translateX = -val;\r\n    }\r\n\r\n    if (opts.orientation.indexOf('right') != -1) {\r\n      translateX = val;\r\n    }\r\n\r\n    if (opts.orientation.indexOf('up') != -1) {\r\n      translateY = -val;\r\n    }\r\n\r\n    if (opts.orientation.indexOf('down') != -1) {\r\n      translateY = val;\r\n    }\r\n\r\n    var transform = `translate3d(${translateX}px, ${translateY}px, 0)`;\r\n\r\n    if (!opts.overflow) {\r\n      transform += ` scale(${opts.scale})`;\r\n    }\r\n\r\n    if (node.style.getPropertyValue('transform') != transform) {\r\n      node.style.setProperty('transform', transform);\r\n    }\r\n  },\r\n\r\n  isScrollParent: function (node) {\r\n    try {\r\n      var style = window.getComputedStyle(node);\r\n      return /(auto|scroll)/.test(\r\n        style.overflow + style.overflowX + style.overflowY\r\n      );\r\n    } catch (e) {\r\n      return false;\r\n    }\r\n  },\r\n\r\n  getScrollParent: function (node) {\r\n    if (!node) return window;\r\n    if (dmx.imageParallax.isScrollParent(node)) return node;\r\n    return dmx.imageParallax.getScrollParent(node.parentNode);\r\n  },\r\n};\r\n","dmx.Attribute('image-parallax', 'mounted', function (node, attr) {\r\n  node.dmxImageParallax = {\r\n    scale: attr.modifiers.scale ? attr.modifiers.scale / 100 : 1.3,\r\n    delay: attr.modifiers.delay ? attr.modifiers.delay / 1000 : 0.4,\r\n    overflow: !!attr.modifiers.overflow,\r\n    transition: 'cubic-bezier(0,0,0,1)',\r\n    orientation: attr.value || 'up',\r\n  };\r\n\r\n  dmx.imageParallax.start(node);\r\n\r\n  return () => {\r\n    dmx.imageParallax.stop(node);\r\n  };\r\n});\r\n"]}