forked from Dogstudio/highway
-
Notifications
You must be signed in to change notification settings - Fork 0
/
api.html
147 lines (139 loc) · 7.82 KB
/
api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
---
slug: api
title: Highway - API Reference
layout: default
next_url: examples/disable.html
next_label: Examples
---
<h1>API</h1>
<h2>Hooks/Methods</h2>
<h3 id="renderers"><a href="#renderers">Renderers</a></h3>
<p>Renderers have a number of hooks/methods available to structure them and call pieces of Javascript at key moments on navigation. Read more of the <a href="{{ site.url }}/get-started.html#renderers">documentation</a> about renderers.</p>
<div class="table-wrapper">
<table cellpadding="0" cellspacing="0">
<tr>
<th width="25%">Methods</th>
<th>Details</th>
</tr>
<tr>
<td><code>onEnter()</code></td>
<td>This method in the renderer is run when the <code>data-router-view</code> is added to the DOM Tree.</td>
</tr>
<tr>
<td><code>onLeave()</code></td>
<td>This method in the renderer is run when transition to hide the <code>data-router-view</code> is called.</td>
</tr>
<tr>
<td><code>onEnterCompleted()</code></td>
<td>This method in the renderer is run when the transition to display the <code>data-router-view</code> is done.</td>
</tr>
<tr>
<td><code>onLeaveCompleted()</code></td>
<td>This method in the renderer is run when the <code>data-router-view</code> is removed from the DOM Tree.</td>
</tr>
</table>
</div>
<h3 id="transitions"><a href="#transitions">Transitions</a></h3>
<p>Transitions have a number of hooks/methods available to manage which animations should be run to display a page and which one should be run to hide it. Read more of the <a href="{{ site.url }}/get-started.html#transitions">documentation</a> about transitions.</p>
<div class="table-wrapper">
<table cellpadding="0" cellspacing="0">
<tr>
<th width="30%">Methods</th>
<th width="25%">Method Parameters</th>
<th>Details</th>
</tr>
<tr>
<td><code>in({ from, to, trigger, done })</code></td>
<td>
<code>to | <Node></code><br>
<code>from | <Node></code><br>
<code>done | <Callback></code><br>
<code>trigger | <Node|String></code>
</td>
<td>
<p>This method is called to display the <code>data-router-view</code> under the <code>to</code> parameter and, for overlaping transitions only, to hide the <code>data-router-view</code> under the <code>from</code> parameter. Once the animation is over the <code>done()</code> callback <strong>has to be called</strong> to continue the navigation process.</p>
<p>The <code>trigger</code> parameter contains either the link triggering the transition, <code>popstate</code> when the back/forward button of the browser triggers the transition or <code>script</code> for programmatical redirection.</p>
</td>
</tr>
<tr>
<td><code>out({ from, trigger, done })</code></td>
<td>
<code>from | <Node></code><br>
<code>done | <Callback></code><br>
<code>trigger | <Node|String></code>
</td>
<td>
<p>This method is called to hide the <code>data-router-view</code> under the <code>from</code> parameter. Once the animation is over the <code>done()</code> callback <strong>has to be called</strong> to continue the navigation process.</p>
<p>The <code>trigger</code> parameter contains either the link triggering the transition, <code>popstate</code> when the back/forward button of the browser triggers the transition or <code>script</code> for programmatical redirection.</p>
</td>
</tr>
</table>
</div>
<h3 id="core"><a href="#core">Core</a></h3>
<p><code>Highway.Core</code> comes with some built-in and useful methods developers can have access to once it has been called with <code>new Highway.Core()</code>. Read more of the <a href="{{ site.url }}/get-started.html#core">documentation</a> about the core of Highway.</p>
<div class="table-wrapper">
<table cellpadding="0" cellspacing="0">
<tr>
<th width="25%">Methods</th>
<th width="25%">Method Parameters</th>
<th>Details</th>
</tr>
<tr>
<td><code>attach(links)</code></td>
<td><code>links | <Array|NodeList></code></td>
<td>All links on a page that don't have the <code>target</code> attribute or the <code>data-router-disabled</code> attribute are attached to Highway by default. This methods can be used to programatically attach links to Highway.</td>
</tr>
<tr>
<td><code>detach(links)</code></td>
<td><code>links | <Array|NodeList></code></td>
<td>All links in a <code>data-router-view</code> that is hidden are detached from Highway by default. This methods can be used to programatically detach links from Highway.</td>
</tr>
<tr>
<td><code>redirect(href, transition)</code></td>
<td>
<code>href | <String></code><br>
<code>transition | <Transition></code>
</td>
<td>This method can be used to programatically redirect to an internal page with Highway. A transition extending <code>Highway.Transition</code> can be <strong>optionally</strong> added to the method to override the transition related to the page. The transition related to the page will be used if no transition is added to this method.</td>
</tr>
</table>
</div>
<h2 id="events"><a href="#events">Events</a></h2>
<p><code>Highway.Core</code> extends <a href="https://github.com/scottcorgan/tiny-emitter#readme" target="_blank">tiny-emitter</a> so it gives developers access to all the <a href="https://github.com/scottcorgan/tiny-emitter#instance-methods" target="_blank">methods</a> from <em>tiny-emitter</em>. Those methods can be used to listen to the following events sent by Highway in the navigation process.</p>
<div class="table-wrapper">
<table cellpadding="0" cellspacing="0">
<tr>
<th width="25%">Events</th>
<th width="25%">Callback Parameters</th>
<th>Details</th>
</tr>
<tr>
<td><code>NAVIGATE_IN</code></td>
<td>
<code>to | <Node></code><br>
<code>trigger | <Node|String></code><br>
<code>location | <Object></code>
</td>
<td>This event is sent everytime a <code>data-router-view</code> is added to the DOM Tree. The callback method of the event gets an <code>Object</code> as a parameter that contains the <code>data-router-view</code> under the <code>to</code> key, the triggered element under the <code>trigger</code> key and all the URL informations under the <code>location</code> key.</td>
</tr>
<tr>
<td><code>NAVIGATE_OUT</code></td>
<td>
<code>from | <Node></code><br>
<code>trigger | <Node|String></code><br>
<code>location | <Object></code>
</td>
<td>This event is sent everytime the <code>out()</code> method of a transition is run to hide a <code>data-router-view</code>. The callback method of the event gets an <code>Object</code> as a parameter that contains the <code>data-router-view</code> under the <code>from</code> key, the triggered element under the <code>trigger</code> key and all the URL informations under the <code>location</code> key.</td>
</tr>
<tr>
<td><code>NAVIGATE_END</code></td>
<td>
<code>to | <Node></code><br>
<code>from | <Node></code><br>
<code>trigger | <Node|String></code><br>
<code>location | <Object></code>
</td>
<td>This event is sent everytime the <code>done()</code> method is called in the <code>in()</code> method of a transition. The callback method of the event gets an <code>Object</code> as a parameter that contains the new <code>data-router-view</code> under the <code>to</code> key, the old <code>data-router-view</code> under the <code>from</code> key, the triggered element under the <code>trigger</code> key and all the URL informations under the <code>location</code> key.</td>
</tr>
</table>
</div>