{"version":3,"sources":["webpack://[name]/./src/js/components/MasonryLayoutComponent.js"],"names":["MasonryLayoutComponent","_BaseComponent","element","_this","_classCallCheck","_callSuper","resizeAllMasonryItems","resizeOnItemsAppended","onResize","_inherits","_createClass","key","value","item","grid","document","getElementsByClassName","content","querySelector","rowGap","parseInt","window","getComputedStyle","getPropertyValue","rowHeight","gridImagesAsContent","rowSpan","Math","ceil","getBoundingClientRect","height","screen","width","mqObj","large","style","gridRowEnd","_this2","allItems","querySelectorAll","forEach","img","addEventListener","resizeMasonryItem","cachedWidth","documentElement","clientWidth","e","_this3","setTimeout","fullscreen","fullscreenElement","webkitIsFullScreen","mozFullScreen","msFullscreenElement","newWidth","sameWidth","location","reload","_this4","this","GRAB","CUSTOM_MESSAGES","MASONRY_LAYOUT_EVENTS","itemsAppended","event","items","$el","complete","type","length","BaseComponent"],"mappings":"keAAuD,IAElCA,EAAsB,SAAAC,GACzC,SAAAD,EAAYE,GAAS,IAAAC,EAKH,OALGC,IAAA,KAAAJ,IACnBG,EAAAE,EAAA,KAAAL,EAAA,CAAME,KAEDI,wBACLH,EAAKI,wBACLJ,EAAKK,WAAWL,EACjB,OAAAM,IAAAT,EAAAC,GAAAS,IAAAV,EAAA,EAAAW,IAAA,oBAAAC,MAGD,SAAkBC,GAEhB,IAAIC,EAAOC,SAASC,uBAAuB,WAAW,GACtD,GAAIF,EAAO,CACT,IAAMG,EAAUJ,EAAKK,cAAc,oBAEnC,IAAKD,EACH,OAGF,IAAIE,EAASC,SAASC,OAAOC,iBAAiBR,GAAMS,iBAAiB,iBACjEC,EAAYJ,SAASC,OAAOC,iBAAiBR,GAAMS,iBAAiB,mBACpEE,EAAsBZ,EAAKK,cAAc,uBAEzCQ,EAAUC,KAAKC,MAAMX,EAAQY,wBAAwBC,OAAOX,IAASK,EAAUL,IAE/EY,OAAOC,OAASZ,SAASC,OAAOY,MAAMC,SAC1CrB,EAAKsB,MAAMC,WAAa,QAAQV,EAC7BD,IACDZ,EAAKK,cAAc,uBAAuBiB,MAAML,OAASjB,EAAKgB,wBAAwBC,OAAS,UAIpG,CAAAnB,IAAA,wBAAAC,MAED,WAAuB,IAAAyB,EAAA,KAEjBC,EAAWvB,SAASwB,iBAAiB,iBAErCD,GACFA,EAASE,SAAQ,SAAC3B,GAChB,IAAI4B,EAAM5B,EAAKK,cAAc,OAC7BuB,GAAOA,EAAIC,iBAAiB,QAAQ,WAClC,IAAMzB,EAAUJ,EAAKK,cAAc,uBACnCD,GAAoC,QAAxBA,EAAQkB,MAAML,SAAqBb,EAAQkB,MAAML,OAAS,QACtEO,EAAKM,kBAAkB9B,MAEzBwB,EAAKM,kBAAkB9B,QAI5B,CAAAF,IAAA,WAAAC,MAGC,WACI,IAAIgC,EAAc7B,SAAS8B,gBAAgBC,YAC3CzB,OAAOqB,iBAAiB,UAAU,SAASK,GAAG,IAAAC,EAAA,KAC1CC,YAAW,WAGb,IAAIC,EAAanC,SAASoC,mBAAqBpC,SAASqC,oBAAsBrC,SAASsC,eAAiBtC,SAASuC,oBAG7GC,EAAWxC,SAAS8B,gBAAgBC,YACpCU,EAAYD,IAAaX,EAC7BA,EAAcW,GAGbL,IAAeM,GAAaR,EAAKS,SAASC,WACtC,SAEV,CAAA/C,IAAA,wBAAAC,MAGH,WAAwB,IAAA+C,EAAA,KACtBC,KAAKC,KAAKD,KAAKE,gBAAgBC,sBAAsBC,eAAe,SAAAC,GAClE,IAAIC,EAAQP,EAAKQ,IAAI5B,iBAAiB,8BAClC6B,EAAW,EACfF,EAAM1B,SAAQ,SAAA3B,GACZ,IAAI4B,EAAM5B,EAAKK,cAAc,OACzBuB,EAAI2B,SACNA,IAEA,CAAC,OAAQ,SAAS5B,SAAQ,SAAA6B,GAAI,OAAI5B,EAAIC,iBAAiB2B,GAAM,aAC3DD,GACgBF,EAAMI,QACpBJ,EAAM1B,QAAQmB,EAAKhB,4BAKvByB,GAAYF,EAAMI,QACpBJ,EAAM1B,QAAQmB,EAAKhB,0BA5FgB,C,OAAS4B","file":"js/component-MasonryLayoutComponent-js.chunks.js","sourcesContent":["import BaseComponent from '../abstracts/BaseComponent';\n\nexport default class MasonryLayoutComponent extends BaseComponent {\n  constructor(element) {\n    super(element);\n    // console.log('MasonryLayoutComponent constructor');\n    this.resizeAllMasonryItems();\n    this.resizeOnItemsAppended();\n    this.onResize();\n  }\n\n\n  resizeMasonryItem(item){\n    // console.log('MasonryLayoutComponent resizeMasonryItem');\n    var grid = document.getElementsByClassName('masonry')[0];\n    if( grid ) {\n      const content = item.querySelector('.masonry-content');\n      // PITTI20-1027\n      if (!content) {\n        return;\n      }\n\n      var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),\n          rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows')),\n          gridImagesAsContent = item.querySelector('img.masonry-content');\n\n      var rowSpan = Math.ceil((content.getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));\n\n      if (screen.width >= parseInt(window.mqObj.large)) {\n      item.style.gridRowEnd = 'span '+rowSpan;\n      if(gridImagesAsContent) {\n        item.querySelector('img.masonry-content').style.height = item.getBoundingClientRect().height + \"px\";\n      }\n      }\n    }\n  }\n\n  resizeAllMasonryItems(){\n    // console.log('MasonryLayoutComponent resizeAllMasonryItems');\n    var allItems = document.querySelectorAll('.masonry-item');\n\n    if (allItems) {\n      allItems.forEach((item) => {\n        var img = item.querySelector('img');\n        img && img.addEventListener('load', () => {\n          const content = item.querySelector('img.masonry-content');\n          content && (content.style.height ==='0px') && (content.style.height = 'auto');\n          this.resizeMasonryItem(item);\n        });\n        this.resizeMasonryItem(item);\n      });\n      \n    }\n  }\n  \n    \n    onResize(){\n        var cachedWidth = document.documentElement.clientWidth;\n        window.addEventListener('resize', function(e) {\n            setTimeout(() => {\n             //PITTI20-1037\n       \t\t //if fullscreen do not reload! (FF and Android resize event on fullscreen seem to get fired..)\n       \t\t var fullscreen = document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;\n\n       \t\t // PITTI20-1200 https://stackoverflow.com/a/24312082/2223544\n       \t\t var newWidth = document.documentElement.clientWidth;\n       \t\t var sameWidth = newWidth === cachedWidth;\n       \t\t cachedWidth = newWidth;\n       \t\t // console.log('cachedWidth', cachedWidth, 'newWidth', newWidth);\n\n       \t\t !fullscreen && !sameWidth && this.location.reload();\n            }, 50);\n          });\n    }\n\n\n  resizeOnItemsAppended() {\n    this.GRAB(this.CUSTOM_MESSAGES.MASONRY_LAYOUT_EVENTS.itemsAppended, event => {\n      var items = this.$el.querySelectorAll('.masonry-item:not([style])');\n      var complete = 0;\n      items.forEach(item => {\n        var img = item.querySelector('img');\n        if (img.complete) {\n          complete++;\n        } else {\n          ['load', 'error'].forEach(type => img.addEventListener(type, () => {\n            complete++;\n            if (complete == items.length) {\n              items.forEach(this.resizeMasonryItem);\n            }\n          }));\n        }\n      });\n      if (complete == items.length) {\n        items.forEach(this.resizeMasonryItem);\n      }\n    });\n  } \n}"],"sourceRoot":""}