Skip to content
Snippets Groups Projects
Commit f83de26a authored by Serhii Myronets's avatar Serhii Myronets
Browse files

Issue #3211612 by agami4: Improve secondary navigation behaviour

parent 4fb7aea0
No related branches found
No related tags found
1 merge request!12Issue #3211612 by agami4: Improve secondary navigation behaviour
Hide whitespace changes
Inline Side-by-side
assets/css/navbar--sky.css
+ 34
− 18
View file @ f83de26a
......@@ -6,7 +6,8 @@
.socialblue--sky .navbar-secondary {
width: 100%;
min-height: 44px;
box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.socialblue--sky .navbar-secondary .navbar-scrollable {
......@@ -31,31 +32,38 @@
border-bottom-color: #fff;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
display: table;
width: 100%;
text-align: center;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav li {
position: relative;
display: table-cell;
}
@media (min-width: 900px) {
.socialblue--sky .navbar-fixed-top .navbar-nav {
padding-right: 1.625rem;
}
.socialblue--sky.mode-search .navbar__open-search-block {
transform: scale(100);
-webkit-transform: scale(100);
transform: scale(100);
}
.socialblue--sky .navbar-secondary .navbar-scrollable {
border-radius: 0 5px 0 0;
overflow: visible;
overflow: hidden;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary {
flex: 0 0 66.66667%;
-webkit-box-flex: 0;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
border-radius: 5px 5px 0 0;
order: 1;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
width: 100%;
display: table;
text-align: center;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav li {
display: table-cell;
position: relative;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret {
position: absolute;
......@@ -63,17 +71,25 @@
right: 15px;
border-width: 6px 6px 0;
border-top-color: #fff;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret.active, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret.active {
transform: translateY(-50%) rotate(180deg);
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .visible-list, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .visible-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 44px;
align-items: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 25px;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .visible-list a, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .visible-list a {
......
assets/js/navbar-secondary--sky.min.js
+ 1
− 1
View file @ f83de26a
!function(t){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i,a){t(window).on("load",function(){if(t(".layout--with-complementary")){var i=t(".navbar-secondary .navbar-scrollable"),a=i.find(".nav"),l=a.find("li");if(900<=t(window).width())if(a.width()>i.width()){for(var n=0,e=0;e<l.length&&(n+=t(l[e]).width(),!(i.width()-50<=n));++e)t(l[e]).addClass("visible-item");a.each(function(){var i=t(this);i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var a=i.find(".hidden-list"),l=i.find(".caret");l.on("click",function(){a.slideToggle(300),t(this).toggleClass("active")}),t(document).on("click",function(i){t(i.target).closest(".navbar-secondary").length||(a.slideUp(300),l.removeClass("active"),i.stopPropagation())})})}else a.css("display","flex")}})}}}(jQuery);
\ No newline at end of file
!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i){var l=f(".navbar-secondary .navbar-scrollable",i),e=l.find(".nav",i),s=e.find("li",i),a=l.width(),n=e.width();function t(){f(".layout--with-complementary")&&(900<=f(window).width()?a<n&&(e.css("overflow","visible"),e.each(function(){var i=f(this),e=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var a=0;a<s.length&&(e+=f(s[a]).width(),!(l.width()-50<=e));++a)f(s[a]).addClass("visible-item");i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var n=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){n.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(n.slideUp(300),t.removeClass("active"))})})):(e.css({"overflow-x":"scroll",display:"flex"}),e.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()})))}f(window).on("load",function(){t()});var o,r,c,d,v=(o=function(){t()},r=250,function(){var i=this,e=arguments,a=c&&!d;clearTimeout(d),d=setTimeout(function(){d=null,c||o.apply(i,e)},r),a&&o.apply(i,e)});window.addEventListener("resize",v)}}}(jQuery);
\ No newline at end of file
components/03-molecules/navigation/navbar/navbar--sky.scss
+ 11
− 6
View file @ f83de26a
......@@ -33,7 +33,10 @@
@include for-tablet-landscape-up {
border-radius: 0 $border-radius-extrasmall 0 0;
overflow: visible;
// This style needs if secondary navigation have a lot of list items.
// This will remove after load page on the navbar-secondary--sky.js file.
overflow: hidden;
}
}
......@@ -76,16 +79,18 @@
}
.navbar-nav {
display: table;
width: 100%;
text-align: center;
@include for-tablet-landscape-up {
width: 100%;
display: table;
text-align: center;
}
li {
position: relative;
display: table-cell;
@include for-tablet-landscape-up {
display: table-cell;
position: relative;
}
}
......
components/03-molecules/navigation/navbar/navbar-secondary--sky.js
+ 74
− 19
View file @ f83de26a
......@@ -5,30 +5,60 @@
* is too big.
*/
Drupal.behaviors.navbarSecondaryScrollable = {
attach: function (context, settings) {
$(window).on('load', function () {
attach: function (context) {
// Debounce.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var navScroll = $('.navbar-secondary .navbar-scrollable', context);
var navSecondary = navScroll.find('.nav', context);
var items = navSecondary.find('li', context);
var navScrollWidth = navScroll.width();
var navSecondaryWidth = navSecondary.width();
// Secondary navigation behaviour,
function secondaryNavBehaviour() {
if($('.layout--with-complementary')) {
var navScroll = $('.navbar-secondary .navbar-scrollable');
var navSecondary = navScroll.find('.nav');
var items = navSecondary.find('li');
if($(window).width() >= 900) {
if (navSecondary.width() > navScroll.width()) {
var total = 0;
if (navSecondaryWidth > navScrollWidth) {
navSecondary.css('overflow', 'visible');
navSecondary.each(function () {
var $this = $(this);
var total = 0;
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
// Add `visible-item` class to the list items which displayed in the current secondary
// navigation width
items.removeClass('visible-item');
$this.find('.caret').remove();
if((navScroll.width() -50) <= total) {
break;
if(items.parent().is('div')) {
items.unwrap();
}
$(items[i]).addClass('visible-item');
}
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
navSecondary.each(function () {
var $this = $(this);
if((navScroll.width() - 50) <= total) {
break;
}
$(items[i]).addClass('visible-item');
}
// Create wrapper for visible items.
$this.find('li.visible-item')
......@@ -50,19 +80,44 @@
});
$(document).on('click', function(event) {
event.stopPropagation();
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300);
cart.removeClass('active');
event.stopPropagation();
});
});
} else {
navSecondary.css('display', 'flex');
}
}
else {
navSecondary.css({'overflow-x': 'scroll', 'display': 'flex'});
navSecondary.each(function () {
var $this = $(this);
// Unwrap list items.
// Remove extra classes/elements.
items.removeClass('visible-item');
$this.find('.caret').remove();
if(items.parent().is('div')) {
items.unwrap();
}
});
}
}
}
$(window).on('load', function () {
secondaryNavBehaviour();
});
var returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
}
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment