Code Monkey home page Code Monkey logo

meteor-active-route's Introduction

Gitter Badge Code Climate Badge Travis Badge License Badge Gratipay Badge

Active route helpers

This package provide helpers for figuring out if some route or path is or isn't the currently active route.

Package rename

Because of support for kadira:flow-router I've decided to rename zimme:iron-router-active to zimme:active-route with version 2.0.0.

Install

meteor add zimme:active-route

Supported routers

If multiple routers are installed, the package will match against iron:router routes first, then kadira:flow-router and lastly meteorhacks:flow-router.

Template helpers

Usage

Basic usage examples.

isActiveRoute

Template helper to check if the supplied route name matches the currently active route's name.

Returns either a configurable String, which defaults to 'active', or false.

<li class="{{isActiveRoute 'home'}}">...</li>
<li class="{{isActiveRoute name='home'}}">...</li>
<li class="{{isActiveRoute regex='home|dashboard'}}">...</li>
{{#if isActiveRoute 'home'}}
  <span>Show only if 'home' is the current route's name</span>
{{/if}}
{{#if isActiveRoute regex='^products'}}
  <span>Show only if the current route's name begins with 'products'</span>
{{/if}}

<li class="{{isActiveRoute class='is-selected' name='home'}}">...</li>
<li class="{{isActiveRoute 'home' class='is-selected'}}">...</li>

isActivePath

Template helper to check if the supplied path matches the currently active route's path.

Returns either a configurable String, which defaults to 'active', or false.

<li class="{{isActivePath '/home'}}">...</li>
<li class="{{isActivePath path='/home'}}">...</li>
<li class="{{isActivePath regex='home|dashboard'}}">...</li>
{{#if isActivePath '/home'}}
  <span>Show only if '/home' is the current route's path</span>
{{/if}}
{{#if isActivePath regex='^\\/products'}}
  <span>Show only if current route's path begins with '/products'</span>
{{/if}}

<li class="{{isActivePath class='is-selected' path='/home'}}">...</li>
<li class="{{isActivePath '/home' class='is-selected'}}">...</li>

isNotActiveRoute

Template helper to check if the supplied route name doesn't match the currently active route's name.

Returns either a configurable String, which defaults to 'disabled', or false.

<li class="{{isNotActiveRoute 'home'}}">...</li>
<li class="{{isNotActiveRoute name='home'}}">...</li>
<li class="{{isNotActiveRoute regex='home|dashboard'}}">...</li>
{{#if isNotActiveRoute 'home'}}
  <span>Show only if 'home' isn't the current route's name</span>
{{/if}}
{{#if isNotActiveRoute regex='^products'}}
  <span>
    Show only if the current route's name doesn't begin with 'products'
  </span>
{{/if}}

<li class="{{isNotActiveRoute class='is-disabled' name='home'}}">...</li>
<li class="{{isNotActiveRoute 'home' class='is-disabled'}}">...</li>

isNotActivePath

Template helper to check if the supplied path doesn't match the currently active route's path.

Returns either a configurable String, which defaults to 'disabled', or false.

<li class="{{isNotActivePath '/home'}}">...</li>
<li class="{{isNotActivePath path='/home'}}">...</li>
<li class="{{isNotActivePath regex='home|dashboard'}}">...</li>
{{#if isNotActivePath '/home'}}
  <span>Show only if '/home' isn't the current route's path</span>
{{/if}}
{{#if isNotActivePath regex='^\\/products'}}
  <span>Show only if current route's path doesn't begin with '/products'</span>
{{/if}}

<li class="{{isNotActivePath class='is-disabled' path='/home'}}">...</li>
<li class="{{isNotActivePath '/home' class='is-disabled'}}">...</li>

Arguments

The following can be used by the template helpers as arguments.

  • Data context, Optional. String or Object with name, path or regex
  • name, Optional. String. Only available for isActiveRoute and isNotActiveRoute
  • path, Optional. String. Only available for isActivePath and isNotActivePath
  • regex, Optional. String or RegExp

At least one of Data context, route or path need to be supplied.

Javascript helpers

Usage

Basic usage examples.

ActiveRoute.name

Helper to check if the supplied route name matches the currently active route's name.

Returns either true or false.

ActiveRoute.name('home');
// Returns true if current route's name is 'home'.

ActiveRoute.name(new RegExp('home|dashboard'));
// Returns true if current route's name contains 'home' or 'dashboard'.

ActiveRoute.name(/^products/);
// Returns true if current route's name starts with 'products'.

ActiveRoute.path

Helper to check if the supplied path matches the currently active route's path.

Returns either true or false.

ActiveRoute.path('/home');
// Returns true if current route's path is '/home'.

ActiveRoute.path(new RegExp('users'));
// Returns true if current route's path contains 'users'.

ActiveRoute.path(/\/edit$/i);
// Returns true if current route's path ends with '/edit', matching is
// case-insensitive

Arguments

The javascript helpers accepts String or RegExp as an argument.

Global options

  • activeClass, Optional. Set to String to change the default class for isActiveRoute and isActivePath
  • caseSensitive, Optional. Set to false to make matching case-insensitive
  • disabledClass, Optional. Set to String to change the default class for isNotActiveRoute and isNotActivePath
  • regex, Optional. Set to true to make template helpers use regex matching with the following syntax, {{isActiveRoute '^home'}}
// Configure helpers globally
// The settings below are the package default settings
ActiveRoute.configure({
  activeClass: 'active',
  caseSensitive: true,
  disabledClass: 'disabled',
  regex: 'false'
});

Notes

  • SHOULD be backwards-compatible with zimme:[email protected]
  • ActiveRoute.config is an alias for ActiveRoute.configure
  • className is an alias for class in template helpers
  • This package supports javascript's RegExp, here's some good info

meteor-active-route's People

Contributors

eljaydub avatar gitter-badger avatar splendido avatar zimme avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.