feat(minimized): Enable minimizing for global headers. Todo : tests +…

… jQuery + docs

js/index.esm.js

@@ -14,6 +14,7 @@ export { default as Collapse } from './src/collapse'
 export { default as Dropdown } from './src/dropdown'
 export { default as Modal } from './src/modal'
 export { default as Offcanvas } from './src/offcanvas'
+export { default as OrangeNavbar } from './src/orange-navbar'
 export { default as Popover } from './src/popover'
 export { default as ScrollSpy } from './src/scrollspy'
 export { default as Tab } from './src/tab'

js/index.umd.js

@@ -12,6 +12,7 @@ import Collapse from './src/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
 import Offcanvas from './src/offcanvas'
+import OrangeNavbar from './src/orange-navbar'
 import Popover from './src/popover'
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
@@ -27,6 +28,7 @@ export default {
   Dropdown,
   Modal,
   Offcanvas,
+  OrangeNavbar,
   Popover,
   ScrollSpy,
   Tab,

js/src/orange-navbar.js

@@ -1,13 +1,45 @@
-// .scroll-minimized is a class used to apply header-minimized to a navbar
-const headers = document.getElementsByTagName('header')
-if (headers[0].classList.contains('scroll-minimized')) {
-  window.addEventListener('scroll', () => {
-    const Scroll = window.scrollY
-    if (Scroll > 0) {
-      // Consider first element in array is obviously the first header
-      headers[0].classList.add('header-minimized')
-    } else {
-      headers[0].classList.remove('header-minimized')
-    }
-  })
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import SelectorEngine from './dom/selector-engine'
+
+const NAME = 'orangenavbar'
+const DATA_KEY = 'bs.orangenavbar'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+const EVENT_SCROLL_DATA_API = `scroll${EVENT_KEY}${DATA_API_KEY}`
+const SELECTOR_STICKY_TOP = '.sticky-top'
+
+class OrangeNavbar extends BaseComponent {
+
+  // Getters
+  static get NAME() {
+    return NAME
+  }
+
+  enableMinimizing(el) {
+    // The minimized behaviour works only if your header has .sticky-top (fixed-top will be sticky without minimizing)
+    window.addEventListener('scroll', () => {
+      const headers = document.getElementsByTagName('header')
+
+      if (headers[0].classList.contains('sticky-top')) {
+        const Scroll = window.scrollY
+        let headerChildren = [...headers[0].children]
+        let globalHeaderChild = headerChildren.find(element => !element.classList.contains('supra'))
+        if (Scroll > 0) {
+          // Consider first element not having .supra in array is the first header
+          globalHeaderChild.classList.add("header-minimized")
+        } else {
+          globalHeaderChild.classList.remove("header-minimized")
+        }
+      }
+    })
+  }
 }
+
+EventHandler.on(document, EVENT_SCROLL_DATA_API, () => {
+  for (const el of SelectorEngine.find(SELECTOR_STICKY_TOP)) {
+    OrangeNavbar.getOrCreateInstance(el).enableMinimizing(el)
+  }
+})
+
+export default OrangeNavbar

scss/_navbar.scss

@@ -242,11 +242,8 @@
 
   // Boosted mod
   .nav-item {
-    font-size: $h5-font-size;
-
-    &:not(:first-child) {
-      border-top: $border-width * .5 solid $gray-900;
-    }
+    font-size: 1rem;
+    border-top: $border-width * .5 solid $gray-900;
   }
 
   .nav-link {