diff --git a/src/offcanvas/docs/demo.html b/src/offcanvas/docs/demo.html index f61fe1c..89c7ffd 100644 --- a/src/offcanvas/docs/demo.html +++ b/src/offcanvas/docs/demo.html @@ -16,7 +16,7 @@

OffCanvas

diff --git a/src/offcanvas/docs/readme.md b/src/offcanvas/docs/readme.md index 2f473c4..ef24016 100644 --- a/src/offcanvas/docs/readme.md +++ b/src/offcanvas/docs/readme.md @@ -9,6 +9,7 @@ The off canvas module expects the use of several nested elements with the follow - `left-off-canvas-toggle`: Wraps the left off canvas menu. - `right-off-canvas-toggle`: Wraps the right off canvas menu. - `exit-off-canvas`: Occludes the main page content when an off canvas menu is visible. Hides the menu when clicked. -- `off-canvas-list`: Contains off canvas menu items. Hides the menu after a nested link is clicked. +- `off-canvas-list`: Contains off canvas menu items. +- At default the menu hides after a nested link is clicked. Set the `close-on-click` attribute to false to prevent this action. You can reference a scope variable, too. See the demo page for example on how to use this and see the [Foundation docs](http://foundation.zurb.com/docs/components/offcanvas.html) for more details. diff --git a/src/offcanvas/offcanvas.js b/src/offcanvas/offcanvas.js index 40ca09d..f934d62 100644 --- a/src/offcanvas/offcanvas.js +++ b/src/offcanvas/offcanvas.js @@ -70,11 +70,16 @@ angular.module("mm.foundation.offcanvas", []) }]) .directive('offCanvasList', [function () { return { + scope: { + closeOnClick: "=" + }, require: '^offCanvasWrap', restrict: 'C', link: function ($scope, element, attrs, offCanvasWrap) { element.on('click', function () { - offCanvasWrap.hide(); + if ($scope.closeOnClick !== false) { + offCanvasWrap.hide(); + } }); } }; diff --git a/src/offcanvas/test/offcanvas.spec.js b/src/offcanvas/test/offcanvas.spec.js index dec3310..ff537d1 100644 --- a/src/offcanvas/test/offcanvas.spec.js +++ b/src/offcanvas/test/offcanvas.spec.js @@ -20,7 +20,7 @@ describe('offcanvas directive', function () { '' + '' + '' + @@ -78,4 +78,11 @@ describe('offcanvas directive', function () { expect(element).isClosed(); }); + it('does not close after clicking on a list item with close-on-click=false', function() { + $('.left-off-canvas-toggle', element).trigger('click'); + expect(element).leftOpen(); + $('.left-off-canvas-menu > .off-canvas-list', element).trigger('click'); + expect(element).leftOpen(); + }); + });