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