allow lockedOpen to be toggled

miguelcobain · Feb 20, 2017 · 3cec77c · 3cec77c
1 parent 3669cd7
commit 3cec77c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 6 deletions.
diff --git a/addon/components/paper-sidenav-inner.js b/addon/components/paper-sidenav-inner.js
@@ -48,6 +48,13 @@ export default Component.extend(TransitionMixin, {
     this.updateLockedOpen();
   },
 
+  didReceiveAttrs() {
+    this._super(...arguments);
+    if (typeof FastBoot === 'undefined') {
+      this.updateLockedOpen();
+    }
+  },
+
   willDestroyElement() {
     this._super(...arguments);
     $(window).off(`resize.${this.elementId}`);
@@ -72,6 +79,7 @@ export default Component.extend(TransitionMixin, {
     if (coercedIsLockedOpen !== isLockedOpen) {
       this.set('isLockedOpen', isLockedOpen);
 
+
       // if sidenav is open and we enter lockedOpen,
       // make the sidenav enter the "closed" state
       if (!this.get('closed') && isLockedOpen) {

diff --git a/addon/templates/components/paper-sidenav.hbs b/addon/templates/components/paper-sidenav.hbs
@@ -1,6 +1,5 @@
 {{#unless closed}}
   {{paper-backdrop
-    isLockedOpen=isLockedOpen
     opaque=true
     class="md-sidenav-backdrop"
     onClick=(action "onBackdropTap")}}
@@ -11,7 +10,6 @@
   name=name
   position=position
   lockedOpen=lockedOpen
-  isLockedOpen=isLockedOpen
   closed=closed
   closeOnClick=closeOnClick
   onToggle=(action "onToggle")}}

diff --git a/tests/dummy/app/controllers/demo/sidenav.js b/tests/dummy/app/controllers/demo/sidenav.js
@@ -3,8 +3,8 @@ const { Controller } = Ember;
 
 export default Controller.extend({
   actions: {
-    toggleSourceCode() {
-      this.toggleProperty('showSourceCode');
+    toggle(propName) {
+      this.toggleProperty(propName);
     }
   }
 });
diff --git a/tests/dummy/app/templates/demo/sidenav.hbs b/tests/dummy/app/templates/demo/sidenav.hbs
@@ -7,7 +7,7 @@
     {{#paper-toolbar-tools}}
       <h2>Basic Usage</h2>
       <span class="flex"></span>
-      {{#paper-button onClick=(action "toggleSourceCode") iconButton=true}}
+      {{#paper-button onClick=(action "toggle" "showSourceCode") iconButton=true}}
         {{paper-icon icon="code"}}
       {{/paper-button}}
     {{/paper-toolbar-tools}}
@@ -38,7 +38,7 @@
         <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
           <p>
             The left sidenav will "lock open" on a medium (>=960px wide) device.
-            The right sidenav never "locks open" because we set <code>lockedOpen=false</code>. 
+            The right sidenav never "locks open" because we set <code>lockedOpen=false</code>.
           </p>
           <p>
             Left sidenav is <strong>{{if leftSideBarOpen "opened" "closed"}}</strong>.
@@ -83,6 +83,62 @@
 
 {{/paper-card}}
 
+{{#paper-card}}
+  {{#paper-toolbar}}
+    {{#paper-toolbar-tools}}
+      <h2>Persistent Sidenav</h2>
+      <span class="flex"></span>
+      {{#paper-button onClick=(action "toggle" "persistentCode") iconButton=true}}
+        {{paper-icon "code"}}
+      {{/paper-button}}
+    {{/paper-toolbar-tools}}
+  {{/paper-toolbar}}
+
+  <div class="doc-code-example {{if persistentCode 'is-visible'}}">
+    {{code-snippet name="sidenav.hbs"}}
+  </div>
+
+  <div class="doc-content-example">
+    {{! BEGIN-SNIPPET sidenav }}
+    {{#paper-sidenav-container class="inner-sidenav"}}
+
+      {{#paper-sidenav
+        class="md-whiteframe-z2"
+        name="left2"
+        open=leftSideBarOpen2
+        lockedOpen=leftSideBarLockedOpen
+        onToggle=(action (mut leftSideBarOpen2))}}
+        {{#paper-toolbar as |toolbar|}}
+          {{#paper-toolbar-tools}}Left Sidenav{{/paper-toolbar-tools}}
+        {{/paper-toolbar}}
+        {{#paper-content padding=true}}
+          Çup?
+        {{/paper-content}}
+      {{/paper-sidenav}}
+
+      {{#paper-card-content class="flex"}}
+        <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
+          <p>
+            Another way of using the sidenav is to toggle the <code>lockedOpen</code> state.
+            This corresponds to the "persistent sidenav" pattern in the material spec.
+          </p>
+          <p>
+            Left sidenav is <strong>{{if leftSideBarLockedOpen "locked" "unlocked"}}</strong>.
+          </p>
+
+          {{#paper-button raised=true onClick=(action "toggle" "leftSideBarLockedOpen")}}
+            {{if leftSideBarLockedOpen "Unlock" "Lock"}} left sidenav
+          {{/paper-button}}
+
+        </div>
+      {{/paper-card-content}}
+
+    {{/paper-sidenav-container}}
+    {{! END-SNIPPET sidenav }}
+  </div>
+
+{{/paper-card}}
+
 {{paper-api
   (p-section
     (p-row "position" "`'left'` | `'right'`" "Pass in the string `'left'` or `'right'` to place the sidenav accordingly.")