refact(docs-app): move filtered API list into a directive
Each API index page now displays data from an `api-list.json` file found locally to that page. This lets us have different API lists for TS, JS and Dart.
This commit is contained in:
Peter Bacon Darwin
Naomi Black
parent
b298b9c1af
commit
05a272a116
|
|
@ -17,6 +17,7 @@ script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular
|
|||
script(src="/resources/js/site.js")
|
||||
script(src="/resources/js/controllers/app-controller.js")
|
||||
script(src="/resources/js/directives/cheatsheet.js")
|
||||
script(src="/resources/js/directives/api-list.js")
|
||||
script(src="/resources/js/directives/bio.js")
|
||||
script(src="/resources/js/directives/bold.js")
|
||||
script(src="/resources/js/directives/code.js")
|
||||
|
|
|
|||
|
|
@ -1,18 +1 @@
|
|||
div(ng-cloak).banner
|
||||
dl.api-key
|
||||
dt Display:
|
||||
dd.directive(ng-class='{ active: apiType === "directive" }' ng-click='setType("directive")') Directive
|
||||
dd.class(ng-class='{ active: apiType === "class" }' ng-click='setType("class")') Class
|
||||
dd.interface(ng-class='{ active: apiType === "interface" }' ng-click='setType("interface")') Interface
|
||||
dd.function(ng-class='{ active: apiType === "function" }' ng-click='setType("function")') Function
|
||||
dd.const(ng-class='{ active: apiType === "const" }' ng-click='setType("const")') Const or Enum
|
||||
dd.var(ng-class='{ active: apiType === "var" }' ng-click='setType("var")') Variable
|
||||
input.api-filter(placeholder='Filter', ng-model='apiFilter')
|
||||
article(class="l-content-small grid-fluid docs-content")
|
||||
div(ng-repeat='section in apiSections' ng-if="(apiList[section.name] | filter: { title: apiFilter, docType: apiType }).length" ng-cloak)
|
||||
h3 {{ section.title }}
|
||||
ul.api-list
|
||||
li.api-item(ng-repeat='item in apiList[section.name] | filter: { title: apiFilter, docType: apiType }')
|
||||
a(ng-href='{{ item.path }}')
|
||||
span(class='symbol {{ item.docType }}')
|
||||
| {{ item.title }}
|
||||
api-list(src="api-list.json")
|
||||
|
|
@ -1,18 +1 @@
|
|||
div(ng-cloak).banner
|
||||
dl.api-key
|
||||
dt Display:
|
||||
dd.directive(ng-class='{ active: appCtrl.apiType === "directive" }' ng-click='appCtrl.setType("directive")') Directive
|
||||
dd.class(ng-class='{ active: appCtrl.apiType === "class" }' ng-click='appCtrl.setType("class")') Class
|
||||
dd.interface(ng-class='{ active: appCtrl.apiType === "interface" }' ng-click='appCtrl.setType("interface")') Interface
|
||||
dd.function(ng-class='{ active: appCtrl.apiType === "function" }' ng-click='appCtrl.setType("function")') Function
|
||||
dd.const(ng-class='{ active: appCtrl.apiType === "const" }' ng-click='appCtrl.setType("const")') Const or Enum
|
||||
dd.var(ng-class='{ active: appCtrl.apiType === "var" }' ng-click='appCtrl.setType("var")') Variable
|
||||
input.api-filter(placeholder='Filter', ng-model='appCtrl.apiFilter')
|
||||
article(class="l-content-small grid-fluid docs-content")
|
||||
div(ng-repeat='section in appCtrl.apiSections' ng-if="(appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }).length" ng-cloak)
|
||||
h3 {{ section.title }}
|
||||
ul.api-list
|
||||
li.api-item(ng-repeat='item in appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }')
|
||||
a(ng-href='{{ item.path }}')
|
||||
span(class='symbol {{ item.docType }}')
|
||||
| {{ item.title }}
|
||||
api-list(src="api-list.json")
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
content: 'N';
|
||||
background: #757575;
|
||||
}
|
||||
&.var:before {
|
||||
&.var:before,
|
||||
&.let:before {
|
||||
content: 'V';
|
||||
background: #9575cd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
/*
|
||||
* Apllication Controller
|
||||
* Application Controller
|
||||
*
|
||||
*/
|
||||
|
||||
angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', function ($mdDialog, $timeout, $http, $sce) {
|
||||
var vm = this;
|
||||
|
||||
$http.get('/resources/js/app-data.json').then(function(response) {
|
||||
vm.apiList = response.data;
|
||||
});
|
||||
|
||||
vm.showDocsNav = false;
|
||||
vm.showMainNav = false;
|
||||
vm.showMenu = false;
|
||||
|
|
@ -29,11 +25,6 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct
|
|||
vm.showMenu = !vm.showMenu;
|
||||
};
|
||||
|
||||
vm.setType = function (type) {
|
||||
if (type === vm.apiType) vm.apiType = '';
|
||||
else vm.apiType = type;
|
||||
};
|
||||
|
||||
vm.openFeedback = function() {
|
||||
var configuration = {
|
||||
'productId': '410509',
|
||||
|
|
@ -43,21 +34,6 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct
|
|||
userfeedback.api.startFeedback(configuration);
|
||||
};
|
||||
|
||||
vm.apiSections = [
|
||||
{ name: 'angular2/core', title: 'angular2/core' },
|
||||
{ name: 'angular2/common', title: 'angular2/common' },
|
||||
{ name: 'angular2/animate', title: 'angular2/animate' },
|
||||
{ name: 'angular2/http', title: 'angular2/http' },
|
||||
{ name: 'angular2/http/testing', title: 'angular2/http/testing' },
|
||||
{ name: 'angular2/instrumentation', title: 'angular2/instrumentation' },
|
||||
{ name: 'angular2/platform/browser', title: 'angular2/platform/browser' },
|
||||
{ name: 'angular2/router', title: 'angular2/router' },
|
||||
{ name: 'angular2/router/testing', title: 'angular2/router/testing' },
|
||||
{ name: 'angular2/testing', title: 'angular2/testing' }
|
||||
];
|
||||
vm.apiType = '';
|
||||
vm.apiFilter = '';
|
||||
|
||||
/*
|
||||
* Prettify Code
|
||||
*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
angularIO.directive('apiList', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
template:
|
||||
'<div ng-cloak="ng-cloak" class="banner">' +
|
||||
' <dl class="api-key">' +
|
||||
' <dt>Display:</dt>' +
|
||||
' <dd ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)" class="{{apiType.cssClass}}">{{apiType.title}}</dd>' +
|
||||
' </dl>' +
|
||||
' <input placeholder="Filter" ng-model="$ctrl.apiFilter" class="api-filter">' +
|
||||
'</div>' +
|
||||
'<article class="l-content-small grid-fluid docs-content">' +
|
||||
' <div ng-repeat="section in $ctrl.filteredSections" ng-cloak="ng-cloak">' +
|
||||
' <h3>{{ section.title }}</h3>' +
|
||||
' <ul class="api-list">' +
|
||||
' <li ng-repeat="item in section.items" class="api-item">' +
|
||||
' <a ng-href="{{ item.path }}"><span class="symbol {{ item.docType }}"></span>{{ item.title }}</a>' +
|
||||
' </li>' +
|
||||
' </ul>' +
|
||||
' </div>' +
|
||||
'</article>',
|
||||
controllerAs: '$ctrl',
|
||||
controller: function($scope, $attrs, $http) {
|
||||
var $ctrl = this;
|
||||
|
||||
$ctrl.apiType = null;
|
||||
$ctrl.apiFilter = '';
|
||||
$ctrl.filteredSections = [];
|
||||
|
||||
$ctrl.setType = function (type) {
|
||||
if (type === $ctrl.apiType) $ctrl.apiType = null;
|
||||
else $ctrl.apiType = type;
|
||||
};
|
||||
|
||||
$http.get($attrs.src).then(function(response) {
|
||||
$ctrl.sections = response.data;
|
||||
});
|
||||
|
||||
$ctrl.apiTypes = [
|
||||
{ cssClass: 'directive', title: 'Directive', matches: ['directive'] },
|
||||
{ cssClass: 'class', title: 'Class', matches: ['class'] },
|
||||
{ cssClass: 'interface', title: 'Interface', matches: ['interface'] },
|
||||
{ cssClass: 'function', title: 'function', matches: ['function'] },
|
||||
{ cssClass: 'const', title: 'Const or Enum', matches: ['const', 'enum'] },
|
||||
{ cssClass: 'var', title: 'Variable', matches: ['var', 'let'] }
|
||||
];
|
||||
|
||||
$scope.$watchGroup(
|
||||
[function() { return $ctrl.apiFilter}, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
|
||||
function(filter, type, sections) {
|
||||
$ctrl.filteredSections.length = 0;
|
||||
angular.forEach($ctrl.sections, function(section, title) {
|
||||
var filteredItems = section.filter(function(item) {
|
||||
var matchesDocType = !$ctrl.apiType || $ctrl.apiType.matches.indexOf(item.docType) !== -1;
|
||||
var matchesTitle = $ctrl.apiFilter == '' || item.title.toLowerCase().indexOf($ctrl.apiFilter.toLowerCase()) !== -1;
|
||||
return matchesDocType && matchesTitle;
|
||||
});
|
||||
if (filteredItems.length) {
|
||||
$ctrl.filteredSections.push({ title: title, items: filteredItems });
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -99,9 +99,9 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
|
|||
});
|
||||
|
||||
computePathsProcessor.pathTemplates.push({
|
||||
docTypes: ['json-data'],
|
||||
pathTemplate: path.resolve(PUBLIC_PATH, 'resources/js/${id}'),
|
||||
outputPathTemplate: '${path}.json'
|
||||
docTypes: ['api-list-data'],
|
||||
pathTemplate: 'api-list.json',
|
||||
outputPathTemplate: '${path}'
|
||||
});
|
||||
|
||||
computePathsProcessor.pathTemplates.push({
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ module.exports = function addJadeDataDocsProcessor() {
|
|||
var modules = [];
|
||||
|
||||
var appDataDoc = {
|
||||
id: 'app-data',
|
||||
aliases: ['app-data'],
|
||||
docType: 'json-data',
|
||||
id: 'api-list-data',
|
||||
aliases: ['api-list-data'],
|
||||
docType: 'api-list-data',
|
||||
data: {}
|
||||
};
|
||||
extraDocs.push(appDataDoc);
|
||||
|
|
|
|||
Loading…
Reference in New Issue