backbone_rails_extensions 0.9.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2e1cae0d9815728d45601caf3e5db499706ebd00
+  data.tar.gz: c589d820ef317fbd5b73539085c078797d165144
+SHA512:
+  metadata.gz: d3aefb0bd3fdaaefd9f0e9bd42e63cf54b35822cb0781c7a453fd70a277da10ab4bcc4f276064fce16ddebe5d289315522ca72fa21d0c332378b1410055c7420
+  data.tar.gz: 63c49bd6f35ba5b324e79438347df43dd90d7107502471fedbeb8ec9bdd1e1b56369413d5a781f08f21817633a49e275130a3ad9ed2a8199ebf52b5c7b039d51

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in backbone-rails-extensions.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Coroutine LLC
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,41 @@
+# BackboneRailsExtensions
+
+This gem provides a set of common extensions to Backbone.js.  These extensions include simple collection views, paginated collection views, searching, and loading indicators.
+
+All files are included in the asset pipeline by default. To leverage the files in your project, simply reference the components in your manifest files.
+
+## Dependencies
+
+The project has a dependency on Spin.js.  Appropriate files are included in the vendor directory.
+
+## Versioning
+
+Major and minor version numbers are pegged to Backbone.js.  Patch versions are specific 
+to this project.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'backbone-rails-extensions', :git => 'git@github.com:coroutine/backbone-rails-extensions.git',
+                                     :tag => '0.9.0'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install backbone-rails-extensions
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/backbone_rails_extensions.gemspec

@@ -0,0 +1,20 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'backbone_rails_extensions/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "backbone_rails_extensions"
+  gem.version       = BackboneRailsExtensions::VERSION
+  gem.authors       = ["Coroutine", "Tim Lowrimore", "John Dugan"]
+  gem.email         = ["gems@coroutine.com"]
+  gem.description   = %q{This gem provides a set of Backbone.js extensions commonly used in Coroutine projects. These extensions include simple collection views, paginated collection views, searching, and loading indicators.}
+  gem.summary       = %q{This gem provides a set of Backbone.js extensions commonly used in Coroutine projects.}
+  gem.homepage      = "https://github.com/coroutine/backbone-rails-extensions"
+  gem.licenses      = ['MIT']
+
+  gem.files         = `git ls-files`.split($/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+end

data/lib/assets/javascripts/jquery/serialize-object.js

@@ -0,0 +1,35 @@
+(function($) {
+    var methods = {
+        setValue: function(path, value, obj) {
+            if(path.length) {
+                var attr = path.shift();
+                if(attr) {
+                    obj[attr] = methods.setValue(path, value, obj[attr] || {});
+                    return obj;
+                } else {
+                    if(obj.push) {
+                        obj.push(value);
+                        return obj;
+                    } else {
+                        return [value];
+                    }
+                }
+            } else {
+                return value;
+            }
+        }
+    };
+    
+    $.fn.serializeObject = function() {
+        var obj     = {},
+            params  = this.serializeArray(),
+            path    = null;
+            
+        $.each(params, function() {
+            path = this.name.replace(/\]/g, "").split(/\[/);
+            methods.setValue(path, this.value, obj);
+        });
+        
+        return obj;
+    };
+})(jQuery);

data/lib/assets/javascripts/list/namespace.js

@@ -0,0 +1,4 @@
+var List = {
+    Router: {},
+    View:   {} 
+}

data/lib/assets/javascripts/list/routers/base.js

@@ -0,0 +1,43 @@
+//= require list/namespace
+
+List.Router.Base = Backbone.Router.extend({
+    routes: {
+        "":                                         "index",
+        "page/:page":                               "_page",
+        "query/*query/within/*within":              "_search",
+        "page/:page/query/*query/within/*within":   "_searchWithPage"
+    },
+    
+    currentParams: {},
+    
+    initialize: function() {
+        this.initializeView();
+    },
+    
+    initializeView: function() {
+        this._raiseUnimplementedError();
+    },
+    
+    index: function(parameters) {
+        this._raiseUnimplementedError();
+    },
+    
+    _raiseUnimplementedError: function() {
+        throw "method not implemented";
+    },
+    
+    _search: function(query, within) {
+        this._searchWithPage(1, query, within);
+    },
+    
+    _searchWithPage: function(page, query, within) {
+        this.index({ 
+            query:  query, 
+            within: within, 
+            page:   page || 1 });
+    },
+    
+    _page: function(page) {
+        this.index({ page: page || 1 });
+    }
+});

data/lib/assets/javascripts/list/views/collection_view.js

@@ -0,0 +1,27 @@
+//= require list/namespace
+
+List.View.CollectionView = Backbone.View.extend({
+	setCollection: function(collection) {
+		if(collection !== this.collection) {
+			if(this.collection) {
+				this.collection.off("add remove reset", this.render, this);
+				this.collection.off("error", this.renderError, this);
+			}
+			
+			this.collection = collection;
+			if(this.collection) {
+				this.collection.on("add remove reset", this.render, this);
+				this.collection.on("error", this.renderError, this);
+				this.render();
+			}
+		}
+	},
+	
+	render: function() {
+	    throw "method not implemented";
+	},
+	
+	renderError: function(data, response) {
+	    alert("An error occurred while fetching the records from the server.");
+	}
+});

data/lib/assets/javascripts/list/views/search.js

@@ -0,0 +1,30 @@
+//= require list/namespace
+
+List.View.Search = Backbone.View.extend({
+  events: {
+    "keydown #search_field_name":    "_onNameChanged",
+    "change  #search_field_type":    "_onTypeChanged"
+  },
+
+  // handlers
+  _onNameChanged: function(evt) {
+    if (evt.keyCode == 13) {    // suppress enter key
+      evt.preventDefault();
+    }
+    this._doSearch();
+  },
+
+  _onTypeChanged: function(evt) {
+    this._doSearch();
+  },
+
+  // actions
+  _doSearch: _.debounce(function() {
+    var  query    = escape(this.$("#search_field_name").val()),
+    within   = this.$("#search_field_type").val(),
+    route    = [ "query", query, "within", within ].join("/");
+
+    Backbone.history.navigate(route, { trigger: true });
+  }, 500)
+
+});

data/lib/assets/javascripts/list/views/simple_collection_view.js

@@ -0,0 +1,56 @@
+//= require list/namespace
+//= require list/views/collection_view
+
+List.View.SimpleCollectionView = List.View.CollectionView.extend({
+	
+	//-----------------------------------------------------
+    // initialization
+	//-----------------------------------------------------
+	
+    initialize: function() {
+		this.beforeInitialize();
+		
+		if(!this.getItemClass) {
+			throw "The method 'getItemClass' was expected, but was not found. \
+					Make sure you've specified this method in your subclasses of \
+					List.View.SimpleCollectionView"
+		}
+		this.itemViews = [];
+		
+		_.bindAll(this, "render", "_appendItemToView");
+		
+		this.afterInitialize();
+	},
+	
+	render: function() {
+		this._clearItemList();
+		if(this.collection) {
+			_.each(this.collection.models, this._appendItemToView);
+		}
+	},
+	
+	
+	//-----------------------------------------------------
+    // public methods 
+	//-----------------------------------------------------
+	
+    // callbacks: override if needed
+	afterInitialize: function() {},
+	beforeInitialize: function() {},
+	
+	
+	//-----------------------------------------------------
+    // private methods 
+	//-----------------------------------------------------
+	
+	_appendItemToView: function(item) {
+		var itemClass	= this.getItemClass(),
+			itemView	= new itemClass({ model: item });
+			
+		this.itemViews.push(itemView);
+		this.$el.append(itemView.el);
+	},
+	_clearItemList: function() {
+		while(this.itemViews.length) { this.itemViews.pop().remove(); }
+	}
+});

data/lib/assets/javascripts/loader/namespace.js

@@ -0,0 +1,4 @@
+var Loader = {
+    View:   {},
+    Util:   {}
+};

data/lib/assets/javascripts/loader/sync.js

@@ -0,0 +1,24 @@
+//= require loader/namespace
+
+Loader.customizeBackboneSync = _.once(function() {
+    var customSync = function(method, model, options) {
+        var success     = options.success,
+            error       = options.error,
+            showLoader  = _.has(options, "showLoader") ? options.showLoader : true;
+            
+        options.success = function() {
+            success.apply(this, arguments);
+            Loader.View.Base.hide();
+        };
+        
+        options.error = function() {
+            error.apply(this, arguments);
+            Loader.View.Base.hide();
+        };
+        
+        if(showLoader) Loader.View.Base.show();
+        Backbone.sync.call(this, method, model, options);
+    };
+    
+    Backbone.Model.prototype.sync = Backbone.Collection.prototype.sync = customSync;
+})

data/lib/assets/javascripts/loader/utils/counting_latch.js

@@ -0,0 +1,26 @@
+//= require loader/namespace
+
+Loader.Util.CountingLatch = function(initialCount) {
+    this.count = initialCount || 0;
+}
+
+_.extend(Loader.Util.CountingLatch.prototype, Backbone.Events, {
+    countUp: function() {
+        this.count++;
+        this._check();
+    },
+    
+    countDown: function() {
+        // ensure the count never goes below zero.
+        this.count = Math.max(0, this.count - 1);
+        this._check();
+    },
+    
+    _check: function() {
+        if(this.count) {
+            this.trigger("latch:counting");
+        } else {
+            this.trigger("latch:complete");
+        }
+    }
+});

data/lib/assets/javascripts/loader/views/base.js

@@ -0,0 +1,41 @@
+//= require jquery.spin
+//= require loader/namespace
+//= require loader/utils/counting_latch
+
+Loader.View.Base = {
+    CONFIG: {
+        lines:      12,
+        length:     3,
+        width:      4,
+        radius:     15,
+        trail:      34,
+        speed:      1.3,
+        shadow:     true,
+        hwaccel:    true,
+        color:      "#FFF"
+    },
+    
+    initialize: _.once(function() {
+        _.bindAll(this, "show", "hide");
+        
+        this.latch = new Loader.Util.CountingLatch();
+        this.latch.on("latch:counting", this._showLoaders, this);
+        this.latch.on("latch:complete", this._hideLoaders, this);
+    }),
+    
+    show: function() {
+        this.latch.countUp();
+    },
+    
+    hide: function() {
+        this.latch.countDown();
+    },
+    
+    _showLoaders: function() {
+        $("#loading-indicator").fadeIn(50).spin(this.CONFIG);
+    },
+    
+    _hideLoaders: function() {
+        $("#loading-indicator").fadeOut(50).spin(false);
+    }
+};

data/lib/assets/javascripts/pagination/collections/paginated_collection.js

@@ -0,0 +1,24 @@
+//= require pagination/namespace
+//= require pagination/models/pagination
+
+Pagination.Collection.PaginatedCollection = Backbone.Collection.extend({
+    pagination: new Pagination.Model.Pagination(),
+    
+    initialize: function() {
+        this.on("destroy", this._decrement, this);
+        this.on("add", this._increment, this);
+    },
+    
+    parse: function(response) {
+        this.pagination.set(response.pagination);
+        return response;
+    },
+    
+    _decrement: function() {
+        this.pagination.decrement("totalCount");
+    },
+    
+    _increment: function() {
+        this.pagination.increment("totalCount");
+    }
+});

data/lib/assets/javascripts/pagination/models/pagination.js

@@ -0,0 +1,57 @@
+//= require pagination/namespace
+
+Pagination.Model.Pagination = Backbone.Model.extend({
+    defaults: {
+        "totalCount":   0,
+        "pageCount":    0,
+        "numPages":     0,
+        "currentPage":  1,
+        "offsetValue":  0,
+        "maxPageLinks": 10
+    },
+    
+    validate: function(attrs) {
+        var nonNumericAttrs = _(attrs).reduce(function(m, v, k) {  
+            if(!_(v).isNumber()) {
+                m.push("'" + k + "' must be a real number.");
+            }
+            return m;
+        }, []);
+        
+        if(nonNumericAttrs.length) {
+            return nonNumericAttrs.join("\n");
+        }
+    },
+    
+    increment: function(field) {
+        var incremented = this.get(field) + 1,
+            args        = {};
+            
+        args[field]     = incremented;
+        this.set(args);
+    },
+    
+    decrement: function(field) {
+        var decremented = Math.max(0, this.get(field) - 1),
+            args        = {};
+            
+        args[field]     = decremented;    
+        this.set(args);
+    },
+    
+    isFirstPage: function() {
+        return this.get("currentPage") == 1;
+    },
+    
+    isLastPage: function() {
+        return this.get("currentPage") >= this.get("numPages");
+    },
+    
+    nextPage: function() {
+        return this.get("currentPage") + 1;
+    },
+    
+    prevPage: function() {
+        return Math.max(1, this.get("currentPage") - 1);
+    }
+});

data/lib/assets/javascripts/pagination/namespace.js

@@ -0,0 +1,5 @@
+var Pagination = {
+    View:       {},
+    Model:      {},
+    Collection: {}
+};

data/lib/assets/javascripts/pagination/templates/pagination.jst.ejs

@@ -0,0 +1,6 @@
+<div class="pagination_totals"></div>
+<nav class="pagination_links">
+    <a href="#prev" class="prev">&laquo; Previous</a>
+    <span class="page_numbers"></span>
+    <a href="#next" class="next">Next &raquo;</a>
+</nav>

data/lib/assets/javascripts/pagination/views/pagination.js

@@ -0,0 +1,164 @@
+//= require pagination/namespace
+//= require pagination/templates/pagination
+
+Pagination.View.Pagination = Backbone.View.extend({
+    tagName:        "div",
+    infoTemplate:   _.template("<%= start %> - <%= end %> of <%= total %>"),
+    hashPartExpr:   /(page\/\d+)/,
+    
+    events: {
+        "click .prev":              "fetchPreviousPage",
+        "click .next":              "fetchNextPage",
+        "click .page_numbers a":    "fetchPage"
+    },
+    
+    initialize: function(options) {        
+        if(!this.model) {
+            throw "No pagination model was specified.";
+        }
+        
+        if(_(options.infoTemplate).isFunction()) {
+            this.infoTemplate = options.infoTemplate;
+        }
+        
+        this.model.on("change", function() {
+            this.renderInfo();
+            this.renderLinks();
+        }, this);
+        
+        this.render();
+    },
+    
+    render: function() {
+        this.$el.append(JST["pagination/templates/pagination"]());
+        this.renderInfo();
+        this.renderLinks();
+    },
+    
+    renderInfo: function() {
+        var model       = this.model,
+            total       = model.get("totalCount"),
+            pageCount   = model.get("pageCount"),
+            numPages    = model.get("numPages"),
+            currentPage = model.get("currentPage"),
+            offsetValue = model.get("offsetValue"),
+            info        = this.infoTemplate({ 
+                start:  offsetValue + 1,
+                end:    pageCount + offsetValue,
+                total:  total
+            });
+                        
+        this.$(".pagination_totals").html(info);
+    },
+    
+    renderLinks: function() {
+        this.renderPreviousAndNextLinks();
+        this.renderPageLinks();
+    },
+    
+    renderPreviousAndNextLinks: function() {
+        var isFirstPage = this.model.isFirstPage(),
+            isLastPage  = this.model.isLastPage(),
+            linkPrev    = this.$(".prev"),
+            linkNext    = this.$(".next");
+            
+        if(isFirstPage) {
+            linkPrev.addClass("disabled");
+        } else {
+            linkPrev.removeClass("disabled");
+        }
+        
+        if(isLastPage) {
+            linkNext.addClass("disabled");
+        } else {
+            linkNext.removeClass("disabled");
+        }
+    },
+    
+    renderPageLinks: function() {
+        var numPages        = this.model.get("numPages"),
+            maxPageLinks    = Math.min(this.model.get("maxPageLinks"), numPages),
+            loopLinks       = Math.max(maxPageLinks - 2, 0),
+            currentPage     = this.model.get("currentPage"),
+            pageNumbers     = this.$(".page_numbers");
+        
+        // clear the previous page numbers
+        pageNumbers.empty();
+        
+        // Add the first page
+        pageNumbers.append(this._createPageLink(1, currentPage));
+        
+        if(numPages > 1) {
+            var maxOffset   = Math.max(currentPage - loopLinks, 0) + maxPageLinks,
+                minOffset   = Math.min(maxOffset, numPages) - maxPageLinks;
+            
+            // if we have an offset value greater than zero, render an ellipsis
+            // after the page-1 link.
+            if(minOffset) { pageNumbers.append("&hellip;"); }
+            
+            // render page links between the first and last page.
+            _(loopLinks).times(_.bind(function(i) { 
+                pageNumbers.append(
+                    this._createPageLink(i + 2 + minOffset, currentPage));
+            }, this));
+            
+            // If the tail of our 'in-between' links is not within
+            // range of the last page link, such that it creates a
+            // natural numeric series upto the last page link, render
+            // an ellipsis.
+            if(maxOffset < numPages) {
+                pageNumbers.append("&hellip;");
+            }
+            
+            // Add the last page
+            pageNumbers.append(this._createPageLink(numPages, currentPage));
+        }
+    },
+    
+    fetchPreviousPage: function(evt) {
+        this._fetchPage(evt, { direction: "prevPage" });
+    },
+    
+    fetchNextPage: function(evt) {
+        this._fetchPage(evt, { direction: "nextPage" });
+    },
+    
+    fetchPage: function(evt) {
+        var link    = $(evt.currentTarget),
+            page    = link.data("page");
+            
+        this._fetchPage(evt, { page: page });
+    },
+    
+    _createPageLink: function(pageNumber, currentPage) {
+        var attrs   = { "href": "#", "data-page": pageNumber, "text": pageNumber };
+        
+        if(pageNumber == currentPage) {
+            attrs["class"] = "disabled";
+        }
+        return $('<a/>', attrs);
+    },
+    
+    _fetchPage: function(evt, options) {
+        evt.preventDefault();
+        var link    = $(evt.currentTarget),
+            enabled = !link.hasClass("disabled");
+        
+        if(enabled) {
+            var pageNum     = options.page ? options.page : this.model[options.direction](),
+                fragment    = ["page", pageNum].join("/"),
+                route       = this._updateRoute(fragment);
+                
+            Backbone.history.navigate(route, { trigger: true });
+        }
+    },
+    
+    _updateRoute: function(fragment) {
+        var hash = location.hash;
+        if(hash.match(this.hashPartExpr)) {
+            return hash.replace(RegExp.$1, fragment);
+        } else {
+            return _([fragment, hash.replace("#", "")]).compact().join("/");
+        }
+    }
+});

data/lib/backbone_rails_extensions.rb

@@ -0,0 +1,6 @@
+require "backbone_rails_extensions/version"
+
+
+module BackboneRailsExtensions
+  class Engine < ::Rails::Engine; end
+end

data/lib/backbone_rails_extensions/version.rb

@@ -0,0 +1,3 @@
+module BackboneRailsExtensions
+  VERSION = '0.9.3'
+end

data/vendor/assets/javascripts/jquery.spin.js

@@ -0,0 +1,48 @@
+//= require spin
+/*
+
+You can now create a spinner using any of the variants below:
+
+$("#el").spin(); // Produces default Spinner using the text color of #el.
+$("#el").spin("small"); // Produces a 'small' Spinner using the text color of #el.
+$("#el").spin("large", "white"); // Produces a 'large' Spinner in white (or any valid CSS color).
+$("#el").spin({ ... }); // Produces a Spinner using your custom settings.
+
+$("#el").spin(false); // Kills the spinner.
+
+*/
+(function($) {
+	$.fn.spin = function(opts, color) {
+		var presets = {
+			"tiny": { lines: 8, length: 2, width: 2, radius: 3 },
+			"small": { lines: 8, length: 4, width: 3, radius: 5 },
+			"large": { lines: 10, length: 8, width: 4, radius: 8 }
+		};
+		if (Spinner) {
+			return this.each(function() {
+				var $this = $(this),
+					data = $this.data();
+
+				if (data.spinner) {
+					data.spinner.stop();
+					delete data.spinner;
+				}
+				if (opts !== false) {
+					if (typeof opts === "string") {
+						if (opts in presets) {
+							opts = presets[opts];
+						} else {
+							opts = {};
+						}
+						if (color) {
+							opts.color = color;
+						}
+					}
+					data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
+				}
+			});
+		} else {
+			throw "Spinner class not available.";
+		}
+	};
+})(jQuery);

data/vendor/assets/javascripts/spin.js

@@ -0,0 +1,295 @@
+//fgnass.github.com/spin.js#v1.2.3
+(function(window, document, undefined) {
+
+/**
+ * Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
+ * Licensed under the MIT license
+ */
+
+  var prefixes = ['webkit', 'Moz', 'ms', 'O'], /* Vendor prefixes */
+      animations = {}, /* Animation rules keyed by their name */
+      useCssAnimations;
+
+  /**
+   * Utility function to create elements. If no tag name is given,
+   * a DIV is created. Optionally properties can be passed.
+   */
+  function createEl(tag, prop) {
+    var el = document.createElement(tag || 'div'),
+        n;
+
+    for(n in prop) {
+      el[n] = prop[n];
+    }
+    return el;
+  }
+
+  /**
+   * Appends children and returns the parent.
+   */
+  function ins(parent /* child1, child2, ...*/) {
+    for(var i=1, n=arguments.length; i<n; i++) {
+      parent.appendChild(arguments[i]);
+    }
+    return parent;
+  }
+
+  /**
+   * Insert a new stylesheet to hold the @keyframe or VML rules.
+   */
+  var sheet = (function() {
+    var el = createEl('style');
+    ins(document.getElementsByTagName('head')[0], el);
+    return el.sheet || el.styleSheet;
+  })();
+
+  /**
+   * Creates an opacity keyframe animation rule and returns its name.
+   * Since most mobile Webkits have timing issues with animation-delay,
+   * we create separate rules for each line/segment.
+   */
+  function addAnimation(alpha, trail, i, lines) {
+    var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-'),
+        start = 0.01 + i/lines*100,
+        z = Math.max(1-(1-alpha)/trail*(100-start) , alpha),
+        prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase(),
+        pre = prefix && '-'+prefix+'-' || '';
+
+    if (!animations[name]) {
+      sheet.insertRule(
+        '@' + pre + 'keyframes ' + name + '{' +
+        '0%{opacity:'+z+'}' +
+        start + '%{opacity:'+ alpha + '}' +
+        (start+0.01) + '%{opacity:1}' +
+        (start+trail)%100 + '%{opacity:'+ alpha + '}' +
+        '100%{opacity:'+ z + '}' +
+        '}', 0);
+      animations[name] = 1;
+    }
+    return name;
+  }
+
+  /**
+   * Tries various vendor prefixes and returns the first supported property.
+   **/
+  function vendor(el, prop) {
+    var s = el.style,
+        pp,
+        i;
+
+    if(s[prop] !== undefined) return prop;
+    prop = prop.charAt(0).toUpperCase() + prop.slice(1);
+    for(i=0; i<prefixes.length; i++) {
+      pp = prefixes[i]+prop;
+      if(s[pp] !== undefined) return pp;
+    }
+  }
+
+  /**
+   * Sets multiple style properties at once.
+   */
+  function css(el, prop) {
+    for (var n in prop) {
+      el.style[vendor(el, n)||n] = prop[n];
+    }
+    return el;
+  }
+
+  /**
+   * Fills in default values.
+   */
+  function merge(obj) {
+    for (var i=1; i < arguments.length; i++) {
+      var def = arguments[i];
+      for (var n in def) {
+        if (obj[n] === undefined) obj[n] = def[n];
+      }
+    }
+    return obj;
+  }
+
+  /**
+   * Returns the absolute page-offset of the given element.
+   */
+  function pos(el) {
+    var o = {x:el.offsetLeft, y:el.offsetTop};
+    while((el = el.offsetParent)) {
+      o.x+=el.offsetLeft;
+      o.y+=el.offsetTop;
+    }
+    return o;
+  }
+
+  /** The constructor */
+  var Spinner = function Spinner(o) {
+    if (!this.spin) return new Spinner(o);
+    this.opts = merge(o || {}, Spinner.defaults, defaults);
+  },
+  defaults = Spinner.defaults = {
+    lines: 12, // The number of lines to draw
+    length: 7, // The length of each line
+    width: 5, // The line thickness
+    radius: 10, // The radius of the inner circle
+    color: '#000', // #rgb or #rrggbb
+    speed: 1, // Rounds per second
+    trail: 100, // Afterglow percentage
+    opacity: 1/4,
+    fps: 20
+  },
+  proto = Spinner.prototype = {
+    spin: function(target) {
+      this.stop();
+      var self = this,
+          el = self.el = css(createEl(), {position: 'relative'}),
+          ep, // element position
+          tp; // target position
+
+      if (target) {
+        target.insertBefore(el, target.firstChild||null);
+        tp = pos(target);
+        ep = pos(el);
+        css(el, {
+          left: (target.offsetWidth >> 1) - ep.x+tp.x + 'px',
+          top: (target.offsetHeight >> 1) - ep.y+tp.y + 'px'
+        });
+      }
+      el.setAttribute('aria-role', 'progressbar');
+      self.lines(el, self.opts);
+      if (!useCssAnimations) {
+        // No CSS animation support, use setTimeout() instead
+        var o = self.opts,
+            i = 0,
+            fps = o.fps,
+            f = fps/o.speed,
+            ostep = (1-o.opacity)/(f*o.trail / 100),
+            astep = f/o.lines;
+
+        (function anim() {
+          i++;
+          for (var s=o.lines; s; s--) {
+            var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity);
+            self.opacity(el, o.lines-s, alpha, o);
+          }
+          self.timeout = self.el && setTimeout(anim, ~~(1000/fps));
+        })();
+      }
+      return self;
+    },
+    stop: function() {
+      var el = this.el;
+      if (el) {
+        clearTimeout(this.timeout);
+        if (el.parentNode) el.parentNode.removeChild(el);
+        this.el = undefined;
+      }
+      return this;
+    }
+  };
+  proto.lines = function(el, o) {
+    var i = 0,
+        seg;
+
+    function fill(color, shadow) {
+      return css(createEl(), {
+        position: 'absolute',
+        width: (o.length+o.width) + 'px',
+        height: o.width + 'px',
+        background: color,
+        boxShadow: shadow,
+        transformOrigin: 'left',
+        transform: 'rotate(' + ~~(360/o.lines*i) + 'deg) translate(' + o.radius+'px' +',0)',
+        borderRadius: (o.width>>1) + 'px'
+      });
+    }
+    for (; i < o.lines; i++) {
+      seg = css(createEl(), {
+        position: 'absolute',
+        top: 1+~(o.width/2) + 'px',
+        transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
+        opacity: o.opacity,
+        animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
+      });
+      if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}));
+      ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')));
+    }
+    return el;
+  };
+  proto.opacity = function(el, i, val) {
+    if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
+  };
+
+  /////////////////////////////////////////////////////////////////////////
+  // VML rendering for IE
+  /////////////////////////////////////////////////////////////////////////
+
+  /**
+   * Check and init VML support
+   */
+  (function() {
+    var s = css(createEl('group'), {behavior: 'url(#default#VML)'}),
+        i;
+
+    if (!vendor(s, 'transform') && s.adj) {
+
+      // VML support detected. Insert CSS rules ...
+      for (i=4; i--;) sheet.addRule(['group', 'roundrect', 'fill', 'stroke'][i], 'behavior:url(#default#VML)');
+
+      proto.lines = function(el, o) {
+        var r = o.length+o.width,
+            s = 2*r;
+
+        function grp() {
+          return css(createEl('group', {coordsize: s +' '+s, coordorigin: -r +' '+-r}), {width: s, height: s});
+        }
+
+        var g = grp(),
+            margin = ~(o.length+o.radius+o.width)+'px',
+            i;
+
+        function seg(i, dx, filter) {
+          ins(g,
+            ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
+              ins(css(createEl('roundrect', {arcsize: 1}), {
+                  width: r,
+                  height: o.width,
+                  left: o.radius,
+                  top: -o.width>>1,
+                  filter: filter
+                }),
+                createEl('fill', {color: o.color, opacity: o.opacity}),
+                createEl('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
+              )
+            )
+          );
+        }
+
+        if (o.shadow) {
+          for (i = 1; i <= o.lines; i++) {
+            seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
+          }
+        }
+        for (i = 1; i <= o.lines; i++) {
+          seg(i);
+        }
+        return ins(css(el, {
+          margin: margin + ' 0 0 ' + margin,
+          zoom: 1
+        }), g);
+      };
+      proto.opacity = function(el, i, val, o) {
+        var c = el.firstChild;
+        o = o.shadow && o.lines || 0;
+        if (c && i+o < c.childNodes.length) {
+          c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild;
+          if (c) c.opacity = val;
+        }
+      };
+    }
+    else {
+      useCssAnimations = vendor(s, 'animation');
+    }
+  })();
+
+  window.Spinner = Spinner;
+
+})(window, document);

metadata

@@ -0,0 +1,74 @@
+--- !ruby/object:Gem::Specification
+name: backbone_rails_extensions
+version: !ruby/object:Gem::Version
+  version: 0.9.3
+platform: ruby
+authors:
+- Coroutine
+- Tim Lowrimore
+- John Dugan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-07-22 00:00:00.000000000 Z
+dependencies: []
+description: This gem provides a set of Backbone.js extensions commonly used in Coroutine
+  projects. These extensions include simple collection views, paginated collection
+  views, searching, and loading indicators.
+email:
+- gems@coroutine.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- backbone_rails_extensions.gemspec
+- lib/assets/javascripts/jquery/serialize-object.js
+- lib/assets/javascripts/list/namespace.js
+- lib/assets/javascripts/list/routers/base.js
+- lib/assets/javascripts/list/views/collection_view.js
+- lib/assets/javascripts/list/views/search.js
+- lib/assets/javascripts/list/views/simple_collection_view.js
+- lib/assets/javascripts/loader/namespace.js
+- lib/assets/javascripts/loader/sync.js
+- lib/assets/javascripts/loader/utils/counting_latch.js
+- lib/assets/javascripts/loader/views/base.js
+- lib/assets/javascripts/pagination/collections/paginated_collection.js
+- lib/assets/javascripts/pagination/models/pagination.js
+- lib/assets/javascripts/pagination/namespace.js
+- lib/assets/javascripts/pagination/templates/pagination.jst.ejs
+- lib/assets/javascripts/pagination/views/pagination.js
+- lib/backbone_rails_extensions.rb
+- lib/backbone_rails_extensions/version.rb
+- vendor/assets/javascripts/jquery.spin.js
+- vendor/assets/javascripts/spin.js
+homepage: https://github.com/coroutine/backbone-rails-extensions
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: This gem provides a set of Backbone.js extensions commonly used in Coroutine
+  projects.
+test_files: []