bugs/fix-sidebar-on-fullscreen

jcenturion · jcenturion · commit f83e9150ffa6 · 2015-01-28T12:05:33.000-03:00
diff --git a/dist/index.html b/dist/index.html
@@ -7,7 +7,7 @@
   <link href="styles/api-console-light-theme.css" rel="stylesheet" class="theme">
 </head>
 <body ng-app="ramlConsoleApp" ng-cloak class="raml-console-body">
-  <raml-initializer></raml-initializer>
+  <raml-console single-view src="https://qa.anypoint.mulesoft.com/apiplatform/repository/public/organizations/121/apis/2951/versions/3337/files/root"></raml-console>
   <script src="scripts/api-console-vendor.js"></script>
   <script src="scripts/api-console.js"></script>
   <script>
diff --git a/dist/scripts/api-console.js b/dist/scripts/api-console.js
@@ -1207,6 +1207,8 @@
           }
         };
 
+        $scope.documentationEnabled = true;
+
         $scope.toggleSidebar = function ($event) {
           var $this        = jQuery($event.currentTarget);
           var $panel       = $this.closest('.raml-console-resource-panel');
@@ -1218,6 +1220,7 @@
           }
 
           if ($sidebar.hasClass('raml-console-is-fullscreen')) {
+            $scope.documentationEnabled = true;
             $sidebar.velocity(
               { width: $scope.singleView ? 0 : sidebarWidth },
               {
@@ -1235,9 +1238,14 @@
               { width: '100%' },
               {
                 duration: 200,
-                complete: completeAnimation
+                complete: function (element) {
+                  jQuery(element).removeAttr('style');
+                  $scope.documentationEnabled = false;
+                  apply();
+                }
               }
             );
+
             $sidebar.addClass('raml-console-is-fullscreen');
             $sidebar.addClass('raml-console-is-responsive');
             $panel.addClass('raml-console-has-sidebar-fullscreen');
@@ -1270,7 +1278,11 @@
             { width: animation },
             {
               duration: speed,
-              complete: completeAnimation
+              complete: function (element) {
+                jQuery(element).removeAttr('style');
+                $scope.documentationEnabled = false;
+                apply();
+              }
             }
           );
 
@@ -4768,7 +4780,7 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
 
 
   $templateCache.put('directives/documentation.tpl.html',
-    "<div class=\"raml-console-resource-panel-primary\">\n" +
+    "<div class=\"raml-console-resource-panel-primary\" ng-if=\"documentationEnabled\">\n" +
     "  <!-- Request -->\n" +
     "  <header class=\"raml-console-resource-header\">\n" +
     "    <h3 class=\"raml-console-resource-head\">\n" +
diff --git a/src/app/directives/documentation.tpl.html b/src/app/directives/documentation.tpl.html
@@ -1,4 +1,4 @@
-<div class="raml-console-resource-panel-primary">
+<div class="raml-console-resource-panel-primary" ng-if="documentationEnabled">
   <!-- Request -->
   <header class="raml-console-resource-header">
     <h3 class="raml-console-resource-head">
diff --git a/src/app/directives/sidebar.js b/src/app/directives/sidebar.js
@@ -347,6 +347,8 @@
           }
         };
 
+        $scope.documentationEnabled = true;
+
         $scope.toggleSidebar = function ($event) {
           var $this        = jQuery($event.currentTarget);
           var $panel       = $this.closest('.raml-console-resource-panel');
@@ -358,6 +360,7 @@
           }
 
           if ($sidebar.hasClass('raml-console-is-fullscreen')) {
+            $scope.documentationEnabled = true;
             $sidebar.velocity(
               { width: $scope.singleView ? 0 : sidebarWidth },
               {
@@ -375,9 +378,14 @@
               { width: '100%' },
               {
                 duration: 200,
-                complete: completeAnimation
+                complete: function (element) {
+                  jQuery(element).removeAttr('style');
+                  $scope.documentationEnabled = false;
+                  apply();
+                }
               }
             );
+
             $sidebar.addClass('raml-console-is-fullscreen');
             $sidebar.addClass('raml-console-is-responsive');
             $panel.addClass('raml-console-has-sidebar-fullscreen');
@@ -410,7 +418,11 @@
             { width: animation },
             {
               duration: speed,
-              complete: completeAnimation
+              complete: function (element) {
+                jQuery(element).removeAttr('style');
+                $scope.documentationEnabled = false;
+                apply();
+              }
             }
           );
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="raml-console-resource-panel-primary">`
	`1`	`+<div class="raml-console-resource-panel-primary" ng-if="documentationEnabled">`
`2`	`2`	`<!-- Request -->`
`3`	`3`	`<header class="raml-console-resource-header">`
`4`	`4`	`<h3 class="raml-console-resource-head">`