fix(sidenav): add display: none; while closed

Closes #300. Closes #345.
angular · Oct 2, 2014 · 8f10401 · 8f10401
1 parent f0ace7e
commit 8f10401
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 57 deletions.
diff --git a/src/components/sidenav/_sidenav.scss b/src/components/sidenav/_sidenav.scss
@@ -10,6 +10,10 @@ material-sidenav {
   transition: transform 0.3s ease-in-out;
 
   @extend .material-sidenav-left;
+
+  &.closed {
+    display: none;
+  }
 }
 
 .material-sidenav-left {
@@ -45,18 +49,6 @@ material-sidenav {
   }
 }
 
-/* 
- * When sidenav is closed on small screen, show no box shadow
- */
-@media (max-width: $layout-breakpoint-md) {
-  material-sidenav {
-    &:not(.open).material-sidenav-left,
-    &:not(.open).material-sidenav-right {
-      box-shadow: none;
-    }
-  }
-}
-
 @media (max-width: $sidenav-default-width + 2 * $sidenav-min-room) {
   material-sidenav {
     max-width: 75%;

diff --git a/src/components/sidenav/sidenav.js b/src/components/sidenav/sidenav.js
@@ -6,14 +6,17 @@
  * A Sidenav QP component.
  */
 angular.module('material.components.sidenav', [
-  'material.services.registry'
+  'material.services.registry',
+  'material.animations'
 ])
   .factory('$materialSidenav', [
     '$materialComponentRegistry', 
     materialSidenavService 
   ])
   .directive('materialSidenav', [
     '$timeout',
+    '$materialEffects',
+    '$$rAF',
     materialSidenavDirective 
   ])
   .controller('$materialSidenavController', [
@@ -172,63 +175,83 @@ function materialSidenavService($materialComponentRegistry) {
  * });
  * </hljs>
  */
-function materialSidenavDirective($timeout) {
+function materialSidenavDirective($timeout, $materialEffects, $$rAF) {
   return {
     restrict: 'E',
     scope: {},
     controller: '$materialSidenavController',
-    link: function($scope, $element, $attr, sidenavCtrl) {
-      var backdrop = angular.element('<material-backdrop class="material-sidenav-backdrop">');
+    compile: compile
+  };
 
-      $scope.$watch('isOpen', onShowHideSide);
+  function compile(element, attr) {
+    element.addClass('closed');
 
-      /**
-       * Toggle the SideNav view and attach/detach listeners
-       * @param isOpen
-       */
-      function onShowHideSide(isOpen) {
-        var parent = $element.parent();
-
-        $element.toggleClass('open', !!isOpen);
-
-        if (isOpen) {
-          parent.append(backdrop);
-          backdrop.on('click', close);
-          parent.on('keydown', onKeyDown);
-        } else {
-          backdrop.remove();
-          backdrop.off('click', close);
-          parent.off('keydown', onKeyDown);
-        }
-      }
+    return postLink;
+  }
+  function postLink(scope, element, attr, sidenavCtrl) {
+    var backdrop = angular.element('<material-backdrop class="material-sidenav-backdrop">');
 
-      /**
-       * Auto-close sideNav when the `escape` key is pressed.
-       * @param evt
-       */
-      function onKeyDown(evt) {
-        if(evt.which === Constant.KEY_CODE.ESCAPE){
-          close();
+    scope.$watch('isOpen', onShowHideSide);
+    element.on($materialEffects.TRANSITIONEND_EVENT, onTransitionEnd);
 
-          evt.preventDefault();
-          evt.stopPropagation();
-        }
+    /**
+     * Toggle the SideNav view and attach/detach listeners
+     * @param isOpen
+     */
+    function onShowHideSide(isOpen) {
+      var parent = element.parent();
+
+      if (isOpen) {
+        element.removeClass('closed');
+
+        parent.append(backdrop);
+        backdrop.on('click', close);
+        parent.on('keydown', onKeyDown);
+
+      } else {
+        backdrop.remove();
+        backdrop.off('click', close);
+        parent.off('keydown', onKeyDown);
       }
 
-      /**
-        * With backdrop `clicks` or `escape` key-press, immediately
-       * apply the CSS close transition... Then notify the controller
-       * to close() and perform its own actions.
-       */
-      function close() {
+      $$rAF(function() {
+        element.toggleClass('open', !!scope.isOpen);
+      });
+    }
 
-        onShowHideSide( false );
+    function onTransitionEnd(ev) {
+      if (ev.target === element[0] && !scope.isOpen) {
+        element.addClass('closed');
+      }
+    }
 
-        $timeout(function(){
-          sidenavCtrl.close();
-        });
+    /**
+     * Auto-close sideNav when the `escape` key is pressed.
+     * @param evt
+     */
+    function onKeyDown(evt) {
+      if(evt.which === Constant.KEY_CODE.ESCAPE){
+        close();
+
+        evt.preventDefault();
+        evt.stopPropagation();
       }
+    }
 
+    /**
+     * With backdrop `clicks` or `escape` key-press, immediately
+     * apply the CSS close transition... Then notify the controller
+     * to close() and perform its own actions.
+     */
+    function close() {
+
+      onShowHideSide( false );
+
+      $timeout(function(){
+        sidenavCtrl.close();
+      });
     }
-  };
+
+  }
+
 }