fix(ngdocs): remove the side search bar

BREAKING CHANGE

The side search bar on the docs page has been removed in favor of the
top search bar.

Author: matsko

docs/src/templates/css/animations.css

@@ -37,40 +37,6 @@
   opacity:1;
 }
 
-.expand.ng-enter,
-.expand.ng-move,
-.expand.ng-leave {
-  -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;
-}
-.expand.ng-move,
-.expand.ng-enter {
-  opacity:0;
-  line-height:0;
-  height:0!important;
-}
-.expand.ng-move.ng-move-active,
-.expand.ng-enter.ng-enter-active {
-  opacity:1;
-  line-height:20px;
-  height:20px!important;
-}
-
-.expand.ng-leave {
-  opacity:1;
-  height:20px;
-}
-.expand.ng-leave.ng-leave-active {
-  opacity:0;
-  height:0;
-}
-
-.fade-in.ng-enter,
-.fade-in.ng-move,
-.fade-in.ng-hide-add,
-.fade-in.ng-hide-remove,
 .foldout.ng-enter,
 .foldout.ng-move,
 .foldout.ng-hide-add,
@@ -81,21 +47,13 @@
   transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
 }
 
-.fade-in.ng-enter,
-.fade-in.ng-move,
-.fade-in.ng-hide-remove,
-.fade-in.ng-hide-add.ng-hide-active,
 .foldout.ng-hide-remove,
 .foldout.ng-hide-add.ng-hide-active,
 .foldout.ng-enter,
 .foldout.ng-move {
   opacity:0;
 }
 
-.fade-in.ng-enter.ng-enter-active,
-.fade-in.ng-move.ng-move-active,
-.fade-in.ng-hide-remove.ng-hide-remove-active,
-.fade-in.ng-hide-add,
 .foldout.ng-move.ng-move-active,
 .foldout.ng-hide-remove.ng-hide-remove-active,
 .foldout.ng-hide-add,

docs/src/templates/css/docs.css

@@ -45,62 +45,62 @@
 
 /* =============================== */
 
-.form-search .dropdown-menu {
+.side-navigation .dropdown-menu {
   margin-left: 10px;
 }
 
-.form-search .code {
+.side-navigation .code {
   font-family: monospace;
   font-weight: bold;
   font-size: 13px;
   color: black;
 }
 
-.form-search > ul.nav > li.module {
+.side-navigation > ul.nav > li.module {
   background-color: #d3d3d3;
 }
 
-.form-search > ul.nav > li.section {
+.side-navigation > ul.nav > li.section {
   background-color: #ebebeb;
   min-height: 14px;
 }
 
-.form-search > ul.nav > li.last {
+.side-navigation > ul.nav > li.last {
   padding-bottom: 1em;
 }
 
-.form-search > ul.nav > li.last + li.api-list-item {
+.side-navigation > ul.nav > li.last + li.api-list-item {
   margin-top:-1em;
   padding-bottom: 1em;
 }
 
-.form-search .well {
+.side-navigation .well {
   border-color: #d3d3d3;
   padding-top: 0;
   padding-bottom: 0;
   margin-bottom: 15px;
 }
 
-.form-search .well .nav-header {
+.side-navigation .well .nav-header {
   text-transform: none;
   margin-top: 0;
   margin-left: -15px;
   margin-right: -15px;
 }
 
-.form-search .well .nav-header a {
+.side-navigation .well .nav-header a {
   text-transform: none;
   color: black;
 }
-.form-search .well .nav-header a:hover {
+.side-navigation .well .nav-header a:hover {
   background-color: inherit;
 }
 
-.form-search .well li {
+.side-navigation .well li {
   line-height: 14px;
 }
 
-.form-search .well .guide {
+.side-navigation .well .guide {
   float: right;
   padding-top: 0;
   color: gray;

docs/src/templates/index.html

@@ -256,38 +256,24 @@ <h4>{{ key }}</h4>
                     class="docs-version-jump">
             </select>
           </div>
-          <form class="form-search" ng-submit="submitForm()">
-            <div class="dropdown search"
-                 ng-class="{open: focused && bestMatch.rank > 0 && bestMatch.page != currentPage}">
-              <input type="text" ng-model="search" placeholder="search the docs"
-                tabindex="1" accesskey="s" class="input-medium search-query" />
-              <ul class="dropdown-menu">
-                <li>
-                  <a href="{{bestMatch.page.url}}">{{bestMatch.page.shortName}}</a>
-                </li>
-              </ul>
-            </div>
-
-            <div class="spacer"></div>
-            <div ng-show="search">Filtered results:</div>
-
+          <div class="side-navigation">
             <ul class="nav nav-list" ng-hide="page">
-              <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="expand api-list-item">
+              <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
             </ul>
 
-            <ul class="nav nav-list well api-list-item fade-in" ng-repeat="namespace in namespaces track by namespace.url">
+            <ul class="nav nav-list well api-list-item" ng-repeat="namespace in namespaces track by namespace.url">
               <li class="nav-header module">
                 <a class="code" href="{{namespace.url}}">{{namespace.name}}</a>
               </li>
 
-              <li ng-repeat="page in namespace.errors track by page.url" ng-class="navClass(page)" class="expand api-list-item">
+              <li ng-repeat="page in namespace.errors track by page.url" ng-class="navClass(page)" class="api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
             </ul>
 
-            <ul class="nav nav-list well api-list-item fade-in" ng-repeat="module in modules track by module.url">
+            <ul class="nav nav-list well api-list-item" ng-repeat="module in modules track by module.url">
               <li class="nav-header module">
                 <a class="guide" href="{{URL.module}}">module</a>
                 <a class="code" href="{{module.url}}">{{module.name}}</a>
@@ -296,43 +282,43 @@ <h4>{{ key }}</h4>
               <li class="nav-header section" ng-show="module.directives">
                 <a href="{{URL.directive}}" class="guide">directive</a>
               </li>
-              <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" class="expand api-list-item">
+              <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" class="api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
 
               <li class="nav-header section" ng-show="module.filters">
                 <a href="{{URL.filter}}" class="guide">filter</a>
               </li>
-              <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" class="expand api-list-item">
+              <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" class="api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
 
               <li class="nav-header section" ng-show="module.services">
                 <a href="{{URL.service}}" class="guide">service</a>
               </li>
-              <li ng-repeat="service in module.services track by service.instance.url" ng-class="navClass(service.instance, service.provider)" class="api-list-item expand">
+              <li ng-repeat="service in module.services track by service.instance.url" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
                 <a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
                 <a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
               </li>
 
               <li class="nav-header section" ng-show="module.types">
                 <a href="{{URL.type}}" class="guide">Types</a>
               </li>
-              <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" class="expand api-list-item">
+              <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" class="api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
 
               <li class="nav-header section" ng-show="module.globals">
                 <a href="{{URL.api}}" class="global guide">global APIs</a>
                 &nbsp;
               </li>
-              <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="expand api-list-item">
+              <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.id}}</a>
               </li>
 
             </ul>
 
-          </form>
+          </div>
         </div>
       </div>
       <div class="span9">

docs/src/templates/js/docs.js

@@ -622,10 +622,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
     };
   };
 
-  $scope.submitForm = function() {
-    $scope.bestMatch && $location.path($scope.bestMatch.page.url);
-  };
-
   $scope.afterPartialLoaded = function() {
     var currentPageId = $location.path();
     $scope.partialTitle = $scope.currentPage.shortName;
@@ -660,6 +656,9 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
     cookbook: 'Examples',
     error: 'Error Reference'
   };
+
+  populateComponentsList(); 
+
   $scope.$watch(function docsPathWatch() {return $location.path(); }, function docsPathWatchAction(path) {
     // ignore non-doc links which are used in examples
     if (DOCS_PATH.test(path)) {
@@ -675,9 +674,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
         $scope.partialTitle = 'Error: Page Not Found!';
       }
 
-      updateSearch();
-
-
       // Update breadcrumbs
       var breadcrumb = $scope.breadcrumb = [],
         match;
@@ -717,10 +713,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
     }
   });
 
-  $scope.$watch('search', updateSearch);
-
-
-
   /**********************************
    Initialize
    ***********************************/
@@ -752,27 +744,22 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
    Private methods
    ***********************************/
 
-  function updateSearch() {
+  function populateComponentsList() {
+    var area = $location.path().split('/')[1];
+    area = /^index-\w/.test(area) ? 'api' : area;
     var moduleCache = {},
         namespaceCache = {},
-        pages = sections[$location.path().split('/')[1]],
+        pages = sections[area],
         modules = $scope.modules = [],
         namespaces = $scope.namespaces = [],
         globalErrors = $scope.globalErrors = [],
         otherPages = $scope.pages = [],
-        search = $scope.search,
-        bestMatch = {page: null, rank:0};
+        search = $scope.search;
 
     angular.forEach(pages, function(page) {
       var match,
         id = page.id;
 
-      if (!(match = rank(page, search))) return;
-
-      if (match.rank > bestMatch.rank) {
-        bestMatch = match;
-      }
-
       if (page.id == 'index') {
         //skip
       } else if (page.section != 'api') {
@@ -808,10 +795,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
 
     });
 
-    $scope.bestMatch = bestMatch;
-
-    /*************/
-
     function module(name) {
       var module = moduleCache[name];
 
@@ -852,28 +835,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
       }
       return namespace;
     }
-
-    function rank(page, terms) {
-      var ranking = {page: page, rank:0},
-        keywords = page.keywords,
-        title = page.shortName.toLowerCase();
-
-      terms && angular.forEach(terms.toLowerCase().split(' '), function(term) {
-        var index;
-
-        if (ranking) {
-          if (keywords.indexOf(term) == -1) {
-            ranking = null;
-          } else {
-            ranking.rank ++; // one point for each term found
-            if ((index = title.indexOf(term)) != -1) {
-              ranking.rank += 20 - index; // ten points if you match title
-            }
-          }
-        }
-      });
-      return ranking;
-    }
   }