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

Commit 8bf5295

Browse files
author
Robert Messerle
committed
feat(autocomplete): added initial files for autocomplete
feat(autocomplete): adds accessibility support TODO: wire aria-activedescendant as a watched property with a value of the active listItem id refactor(autocomplete): re-organizes aria changes to live in controller chore(autocomplete): removes temporary comments refactor(autocomplete): renames ambiguous directive refactor(styles): renames `visuallyhidden` to `visually-hidden` for consistency. refactor(autocomplete): removes unused template file refactor(autocomplete): uses `$mdConstant` rather than hard-coded values refactor(autocomplete): various cleanup based on feedback refactor(autocomplete): cleans up scope confusion
1 parent 4e930ed commit 8bf5295

16 files changed

+530
-13
lines changed

‎docs/app/css/style.css

-11
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,6 @@ code:not(.highlight) {
8383
-webkit-font-smoothing: auto;
8484
}
8585

86-
.visuallyhidden {
87-
border: 0;
88-
clip: rect(0 0 0 0);
89-
height: 1px;
90-
margin: -1px;
91-
overflow: hidden;
92-
padding: 0;
93-
position: absolute;
94-
text-transform: none;
95-
width: 1px;
96-
}
9786
.md-sidenav-inner {
9887
background: #fff;
9988
}

‎docs/app/partials/menu-link.tmpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<md-button ng-class="{'active' : isSelected()}"
22
ng-href="#{{section.url}}">
33
{{section | humanizeDoc}}
4-
<span class="visuallyhidden"
4+
<span class="visually-hidden"
55
ng-if="isSelected()">
66
current page
77
</span>

‎docs/app/partials/menu-toggle.tmpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{section.name}}
77
<span aria-hidden="true" class="md-toggle-icon"
88
ng-class="{'toggled' : isOpen()}"></span>
9-
<span class="visuallyhidden">
9+
<span class="visually-hidden">
1010
Toggle {{isOpen()? 'expanded' : 'collapsed'}}
1111
</span>
1212
</md-button>

‎src/components/autocomplete/autocomplete-theme.scss

Whitespace-only changes.

‎src/components/autocomplete/autocomplete.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
(function () {
2+
'use strict';
3+
/**
4+
* @ngdoc module
5+
* @name material.components.autocomplete
6+
* @description
7+
* Autocomplete is accomplished through the `<md-autocomplete>` directive. It supports both
8+
* hard-coded lists and remote requests for suggestions.
9+
*/
10+
/*
11+
* @see js folder for autocomplete implementation
12+
*/
13+
angular.module('material.components.autocomplete', [ 'material.core' ]);
14+
})();

‎src/components/autocomplete/autocomplete.scss

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
@keyframes list-out {
2+
0% {
3+
animation-timing-function: linear;
4+
}
5+
50% {
6+
opacity: 0;
7+
height: 40px;
8+
animation-timing-function: ease-in;
9+
}
10+
100% {
11+
height: 0;
12+
opacity: 0;
13+
}
14+
}
15+
@keyframes list-in {
16+
0% {
17+
opacity: 0;
18+
height: 0;
19+
animation-timing-function: ease-out;
20+
}
21+
50% {
22+
opacity: 0;
23+
height: 40px;
24+
}
25+
100% {
26+
opacity: 1;
27+
height: 40px;
28+
}
29+
}
30+
md-content {
31+
overflow: visible;
32+
}
33+
md-autocomplete {
34+
background: white;
35+
box-shadow: 0 2px 5px rgba(black, 0.25);
36+
border-radius: 2px;
37+
display: block;
38+
height: 40px;
39+
position: relative;
40+
overflow: visible;
41+
42+
md-autocomplete-wrap {
43+
display: block;
44+
position: relative;
45+
overflow: visible;
46+
height: 40px;
47+
48+
md-progress-linear {
49+
position: absolute;
50+
bottom: 0; left: 0; width: 100%;
51+
height: 3px;
52+
transition: none;
53+
54+
.md-container {
55+
transition: none;
56+
top: auto;
57+
height: 3px;
58+
}
59+
&.ng-enter {
60+
transition: opacity 0.15s linear;
61+
&.ng-enter-active {
62+
opacity: 1;
63+
}
64+
}
65+
&.ng-leave {
66+
transition: opacity 0.15s linear;
67+
&.ng-leave-active {
68+
opacity: 0;
69+
}
70+
}
71+
}
72+
}
73+
input {
74+
position: absolute;
75+
left: 0;
76+
top: 0;
77+
width: 100%;
78+
box-sizing: border-box;
79+
border: none;
80+
box-shadow: none;
81+
padding: 0 15px;
82+
font: 400 14px/40px Roboto, sans-serif;
83+
height: 40px;
84+
outline: none;
85+
z-index: 2;
86+
background: transparent;
87+
}
88+
button {
89+
position: absolute;
90+
top: 10px;
91+
right: 10px;
92+
line-height: 20px;
93+
z-index: 2;
94+
text-align: center;
95+
width: 20px;
96+
height: 20px;
97+
cursor: pointer;
98+
border: none;
99+
background: #999;
100+
color: white;
101+
border-radius: 50%;
102+
padding: 0;
103+
font-size: 12px;
104+
&.ng-enter {
105+
transform: scale(0);
106+
transition: transform 0.15s ease-out;
107+
&.ng-enter-active {
108+
transform: scale(1);
109+
}
110+
}
111+
&.ng-leave {
112+
transition: transform 0.15s ease-out;
113+
&.ng-leave-active {
114+
transform: scale(0);
115+
}
116+
}
117+
}
118+
ul {
119+
position: absolute;
120+
top: 100%;
121+
left: 0;
122+
right: 0;
123+
background: white;
124+
box-shadow: 0 2px 5px rgba(black, 0.25);
125+
margin: 0;
126+
list-style: none;
127+
padding: 0;
128+
overflow: auto;
129+
max-height: 41px * 5.5;
130+
li {
131+
border-top: 1px solid #ddd;
132+
padding: 0 15px;
133+
font: 400 14px/40px Roboto, sans-serif;
134+
overflow: hidden;
135+
height: 40px;
136+
transition: background 0.15s linear;
137+
cursor: pointer;
138+
margin: 0;
139+
color: #212121;
140+
.highlight {
141+
color: #757575;
142+
}
143+
&:hover,
144+
&.selected {
145+
background: #eee;
146+
}
147+
&.ng-enter {
148+
animation: list-in 0.2s;
149+
}
150+
&.ng-leave {
151+
animation: list-out 0.2s;
152+
}
153+
}
154+
}
155+
}

‎src/components/autocomplete/autocomplete.spec.js

Whitespace-only changes.

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div ng-app="inputBasicDemo" ng-controller="DemoCtrl as ctrl" layout="column">
2+
3+
<md-content class="md-padding" layout="column">
4+
5+
<md-autocomplete
6+
md-selected-item="ctrl.selectedItem"
7+
md-search-text="ctrl.searchText"
8+
md-items="item in ctrl.getItems(ctrl.searchText)"
9+
md-item-text="display"
10+
placeholder="select a state...">
11+
<span md-highlight-text="ctrl.searchText">{{item.display}}</span>
12+
</md-autocomplete>
13+
14+
<p>Current search term: "{{ctrl.searchText}}"</p>
15+
16+
</md-content>
17+
18+
</div>

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
angular
2+
.module('autocompleteDemo', ['ngMaterial'])
3+
.controller('DemoCtrl', DemoCtrl);
4+
5+
function DemoCtrl ($timeout, $q) {
6+
var self = this;
7+
this.selectedItem = null;
8+
this.searchText = null;
9+
this.states = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Deleware,\
10+
Florida, Georgia, Hawaii, Idaho, Illanois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
11+
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
12+
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
13+
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
14+
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
15+
Wisconsin, Wyoming'.split(/, +/g).map(function (state) { return { value: state.toLowerCase(), display: state }; });
16+
this.getItems = getItems;
17+
18+
function getItems (query) {
19+
if (!query) return [];
20+
var deferred = $q.defer();
21+
var lowercaseQuery = angular.lowercase(query);
22+
var results = self.states.filter(function (state) { return state.value.indexOf(lowercaseQuery) === 0; });
23+
$timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
24+
return deferred.promise;
25+
}
26+
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
md-content {
2+
min-height: 500px;
3+
}

0 commit comments

Comments
 (0)