Merge pull request #253 from knownasilya/patch-1

Add `closeOnClick` to paper-sidenav

Author: miguelcobain

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Ember Paper Changelog
 
+### 0.2.11
+- [#253](https://github.com/miguelcobain/ember-paper/pull/253) Add `closeOnClick` to paper-sidenav
+
 ### 0.2.10 (Nov 23, 2015)
 - [#178](https://github.com/miguelcobain/ember-paper/pull/178) Listen for model changes
 - [#219](https://github.com/miguelcobain/ember-paper/pull/219) Inject wormhole outlet through addon hook

addon/components/paper-sidenav.js

@@ -7,6 +7,7 @@ export default Ember.Component.extend({
 
   'locked-open': 'gt-sm',
   closed: true,
+  closeOnClick: true,
 
   navContainer: Ember.computed(function () {
     return this.nearestOfType(PaperNavContainer);
@@ -38,7 +39,6 @@ export default Ember.Component.extend({
     }
   }),
 
-
   didInsertElement() {
     Ember.$(window).on('resize', this.get('__resizeWindow'));
   },
@@ -63,7 +63,7 @@ export default Ember.Component.extend({
   },
 
   click() {
-    if (this.get('isLockedOpen')) {
+    if (!this.get('closeOnClick') || this.get('isLockedOpen')) {
       return;
     }
 

tests/dummy/app/styles/app.scss

@@ -17,6 +17,9 @@ body > div.ember-view:first-of-type {
 }
 
 .site-nav-container {
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }

tests/dummy/app/templates/sidenav.hbs

@@ -1,62 +1,68 @@
 {{#paper-toolbar}}
-    <div class="md-toolbar-tools">
-      {{#paper-sidenav-toggle as |toggle|}}
-        {{#paper-button target=toggle action="toggleMenu" icon-button=true}}{{paper-icon icon="menu"}}{{/paper-button}}
-      {{/paper-sidenav-toggle}}
-        <span class="md-breadcrumb-page">Sidenav</span>
-    </div>
+  <div class="md-toolbar-tools">
+    {{#paper-sidenav-toggle as |toggle|}}
+      {{#paper-button target=toggle action="toggleMenu" icon-button=true}}{{paper-icon icon="menu"}}{{/paper-button}}
+    {{/paper-sidenav-toggle}}
+    <span class="md-breadcrumb-page">Sidenav</span>
+  </div>
 {{/paper-toolbar}}
+
 {{#paper-content class="md-padding"}}
-<div class="doc-content">
+  <div class="doc-content">
+    <h3>Demo</h3>
+    <p>Try to resize this webpage.</p>
 
-  <h3>Demo</h3>
-  <p>Try to resize this webpage.</p>
+    <h3>Sidenav attributes</h3>
 
-  <h3>Sidenav attributes</h3>
+    <p>
+      <strong>locked-open:</strong> You can chose when the sidenav should stay open, based on the screen size.<br />
+      Available sizes are: <code>sm, gt-sm, md, gt-md, lg, gt-lg</code>
+    </p>
 
-  <p><strong>locked-open:</strong> You chose can whenever the sidebar to stay open, based on the screen size.
-      Available sizes are:<br />
-      <code>sm, gt-sm, md, gt-md, lg, gt-lg</code></p>
+    <p>
+      <strong>closeOnClick:</strong> An override for the sidenav closing if you click on the sidebar itself. Mainly
+      for use-cases where you have forms or something similar in the sidenav.<br />
+      Defaults to <code>true</code>.
+    </p>
 
 
-  <h3>Template</h3>
+    <h3>Template</h3>
 
 {{#code-block language='handlebars'}}
 \{{#paper-nav-container}}
-\{{#paper-sidenav class="md-sidenav-left md-whiteframe-z2" locked-open="gt-sm"}}
-  \{{#paper-toolbar}}
+  \{{#paper-sidenav class="md-sidenav-left md-whiteframe-z2" locked-open="gt-sm"}}
+    \{{#paper-toolbar}}
       &lt;div class="md-toolbar-tools"&gt;
-      &lt;div class="logo"&gt;
-      &lt;img src="ember-logo-white.png" height="30"/&gt;&nbsp;&nbsp;&lt;strong&gt;Paper&lt;/strong&gt;
-      &lt;/div&gt;
+        &lt;div class="logo"&gt;
+          &lt;img src="ember-logo-white.png" height="30"/&gt;
+          &lt;strong&gt;Paper&lt;/strong&gt;
+        &lt;/div&gt;
       &lt;/div&gt;
-  \{{/paper-toolbar}}
-\{{#paper-content}}
-  \{{#paper-list}}
-  \{{#paper-item action="transitionTo" param="index"}}Introduction\{{/paper-item}}
-  \{{#paper-item action="transitionTo" param="index"}}Another link\{{/paper-item}}
-\{{/paper-list}}
-\{{/paper-content}}
-\{{/paper-sidenav}}
-
-    &lt;div layout="column" tabindex="-1" role="main" flex&gt;
-\{{#paper-toolbar}}
-    &lt;div class="md-toolbar-tools"&gt;
-\{{#paper-sidenav-toggle as |toggle|}}
-\{{#paper-button target=toggle action="toggleMenu" icon-button=true}}\{{paper-icon icon="menu"}}\{{/paper-button}}
-\{{/paper-sidenav-toggle}}
-    &lt;span class="md-breadcrumb-page"&gt;Title&lt;/span&gt;
-    &lt;/div&gt;
-\{{/paper-toolbar}}
-\{{#paper-content class="md-padding"}}
-    &lt;p&gt;My content&lt;/p&gt;
-\{{/paper-content}}
-  &lt;/div&gt;
-\{{/paper-nav-container}}{{/code-block}}
+    \{{/paper-toolbar}}
 
+    \{{#paper-content}}
+      \{{#paper-list}}
+        \{{#paper-item action="transitionTo" param="index"}}Introduction\{{/paper-item}}
+        \{{#paper-item action="transitionTo" param="index"}}Another link\{{/paper-item}}
+      \{{/paper-list}}
+    \{{/paper-content}}
+  \{{/paper-sidenav}}
 
+  &lt;div layout="column" tabindex="-1" role="main" flex&gt;
+    \{{#paper-toolbar}}
+      &lt;div class="md-toolbar-tools"&gt;
+        \{{#paper-sidenav-toggle as |toggle|}}
+          \{{#paper-button target=toggle action="toggleMenu" icon-button=true}}\{{paper-icon icon="menu"}}\{{/paper-button}}
+        \{{/paper-sidenav-toggle}}
+        &lt;span class="md-breadcrumb-page"&gt;Title&lt;/span&gt;
+      &lt;/div&gt;
+    \{{/paper-toolbar}}
 
-</div>
+    \{{#paper-content class="md-padding"}}
+      &lt;p&gt;My content&lt;/p&gt;
+    \{{/paper-content}}
+  &lt;/div&gt;
+\{{/paper-nav-container}}
+{{/code-block}}
+  </div>
 {{/paper-content}}
-
-