ember-waypoints v0.1.0
Ember Waypoints
Ember 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.
Status
Resources for jQuery Waypoints
Using
Installation
To install run the following:
ember install ember-waypoints
Usage
Simply use the {{waypoint}}
helper in your template:
{{#way-point on-up="viewedScrollingUp"}}
<p>This text is always displayed, the wrapping component simply provides
a way to interact with jquery-waypoints.</p>
{{/way-point}}
Actions
on-up
-- This is fired when a waypoint is viewed while scrollingup
. Receives the component instance as an argument.on-down
-- This is fired when a waypoint is viewed while scrollingdown
. 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:
{{#each pages as |page|}}
{{#way-point action=(action "setCurrentPage" page)}}
<div>
Using a closure action allows you to pass addional arguments to the action
</div>
{{/way-point}}
{{/each}}
actions: {
setCurrentPage(page, direction) {
// arguments provided by the closure action are passed in first
// followed by arguments provided by ember-waypoints
}
}
Configuration Options
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
triggerOnce
offset
contextElementId
(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):
<div id="container" style="height:100px; overflow-y:scroll;">
<div style="height:500px;">
{{#way-point contextElementId="container" offset="50" on-up="scrollingUp" on-down="scrollingDown"}}
<div>
The thing that triggers the waypoint actions to be fired when it reaches the top of the $('#container') element + a 50 pixel offset.
</div>
{{/way-point}}
</div>
</div>
Unit testing components
To unit test components that use the waypoint
helper in their
templates, make sure to add integration:true
to your moduleForComponent:
moduleForComponent('my-component-that-includes-a-waypoint', {
integration: true
});
Development of ember-waypoints
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
License
This library is licensed under the MIT License.