diff --git a/assets/js/navbar-secondary--sky.min.js b/assets/js/navbar-secondary--sky.min.js
deleted file mode 100644
index 817d5b8f6a0b790c94047c11d11c09aba78561ce..0000000000000000000000000000000000000000
--- a/assets/js/navbar-secondary--sky.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!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);
diff --git a/assets/js/navbar-secondary.min.js b/assets/js/navbar-secondary.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca88f17eae555547733590aa683d67c773c92b34
--- /dev/null
+++ b/assets/js/navbar-secondary.min.js
@@ -0,0 +1 @@
+!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
diff --git a/components/03-molecules/navigation/navbar/navbar-secondary--sky.js b/components/03-molecules/navigation/navbar/navbar-secondary--sky.js
deleted file mode 100644
index b51f5753b191e7a9b05686b10188ca884b8cd2aa..0000000000000000000000000000000000000000
--- a/components/03-molecules/navigation/navbar/navbar-secondary--sky.js
+++ /dev/null
@@ -1,132 +0,0 @@
-(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);
diff --git a/components/03-molecules/navigation/navbar/navbar-secondary.js b/components/03-molecules/navigation/navbar/navbar-secondary.js
new file mode 100644
index 0000000000000000000000000000000000000000..2d605684676addeebf5f0b701c5929abd5719029
--- /dev/null
+++ b/components/03-molecules/navigation/navbar/navbar-secondary.js
@@ -0,0 +1,115 @@
+(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);
diff --git a/socialblue.libraries.yml b/socialblue.libraries.yml
index 46b87aba71666533937be7a6574acfa5b31ddf9f..9ba4f6861aa6869b20726c333b1cac4d5595e578 100644
--- a/socialblue.libraries.yml
+++ b/socialblue.libraries.yml
@@ -120,6 +120,10 @@ navbar:
css:
theme:
assets/css/navbar.css: {}
+ js:
+ assets/js/navbar-secondary.min.js: {}
+ dependencies:
+ - core/drupal.debounce
pagination:
css:
diff --git a/socialblue.theme b/socialblue.theme
index 5bf4f294a17898e63bc79598fc3496d5d9bbaa09..fef08dc1b576fa84298913f3d8a545648faa8bc8 100644
--- a/socialblue.theme
+++ b/socialblue.theme
@@ -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'] = [];
- }
}
}