fixed active trail ajax links

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

@@ -171,10 +171,10 @@
         _$body.addClass('path-edlp-node');
 
       // handle clicked link classes
-      _$ajaxLinks.removeClass('is-active');
       $('.ajax-loading').removeClass('ajax-loading');
+      $('.is-active').removeClass('is-active');
+      $('.is-active-trail').removeClass('is-active-trail');
 
-      // TODO: break entrees links wich all have same sys_path
       if(typeof selector != 'undefined'){
         $('a[selector="'+selector+'"]').addClass('is-active');
       }else{
@@ -183,13 +183,13 @@
 
       // if bundle page (productions) activate production links
       if (typeof data.bundle != 'undefined' && data.bundle == "page") {
-        $('a[data-drupal-link-system-path="productions"]').addClass('is-active');
+        $('a[data-drupal-link-system-path="productions"]').addClass('is-active-trail');
       }
       // if node is in production menu tree, set first level of tree active, e.g. pieces sonores
       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');
+          $('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active-trail');
         }
       }
 
@@ -994,14 +994,20 @@
         horizontalOrder: true,
         containerStyle: null,
         // disable initial layout
-        initLayout: false,
+        // initLayout: false,
       });
       // bind event
       // $grid.masonry( 'on', 'layoutComplete', function() {
       //   console.log('layout is complete');
       // });
+
+      // layout Masonry after each image loads
+      $grid.imagesLoaded().progress( function() {
+        $grid.masonry('layout');
+      });
+
       $grid.imagesLoaded(function(){
-        $grid.masonry();
+        $grid.masonry('layout');
       });
     }
 

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

@@ -1227,8 +1227,7 @@ header[role="banner"] {
   to {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
-        #block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a:hover:before {
-          border-color: red;
+        #block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a.is-active-trail:before, #block-mainnavigation ul li a:hover:before {
           background-color: red; }
 
 .block-language {
@@ -2320,7 +2319,7 @@ footer {
             height: 7px;
             border: 1px solid red;
             margin-right: 0.5em; }
-          footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before {
+          footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before, footer nav#block-productions.block-menu ul li a.is-active-trail:before {
             background-color: red; }
           footer nav#block-productions.block-menu ul li a.ajax-loading:before {
             -webkit-animation: rotation 2s infinite linear;
@@ -2508,47 +2507,47 @@ footer {
         footer .block-block-edlp-entrees ul li.opened .entree-content {
           width: 350px;
           opacity: 1; }
-  footer #block-studiolinkblock {
+  footer .block.random-player {
     margin-bottom: 1em;
     pointer-events: all;
     margin-left: 0.5em; }
-    footer #block-studiolinkblock a {
+    footer .block.random-player a {
       display: block;
       width: 20px;
       height: 20px;
       text-indent: 40px;
       margin: 0;
       overflow: hidden;
-      -webkit-mask-image: url(../img/studio.svg);
-      mask-image: url(../img/studio.svg);
+      -webkit-mask-image: url(../img/random.svg);
+      mask-image: url(../img/random.svg);
       -webkit-mask-size: contain;
       mask-size: contain;
       background-color: #000;
       -webkit-transition: background-color 0.3s ease-in-out;
       transition: background-color 0.3s ease-in-out;
       cursor: pointer; }
-      footer #block-studiolinkblock a.is-active {
+      footer .block.random-player a.is-active {
         background-color: red; }
-  footer .block.random-player {
+  footer #block-studiolinkblock {
     margin-bottom: 1em;
     pointer-events: all;
     margin-left: 0.5em; }
-    footer .block.random-player a {
+    footer #block-studiolinkblock a {
       display: block;
       width: 20px;
       height: 20px;
       text-indent: 40px;
       margin: 0;
       overflow: hidden;
-      -webkit-mask-image: url(../img/random.svg);
-      mask-image: url(../img/random.svg);
+      -webkit-mask-image: url(../img/studio.svg);
+      mask-image: url(../img/studio.svg);
       -webkit-mask-size: contain;
       mask-size: contain;
       background-color: #000;
       -webkit-transition: background-color 0.3s ease-in-out;
       transition: background-color 0.3s ease-in-out;
       cursor: pointer; }
-      footer .block.random-player a.is-active {
+      footer #block-studiolinkblock a.is-active {
         background-color: red; }
   footer #block-userlogin {
     margin-bottom: 1em;

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

@@ -171,10 +171,10 @@
         _$body.addClass('path-edlp-node');
 
       // handle clicked link classes
-      _$ajaxLinks.removeClass('is-active');
       $('.ajax-loading').removeClass('ajax-loading');
+      $('.is-active').removeClass('is-active');
+      $('.is-active-trail').removeClass('is-active-trail');
 
-      // TODO: break entrees links wich all have same sys_path
       if(typeof selector != 'undefined'){
         $('a[selector="'+selector+'"]').addClass('is-active');
       }else{
@@ -183,13 +183,13 @@
 
       // if bundle page (productions) activate production links
       if (typeof data.bundle != 'undefined' && data.bundle == "page") {
-        $('a[data-drupal-link-system-path="productions"]').addClass('is-active');
+        $('a[data-drupal-link-system-path="productions"]').addClass('is-active-trail');
       }
       // if node is in production menu tree, set first level of tree active, e.g. pieces sonores
       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');
+          $('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active-trail');
         }
       }
 
@@ -994,14 +994,20 @@
         horizontalOrder: true,
         containerStyle: null,
         // disable initial layout
-        initLayout: false,
+        // initLayout: false,
       });
       // bind event
       // $grid.masonry( 'on', 'layoutComplete', function() {
       //   console.log('layout is complete');
       // });
+
+      // layout Masonry after each image loads
+      $grid.imagesLoaded().progress( function() {
+        $grid.masonry('layout');
+      });
+
       $grid.imagesLoaded(function(){
-        $grid.masonry();
+        $grid.masonry('layout');
       });
     }
 

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

@@ -108,8 +108,9 @@ header[role="banner"]{
           @include spining-loader-square;
         }
         &.is-active:before,
+        &.is-active-trail:before,
         &:hover:before{
-          border-color: red;
+          // border-color: red;
           background-color: red;
         }
       }
@@ -1321,7 +1322,8 @@ footer{
             margin-right: 0.5em;
           }
           &:hover:before,
-          &.is-active:before{
+          &.is-active:before,
+          &.is-active-trail:before{
             background-color: red;
           }
           &.ajax-loading:before{
@@ -1544,16 +1546,17 @@ footer{
       }
     }
   }
-  #block-studiolinkblock{
-    margin-bottom: 1em;
-    @include iconlinkblock(url(../img/studio.svg));
-  }
 
   .block.random-player{
     margin-bottom: 1em;
     @include iconlinkblock(url(../img/random.svg));
   }
 
+  #block-studiolinkblock{
+    margin-bottom: 1em;
+    @include iconlinkblock(url(../img/studio.svg));
+  }
+
   #block-userlogin{
     margin-bottom: 1em;
     pointer-events: all;