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

Commit

Permalink
fix(linear_progress): Add aria, tests and better animations
Browse files Browse the repository at this point in the history 
This set of changes adds expected progress-bar aria attributes. It also
adds a small unit test suite. Finally, the animations have been
converted to transforms in order to engage hardware acceleration,
particularly on mobile devices.

Fixes #297
  • Loading branch information
@EisenbergEffect
EisenbergEffect committed Sep 30, 2014
1 parent fd7697d commit 8597604
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 118 deletions.
176 changes: 73 additions & 103 deletions src/components/linearProgress/_linearProgress.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,26 @@ $bar-height:5px;
.container {
overflow: hidden;
position: relative;
height: 0;
height: $bar-height;
background-color: $color-blue-100;
top: $bar-height;
@include transform(translate(0, 5px) scale(1, 0));
@include transition(all .3s linear);
}

.container.ready {
height: $bar-height;
top: 0;
@include transform(translate(0, 0) scale(1, 1));
}

.bar {
height: $bar-height;
background-color: $color-blue-500;
position: absolute;
width: 100%;
}

.bar1, .bar2 {
@include transition(width 0.2s linear);
@include transition(all 0.2s linear);
}

&[mode=determinate] {
Expand All @@ -37,15 +38,11 @@ $bar-height:5px;

&[mode=indeterminate] {
.bar1 {
left: 50%;
width: 10%;
@include animation(indeterminate1 5s infinite linear);
@include animation(indeterminate1 4s infinite linear);
}

.bar2 {
left: 0%;
width: 0%;
@include animation(indeterminate2 5s infinite linear);
@include animation(indeterminate2 4s infinite linear);
}
}

Expand All @@ -61,7 +58,7 @@ $bar-height:5px;
width: 100%;
margin-top: 0px;
position: absolute;
background: radial-gradient(#d0d9ff 0%, #d0d9ff 20%, transparent 50%);
background: radial-gradient(#d0d9ff 0%, #d0d9ff 16%, transparent 42%);
background-color: transparent;
background-size: 10px 10px;
background-position: 0px -23px;
Expand All @@ -75,151 +72,124 @@ $bar-height:5px;

&[mode=query] {
.bar2 {
left: 50%;
width: 10%;
@include animation(query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000));
}
}
}

@include keyframes(indeterminate1) {
0% {
width: 0%;
left: 0%;
@include transform(translateX(-25%) scale(.5, 1));
}
10% {
width: 30%;
left: 100%;
@include transform(translateX(25%) scale(.5, 1));
}
19.99% {
width: 30%;
left: 100%;
@include transform(translateX(50%) scale(0, 1));
}
20% {
width: 0%;
left: 0%;
@include transform(translateX(-37.5%) scale(.25, 1));
}
30% {
width: 80%;
left: 100%;
@include transform(translateX(37.5%) scale(.25, 1));
}
30.01% {
width: 0%;
left: 0%;
34.99% {
@include transform(translateX(50%) scale(0, 1));
}
40% {
width: 5%;
left: 30%;
36.99% {
@include transform(translateX(50%) scale(0, 1));
}
50% {
width: 50%;
left: 100%;
37% {
@include transform(translateX(-37.5%) scale(.25, 1));
}
50.01% {
width: 0%;
left: 0%;
47% {
@include transform(translateX(20%) scale(.25, 1));
}
60% {
width: 60%;
left: 20%;
52% {
@include transform(translateX(35%) scale(.05, 1));
}
70% {
width: 5%;
left: 100%;
55% {
@include transform(translateX(35%) scale(.1, 1));
}
58% {
@include transform(translateX(50%) scale(.1, 1));
}
61.99% {
@include transform(translateX(50%) scale(0, 1));
}
70.01% {
width: 0%;
left: 0%;
69.99% {
@include transform(translateX(50%) scale(0, 1));
}
70% {
@include transform(translateX(-37.5%) scale(.25, 1));
}
80% {
width: 50%;
left: 30%;
@include transform(translateX(20%) scale(.25, 1));
}
85% {
@include transform(translateX(35%) scale(.05, 1));
}
88% {
@include transform(translateX(35%) scale(.1, 1));
}
91% {
@include transform(translateX(50%) scale(.1, 1));
}
92.99% {
@include transform(translateX(50%) scale(0, 1));
}
90% {
width: 10%;
left: 80%;
93% {
@include transform(translateX(-50%) scale(0, 1));
}
100% {
width: 20%;
left: 100%;
@include transform(translateX(-25%) scale(.5, 1));
}
}

@include keyframes(indeterminate2) {
0% {
width: 0%;
left: 0%;
@include transform(translateX(-50%) scale(0, 1));
}
10% {
width: 60%;
}
19.99% {
width: 40%;
left: 100%;
25.99%{
@include transform(translateX(-50%) scale(0, 1));
}
20% {
width: 0%;
left: 0%;
28% {
@include transform(translateX(-37.5%) scale(.25, 1));
}
25% {
width: 10%;
left: 10%;
38% {
@include transform(translateX(37.5%) scale(.25, 1));
}
30% {
width: 40%;
left: 30%;
42.99% {
@include transform(translateX(50%) scale(0, 1));
}
40% {
width: 60%;
left: 100%;
46.99% {
@include transform(translateX(50%) scale(0, 1));
}
40.01% {
width: 0%;
left: 0%;
49.99% {
@include transform(translateX(50%) scale(0, 1));
}
50% {
width: 10%;
left: 40%;
@include transform(translateX(-50%) scale(0, 1));
}
60% {
width: 30%;
left: 100%;
}
60.01% {
width: 0%;
left: 0%;
@include transform(translateX(-25%) scale(.5, 1));
}
70% {
width: 10%;
left: 40%;
@include transform(translateX(25%) scale(.5, 1));
}
80% {
width: 5%;
left: 100%;
}
80.01% {
width: 0%;
left: 0%;
}
90% {
width: 70%;
left: 10%;
}
100% {
width: 10%;
left: 100%;
79.99% {
@include transform(translateX(50%) scale(0, 1));
}
}

@include keyframes(query) {
0% {
width: 30%;
left: 70%;
opacity: 1;
@include transform(translateX(35%) scale(.3, 1));
}
100% {
width: 0%;
left: 0%;
opacity: 0;
@include transform(translateX(-50%) scale(0, 1));
}
}

Expand Down
57 changes: 43 additions & 14 deletions src/components/linearProgress/linearProgress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,22 +47,39 @@ function MaterialLinearProgressDirective($timeout) {
'<div class="bar bar1"></div>' +
'<div class="bar bar2"></div>' +
'</div>',
link: function(scope, element, attr) {
var bar1 = angular.element(element[0].querySelector('.bar1')),
bar2 = angular.element(element[0].querySelector('.bar2')),
container = angular.element(element[0].querySelector('.container'));
compile: function compile(tElement, tAttrs, transclude) {
tElement.attr('aria-valuemin', 0);
tElement.attr('aria-valuemax', 100);
tElement.attr('role', 'progressbar');

attr.$observe('value', function(value) {
bar2.css('width', clamp(value).toString() + '%');
});
return function(scope, element, attr) {
var bar1Style = element[0].querySelector('.bar1').style,
bar2Style = element[0].querySelector('.bar2').style,
container = angular.element(element[0].querySelector('.container'));

attr.$observe('secondaryvalue', function(value) {
bar1.css('width', clamp(value).toString() + '%');
});
attr.$observe('value', function(value) {
if(attr.mode == 'query'){
return;
}

$timeout(function() {
container.addClass('ready');
});
var clamped = clamp(value);
element.attr('aria-valuenow', clamped);

var transform = transformTable[clamped];
bar2Style.transform = transform;

This comment has been minimized.

Sign in to view

Copy link
@ajoslin

ajoslin Sep 30, 2014

Contributor

We can use bar1Style[$materialEffects.TRANSFORM] here to get the properly-prefixed property.
bar2Style.webkitTransform = transform;
});

attr.$observe('secondaryvalue', function(value) {
var transform = transformTable[clamp(value)];
bar1Style.transform = transform;
bar1Style.webkitTransform = transform;

This comment has been minimized.

Sign in to view

Copy link
@ajoslin

ajoslin Sep 30, 2014

Contributor

Same here. $materialEffects.TRANSFORM.
});

$timeout(function() {
container.addClass('ready');
});
}
}
};
}
Expand All @@ -71,6 +88,18 @@ function MaterialLinearProgressDirective($timeout) {
// Private Methods
// **********************************************************

var transformTable = new Array(101);

for(var i = 0; i < 101; i++){
transformTable[i] = makeTransform(i);
}

function makeTransform(value){
var scale = value/100;
var translateX = (value-100)/2;
return 'translateX(' + translateX.toString() + '%) scale(' + scale.toString() + ', 1)';
}

function clamp(value) {
if (value > 100) {
return 100;
Expand All @@ -80,5 +109,5 @@ function clamp(value) {
return 0;
}

return value || 0;
return Math.ceil(value || 0);
}
Loading

0 comments on commit 8597604

Please sign in to comment.