bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved grid display without masonry

Browse Source
This commit is contained in:
bachir
2018-04-27 16:53:00 +02:00
parent 89f370d4b7
commit 51f25bd347
4 changed files with 160 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+124 -51
View File
@@ -38,7 +38,6 @@
initHistory();
// initHome();
// if(!drupalSettings.path.isFront)
// return;
@@ -129,7 +128,8 @@
});
}
}
checkGridBlockHeight();
checkGridBlockVisible();
// entrees
// TODO: center the entrees menu
@@ -310,7 +310,8 @@
// initScrollbars();
if(state.sys_path == "productions"){
initProductions();
// initProductions();
initGrid();
}else{
addCloseModalBtnToCols();
}
@@ -566,6 +567,8 @@
}else{
history.replaceState({home:true}, null, window.location.pathname);
// initHome();
initGrid();
_$body.attr('booted', 'booted');
}
};
@@ -1486,57 +1489,128 @@
// }
};
// ___ _ _
// / __|_ _(_)__| |
// | (_ | '_| / _` |
// \___|_| |_\__,_|
function initGrid(){
console.log('theme : initGrid');
checkGridBlockHeight();
_$row.find('.col').addClass('offfield');
if(false){
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
containerStyle: null,
resizeContainer:false,
// horizontalOrder: true,
transitionDuration:0,//'0.2s',
// stagger:30,
// disable initial layout
// initLayout: false,
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$grid.imagesLoaded(function(){
$grid.masonry('layout');
// checkProductionBlockVisible();
});
// bind event
// $grid.masonry( 'on', 'layoutComplete', function() {
// console.log('layout is complete');
// });
$grid.on('layoutComplete', checkGridBlockVisible);
}else{
// setTimeout(checkGridBlockVisible, 100);
checkGridBlockVisible();
}
};
function checkGridBlockHeight(){
console.log('checkGridBlockHeight');
var $r_h = _$row.height();
// console.log($r_h);
$('.grid .col', _$row).each(function(i,e){
// console.log($(this).height(), $(this).innerHeight(), $(this).outerHeight());
if($(this).height() > $r_h){
$(this).height($r_h);
}
// $(this).innerHeight(Math.min($(this).innerHeight(), _$row.height()));
});
};
function checkGridBlockVisible(){
console.log('checkGridBlockVisible');
var $r_h = _$row.height();
var $this,pos;
$('.grid .col', _$row).each(function(i,e){
// $(this).on('load',function(event){
$this = $(this);
pos = $this.position();
console.log(pos.top, $this.height(), pos.top+$this.height(), $r_h, $this);
if(pos.top+$this.height() <= $r_h){
$this.removeClass('offfield');
}
// });
});
// for (var i in items) {
// if(!items[i].isTransitioning){
// console.log('y+outerHeight', items[i].position.y+items[i].size.outerHeight);
// console.log('_$row.height()', _$row.height());
// if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
// $(items[i].element).removeClass('offfield');
// }else{
// // $(items[i].element).addClass('offfield');
// }
// }
// }
}
// ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
function initProductions(){
console.log('theme : initProductions');
return;
// _$row.find('.col').addClass('offfield');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
containerStyle: null,
resizeContainer:false,
// horizontalOrder: true,
transitionDuration:0,//'0.2s',
// stagger:30,
// disable initial layout
// initLayout: false,
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$grid.imagesLoaded(function(){
$grid.masonry('layout');
// checkProductionBlockVisible();
});
// bind event
// $grid.masonry( 'on', 'layoutComplete', function() {
// console.log('layout is complete');
// });
// $grid.on('layoutComplete', checkProductionBlockVisible);
};
function checkProductionBlockVisible(e,items){
console.log('checkProductionBlockVisible', e, items);
for (var i in items) {
if(!items[i].isTransitioning){
console.log('y+outerHeight', items[i].position.y+items[i].size.outerHeight);
console.log('_$row.height()', _$row.height());
if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
$(items[i].element).removeClass('offfield');
}else{
// $(items[i].element).addClass('offfield');
}
}
}
}
// function initProductions(){
// console.log('theme : initProductions');
//
// // _$row.find('.col').addClass('offfield');
// var $grid = $('.grid',_$row).masonry({
// itemSelector:'.col',
// columnWidth:'.col-2',
// containerStyle: null,
// resizeContainer:false,
// // horizontalOrder: true,
// transitionDuration:0,//'0.2s',
// // stagger:30,
// // disable initial layout
// // initLayout: false,
// });
//
// // layout Masonry after each image loads
// $grid.imagesLoaded().progress( function() {
// $grid.masonry('layout');
// });
//
// $grid.imagesLoaded(function(){
// $grid.masonry('layout');
// // checkProductionBlockVisible();
// });
//
// // bind event
// // $grid.masonry( 'on', 'layoutComplete', function() {
// // console.log('layout is complete');
// // });
// // $grid.on('layoutComplete', checkProductionBlockVisible);
// };
// ___ _
@@ -1601,7 +1675,6 @@
addCloseModalBtnToCols();
return;
console.log('theme : initHome');
// console.log('theme : initProductions');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',