You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+40-7Lines changed: 40 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -188,7 +188,7 @@ const H = new Highway.Core({
188
188
});
189
189
```
190
190
191
-
Last but not least, you might want to use the same transition for all the pages across your website. This is possible by adding a `default` key to your transitions list. When you do so for each page **Highway** will look for a transition in the list related to your `router-view` name and fallback to the `default` one if none is found.
191
+
Finally you might want to use the same transition for all the pages across your website. This is possible by adding a `default` key to your transitions list. When you do so for each page **Highway** will look for a transition in the list related to your `router-view` name and fallback to the `default` one if none is found.
192
192
193
193
```javascript
194
194
// [...]
@@ -204,13 +204,46 @@ const H = new Highway.Core({
204
204
205
205
Check out the [**examples**](https://github.com/Dogstudio/highway#examples) for more details about transitions in **Highway**.
206
206
207
+
## Events
208
+
209
+
Last but not least, **Highway** extends [**tiny-emitter**](https://github.com/scottcorgan/tiny-emitter) to send events along the navigation process you can listen to in order to extend its capabilities. There are three events available for you:
210
+
211
+
-`NAVIGATE_START`: Trigger when a navigation starts.
212
+
-`NAVIGATE_END`: Trigger when a navigation ends.
213
+
-`NAVIGATE_ERROR`: Trigger when a error occurs in navigation process.
214
+
215
+
For the `NAVIGATE_START` and `NAVIGATE_END` events, some parameters are sent with the event in this order:
216
+
217
+
-`from`: The `router-view` from the page you come from.
218
+
-`to`: The `router-view` from the page you go to.
219
+
-`title`: The document title of the page you go to.
220
+
-`state`: The state of **Highway** that contains all the informations about the URL of the page you go to.
221
+
222
+
```javascript
223
+
// [...]
224
+
H.on('NAVIGATE_START', (from, to, title, state) => {
225
+
// [...]
226
+
});
227
+
228
+
H.on('NAVIGATE_END', (from, to, title, state) => {
229
+
// [...]
230
+
});
231
+
232
+
H.on('NAVIGATE_ERROR', () => {
233
+
// [...]
234
+
});
235
+
// [...]
236
+
```
237
+
238
+
Check out the [**Basic Menu Active**](https://github.com/Dogstudio/highway/tree/master/examples/basic-menu-active) example for more details about events handling in **Highway**.
0 commit comments