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

Issue #3418869 by agami4: Improve the JS behavior of the secondary navigation

parent 18cc8f31
No related branches found
No related tags found
1 merge request!130Issue #3418869 by agami4: Improve the JS behavior of the secondary navigation
Hide whitespace changes
Inline Side-by-side
assets/js/navbar-secondary--sky.min.js deleted 100644 → 0
+ 0
− 1
View file @ 18cc8f31
!function(i,n){Drupal.behaviors.navbarSecondaryScrollable={attach:function(e){i(window).on("load",(function(){n("navbar-secondary",".navbar-secondary .navbar-scrollable",e).forEach((function(n){var a=i(n),s=a.find(".nav",e),t=s.find("li",e),l=a.width(),o=s.width(),d=i(".region--content");function r(){i(window).width()>=900?o>l?s.each((function(){var n=i(this),e=0;t.removeClass("visible-item"),n.find(".caret").remove(),t.parent().is("div")&&t.unwrap();for(var s=0;s<t.length&&(e+=i(t[s]).width(),!(a.width()-50<=e));++s)i(t[s]).addClass("visible-item");n.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),n.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),n.append('<span class="caret"></span>');var l=n.find(".hidden-list"),o=n.find(".caret");o.on("click",(function(){l.is(":hidden")?(d.addClass("js--z-index"),l.slideDown("300")):l.slideUp("300",(function(){d.removeClass("js--z-index")})),i(this).toggleClass("active")})),i(document).on("click",(function(n){n.stopPropagation(),i(n.target).closest(".navbar-secondary").length||(l.slideUp(300,(function(){d.removeClass("js--z-index")})),o.removeClass("active"))}))})):s.css("display","flex"):s.each((function(){var n=i(this);t.removeClass("visible-item"),n.find(".caret").remove(),t.parent().is("div")&&t.unwrap()}))}r();var c,v,f,u,p=(c=function(){r()},v=250,function(){var i=this,n=arguments,e=f&&!u;clearTimeout(u),u=setTimeout((function(){u=null,f||c.apply(i,n)}),v),e&&c.apply(i,n)});window.addEventListener("resize",p)}))}))}}}(jQuery,once);
assets/js/navbar-secondary.min.js 0 → 100644
+ 1
− 0
View file @ 2d4d63ff
!function(p,i){Drupal.behaviors.navbarSecondaryScrollable={attach:function(u){p(window).on("load",function(){i("navbar-secondary",".navbar-secondary .navbar-scrollable",u).forEach(function(i){var t=p(i),n=t.find(".nav",u),l=n.find("li",u),e=t.width(),a=n.width(),o=p(".region--content");function s(){900<=p(window).width()?e<a?n.each(function(){var i=p(this),n=0;l.removeClass("visible-item"),i.find(".caret").remove(),l.parent().is("div")&&l.unwrap();for(var e=0;e<l.length&&(n+=p(l[e]).width(),!(t.width()-50<=n));++e)p(l[e]).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"),s=i.find(".caret");s.on("click",function(){a.is(":hidden")?(o.addClass("js--z-index"),a.slideDown("300")):a.slideUp("300",function(){o.removeClass("js--z-index")}),p(this).toggleClass("active")}),p(document).on("click",function(i){i.stopPropagation(),p(i.target).closest(".navbar-secondary").length||(a.slideUp(300,function(){o.removeClass("js--z-index")}),s.removeClass("active"))})}):n.css("display","flex"):n.each(function(){var i=p(this);l.removeClass("visible-item"),i.find(".caret").remove(),l.parent().is("div")&&l.unwrap()})}s();var d,r,c,v,f=(d=function(){s()},r=250,function(){var i=this,n=arguments,e=c&&!v;clearTimeout(v),v=setTimeout(function(){v=null,c||d.apply(i,n)},r),e&&d.apply(i,n)});window.addEventListener("resize",f)})})}}}(jQuery,once);
\ No newline at end of file
components/03-molecules/navigation/navbar/navbar-secondary--sky.js deleted 100644 → 0
+ 0
− 132
View file @ 18cc8f31
(function ($, once) {
/*
** Behavior when the number of items in the secondary navigation
* is too big.
*/
Drupal.behaviors.navbarSecondaryScrollable = {
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);
};
};
$(window).on('load', function () {
// Sometimes after reload page, we can not find elements on the
// secondary navigation. Promise function fixed it.
once('navbar-secondary', '.navbar-secondary .navbar-scrollable', context).forEach(function (navScrollElem) {
var navScroll = $(navScrollElem);
var navSecondary = navScroll.find('.nav', context);
var items = navSecondary.find('li', context);
var navScrollWidth = navScroll.width();
var navSecondaryWidth = navSecondary.width();
var regionContent = $('.region--content');
// Secondary navigation behaviour,
function secondaryNavBehaviour() {
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();
}
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
if((navScroll.width() - 50) <= total) {
break;
}
$(items[i]).addClass('visible-item');
}
// 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" />');
// Add caret.
$this.append('<span class="caret"></span>');
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
cart.on('click', function () {
if (hiddenList.is(":hidden")) {
regionContent.addClass('js--z-index');
hiddenList.slideDown('300');
} else {
hiddenList.slideUp('300', function() {
regionContent.removeClass('js--z-index');
});
}
$(this).toggleClass('active');
});
$(document).on('click', function(event) {
event.stopPropagation();
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300, function() {
regionContent.removeClass('js--z-index');
});
cart.removeClass('active');
});
});
} else {
navSecondary.css('display', 'flex');
}
}
else {
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();
}
});
}
}
secondaryNavBehaviour();
var returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
});
});
}
};
})(jQuery, once);
components/03-molecules/navigation/navbar/navbar-secondary.js 0 → 100644
+ 115
− 0
View file @ 2d4d63ff
(function ($, once, debounce) {
/*
** Behavior when the number of items in the secondary navigation
* is too big.
*/
Drupal.behaviors.navbarSecondaryScrollable = {
attach: function (context) {
const navbarSecondary = (context.classList && context.classList.contains('block--banner-auto-generated')) ? [context] : context.querySelectorAll('.navbar-secondary .navbar-scrollable');
if (!navbarSecondary.length) { return; }
// Sometimes after reload page, we can not find elements on the
// secondary navigation. Promise function fixed it.
navbarSecondary.forEach(function (navScrollElem) {
const navScroll = $(navScrollElem);
const navSecondary = navScroll.find('.nav', context);
const items = navSecondary.find('li', context);
const navScrollWidth = navScroll.width();
const navSecondaryWidth = navSecondary.width();
const regionContent = $('.region--content');
// Secondary navigation behaviour,
function secondaryNavBehaviour() {
if($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
navSecondary.each(function () {
const $this = $(this);
let 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();
}
for(let i = 0; i < items.length; ++i) {
total += $(items[i]).width();
if((navScroll.width() - 50) <= total) {
break;
}
$(items[i]).addClass('visible-item');
}
// 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" />');
// Add caret.
$this.append('<span class="caret"></span>');
const hiddenList = $this.find('.hidden-list');
const cart = $this.find('.caret');
cart.on('click', function () {
if (hiddenList.is(":hidden")) {
regionContent.addClass('js--z-index');
hiddenList.slideDown('300');
} else {
hiddenList.slideUp('300', function() {
regionContent.removeClass('js--z-index');
});
}
$(this).toggleClass('active');
});
$(document).on('click', function(event) {
event.stopPropagation();
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300, function() {
regionContent.removeClass('js--z-index');
});
cart.removeClass('active');
});
});
} else {
navSecondary.css('display', 'flex');
}
}
else {
navSecondary.each(function () {
const $this = $(this);
// Unwrap list items.
// Remove extra classes/elements.
items.removeClass('visible-item');
$this.find('.caret').remove();
if(items.parent().is('div')) {
items.unwrap();
}
});
}
}
secondaryNavBehaviour();
const returnedFunction = debounce(function() {
secondaryNavBehaviour();
}, 250);
window.addEventListener('resize', returnedFunction);
});
}
};
})(jQuery, once, Drupal.debounce);
socialblue.libraries.yml
+ 4
− 0
View file @ 2d4d63ff
......@@ -120,6 +120,10 @@ navbar:
css:
theme:
assets/css/navbar.css: {}
js:
assets/js/navbar-secondary.min.js: {}
dependencies:
- core/drupal.debounce
pagination:
css:
......
socialblue.theme
+ 0
− 5
View file @ 2d4d63ff
......@@ -39,11 +39,6 @@ function socialblue_library_info_alter(&$libraries, $extension): void {
$libraries[$key]['css']['theme'][$style_css]['weight'] = 600;
}
}
// Add extra JS for secondary navigation in Sky style.
if ($style === 'sky') {
$libraries['navbar']['js']['assets/js/navbar-secondary--sky.min.js'] = [];
}
}
}
......
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