Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
fix(ngdocs): remove the side search bar
Browse files Browse the repository at this point in the history 
BREAKING CHANGE

The side search bar on the docs page has been removed in favor of the
top search bar.
  • Loading branch information
@matsko
matsko committed Oct 23, 2013
1 parent 06557aa commit 6c20ec1
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 126 deletions.
42 changes: 0 additions & 42 deletions docs/src/templates/css/animations.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
24 changes: 12 additions & 12 deletions docs/src/templates/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
36 changes: 11 additions & 25 deletions docs/src/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
55 changes: 8 additions & 47 deletions docs/src/templates/js/docs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)) {
Expand All @@ -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;
Expand Down Expand Up @@ -717,10 +713,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
}
});

$scope.$watch('search', updateSearch);



/**********************************
Initialize
***********************************/
Expand Down Expand Up @@ -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') {
Expand Down Expand Up @@ -808,10 +795,6 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie

});

$scope.bestMatch = bestMatch;

/*************/

function module(name) {
var module = moduleCache[name];

Expand Down Expand Up @@ -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;
}
}


Expand Down

0 comments on commit 6c20ec1

Please sign in to comment.