{"version":3,"sources":["scripts/mn-image.class.js"],"names":["MnImage","self","_this","_ret","_classCallCheck","this","setImage","setOutline","setRotation","setBlur","setClick","_possibleConstructorReturn","parentElement","tagName","classList","add","setAttribute","attribute","isDefaultAttribute","hasOwnProperty","attributeValue","element","getAttribute","name","isValidValue","values","indexOf","value","default","image","attributes","document","createElement","map","appendChild","setRotation3d","event","bounds","getBoundingClientRect","isTouchEvent","type","startsWith","clientX","touches","clientY","percentX","left","width","percentY","top","height","angles","rotateY","rotateX","style","transform","unsetRotate3d","addEventListener","blur","clicked","mnImage","querySelector","oldTransform","replace","unclicked","HTMLElement","customElements","define"],"mappings":"sxCAAMA,QAAAA,SAAAA,cACJ,QAAAA,SAAYC,MAAM,GAAAC,OAAAC,IAOhB,OAPgBC,iBAAAC,KAAAL,SAChBC,KAAAA,MAAAA,2BAAAA,MAAAA,QAAAA,WAAAA,OAAAA,eAAAA,UAAAA,KAAAA,KAAaA,OACbC,MAAKI,WACLJ,MAAKK,aACLL,MAAKM,cACLN,MAAKO,UACLP,MAAKQ,WACLP,KAAOF,KAAPU,2BAAAT,MAAAC,sGAImC,MAA/BE,KAAKO,cAAcC,SACrBR,KAAKO,cAAcE,UAAUC,IAAI,iDA0BnC,QAASC,cAAaC,WACpB,GAAIC,oBAAqBD,UAAUE,eAAe,WAC9CC,eAAiBC,QAAQC,aAAaL,UAAUM,KAEpD,IAAIL,mBAAoB,CACtB,GAAIM,cAAeP,UAAUE,eAAe,WACvCF,UAAUQ,OAAOC,QAAQN,iBAAmB,EAE7CO,MAAQH,aACRJ,eACAH,UAAUW,OAEdC,OAAMb,aAAaC,UAAUM,KAAMI,WAC1BP,iBACTS,MAAMb,aAAaC,UAAUM,KAAMH,gBAnCvC,GAAIC,SAAUhB,KACVyB,aAEAP,KAAM,QAGNA,KAAM,QAGNA,KAAM,UAGNA,KAAM,cAKNM,MAAQE,SAASC,cAAc,MACnCF,YAAWG,IAAIjB,cACfX,KAAK6B,YAAYL,6CA0BjB,QAASM,eAAcC,OACrB,GAAmC,MAA/B/B,KAAKO,cAAcC,QAAiB,CACtC,GAAIwB,QAAShC,KAAKiC,wBACdC,aAAeH,MAAMI,KAAKC,WAAW,SAErCC,QAAUH,aACVH,MAAMO,QAAQ,GAAGD,QACjBN,MAAMM,QAENE,QAAUL,aACVH,MAAMO,QAAQ,GAAGC,QACjBR,MAAMQ,QAENC,UAAYH,QAAUL,OAAOS,MAAQT,OAAOU,MAC5CC,UAAYJ,QAAUP,OAAOY,KAAOZ,OAAOa,OAC3CC,OAAS,GACTC,QAAWD,QAAsB,GAAXN,UAAiBM,OACvCE,QAAWF,QAAqB,EAAXH,UAAiBG,MAC1C9C,MAAKiD,MAAMC,UAAX,6EAGYH,QAHZ,2BAIYC,QAJZ,kBASJ,QAASG,iBACPnD,KAAKiD,MAAMC,UAAY,GAhCzBlD,KAAKoD,iBAAiB,aAActB,eACpC9B,KAAKoD,iBAAiB,YAAatB,eACnC9B,KAAKoD,iBAAiB,aAAcD,iDAyCpC,QAASE,QACPrD,KAAKqD,OAP4B,MAA/BrD,KAAKO,cAAcC,UACrBR,KAAKO,cAAc6C,iBAAiB,QAASC,MAC7CrD,KAAKO,cAAc6C,iBAAiB,aAAcC,MAClDrD,KAAKO,cAAc6C,iBAAiB,YAAaC,0CAgBnD,QAASC,WACP,GAAIC,SAAUvD,KAAKwD,cAAc,WACjCC,cAAeF,QAAQN,MAAMC,SAC7B,IAAIA,WAAYK,QACbN,MACAC,UACAQ,QAAQ,cAAe,eACvBA,QAAQ,cAAe,cACvBA,QAAQ,cAAe,aAE1BH,SAAQN,MAAMC,UAAYA,UAG5B,QAASS,aACP,GAAIJ,SAAUvD,KAAKwD,cAAc,WACjCD,SAAQN,MAAMC,UAAYO,aAtBO,MAA/BzD,KAAKO,cAAcC,UACrBR,KAAKO,cAAc6C,iBAAiB,YAAaE,SACjDtD,KAAKO,cAAc6C,iBAAiB,UAAWO,WAGjD,IAAIF,cAAAA,oBAjHcG,YAuItBC,gBAAeC,OAAO,WAAYnE","file":"mn-image.js","sourcesContent":["class MnImage extends HTMLElement {\n  constructor(self) {\n    self = super(self)\n    this.setImage()\n    this.setOutline()\n    this.setRotation()\n    this.setBlur()\n    this.setClick()\n    return self\n  }\n\n  setOutline() {\n    if (this.parentElement.tagName === 'A') {\n      this.parentElement.classList.add('no-outline')\n    }\n  }\n\n  setImage() {\n    let element = this\n    let attributes = [\n      {\n        name: 'src',\n      },\n      {\n        name: 'alt',\n      },\n      {\n        name: 'title',\n      },\n      {\n        name: 'draggable',\n      },\n    ]\n\n    // image element\n    let image = document.createElement('img')\n    attributes.map(setAttribute)\n    this.appendChild(image)\n\n    function setAttribute(attribute) {\n      let isDefaultAttribute = attribute.hasOwnProperty('default')\n      let attributeValue = element.getAttribute(attribute.name)\n\n      if (isDefaultAttribute) {\n        let isValidValue = attribute.hasOwnProperty('values')\n          && attribute.values.indexOf(attributeValue) >= 0\n\n        let value = isValidValue\n          ? attributeValue\n          : attribute.default\n\n        image.setAttribute(attribute.name, value)\n      } else if (attributeValue) {\n        image.setAttribute(attribute.name, attributeValue)\n      }\n    }\n  }\n\n  setRotation() {\n    this.addEventListener('mouseenter', setRotation3d)\n    this.addEventListener('mousemove', setRotation3d)\n    this.addEventListener('mouseleave', unsetRotate3d)\n\n    function setRotation3d(event) {\n      if (this.parentElement.tagName === 'A') {\n        let bounds = this.getBoundingClientRect()\n        let isTouchEvent = event.type.startsWith('touch')\n\n        let clientX = isTouchEvent\n          ? event.touches[0].clientX\n          : event.clientX\n\n        let clientY = isTouchEvent\n          ? event.touches[0].clientY\n          : event.clientY\n\n        let percentX = (clientX - bounds.left) / bounds.width\n        let percentY = (clientY - bounds.top) / bounds.height\n        let angles = 20\n        let rotateY = (angles * (-percentX * 2)) + angles\n        let rotateX = (angles * (percentY * 2)) - angles\n        this.style.transform = `\n          scale(1.07)\n          perspective(1000px)\n          rotateY(${rotateY}deg)\n          rotateX(${rotateX}deg)\n        `\n      }\n    }\n\n    function unsetRotate3d() {\n      this.style.transform = ''\n    }\n  }\n\n  setBlur() {\n    if (this.parentElement.tagName === 'A') {\n      this.parentElement.addEventListener('click', blur)\n      this.parentElement.addEventListener('mouseleave', blur)\n      this.parentElement.addEventListener('touchmove', blur)\n    }\n\n    function blur() {\n      this.blur()\n    }\n  }\n\n  setClick() {\n    if (this.parentElement.tagName === 'A') {\n      this.parentElement.addEventListener('mousedown', clicked)\n      this.parentElement.addEventListener('mouseup', unclicked)\n    }\n\n    let oldTransform\n\n    function clicked() {\n      let mnImage = this.querySelector('mn-image')\n      oldTransform = mnImage.style.transform\n      let transform = mnImage\n        .style\n        .transform\n        .replace('scale(1.07)', 'scale(1.03)')\n        .replace(/rotateX(.+)/, 'rotateX(0)')\n        .replace(/rotateY(.+)/, 'rotateY(0)')\n\n      mnImage.style.transform = transform\n    }\n\n    function unclicked() {\n      let mnImage = this.querySelector('mn-image')\n      mnImage.style.transform = oldTransform\n    }\n  }\n}\n\ncustomElements.define('mn-image', MnImage)\n"]}