The default blueprint for ember-cli addons.
npm install ember-waypointsEmber Waypoints is an easy way to consume the jQuery Waypoints library within an Ember application.
It is initially published as an Ember CLI addon, but could have a standalone (aka globals based)
if folks are interested.
* Website
* Getting Started Guide
* API Documentation
To install run the following:
``javascript`
ember install ember-waypoints
Simply use the {{waypoint}} helper in your template:
` This text is always displayed, the wrapping component simply provideshandlebars`
{{#way-point on-up="viewedScrollingUp"}}
a way to interact with jquery-waypoints.
{{/way-point}}
* on-up -- This is fired when a waypoint is viewed while scrolling up. Receives the component instance as an argument.on-down
* -- This is fired when a waypoint is viewed while scrolling down. Receives the component instance as an argument.action
* -- This is fired when a waypoitn is viewed in either direction. Receives the direction ("down" or "up") and the component instance.
You can pass arguments to the fired action by using Ember's closure actions. The closure action arguments will proceed the arguments passed in by ember-waypoints:
`handlebars`
{{#each pages as |page|}}
{{#way-point action=(action "setCurrentPage" page)}}
Using a closure action allows you to pass addional arguments to the action
{{/way-point}}
{{/each}}
`javascript`
actions: {
setCurrentPage(page, direction) {
// arguments provided by the closure action are passed in first
// followed by arguments provided by ember-waypoints
}
}
The majority of the jquery-waypoints configuration API is available for use. Simply provide one of the following options
and it will be used for waypoint being created:
* horizontal
*
*
* (in place of context)continuous
*
An example of using a way point with a context (where you want to have the way point be based upon a "container" div offset instead of the body offset):
`handlebars`
{{#way-point contextElementId="container" offset="50" on-up="scrollingUp" on-down="scrollingDown"}}
The thing that triggers the waypoint actions to be fired when it reaches the top of the $('#container') element + a 50 pixel offset.
{{/way-point}}
To unit test components that use the waypoint helper in theirintegration:true
templates, make sure to add to your moduleForComponent:
`javascript`
moduleForComponent('my-component-that-includes-a-waypoint', {
integration: true
});
* git clone this repositorynpm install
*
*
* ember server
* Visit your app at http://localhost:4200.
* ember test
*
* ember build`
For more information on using ember-cli, visit http://www.ember-cli.com/.
This library is licensed under the MIT License.