production masonry hide block not fully visible

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -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()
 

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -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; }

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -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()
 

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -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;