Commit 2a1e02a4 authored by Agami4's avatar Agami4
Browse files

Issue #3217356 by agami4: Improve secondary nav behavior

parent e5225fa4
!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i){var l=f(".navbar-secondary .navbar-scrollable",i),a=l.find(".nav",i),s=a.find("li",i),n=l.width(),e=a.width();function t(){f(".layout--with-complementary")&&(900<=f(window).width()?n<e&&a.each(function(){var i=f(this),a=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var n=0;n<s.length&&(a+=f(s[n]).width(),!(l.width()-50<=a));++n)f(s[n]).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 e=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){e.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(e.slideUp(300),t.removeClass("active"))})}):a.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,d,c,v=(o=function(){t()},r=250,function(){var i=this,a=arguments,n=d&&!c;clearTimeout(c),c=setTimeout(function(){c=null,d||o.apply(i,a)},r),n&&o.apply(i,a)});window.addEventListener("resize",v)}}}(jQuery);
\ No newline at end of file
!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(v){f(window).on("load",function(){var l=f(".navbar-secondary .navbar-scrollable",v),i=l.find(".nav",v),s=i.find("li",v),a=l.width(),n=i.width();function e(){f(".layout--with-complementary")&&(900<=f(window).width()?a<n&&i.each(function(){var i=f(this),a=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var n=0;n<s.length&&(a+=f(s[n]).width(),!(l.width()-50<=a));++n)f(s[n]).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 e=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){e.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(e.slideUp(300),t.removeClass("active"))})}):i.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()}))}e();var t,o,r,d,c=(t=function(){e()},o=250,function(){var i=this,a=arguments,n=r&&!d;clearTimeout(d),d=setTimeout(function(){d=null,r||t.apply(i,a)},o),n&&t.apply(i,a)});window.addEventListener("resize",c)})}}}(jQuery);
\ No newline at end of file
......@@ -23,98 +23,96 @@
};
};
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')) {
if($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
navSecondary.each(function () {
var $this = $(this);
var total = 0;
// Add `visible-item` class to the list items which displayed in the current secondary
// navigation width
items.removeClass('visible-item');
$this.find('.caret').remove();
$(window).on('load', function () {
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')) {
if($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
navSecondary.each(function () {
var $this = $(this);
var total = 0;
// 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(items.parent().is('div')) {
items.unwrap();
}
if(items.parent().is('div')) {
items.unwrap();
}
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
if((navScroll.width() - 50) <= total) {
break;
}
if((navScroll.width() - 50) <= total) {
break;
$(items[i]).addClass('visible-item');
}
$(items[i]).addClass('visible-item');
}
// Create wrapper for visible items.
$this.find('li.visible-item')
.wrapAll('<div class="visible-list"></div>');
// Create wrapper for visible items.
$this.find('li.visible-item')
.wrapAll('<div class="visible-list"></div>');
// Create wrapper for hidden items.
$this.find('li:not(.visible-item)')
.wrapAll('<div class="hidden-list card" />');
// Create wrapper for hidden items.
$this.find('li:not(.visible-item)')
.wrapAll('<div class="hidden-list card" />');
// Add caret.
$this.append('<span class="caret"></span>');
// Add caret.
$this.append('<span class="caret"></span>');
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
cart.on('click', function () {
hiddenList.slideToggle(300);
$(this).toggleClass('active');
});
cart.on('click', function () {
hiddenList.slideToggle(300);
$(this).toggleClass('active');
});
$(document).on('click', function(event) {
event.stopPropagation();
$(document).on('click', function(event) {
event.stopPropagation();
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300);
cart.removeClass('active');
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300);
cart.removeClass('active');
});
});
});
}
}
}
else {
navSecondary.each(function () {
var $this = $(this);
else {
navSecondary.each(function () {
var $this = $(this);
// Unwrap list items.
// Remove extra classes/elements.
items.removeClass('visible-item');
$this.find('.caret').remove();
// Unwrap list items.
// Remove extra classes/elements.
items.removeClass('visible-item');
$this.find('.caret').remove();
if(items.parent().is('div')) {
items.unwrap();
}
});
if(items.parent().is('div')) {
items.unwrap();
}
});
}
}
}
}
$(window).on('load', function () {
secondaryNavBehaviour();
});
var returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
var returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
});
}
};
......
Markdown is supported
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