From 99b14adf070fdd3b2005efd764d5c8706297ceaa Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 3 Apr 2018 16:14:59 +0200 Subject: [PATCH] fixed active trail ajax links --- .../edlptheme/assets/dist/scripts/main.min.js | 18 ++++--- .../edlptheme/assets/dist/styles/app.min.css | 47 +++++++++---------- .../custom/edlptheme/assets/scripts/main.js | 18 ++++--- .../custom/edlptheme/assets/styles/app.scss | 15 +++--- 4 files changed, 56 insertions(+), 42 deletions(-) diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js index b5617afb3..c1142a31a 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js +++ b/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'); }); } diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index 1529b1bfa..4bec3f620 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/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,27 +2507,6 @@ footer { footer .block-block-edlp-entrees ul li.opened .entree-content { width: 350px; opacity: 1; } - footer #block-studiolinkblock { - margin-bottom: 1em; - pointer-events: all; - margin-left: 0.5em; } - footer #block-studiolinkblock 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-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 { - background-color: red; } footer .block.random-player { margin-bottom: 1em; pointer-events: all; @@ -2550,6 +2528,27 @@ footer { cursor: pointer; } footer .block.random-player a.is-active { background-color: red; } + footer #block-studiolinkblock { + margin-bottom: 1em; + pointer-events: all; + margin-left: 0.5em; } + footer #block-studiolinkblock 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-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 { + background-color: red; } footer #block-userlogin { margin-bottom: 1em; pointer-events: all; diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index b5617afb3..c1142a31a 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/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'); }); } diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 1b35ea54a..f22c95d7f 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/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;