diff --git a/src/OrchardCore.Modules/OrchardCore.Menu/Assets/js/activate-links.js b/src/OrchardCore.Modules/OrchardCore.Menu/Assets/js/activate-links.js
index e10d83cd651..694f96953b6 100644
--- a/src/OrchardCore.Modules/OrchardCore.Menu/Assets/js/activate-links.js
+++ b/src/OrchardCore.Modules/OrchardCore.Menu/Assets/js/activate-links.js
@@ -3,25 +3,40 @@
(function ($) {
- $.fn.activateLinks = function (options) {
+ $.fn.activateLinks = function (options, cb) {
var settings = $.extend({
// class to add to the selector
class: "active",
// custom selector based on the parent of the link
- selector: null
+ selector: null,
+ // how many segments to remove from url in order to find active link in menu
+ traverse: 0
}, options);
- var currentUrl = window.location.href.replace(window.location.protocol + '//' + window.location.host, '');
+ var segments = window.location.href.replace(window.location.protocol + '//' + window.location.host, '').split("/");
+ var level = segments.length;
+ var minLevel = settings.traverse <= 0 ? level : level >= settings.traverse ? level - settings.traverse : level;
- var items = $(this).find('a[href="' + currentUrl + '"]').parent();
+ while (level >= minLevel) {
+ var currentUrl = segments.join('/');
+ var items = $(this).find('a[href="' + currentUrl + '"]').parent();
- if (settings.selector) {
- items = items.find(settings.selector);
- }
+ if (settings.selector) {
+ items = items.find(settings.selector);
+ }
- items.addClass(settings.class)
+ if (items.length > 0) {
+ items.addClass(settings.class);
+ if (cb) {
+ cb(items);
+ }
+ return this;
+ }
+ level -= 1;
+ segments = segments.slice(0, level);
+ }
return this;
};
-}(jQuery));
\ No newline at end of file
+}(jQuery));
diff --git a/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.js b/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.js
index a3cdb306faa..ce2bf9ccd3c 100644
--- a/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.js
+++ b/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.js
@@ -6,21 +6,41 @@
// This script is used to add a class on the active link of a menu.
// Because Menus are often cached, the class needs to be set dynamically using JavaScript.
(function ($) {
- $.fn.activateLinks = function (options) {
+ $.fn.activateLinks = function (options, cb) {
var settings = $.extend({
// class to add to the selector
"class": "active",
// custom selector based on the parent of the link
- selector: null
+ selector: null,
+ // how many segments to remove from url in order to find active link in menu
+ traverse: 0
}, options);
- var currentUrl = window.location.href.replace(window.location.protocol + '//' + window.location.host, '');
- var items = $(this).find('a[href="' + currentUrl + '"]').parent();
+ var segments = window.location.href.replace(window.location.protocol + '//' + window.location.host, '').split("/");
+ var level = segments.length;
+ var minLevel = settings.traverse <= 0 ? level : level >= settings.traverse ? level - settings.traverse : level;
- if (settings.selector) {
- items = items.find(settings.selector);
+ while (level >= minLevel) {
+ var currentUrl = segments.join('/');
+ var items = $(this).find('a[href="' + currentUrl + '"]').parent();
+
+ if (settings.selector) {
+ items = items.find(settings.selector);
+ }
+
+ if (items.length > 0) {
+ items.addClass(settings["class"]);
+
+ if (cb) {
+ cb(items);
+ }
+
+ return this;
+ }
+
+ level -= 1;
+ segments = segments.slice(0, level);
}
- items.addClass(settings["class"]);
return this;
};
})(jQuery);
\ No newline at end of file
diff --git a/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.min.js b/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.min.js
index ce57004a621..d986680fd7d 100644
--- a/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.min.js
+++ b/src/OrchardCore.Modules/OrchardCore.Menu/wwwroot/Scripts/activate-links.min.js
@@ -1 +1 @@
-!function(n){n.fn.activateLinks=function(o){var t=n.extend({class:"active",selector:null},o),e=window.location.href.replace(window.location.protocol+"//"+window.location.host,""),i=n(this).find('a[href="'+e+'"]').parent();return t.selector&&(i=i.find(t.selector)),i.addClass(t.class),this}}(jQuery);
+!function(e){e.fn.activateLinks=function(t,r){for(var n=e.extend({class:"active",selector:null,traverse:0},t),i=window.location.href.replace(window.location.protocol+"//"+window.location.host,"").split("/"),o=i.length,s=n.traverse<=0?o:o>=n.traverse?o-n.traverse:o;o>=s;){var a=i.join("/"),l=e(this).find('a[href="'+a+'"]').parent();if(n.selector&&(l=l.find(n.selector)),l.length>0)return l.addClass(n.class),r&&r(l),this;o-=1,i=i.slice(0,o)}return this}}(jQuery);
diff --git a/src/docs/reference/modules/Menu/README.md b/src/docs/reference/modules/Menu/README.md
index f905e97f18b..0e3e0ba5c71 100644
--- a/src/docs/reference/modules/Menu/README.md
+++ b/src/docs/reference/modules/Menu/README.md
@@ -174,6 +174,55 @@ else
}
```
+## Mark active item in a menu
+
+Some times you need to set a menu item as active if it is the currently displayed one.
+Because menus are cached, this must be done from javascript. OrchardCore.Menu module provides a script to help you with that.
+
+``` javascript
+function activateLinks(options,cb)
+```
+| Parameter | Description
+| -------- | ----------- |
+| `options: {class:'active',selector:null,traverse:0}` | Use `class` to define what class you want to add to the parent of the anchor tag that has the current url as href. If you want to apply it to a child, set the `selector` property. Use the `traverse` to a positive number in order to seek a less specific url in the menu tree then the currently displayed on. ex. If you have a link to '/todo-items' in menu and you have navigated to '/todo-items/Create', it will try to find the item with traverse item less segments in the menu and activate it. |
+| `cb: function( items )` | If it finds an active item, the call back is hit for extra configuration. ex. Expand a menu item if the active one is nested.|
+
+### `activateLinks` usage in `Layout` file
+
+``` liquid tab="Liquid"
+...
+{% script at:"Foot", src:"~/OrchardCore.Menu/Scripts/activate-links.min.js", debug_src:"~/OrchardCore.Menu/Scripts/activate-links.js" %}
+...
+
+...
+
+...
+```
+
+``` html tab="Razor"
+...
+
+...
+
+...
+
+...
+```
+
## CREDITS
### nestedSortable jQuery plugin