| 1 |
/** |
| 2 |
* Photonic Masonry Layout |
| 3 |
* The Masonry layout is primarily controlled using CSS columns. The JS component is to facilitate responsive behaviour and breakpoints. |
| 4 |
* |
| 5 |
* License: GPL v3.0 |
| 6 |
*/ |
| 7 |
import {Core} from "../Core"; |
| 8 |
import * as Util from "../Util"; |
| 9 |
|
| 10 |
export const MasonryHorizontal = (resized, jsLoaded, selector) => { |
| 11 |
if (console !== undefined && Photonic_JS.debug_on !== '0' && Photonic_JS.debug_on !== '') console.time('Horizontal Masonry'); |
| 12 |
|
| 13 |
let selection = document.querySelectorAll(selector); |
| 14 |
if (selector == null || selection.length === 0) { |
| 15 |
selection = document.querySelectorAll('.photonic-masonry-horizontal-layout'); |
| 16 |
} |
| 17 |
|
| 18 |
if (!resized && selection.length > 0) { |
| 19 |
Core.showSpinner(); |
| 20 |
} |
| 21 |
|
| 22 |
let minWidth = (isNaN(Photonic_JS.masonry_min_width) || parseInt(Photonic_JS.masonry_min_width) <= 0) ? 200 : Photonic_JS.masonry_min_width; |
| 23 |
minWidth = parseInt(minWidth); |
| 24 |
|
| 25 |
selection.forEach((grid) => { |
| 26 |
let columns = grid.getAttribute('data-photonic-gallery-columns'); |
| 27 |
columns = (isNaN(parseInt(columns)) || parseInt(columns) <= 0) ? 3 : parseInt(columns); |
| 28 |
|
| 29 |
const buildLayout = (grid, fadeIn) => { |
| 30 |
const figures = grid.querySelectorAll('figure'); |
| 31 |
const inputFigures = [], outputFigures = []; |
| 32 |
figures.forEach(figure => { |
| 33 |
inputFigures[figure.getAttribute('data-photonic-idx')] = figure; |
| 34 |
}); |
| 35 |
|
| 36 |
const viewportWidth = Math.floor(grid.getBoundingClientRect().width), |
| 37 |
idealColumns = (viewportWidth / columns) > minWidth ? columns : Math.floor(viewportWidth / minWidth); |
| 38 |
|
| 39 |
if (idealColumns !== undefined && idealColumns !== null) { |
| 40 |
grid.style.columnCount = idealColumns.toString(); |
| 41 |
|
| 42 |
let col = 0; |
| 43 |
while (col < idealColumns) { |
| 44 |
for (let idx = 0; idx < inputFigures.length; idx += idealColumns) { |
| 45 |
let _val = inputFigures[idx + col]; |
| 46 |
if (_val !== undefined) { |
| 47 |
outputFigures.push(_val); |
| 48 |
} |
| 49 |
} |
| 50 |
col++; |
| 51 |
} |
| 52 |
|
| 53 |
if (outputFigures.length === inputFigures.length) { |
| 54 |
const fragment = document.createDocumentFragment(); |
| 55 |
outputFigures.forEach(figure => { |
| 56 |
grid.appendChild(figure); |
| 57 |
}); |
| 58 |
} |
| 59 |
} |
| 60 |
|
| 61 |
if (fadeIn) { |
| 62 |
Array.from(grid.getElementsByTagName('img')).forEach(img => { |
| 63 |
Util.fadeIn(img); |
| 64 |
}); |
| 65 |
} |
| 66 |
|
| 67 |
Core.showSlideupTitle(); |
| 68 |
if (!resized && !jsLoaded) { |
| 69 |
Core.hideLoading(); |
| 70 |
} |
| 71 |
}; |
| 72 |
|
| 73 |
if (grid.classList.contains('sizes-present')) { |
| 74 |
Core.watchForImages(grid); |
| 75 |
buildLayout(grid, !resized); |
| 76 |
} |
| 77 |
else { |
| 78 |
Core.waitForImages(grid).then(() => { |
| 79 |
buildLayout(grid, true); |
| 80 |
}); |
| 81 |
} |
| 82 |
}); |
| 83 |
if (console !== undefined && Photonic_JS.debug_on !== '0' && Photonic_JS.debug_on !== '') console.timeEnd('Horizontal Masonry'); |
| 84 |
}; |
| 85 |
|
