Changing activeClass, added disabled state, moved to Mixin, ember-cli 2.4.1, and more!

.editorconfig

@@ -18,6 +18,7 @@ indent_style = space
 indent_size = 2
 
 [*.hbs]
+insert_final_newline = false
 indent_style = space
 indent_size = 2
 

.npmignore

@@ -1,15 +1,16 @@
-bower_components/
-tests/
-tmp/
-dist/
-
+/bower_components
+/config/ember-try.js
+/dist
+/tests
+/tmp
+**/.gitkeep
 .bowerrc
 .editorconfig
 .ember-cli
+.gitignore
+.jshintrc
+.watchmanconfig
 .travis.yml
-.npmignore
-**/.gitkeep
 bower.json
 ember-cli-build.js
-Brocfile.js
-testem.json
+testem.js

.travis.yml

@@ -11,6 +11,7 @@ cache:
 
 env:
   - EMBER_TRY_SCENARIO=default
+  - EMBER_TRY_SCENARIO=ember-1-13
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015
+Copyright (c) 2016
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,6 +1,9 @@
 # ember-cli-active-link-wrapper [![Ember Observer Score](http://emberobserver.com/badges/ember-cli-active-link-wrapper.svg)](http://emberobserver.com/addons/ember-cli-active-link-wrapper) [![Build Status](https://travis-ci.org/alexspeller/ember-cli-active-link-wrapper.svg?branch=master)](https://travis-ci.org/alexspeller/ember-cli-active-link-wrapper)
 
-A simple link wrapper to wrap active links in an element that inherits the link's active class. Useful for e.g. bootstrap where the active class should be on the containing `li` not on the `a`.
+A simple link wrapper to wrap active links in an element that inherits
+the link's active class. Useful for e.g. bootstrap where the active
+class should be on the containing `li` not on the `a`.
+
 
 ## Usage
 
@@ -13,41 +16,172 @@ A simple link wrapper to wrap active links in an element that inherits the link'
 Produces (roughly) the markup:
 
 ```html
-<li class='active'>
-    <a href="/" class='active'>Index</a>
+<li class="active">
+    <a href="/" class="active">Index</a>
 </li>
 ```
 
-You can change the tagName if you like, the default is `li`:
+
+## Installation
+
+`ember install ember-cli-active-link-wrapper`
+
+
+## Options
+
+There are several options available to adjust functionality:
+
+| 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
+the child `{{link-to}}` or directly on the `{{active-link}}`.
+See the examples below.
+
+
+## Examples
+
+Change the element type by defining the `tagName`.
 
 ```hbs
-{{#active-link tagName='div'}}
+{{#active-link tagName="div"}}
   {{link-to "Index" "index"}}
 {{/active-link}}
 ```
 
 ```html
-<div class='active'>
-    <a href="/" class='active'>Index</a>
+<div class="active">
+    <a href="/" class="active">Index</a>
 </div>
 ```
 
-## Installation
+Changing the `activeClass` on the `{{link-to}}` will also change
+it on the `{{active-link}}`. Or, you can specifically define what
+the `activeClass` will be for the `{{active-link}}`. Similarly,
+the `disabledClass` functions the same way.
+
+```hbs
+{{#active-link}}
+  {{link-to "Index" "index" activeClass="enabled"}}
+{{/active-link}}
+{{#active-link activeClass="enabled"}}
+  {{link-to "Index" "index"}}
+{{/active-link}}
+```
+
+```html
+<li class="enabled">
+    <a href="/" class="enabled">Index</a>
+</li>
+<li class="enabled">
+    <a href="/" class="active">Index</a>
+</li>
+```
+
+The active and/or disabled classes can be disabled (pun intended)
+by passing boolean `false`. This causes the class NOT to be applied,
+even if child `{{link-to}}`'s are active/disabled.
+
+```hbs
+{{#active-link disabledClass=false}}
+  {{link-to "Other" "other" disabled=true}}
+{{/active-link}}
+```
+
+```html
+<li>
+    <a href="/" class="disabled">Index</a>
+</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.
+
+```hbs
+{{#active-link class="dropdown"}}
+  <a class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    {{#active-link}}
+      {{link-to "Index" "index"}}
+    {{/active-link}}
+    {{#active-link}}
+      {{link-to "Other" "other"}}
+    {{/active-link}}
+  </ul>
+{{/active-link}}
+```
+
+```html
+<li class="dropdown active">
+  <a class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <li class="active">
+      <a href="/" class="active">Index</a>
+    </li>
+    <li>
+      <a href="/other">Other</a>
+    </li>
+  </ul>
+</li>
+```
+
+
+## Mixin
+
+Functionality of the `{{active-link}}` component has been extracted
+into a mixin. That way you can `import` the mixin and use it in other
+components, such as dropdown's.
+
+```js
+// app/components/my-dropdown.js
+import Ember from 'ember';
+import ActiveLinkMixin from 'ember-cli-active-link-wrapper/mixins/active-link';
+
+export default Ember.Component.extend(ActiveLinkMixin, {
+  // your code (or extend from an another addon component)
+});
+```
+
+
+## Development
+
+* `git clone` this repository
+* `npm install`
+* `bower install`
 
-`ember install ember-cli-active-link-wrapper`
 
 ## Running
 
 * `ember server`
-* Visit tests at http://localhost:4200/tests.
+* Visit tests at http://localhost:4200/tests/
+
 
 ## Running Tests
 
+* `npm test` (Runs `ember try:testall` to test against multiple Ember versions)
 * `ember test`
 * `ember test --server`
 
-## Building
-
-* `ember build`
 
 For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).

addon/components/active-link.js

@@ -1,24 +1,6 @@
 import Ember from 'ember';
+import ActiveLinkMixin from '../mixins/active-link';
 
-export default Ember.Component.extend({
-  tagName: 'li',
-  childLinkViews: [],
-  classNameBindings: ['active'],
-
-  active: Ember.computed('childLinkViews.@each.active', function() {
-    return Ember.A(this.get('childLinkViews')).isAny('active');
-  }),
-
-  didRender: function() {
-    Ember.run.schedule('afterRender', this, function() {
-      var childLinkElements = this.$('a.ember-view');
-
-      var childLinkViews = childLinkElements.toArray().map(view =>
-        this._viewRegistry[view.id]
-      );
-
-      this.set('childLinkViews', childLinkViews);
-    });
-  }
-
-});
+export default Ember.Component.extend(ActiveLinkMixin, {
+  tagName: 'li'
+});

addon/mixins/active-link.js

@@ -0,0 +1,51 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+
+  classNameBindings: ['_active','_disabled'],
+  linkSelector: 'a.ember-view',
+
+  initChildLinkViews: Ember.on('init', function(){
+    this.set('childLinkViews', Ember.A());
+  }),
+
+  buildChildLinkViews: Ember.on('didRender', function(){
+    Ember.run.schedule('afterRender', this, function(){
+      let childLinkSelector = this.get('linkSelector');
+      let childLinkElements = this.$(childLinkSelector);
+
+      let childLinkViews = childLinkElements.toArray().map(view =>
+        this._viewRegistry[view.id]
+      );
+
+      this.set('childLinkViews', Ember.A(childLinkViews));
+    });
+  }),
+
+  hasActiveLinks: Ember.computed('childLinkViews.@each.active', function(){
+    return this.get('childLinkViews').isAny('active');
+  }),
+
+  activeClass: Ember.computed('childLinkViews.@each.active', function(){
+    let activeLink = this.get('childLinkViews').findBy('active');
+    return (activeLink ? activeLink.get('active') : 'active');
+  }),
+
+  _active: Ember.computed('hasActiveLinks', 'activeClass', function(){
+    return (this.get('hasActiveLinks') ? this.get('activeClass') : false);
+  }),
+
+  allLinksDisabled: Ember.computed('childLinkViews.@each.disabled', function(){
+    return this.get('childLinkViews').isEvery('disabled');
+  }),
+
+  disabledClass: Ember.computed('childLinkViews.@each.disabled', function(){
+    let disabledLink = this.get('childLinkViews').findBy('disabled');
+    return (disabledLink ? disabledLink.get('disabled') : 'disabled');
+  }),
+
+  _disabled: Ember.computed('allLinksDisabled', 'disabledClass', function(){
+    return (this.get('allLinksDisabled') ? this.get('disabledClass') : false);
+  })
+
+});

app/components/active-link.js

@@ -1,3 +1,3 @@
-import activeLink from 'ember-cli-active-link-wrapper/components/active-link';
+import ActiveLinkComponent from 'ember-cli-active-link-wrapper/components/active-link';
 
-export default activeLink;
+export default ActiveLinkComponent;

app/mixins/active-link.js

@@ -0,0 +1,3 @@
+import ActiveLinkMixin from 'ember-cli-active-link-wrapper/mixins/active-link';
+
+export default ActiveLinkMixin;

bower.json

@@ -1,18 +1,9 @@
 {
   "name": "ember-cli-active-link-wrapper",
   "dependencies": {
-    "ember": "2.0.0",
-    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.5",
-    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-data": "2.0.0",
-    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
-    "ember-qunit": "0.4.10",
-    "ember-qunit-notifications": "0.0.7",
-    "jquery": "^1.11.3",
-    "loader.js": "ember-cli/loader.js#3.2.1",
-    "qunit": "~1.18.0"
-  },
-  "resolutions": {
-    "ember": "2.0.0"
+    "ember": "~2.4.1",
+    "ember-cli-shims": "0.1.0",
+    "ember-cli-test-loader": "0.2.2",
+    "ember-qunit-notifications": "0.1.0"
   }
-}
+}