feat(pat navigation): Implement scroll-trigger-selector option.

Define the CSS selector which is used to find navigation links with hash
URLs. The default is "a[href^='#'].scroll-marker" which would find all anchor
elements which href starts with a "#" sign and have the class
scroll-marker.
The restriction on scroll-marker allows for other hash-urls in the same
navigation - e.g. a pat-tooltip which references a local content.
If you set it to "none" the scroll marker functionality is not activated.

Author: thet

src/pat/navigation/documentation.md

@@ -36,4 +36,5 @@ The available options are:
 | scrill-item-side        | `top`                        | `top`, `bottom`, `middle`, `auto`        | Side of element that scrolls. This is used to calculate the current item. The defined side of the element will be used to calculate the distance baseline. If this is set to "auto" then one of the "top" or "bottom" positions are used, depending on which one is nearer to the distance baseline. |
 | scrill-item-distance    | `50%`                        | CSS length (px, %, vw, vh, vmin or vmax) | Distance from side of scroll box. any amount in px, %, vw, vh, vmin or vmax. This is used to calculate the current item. The nearest element to the distance-baseline measured from the top of the container will get the current class. |
 | scrill-item-visibility  |                              | `none`, `most-visible`                   | Visibility of element in scroll box. This is used to calculate the current item. If "most-visible" is set, the element which is most visible in the scroll container gets the current class. If more elements have the same visibility ratio, the other conditions are used to calculate the current one. |
+| scroll-trigger-selector | `a[href^='#'].scroll-marker` | CSS selector, `none`                     | Selects the element within the pat-navigation container that should get a class current while scrolling, when applicable. |
 

src/pat/navigation/navigation.js

@@ -20,6 +20,7 @@ parser.addArgument("current-content-class", "navigation-current");
 parser.addArgument("scroll-item-side", "top", ["top", "bottom", "middle", "auto"]);
 parser.addArgument("scroll-item-distance", "50%");
 parser.addArgument("scroll-item-visibility", null, [null, "none", "most-visible"]);
+parser.addArgument("scroll-trigger-selector", "a[href^='#'].scroll-marker");
 
 class Pattern extends BasePattern {
     static name = "navigation";
@@ -34,25 +35,28 @@ class Pattern extends BasePattern {
         this.init_listeners();
         this.init_markings();
 
-        this.scroll_marker = new ScrollMarker(this.el, {
-            "current-class": this.options["current-class"],
-            "current-content-class": this.options["current-content-class"],
-            "in-view-class": this.options["in-view-class"],
-            "side": this.options["scroll-item-side"],
-            "distance": this.options["scroll-item-distance"],
-            "visibility": this.options["scroll-item-visibility"],
-        });
+        if (utils.is_option_truthy(this.options["scroll-trigger-selector"])) {
+            this.scroll_marker = new ScrollMarker(this.el, {
+                "current-class": this.options["current-class"],
+                "current-content-class": this.options["current-content-class"],
+                "in-view-class": this.options["in-view-class"],
+                "side": this.options["scroll-item-side"],
+                "distance": this.options["scroll-item-distance"],
+                "visibility": this.options["scroll-item-visibility"],
+                "selector": this.options["scroll-trigger-selector"],
+            });
 
-        this.debounced_scroll_marker_enabler = utils.debounce(() => {
-            log.debug("Enable scroll-marker.");
-            this.scroll_marker.set_current_disabled = false;
-            events.remove_event_listener(
-                this.scroll_marker.scroll_container === window
-                    ? document
-                    : this.scroll_marker.scroll_container,
-                "pat-navigation__scroll_marker_enable"
-            );
-        }, 200);
+            this.debounced_scroll_marker_enabler = utils.debounce(() => {
+                log.debug("Enable scroll-marker.");
+                this.scroll_marker.set_current_disabled = false;
+                events.remove_event_listener(
+                    this.scroll_marker.scroll_container === window
+                        ? document
+                        : this.scroll_marker.scroll_container,
+                    "pat-navigation__scroll_marker_enable"
+                );
+            }, 200);
+        }
     }
 
     /**
@@ -72,6 +76,12 @@ class Pattern extends BasePattern {
                     // Mark the current item
                     this.mark_current(ev.target);
 
+                    if (
+                        !utils.is_option_truthy(this.options["scroll-trigger-selector"])
+                    ) {
+                        // Don't do the scroll-marker stuff below, if it is disabled by the settings.
+                        return;
+                    }
                     // Disable scroll marker to set the current class after
                     // clicking in the menu and scrolling to the target.
                     log.debug("Disable scroll-marker.");