production masonry hide block not fully visible

This commit is contained in:
2018-04-24 21:54:22 +02:00
parent 3e43f73411
commit 6f7463ad93
4 changed files with 63 additions and 39 deletions
@@ -1401,12 +1401,17 @@
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
function initProductions(){
// console.log('theme : initProductions');
console.log('theme : initProductions');
_$row.find('.col').addClass('offfield');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
horizontalOrder: true,
containerStyle: null,
transitionDuration:0,//'0.2s',
// stagger:30,
// disable initial layout
// initLayout: false,
});
@@ -1422,9 +1427,25 @@
$grid.imagesLoaded(function(){
$grid.masonry('layout');
// checkProductionBlockVisible();
});
$grid.on('layoutComplete', checkProductionBlockVisible);
};
function checkProductionBlockVisible(e,items){
console.log('checkProductionBlockVisible', e, items);
for (var i in items) {
if(!items[i].isTransitioning){
if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
$(items[i].element).removeClass('offfield');
}else{
$(items[i].element).addClass('offfield');
}
}
}
}
// ___ _ _ _
// | __|_ _ _ _ ___ __ _(_)__| |_ _ _ ___ _ __ ___ _ _| |_
// | _|| ' \| '_/ -_) _` | (_-< _| '_/ -_) ' \/ -_) ' \ _|
@@ -1528,24 +1549,6 @@
}
};
// _ _ _
// | || |___| |_ __ ___ _ _ ___
// | __ / -_) | '_ \/ -_) '_(_-<
// |_||_\___|_| .__/\___|_| /__/
// |_|
// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
// function getCookie(name) {
// var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
// return v ? v[2] : null;
// }
// function setCookie(name, value, days) {
// var d = new Date;
// d.setTime(d.getTime() + 24*60*60*1000*days);
// document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
// }
// function deleteCookie(name) { setCookie(name, '', -1); }
init();
} // end EdlpTheme()
@@ -2255,8 +2255,17 @@ body.path-agenda main .col > .wrapper {
body.path-frontpage .layout-content .row, body.path-productions .layout-content .row {
white-space: normal;
min-height: 100%; }
body.path-frontpage .layout-content .row .grid, body.path-productions .layout-content .row .grid {
position: relative;
min-height: 100%;
max-height: 100%; }
body.path-frontpage .layout-content .row .col, body.path-productions .layout-content .row .col {
height: auto; }
height: auto;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
body.path-frontpage .layout-content .row .col.offfield, body.path-productions .layout-content .row .col.offfield {
opacity: 0; }
body.path-frontpage .layout-content .row .col.col-2:last-child, body.path-productions .layout-content .row .col.col-2:last-child {
padding-left: 0em;
padding-right: 1em; }
@@ -1401,12 +1401,17 @@
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
function initProductions(){
// console.log('theme : initProductions');
console.log('theme : initProductions');
_$row.find('.col').addClass('offfield');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2',
horizontalOrder: true,
containerStyle: null,
transitionDuration:0,//'0.2s',
// stagger:30,
// disable initial layout
// initLayout: false,
});
@@ -1422,9 +1427,25 @@
$grid.imagesLoaded(function(){
$grid.masonry('layout');
// checkProductionBlockVisible();
});
$grid.on('layoutComplete', checkProductionBlockVisible);
};
function checkProductionBlockVisible(e,items){
console.log('checkProductionBlockVisible', e, items);
for (var i in items) {
if(!items[i].isTransitioning){
if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
$(items[i].element).removeClass('offfield');
}else{
$(items[i].element).addClass('offfield');
}
}
}
}
// ___ _ _ _
// | __|_ _ _ _ ___ __ _(_)__| |_ _ _ ___ _ __ ___ _ _| |_
// | _|| ' \| '_/ -_) _` | (_-< _| '_/ -_) ' \/ -_) ' \ _|
@@ -1528,24 +1549,6 @@
}
};
// _ _ _
// | || |___| |_ __ ___ _ _ ___
// | __ / -_) | '_ \/ -_) '_(_-<
// |_||_\___|_| .__/\___|_| /__/
// |_|
// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
// function getCookie(name) {
// var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
// return v ? v[2] : null;
// }
// function setCookie(name, value, days) {
// var d = new Date;
// d.setTime(d.getTime() + 24*60*60*1000*days);
// document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
// }
// function deleteCookie(name) { setCookie(name, '', -1); }
init();
} // end EdlpTheme()
@@ -1309,8 +1309,17 @@ body.path-frontpage, body.path-productions{
.layout-content .row{
white-space: normal;
min-height: 100%;
.grid{
position: relative;
min-height: 100%; max-height: 100%;
}
.col{
height:auto;
opacity:1;
transition: opacity 0.5s ease-in-out;
&.offfield{
opacity: 0;
}
&.col-2:last-child{
padding-left: 0em;
padding-right: 1em;