Nutrias Punching Marmots

    ember-cli-active-link-wrapper

    0.5.0 • Public • Published

    ember-cli-active-link-wrapper Ember Observer Score Build Status

    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.

    Versions

    If you are using ember version earlier than 2.3.0, install version 0.2.0 of this addon.

    Usage

    {{#active-link}}
      {{link-to "Index" "index"}}
    {{/active-link}}

    Produces (roughly) the markup:

    <li class="active">
        <a href="/" class="active">Index</a>
    </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.

    Transition classes

    The .ember-transitioning-in and .ember-transitioning-out classes are also mirrored on the containing wrapper if they are present on the child link-to, allowing you to style the wrapper during router transitions.

    Examples

    Change the element type by defining the tagName.

    {{#active-link tagName="div"}}
      {{link-to "Index" "index"}}
    {{/active-link}}
    <div class="active">
        <a href="/" class="active">Index</a>
    </div>

    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.

    {{#active-link}}
      {{link-to "Index" "index" activeClass="enabled"}}
    {{/active-link}}
    {{#active-link activeClass="enabled"}}
      {{link-to "Index" "index"}}
    {{/active-link}}
    <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.

    {{#active-link disabledClass=false}}
      {{link-to "Other" "other" disabled=true}}
    {{/active-link}}
    <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.

    {{#active-link linkSelector="button.ember-view"}}
      {{link-to "Index" "index" tagName="button"}}
    {{/active-link}}
    <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.

    {{#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}}
    <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.

    // 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

    Running

    Running Tests

    • npm test (Runs ember try:testall to test against multiple Ember versions)
    • ember test
    • ember test --server

    For more information on using ember-cli, visit http://www.ember-cli.com/.

    Keywords

    Install

    npm i ember-cli-active-link-wrapper

    DownloadsWeekly Downloads

    1,150

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • alexspeller