Hint scrollable elements

[gundisal-riqis]

Hello. i've just started giving a try to this browser. So i have a question:
Most pages have 1 or even 2 sidebar plus main content. All 3 are scrollable areas most of the time. I can't find a way to switch the focus to scroll in these areas. With browser extensions like vimium-c or surfingkey , i can hint those areas to switch focus. How can i do that with Glide?
Any help would be much appreciated!.
Thx.

[ian-h-chamberlain]

Figuring out how to select the scrollable elements might be the tricky part here (a brief search leads me to believe there's no builtin CSS selector like :scrollable or something), but something like this might get you started. I tested it on https://www.nushell.sh/book/ as an example of a docs site that has a sidebar:

glide.excmds.create({ name: "myhint" }, () => {
  glide.hints.show({
    selector: 'aside, #content > :first-of-type',
    action: async ({ content }) => {
      await content.execute((target) => target.focus())
    }
  })
})

You could probably also just reuse the same hints that you get normally from the hint picker by removing selector here, potentially filtering them with a pick callback.

[NonlinearFruit]

This is what I use (dotfiles):

glide.keymaps.set("normal", "gs", () => {
  glide.hints.show({
    selector: elements_that_could_scroll,
    pick: pick_elements_that_are_overflowing,
    action: scroll_to_element_and_focus
  });
}, { description: "[g]obsmacked find [s]crollable elements" });

const elements_that_could_scroll =  "div, section, article, aside, nav, ul, ol, pre, code, main, textarea, [class*='scroll']"

async function pick_elements_that_are_overflowing({ content, hints}) {
  const results = await content.map((element: HTMLElement) => {
    const style = window.getComputedStyle(element);

    const overflowY = style.overflowY;
    const overflowX = style.overflowX;
    const isScrollableStyle =
      (overflowY === 'auto' || overflowY === 'scroll') ||
      (overflowX === 'auto' || overflowX === 'scroll');

    const canScroll =
      element.scrollHeight > element.clientHeight ||
      element.scrollWidth > element.clientWidth;

    const hasScrollClass = element.className.includes("scroll");
    const isNotRoot = element !== document.body && element !== document.documentElement;

    return (isScrollableStyle || hasScrollClass) && canScroll && isNotRoot;
  });

  const filteredHints = hints.filter((_, i) => results[i]);

  if (filteredHints.length === 0) {
    glide.excmds.execute("hints_remove");
    glide.excmds.execute("mode_change normal");
  }

  return filteredHints;
}

async function scroll_to_element_and_focus({ content }) {
  await content.execute((element: HTMLElement) => {
    element.scrollIntoView({ block: "center", behavior: "smooth" });

    if (!element.hasAttribute("tabindex")) {
      element.setAttribute("tabindex", "-1");
    }
    element.focus();
  });
}