release: 3.9.0

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 3.8.1
+Version: FREE 3.9.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "main": "js/mdb.min.js",
   "homepage": "https://mdbootstrap.com/docs/standard/",
   "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

src/js/bootstrap/mdb-prefix/collapse.js

@@ -184,7 +184,6 @@ class Collapse extends BaseComponent {
     }
 
     this.setTransitioning(true);
-
     const complete = () => {
       this._element.classList.remove(CLASS_NAME_COLLAPSING);
       this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);

src/js/bootstrap/mdb-prefix/scrollspy.js

@@ -244,10 +244,9 @@ class ScrollSpy extends BaseComponent {
       SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP).forEach((listGroup) => {
         // Set triggered links parents as active
         // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
-        SelectorEngine.prev(
-          listGroup,
-          `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`
-        ).forEach((item) => item.classList.add(CLASS_NAME_ACTIVE));
+        SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`).forEach(
+          (item) => item.classList.add(CLASS_NAME_ACTIVE)
+        );
 
         // Handle special case when .nav-link is inside .nav-item
         SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS).forEach((navItem) => {
@@ -296,9 +295,9 @@ class ScrollSpy extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-  SelectorEngine.find(SELECTOR_DATA_SPY).forEach((spy) => new ScrollSpy(spy));
-});
+// EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+//   SelectorEngine.find(SELECTOR_DATA_SPY).forEach((spy) => new ScrollSpy(spy));
+// });
 
 /**
  * ------------------------------------------------------------------------

src/js/free/scrollspy.js

@@ -16,18 +16,23 @@ const EVENT_KEY = `.${DATA_KEY}`;
 const DATA_API_KEY = '.data-api';
 
 const EVENT_ACTIVATE_BS = 'activate.bs.scrollspy';
-
 const EVENT_ACTIVATE = `activate${EVENT_KEY}`;
-
-const SELECTOR_DATA_SPY = '[data-mdb-spy="scroll"]';
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
 
+const CLASS_COLLAPSIBLE = 'collapsible-scrollspy';
+const CLASS_ACTIVE = 'active';
+
+const SELECTOR_LIST = 'ul';
+const SELECTOR_DATA_SPY = '[data-mdb-spy="scroll"]';
+const SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;
+const SELECTOR_COLLAPSIBLE_SCROLLSPY = `.${CLASS_COLLAPSIBLE}`;
+
 class ScrollSpy extends BSScrollSpy {
   constructor(element, data) {
     super(element, data);
 
     this._scrollElement = element.tagName === 'BODY' ? window : element;
-
+    this._collapsibles = [];
     this._init();
   }
 
@@ -46,10 +51,77 @@ class ScrollSpy extends BSScrollSpy {
   // Private
   _init() {
     this._bindActivateEvent();
+    this._getCollapsibles();
+
+    if (this._collapsibles.length === 0) {
+      return;
+    }
+
+    this._showSubsection();
+    this._hideSubsection();
+  }
+
+  _getHeight(element) {
+    return element.offsetHeight;
+  }
+
+  _hide(target) {
+    const itemsToHide = SelectorEngine.findOne(SELECTOR_LIST, target.parentNode);
+    itemsToHide.style.overflow = 'hidden';
+    itemsToHide.style.height = `${0}px`;
+  }
+
+  _show(target, destinedHeight) {
+    target.style.height = destinedHeight;
+  }
+
+  _getCollapsibles() {
+    const collapsibleElements = SelectorEngine.find(SELECTOR_COLLAPSIBLE_SCROLLSPY);
+
+    if (!collapsibleElements) {
+      return;
+    }
+
+    collapsibleElements.forEach((collapsibleElement) => {
+      const listParent = collapsibleElement.parentNode;
+      const list = SelectorEngine.findOne(SELECTOR_LIST, listParent);
+      const listHeight = list.offsetHeight;
+      this._collapsibles.push({
+        element: list,
+        relatedTarget: collapsibleElement.getAttribute('href'),
+        height: `${listHeight}px`,
+      });
+    });
+  }
+
+  _showSubsection() {
+    const activeElements = SelectorEngine.find(SELECTOR_ACTIVE);
+    const actives = activeElements.filter((active) => {
+      return Manipulator.hasClass(active, CLASS_COLLAPSIBLE);
+    });
+
+    actives.forEach((active) => {
+      const list = SelectorEngine.findOne(SELECTOR_LIST, active.parentNode);
+      const height = this._collapsibles.find((collapsible) => {
+        return (collapsible.relatedTarget = active.getAttribute('href'));
+      }).height;
+      this._show(list, height);
+    });
+  }
+
+  _hideSubsection() {
+    const unactives = SelectorEngine.find(SELECTOR_COLLAPSIBLE_SCROLLSPY).filter((collapsible) => {
+      return Manipulator.hasClass(collapsible, 'active') === false;
+    });
+    unactives.forEach((unactive) => {
+      this._hide(unactive);
+    });
   }
 
   _bindActivateEvent() {
     EventHandler.on(this._scrollElement, EVENT_ACTIVATE_BS, (e) => {
+      this._showSubsection();
+      this._hideSubsection();
       EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
         relatedTarget: e.relatedTarget,
       });

src/scss/free/_scrollspy.scss

@@ -25,5 +25,10 @@
         $scrollspy-menu-sidebar-active-border-color;
       border-radius: 0;
     }
+
+    .collapsible-scrollspy ~ .nav {
+      transition: height 0.5s ease;
+      flex-wrap: nowrap;
+    }
   }
 }