{"version":3,"sources":["webpack://[name]/./src/js/components/StoryGallery.js"],"names":["StoryGallery","_BaseComponent","element","_this","_classCallCheck","_callSuper","_defineProperty","event","preventDefault","item","currentTarget","closest","items","querySelectorAll","index","Array","prototype","indexOf","call","length","forEach","item1","item2","document","createElement","classList","add","item3","cloneNode","style","removeProperty","append","slideshow","small","window","innerWidth","show","documentElement","remove","innerHTML","next","contains","open","overlay","hide1","hide2","display","transition","transform","concat","setTimeout","slide0","slide","querySelector","item0","width","dataset","offsetWidth","width2","innerHeight","offsetHeight","target","toggle","scrollLeft","scrollWidth","clientWidth","grids","$el","getComputedStyle","gridTemplateRows","layout","grid","ncol","_el","gridTemplateColumns","split","c","new_h","getBoundingClientRect","height","h","mod","slice","i","prev_fin","bottom","curr_ini","top","marginTop","gap","map","parseFloat","gridRowGap","_toConsumableArray","childNodes","filter","nodeType","gridColumnEnd","addEventListener","e","itemClick","closeClick","slideshowButtonClick","slideshowClick","lightweightMasonry","_inherits","_createClass","BaseComponent"],"mappings":"6gBAEA,IAEqBA,EAAY,SAAAC,GAE/B,SAAAD,EAAYE,GAAS,IAAAC,EAaO,OAbPC,IAAA,KAAAJ,GACnBG,EAAAE,EAAA,KAAAL,EAAA,CAAME,IAASI,IAAAH,EAAA,aAeL,SAAAI,GACVA,EAAMC,iBAGN,IAAMC,EAAOF,EAAMG,cAAcC,QAAQ,iBACnCC,EAAQH,EAAKE,QAAQ,YAAYE,iBAAiB,iBACxDV,EAAKW,MAAQC,MAAMC,UAAUC,QAAQC,KAAKN,EAAOH,GACjDN,EAAKgB,OAASP,EAAMO,OAEpBP,EAAMQ,SAAQ,SAAAC,GACb,IAAMC,EAAQC,SAASC,cAAc,OACrCF,EAAMG,UAAUC,IAAI,kBACpB,IAAMC,EAAQN,EAAMO,WAAU,GAC9BD,EAAME,MAAMC,eAAe,cAC3BR,EAAMS,OAAOJ,GACbxB,EAAK6B,UAAUD,OAAOT,MAoBvBnB,EAAK8B,MAAQC,OAAOC,WAAa,IACjChC,EAAKiC,UACN9B,IAAAH,EAAA,cAEY,SAAAI,GACXA,EAAMC,iBAENe,SAASc,gBAAgBZ,UAAUa,OAAO,iBAC1CnC,EAAK6B,UAAUO,UAAY,GAC3BpC,EAAK6B,UAAUP,UAAUa,OAAO,WACjChC,IAAAH,EAAA,wBAEsB,SAAAI,GACrBA,EAAMC,iBAEN,IAAMgC,EAAOjC,EAAMG,cAAce,UAAUgB,SAAS,kBACpDtC,EAAKW,OAAS0B,EAAO,GAAK,EAC1BrC,EAAKiC,UACN9B,IAAAH,EAAA,QAEM,WAEL,IAAMuC,GAAQnB,SAASc,gBAAgBZ,UAAUgB,SAAS,iBAE1DtC,EAAKwC,QAAQ9B,iBAAiB,qBAAqBO,SAAQ,SAAAlB,GACzD,IAAM0C,EAAsB,GAAdzC,EAAKW,OAAcZ,EAAQuB,UAAUgB,SAAS,sBACtDI,EAAQ1C,EAAKW,OAASX,EAAKgB,OAAS,GAAKjB,EAAQuB,UAAUgB,SAAS,kBAC1EvC,EAAQ2B,MAAMiB,QAAUF,GAASC,EAAQ,OAAS,MAGhDH,IAAMvC,EAAK6B,UAAUH,MAAMkB,WAAa,QAC5C5C,EAAK6B,UAAUH,MAAMmB,UAAY,cAAHC,QAAkB9C,EAAK8B,MAAQ,IAAM,KAAO9B,EAAK8B,MAAQ,IAAM,KAAO,EAAI9B,EAAKW,OAAM,MACnH4B,GAAQQ,YAAW,WACjB/C,EAAK6B,UAAUH,MAAMkB,WAAa,GAClCxB,SAASc,gBAAgBZ,UAAUC,IAAI,mBACtC,IAEH,IAAMyB,GAAUT,GAAQvC,EAAKiD,MAG7B,GAFAjD,EAAKiD,MAAQjD,EAAK6B,UAAUqB,cAAc,+BAADJ,OAAgC9C,EAAKW,MAAQ,EAAC,MAEnFX,EAAK8B,MAGP,OAFAkB,GAAUA,EAAO1B,UAAUa,OAAO,eAClCnC,EAAKiD,MAAM3B,UAAUC,IAAI,UAI3B,GAAIyB,EAAQ,CACV,IAAMG,EAAQH,EAAOE,cAAc,iBACnCC,EAAMzB,MAAM0B,MAAQD,EAAME,QAAQD,MAAQ,KAC1CL,YAAW,WACTC,EAAO1B,UAAUa,OAAO,UACxBgB,EAAMzB,MAAM0B,MAAQ,KACnB,KAGL,IAAM9C,EAAON,EAAKiD,MAAMC,cAAc,iBACtCH,YAAW,WACT,IAAMK,EAAQ9C,EAAKgD,YACnBhD,EAAKoB,MAAM0B,MAAQA,EAAQ,KAC3B9C,EAAK+C,QAAQD,MAAQA,EACrB,IAAMG,EAAU,IAAOxB,OAAOyB,YAAclD,EAAKmD,aAAgBL,EACjEpD,EAAKiD,MAAM3B,UAAUC,IAAI,UAErBgB,IAAMjC,EAAKoB,MAAMkB,WAAa,QAClCtC,EAAKoB,MAAM0B,MAAQG,EAAS,KAC5BhB,GAAQQ,YAAW,kBAAMzC,EAAKoB,MAAMkB,WAAa,KAAI,MACpDL,EAAO,IAAM,OACjBpC,IAAAH,EAAA,kBAEgB,SAAAI,GAEf,GAAKJ,EAAK8B,MAAV,CACA1B,EAAMC,iBAEN,IAAMqD,EAAStD,EAAMG,cAErB,GADAmD,EAAOpC,UAAUqC,OAAO,QACpBD,EAAOpC,UAAUgB,SAAS,QAAS,CACrC,IAAMvC,EAAUK,EAAMsD,OAAOlD,QAAQ,sBACrCT,EAAQ6D,YAAe7D,EAAQ8D,YAAc9D,EAAQ+D,aAAe,OAEvE3D,IAAAH,EAAA,sBAEoB,WAGtB,IAAI+D,EAAQ,CAAC/D,EAAKgE,KAElB,GAAGD,EAAM/C,QAA0D,YAAhDiD,iBAAiBF,EAAM,IAAIG,iBAAgC,KASnEC,EAAT,WACEJ,EAAM9C,SAAQ,SAAAmD,GAEZ,IAAIC,EAAOJ,iBAAiBG,EAAKE,KAAKC,oBAAoBC,MAAM,KAAKxD,OAGrEoD,EAAK3D,MAAMQ,SAAQ,SAAAwD,GACjB,IAAIC,EAAQD,EAAEE,wBAAwBC,OAGnCF,KAAWD,EAAEpB,QAAQwB,IACtBJ,EAAEpB,QAAQwB,EAAIH,EACdN,EAAKU,WAKNV,EAAKC,OAASA,GAAQD,EAAKU,OAE5BV,EAAKC,KAAOA,EAGZD,EAAK3D,MAAMQ,SAAQ,SAAAwD,GAAC,OAAIA,EAAE/C,MAAMC,eAAe,iBAG5CyC,EAAKC,KAAO,GACbD,EAAK3D,MAAMsE,MAAMV,GAAMpD,SAAQ,SAACwD,EAAGO,GACjC,IAAIC,EAAWb,EAAK3D,MAAMuE,GAAGL,wBAAwBO,OACjDC,EAAWV,EAAEE,wBAAwBS,IAGzCX,EAAE/C,MAAM2D,UAAY,GAAHvC,OAAMmC,EAAWb,EAAKkB,IAAMH,EAAQ,SAIzDf,EAAKU,IAAM,OA3CjBf,EAAQA,EAAMwB,KAAI,SAAAnB,GAAI,MAAK,CACzBE,IAAKF,EACLkB,IAAKE,WAAWvB,iBAAiBG,GAAMqB,YACvChF,MAAOiF,IAAItB,EAAKuB,YAAYC,QAAO,SAAAnB,GAAC,OAAmB,IAAfA,EAAEoB,WAA0D,IAAvC5B,iBAAiBQ,GAAGqB,iBACjFzB,KAAM,EACNS,IAAK,MA2CPiB,iBAAiB,QAAQ,SAAAC,GACvB7B,IACA4B,iBAAiB,SAAU5B,GAAQ,MAClC,OA1LFnE,EAAKwC,QAAUpB,SAAS8B,cAAc,oBACtClD,EAAK6B,UAAY7B,EAAKwC,QAAQU,cAAc,cAE5ClD,EAAKgE,IAAItD,iBAAiB,sBAAsBO,SAAQ,SAAAlB,GAAO,OAAIA,EAAQgG,iBAAiB,QAAS/F,EAAKiG,cAC1GjG,EAAKwC,QAAQU,cAAc,kBAAkB6C,iBAAiB,QAAS/F,EAAKkG,YAC5ElG,EAAKwC,QAAQ9B,iBAAiB,qBAAqBO,SAAQ,SAAAlB,GAAO,OAAIA,EAAQgG,iBAAiB,QAAS/F,EAAKmG,yBAC7GnG,EAAK6B,UAAUkE,iBAAiB,QAAS/F,EAAKoG,gBAG9CpG,EAAKqG,qBAAqBrG,EAC3B,OAAAsG,IAAAzG,EAAAC,GAAAyG,IAAA1G,GAhB8B,CAAS2G","file":"js/component-StoryGallery-js.chunks.js","sourcesContent":["import BaseComponent from '../abstracts/BaseComponent';\n\nconst debug = false;\n\nexport default class StoryGallery extends BaseComponent {\n\n  constructor(element) {\n    super(element);\n    debug && console.log('StoryGallery');\n\n    this.overlay = document.querySelector('.gallery-overlay');\n    this.slideshow = this.overlay.querySelector('.slideshow');\n\n    this.$el.querySelectorAll('.gallery-item-link').forEach(element => element.addEventListener('click', this.itemClick));\n    this.overlay.querySelector('.overlay-close').addEventListener('click', this.closeClick);\n    this.overlay.querySelectorAll('.slideshow-button').forEach(element => element.addEventListener('click', this.slideshowButtonClick));\n    this.slideshow.addEventListener('click', this.slideshowClick);\n\n    // MU-609\n    this.lightweightMasonry();\n  }\n\n  itemClick = event => {\n    event.preventDefault();\n    debug && console.log('StoryGallery itemClick');\n\n    const item = event.currentTarget.closest('.gallery-item');\n    const items = item.closest('.gallery').querySelectorAll('.gallery-item');\n    this.index = Array.prototype.indexOf.call(items, item);\n    this.length = items.length;\n\n    items.forEach(item1 => {\n    \tconst item2 = document.createElement('div');\n    \titem2.classList.add('slideshow-item');\n    \tconst item3 = item1.cloneNode(true);\n    \titem3.style.removeProperty('margin-top');\n    \titem2.append(item3);\n    \tthis.slideshow.append(item2);\n    });\n\n    /*\n    const first = this.slideshow.firstElementChild;\n    const last = this.slideshow.lastElementChild;\n    this.slideshow.prepend(last.cloneNode(true));\n    this.slideshow.append(first.cloneNode(true));\n    */\n\n    /*\n    this.slideshow.style.transition = 'none';\n    setTimeout(() => {\n      this.foo();\n      setTimeout(() => this.slideshow.style.transition = '', 10);\n    }, 10);\n\n    document.documentElement.classList.add('story-gallery');\n    */\n\n    this.small = window.innerWidth < 768;\n    this.show();\n  }\n\n  closeClick = event => {\n    event.preventDefault();\n    debug && console.log('StoryGallery closeClick');\n    document.documentElement.classList.remove('story-gallery');\n    this.slideshow.innerHTML = '';\n    this.slideshow.classList.remove('zoom');\n  }\n\n  slideshowButtonClick = event => {\n    event.preventDefault();\n    debug && console.log('StoryGallery slideshowButtonClick');\n    const next = event.currentTarget.classList.contains('slideshow-next');\n    this.index += next ? 1 : -1;\n    this.show();\n  }\n\n  show = () => {\n    debug && console.log('StoryGallery show', this.index);\n    const open = !document.documentElement.classList.contains('story-gallery');\n\n    this.overlay.querySelectorAll('.slideshow-button').forEach(element => {\n      const hide1 = this.index == 0 && element.classList.contains('slideshow-previous');\n      const hide2 = this.index == this.length - 1 && element.classList.contains('slideshow-next');\n      element.style.display = hide1 || hide2 ? 'none' : '';\n    });\n\n    if (open) this.slideshow.style.transition = 'none';\n    this.slideshow.style.transform = `translateX(${(this.small ? 100 : 75) - (this.small ? 100 : 50) * (1 + this.index)}%)`;\n    open && setTimeout(() => {\n      this.slideshow.style.transition = '';\n      document.documentElement.classList.add('story-gallery');\n    }, 10);\n\n    const slide0 = !open && this.slide;\n    this.slide = this.slideshow.querySelector(`.slideshow-item:nth-of-type(${this.index + 1})`);\n\n    if (this.small) {\n      slide0 && slide0.classList.remove('active');\n      this.slide.classList.add('active');\n      return;\n    }\n\n    if (slide0) {\n      const item0 = slide0.querySelector('.gallery-item');\n      item0.style.width = item0.dataset.width + 'px';\n      setTimeout(() => {\n        slide0.classList.remove('active');\n        item0.style.width = '';\n      }, 510);\n    }\n\n    const item = this.slide.querySelector('.gallery-item');\n    setTimeout(() => {\n      const width = item.offsetWidth;\n      item.style.width = width + 'px';\n      item.dataset.width = width;\n      const width2 = (0.95 * window.innerHeight / item.offsetHeight) * width;\n      this.slide.classList.add('active');\n\n      if (open) item.style.transition = 'none';\n      item.style.width = width2 + 'px';\n      open && setTimeout(() => item.style.transition = '', 10);\n    }, open ? 510 : 10);\n  }\n\n  slideshowClick = event => {\n    debug && console.log('StoryGallery slideshowClick');\n    if (!this.small) return;\n    event.preventDefault();\n\n    const target = event.currentTarget;\n    target.classList.toggle('zoom');\n    if (target.classList.contains('zoom')) {\n      const element = event.target.closest('.gallery-item-link');\n      element.scrollLeft =  (element.scrollWidth - element.clientWidth) / 2;\n    }\n  }\n\n  lightweightMasonry = () => {\n    // https://css-tricks.com/a-lightweight-masonry-solution/\n\t// let grids = [...document.querySelectorAll('.grid--masonry')];\n\tlet grids = [this.$el];\n\n\tif(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {\n\t  grids = grids.map(grid => ({\n\t    _el: grid, \n\t    gap: parseFloat(getComputedStyle(grid).gridRowGap), \n\t    items: [...grid.childNodes].filter(c => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1), \n\t    ncol: 0, \n\t    mod: 0\n\t  }));\n\n\t  function layout() {\n\t    grids.forEach(grid => {\n\t      /* get the post relayout number of columns */\n\t      let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length;\n\t      debug && console.log('ncol', ncol);\n\n\t      grid.items.forEach(c => {\n\t        let new_h = c.getBoundingClientRect().height;\n\t        debug && console.log('c', c, 'new_h', new_h);\n\t        \n\t        if(new_h !== +c.dataset.h) {\n\t          c.dataset.h = new_h;\n\t          grid.mod++\n\t        }\n\t      });\n\n\t      /* if the number of columns has changed */\n\t      if(grid.ncol !== ncol || grid.mod) {\n\t        /* update number of columns */\n\t        grid.ncol = ncol;\n\n\t        /* revert to initial positioning, no margin */\n\t        grid.items.forEach(c => c.style.removeProperty('margin-top'));\n\n\t        /* if we have more than one column */\n\t        if(grid.ncol > 1) {\n\t          grid.items.slice(ncol).forEach((c, i) => {\n\t            let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */, \n\t                curr_ini = c.getBoundingClientRect().top /* top edge of current item */;\n\t            debug && console.log('c', c, 'prev_fin', prev_fin, 'curr_ini', curr_ini);\n\n\t            c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`\n\t          })\n\t        }\n\n\t        grid.mod = 0\n\t      }\n\t    })\n\t  }\n\n\t  addEventListener('load', e => {\n\t    layout(); /* initial load */\n\t    addEventListener('resize', layout, false) /* on resize */\n\t  }, false);\n\t}\n  }\n}\n"],"sourceRoot":""}