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

7 files changed, 249 insertions, 1 deletions

diff --git a/docs/src/dom.js b/docs/src/dom.js
index 94048120..897a1831 100644
--- a/docs/src/dom.js
+++ b/docs/src/dom.js
@@ -8,7 +8,12 @@ exports.htmlEscape = htmlEscape;
 //////////////////////////////////////////////////////////
 
 function htmlEscape(text){
-  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return text
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/\{\{/g, '<span>{{</span>')
+          .replace(/\}\}/g, '<span>}}</span>');
 }
 
 
diff --git a/docs/src/gen-docs.js b/docs/src/gen-docs.js
index 4fd3d4f2..52d1f629 100755
--- a/docs/src/gen-docs.js
+++ b/docs/src/gen-docs.js
@@ -44,6 +44,7 @@ writer.makeDir('build/docs/', true).then(function() {
 function writeTheRest(writesFuture) {
   var metadata = ngdoc.metadata(docs);
 
+  writesFuture.push(writer.symlink('../../docs/content/notes', 'build/docs/notes', 'dir'));
   writesFuture.push(writer.symlinkTemplate('css', 'dir'));
   writesFuture.push(writer.symlink('../../docs/img', 'build/docs/img', 'dir'));
   writesFuture.push(writer.symlinkTemplate('js', 'dir'));
diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
index c34b8475..1870f87c 100644
--- a/docs/src/ngdoc.js
+++ b/docs/src/ngdoc.js
@@ -225,6 +225,44 @@ Doc.prototype = {
     text = text.replace(/(?:<p>)?(REPLACEME\d+)(?:<\/p>)?/g, function(_, id) {
       return placeholderMap[id];
     });
+
+    //!annotate CONTENT
+    //!annotate="REGEX" CONTENT
+    //!annotate="REGEX" TITLE|CONTENT
+    text = text.replace(/\n?\/\/!annotate\s*(?:=\s*['"](.+?)['"])?\s+(.+?)\n\s*(.+?\n)/img,
+      function(_, pattern, content, line) {
+        var pattern = new RegExp(pattern || '.+');
+        var title, text, split = content.split(/\|/);
+        if(split.length > 1) {
+          text = split[1];
+          title = split[0];
+        }
+        else {
+          title = 'Info';
+          text = content;
+        }
+        return "\n" + line.replace(pattern, function(match) {
+          return '<div class="nocode nocode-content" data-popover ' + 
+                   'data-content="' + text + '" ' + 
+                   'data-title="' + title + '">' +
+                      match +
+                 '</div>';
+        });
+      }
+    );
+
+    //!details /path/to/local/docs/file.html
+    //!details="REGEX" /path/to/local/docs/file.html
+    text = text.replace(/\/\/!details\s*(?:=\s*['"](.+?)['"])?\s+(.+?)\n\s*(.+?\n)/img,
+      function(_, pattern, url, line) {
+        url = '/notes/' + url;
+        var pattern = new RegExp(pattern || '.+');
+        return line.replace(pattern, function(match) {
+          return '<div class="nocode nocode-content" data-foldout data-url="' + url + '">' + match + '</div>';
+        });
+      }
+    );
+
     return text;
   },
 
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)$/,