mirror of
https://github.com/metosin/reitit.git
synced 2025-12-18 08:51:12 +00:00
Add ignore-anchor-click function
This commit is contained in:
parent
b50b44cced
commit
5ffb9fc59f
2 changed files with 39 additions and 4 deletions
|
|
@ -18,6 +18,29 @@ request to the server. This means the URL will look normal, but the downside is
|
||||||
that the server must respond to all routes with correct file (`index.html`).
|
that the server must respond to all routes with correct file (`index.html`).
|
||||||
Check examples for simple Ring handler example.
|
Check examples for simple Ring handler example.
|
||||||
|
|
||||||
|
### Anchor click handling
|
||||||
|
|
||||||
|
HTML5 History router will handle click events on anchors where the href
|
||||||
|
matches the route tree (and other [rules](../../modules/reitit-frontend/src/reitit/frontend/history.cljs#L84-L98)).
|
||||||
|
If you have need to control this logic, for example to handle some
|
||||||
|
anchor clicks where the href matches route tree normally (i.e. browser load)
|
||||||
|
you can provide `:ignore-anchor-click` function to add your own logic to
|
||||||
|
event handling:
|
||||||
|
|
||||||
|
```clj
|
||||||
|
(rfe/start!
|
||||||
|
router
|
||||||
|
{:use-fragment false
|
||||||
|
:ignore-anchor-click (fn [e el]
|
||||||
|
(not= "false" (gobj/get (.-dataset el) "reititHandleClick")))})
|
||||||
|
|
||||||
|
;; Use data-reitit-handle-click to disable Reitit anchor handling
|
||||||
|
[:a
|
||||||
|
{:href (rfe/href ::about)
|
||||||
|
:data-reitit-handle-click false}
|
||||||
|
"About"]
|
||||||
|
```
|
||||||
|
|
||||||
## Easy
|
## Easy
|
||||||
|
|
||||||
Reitit frontend routers require storing the state somewhere and passing it to
|
Reitit frontend routers require storing the state somewhere and passing it to
|
||||||
|
|
|
||||||
|
|
@ -78,6 +78,9 @@
|
||||||
(if (exists? js/location)
|
(if (exists? js/location)
|
||||||
(.getDomain (.parse Uri js/location)))
|
(.getDomain (.parse Uri js/location)))
|
||||||
|
|
||||||
|
ignore-anchor-click-fn (or (:ignore-anchor-click this)
|
||||||
|
(constantly true))
|
||||||
|
|
||||||
;; Prevent document load when clicking a elements, if the href points to URL that is part
|
;; Prevent document load when clicking a elements, if the href points to URL that is part
|
||||||
;; of the routing tree."
|
;; of the routing tree."
|
||||||
ignore-anchor-click
|
ignore-anchor-click
|
||||||
|
|
@ -99,6 +102,7 @@
|
||||||
;; isContentEditable property is inherited from parents,
|
;; isContentEditable property is inherited from parents,
|
||||||
;; so if the anchor is inside contenteditable div, the property will be true.
|
;; so if the anchor is inside contenteditable div, the property will be true.
|
||||||
(not (.-isContentEditable el))
|
(not (.-isContentEditable el))
|
||||||
|
(ignore-anchor-click-fn e el)
|
||||||
(reitit/match-by-path router (.getPath uri)))
|
(reitit/match-by-path router (.getPath uri)))
|
||||||
(.preventDefault e)
|
(.preventDefault e)
|
||||||
(let [path (str (.getPath uri)
|
(let [path (str (.getPath uri)
|
||||||
|
|
@ -134,15 +138,23 @@
|
||||||
- on-navigate Function to be called when route changes. Takes two parameters, ´match´ and ´history´ object.
|
- on-navigate Function to be called when route changes. Takes two parameters, ´match´ and ´history´ object.
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
- :use-fragment (default true) If true, onhashchange and location hash are used to store current route."
|
- :use-fragment (default true) If true, onhashchange and location hash are used to store current route.
|
||||||
|
|
||||||
|
Options (Html5History):
|
||||||
|
- :ignore-anchor-click Function (event, anchor element) to check if Reitit
|
||||||
|
should handle click events on the anchor element. By default
|
||||||
|
hrefs matching the route tree are handled by Reitit."
|
||||||
([router on-navigate]
|
([router on-navigate]
|
||||||
(start! router on-navigate nil))
|
(start! router on-navigate nil))
|
||||||
([router
|
([router
|
||||||
on-navigate
|
on-navigate
|
||||||
{:keys [use-fragment]
|
{:keys [use-fragment]
|
||||||
:or {use-fragment true}}]
|
:or {use-fragment true}
|
||||||
(let [opts {:router router
|
:as opts}]
|
||||||
:on-navigate on-navigate}]
|
(let [opts (-> opts
|
||||||
|
(dissoc :use-fragment)
|
||||||
|
(assoc :router router
|
||||||
|
:on-navigate on-navigate))]
|
||||||
(-init (if use-fragment
|
(-init (if use-fragment
|
||||||
(map->FragmentHistory opts)
|
(map->FragmentHistory opts)
|
||||||
(map->Html5History opts))))))
|
(map->Html5History opts))))))
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue