{"version":3,"sources":["components/masonry.js"],"names":["dmx","Component","extends","attributes","breakpoints","type","Object","default","columns","Number","columnsSm","columnsMd","columnsLg","columnsXl","columnsXxl","gutter","gutterSm","gutterMd","gutterLg","gutterXl","gutterXxl","preserveOrder","Boolean","animated","animationDuration","methods","reflow","this","_reflow","init","node","_breakpoints","sm","md","lg","xl","xxl","debounce","bind","_resizeObserver","ResizeObserver","observe","window","addEventListener","prototype","call","render","style","setProperty","performUpdate","updatedProps","has","destroy","disconnect","removeEventListener","e","dmxMasonry","children","length","$node","querySelectorAll","forEach","img","once","src","props","assign","breakpoint","innerWidth","suffix","toUpperCase","slice","nodes","Array","from","getComputedStyle","padding","parseInt","paddingLeft","paddingRight","columnWidth","Math","floor","clientWidth","event","Event","dispatchEvent","columnHeights","fill","nodesHeights","map","clientHeight","index","i","indexOf","min","apply","x","y","dmxMasonryInit","requestAnimationFrame","max"],"mappings":"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","file":"dmxMasonry.js","sourcesContent":["dmx.Component('masonry', {\r\n\r\n  extends: 'repeat',\r\n\r\n  attributes: {\r\n    breakpoints: {\r\n      type: Object,\r\n      default: {},\r\n    },\r\n\r\n    columns: {\r\n      type: Number,\r\n      default: 4,\r\n    },\r\n\r\n    columnsSm: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    columnsMd: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    columnsLg: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    columnsXl: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    columnsXxl: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    gutter: {\r\n      type: Number,\r\n      default: 15,\r\n    },\r\n\r\n    gutterSm: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    gutterMd: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    gutterLg: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    gutterXl: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    gutterXxl: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n\r\n    preserveOrder: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    animated: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    animationDuration: {\r\n      type: Number,\r\n      default: 400,\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    reflow () {\r\n      this._reflow();\r\n    },\r\n  },\r\n\r\n  init (node) {\r\n    this._breakpoints = { sm: 480, md: 768, lg: 992, xl: 1200, xxl: 1400 };\r\n    this._reflow = dmx.debounce(this._reflow.bind(this));\r\n    this._resizeObserver = new ResizeObserver(this._reflow);\r\n    this._resizeObserver.observe(node);\r\n\r\n    window.addEventListener('resize', this._reflow);\r\n\r\n    dmx.Component('repeat').prototype.init.call(this, node);\r\n  },\r\n\r\n  render (node) {\r\n    node.style.setProperty('position', 'relative');\r\n    this._reflow();\r\n  },\r\n\r\n  performUpdate (updatedProps) {\r\n    if (updatedProps.has('repeat') || updatedProps.has('key')) {\r\n      dmx.Component('repeat').prototype.performUpdate.call(this, updatedProps);\r\n    }\r\n\r\n    this._reflow();\r\n  },\r\n\r\n  destroy () {\r\n    this._resizeObserver.disconnect();\r\n    window.removeEventListener('resize', this._reflow);\r\n  },\r\n\r\n  _reflow (e) {\r\n    if (e && e.dmxMasonry) return;\r\n    if (!this.children.length) return;\r\n\r\n    this.$node.querySelectorAll('img').forEach(img => {\r\n      if (!img.dmxMasonry) {\r\n        img.addEventListener('load', this._reflow, { once: true });\r\n        if (img.src) img.src = img.src;\r\n        img.dmxMasonry = true;\r\n      }\r\n    });\r\n\r\n    let { breakpoints, columns, gutter } = this.props;\r\n    breakpoints = Object.assign({}, this._breakpoints, breakpoints);\r\n\r\n    ['sm', 'md', 'lg', 'xl', 'xxl'].forEach(breakpoint => {\r\n      if (window.innerWidth >= breakpoints[breakpoint]) {\r\n        const suffix = breakpoint[0].toUpperCase() + breakpoint.slice(1);\r\n        columns = this.props['columns' + suffix] || columns;\r\n        gutter = this.props['gutter' + suffix] || gutter;\r\n      }\r\n    });\r\n\r\n    const nodes = Array.from(this.$node.children);\r\n    const style = window.getComputedStyle(this.$node);\r\n    const padding = {\r\n      left: parseInt(style.paddingLeft) || 0,\r\n      right: parseInt(style.paddingRight) || 0,\r\n    };\r\n    const columnWidth = Math.floor((this.$node.clientWidth - padding.left - padding.right - ((columns - 1) * gutter)) / columns);\r\n\r\n    for (const node of nodes) {\r\n      node.style.setProperty('box-sizing', 'border-box');\r\n      node.style.setProperty('width', columnWidth + 'px');\r\n    }\r\n\r\n    // dispatch resize event for components that still listen to that for updating\r\n    const event = new Event('resize');\r\n    event.dmxMasonry = true;\r\n    window.dispatchEvent(event);\r\n\r\n    const columnHeights = Array(columns).fill(0);\r\n    const nodesHeights = nodes.map(node => node.clientHeight);\r\n\r\n    nodes.forEach((node, index) => {\r\n      const i = this.props.preserveOrder ? index % columns : columnHeights.indexOf(Math.min.apply(Math, columnHeights));\r\n      const x = (i * columnWidth) + (i * gutter);\r\n      const y = columnHeights[i];\r\n\r\n      node.style.setProperty('transform', `translate3d(${x}px, ${y}px, 0px)`);\r\n\r\n      if (nodesHeights[index]) {\r\n        if (!node.dmxMasonryInit) {\r\n          node.style.setProperty('position', 'absolute');\r\n\r\n          if (this.props.animated) {\r\n            node.style.setProperty('transition', `transform ${this.props.animationDuration}ms`);\r\n          }\r\n\r\n          requestAnimationFrame(() => node.style.setProperty('visibility', 'visible'));\r\n\r\n          node.dmxMasonryInit = true;\r\n\r\n          this._resizeObserver.observe(node);\r\n        }\r\n\r\n        columnHeights[i] += nodesHeights[index] + gutter;\r\n      }\r\n    });\r\n\r\n    this.$node.style.setProperty('height', (Math.max.apply(Math, columnHeights) - gutter) + 'px');\r\n  },\r\n\r\n});\r\n"]}