fix masonry on productions and home

sites/all/modules/figli/edlp_search/assets/js/edlp_search.js

@@ -18,6 +18,9 @@
   };
 
   function initAjax(){
+    _$form = $('#edlp-search-form:not(.ajax-enabled)');
+    if(!_$form.length) return false;
+    
     console.log('EdlpSearch initAjaxForm()');
     _$form = $('#edlp-search-form:not(.ajax-enabled)')
       .on('submit', onSubmitForm)

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

@@ -186,9 +186,10 @@
       console.log('ajax link loaded : data', data);
       _$body.removeClass('ajax-loading');
 
-      // replace all content with newly loaded
+      // reset all style may been added by other pages (like masonry for productions)
+      // and replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-      _$row.html(data.rendered);
+      _$row.removeAttr('style').html(data.rendered);
 
       // add close btn
       if(sys_path != 'procuction'){
@@ -228,9 +229,9 @@
 
       initAjaxLinks();
 
+      // trigger other modules behaviours
       _$body.trigger({'type':'new-content-ajax-loaded'});
-
-      // call behaviours
+      // and call druapl behaviours
       Drupal.attachBehaviors(_$row[0]);
 
     };
@@ -799,28 +800,36 @@
       showHideControls(){
         // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
         // global playing
-        if(this.playing && !this.paused){
-          this.$controls.addClass('is-playing');
-        }else{
-          this.$controls.removeClass('is-playing');
+        if(this.$controls){
+          if(this.playing && !this.paused){
+            this.$controls.addClass('is-playing');
+          }else{
+            this.$controls.removeClass('is-playing');
+          }
         }
         // playpause
-        if(this.playlist.length > 0){
-          this.$playpause.addClass('is-active');
-        }else{
-          this.$playpause.removeClass('is-active');
+        if(this.$playpause){
+          if(this.playlist.length > 0){
+            this.$playpause.addClass('is-active');
+          }else{
+            this.$playpause.removeClass('is-active');
+          }
         }
         // 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.$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');
+          }
         }
         // previous
-        if(this.playing && this.playlist.length > 1 && this.current_index > 0){
-          this.$previous.addClass('is-active');
-        }else{
-          this.$previous.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;
       },
@@ -859,24 +868,38 @@
     };
 
 
-    //  _  _
-    // | || |___ _ __  ___
-    // | __ / _ \ '  \/ -_)
-    // |_||_\___/_|_|_\___|
+    //  ___            _   ___
+    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
+    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
+    // |_||_| \___/_||_\__|_| \__,_\__, \___|
+    //                             |___/
+    function backToFrontPage(){
+      closeAllModals();
+      // assume we are going back to front page
+      $('body').removeClass().addClass('path-frontpage');
+      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
+
+    }
+
     function initHome(){
       addCloseBtnToCols();
-
-      console.log('theme : initProductions');
-      var $grid = $('.row', _$row).masonry({
+      console.log('theme : initHome');
+      // console.log('theme : initProductions');
+      var $grid = $('.grid',_$row).masonry({
         itemSelector:'.col',
-        columnWidth:'.col-2'
+        columnWidth:'.col-2',
+        horizontalOrder: true,
+        containerStyle: null,
+        // disable initial layout
+        initLayout: false,
       });
-
-      // 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.imagesLoaded(function(){
+        $grid.masonry();
       });
-
     }
 
 
@@ -885,38 +908,24 @@
     // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
     // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
     function initProductions(){
-      console.log('theme : initProductions');
-      var $grid = $('.row', _$row).masonry({
+      // console.log('theme : initProductions');
+      var $grid = $('.grid',_$row).masonry({
         itemSelector:'.col',
-        columnWidth:'.col-2'
-      });
-
-      // layout Masonry after each image loads
-      $grid.imagesLoaded().progress( function() {
-        $grid.masonry('layout');
+        columnWidth:'.col-2',
+        horizontalOrder: true,
+        containerStyle: null,
+        // disable initial layout
+        initLayout: false,
       });
-      // var $grid = $('.row', _$row).imagesLoaded( function() {
-      //   // init Masonry after all images have loaded
-      //   $grid.masonry({
-      //     itemSelector:'.col',
-      //     columnWidth:'.col-2'
-      //   });
+      // bind event
+      // $grid.masonry( 'on', 'layoutComplete', function() {
+      //   console.log('layout is complete');
       // });
+      $grid.imagesLoaded(function(){
+        $grid.masonry();
+      });
     };
 
-    //  ___            _   ___
-    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
-    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
-    // |_||_| \___/_||_\__|_| \__,_\__, \___|
-    //                             |___/
-    function backToFrontPage(){
-      closeAllModals();
-      // assume we are going back to front page
-      $('body').removeClass().addClass('path-frontpage');
-      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
-
-    }
-
     //  __  __         _      _
     // |  \/  |___  __| |__ _| |___
     // | |\/| / _ \/ _` / _` | (_-<

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

@@ -2144,7 +2144,8 @@ body.path-agenda main .col > .wrapper {
     text-transform: uppercase; }
 
 body.path-frontpage .layout-content .row, body.path-productions .layout-content .row {
-  white-space: normal; }
+  white-space: normal;
+  min-height: 100%; }
   body.path-frontpage .layout-content .row .col, body.path-productions .layout-content .row .col {
     height: auto; }
     body.path-frontpage .layout-content .row .col.col-2:last-child, body.path-productions .layout-content .row .col.col-2:last-child {

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

@@ -186,9 +186,10 @@
       console.log('ajax link loaded : data', data);
       _$body.removeClass('ajax-loading');
 
-      // replace all content with newly loaded
+      // reset all style may been added by other pages (like masonry for productions)
+      // and replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-      _$row.html(data.rendered);
+      _$row.removeAttr('style').html(data.rendered);
 
       // add close btn
       if(sys_path != 'procuction'){
@@ -228,9 +229,9 @@
 
       initAjaxLinks();
 
+      // trigger other modules behaviours
       _$body.trigger({'type':'new-content-ajax-loaded'});
-
-      // call behaviours
+      // and call druapl behaviours
       Drupal.attachBehaviors(_$row[0]);
 
     };
@@ -799,28 +800,36 @@
       showHideControls(){
         // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
         // global playing
-        if(this.playing && !this.paused){
-          this.$controls.addClass('is-playing');
-        }else{
-          this.$controls.removeClass('is-playing');
+        if(this.$controls){
+          if(this.playing && !this.paused){
+            this.$controls.addClass('is-playing');
+          }else{
+            this.$controls.removeClass('is-playing');
+          }
         }
         // playpause
-        if(this.playlist.length > 0){
-          this.$playpause.addClass('is-active');
-        }else{
-          this.$playpause.removeClass('is-active');
+        if(this.$playpause){
+          if(this.playlist.length > 0){
+            this.$playpause.addClass('is-active');
+          }else{
+            this.$playpause.removeClass('is-active');
+          }
         }
         // 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.$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');
+          }
         }
         // previous
-        if(this.playing && this.playlist.length > 1 && this.current_index > 0){
-          this.$previous.addClass('is-active');
-        }else{
-          this.$previous.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;
       },
@@ -859,24 +868,38 @@
     };
 
 
-    //  _  _
-    // | || |___ _ __  ___
-    // | __ / _ \ '  \/ -_)
-    // |_||_\___/_|_|_\___|
+    //  ___            _   ___
+    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
+    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
+    // |_||_| \___/_||_\__|_| \__,_\__, \___|
+    //                             |___/
+    function backToFrontPage(){
+      closeAllModals();
+      // assume we are going back to front page
+      $('body').removeClass().addClass('path-frontpage');
+      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
+
+    }
+
     function initHome(){
       addCloseBtnToCols();
-
-      console.log('theme : initProductions');
-      var $grid = $('.row', _$row).masonry({
+      console.log('theme : initHome');
+      // console.log('theme : initProductions');
+      var $grid = $('.grid',_$row).masonry({
         itemSelector:'.col',
-        columnWidth:'.col-2'
+        columnWidth:'.col-2',
+        horizontalOrder: true,
+        containerStyle: null,
+        // disable initial layout
+        initLayout: false,
       });
-
-      // 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.imagesLoaded(function(){
+        $grid.masonry();
       });
-
     }
 
 
@@ -885,38 +908,24 @@
     // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
     // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
     function initProductions(){
-      console.log('theme : initProductions');
-      var $grid = $('.row', _$row).masonry({
+      // console.log('theme : initProductions');
+      var $grid = $('.grid',_$row).masonry({
         itemSelector:'.col',
-        columnWidth:'.col-2'
-      });
-
-      // layout Masonry after each image loads
-      $grid.imagesLoaded().progress( function() {
-        $grid.masonry('layout');
+        columnWidth:'.col-2',
+        horizontalOrder: true,
+        containerStyle: null,
+        // disable initial layout
+        initLayout: false,
       });
-      // var $grid = $('.row', _$row).imagesLoaded( function() {
-      //   // init Masonry after all images have loaded
-      //   $grid.masonry({
-      //     itemSelector:'.col',
-      //     columnWidth:'.col-2'
-      //   });
+      // bind event
+      // $grid.masonry( 'on', 'layoutComplete', function() {
+      //   console.log('layout is complete');
       // });
+      $grid.imagesLoaded(function(){
+        $grid.masonry();
+      });
     };
 
-    //  ___            _   ___
-    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
-    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
-    // |_||_| \___/_||_\__|_| \__,_\__, \___|
-    //                             |___/
-    function backToFrontPage(){
-      closeAllModals();
-      // assume we are going back to front page
-      $('body').removeClass().addClass('path-frontpage');
-      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
-
-    }
-
     //  __  __         _      _
     // |  \/  |___  __| |__ _| |___
     // | |\/| / _ \/ _` / _` | (_-<

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

@@ -1043,6 +1043,7 @@ body.path-agenda main .col{
 body.path-frontpage, body.path-productions{
   .layout-content .row{
     white-space: normal;
+    min-height: 100%;
     .col{
       height:auto;
       &.col-2:last-child{

sites/all/themes/custom/edlptheme/templates/content/edlp-home.html.twig

@@ -15,17 +15,21 @@
   </div>
 </div>
 #}
-{% for node in nodes %}
-  <div class="col col-{{ node.cols }}">
-    <div class="wrapper">
-      {{ node.build }}
+<div class="grid">
+
+  {% for node in nodes %}
+    <div class="col col-{{ node.cols }}">
+      <div class="wrapper">
+        {{ node.build }}
+      </div>
     </div>
-  </div>
-{% endfor %}
+  {% endfor %}
 
 
-<div class="agenda col col-2">
-  <div class="wrapper">
-    {{ agenda }}
+  <div class="agenda col col-2">
+    <div class="wrapper">
+      {{ agenda }}
+    </div>
   </div>
+  
 </div>

sites/all/themes/custom/edlptheme/templates/content/edlp-productions.html.twig

@@ -1,7 +1,9 @@
-{% for node in nodes %}
-  <div class="col col-{{ node.cols }}">
-    <div class="wrapper">
-      {{ node.build }}
+<div class="grid">
+  {% for node in nodes %}
+    <div class="col col-{{ node.cols }}">
+      <div class="wrapper">
+        {{ node.build }}
+      </div>
     </div>
-  </div>
-{% endfor %}
+  {% endfor %}
+</div>