An easy way to mark your navigators
Clone or download
kfirba Feature/mark traversed link-tree segments (#6)
* update compilation dependencies

* add support for 'depth' matching and cover URI edge cases

* allow the first parameter to Mavigator be the options parameter

* bump to version 1.1.0

* update readme.

This feature adds the markTreeDepth feature to allow marking URIs segments that are part of the given URI.

This also allows to:

* Set the first parameter to be the options parameter and will set the selector to "html" by default.
* Pass a custom URI that does not start with a slash (/). Previously, passing a custom URI like settings/access would not match the correct /settings/access, not it will.
* Pass a custom Uri that ends with a slash (/). Previously, passing a custom URI like /settings/access/ would not match the URI /settings/access, not it will.

resolves #5
Latest commit f3f747d Jan 20, 2018

readme.md

Mavigator

The easiest way to mark your navigators.

Install

$ npm install mavigator

Usage

import Mavigator from 'mavigator';

Mavigator.mark();

Yup, for most cases it's that simple.

How does it work?

Mavigator will look for any anchor tag (<a>) inside the specified selector. The default behavior is to look for any <a> inside the html element. Once it gathers all of the link nodes, it will scan each node and figure out whether it needs to be marked or not.

If needed, you can scope the <a> tag scanning to a specific element type such as <nav> or to a particular class name. Take a look at the section below and learn what type of selectors you can use.

Taking it seriously

The Mavigator.mark() method's blueprint is:

Mavigator.mark(selector, options);

Where selector is a string compatible with document.querySelectorAll(), which means it's really flexible. The default value for this is html.

If you don't wish to override the selector but supply the options object, you can also pass the options as the first argument and the selector will default to html:

// This will set the `selector` to "html" and use the given options.
Mavigator.mark(options);

The options are as follow:

Property Default value Description
className "active" The class which will be added to the element once found.
uri window.location.pathname The uri Mavigator will try to find on anchor tags. The default value is okay in most cases. When you want to mark a link that its uri is '/discuss' and the uri of the page is something like '/discuss/general/how-we-do-x' we can use this option to tell Mavigator to look for the '/discuss' uri.
classToParent false Whether to add the className to the anchor tag or its parent.
markTreeDepth 0 Tells Mavigator whether it should "expand" the URI to match. The possible values are:
  1. 0 (default) - Mark the given URI only.
  2. -1 - Mark every URI segment. For example, given a URI like /settings/access/auth, Mavigator will mark the following URIs:
    1. /settings/access/auth
    2. /settings/access
    3. /settings
  3. 1,2,3,...,n - Mark every URI segment up to the given value (starting from the "bottom of the tree"). For example, given a URI like /settings/access/auth and the value 1, Mavigator will mark the following URIs:
    1. /settings/access/auth
    2. /settings/access - This URI is 1 level "above" the given URI
warn false Whether to warn in the console if no link to mark was found.

Wider support

If you feel that the script lacks some feature, let me know.

License

Mavigator is open-sourced software licensed under the MIT license.