improved grid display without masonry

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

@@ -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,59 +1489,130 @@
       // }
     };
 
-    //  ___             _         _   _
-    // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
-    // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
-    // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
-    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');
-      });
+    //   ___     _    _
+    //  / __|_ _(_)__| |
+    // | (_ | '_| / _` |
+    //  \___|_| |_\__,_|
+    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,
+        });
 
-      $grid.imagesLoaded(function(){
-        $grid.masonry('layout');
-        // checkProductionBlockVisible();
-      });
+        // layout Masonry after each image loads
+        $grid.imagesLoaded().progress( function() {
+          $grid.masonry('layout');
+        });
 
-      // bind event
-      // $grid.masonry( 'on', 'layoutComplete', function() {
-      //   console.log('layout is complete');
-      // });
-      // $grid.on('layoutComplete', checkProductionBlockVisible);
+        $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 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 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');
+    //
+    //   // _$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',

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

@@ -1433,6 +1433,7 @@ body.path-agenda main .col{
 // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
 body.path-frontpage, body.path-productions{
   .layout-content .row{
+    // opacity: 1;
     white-space: normal;
     min-height: 100%;
     .grid{
@@ -1443,8 +1444,10 @@ body.path-frontpage, body.path-productions{
       height:auto;
       opacity:1;
       transition: opacity 0.5s ease-in-out;
+      // box-sizing: content-box;
       &.offfield{
         opacity: 0;
+        transition: opacity 0s ease-in-out;
       }
       &.col-2:last-child{
         padding-left: 0em;
@@ -1457,9 +1460,23 @@ body.path-frontpage, body.path-productions{
 
         article.node{
           .field--name-field-visuel{
-            a,img{
+            // a,img{
+            //   display: block;
+            //   width: 100%;
+            //   height:auto;
+            // }
+            // http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/
+            // maintain box size without waiting for image loading
+            a{
               display: block;
-              width: 100%; height:auto;
+              width: 100%;
+              padding-bottom: 56.25%; // ratio 800*450;
+              // height:auto;
+            }
+            img{
+              // display: none;
+              position: absolute;
+              top: 0; bottom: 0; left: 0; right: 0;
             }
           }
           header{
@@ -1483,12 +1500,17 @@ body.path-frontpage, body.path-productions{
               }
             }
           }
-          // &.node--view-mode-image-1-columns{
-          //   h2.node-title{
-          //     // font-size: 1em;
-          //     // font-weight: 500;
-          //   }
-          // }
+          &.node--view-mode-image-1-columns{
+            .field--name-field-visuel{
+              padding-bottom: 35px;
+            }
+            header{
+              box-sizing: border-box;
+              position: absolute;
+              bottom: 0; left:0;
+            }
+
+          }
           &.node--view-mode-text-1-column{
             padding:0 1em;
           }