fixed active trail ajax links

This commit is contained in:
Bachir Soussi Chiadmi
2018-04-03 16:14:59 +02:00
parent ca2c673cce
commit 99b14adf07
4 changed files with 56 additions and 42 deletions
@@ -171,10 +171,10 @@
_$body.addClass('path-edlp-node'); _$body.addClass('path-edlp-node');
// handle clicked link classes // handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$('.ajax-loading').removeClass('ajax-loading'); $('.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'){ if(typeof selector != 'undefined'){
$('a[selector="'+selector+'"]').addClass('is-active'); $('a[selector="'+selector+'"]').addClass('is-active');
}else{ }else{
@@ -183,13 +183,13 @@
// if bundle page (productions) activate production links // if bundle page (productions) activate production links
if (typeof data.bundle != 'undefined' && data.bundle == "page") { 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 node is in production menu tree, set first level of tree active, e.g. pieces sonores
if (typeof data.menu_parents != 'undefined') { if (typeof data.menu_parents != 'undefined') {
for (var i = 0; i < data.menu_parents.length; i++) { for (var i = 0; i < data.menu_parents.length; i++) {
var menu_sys_path = data.menu_parents[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, horizontalOrder: true,
containerStyle: null, containerStyle: null,
// disable initial layout // disable initial layout
initLayout: false, // initLayout: false,
}); });
// bind event // bind event
// $grid.masonry( 'on', 'layoutComplete', function() { // $grid.masonry( 'on', 'layoutComplete', function() {
// console.log('layout is complete'); // console.log('layout is complete');
// }); // });
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$grid.imagesLoaded(function(){ $grid.imagesLoaded(function(){
$grid.masonry(); $grid.masonry('layout');
}); });
} }
@@ -1227,8 +1227,7 @@ header[role="banner"] {
to { to {
-webkit-transform: rotate(359deg); -webkit-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
#block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a:hover:before { #block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a.is-active-trail:before, #block-mainnavigation ul li a:hover:before {
border-color: red;
background-color: red; } background-color: red; }
.block-language { .block-language {
@@ -2320,7 +2319,7 @@ footer {
height: 7px; height: 7px;
border: 1px solid red; border: 1px solid red;
margin-right: 0.5em; } 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; } background-color: red; }
footer nav#block-productions.block-menu ul li a.ajax-loading:before { footer nav#block-productions.block-menu ul li a.ajax-loading:before {
-webkit-animation: rotation 2s infinite linear; -webkit-animation: rotation 2s infinite linear;
@@ -2508,27 +2507,6 @@ footer {
footer .block-block-edlp-entrees ul li.opened .entree-content { footer .block-block-edlp-entrees ul li.opened .entree-content {
width: 350px; width: 350px;
opacity: 1; } 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 { footer .block.random-player {
margin-bottom: 1em; margin-bottom: 1em;
pointer-events: all; pointer-events: all;
@@ -2550,6 +2528,27 @@ footer {
cursor: pointer; } cursor: pointer; }
footer .block.random-player a.is-active { footer .block.random-player a.is-active {
background-color: red; } 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 { footer #block-userlogin {
margin-bottom: 1em; margin-bottom: 1em;
pointer-events: all; pointer-events: all;
@@ -171,10 +171,10 @@
_$body.addClass('path-edlp-node'); _$body.addClass('path-edlp-node');
// handle clicked link classes // handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$('.ajax-loading').removeClass('ajax-loading'); $('.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'){ if(typeof selector != 'undefined'){
$('a[selector="'+selector+'"]').addClass('is-active'); $('a[selector="'+selector+'"]').addClass('is-active');
}else{ }else{
@@ -183,13 +183,13 @@
// if bundle page (productions) activate production links // if bundle page (productions) activate production links
if (typeof data.bundle != 'undefined' && data.bundle == "page") { 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 node is in production menu tree, set first level of tree active, e.g. pieces sonores
if (typeof data.menu_parents != 'undefined') { if (typeof data.menu_parents != 'undefined') {
for (var i = 0; i < data.menu_parents.length; i++) { for (var i = 0; i < data.menu_parents.length; i++) {
var menu_sys_path = data.menu_parents[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, horizontalOrder: true,
containerStyle: null, containerStyle: null,
// disable initial layout // disable initial layout
initLayout: false, // initLayout: false,
}); });
// bind event // bind event
// $grid.masonry( 'on', 'layoutComplete', function() { // $grid.masonry( 'on', 'layoutComplete', function() {
// console.log('layout is complete'); // console.log('layout is complete');
// }); // });
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$grid.imagesLoaded(function(){ $grid.imagesLoaded(function(){
$grid.masonry(); $grid.masonry('layout');
}); });
} }
@@ -108,8 +108,9 @@ header[role="banner"]{
@include spining-loader-square; @include spining-loader-square;
} }
&.is-active:before, &.is-active:before,
&.is-active-trail:before,
&:hover:before{ &:hover:before{
border-color: red; // border-color: red;
background-color: red; background-color: red;
} }
} }
@@ -1321,7 +1322,8 @@ footer{
margin-right: 0.5em; margin-right: 0.5em;
} }
&:hover:before, &:hover:before,
&.is-active:before{ &.is-active:before,
&.is-active-trail:before{
background-color: red; background-color: red;
} }
&.ajax-loading:before{ &.ajax-loading:before{
@@ -1544,16 +1546,17 @@ footer{
} }
} }
} }
#block-studiolinkblock{
margin-bottom: 1em;
@include iconlinkblock(url(../img/studio.svg));
}
.block.random-player{ .block.random-player{
margin-bottom: 1em; margin-bottom: 1em;
@include iconlinkblock(url(../img/random.svg)); @include iconlinkblock(url(../img/random.svg));
} }
#block-studiolinkblock{
margin-bottom: 1em;
@include iconlinkblock(url(../img/studio.svg));
}
#block-userlogin{ #block-userlogin{
margin-bottom: 1em; margin-bottom: 1em;
pointer-events: all; pointer-events: all;