Expose the child link selector

While probably a rare case, expose the selector used to find child
links. That way if folks are using `<button>`s instead, they could
update the `linkSelector`. Also added tests for this and updated the
README.

README.md

@@ -26,11 +26,12 @@ Produces (roughly) the markup:
 
 There are several options available to adjust functionality:
 
-| Option        | Default      | Description                                                     |
-|---------------|--------------|-----------------------------------------------------------------|
-| tagName       | 'li'         | Components HTML tag name                                        |
-| activeClass   | _Computed_** | Class name to apply when any child `{{link-to}}` is also active |
-| disabledClass | _Computed_** | Class name to apply when ALL child `{{link-to}}`'s are disabled |
+| Option        | Default        | Description                                                     |
+|---------------|----------------|-----------------------------------------------------------------|
+| tagName       | 'li'           | Components HTML tag name                                        |
+| linkSelector  | 'a.ember-view' | jQuery selector for child `{{link-to}}`'s                       |
+| activeClass   | _Computed_**   | Class name to apply when any child `{{link-to}}` is also active |
+| disabledClass | _Computed_**   | Class name to apply when ALL child `{{link-to}}`'s are disabled |
 
 ** Default class names are pulled from the child `{{link-to}}`,
 which in turn defaults to 'active'. You can change it on either
@@ -92,6 +93,22 @@ even if child `{{link-to}}`'s are active/disabled.
 </li>
 ```
 
+If the child `{{link-to}}`'s have their `tagName` changed,
+be sure to adjust the selector. Always include the `.ember-view`
+class since all link-to's apply that class.
+
+```hbs
+{{#active-link linkSelector="button.ember-view"}}
+  {{link-to "Index" "index" tagName="button"}}
+{{/active-link}}
+```
+
+```html
+<li class="active">
+    <button class="active">Index</button>
+</li>
+```
+
 This wrapper is also very useful as a container of a dropdown.
 Here is an example of a bootstrap dropdown within a navbar.
 

addon/components/active-link.js

@@ -3,6 +3,7 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   tagName: 'li',
   classNameBindings: ['_active','_disabled'],
+  linkSelector: 'a.ember-view',
 
   init() {
     this._super( ...arguments );
@@ -12,7 +13,8 @@ export default Ember.Component.extend({
   didRender() {
     this._super( ...arguments );
     Ember.run.schedule('afterRender', this, function() {
-      let childLinkElements = this.$('a.ember-view');
+      let childLinkSelector = this.get('linkSelector');
+      let childLinkElements = this.$(childLinkSelector);
 
       let childLinkViews = childLinkElements.toArray().map(view =>
         this._viewRegistry[view.id]

tests/acceptance/active-link-test.js

@@ -73,3 +73,13 @@ test('changed disabled class should be applied to the proper elements', function
     assert.equal(find('#activelink-disabled-class a.disabled').length, 1);
   });
 });
+
+test('change the linkSelector to look for a button', function(assert) {
+  visit('/');
+
+  andThen(function() {
+    assert.equal(currentPath(), 'index');
+    assert.equal(find('#button-links li.active').length, 1);
+    assert.equal(find('#button-links li.active button.active').length, 1);
+  });
+});

tests/dummy/app/templates/application.hbs

@@ -47,4 +47,11 @@
   {{/active-link}}
 </ul>
 
+<h4>Button Links</h4>
+<ul id="button-links">
+  {{#active-link linkSelector="button.ember-view"}}
+    {{link-to "Index" "index" tagName="button"}}
+  {{/active-link}}
+</ul>
+
 {{outlet}}