Skip to content

Commit

Permalink
Adding mm-progress-bar
Browse files Browse the repository at this point in the history 
Begin implementing mm-progress-bar

Custom color, indeterminate state, progress change transition

Completed mm-progress-bar + documentation, yet to test

Fix filename

Add tests for mm-progress-bar

Only import mm-progress-bar instead of all of strand to test-mm-progress-bar.html

Changes per review: privatize update methods, add and test clamping behavior on progress, change hard-coded default colors to values on Colors object

Responsive width, replace fill-indeterminate class with :host([indeterminate]) .fill, updated docs

use em for height

Update doc.json

Change default height back to px to maintain consistency
  • Loading branch information
Shuwen Qian committed Jun 23, 2015
1 parent dde3df8 commit d8d5000
Show file tree
Hide file tree
Showing 8 changed files with 470 additions and 0 deletions.
99 changes: 99 additions & 0 deletions src/mm-progress-bar/doc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
{
"name":"mm-progress-bar",
"description":"A fully-styled progress bar.",
"attributes": [
{
"name":"background-color",
"type":"String",
"optional":true,
"description":"The background color of the progress bar, as hex code or named color.",
"default":"Colors.A1"
},
{
"name":"fill-color",
"type":"String",
"optional":true,
"description":"The color of the progress bar, as hex code or named color.",
"default":"Colors.D3"
},
{
"name":"height",
"type":"Number",
"optional":true,
"description":"Height of progress bar, in px",
"default":"null",
},
{
"name":"indeterminate",
"type":"Boolean",
"optional":true,
"description":"Whether the progress bar is in an indeterminate state.",
"default":"false"
},
{
"name":"percent-complete",
"type":"Number",
"optional":true,
"description":"How full the progress bar is. 0 is empty, 100 is full.",
"default":"0",
},
{
"name":"secondary-fill-color",
"type":"String",
"optional":true,
"default":"Colors.D5",
"description":"The secondary color for the striped progress bar, as hex code or named color."
},
{
"name":"width",
"type":"Number",
"optional":true,
"description":"Width of progress bar, in px (fits to container by default)",
"default":"null"
},
],
"properties":[
{
"name":"backgroundColor",
"type":"String",
"description":"The background color of the progress bar, as hex code or named color.",
"default":"#131313"
},
{
"name":"fillColor",
"type":"String",
"description":"The color of the progress bar, as hex code or named color.",
"default":"#367ABE"
},
{
"name":"height",
"type":"Number",
"description":"Height of progress bar, in px",
"default":"null",
},
{
"name":"indeterminate",
"type":"Boolean",
"description":"Whether the progress bar is in an indeterminate state.",
"default":"false"
},
{
"name":"percentComplete",
"type":"Number",
"description":"How full the progress bar is. 0 is empty, 100 is full.",
"default":"0",
},
{
"name":"secondaryFillColor",
"type":"String",
"default":"#66ADF2",
"description":"The secondary color for the striped progress bar, as hex code or named color."
},
{
"name":"width",
"type":"Number",
"description":"Width of progress bar, in px (fits to container by default)",
"default":"null"
},
]
}
3 changes: 3 additions & 0 deletions src/mm-progress-bar/example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<mm-progress-bar percent-complete="100"></mm-progress-bar>
<mm-progress-bar fill-color="hotpink" percent-complete="25"></mm-progress-bar>
<mm-progress-bar indeterminate height="8" width="62" percent-complete="50"></mm-progress-bar>
170 changes: 170 additions & 0 deletions src/mm-progress-bar/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="import" href="mm-progress-bar.html">
<style type="text/css">
body, html {
height: 100%;
min-height: 100%;
}

body {
margin:0;
padding:0;
background: #eee;
}

.col {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
padding: 0 20px;
/*font-size: 0;*/
}

.col.c0 {
width:400px;
}

.col.c1 {
width:300px;
}

.col.c2 {
width:200px;
}

.col.c3 {
width:500px;
}

.col.c4 {
width:50%;
}

.col:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

p {
font-family: sans-serif;
color: #333;
font-size: 12px;
line-height: 18px;
margin: 20px 0;
}

.bold { font-weight: bold; }

hr {
border: 0;
display: block;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
height: 0px;
margin-top: 20px;
}

.vr {
width:0px;
height: 100%;
border-right: 1px solid #fff;
border-left: 1px solid #ccc;
margin-right: -1px;
margin-left: -1px;
display: block;
float: left;
}

mm-checkbox:not(:last-child) {
margin-right: 20px;
}

.cbc {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="col c4">
<p><span class="bold">mm-progress-bar</span>: Default state</p>
<mm-progress-bar></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Complete</p>
<mm-progress-bar percent-complete="100"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Set custom fill color and percent complete</p>
<mm-progress-bar fill-color="hotpink" percent-complete="25"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Custom background color</p>
<mm-progress-bar fill-color="#469bef" background-color="#d9d9d9" percent-complete="50"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Custom size (small)</p>
<mm-progress-bar height="8" width="262" percent-complete="50"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Custom size</p>
<mm-progress-bar height="20" width="125" percent-complete="50"></mm-progress-bar>

</div>
<div class="vr"></div>
<div class="col c4">
<p><span class="bold">mm-progress-bar</span>: Indeterminate state</p>
<mm-progress-bar indeterminate></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Indeterminate state with custom colors</p>
<mm-progress-bar indeterminate background-color="#d9d9d9" fill-color="hotpink" secondary-fill-color="#f1c40f"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Custom size (small) with indeterminate state</p>
<mm-progress-bar indeterminate height="8" width="62" percent-complete="50"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Change percent progress animation</p>
<mm-progress-bar id="myProgressBar"></mm-progress-bar>

<hr>

<p><span class="bold">mm-progress-bar</span>: Change indeterminate state</p>
<mm-progress-bar id="myIndeterminateProgressBar" percent-complete="25"></mm-progress-bar>
</div>

<script>
var p = document.querySelector('#myProgressBar');
setInterval(function() {
if(p.percentComplete > 0) {
p.percentComplete = 0;
} else {
p.percentComplete = 100;
}
}, 5000);

var q = document.querySelector('#myIndeterminateProgressBar');
setInterval(function() {
q.indeterminate = !q.indeterminate;
}, 5000);
</script>
</body>
</html>
20 changes: 20 additions & 0 deletions src/mm-progress-bar/mm-progress-bar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!--
* @license
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../shared/js/colors.html"/>
<link rel="import" href="../shared/behaviors/stylable.html"/>

<dom-module id="mm-progress-bar">
<link rel="import" type="css" href="mm-progress-bar.css"/>
<template>
<div class="bar" style$="{{ _updateBarStyle(backgroundColor, height, width) }}">
<div class="fill" style$="{{ _updateFillStyle(percentComplete, fillColor, secondaryFillColor, indeterminate) }}"></div>
</div>
</template>
</dom-module>

<script src="mm-progress-bar.js"></script>
78 changes: 78 additions & 0 deletions src/mm-progress-bar/mm-progress-bar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/**
* @license
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
*/
(function(scope) {

scope.ProgressBar = Polymer({
is: 'mm-progress-bar',

behaviors: [
StrandTraits.Stylable
],

properties: {
backgroundColor: {
type: String,
value: Colors.A1
},
fillColor: {
type: String,
value: Colors.D3
},
height: {
type: Number,
value: 12
},
indeterminate: {
reflectToAttribute: true,
type: Boolean,
value: false
},
percentComplete: {
observer: '_clampPercentComplete',
type: Number,
value: 0
},
secondaryFillColor: {
type: String,
value: Colors.D5
},
width: {
type: Number,
value: null,
}
},

_clampPercentComplete: function() {
this.percentComplete = Math.max(Math.min(this.percentComplete, 100), 0);
},

_updateBarStyle: function(backgroundColor, height, width) {
return this.styleBlock({
backgroundColor: backgroundColor,
borderColor: backgroundColor,
height: height+'px',
maxWidth: width ? width+'px' : '100%'
});
},

_updateFillStyle: function(percentComplete, fillColor, secondaryFillColor, indeterminate) {
if(indeterminate) {
return this.styleBlock({
backgroundImage: 'repeating-linear-gradient(-45deg,'+fillColor+','+fillColor+' 7px,'+secondaryFillColor+' 7px,'+secondaryFillColor+' 14px)',
width: '100%'
});
} else {
return this.styleBlock({
backgroundColor: fillColor,
width: percentComplete+'%',
});
}
},

});

})(window.Strand = window.Strand || {});
Loading

0 comments on commit d8d5000

Please sign in to comment.