Merge branch 'develop'

Author: jh3y

README.md

@@ -13,9 +13,42 @@ Because of this, it's often overlooked in favor of styled `<div>` combos.
 
 * Cross browser reset and styling to pull `<progress>` element in line with modern slim-style bars
 * CSS helpers that provide classes and attributes to deal with things like positioning, growth style, simulation etc.
-* Optional JS helper for better control and interaction with `<progress>` elements.
+* Optional JS helper for better control and interaction with `<progress>` elements. For example; being able to hook into network request status and display this to the end user.
 * Plays nice wherever the `<progress>` element is supported!
 
+```js
+  const myEp = new Ep(document.querySelector('progress'));
+  myEp.simulate();
+  const xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function() {
+    if (this.readyState == 4 && this.status == 200) {
+      myEp.complete();
+    }
+  };
+  xhttp.open('GET', '/index.html', true);
+  xhttp.send();
+```
+
+## Index
+
+* [Browser support](https://github.com/jh3y/ep#browser-support)
+  * [Caveats](https://github.com/jh3y/ep#caveats)
+* [Usage](https://github.com/jh3y/ep#usage)
+  * [Install](https://github.com/jh3y/ep#install)
+  * [Just using the stylesheet](https://github.com/jh3y/ep#just-using-the-stylesheet)
+  * [Including the optional JS helper](https://github.com/jh3y/ep#including-the-optional-js-helper)
+  * [Integrating with your own SASS files](https://github.com/jh3y/ep#integrating-with-your-own-sass-files)
+  * [CSS Helpers Api](https://github.com/jh3y/ep#css-helpers-api)
+    * [Aesthetic helpers](https://github.com/jh3y/ep#aesthetic-helpers)
+    * [Behavioural helpers](https://github.com/jh3y/ep#behavioural-helpers)
+    * [Sass variables](https://github.com/jh3y/ep#sass-variables)
+  * [Javascript Helper Api](https://github.com/jh3y/ep#javascript-helper-api)
+    * [Hooking into network requests](https://github.com/jh3y/ep#hooking-into-network-requests)
+* [What happened to progrecss?](https://github.com/jh3y/ep#what-happened-to-progrecss)
+* [Development](https://github.com/jh3y/ep#development)
+* [Contributing](https://github.com/jh3y/ep#contributing)
+* [License](https://github.com/jh3y/ep#license)
+
 
 ## Browser support
 
@@ -160,8 +193,7 @@ As for the methods available(`?` denotes an optional parameter);
 * `setSpread(? {bool} spread)` - Set whether `<progress>` element should be spred style. By default will set to false.
 * `setIndeterminate(? {bool} indeterminate)` - Set whether `<progress>` element is using `indeterminate` helper class. By default, will remove helper class.
 * `togglePause` - Toggles pause attribute for play/pause animation.
-* `setPosition({Array string} positions)` - Takes an array of positions that will be applied to the element. For example, `['top', 'fixed']` will set `ep--top ep--fixed` class to the `<progress>` element.
-* `resetPosition` - Resets position by removing all classes.
+* `setPosition(? {Array string} positions)` - Takes an optional array of positions that will be applied to the element. For example, `['top', 'fixed']` will set `ep--top ep--fixed` class to the `<progress>` element. If no positions are declared, all currently applied will be wiped.
 * `increase(? {number} value, ? {function} cb)` - Increase progress value by optional increment with an optional callback. By default, increment is 5.
 * `decrease(? {number} value, ? {function} cb)` - Decrease progress value by optional decrement with an optional callback. By default, decrement is 5.
 * `reset` - Resets `<progress>` value to 0.
@@ -170,8 +202,24 @@ As for the methods available(`?` denotes an optional parameter);
 * `simulate(? {number} step, ? {number} increment, ? {number} max)` - Simulation on the Javascript side is an example where we have more control than we do with CSS. Set a simulation by declaring a step duration in `ms`, an `increment` and a `max` value for the simulation to reach. The default simulation will increment by 5 every second until the `<progress>` element has a value of 99.
 * `complete(? {function} cb)` - Complete a progress bar by setting value to 100 and then resetting it. Provide optional callback for when complete.
 
+#### Hooking into network requests
+Yep. You can easily integrate `ep` to communicate network request status to the end user. The most basic example being something like the following;
+```js
+  const myEp = new Ep(document.querySelector('progress'));
+  myEp.reset();
+  myEp.simulate();
+  const xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function() {
+    if (this.readyState == 4 && this.status == 200) {
+      myEp.complete();
+    }
+  };
+  xhttp.open('GET', '/index.html', true);
+  xhttp.send();
+```
+We start with a simple `progress` element. Reset it to make sure it starts at `0` and start a simulation. When we get the `OK` from our network request, set our element to complete :tada:
 
-## What happened to progre(c)ss?
+## What happened to progrecss?
 For some time, I'd intended to revisit `progre(c)ss` with some ideas I had. When I finally got round to it, I went back over the issues and something struck me. Someone had pointed out why not use the `<progress>` element?
 
 I'd previously struck this off because I liked being able to add `:pseudo` element progress bars to any element with relative ease where the `:pseudo` elements were available.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "ep",
   "main": "dist/ep.css",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "homepage": "http://jh3y.github.io/ep",
   "authors": [
     "jh3y <jh3y@users.noreply.github.com>"

dist/ep.css

@@ -26,15 +26,15 @@ progress {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: #3498db;
   border: 0;
   display: block !important;
   height: 6px;
   opacity: 0.6;
   position: relative;
   -webkit-transition: width 0.25s ease 0s, visibility 0.5s ease 0s;
   transition: width 0.25s ease 0s, visibility 0.5s ease 0s;
-  width: 0; }
+  width: 0;
+  background: #3498db; }
   progress::-ms-fill {
     border: 0; }
   progress::-moz-progress-bar {

dist/ep.js

@@ -50,8 +50,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
         /* Santize values so that value can't be set out of 0-100 range */
         var sanitizeValue = function sanitizeValue(val) {
-          var min = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
-          var max = arguments.length <= 2 || arguments[2] === undefined ? 100 : arguments[2];
+          var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+          var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
 
           var sanitized = val;
           if (sanitized > max) sanitized = max;
@@ -87,7 +87,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'setSpread',
       value: function setSpread() {
-        var spread = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
+        var spread = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
         var cl = this._EL.classList;
         spread ? cl.add('ep--spread') : cl.remove('ep--spread');
@@ -107,7 +107,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'setIndeterminate',
       value: function setIndeterminate() {
-        var indeterminate = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
+        var indeterminate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
         var cl = this._EL.classList;
         var indeterminateCL = 'ep--indeterminate';
@@ -137,24 +137,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function setPosition(posArr) {
         var _this2 = this;
 
-        if (posArr && posArr.length) posArr.forEach(function (pos) {
-          return _this2._EL.classList.add('ep--' + pos);
-        });
-      }
-      /**
-      * Resets <progress> element position by removing all ep positional helpers
-      * @returns {undefined}
-      */
-
-    }, {
-      key: 'resetPosition',
-      value: function resetPosition() {
         var positions = ['top', 'fixed', 'bottom'];
         for (var p = 0; p < positions.length; p++) {
           for (var cl = 0; cl < this._EL.classList.length; cl++) {
             if (this._EL.classList[cl] === 'ep--' + positions[p]) this._EL.classList.remove('ep--' + positions[p]);
           }
-        }
+        }if (posArr && posArr.length) posArr.forEach(function (pos) {
+          return _this2._EL.classList.add('ep--' + pos);
+        });
       }
       /**
       * Helper function to increase <progress> value by a value
@@ -169,7 +159,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'increase',
       value: function increase() {
-        var amount = arguments.length <= 0 || arguments[0] === undefined ? 5 : arguments[0];
+        var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
         var cb = arguments[1];
 
         this.set(this._VALUE + amount, cb);
@@ -187,7 +177,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'decrease',
       value: function decrease() {
-        var amount = arguments.length <= 0 || arguments[0] === undefined ? 5 : arguments[0];
+        var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
         var cb = arguments[1];
 
         this.set(this._VALUE - amount, cb);
@@ -231,7 +221,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'mock',
       value: function mock() {
-        var duration = arguments.length <= 0 || arguments[0] === undefined ? 4 : arguments[0];
+        var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
 
         var _this4 = this;
 
@@ -263,7 +253,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
       value: function time() {
         var _this5 = this;
 
-        var duration = arguments.length <= 0 || arguments[0] === undefined ? 4 : arguments[0];
+        var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
         var cb = arguments[1];
 
         var onTimerEnd = function onTimerEnd() {
@@ -292,12 +282,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
     }, {
       key: 'simulate',
       value: function simulate() {
-        var step = arguments.length <= 0 || arguments[0] === undefined ? 1000 : arguments[0];
+        var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
 
         var _this6 = this;
 
-        var increment = arguments.length <= 1 || arguments[1] === undefined ? 5 : arguments[1];
-        var max = arguments.length <= 2 || arguments[2] === undefined ? 99 : arguments[2];
+        var increment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+        var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 99;
 
         this._SIMULATING = setInterval(function () {
           var modMax = max % _this6._VALUE;