Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 7d2deb7

Browse files
Marcy SuttonThomasBurleson
Marcy Sutton
authored and
ThomasBurleson
committed
feat(autocomplete): custom template demo
Closes #2505. Closes #2835.
1 parent b4533b5 commit 7d2deb7

6 files changed

Lines changed: 203 additions & 10 deletions

File tree

‎docs/app/css/style.css‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -750,16 +750,6 @@ ul.methods > li:first-child > *:first-child {
750750
padding-top: 0;
751751
}
752752

753-
/* Styles for Windows High Contrast mode */
754-
@media screen and (-ms-high-contrast: active) {
755-
a {
756-
text-decoration: underline;
757-
}
758-
iframe, hljs pre {
759-
border: 1px solid #fff;
760-
}
761-
}
762-
763753

764754
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
765755
display: none !important;
@@ -807,3 +797,42 @@ docs-demo .doc-demo-content {
807797
.service-desc > p:last-child {
808798
margin-bottom: 0;
809799
}
800+
801+
/* ---------------------
802+
* Demo Workarounds
803+
*
804+
* Necessary for component demos that append DOM subtrees outside of the demo app.
805+
* Because our docs build prepends CSS classes onto custom demo styles provided for developers,
806+
* these styles are needed for the docs website.
807+
*/
808+
.autocomplete-custom-template li {
809+
border-bottom: 1px solid #ccc;
810+
height: auto;
811+
padding-top: 8px;
812+
padding-bottom: 8px;
813+
white-space: normal;
814+
}
815+
.autocomplete-custom-template li:last-child {
816+
border-bottom-width: 0;
817+
}
818+
.autocomplete-custom-template .item-title,
819+
.autocomplete-custom-template .item-metadata {
820+
display: block;
821+
line-height: 2;
822+
}
823+
.autocomplete-custom-template .item-title md-icon {
824+
height: 18px;
825+
width: 18px;
826+
}
827+
828+
829+
/* Styles for Windows High Contrast mode */
830+
@media screen and (-ms-high-contrast: active) {
831+
a {
832+
text-decoration: underline;
833+
}
834+
iframe, hljs pre {
835+
border: 1px solid #fff;
836+
}
837+
}
838+

‎docs/app/img/icons/octicon-repo.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/autocomplete/demoCustomTemplate/img/icons/octicon-repo.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/autocomplete/demoCustomTemplate/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div ng-controller="DemoCtrl as ctrl" layout="column">
2+
<md-content layout-padding layout="column">
3+
<form ng-submit="$event.preventDefault()">
4+
<p>Use <code>&lt;md-autocomplete&gt;</code> with custom templates to show styled autocomplete results.</p>
5+
<md-autocomplete
6+
ng-disabled="ctrl.isDisabled"
7+
md-no-cache="ctrl.noCache"
8+
md-selected-item="ctrl.selectedItem"
9+
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
10+
md-search-text="ctrl.searchText"
11+
md-selected-item-change="ctrl.selectedItemChange(item)"
12+
md-items="item in ctrl.querySearch(ctrl.searchText)"
13+
md-item-text="item.name"
14+
md-min-length="0"
15+
placeholder="Pick an Angular repository"
16+
md-menu-class="autocomplete-custom-template">
17+
<md-item-template>
18+
<span class="item-title">
19+
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
20+
<span> {{item.name}} </span>
21+
</span>
22+
<span class="item-metadata">
23+
<span class="item-metastat">
24+
<strong>{{item.watchers}}</strong> watchers
25+
</span>
26+
<span class="item-metastat">
27+
<strong>{{item.forks}}</strong> forks
28+
</span>
29+
</span>
30+
</md-item-template>
31+
</md-autocomplete>
32+
</form>
33+
</md-content>
34+
</div>
35+

‎src/components/autocomplete/demoCustomTemplate/script.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
(function () {
2+
'use strict';
3+
angular
4+
.module('autocompleteCustomTemplateDemo', ['ngMaterial'])
5+
.controller('DemoCtrl', DemoCtrl);
6+
7+
function DemoCtrl ($timeout, $q, $log) {
8+
var self = this;
9+
10+
self.simulateQuery = false;
11+
self.isDisabled = false;
12+
13+
self.repos = loadAll();
14+
self.querySearch = querySearch;
15+
self.selectedItemChange = selectedItemChange;
16+
self.searchTextChange = searchTextChange;
17+
18+
// ******************************
19+
// Internal methods
20+
// ******************************
21+
22+
/**
23+
* Search for repos... use $timeout to simulate
24+
* remote dataservice call.
25+
*/
26+
function querySearch (query) {
27+
var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
28+
deferred;
29+
if (self.simulateQuery) {
30+
deferred = $q.defer();
31+
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
32+
return deferred.promise;
33+
} else {
34+
return results;
35+
}
36+
}
37+
38+
function searchTextChange(text) {
39+
$log.info('Text changed to ' + text);
40+
}
41+
42+
function selectedItemChange(item) {
43+
$log.info('Item changed to ' + JSON.stringify(item));
44+
}
45+
46+
/**
47+
* Build `components` list of key/value pairs
48+
*/
49+
function loadAll() {
50+
var repos = [
51+
{
52+
'name' : 'Angular 1',
53+
'url' : 'https://github.com/angular/angular.js',
54+
'watchers' : '3,623',
55+
'forks' : '16,175',
56+
},
57+
{
58+
'name' : 'Angular 2',
59+
'url' : 'https://github.com/angular/angular',
60+
'watchers' : '469',
61+
'forks' : '760',
62+
},
63+
{
64+
'name' : 'Angular Material',
65+
'url' : 'https://github.com/angular/material',
66+
'watchers' : '727',
67+
'forks' : '1,241',
68+
},
69+
{
70+
'name' : 'Bower Material',
71+
'url' : 'https://github.com/angular/bower-material',
72+
'watchers' : '42',
73+
'forks' : '84',
74+
},
75+
{
76+
'name' : 'Material Start',
77+
'url' : 'https://github.com/angular/material-start',
78+
'watchers' : '81',
79+
'forks' : '303',
80+
}
81+
];
82+
return repos.map( function (repo) {
83+
repo.value = repo.name.toLowerCase();
84+
return repo;
85+
});
86+
}
87+
88+
/**
89+
* Create filter function for a query string
90+
*/
91+
function createFilterFor(query) {
92+
var lowercaseQuery = angular.lowercase(query);
93+
94+
return function filterFn(item) {
95+
return (item.value.indexOf(lowercaseQuery) === 0);
96+
};
97+
98+
}
99+
}
100+
})();

‎src/components/autocomplete/demoCustomTemplate/style.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.autocomplete-custom-template li {
2+
border-bottom: 1px solid #ccc;
3+
height: auto;
4+
padding-top: 8px;
5+
padding-bottom: 8px;
6+
white-space: normal;
7+
}
8+
.autocomplete-custom-template li:last-child {
9+
border-bottom-width: 0;
10+
}
11+
.autocomplete-custom-template .item-title,
12+
.autocomplete-custom-template .item-metadata {
13+
display: block;
14+
line-height: 2;
15+
}
16+
.autocomplete-custom-template .item-title md-icon {
17+
height: 18px;
18+
width: 18px;
19+
}

0 commit comments

Comments
 (0)