Add option to disable automatic anchor updates on user scroll

Author: nibsbin

example.py

@@ -69,14 +69,23 @@
  orientation="horizontal",
  force_anchor=force_settings)
 
-# 6. Retrieve active anchor
+# 6. Retrieve active anchor 
 with st.sidebar:
  st.subheader("Example 6")
  active_anchor = scroll_navbar(
  anchor_ids,
  key="navbar6",
  orientation="vertical")
  st.write(f"{active_anchor} is active in Example 6")
+ 
+# 7. Disable automatic active anchor updates
+with st.sidebar:
+ st.subheader("Example 7")
+ scroll_navbar(
+ anchor_ids=anchor_ids,
+ key="navbar7",
+ orientation="vertical",
+ auto_update_anchor=False)
 
 # Dummy page setup
 for anchor_id in anchor_ids:

streamlit_scroll_navigation/__init__.py

@@ -68,6 +68,7 @@ def scroll_navbar(
  force_anchor: str = None,
  orientation: Literal['vertical', 'horizontal'] = 'vertical',
  override_styles: Dict[str, str] = {},
+ auto_update_anchor: bool = True
  ) -> str:
  """
  Creates a scroll navigation bar component.
@@ -89,7 +90,11 @@ def scroll_navbar(
  Setting this will simulate clicking on an anchor. Defaults to None.
  orientation (Literal['vertical', 'horizontal'], optional):
  The orientation of the navigation bar. Defaults to 'vertical'.
- override_styles (Dict[str, str], optional): A dictionary of styles to override default styles. Defaults to {}.
+ override_styles (Dict[str, str], optional):
+ A dictionary of styles to override default styles. Defaults to {}.
+ auto_update_anchor (bool, optional):
+ If true, the highlighted anchor will automatically update to the next nearest anchor when the current one is scrolled out of view.
+ Defaults to true.
  Returns:
  str: The ID of the anchor that is currently selected.
  Example:
@@ -99,6 +104,7 @@ def scroll_navbar(
  for anchor in anchor_ids:
  st.subheader(anchor,anchor=anchor)
  st.write(["content "]*100)
+ 
  # Add a scroll navigation bar for anchors
  from screamlit_scroll_navigation import scroll_navbar
  with st.sidebar():
@@ -115,5 +121,6 @@ def scroll_navbar(
  force_anchor=force_anchor,
  orientation=orientation,
  override_styles=override_styles,
+ auto_update_anchor=auto_update_anchor
  )
  return component_value

streamlit_scroll_navigation/frontend/public/CrossOriginInterface.js

@@ -15,10 +15,16 @@ class CrossOriginInterface {
  this.anchorVisibleStates = {};
  this.activeAnchorId = null;
  this.component = null;
+ this.autoUpdateAnchor = false;
  this.key = key;
  window.addEventListener("message", this.handleMessage.bind(this));
  }
- 
+
+ register(component, autoUpdateAnchor) {
+ this.component = component;
+ this.autoUpdateAnchor = autoUpdateAnchor;
+ console.debug('Registered component', component, autoUpdateAnchor);
+ }
  scroll(anchorId) {
  const element = document.getElementById(anchorId);
  console.debug('Scrolling to', anchorId); 
@@ -162,7 +168,8 @@ class CrossOriginInterface {
  //If component is not registered, only allow registration method
  if (this.component === null) {
  if (COI_method === 'register') {
- this.component = event.source;
+ const {auto_update_anchor} = event.data;
+ this.register(event.source, auto_update_anchor);
  }
  else {
  console.error('Must register component with this CrossOriginInterface before calling other methods');

streamlit_scroll_navigation/frontend/src/ScrollNavigationBar.tsx

@@ -17,7 +17,12 @@ class ScrollNavigationBar extends StreamlitComponentBase<State> {
  public state = { activeAnchorId: "" };
 
  // Send message to COI
- postMessage(COI_method: string, data?: { anchor_id?: string; anchor_ids?: string[] }) {
+ postMessage(COI_method: string,
+ data?: {
+ anchor_id?: string;
+ anchor_ids?:string[];
+ auto_update_anchor?: boolean
+ }): void {
  const { key } = this.props.args;
  if (key == null || typeof key !== "string") {
  throw new Error("Invalid key: key must be a string.");
@@ -27,21 +32,23 @@ class ScrollNavigationBar extends StreamlitComponentBase<State> {
  window.parent.postMessage({ COI_method, key, anchor_id, anchor_ids }, "*");
  }
 
+ postRegister(auto_update_anchor:boolean): void {
+ this.postMessage("register", { auto_update_anchor } );
+ console.debug("postRegister");
+ }
  postScroll(anchor_id: string): void {
  this.postMessage("scroll", { anchor_id });
  console.debug("postScroll", anchor_id);
  }
- postRegister(): void {
- this.postMessage("register");
- console.debug("postRegister");
- }
  postTrackAnchors(anchor_ids: string[]): void {
  this.postMessage("trackAnchors", { anchor_ids });
  console.debug("postTrackAnchors", anchor_ids);
  }
  postUpdateActiveAnchor(anchor_id: string): void {
- this.postMessage("updateActiveAnchor", { anchor_id });
- console.debug("postUpdateActiveAnchor", anchor_id);
+ const { auto_update_anchor } = this.getCleanedArgs();
+ if (auto_update_anchor)
+ this.postMessage("updateActiveAnchor", { anchor_id });
+ console.debug("postUpdateActiveAnchor", anchor_id, "; autoupdate", auto_update_anchor);
  }
 
  // Handle menu item click
@@ -58,11 +65,11 @@ class ScrollNavigationBar extends StreamlitComponentBase<State> {
  };
 
  public componentDidMount(): void {
- const { anchor_ids } = this.getCleanedArgs();
+ const { anchor_ids, auto_update_anchor } = this.getCleanedArgs();
  const initialAnchorId = anchor_ids[0];
 
  // Register component
- this.postRegister();
+ this.postRegister(auto_update_anchor);
  // Tell COI to track anchors for visibility
  this.postTrackAnchors(anchor_ids);
  // Set initial active anchor for component and COI
@@ -114,7 +121,7 @@ class ScrollNavigationBar extends StreamlitComponentBase<State> {
  }
 
  private getCleanedArgs() {
- let { key, anchor_ids, anchor_labels, anchor_icons, force_anchor, orientation, override_styles } = this.props.args;
+ let { key, anchor_ids, anchor_labels, anchor_icons, force_anchor, orientation, override_styles, auto_update_anchor} = this.props.args;
  //key is required
  if (key == null || typeof key !== "string") {
  throw new Error("Invalid key: key must be a string.");
@@ -175,7 +182,18 @@ class ScrollNavigationBar extends StreamlitComponentBase<State> {
  }
  }
 
- return { anchor_ids, anchor_labels, anchor_icons, force_anchor, key, orientation, override_styles };
+ //auto_update_active is an optional boolean
+ //If not provided, default to true
+ //If provided, it must be a boolean
+ if (auto_update_anchor == null) {
+ auto_update_anchor = true;
+ } else {
+ if (typeof auto_update_anchor !== "boolean") {
+ throw new Error("Invalid auto_update_anchor: auto_update_anchor must be a boolean.");
+ }
+ }
+
+ return { anchor_ids, anchor_labels, anchor_icons, force_anchor, key, orientation, override_styles, auto_update_anchor };
  }
 
  static getBiName(icon: string) {
@@ -228,8 +246,6 @@ class ScrollNavigationBar extends StreamlitComponentBase<State> {
  e.currentTarget.style.color = newStyle.color || "";
  }}
  >
- {/* Render Bootstrap icon if provided */}
-
  <span>
  {anchor_icons && anchor_icons[index] && (
  <i className={`${ScrollNavigationBar.getBiName(anchor_icons[index])}`}