yo! I’ve made my first HA card, this one is more of a utility so you can organize your dashboards.
this card places anchors on your dashboard so you can use URL params to navigate to specific spots, like /lovelace/kitchen?anchor=lights. Tried my best to make it customizable, all info in the repo:
I think I’ve missed something. I can get this to work with dashboards, but not with views - for example, this works:
tap_action:
action: navigate
navigation_path: /lovelace?anchor=study
…but this doesn’t:
tap_action:
action: navigate
navigation_path: /lovelace/test?anchor=study
/lovelace is my default dashboard - haven’t tried it with any others yet.
Edit: Should have said, the button I’m navigating from is in /lovelace/test, so it’s navigating to an anchor in the same view.
Oh, I see. This is a limitation I haven’t thought of, sorry! The current implementation only checks if it should scroll based on the visibility of its parent. It’ll scroll when it first goes into view. Basically I got JavaScript’d and this was the best solution (AFAIK). But this means that navigating within the same view is not possible. I will try to fix this in the upcoming days, appreciate the feedback.
Rewrote the logic, it should be possible to scroll within the same page now! Also the card is no longer dependent on the parent.
nerd explanation: I was able to intercept the history.pushState and history.replaceState methods to call a custom event for location change detection. Home Assistant uses these for navigation. Before, I was only trying to listen to the popstate event, which doesn’t get called this way.
Hi, thanks for making this. A bit off topic, but what are you using for these room cards in your example gif?
