{"version":3,"sources":["components/masonry.js"],"names":["dmx","Component","extends","attributes","columns","type","Number","default","gutter","Boolean","animated","methods","reflow","this","render","node","debounce","bind","breakpoints","sm","md","lg","xl","xxl","resizeObserver","ResizeObserver","observe","style","setProperty","prototype","call","_update","children","length","insideReflow","$node","querySelectorAll","forEach","img","dmxMasonry","addEventListener","once","src","viewportWidth","window","innerWidth","props","breakpoint","nodes","Array","from","childNodes","filter","nodeType","getComputedStyle","paddingLeft","parseInt","paddingRight","columnWidth","Math","floor","clientWidth","dispatchEvent","Event","columnHeights","fill","nodesHeights","map","clientHeight","index","i","indexOf","min","apply","x","y","dmxMasonryInit","requestAnimationFrame","max"],"mappings":"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","file":"../dmxMasonry/dmxMasonry.js","sourcesContent":["dmx.Component('masonry', {\r\n\r\n    extends: 'repeat',\r\n\r\n    attributes: {\r\n        columns: {\r\n            // the number of columns to create\r\n            type: Number,\r\n            default: 4\r\n        },\r\n\r\n        'columns-sm': { // >= 480px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'columns-md': { // >= 768px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'columns-lg': { // >= 992px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'columns-xl': { // >= 1200px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'columns-xxl': { // >= 1400px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        gutter: {\r\n            // the gutter size in px\r\n            type: Number,\r\n            default: 15\r\n        },\r\n\r\n        'gutter-sm': { // >= 480px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'gutter-md': { // >= 768px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'gutter-lg': { // >= 992px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'gutter-xl': { // >= 1200px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'gutter-xxl': { // >= 1400px\r\n            type: Number,\r\n            default: null\r\n        },\r\n\r\n        'preserve-order': {\r\n            // will order the items from left to right into the columns\r\n            // when false it will optimize layout by equalizing the height of each column\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        'animation-duration': {\r\n            type: Number,\r\n            default: 400\r\n        }\r\n    },\r\n\r\n    methods: {\r\n        reflow: function() {\r\n            // allow manual reflow (when user changes size of item outside of app connect)\r\n            this.reflow();\r\n        }\r\n    },\r\n\r\n    render: function(node) {\r\n        this.reflow = dmx.debounce(this.reflow.bind(this));\r\n        this.breakpoints = { sm: 480, md: 768, lg: 992, xl: 1200, xxl: 1400 };\r\n        this.resizeObserver = new ResizeObserver(this.reflow);\r\n        this.resizeObserver.observe(node);\r\n        \r\n        // container must have position relative\r\n        node.style.setProperty('position', 'relative');\r\n\r\n        dmx.Component('repeat').prototype.render.call(this, node);        \r\n    },\r\n\r\n    _update: function() {\r\n        dmx.Component('repeat').prototype._update.call(this);\r\n        this.reflow();\r\n    },\r\n\r\n    reflow: function() {\r\n        if (!this.children.length || this.insideReflow) 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 viewportWidth = window.innerWidth;\r\n        let { columns, gutter } = this.props;\r\n\r\n        ['sm','md','lg','xl','xxl'].forEach(breakpoint => {\r\n            if (viewportWidth >= this.breakpoints[breakpoint]) {\r\n                columns = this.props['columns-' + breakpoint] || columns;\r\n                gutter = this.props['gutter-' + breakpoint] || gutter;\r\n            }\r\n        });\r\n\r\n        let nodes = Array.from(this.$node.childNodes).filter(node => node.nodeType == 1);\r\n        let style = window.getComputedStyle(this.$node);\r\n        let paddingLeft = parseInt(style.paddingLeft) || 0;\r\n        let paddingRight = parseInt(style.paddingRight) || 0;\r\n        let columnWidth = Math.floor((this.$node.clientWidth - paddingLeft - paddingRight - ((columns - 1) * gutter)) / columns);\r\n\r\n        for (let 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        window.dispatchEvent(new Event('resize'));\r\n        \r\n        let columnHeights = Array(columns).fill(0);\r\n        let nodesHeights = nodes.map(node => node.clientHeight);\r\n\r\n        nodes.forEach((node, index) => {\r\n            let i = this.props['preserver-order'] ? index % columns : columnHeights.indexOf(Math.min.apply(Math, columnHeights));\r\n            let x = (i * columnWidth) + (i * gutter);\r\n            let 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['animation-duration'] + 'ms');\r\n                    }\r\n\r\n                    requestAnimationFrame(() => {\r\n                        node.style.setProperty('visibility', 'visible');\r\n                    });\r\n\r\n                    node.dmxMasonryInit = true;\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"]}