From d8d5000ae53c30c940a7c85a7e0e6df724c858bb Mon Sep 17 00:00:00 2001 From: Shuwen Qian Date: Wed, 17 Jun 2015 17:29:09 -0500 Subject: [PATCH] Adding mm-progress-bar 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 --- src/mm-progress-bar/doc.json | 99 +++++++++++++ src/mm-progress-bar/example.html | 3 + src/mm-progress-bar/index.html | 170 +++++++++++++++++++++++ src/mm-progress-bar/mm-progress-bar.html | 20 +++ src/mm-progress-bar/mm-progress-bar.js | 78 +++++++++++ src/mm-progress-bar/mm-progress-bar.scss | 50 +++++++ test/test-mm-progress-bar.html | 18 +++ test/test-mm-progress-bar.js | 32 +++++ 8 files changed, 470 insertions(+) create mode 100644 src/mm-progress-bar/doc.json create mode 100644 src/mm-progress-bar/example.html create mode 100644 src/mm-progress-bar/index.html create mode 100644 src/mm-progress-bar/mm-progress-bar.html create mode 100644 src/mm-progress-bar/mm-progress-bar.js create mode 100644 src/mm-progress-bar/mm-progress-bar.scss create mode 100644 test/test-mm-progress-bar.html create mode 100644 test/test-mm-progress-bar.js diff --git a/src/mm-progress-bar/doc.json b/src/mm-progress-bar/doc.json new file mode 100644 index 00000000..9e7f9441 --- /dev/null +++ b/src/mm-progress-bar/doc.json @@ -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" + }, + ] +} \ No newline at end of file diff --git a/src/mm-progress-bar/example.html b/src/mm-progress-bar/example.html new file mode 100644 index 00000000..ae082127 --- /dev/null +++ b/src/mm-progress-bar/example.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/mm-progress-bar/index.html b/src/mm-progress-bar/index.html new file mode 100644 index 00000000..12e9f68f --- /dev/null +++ b/src/mm-progress-bar/index.html @@ -0,0 +1,170 @@ + + + + + + + + + +
+

mm-progress-bar: Default state

+ + +
+ +

mm-progress-bar: Complete

+ + +
+ +

mm-progress-bar: Set custom fill color and percent complete

+ + +
+ +

mm-progress-bar: Custom background color

+ + +
+ +

mm-progress-bar: Custom size (small)

+ + +
+ +

mm-progress-bar: Custom size

+ + +
+
+
+

mm-progress-bar: Indeterminate state

+ + +
+ +

mm-progress-bar: Indeterminate state with custom colors

+ + +
+ +

mm-progress-bar: Custom size (small) with indeterminate state

+ + +
+ +

mm-progress-bar: Change percent progress animation

+ + +
+ +

mm-progress-bar: Change indeterminate state

+ +
+ + + + \ No newline at end of file diff --git a/src/mm-progress-bar/mm-progress-bar.html b/src/mm-progress-bar/mm-progress-bar.html new file mode 100644 index 00000000..4101f435 --- /dev/null +++ b/src/mm-progress-bar/mm-progress-bar.html @@ -0,0 +1,20 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/mm-progress-bar/mm-progress-bar.js b/src/mm-progress-bar/mm-progress-bar.js new file mode 100644 index 00000000..34f4df84 --- /dev/null +++ b/src/mm-progress-bar/mm-progress-bar.js @@ -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 || {}); \ No newline at end of file diff --git a/src/mm-progress-bar/mm-progress-bar.scss b/src/mm-progress-bar/mm-progress-bar.scss new file mode 100644 index 00000000..fc359c85 --- /dev/null +++ b/src/mm-progress-bar/mm-progress-bar.scss @@ -0,0 +1,50 @@ +/** + * @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 + +*/ +@import "_bourbon"; +@import "_color"; +@import "_mixins"; + +:host { + display: block; + font-size: inherit; + height: auto; + width: 100%; +} + +.bar { + border-style: solid; + border-width: 1px; + border-radius: 9999px; + box-sizing: border-box; + display: block; + overflow: hidden; + position: relative; +} + +.fill { + border-radius: 9999px; + display: block; + height: 100%; + transition: none; + transition: width 1500ms ease; +} + +:host([indeterminate]) .fill { + @include animation(candyStripe 2s linear infinite); + background-size: 20px 20px; + background-repeat: repeat; + border-radius: 0; +} + +@include keyframes(candyStripe) { + from { + background-position: 0 0; + } + to { + background-position: 20px 0; + } +} \ No newline at end of file diff --git a/test/test-mm-progress-bar.html b/test/test-mm-progress-bar.html new file mode 100644 index 00000000..f13dd63d --- /dev/null +++ b/test/test-mm-progress-bar.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/test-mm-progress-bar.js b/test/test-mm-progress-bar.js new file mode 100644 index 00000000..c165f3b9 --- /dev/null +++ b/test/test-mm-progress-bar.js @@ -0,0 +1,32 @@ +var should = chai.should(); + +describe("mm-progress-bar", function() { + + it("should have an indeterminate state", function() { + var normal = document.querySelector('#myProgressBar'); + var indet = document.querySelector('#indeterminateBar'); + normal.indeterminate.should.equal(false); + indet.indeterminate.should.equal(true); + }); + + it("should have a filled bar when indeterminate", function() { + var indet = document.querySelector('#indeterminateBar .fill'); + indet.style.width.should.equal("100%"); + }); + + it("should have numerical height and width", function() { + var myPB = document.querySelector('#myProgressBar'); + var indet = document.querySelector('#indeterminateBar'); + myPB.height.should.be.a('number'); + myPB.width.should.be.a('number'); + indet.height.should.be.a('number'); + indet.width.should.be.a('number'); + }); + + it("should have a percent complete between 0 and 100", function() { + var myPB = document.querySelector('#myProgressBar'); + myPB.percentComplete.should.be.a('number') + .and.be.at.least(0) + .and.be.at.most(100); + }); +}); \ No newline at end of file