feat(offCanvas): add closeOnClick attribute to prevent hiding

src/offcanvas/docs/demo.html

@@ -16,7 +16,7 @@ <h1 class="title">OffCanvas</h1>
         </nav>
 
         <aside class="left-off-canvas-menu">
-            <ul class="off-canvas-list">
+            <ul class="off-canvas-list" close-on-click="false">
                 <li><a href="#">Left Sidebar</a></li>
             </ul>
         </aside>

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.

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();
+                    }
                 });
             }
         };

src/offcanvas/test/offcanvas.spec.js

@@ -20,7 +20,7 @@ describe('offcanvas directive', function () {
             '</section>' +
           '</nav>' +
           '<aside class="left-off-canvas-menu">' +
-            '<ul class="off-canvas-list">' +
+            '<ul class="off-canvas-list" close-on-click="false">' +
               '<li><a href="#">Left Sidebar</a></li>' +
             '</ul>' +
           '</aside>' +
@@ -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();
+  });
+
 });