mirror of
https://github.com/lubuntu-team/lubuntu.me.git
synced 2025-02-24 08:41:08 +00:00
81 lines
2.8 KiB
JavaScript
81 lines
2.8 KiB
JavaScript
/* globals jQuery, packery, sowb */
|
|
|
|
var sowb = window.sowb || {};
|
|
|
|
jQuery( function($){
|
|
sowb.setupSimpleMasonries = function() {
|
|
var $grid = $('.sow-masonry-grid');
|
|
|
|
var resizeMasonry = function(){
|
|
$grid.each(function(){
|
|
var $gridEl = $(this);
|
|
var layouts = $gridEl.data('layouts');
|
|
var tabletQuery = window.matchMedia('(max-width: ' + layouts.tablet.breakPoint + 'px)');
|
|
var mobileQuery = window.matchMedia('(max-width: ' + layouts.mobile.breakPoint + 'px)');
|
|
var layout = layouts.desktop;
|
|
if(mobileQuery.matches) {
|
|
layout = layouts.mobile;
|
|
} else if (tabletQuery.matches) {
|
|
layout = layouts.tablet;
|
|
}
|
|
var numColumns = layout.numColumns;
|
|
$gridEl.css('width', 'auto');
|
|
var horizontalGutterSpace = layout.gutter * ( numColumns - 1 );
|
|
var columnWidth = Math.floor( ( $gridEl.width() - ( horizontalGutterSpace ) ) / numColumns );
|
|
$gridEl.width( ( columnWidth * numColumns ) + horizontalGutterSpace );
|
|
|
|
$gridEl.imagesLoaded( function() {
|
|
$gridEl.find('> .sow-masonry-grid-item').each(function(){
|
|
var $$ = $(this);
|
|
var colSpan = $$.data('colSpan');
|
|
colSpan = Math.max(Math.min(colSpan, layout.numColumns), 1);
|
|
$$.width( ( columnWidth * colSpan ) + (layout.gutter * (colSpan-1)));
|
|
var rowSpan = $$.data('rowSpan');
|
|
rowSpan = Math.max(Math.min(rowSpan, layout.numColumns), 1);
|
|
//Use rowHeight if non-zero else fall back to matching columnWidth.
|
|
var rowHeight = layout.rowHeight || columnWidth;
|
|
$$.css('height', (rowHeight * rowSpan) + (layout.gutter * (rowSpan-1)));
|
|
|
|
var $img = $$.find('> img,> a > img');
|
|
var imgAR = $img.attr('height') > 0 ? $img.attr('width')/$img.attr('height') : 1;
|
|
var itemAR = $$.height() > 0 ? $$.width()/$$.height() : 1;
|
|
imgAR = parseFloat(imgAR.toFixed(3));
|
|
itemAR = parseFloat(itemAR.toFixed(3));
|
|
if(imgAR > itemAR) {
|
|
$img.css('width', 'auto');
|
|
$img.css('height', '100%');
|
|
$img.css('margin-top', '');
|
|
var marginLeft = ($img.width() - $$.width()) * -0.5;
|
|
$img.css('margin-left', marginLeft+'px');
|
|
}
|
|
else {
|
|
$img.css('height', 'auto');
|
|
$img.css('width', '100%');
|
|
$img.css('margin-left', '');
|
|
var marginTop = ($img.height() - $$.height()) * -0.5;
|
|
$img.css('margin-top', marginTop+'px');
|
|
}
|
|
});
|
|
$gridEl.packery({
|
|
itemSelector: '.sow-masonry-grid-item',
|
|
columnWidth: columnWidth,
|
|
gutter: layout.gutter
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
$(window).on('resize panelsStretchRows', resizeMasonry);
|
|
|
|
// Ensure that the masonry has resized correctly on load.
|
|
setTimeout( function () {
|
|
resizeMasonry();
|
|
}, 100 );
|
|
};
|
|
sowb.setupSimpleMasonries();
|
|
|
|
$( sowb ).on( 'setup_widgets', sowb.setupSimpleMasonries );
|
|
} );
|
|
|
|
window.sowb = sowb;
|