Skip to content
Snippets Groups Projects
Commit 0b217c27 authored by Serhii Myronets's avatar Serhii Myronets Committed by Tiago Siqueira
Browse files

Issue #3291441 by agami4: Improve js behaviour of the secondary navigation for the FF browser

parent d9af0757
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/js/navbar-secondary--sky.min.js
+ 1
− 1
View file @ 0b217c27
!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(){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.css("display","flex"):i.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()})}e();var t,r,o,d,c=(t=function(){e()},r=250,function(){var i=this,a=arguments,n=o&&!d;clearTimeout(d),d=setTimeout(function(){d=null,o||t.apply(i,a)},r),n&&t.apply(i,a)});window.addEventListener("resize",c)})}}}(jQuery);
\ No newline at end of file
!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(v){f(window).on("load",function(){Promise.resolve(1).then(function(){var s=f(".navbar-secondary .navbar-scrollable",v),i=s.find(".nav",v),l=i.find("li",v),e=s.width(),n=i.width();function a(){900<=f(window).width()?e<n?i.each(function(){var i=f(this),e=0;l.removeClass("visible-item"),i.find(".caret").remove(),l.parent().is("div")&&l.unwrap();for(var n=0;n<l.length&&(e+=f(l[n]).width(),!(s.width()-50<=e));++n)f(l[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 a=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){a.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(a.slideUp(300),t.removeClass("active"))})}):i.css("display","flex"):i.each(function(){var i=f(this);l.removeClass("visible-item"),i.find(".caret").remove(),l.parent().is("div")&&l.unwrap()})}a();var t,o,r,d,c=(t=function(){a()},o=250,function(){var i=this,e=arguments,n=r&&!d;clearTimeout(d),d=setTimeout(function(){d=null,r||t.apply(i,e)},o),n&&t.apply(i,e)});window.addEventListener("resize",c)})})}}}(jQuery);
\ No newline at end of file
components/03-molecules/navigation/navbar/navbar-secondary--sky.js
+ 65
− 62
View file @ 0b217c27
......@@ -24,96 +24,99 @@
};
$(window).on('load', function () {
// Sometimes after reload page, we can not find elements on the
// secondary navigation. Promise function fixed it.
Promise.resolve(1).then(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($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
// Secondary navigation behaviour,
function secondaryNavBehaviour() {
if($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
navSecondary.each(function () {
var $this = $(this);
var total = 0;
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();
// 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.css('display', 'flex');
} else {
navSecondary.css('display', 'flex');
}
}
}
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();
}
});
}
}
}
secondaryNavBehaviour();
var returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
var returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
});
});
}
};
})(jQuery);
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