Implement progress bar component (closes google#88)

commit b8cb14a
Author: Alexander Surma <surma@surmair.de>
Date:   Wed Apr 1 12:16:57 2015 +0100

    Invert CSS hack logic

commit f58bf29
Author: Alexander Surma <surma@surmair.de>
Date:   Tue Mar 31 15:43:28 2015 +0100

    Use feature detection

commit 095789e
Author: Alexander Surma <surma@surmair.de>
Date:   Tue Mar 31 15:34:31 2015 +0100

    Revert "Add browser detection"

    This reverts commit 82f6c28.

commit 71d3f14
Author: Alexander Surma <surma@surmair.de>
Date:   Tue Mar 31 14:37:17 2015 +0100

    Colorize aux bar on IE and FF

commit 82f6c28
Author: Alexander Surma <surma@surmair.de>
Date:   Tue Mar 31 14:15:43 2015 +0100

    Add browser detection

commit 06f347b
Author: Alexander Surma <surma@surmair.de>
Date:   Tue Mar 31 14:01:51 2015 +0100

    Externalize SVG again

commit cfdc4f2
Author: Alexander Surma <surma@surmair.de>
Date:   Mon Mar 30 15:47:13 2015 +0100

    Adhere to styleguide

commit cf4c72a
Author: Alexander Surma <surma@surmair.de>
Date:   Mon Mar 30 12:50:38 2015 +0100

    Inline SVG for progress bar

commit bc9e77d
Author: Alexander Surma <surma@surmair.de>
Date:   Mon Mar 30 12:46:44 2015 +0100

    Add unit tests for progress bar

commit 9e70b49
Author: Alexander Surma <surma@surmair.de>
Date:   Fri Mar 27 17:48:11 2015 +0000

    Speed up buffering animation

commit 45e7dd3
Author: Alexander Surma <surma@surmair.de>
Date:   Fri Mar 27 16:15:03 2015 +0000

    Add circle svg for buffer bar

commit ade9276
Author: Alexander Surma <surma@surmair.de>
Date:   Fri Mar 27 15:24:17 2015 +0000

    Fix colors

commit ba10830
Author: Alexander Surma <surma@surmair.de>
Date:   Fri Mar 27 14:54:27 2015 +0000

    Implement indeterminate progress bar

commit 71bac12
Author: Alexander Surma <surma@surmair.de>
Date:   Fri Mar 27 14:23:24 2015 +0000

    Add support for buffer bar

commit 9933563
Author: Alexander Surma <surma@surmair.de>
Date:   Thu Mar 26 22:26:52 2015 +0000

    Implement basic progress bar

gulpfile.js

@@ -158,6 +158,7 @@ gulp.task('scripts', function () {
     'src/column-layout/column-layout.js',
     'src/icon-toggle/icon-toggle.js',
     'src/menu/menu.js',
+    'src/progress/progress.js',
     'src/radio/radio.js',
     'src/slider/slider.js',
     'src/spinner/spinner.js',

src/_colors.scss

@@ -173,6 +173,11 @@ $range-bg-color: rgba(0, 0, 0, 0.26) !default;
 $range-color: unquote("rgb(#{$color-primary})") !default;
 $range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
 
+/* ========== Progress ========== */
+$progress-main-color: unquote("rgb(#{$color-primary})") !default;
+$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
+$progress-fallback-buffer-color: rgba(#000, 0.26) !default;
+
 /* ==========  List ========== */
 
 $list-container-item-border-color: #ddd !default;

src/index.html

@@ -116,6 +116,11 @@ <h1>Spinner</h1>
           <iframe src="./spinner/demo.html" scrolling="no"></iframe>
         </div>
 
+        <div class="styleguide-demo">
+          <h1>Progress Bar</h1>
+          <iframe src="./progress/demo.html" scrolling="no"></iframe>
+        </div>
+
         <div class="styleguide-demo">
           <h1>Layout</h1>
             <iframe src="./layout/demo.html" scrolling="no"></iframe>

src/progress/_progress.scss

@@ -0,0 +1,101 @@
+@import "../colors";
+@import "../animation/animation";
+
+$bar-height: 4px !default;
+
+
+.wsk-js-progress {
+  display: block;
+  position: relative;
+  height: $bar-height;
+}
+
+.wsk-js-progress > .bar {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0%;
+  transition: width 0.2s $animation-curve-default;
+}
+
+.wsk-js-progress > .progressbar {
+  background-color: $progress-main-color;
+  z-index: 1;
+  left: 0;
+}
+
+.wsk-js-progress > .bufferbar {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+    linear-gradient(to right, $progress-main-color, $progress-main-color);
+  z-index: 0;
+  left: 0;
+}
+
+.wsk-js-progress > .auxbar {
+  right: 0;
+}
+
+// Webkit only
+@supports (-webkit-appearance:none) {
+  .wsk-js-progress:not(.wsk-progress__indeterminate) > .auxbar {
+    background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+      linear-gradient(to right, $progress-main-color, $progress-main-color);
+    mask: url('../images/buffer.svg');
+  }
+}
+
+.wsk-js-progress:not(.wsk-progress__indeterminate) > .auxbar {
+  background-color: $progress-fallback-buffer-color;
+}
+
+.wsk-js-progress.wsk-progress__indeterminate > .bar1 {
+  background-color: $progress-main-color;
+  animation-name: indeterminate1;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.wsk-js-progress.wsk-progress__indeterminate > .bar3 {
+  background-image: none;
+  background-color: $progress-main-color;
+  animation-name: indeterminate2;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes indeterminate1 {
+  0% {
+    left: 0%;
+    width: 0%;
+  }
+  50% {
+    left: 25%;
+    width: 75%;
+  }
+  75% {
+    left: 100%;
+    width: 0%;
+  }
+}
+
+@keyframes indeterminate2 {
+  0% {
+    left: 0%;
+    width: 0%;
+  }
+  50% {
+    left: 0%;
+    width: 0%;
+  }
+  75% {
+    left: 0%;
+    width: 25%;
+  }
+  100% {
+    left: 100%;
+    width: 0%;
+  }
+}

src/progress/demo.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Progress Bar</title>
+
+  <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+
+  <link rel="stylesheet" href="demo.css">
+</head>
+<body class="demo-page demo-page--progress">
+
+  <div class="demo-preview-block">
+
+    <p>
+      Default:
+      <div id="p1" class="wsk-js-progress"></div>
+    </p>
+
+    <p>
+      Indeterminate:
+      <div id="p2" class="wsk-js-progress wsk-progress__indeterminate"></div>
+    </p>
+
+    <p>
+      Buffering:
+      <div id="p3" class="wsk-js-progress"></div>
+    </p>
+  </div>
+  <!-- build:js(app/styleguide/progress/) ../../scripts/main.min.js -->
+  <script src="../wskComponentHandler.js"></script>
+  <script src="progress.js"></script>
+  <script>
+    // FIXME: What IS the recommended way to wait for the upgrade to be done?
+    window.setTimeout(function() {
+      document.querySelector('#p1').widget.setProgress(44);
+      document.querySelector('#p3').widget.setProgress(33);
+      document.querySelector('#p3').widget.setBuffer(87);
+    }, 1000);
+  </script>
+  <!-- endbuild -->
+</body>
+</html>

src/progress/demo.scss

@@ -0,0 +1,2 @@
+@import "../styleguide_demo_bp";
+@import "_progress";

src/progress/progress.js

@@ -0,0 +1,88 @@
+/**
+ * Class constructor for Progress WSK component.
+ * Implements WSK component design pattern defined at:
+ * https://github.com/jasonmayes/wsk-component-design-pattern
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+function MaterialProgress(element) {
+  'use strict';
+
+  this.element_ = element;
+
+  // Initialize instance.
+  this.init();
+}
+
+/**
+ * Store constants in one place so they can be updated easily.
+ * @enum {string | number}
+ * @private
+ */
+MaterialProgress.prototype.Constant_ = {
+};
+
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ * @enum {string}
+ * @private
+ */
+MaterialProgress.prototype.CssClasses_ = {
+  INDETERMINATE_CLASS: 'wsk-progress__indeterminate'
+};
+
+MaterialProgress.prototype.setProgress = function(p) {
+  'use strict';
+
+  if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
+    return;
+  }
+
+  this.progressbar_.style.width = p + '%';
+};
+
+MaterialProgress.prototype.setBuffer = function(p) {
+  'use strict';
+
+  this.bufferbar_.style.width = p + '%';
+  this.auxbar_.style.width = (100-p) + '%';
+};
+
+/**
+ * Initialize element.
+ */
+MaterialProgress.prototype.init = function() {
+  'use strict';
+
+  if (this.element_) {
+    var el = document.createElement('div');
+    el.className = 'progressbar bar bar1';
+    this.element_.appendChild(el);
+    this.progressbar_ = el;
+
+    el = document.createElement('div');
+    el.className = 'bufferbar bar bar2';
+    this.element_.appendChild(el);
+    this.bufferbar_ = el;
+
+    el = document.createElement('div');
+    el.className = 'auxbar bar bar3';
+    this.element_.appendChild(el);
+    this.auxbar_ = el;
+
+    this.progressbar_.style.width = '0%';
+    this.bufferbar_.style.width = '100%';
+    this.auxbar_.style.width = '0%';
+
+    this.element_.classList.add('is-upgraded');
+  }
+};
+
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+  constructor: MaterialProgress,
+  classAsString: 'MaterialProgress',
+  cssClass: 'wsk-js-progress'
+});

src/styleguide.scss

@@ -15,6 +15,7 @@
 @import "footer/mini_footer";
 @import "icon-toggle/icon-toggle";
 @import "menu/menu";
+@import "progress/progress";
 @import "layout/layout";
 @import "list/list";
 @import "radio/radio";

test/index.html

@@ -47,6 +47,7 @@
 <script src="../src/column-layout/column-layout.js"></script>
 <script src="../src/icon-toggle/icon-toggle.js"></script>
 <script src="../src/layout/layout.js"></script>
+<script src="../src/progress/progress.js"></script>
 <script src="../src/radio/radio.js"></script>
 <script src="../src/ripple/ripple.js"></script>
 <script src="../src/slider/slider.js"></script>
@@ -70,6 +71,7 @@
 <script src="unit/column-layout.js"></script>
 <script src="unit/icon-toggle.js"></script>
 <script src="unit/layout.js"></script>
+<script src="unit/progress.js"></script>
 <script src="unit/radio.js"></script>
 <script src="unit/ripple.js"></script>
 <script src="unit/slider.js"></script>

test/unit/progress.js

@@ -0,0 +1,25 @@
+
+describe('progress tests', function () {
+
+  it('Should have MaterialProgress globally available', function () {
+    expect(MaterialProgress).to.be.a('function');
+  });
+
+  it('Should be upgraded to a MaterialProgress successfully', function () {
+    var el = document.createElement('div');
+    componentHandler.upgradeElement(el, 'MaterialProgress');
+    expect($(el)).to.have.data('upgraded', ',MaterialProgress');
+  });
+
+  it('Should have a setProgress method', function () {
+    var el = document.createElement('div');
+    componentHandler.upgradeElement(el, 'MaterialProgress');
+    expect(el.widget.setProgress).to.be.a('function');
+  });
+
+  it('Should have a setBuffer method', function () {
+    var el = document.createElement('div');
+    componentHandler.upgradeElement(el, 'MaterialProgress');
+    expect(el.widget.setBuffer).to.be.a('function');
+  });
+});

test/visual/index.html

@@ -57,6 +57,7 @@
           <a class="wsk-navigation__link" target="preview" href="test/visual/layout.html">Layout</a>
           <a class="wsk-navigation__link" target="preview" href="test/visual/list.html">List</a>
           <a class="wsk-navigation__link" target="preview" href="test/visual/menu.html">Menu</a>
+          <a class="wsk-navigation__link" target="preview" href="test/visual/progress.html">Progress</a>
           <a class="wsk-navigation__link" target="preview" href="test/visual/radio.html">Radio</a>
           <a class="wsk-navigation__link" target="preview" href="test/visual/spinner.html">Spinner</a>
           <a class="wsk-navigation__link" target="preview" href="test/visual/slider.html">Slider</a>

test/visual/progress.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Spinner</title>
+
+  <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+
+  <link rel="stylesheet" href="../../css/material.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="demo-preview-block">
+
+    <p>
+      Default:
+      <div id="p1" class="wsk-js-progress"></div>
+    </p>
+
+    <p>
+      Indeterminate:
+      <div id="p2" class="wsk-js-progress wsk-progress__indeterminate"></div>
+    </p>
+
+    <p>
+      Buffering:
+      <div id="p3" class="wsk-js-progress"></div>
+    </p>
+  </div>
+  <script>
+    window.setTimeout(function() {
+      document.querySelector('#p1').widget.setProgress(44);
+      document.querySelector('#p3').widget.setProgress(33);
+      document.querySelector('#p3').widget.setBuffer(87);
+    }, 1000);
+  </script>
+  <script src="../../js/material.js"></script>
+
+</body>
+</html>