feat(ngdocs): support popover, foldouts and foldover annotations

4 files changed, 204 insertions, 0 deletions

diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css
index d8c983a3..2d54bbfb 100644
--- a/docs/src/templates/css/animations.css
+++ b/docs/src/templates/css/animations.css
@@ -79,3 +79,26 @@
   -o-transition: color 0 ease-in; /* opera is special :) */
   transition: none;
 }
+
+.foldout-show, .foldout-enter, .foldout-hide {
+  -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+}
+
+.foldout-show, .foldout-enter {
+  opacity:0;
+}
+
+.foldout-show.foldout-show-active, .foldout-hide.foldout-hide-active {
+  opacity:1;
+}
+
+.foldout-hide {
+  opacity:1;
+}
+
+.foldout-hide.foldout-hide-active {
+  opacity:0;
+}
diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css
index a98f7429..1b87c551 100644
--- a/docs/src/templates/css/docs.css
+++ b/docs/src/templates/css/docs.css
@@ -303,3 +303,162 @@ ul.events > li > h3 {
   top:0;
   right:0;
 }
+
+.nocode-content {
+  cursor:pointer;
+  display:inline-block;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+
+  -webkit-transition:0.5s linear all;
+  -moz-transition:0.5s linear all;
+  -o-transition:0.5s linear all;
+  transition:0.5s linear all;
+  color: #223f7a;
+  background:#ddd;
+  border: 1px solid #ccc;
+}
+
+.nocode-content:hover {
+  background-color: #99c2ff;
+  border: 1px solid #e1e1e8;
+}
+
+.popover-incode .popover-inner {
+  width:auto;
+  min-width:200px;
+  max-width:500px;
+}
+
+.popover-incode {
+  -webkit-transition:0.2s linear opacity;
+  -moz-transition:0.2s linear opacity;
+  -o-transition:0.2s linear opacity;
+  transition:0.2s linear opacity;
+  opacity:0;
+}
+
+.popover-incode.visible {
+  opacity:1;
+}
+
+.popover-incode code, 
+.popover-incode pre {
+  white-space:nowrap;
+}
+
+.popover-incode .arrow {
+  left:50px!important;
+}
+
+.foldover-content {
+  display:none;
+}
+
+.foldout:after {
+  content:"";
+  position:absolute;
+  left:50%;
+  top:-1px;
+  margin-left:-10px;
+  border-width:10px;
+  border-style:solid;
+  border-color:#f7f7f9 transparent transparent;
+}
+
+.foldout:before {
+  content:"";
+  position:absolute;
+  left:50%;
+  top:0px;
+  margin-left:-10px;
+  border-width:10px;
+  border-style:solid;
+  border-color:#bbb transparent transparent;
+}
+
+.foldout {
+  padding:8px 15px 5px;
+  position:relative;
+  background:#eee;
+  white-space:normal;
+  box-shadow:inset 0 0 20px #ccc;
+  border-top:1px solid #bbb;
+}
+
+.prettyprint {
+  padding-right:0!important;
+  padding-bottom:0!important;
+}
+
+pre ol li {
+  padding-bottom:2px;
+  padding-right:5px;
+}
+
+#docs-fold {
+  position:absolute;
+  top:0;
+  right:0;
+  width:500px;
+  min-height:100%;
+  padding-top:50px;
+  padding:50px 20px 20px 20px;
+  background:white;
+  border-left:1px solid #999;
+  box-shadow:0 0 10px #555;
+  z-index:1002;
+}
+
+#docs-fold.fold-show {
+  -webkit-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -moz-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -o-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+}
+
+#docs-fold.fold-show {
+  right:-200px;
+  opacity:0;
+}
+
+#docs-fold.fold-show.fold-show-active {
+  right:0;
+  opacity:1;
+}
+
+#docs-fold-overlay {
+  background:rgba(255,255,255,0.5);
+  position:fixed;
+  left:0;
+  bottom:0;
+  right:0;
+  top:0;
+  z-index:1001;
+  cursor:pointer;
+}
+
+.fixed_body {
+  position:fixed;
+  top:0;
+  z-index:1000;
+  left:0;
+  right:0;
+}
+
+#docs-fold-close {
+  z-index: 1029;
+  position: absolute;
+  left: -30px;
+  top: 60px;
+  cursor:pointer;
+  text-align: center;
+  width:50px;
+  line-height:50px;
+  font-size: 2em;
+  background: #fff;
+  box-shadow:-6px 0 5px #555;
+  display:block;
+  border-radius:10px;
+}
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index 3b75207e..8e2fbc37 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -198,6 +198,15 @@
     </div>
   </header>
 
+ <div id="docs-fold-overlay" ng-show="docs_fold" ng-click="fold(null)"></div>
+ <div id="docs-fold" ng-show="docs_fold" ng-animate="'fold'">
+   <div id="docs-fold-close" ng-click="fold(null)">
+     <span class="icon-remove-sign"></span>
+   </div>
+   <div ng-include="docs_fold"></div>
+ </div>
+
+<div ng-class="{fixed_body:docs_fold}">
   <div role="main" class="container">
     <div class="row clear-navbar"></div>
 
@@ -359,6 +368,7 @@
       </p>
     </div>
   </footer>
+</div>
 
 </body>
 </html>
diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js
index 63ad31f4..97fea067 100644
--- a/docs/src/templates/js/docs.js
+++ b/docs/src/templates/js/docs.js
@@ -411,6 +411,18 @@ docsApp.serviceFactory.sections = function sections() {
 
 
 docsApp.controller.DocsController = function($scope, $location, $window, $cookies, sections) {
+  $scope.fold = function(url) {
+    if(url) {
+      $scope.docs_fold = '/notes/' + url;
+      if(/\/build/.test($window.location.href)) {
+        $scope.docs_fold = '/build/docs' + $scope.docs_fold;
+      }
+      window.scrollTo(0,0);
+    }
+    else {
+      $scope.docs_fold = null;
+    }
+  };
   var OFFLINE_COOKIE_NAME = 'ng-offline',
       DOCS_PATH = /^\/(api)|(guide)|(cookbook)|(misc)|(tutorial)/,
       INDEX_PATH = /^(\/|\/index[^\.]*.html)$/,