improved grid display without masonry

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

@@ -1,6 +1,7 @@
 
 (function($,Drupal,drupalSettings){EdlpTheme=function(){var _ajax_settings=drupalSettings.edlp_ajax;var _$body=$('body');var _corpus_ready=false;var _$corpus_canvas;var _$row=$('main[role="main"]>.layout-content>.row');var _$ajaxLinks;var _audioPlayer;var _randomPlayer;var _compoPlayer;var _ajax_timing={start:0,end:0};var _corpus_promise;function init(){void 0;initEvents();_audioPlayer=new AudioPlayer();_compoPlayer=new CompoPlayer();checkLayout();initAjaxLinks();initHistory();};function initEvents(){var $corpus_df=$.Deferred();_corpus_promise=$corpus_df.promise();_$body.on('corpus-map-ready',function(e){onCorpusMapReady(e);$corpus_df.resolve();}).on('on-studio-chutier-updated',initAjaxLinks).on('studio-initialized',function(e){_compoPlayer.newCompo();}).on('studio-not-active',function(e){_compoPlayer.deactivate();}).on('on-studio-compo-updated',function(e){initAjaxLinks();_compoPlayer.refresh();}).on('on-studio-compo-opened',function(e){initAjaxLinks();_compoPlayer.newCompo();}).on('search-results-loaded',initAjaxLinks).on('open_entree',function(e){void 0;closeAllModals();checkLayout();_$body.removeClass();if(typeof e.url!='undefined'){var state=getSysPathState(e.sys_path);history.pushState(state,null,e.url);if(typeof _paq!=='undefined'){_paq.push(['setCustomUrl',e.url]);_paq.push(['setDocumentTitle',e.title]);_paq.push(['trackPageView']);}}}).on('close_entree',function(e){backToFrontPage();checkLayout();});window.addEventListener('resize',checkLayout,false);}
-function checkLayout(){var $audioplayer=$("#audio-player");if($audioplayer.length){var navpos=$('#block-mainnavigation').position();if(typeof navpos!='undefined'){$audioplayer.css({'width':navpos.left+'px'});}}};function initScrollbars(){};function getSysPathState(sys_path,view_mode){var state={'sys_path':sys_path,'ajax_path':sys_path};var node_match=state.ajax_path.match(/^\/?(node\/(\d+))$/i);void 0;var term_match=state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);void 0;if(node_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+node_match[1];state.node_nid=node_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}}else if(term_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+term_match[1];state.ajax_path=state.ajax_path.replace(/taxonomy\/term/,'taxonomy_term');state.entree_tid=term_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}else{state.ajax_path=null;}}else{state.ajax_path+='/ajax'}
+function checkLayout(){var $audioplayer=$("#audio-player");if($audioplayer.length){var navpos=$('#block-mainnavigation').position();if(typeof navpos!='undefined'){$audioplayer.css({'width':navpos.left+'px'});}}
+checkGridBlockHeight();checkGridBlockVisible();};function initScrollbars(){};function getSysPathState(sys_path,view_mode){var state={'sys_path':sys_path,'ajax_path':sys_path};var node_match=state.ajax_path.match(/^\/?(node\/(\d+))$/i);void 0;var term_match=state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);void 0;if(node_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+node_match[1];state.node_nid=node_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}}else if(term_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+term_match[1];state.ajax_path=state.ajax_path.replace(/taxonomy\/term/,'taxonomy_term');state.entree_tid=term_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}else{state.ajax_path=null;}}else{state.ajax_path+='/ajax'}
 return state;};function ajaxLoadContent(state){void 0;_$body.addClass('ajax-loading');_ajax_timing.start=performance.now();var path=window.location.origin+Drupal.url(state.ajax_path);$.getJSON(path,{}).done(function(data){onAjaxLoaded(data,state);}).fail(function(jqxhr,textStatus,error){onAjaxLoadError(jqxhr,textStatus,error,state.sys_path);});};function onAjaxLoadError(jqxhr,textStatus,error,sys_path){void 0;$('.ajax-loading').removeClass('ajax-loading');_$body.removeClass('ajax-loading');};function onAjaxLoaded(data,state){void 0;if(data.entity_type=="node"&&data.bundle=="evenement"){if(_$row.find('.col.event').length){_$row.find('.col.event').replaceWith(data.rendered);}else if(_$row.find('.col.aside').length){_$row.find('.col.aside').replaceWith(data.rendered);}else{_$row.append(data.rendered);}}else{_$row.removeAttr('style').html(data.rendered);}
 var body_classes=['path-'+state.sys_path.replace(/\//g,'-'),'entity-type-'+data.entity_type,'bundle-'+data.bundle,'view-mode-'+data.view_mode];_$body.removeClass().addClass(body_classes.join(' '));if(state.node_nid)
 _$body.addClass('path-edlp-node');$('.ajax-loading').removeClass('ajax-loading');$('.ajax-link.is-active').removeClass('is-active');$('.is-active-trail').removeClass('is-active-trail');if(typeof state.selector!='undefined'){void 0;$('a[selector="'+state.selector+'"]').addClass('is-active');initAudioLinksInContent();}else{if(typeof state.view_mode!='undefined'){$('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');}else{$('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');}
@@ -9,7 +10,7 @@ if(typeof data.bundle!='undefined'&&data.bundle=="page"){$('a[data-drupal-link-s
 if(typeof data.menu_parents!='undefined'){for(var i=0;i<data.menu_parents.length;i++){var menu_sys_path=data.menu_parents[i];$('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active-trail');}}
 if(typeof data.documents_lies!='undefined'){if(_corpus_ready){_$body.trigger({type:'ajax-node-loaded-linked-documents',nids:data.documents_lies});}else{_corpus_promise.done(function(){_$body.trigger({type:'ajax-node-loaded-linked-documents',nids:data.documents_lies});});}}
 if(typeof data.block!='undefined'){if(!$('#'+data.block.id,'.region-'+data.block.region).length){$('.region-'+data.block.region).append(data.block.rendered);}}
-if(state.sys_path=="productions"){initProductions();}else{addCloseModalBtnToCols();}
+if(state.sys_path=="productions"){initGrid();}else{addCloseModalBtnToCols();}
 if(data.entity_type=="node"&&data.bundle=="enregistrement"&&data.view_mode=="transcript"){initEnregistrementTranscript();}
 if(state.sys_path=="search"){initSearch();}
 if(typeof data.translations_links!='undefined'){void 0;var lang_code=drupalSettings.path.currentLanguage;var $links=$(data.translations_links);$links.find('li[hreflang="'+lang_code+'"]').addClass('is-active').find('a').addClass('is-active');if(state.view_mode){$links.find('a').each(function(i,e){var $a=$(this);$a.attr('href',$a.attr('href')+'#'+state.view_mode);});}
@@ -21,7 +22,7 @@ checkRowEmpty();checkVisibleCorpusMapSpace();};function initHistory(){initFirstL
 if(edlp_origin.audio_url){var node={nid:edlp_origin.entity_id,audio_url:edlp_origin.audio_url};_audioPlayer.openDocument(node,'history_first_load');if(view_mode==""){state.audio=true;state.node=node;_$body.attr('booted','booted');}else{ajaxLoadContent(state);}}
 else if(state.ajax_path){ajaxLoadContent(state);}
 if(state.entree_tid){openEntree(state.entree_tid);}
-history.replaceState(state,null,edlp_origin.url+edlp_origin.hash);window.localStorage.removeItem("edlp_origin");}else{history.replaceState({home:true},null,window.location.pathname);_$body.attr('booted','booted');}};function onHistoryPopState(e){void 0;if(e.state.home){backToFrontPage(true);}
+history.replaceState(state,null,edlp_origin.url+edlp_origin.hash);window.localStorage.removeItem("edlp_origin");}else{history.replaceState({home:true},null,window.location.pathname);initGrid();_$body.attr('booted','booted');}};function onHistoryPopState(e){void 0;if(e.state.home){backToFrontPage(true);}
 else if(e.state.audio){_audioPlayer.openDocument(e.state.node,'popstate',e.state.historic_index);}
 else{if(e.state.entree_tid){openEntree(e.state.entree_tid);}
 if(e.state.ajax_path){e.state.url=null;ajaxLoadContent(e.state);}}};function initAjaxLinks(){$('a.site-name','#block-edlptheme-branding').add('a','#block-mainnavigation').add('a','#block-footer.menu--footer').add('a','#block-productions').add('a','article.node:not(.node--type-enregistrement) h2.node-title').add('a','.productions-subtree').add('a','.productions-parent').add('a','.field--name-field-son').addClass('ajax-link');$('a[data-drupal-link-system-path="<front>"]','#block-mainnavigation').removeClass('is-active');_$ajaxLinks=$('.ajax-link:not(.ajax-enabled)').each(function(i,e){var $this=$(this);if($this.is('.ajax-enable'))return;if($this.attr('data-drupal-link-system-path')||$this.is('[type^="audio"]')){$this.on('click',onClickAjaxLink).addClass('ajax-enable');}});};function onClickAjaxLink(e){e.preventDefault();var $link=$(this);if($link.is('.is-active'))
@@ -49,7 +50,7 @@ return this;},showHideControls(){if(this.$controls){if(this.playing&&!this.pause
 if(this.$playpause){if(this.playlist.length>0){this.$playpause.addClass('is-active');}else{this.$playpause.removeClass('is-active');}}
 if(this.$next){if(this.playing&&this.playlist.length>1&&this.current_index<this.playlist.length-1){this.$next.addClass('is-active');}else{this.$next.removeClass('is-active');}}
 if(this.$previous){if(this.playing&&this.playlist.length>1&&this.current_index>0){this.$previous.addClass('is-active');}else{this.$previous.removeClass('is-active');}}
-return this;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){if(this.playing){this.next();}},};function initProductions(){void 0;return;var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',containerStyle:null,resizeContainer:false,transitionDuration:0,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});};function checkProductionBlockVisible(e,items){void 0;for(var i in items){if(!items[i].isTransitioning){void 0;void 0;if(items[i].position.y+items[i].size.outerHeight<_$row.height()){$(items[i].element).removeClass('offfield');}else{}}}}
+return this;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){if(this.playing){this.next();}},};function initGrid(){void 0;checkGridBlockHeight();_$row.find('.col').addClass('offfield');if(false){var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',containerStyle:null,resizeContainer:false,transitionDuration:0,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});$grid.on('layoutComplete',checkGridBlockVisible);}else{checkGridBlockVisible();}};function checkGridBlockHeight(){void 0;var $r_h=_$row.height();$('.grid .col',_$row).each(function(i,e){if($(this).height()>$r_h){$(this).height($r_h);}});};function checkGridBlockVisible(){void 0;var $r_h=_$row.height();var $this,pos;$('.grid .col',_$row).each(function(i,e){$this=$(this);pos=$this.position();void 0;if(pos.top+$this.height()<=$r_h){$this.removeClass('offfield');}});}
 function initSearch(){$('#edit-entries--wrapper legend','#edlp-search-form').on('click',function(){$(this).parent().toggleClass('opened');});};function initEnregistrementTranscript(){void 0;var $node=_$row.find('article.node--type-enregistrement.node--view-mode-transcript');var $nav=$('<nav>').prependTo($node);$node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label').clone().appendTo($nav).addClass('is-active').attr('field_target','.field--name-field-transcript-vo');$node.find('.field--name-field-transcript-trad').find('.field__label').clone().appendTo($nav).attr('field_target','.field--name-field-transcript-trad');$nav.find('.field__label').on('click',function(){var $this=$(this).addClass('is-active');$this.siblings('.is-active').removeClass('is-active');$this.parents('article.node').find('.field.visible').removeClass('visible');$this.parents('article.node').find($this.attr('field_target')).addClass('visible');});};function backToFrontPage(pop_state){void 0;closeAllModals();$('body').removeClass().addClass('path-frontpage');$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');_$corpus_canvas.trigger({'type':'close-all-entree'});_$corpus_canvas.trigger({'type':'scramble-collection'});if(typeof pop_state=="undefined"||!pop_state){void 0;history.pushState({home:true},null,drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);}}
 function initHome(){addCloseModalBtnToCols();return;void 0;var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',horizontalOrder:true,containerStyle:null,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});}
 function closeAllModals(){_$row.html('');_$ajaxLinks.removeClass('is-active');_$body.trigger({'type':'all-modal-closed'});};function checkRowEmpty(){if(!$('.col',_$row).length){if(!_$body.is('.entity-type-taxonomy_term.bundle-entrees')){if(!_$body.is('.entity-type-node.bundle-page')){backToFrontPage();}else{_$corpus_canvas.trigger({'type':'scramble-collection'});$('a[data-drupal-link-system-path="productions"]','#block-mainnavigation').removeClass('is-active').trigger('click');}}else{$('.entree-content a.is-active').removeClass('is-active');}}};init();}

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