Would there be interest to implement a link/1 that gives to option to operate on other events?
So I implemented a simple link/1 function that instead of working on click works on mousedown (or whatever you want, based on a hook).
Just took a look at Lieview code, copied the link/1 function, and added a hook onmount that calls click which, based on also Lieview code, already has an event and event checks for if(this.pendingLink === href) {return;} so I don’t need to prevent the next click event after the mouse is lifted. Works really well.
attr :id, :string, required: true
attr :navigate, :string
attr :patch, :string
attr :href, :any
attr :replace, :boolean, default: false
attr :method, :string, default: "get"
attr :csrf_token, :any, default: true
attr :rest, :global, include: ~w(download hreflang referrerpolicy rel target type)
slot :inner_block, required: true
def fast_link(%{navigate: to} = assigns) when is_binary(to) do
~H"""
<a
id={@id}
href={@navigate}
data-phx-link="redirect"
data-phx-link-state={if @replace, do: "replace", else: "push"}
phx-hook="FastLink"
{@rest}
>
<%= render_slot(@inner_block) %>
</a>
"""
end
Repeat the others for push and href.
The hook is just:
export const FastLink = {
mounted() {
const linkEl = this.el;
linkEl.addEventListener("mousedown", (e) => {
e.preventDefault();
e.stopImmediatePropagation();
linkEl.click();
});
},
};
