ea

ember-anchor

Support for an #anchor like construct, in ember.js apps

Showing:

Popularity

Downloads/wk

104

GitHub Stars

31

Maintenance

Last Commit

2d ago

Contributors

7

Package

Dependencies

2

Size (min+gzip)

1.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ember-anchor

Build Status NPM Version Code Climate

Installation

ember install ember-anchor

The easiest way to use ember-anchor is to setup a controller with a queryParam, and bind it to the {{ember-anchor}} component.

Add this component to the template corresponding to the controller or route where your queryParams may live, passing in the queryParam to be used as your "anchor" param, to the component as property a.

app/templates/application.hbs
{{ember-anchor a=anc}}

On your controller, add a mixin that allows us to use a queryParam like a #hash.

app/controllers/application.js
import Ember from 'ember';
import ControllerSupport from 'ember-anchor/mixins/controller-support';

export default Ember.Controller.extend(ControllerSupport, {
  queryParams: ['anc'],
  anc: 'first'
});

Now you may build links with a queryParam, and add "anchors" to arbitrary elements in the page, which can be scrolled to.

app/templates/index.hbs

{{link-to 'Go to First' 'index'
  (query-params anc='first') }}
{{link-to 'Go to Second' 'index'
  (query-params anc='second') }}
{{link-to 'Go to Third' 'index'
  (query-params anc='third') }}



<h5 data-anchor='first'></h5>
<h5 data-anchor='second'></h5>
<h5 data-anchor='third'></h5>

Legacy Use (With Ember.View)

And on your view, add a mixin that scrolls the page to the appropriate position, based on a queryParam, and in response to queryParam changes

app/views/index.js
import Ember from 'ember';
import ViewSupport from 'ember-anchor/mixins/view-support';

export default Ember.View.extend(ViewSupport, {

});

Build links in the same way as described above

Advanced Configuration

One View

You can customize the queryParam used for anchors on a single view, by overriding the anchorQueryParam property on both the controller and view

app/controllers/customized.js
import Ember from 'ember';
import ControllerSupport from 'ember-anchor/mixins/controller-support';

export default Ember.Controller.extend(ControllerSupport, {
  anchorQueryParam: 'custom',
  queryParams: ['custom'],
  custom: 'first'
});

app/views/customized.js
import Ember from 'ember';
import ViewSupport from 'ember-anchor/mixins/view-support';

export default Ember.View.extend(ViewSupport, {
  anchorQueryParam: 'custom'
});

You should then build your links, and add your data-* attributes as follows

<!-- Build your link /?custom=first -->
{{link-to 'Go to First' 'index'
  (query-params custom='first') }}

<!-- Will be scrolled into view, when above link is clicked -->
<h5 data-custom='first'></h5>

Application Wide

If you wish to use a different queryParam other than anchor, as the application-wide default you can configure this addon as follows

app/configure/environment.js

var ENV = {
  ...
  emberAnchor: {
    anchorQueryParam: 'a'
  },
  ...
};
...
return ENV;

You should then build your links, and add your data-* attributes as follows

<!-- Build your link /?a=first -->
{{link-to 'Go to First' 'index'
  (query-params a='first') }}

<!-- Will be scrolled into view, when above link is clicked -->
<h5 data-a='first'></h5>

Installation

  • git clone this repository
  • npm 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/.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial