Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Rewrite paper-progress as paper-linear-progress
Browse files Browse the repository at this point in the history 
This commit introduces a complete rewrite of `paper-progress` into a new
`paper-linear-progress` element. Features include the following:

- New semantics regarding `secondary-progress` which now becomes
  `buffer-value`, as it's meant to be within the spec.
- Removal of `IronRangeBehavior`, since the linear progress element is not an
  interactive UI element, nor does it have anything to do with
  representing a range as the "range"-based input elements connote.
- Slimmed down custom property API which exposes only the facets of the
  element meant to be modifiable in terms of the spec.
- Implementation of indeterminate animation which adheres to spec.
- Support for reversing the element, including all its
  transition/animations.
- Support for a buffering state.
- Complete and comprehensive test suite which adds full code coverage to
  the component.
- Revamped demo page which shows all possible functionality of the
  element.
  • Loading branch information
@traviskaufman
traviskaufman committed Nov 30, 2015
1 parent d417e51 commit 7ce9551
Show file tree
Hide file tree
Showing 6 changed files with 1,509 additions and 476 deletions.
23 changes: 14 additions & 9 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "paper-progress",
"version": "1.0.7",
"name": "paper-linear-progress",
"version": "1.0.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design progress bar",
"authors": "The Polymer Authors",
Expand All @@ -9,23 +9,28 @@
"polymer",
"progress"
],
"main": "paper-progress.html",
"main": "paper-linear-progress.html",
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-progress.git"
"url": "git://github.com/PolymerElements/paper-linear-progress.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
"neon-animation": "PolymerElements/neon-animation#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"es6-promise": "~3.0.2"
},
"ignore": []
"ignore": [
"**/.*",
"test"
]
}
281 changes: 230 additions & 51 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,47 +10,80 @@
<!doctype html>
<html>
<head>
<title>paper-progress demo</title>
<title>paper-linear-progress demo</title>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<!-- Polyfill promises if needed -->
<script>
var script;
if (typeof Promise != 'function' || typeof Promise.prototype.then != 'function') {
script = document.createElement('script');
script.src = '../../es6-promise/promise.js';
document.head.appendChild(script);
}
</script>

<link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../paper-progress.html">
<link rel="import" href="../paper-linear-progress.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">

<style is="custom-style">
body {
padding: 40px;
}

paper-progress {
display: block;
width: 100%;
margin: 20px 0;
/* Separate adjacent linear progress elements */
paper-linear-progress + paper-linear-progress {
margin-top: 1em;
}

#interactive-demo .layout > * {
margin-right: 4px;
}

#interactive-demo .layout > *:last-child {
margin-right: 0;
}

#interactive-demo .layout > paper-input {
min-width: 100px;
}

paper-linear-progress.blue {
--paper-linear-progress-progress-bar-color: var(--paper-light-blue-500);
--paper-linear-progress-buffer-bar-color: var(--paper-light-blue-100);
}

paper-progress.blue {
--paper-progress-active-color: var(--paper-light-blue-500);
--paper-progress-secondary-color: var(--paper-light-blue-100);
paper-linear-progress.red {
--paper-linear-progress-progress-bar-color: var(--paper-red-500);
--paper-linear-progress-buffer-bar-color: var(--paper-red-100);
}

paper-progress.red {
--paper-progress-active-color: var(--paper-red-500);
--paper-progress-secondary-color: var(--paper-red-100);
paper-linear-progress.orange {
--paper-linear-progress-progress-bar-color: var(--paper-orange-500);
--paper-linear-progress-buffer-bar-color: var(--paper-orange-100);
}

paper-progress.orange {
--paper-progress-active-color: var(--paper-orange-500);
--paper-progress-secondary-color: var(--paper-orange-100);
paper-linear-progress.green {
--paper-linear-progress-progress-bar-color: var(--paper-light-green-500);
--paper-linear-progress-buffer-bar-color: var(--paper-light-green-100);
}

paper-progress.green {
--paper-progress-active-color: var(--paper-light-green-500);
--paper-progress-secondary-color: var(--paper-light-green-100);
paper-linear-progress.bigger {
--paper-linear-progress-height: 8px;
}

paper-linear-progress.smaller {
--paper-linear-progress-height: 2px;
}
</style>

Expand All @@ -59,63 +92,209 @@
<div class="vertical-section-container">
<h4>Progress bar</h4>
<div class="vertical-section">
<paper-progress></paper-progress>
<paper-linear-progress closed></paper-linear-progress><br>
<paper-button raised onclick="startProgress();">Start</paper-button>
</div>

<h4>Interactive Demo</h4>
<div id="interactive-demo" class="vertical-section">
<div class="layout horizontal center-center">
<paper-linear-progress class="flex-3" id="demoProgressElement"></paper-linear-progress>
<span>Value: <span id="valueIndicator"></span></span>
<span>Buffer Value: <span id="bufferValueIndicator"></span></span>
</div>
<div class="layout horizontal wrap">
<paper-button class="flex-none" raised id="showBtn">Show</paper-button>
<paper-button class="flex-none" raised id="hideBtn">Hide</paper-button>
</div>
<div class="layout horizontal">
<paper-input id="valueInput"
label="value"
type="number"
min="0"
max="100"
step="10">
</paper-input>
<paper-input id="bufferValueInput"
label="buffer value"
type="number"
min="0"
max="100"
step="10">
</paper-input>
</div>
<div class="layout horizontal">
<paper-checkbox class="flex-none" id="toggleIndeterminate">
Toggle Indeterminate
</paper-checkbox>
<paper-checkbox id="toggleReversed">Toggle Reverse</paper-checkbox>
<paper-checkbox id="toggleBuffering">Toggle Buffering</paper-checkbox>
</div>
</div>

<h4>Indeterminate</h4>
<div class="vertical-section">
<paper-progress indeterminate></paper-progress><br>
<paper-progress class="blue" indeterminate value="800" min="100" max="1000"></paper-progress><br>
<paper-linear-progress indeterminate></paper-linear-progress>
<paper-linear-progress class="blue" indeterminate reversed></paper-linear-progress>
</div>

<h4>Reversed</h4>
<div class="vertical-section">
<paper-linear-progress reversed value="80"></paper-linear-progress>
</div>

<h4>Buffering</h4>
<div class="vertical-section">
<paper-linear-progress buffering value="40" buffer-value="70"></paper-linear-progress>
</div>

<h4>Color</h4>
<div class="vertical-section">
<paper-progress value="40" class="blue"></paper-progress><br>
<paper-progress value="800" min="100" max="1000" class="red"></paper-progress><br>
<paper-progress value="40" class="orange"></paper-progress><br>
<paper-progress value="200" max="200" class="green"></paper-progress><br>
<paper-progress value="40" secondary-progress="80" class="blue"></paper-progress><br>
<paper-linear-progress value="40" class="blue"></paper-linear-progress>
<paper-linear-progress value="80" class="red"></paper-linear-progress>
<paper-linear-progress reversed
buffering
value="20"
buffer-value="70"
class="orange">
</paper-linear-progress>
<paper-linear-progress value="90" class="green"></paper-linear-progress>
</div>

<h4>Size</h4>
<div class="vertical-section">
<paper-linear-progress class="bigger" indeterminate reversed></paper-linear-progress>
<paper-linear-progress class="smaller green"
value="40"
buffer-value="80"
buffering>
</paper-linear-progress>
</div>
</div>

<script>

var progress = document.querySelector('paper-progress');
var progress = document.querySelector('paper-linear-progress');
var button = document.querySelector('paper-button');

var repeat, maxRepeat = 5, animating = false;

function nextProgress() {
animating = true;
if (progress.value < progress.max) {
progress.value += (progress.step || 1);
} else {
if (++repeat >= maxRepeat) {
animating = false;
button.disabled = false;
return;
}
progress.value = progress.min;
function startProgress() {
var exampleProgressValues = [10, 25, 38, 56, 81, 100];
exampleProgressValues.reduce(function(promise, nextValue) {
return promise
.then(sleepForAWhile())
.then(setProgress(nextValue));
}, start()).then(finish);

function start() {
return new Promise(function(resolve) {
button.disabled = true;
progress.value = 0;
progress.indeterminate = true;
progress.reversed = true;
progress.closed = false;

setTimeout(function() {
progress.indeterminate = false;
progress.reversed = false;
progress.value = 0;
resolve();
}, 3000)
});
}

requestAnimationFrame(nextProgress);
}
function sleepForAWhile() {
var min = 50, max = 500;
var ms = Math.random() * (max - min) + min;
return function() {
return new Promise(function(resolve) {
setTimeout(resolve, ms);
});
};
}

function startProgress() {
repeat = 0;
progress.value = progress.min;
button.disabled = true;
if (!animating) {
nextProgress();
function setProgress(v) {
return function() {
progress.value = v;
};
}

function finish() {
var transitionEndEvents = ['transitionend', 'webkitTransitionEnd'];
return new Promise(function(resolve) {
transitionEndEvents.forEach(function(eventName) {
progress.addEventListener(eventName, onTransitionEnd);
});
progress.closed = true;
resolve();

function onTransitionEnd() {
button.disabled = false;
transitionEndEvents.forEach(function(eventName) {
progress.removeEventListener(eventName, onTransitionEnd);
});
}
});
}
}

function initInteractiveDemo() {
var progressElement = document.querySelector('#demoProgressElement');
var valueIndicator = document.querySelector('#valueIndicator');
var bufferValueIndicator = document.querySelector('#bufferValueIndicator');
var showBtn = document.querySelector('#showBtn');
var hideBtn = document.querySelector('#hideBtn');
var valueInput = document.querySelector('#valueInput');
var bufferValueInput = document.querySelector('#bufferValueInput');
var toggleIndeterminate = document.querySelector('#toggleIndeterminate');
var toggleReversed = document.querySelector('#toggleReversed');
var toggleBuffering = document.querySelector('#toggleBuffering');

valueIndicator.textContent = progressElement.value;
bufferValueIndicator.textContent = progressElement.bufferValue;
valueInput.value = progressElement.value;
bufferValueInput.value = progressElement.bufferValue;

progressElement.addEventListener('paper-linear-progress-value-change', function(e) {
valueIndicator.textContent = e.detail.value;
});

progressElement.addEventListener('paper-linear-progress-buffer-value-change', function(e) {
bufferValueIndicator.textContent = e.detail.bufferValue;
});

showBtn.addEventListener('click', function() {
progressElement.closed = false;
});

hideBtn.addEventListener('click', function() {
progressElement.closed = true;
});

valueInput.addEventListener('change', function() {
progressElement.value = valueInput.value;
});

bufferValueInput.addEventListener('change', function() {
progressElement.bufferValue = bufferValueInput.value;
});

toggleIndeterminate.addEventListener('change', function() {
progressElement.indeterminate = toggleIndeterminate.checked;
});

toggleReversed.addEventListener('change', function() {
progressElement.reversed = toggleReversed.checked;
});

toggleBuffering.addEventListener('change', function() {
progressElement.buffering = toggleBuffering.checked;
});
}

window.addEventListener('WebComponentsReady', function() {
startProgress();
initInteractiveDemo();
});

</script>

</body>
</html>
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>paper-progress</title>
<title>paper-linear-progress</title>

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
Expand Down
Loading

0 comments on commit 7ce9551

Please sign in to comment.