pace-rails 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 51d22b23f9fd6b9503f12ece5490216788feac6d
-  data.tar.gz: 8d036d81849d90d9c0f7c0be0b99a073e2fec814
+  metadata.gz: 0080c27396b071b243ce608c2017a676c6ad41f4
+  data.tar.gz: 7bba036f5ba95d784237ef5c2ac289fe35931b18
 SHA512:
-  metadata.gz: dfafb2a1a57abaa98cd6056863617daec1a825161040512f512f9df25e924a41c7e974970b35d4576eb2b2d771e31e48609445ca394dfac58657fe92bf4fcf33
-  data.tar.gz: fd2293e8d0fc74ff727727b0a1ee5f7ae639622925b0df71d88aeeac31187494a03370c2399f237af04da693c1c4386c9a6ee41a8efd279568ec91f4313c3017
+  metadata.gz: 9c5cad1e5fc1d111cc3139a90fa64c4bcd8b23aa92cf45b136f42a8362b420bb1bb5d8342f8e9849138d5ca961b37ad8e40fac0a5eb6a8e37ecc136bd08f72b7
+  data.tar.gz: 2c8a23b7783dec47d256fbc2d5826077267269f0c58d500fc8941b69ab6ca4ce8476db714effc368ef8b7e91a2e071ed8f494cc67d5f0e78c4c406e85776ac64

data/README.md

@@ -21,27 +21,27 @@ app/assets/javascripts/application.js
 
 	//= require pace/pace
 
-Pace supports a few themes.
+Pace supports a few themes, selec one of the following and have fun and create your own.
 
 app/assets/stylesheets/application.css
 
-	*= require pace/minimal
+	*= require pace/pace-theme-minimal
 	
-	*= require pace/flash
+	*= require pace/pace-theme-flash
 
-	*= require pace/barber-shop
+	*= require pace/pace-theme-barber-shop
 
-	*= require pace/mac-osx
+	*= require pace/pace-theme-mac-osx
 
-	*= require pace/fill-left
+	*= require pace/pace-theme-fill-left
 
-	*= require pace/flat-top
+	*= require pace/pace-theme-flat-top
 
-	*= require pace/big-bounce
+	*= require pace/pace-theme-big-counter
 
-	*= require pace/corner-indicator
+	*= require pace/pace-theme-corner-indicator
 
-	*= require pace/bounce
+	*= require pace/pace-theme-bounce
 
 You may need to restart your rails server.
 

data/app/assets/javascripts/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,13 +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
     }
   };
 
@@ -119,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;
@@ -151,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();
@@ -211,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);
       }
     }
 
@@ -256,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);
     };
 
@@ -273,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;
@@ -335,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;
 
   })();
 
@@ -394,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) {
@@ -514,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,
@@ -523,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];
@@ -536,7 +613,7 @@
       source = _ref2[_j];
       sources.push(new source(options));
     }
-    bar = new Bar;
+    Pace.bar = bar = new Bar;
     scalers = [];
     return uniScaler = new Scaler;
   })();
@@ -612,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 → pace-theme-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 → pace-theme-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 → pace-theme-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 → pace-theme-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 → pace-theme-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 → pace-theme-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 → pace-theme-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 → pace-theme-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/pace-theme-minimal.css

@@ -0,0 +1,18 @@
+/* This is a compiled file, you should be editing the file in the templates directory */
+.pace .pace-progress {
+  background: #29d;
+  position: fixed;
+  z-index: 2000;
+  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,5 +1,5 @@
 module Pace
   module Rails
-    VERSION = "0.0.4"
+    VERSION = "0.0.5"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pace-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Dan Vera
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-24 00:00:00.000000000 Z
+date: 2013-09-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -79,15 +79,15 @@ files:
 - README.md
 - Rakefile
 - 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
-- app/assets/stylesheets/pace/corner-indicator.css
-- app/assets/stylesheets/pace/fill-left.css
-- app/assets/stylesheets/pace/flash.css
-- app/assets/stylesheets/pace/flat-top.css
-- app/assets/stylesheets/pace/mac-osx.css
-- app/assets/stylesheets/pace/minimal.css
+- app/assets/stylesheets/pace/pace-theme-barber-shop.css
+- app/assets/stylesheets/pace/pace-theme-big-counter.css
+- app/assets/stylesheets/pace/pace-theme-bounce.css
+- app/assets/stylesheets/pace/pace-theme-corner-indicator.css
+- app/assets/stylesheets/pace/pace-theme-fill-left.css
+- app/assets/stylesheets/pace/pace-theme-flash.css
+- app/assets/stylesheets/pace/pace-theme-flat-top.css
+- app/assets/stylesheets/pace/pace-theme-mac-osx.css
+- app/assets/stylesheets/pace/pace-theme-minimal.css
 - lib/pace/rails.rb
 - lib/pace/rails/version.rb
 - pace-rails.gemspec
@@ -111,7 +111,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.6
+rubygems_version: 2.1.4
 signing_key: 
 specification_version: 4
 summary: Pace automatic web page progress bar, integrated in Rails assets pipeline.

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

@@ -1,12 +0,0 @@
-.pace .pace-progress {
-  background: #29d;
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-  height: 2px;
-}
-
-.pace-inactive {
-  display: none;
-}