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
**Highway** is a *robust*, *modern* and *flexible* library that will let you create **AJAX navigations** with beautiful **transitions** on your websites. It's been a while we were trying to build this kind of library to fits our needs at [**Dogstudio**](https://www.dogstudio.co) and that hopefully will fit yours now we're releasing it!
12
+
**Highway** is a *lightweight (**1.95ko** gzipped)*, *robust*, *modern* and *flexible* library that will let you create **AJAX navigations** with beautiful **transitions** on your websites. It's been a while we were trying to build this kind of library to fits our needs at [**Dogstudio**](https://www.dogstudio.co) and that hopefully will fit yours now we're releasing it!
@@ -45,10 +46,6 @@ First let's *import* **Highway**:
45
46
```javascript
46
47
importHighwayfrom'@dogstudio/highway';
47
48
```
48
-
or *require* it if you prefer:
49
-
```javascript
50
-
constHighway=require('@dogstudio/highway');
51
-
```
52
49
53
50
Now **Highway** is available you need to create an instance of `Highway.Core` and give it your [**renderers**](https://github.com/Dogstudio/highway#renderers) and [**transitions**](https://github.com/Dogstudio/highway#transitions).
54
51
@@ -109,7 +106,7 @@ About your HTML this is actually pretty simple... Remember the `router-view` you
109
106
110
107
### Javascript
111
108
112
-
On the Javascript-side it's again pretty simple... What you need to do is to create a custom renderer for your page that will extend `Highway.Renderer` and enable all the required methods in order to make you custom renderer work.
109
+
On the Javascript-side it's again pretty simple... What you need to do is to create a custom renderer for your page that will extend `Highway.Renderer` and enable all the required methods in order to make your custom renderer work.
113
110
114
111
**home.js**
115
112
```javascript
@@ -135,7 +132,6 @@ Besides the required methods from **Highway** present in the `Highway.Renderer`
135
132
136
133
-`this.page`: The full DOM of the page related to the renderer.
137
134
-`this.view`: The `[router-view]` of the page related to the renderer.
138
-
-`this.title`: The `document.title` of the page related to the renderer.
139
135
140
136
**home.js**
141
137
```javascript
@@ -154,7 +150,7 @@ export default Home;
154
150
```
155
151
156
152
Now your custom renderer is created you need to add it to the renderers list of `Highway.Core`...
157
-
Remember the name you gave to you`router-view`, it's now time to relate it to your custom renderer.
153
+
Remember the name you gave to your`router-view`, it's now time to relate it to your custom renderer.
158
154
159
155
```javascript
160
156
// Import Renderers
@@ -181,7 +177,7 @@ Transitions in **Highway** are really simple, you need to extend `Highway.Transi
181
177
-`in`: The `in` method should contain the transition to show a `[router-view]`.
182
178
-`out`: The `out` method should contain the transition to hide a `[router-view]`.
183
179
184
-
Each one get two parameters you can call howewer you want but here are good defaults:
180
+
Each one get two parameters you can name howewer you want but here are good defaults:
185
181
186
182
-`view`: The `[router-view]` you will show/hide.
187
183
-`done`: The callback method **you have to** call once the `in` and `out` transitions are over.
@@ -289,16 +285,29 @@ Check out the [**Basic Menu Active**](https://github.com/Dogstudio/highway/tree/
-[**Basic Google Analytics Events**](https://github.com/Dogstudio/highway/tree/master/examples/basic-google-analytics)
291
287
288
+
## Support
289
+
290
+
Note that **Highway** uses modern features because we wanted it to be *modern*. This means some browser might not support some of these modern features and you'll have to add a polyfill to your projects like [**babel-polyfill**](https://babeljs.io/docs/usage/polyfill/) or transpile your code to ES5 using tools like [**Webpack**](https://webpack.js.org/). This is a non-exhaustive list of modern features used in **Highway**:
0 commit comments