pace_rails 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 49fd8e68963d4aee0ca2518ba448116a98f3d7f2
-  data.tar.gz: b834deaa6ea713b5dee895221c183fd6eefff996
+  metadata.gz: 0301d0a18968cf240c42a23cceb004c1e3a090a4
+  data.tar.gz: 159f46b0d4d956d91e9008343355e0ffde783d3d
 SHA512:
-  metadata.gz: 7485a86194487bbabcf7aea0802ee99f0696976c6b11715eb81b8bf6dfcbd140d9347b6124f1d6fec16c5fdbec8609509fbdfc8cae4542896101fe40098695eb
-  data.tar.gz: 3f90c87d49d56760cc6f738c6dc3d13db69b753e09dff4bd55bdfc9e3c895d9a860e0042e7bfe050f77279a06fd8e56966b176eeaac56309336298f6cadcd753
+  metadata.gz: df20b3cbf0ad5c149708bb156fc348e4a149b61c5ad06b889e8bd45f7e6143a28293b605e649eb2137495b5f9b1066ff9d06cfad1ed3e353a22194074228d49e
+  data.tar.gz: 4d884cc937fac35e106b8cd199707d60839bf26ae12ba70fa9a8f0763827622d74e32261fded1106e30cb3bf08748dcfba776e72a78bd9d535ef1cd681f50855

data/README.md

@@ -25,7 +25,7 @@ You basically have to add the required.
 
 In your `application.js.coffee` (or just `application.js`) which is located at `app/assets/javascripts/application.js`:
 
-	//= require pace
+	//= require pace/pace
 
 Also, place the following in your `application.css.scss` file which is located at `app/assets/stylesheets/application.css`:
 

data/app/assets/javascripts/{pace.js → pace/pace.js}

@@ -1,8 +1,9 @@
 (function() {
-  var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Events, RequestIntercept, RequestTracker, SOURCE_KEYS, Scaler, animation, bar, cancelAnimation, cancelAnimationFrame, defaultOptions, extend, getFromDOM, handlePushState, init, intercept, now, options, requestAnimationFrame, result, runAnimation, scalers, sources, uniScaler, _XDomainRequest, _XMLHttpRequest, _pushState, _replaceState,
+  var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Events, RequestIntercept, SOURCE_KEYS, Scaler, SocketRequestTracker, XHRRequestTracker, animation, bar, cancelAnimation, cancelAnimationFrame, defaultOptions, extend, extendNative, firstLoad, getFromDOM, handlePushState, init, intercept, now, options, requestAnimationFrame, result, runAnimation, scalers, sources, uniScaler, _WebSocket, _XDomainRequest, _XMLHttpRequest, _pushState, _replaceState,
     __slice = [].slice,
     __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   defaultOptions = {
     catchupTime: 500,
@@ -11,10 +12,20 @@
     ghostTime: 250,
     maxProgressPerFrame: 10,
     easeFactor: 1.25,
+    startOnPageLoad: true,
     restartOnPushState: true,
+    restartOnBackboneRoute: true,
+    target: 'body',
     elements: {
       checkInterval: 100,
       selectors: ['body']
+    },
+    eventLag: {
+      minSamples: 10
+    },
+    ajax: {
+      trackMethods: ['GET'],
+      trackWebSockets: true
     }
   };
 
@@ -116,14 +127,16 @@
     }
 
     Bar.prototype.getElement = function() {
+      var targetElement;
       if (this.el == null) {
         this.el = document.createElement('div');
         this.el.className = "pace pace-active";
         this.el.innerHTML = '<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>';
-        if (document.body.firstChild != null) {
-          document.body.insertBefore(this.el, document.body.firstChild);
+        targetElement = document.querySelector(options.target);
+        if (targetElement.firstChild != null) {
+          targetElement.insertBefore(this.el, targetElement.firstChild);
         } else {
-          document.body.appendChild(this.el);
+          targetElement.appendChild(this.el);
         }
       }
       return this.el;
@@ -148,7 +161,7 @@
 
     Bar.prototype.render = function() {
       var el, progressStr;
-      if (document.body == null) {
+      if (document.querySelector(options.target) == null) {
         return false;
       }
       el = this.getElement();
@@ -208,38 +221,77 @@
 
   _XDomainRequest = window.XDomainRequest;
 
+  _WebSocket = window.WebSocket;
+
+  extendNative = function(to, from) {
+    var e, key, val, _results;
+    _results = [];
+    for (key in from.prototype) {
+      try {
+        val = from.prototype[key];
+        if ((to[key] == null) && typeof val !== 'function') {
+          _results.push(to[key] = val);
+        } else {
+          _results.push(void 0);
+        }
+      } catch (_error) {
+        e = _error;
+      }
+    }
+    return _results;
+  };
+
   RequestIntercept = (function(_super) {
     __extends(RequestIntercept, _super);
 
     function RequestIntercept() {
-      var monitor,
+      var monitorXHR,
         _this = this;
       RequestIntercept.__super__.constructor.apply(this, arguments);
-      monitor = function(req) {
+      monitorXHR = function(req) {
         var _open;
         _open = req.open;
         return req.open = function(type, url, async) {
-          _this.trigger('request', {
-            type: type,
-            url: url,
-            request: req
-          });
+          var _ref;
+          if (_ref = (type != null ? type : 'GET').toUpperCase(), __indexOf.call(options.ajax.trackMethods, _ref) >= 0) {
+            _this.trigger('request', {
+              type: type,
+              url: url,
+              request: req
+            });
+          }
           return _open.apply(req, arguments);
         };
       };
-      window.XMLHttpRequest = function() {
+      window.XMLHttpRequest = function(flags) {
         var req;
-        req = new _XMLHttpRequest;
-        monitor(req);
+        req = new _XMLHttpRequest(flags);
+        monitorXHR(req);
         return req;
       };
+      extendNative(window.XMLHttpRequest, _XMLHttpRequest);
       if (_XDomainRequest != null) {
         window.XDomainRequest = function() {
           var req;
           req = new _XDomainRequest;
-          monitor(req);
+          monitorXHR(req);
+          return req;
+        };
+        extendNative(window.XDomainRequest, _XDomainRequest);
+      }
+      if ((_WebSocket != null) && options.ajax.trackWebSockets) {
+        window.WebSocket = function(url, protocols) {
+          var req;
+          req = new _WebSocket(url, protocols);
+          _this.trigger('request', {
+            type: 'socket',
+            url: url,
+            protocols: protocols,
+            request: req
+          });
           return req;
         };
+        extendNative(window.WebSocket, _WebSocket);
       }
     }
 
@@ -253,16 +305,19 @@
     function AjaxMonitor() {
       var _this = this;
       this.elements = [];
-      intercept.on('request', function(_arg) {
-        var request;
-        request = _arg.request;
-        return _this.watch(request);
+      intercept.on('request', function() {
+        return _this.watch.apply(_this, arguments);
       });
     }
 
-    AjaxMonitor.prototype.watch = function(request) {
-      var tracker;
-      tracker = new RequestTracker(request);
+    AjaxMonitor.prototype.watch = function(_arg) {
+      var request, tracker, type;
+      type = _arg.type, request = _arg.request;
+      if (type === 'socket') {
+        tracker = new SocketRequestTracker(request);
+      } else {
+        tracker = new XHRRequestTracker(request);
+      }
       return this.elements.push(tracker);
     };
 
@@ -270,53 +325,26 @@
 
   })();
 
-  RequestTracker = (function() {
-    function RequestTracker(request) {
-      var handler, size, _fn, _i, _len, _onprogress, _onreadystatechange, _ref,
+  XHRRequestTracker = (function() {
+    function XHRRequestTracker(request) {
+      var event, size, _i, _len, _onreadystatechange, _ref,
         _this = this;
       this.progress = 0;
-      if (request.onprogress !== void 0) {
+      if (window.ProgressEvent != null) {
         size = null;
-        _onprogress = request.onprogress;
-        request.onprogress = function() {
-          var e, headers, name, val;
-          try {
-            headers = request.getAllResponseHeaders();
-            for (name in headers) {
-              val = headers[name];
-              if (name.toLowerCase() === 'content-length') {
-                size = +val;
-                break;
-              }
-            }
-          } catch (_error) {
-            e = _error;
-          }
-          if (size != null) {
-            try {
-              return _this.progress = request.responseText.length / size;
-            } catch (_error) {
-              e = _error;
-            }
+        request.addEventListener('progress', function(evt) {
+          if (evt.lengthComputable) {
+            return _this.progress = 100 * evt.loaded / evt.total;
           } else {
             return _this.progress = _this.progress + (100 - _this.progress) / 2;
           }
-        };
-        if (typeof _onprogress === "function") {
-          _onprogress.apply(null, arguments);
-        }
-        _ref = ['onload', 'onabort', 'ontimeout', 'onerror'];
-        _fn = function() {
-          var fn;
-          fn = request[handler];
-          return request[handler] = function() {
-            _this.progress = 100;
-            return typeof fn === "function" ? fn.apply(null, arguments) : void 0;
-          };
-        };
+        });
+        _ref = ['load', 'abort', 'timeout', 'error'];
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          handler = _ref[_i];
-          _fn();
+          event = _ref[_i];
+          request.addEventListener(event, function() {
+            return _this.progress = 100;
+          });
         }
       } else {
         _onreadystatechange = request.onreadystatechange;
@@ -332,7 +360,25 @@
       }
     }
 
-    return RequestTracker;
+    return XHRRequestTracker;
+
+  })();
+
+  SocketRequestTracker = (function() {
+    function SocketRequestTracker(request) {
+      var event, _i, _len, _ref,
+        _this = this;
+      this.progress = 0;
+      _ref = ['error', 'open'];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        event = _ref[_i];
+        request.addEventListener(event, function() {
+          return _this.progress = 100;
+        });
+      }
+    }
+
+    return SocketRequestTracker;
 
   })();
 
@@ -391,9 +437,9 @@
     };
 
     function DocumentMonitor() {
-      var _onreadystatechange,
+      var _onreadystatechange, _ref,
         _this = this;
-      this.progress = 0;
+      this.progress = (_ref = this.states[document.readyState]) != null ? _ref : 100;
       _onreadystatechange = document.onreadystatechange;
       document.onreadystatechange = function() {
         if (_this.states[document.readyState] != null) {
@@ -420,7 +466,7 @@
         diff = now() - last - 50;
         last = now();
         avg = avg + (diff - avg) / 15;
-        if (points++ > 20 && Math.abs(avg) < 3) {
+        if (points++ > options.eventLag.minSamples && Math.abs(avg) < 3) {
           avg = 0;
         }
         return _this.progress = 100 * (3 / (avg + 3));
@@ -511,6 +557,40 @@
     };
   }
 
+  firstLoad = true;
+
+  if (options.restartOnBackboneRoute) {
+    setTimeout(function() {
+      if (window.Backbone == null) {
+        return;
+      }
+      return Backbone.history.on('route', function(router, name) {
+        var routeName, rule, _i, _len, _results;
+        if (!(rule = options.restartOnBackboneRoute)) {
+          return;
+        }
+        if (firstLoad) {
+          firstLoad = false;
+          return;
+        }
+        if (typeof rule === 'object') {
+          _results = [];
+          for (_i = 0, _len = rule.length; _i < _len; _i++) {
+            routeName = rule[_i];
+            if (!(routeName === name)) {
+              continue;
+            }
+            Pace.restart();
+            break;
+          }
+          return _results;
+        } else {
+          return Pace.restart();
+        }
+      });
+    }, 0);
+  }
+
   SOURCE_KEYS = {
     ajax: AjaxMonitor,
     elements: ElementMonitor,
@@ -520,7 +600,7 @@
 
   (init = function() {
     var source, type, _i, _j, _len, _len1, _ref, _ref1, _ref2;
-    sources = [];
+    Pace.sources = sources = [];
     _ref = ['ajax', 'elements', 'document', 'eventLag'];
     for (_i = 0, _len = _ref.length; _i < _len; _i++) {
       type = _ref[_i];
@@ -533,7 +613,7 @@
       source = _ref2[_j];
       sources.push(new source(options));
     }
-    bar = new Bar;
+    Pace.bar = bar = new Bar;
     scalers = [];
     return uniScaler = new Scaler;
   })();
@@ -609,7 +689,9 @@
   } else if (typeof exports === 'object') {
     module.exports = Pace;
   } else {
-    Pace.start();
+    if (options.startOnPageLoad) {
+      Pace.start();
+    }
   }
 
 }).call(this);

data/app/assets/stylesheets/pace/barber-shop.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -18,6 +19,11 @@
   left: 0;
   height: 12px;
   overflow: hidden;
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
 }
 
 .pace .pace-progress-inner {
@@ -63,4 +69,4 @@
 @keyframes pace-stripe-animation {
   0% { transform: none; transform: none; }
   100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
-}
+}

data/app/assets/stylesheets/pace/big-counter.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -27,4 +28,4 @@
   line-height: 1;
   text-align: right;
   color: rgba(0, 0, 0, 0.19999999999999996);
-}
+}

data/app/assets/stylesheets/pace/bounce.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   width: 140px;
   height: 300px;

data/app/assets/stylesheets/pace/corner-indicator.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -66,4 +67,4 @@
 @keyframes pace-rotation {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
-}
+}

data/app/assets/stylesheets/pace/fill-left.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -13,4 +14,9 @@
   top: 0;
   left: 0;
   bottom: 0;
-}
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
+}

data/app/assets/stylesheets/pace/flash.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -17,6 +18,11 @@
   top: 0;
   left: 0;
   height: 2px;
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
 }
 
 .pace .pace-progress-inner {
@@ -72,4 +78,4 @@
 @keyframes pace-spinner {
   0% { transform: rotate(0deg); transform: rotate(0deg); }
   100% { transform: rotate(360deg); transform: rotate(360deg); }
-}
+}

data/app/assets/stylesheets/pace/flat-top.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -14,10 +15,15 @@
   left: 0;
   height: 12px;
   background: #29d;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
+
+  -webkit-transition: -webkit-transform .3s, width 1s;
+  -moz-transition: width 1s;
+  -o-transform: width 1s;
+  transition: transform .3s, width 1s;
+
   -webkit-transform: translateY(-50px);
   transform: translateY(-50px);
+
   pointer-events: none;
 }
 

data/app/assets/stylesheets/pace/mac-osx.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -20,14 +21,21 @@
   left: 0;
   height: 12px;
   overflow: hidden;
+
   -webkit-border-radius: 0 0 4px 0;
   -moz-border-radius: 0 0 4px 0;
   -o-border-radius: 0 0 4px 0;
   border-radius: 0 0 4px 0;
+
   -webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
   -moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
   -o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
   box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
 }
 
 .pace .pace-progress-inner {
@@ -73,4 +81,4 @@
 @keyframes pace-stripe-animation {
   0% { transform: none; transform: none; }
   100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
-}
+}

data/app/assets/stylesheets/pace/minimal.css

@@ -1,3 +1,4 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
 .pace .pace-progress {
   background: #29d;
   position: fixed;
@@ -5,8 +6,13 @@
   top: 0;
   left: 0;
   height: 2px;
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
 }
 
 .pace-inactive {
   display: none;
-}
+}

data/lib/pace_rails/version.rb

@@ -1,3 +1,3 @@
 module PaceRails
-  VERSION = "0.0.5"
+  VERSION = "0.0.6"
 end

data/pace_rails.gemspec

@@ -8,7 +8,7 @@ Gem::Specification.new do |spec|
   spec.version       = PaceRails::VERSION
   spec.authors       = ["arvind-naidu"]
   spec.email         = ["techmaxed.net@gmail.com"]
-  spec.description   = %q{This is a gem for Pace. It's based on version 0.4.3.}
+  spec.description   = %q{This is a gem for Pace. It's based on version 0.4.10.}
   spec.summary       = %q{Automatic page load progress bar}
   spec.homepage      = "https://github.com/arvind-naidu/pace_rails"
   spec.license       = "MIT"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pace_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - arvind-naidu
@@ -66,7 +66,7 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
-description: This is a gem for Pace. It's based on version 0.4.3.
+description: This is a gem for Pace. It's based on version 0.4.10.
 email:
 - techmaxed.net@gmail.com
 executables: []
@@ -78,7 +78,7 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app/assets/javascripts/pace.js
+- app/assets/javascripts/pace/pace.js
 - app/assets/stylesheets/pace/barber-shop.css
 - app/assets/stylesheets/pace/big-counter.css
 - app/assets/stylesheets/pace/bounce.css