enhancement: materializecss#500 Revert dev changes

IvanPostu · Sep 8, 2024 · 5ceafa4 · 5ceafa4
1 parent 16d31ac
commit 5ceafa4
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 223 deletions.
diff --git a/dist/css/materialize.min.css.map b/dist/css/materialize.min.css.map
diff --git a/dist/js/materialize.cjs.js b/dist/js/materialize.cjs.js
@@ -4619,20 +4619,17 @@ let _defaults$9 = {
     throttle: 100,
     scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
     activeClass: 'active',
-    getActiveElement: (id) => { return 'a[href="#' + id + '"]'; },
-    keepTopElementActive: false,
-    animationDuration: null,
+    getActiveElement: (id) => { return 'a[href="#' + id + '"]'; }
 };
 class ScrollSpy extends Component {
     static _elements;
     static _count;
     static _increment;
+    tickId;
+    id;
     static _elementsInView;
     static _visibleElements;
     static _ticks;
-    static _keptTopActiveElement = null;
-    tickId;
-    id;
     constructor(el, options) {
         super(el, options, ScrollSpy);
         this.el.M_ScrollSpy = this;
@@ -4694,12 +4691,7 @@ class ScrollSpy extends Component {
             const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
             if (trigger === x) {
                 e.preventDefault();
-                if (!scrollspy.el.M_ScrollSpy.options.animationDuration) {
-                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
-                }
-                else {
-                    smoothScrollIntoView(scrollspy.el, scrollspy.el.M_ScrollSpy.options.animationDuration);
-                }
+                scrollspy.el.scrollIntoView({ behavior: 'smooth' });
                 break;
             }
         }
@@ -4732,26 +4724,6 @@ class ScrollSpy extends Component {
         }
         // remember elements in view for next tick
         ScrollSpy._elementsInView = intersections;
-        if (ScrollSpy._elements.length) {
-            const options = ScrollSpy._elements[0].el.M_ScrollSpy.options;
-            if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) {
-                this._resetKeptTopActiveElementIfNeeded();
-                const topElements = ScrollSpy._elements.filter(value => getDistanceToViewport(value.el) <= 0)
-                    .sort((a, b) => {
-                    const distanceA = getDistanceToViewport(a.el);
-                    const distanceB = getDistanceToViewport(b.el);
-                    if (distanceA < distanceB)
-                        return -1;
-                    if (distanceA > distanceB)
-                        return 1;
-                    return 0;
-                });
-                const nearestTopElement = topElements.length ? topElements[topElements.length - 1] : ScrollSpy._elements[0];
-                const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
-                actElem?.classList.add(options.activeClass);
-                ScrollSpy._keptTopActiveElement = actElem;
-            }
-        }
     };
     static _offset(el) {
         const box = el.getBoundingClientRect();
@@ -4794,10 +4766,8 @@ class ScrollSpy extends Component {
         else {
             ScrollSpy._visibleElements.push(this.el);
         }
-        this._resetKeptTopActiveElementIfNeeded();
         const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
         document.querySelector(selector)?.classList.add(this.options.activeClass);
-        this._resetKeptTopActiveElementIfNeeded();
     }
     _exit() {
         ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
@@ -4809,16 +4779,9 @@ class ScrollSpy extends Component {
                 // Check if empty
                 const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
                 document.querySelector(selector)?.classList.add(this.options.activeClass);
-                this._resetKeptTopActiveElementIfNeeded();
             }
         }
     }
-    _resetKeptTopActiveElementIfNeeded() {
-        if (ScrollSpy._keptTopActiveElement) {
-            ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass);
-            ScrollSpy._keptTopActiveElement = null;
-        }
-    }
     static {
         ScrollSpy._elements = [];
         ScrollSpy._elementsInView = [];
@@ -4828,30 +4791,6 @@ class ScrollSpy extends Component {
         ScrollSpy._ticks = 0;
     }
 }
-function getDistanceToViewport(element) {
-    const rect = element.getBoundingClientRect();
-    const distance = rect.top;
-    return distance;
-}
-function smoothScrollIntoView(element, duration = 300) {
-    const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
-    const startPosition = (window.scrollY || window.pageYOffset);
-    const distance = targetPosition - startPosition;
-    const startTime = performance.now();
-    function scrollStep(currentTime) {
-        const elapsed = currentTime - startTime;
-        const progress = Math.min(elapsed / duration, 1);
-        const scrollY = startPosition + distance * progress;
-        if (progress < 1) {
-            window.scrollTo(0, scrollY);
-            requestAnimationFrame(scrollStep);
-        }
-        else {
-            window.scrollTo(0, targetPosition);
-        }
-    }
-    requestAnimationFrame(scrollStep);
-}
 
 const _defaults$8 = {
     edge: 'left',

diff --git a/dist/js/materialize.d.ts b/dist/js/materialize.d.ts
@@ -1379,32 +1379,16 @@ interface ScrollSpyOptions extends BaseOptions {
      * @default id => 'a[href="#' + id + '"]'
      */
     getActiveElement: (id: string) => string;
-    /**
-     * Used to keep last top element active even if
-     * scrollbar goes outside of scrollspy elements.
-     *
-     * If there is no last top element,
-     * then the active one will be first element.
-     *
-     * @default false
-     */
-    keepTopElementActive: boolean;
-    /**
-     * Used to set scroll animation duration in milliseconds.
-     * @default browser's native animation implementation/duration
-     */
-    animationDuration: number | null;
 }
 declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _elements: ScrollSpy[];
     static _count: number;
     static _increment: number;
+    tickId: number;
+    id: any;
     static _elementsInView: ScrollSpy[];
     static _visibleElements: any[];
     static _ticks: number;
-    static _keptTopActiveElement: HTMLElement | null;
-    private tickId;
-    private id;
     constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
     static get defaults(): ScrollSpyOptions;
     /**
@@ -1433,7 +1417,6 @@ declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
     _enter(): void;
     _exit(): void;
-    private _resetKeptTopActiveElementIfNeeded;
 }
 
 interface FormSelectOptions extends BaseOptions {

diff --git a/dist/js/materialize.js b/dist/js/materialize.js
@@ -4620,20 +4620,17 @@ var M = (function (exports) {
         throttle: 100,
         scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
         activeClass: 'active',
-        getActiveElement: (id) => { return 'a[href="#' + id + '"]'; },
-        keepTopElementActive: false,
-        animationDuration: null,
+        getActiveElement: (id) => { return 'a[href="#' + id + '"]'; }
     };
     class ScrollSpy extends Component {
         static _elements;
         static _count;
         static _increment;
+        tickId;
+        id;
         static _elementsInView;
         static _visibleElements;
         static _ticks;
-        static _keptTopActiveElement = null;
-        tickId;
-        id;
         constructor(el, options) {
             super(el, options, ScrollSpy);
             this.el.M_ScrollSpy = this;
@@ -4695,12 +4692,7 @@ var M = (function (exports) {
                 const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
                 if (trigger === x) {
                     e.preventDefault();
-                    if (!scrollspy.el.M_ScrollSpy.options.animationDuration) {
-                        scrollspy.el.scrollIntoView({ behavior: 'smooth' });
-                    }
-                    else {
-                        smoothScrollIntoView(scrollspy.el, scrollspy.el.M_ScrollSpy.options.animationDuration);
-                    }
+                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
                     break;
                 }
             }
@@ -4733,26 +4725,6 @@ var M = (function (exports) {
             }
             // remember elements in view for next tick
             ScrollSpy._elementsInView = intersections;
-            if (ScrollSpy._elements.length) {
-                const options = ScrollSpy._elements[0].el.M_ScrollSpy.options;
-                if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) {
-                    this._resetKeptTopActiveElementIfNeeded();
-                    const topElements = ScrollSpy._elements.filter(value => getDistanceToViewport(value.el) <= 0)
-                        .sort((a, b) => {
-                        const distanceA = getDistanceToViewport(a.el);
-                        const distanceB = getDistanceToViewport(b.el);
-                        if (distanceA < distanceB)
-                            return -1;
-                        if (distanceA > distanceB)
-                            return 1;
-                        return 0;
-                    });
-                    const nearestTopElement = topElements.length ? topElements[topElements.length - 1] : ScrollSpy._elements[0];
-                    const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
-                    actElem?.classList.add(options.activeClass);
-                    ScrollSpy._keptTopActiveElement = actElem;
-                }
-            }
         };
         static _offset(el) {
             const box = el.getBoundingClientRect();
@@ -4795,10 +4767,8 @@ var M = (function (exports) {
             else {
                 ScrollSpy._visibleElements.push(this.el);
             }
-            this._resetKeptTopActiveElementIfNeeded();
             const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
             document.querySelector(selector)?.classList.add(this.options.activeClass);
-            this._resetKeptTopActiveElementIfNeeded();
         }
         _exit() {
             ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
@@ -4810,16 +4780,9 @@ var M = (function (exports) {
                     // Check if empty
                     const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
                     document.querySelector(selector)?.classList.add(this.options.activeClass);
-                    this._resetKeptTopActiveElementIfNeeded();
                 }
             }
         }
-        _resetKeptTopActiveElementIfNeeded() {
-            if (ScrollSpy._keptTopActiveElement) {
-                ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass);
-                ScrollSpy._keptTopActiveElement = null;
-            }
-        }
         static {
             ScrollSpy._elements = [];
             ScrollSpy._elementsInView = [];
@@ -4829,30 +4792,6 @@ var M = (function (exports) {
             ScrollSpy._ticks = 0;
         }
     }
-    function getDistanceToViewport(element) {
-        const rect = element.getBoundingClientRect();
-        const distance = rect.top;
-        return distance;
-    }
-    function smoothScrollIntoView(element, duration = 300) {
-        const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
-        const startPosition = (window.scrollY || window.pageYOffset);
-        const distance = targetPosition - startPosition;
-        const startTime = performance.now();
-        function scrollStep(currentTime) {
-            const elapsed = currentTime - startTime;
-            const progress = Math.min(elapsed / duration, 1);
-            const scrollY = startPosition + distance * progress;
-            if (progress < 1) {
-                window.scrollTo(0, scrollY);
-                requestAnimationFrame(scrollStep);
-            }
-            else {
-                window.scrollTo(0, targetPosition);
-            }
-        }
-        requestAnimationFrame(scrollStep);
-    }
 
     const _defaults$8 = {
         edge: 'left',

diff --git a/dist/js/materialize.min.js b/dist/js/materialize.min.js