Permalink
Browse files

Initial commit.

  • Loading branch information...
0 parents commit dbe7c8c26f6c8d604c8d11435c7146d1b1fce78c Alexander Staubo committed Jul 26, 2011
Showing with 578 additions and 0 deletions.
  1. +22 −0 LICENSE
  2. +38 −0 README.md
  3. +101 −0 examples/simple.html
  4. +107 −0 examples/sorted.html
  5. +310 −0 jquery_collection_view.js
@@ -0,0 +1,22 @@
+Copyright (c) 2011 Alexander Staubo
+
+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.
@@ -0,0 +1,38 @@
+Collection view for Backbone and JQuery
+=======================================
+
+`Backbone.JQuery.CollectionView` is a generic, reusable view implementation which provides automatic creation of item views, as well as rudimentary reordering using mouse dragging, similar to JQuery's `Sortable`. Currently only vertical dragging is supported.
+
+Usage
+-----
+
+There are some examples in the `examples` directory. Basically:
+
+* Subclass the collection view and override the `createSubview()` method to return a view that corresponds to each model in the collection.
+* Instantiate the collection view with a hash of options.
+* Call `render()` on the view.
+
+When instantiating the collection view, the following option is required:
+
+* `collection`: This must be the collection that the view will be backed by.
+
+Optional options:
+
+* `dragTolerance`: The number of pixels that the mouse must be moved before the view interprets the action as a dragging movement.
+* `scrollTolerance`: The number of pixels that the mouse must be within the edge of the window in order to trigger scrolling when dragging.
+* `draggingClass`: Class name to add to item views when dragging. Defaults to `dragging`.
+* `positionAttribute`: Name of attribute that has the ordinal position of each item. If this is specified, this attribute is maintained, and it is assumed that the collection has a similar comparator that uses the attribute. Otherwise, it is assumed that the collection is not automatically sorted, and dragging items in the view will simply rearrange the collection's contents.
+* `dragConstrainX`: If true, dragging will be constrained to the Y axis only.
+* `showPlaceholder`: If true, while dragging, leave a blank area where the dragged item was. Defaults to true.
+
+Requirements
+------------
+
+* Backbone: http://documentcloud.github.com/backbone/
+* Underscore: http://documentcloud.github.com/underscore/
+* JQuery: http://jquery.com/
+
+License
+-------
+
+The code uses the MIT license. See the file `LICENSE`.
@@ -0,0 +1,101 @@
+<html>
+ <head>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
+ <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
+ <script src="../jquery_collection_view.js"></script>
+ <style>
+ body {
+ padding: 100px 200px;
+ }
+ #item_list {
+ width: 400px;
+ }
+ .item {
+ padding: 10px;
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ list-style: none;
+ cursor: move;
+ margin: 0;
+ }
+ li:hover {
+ background: #f0f0f0;
+ }
+ .item.dragging {
+ opacity: 0.5;
+ z-index: 5000;
+ }
+ ol {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+ .drop_marker {
+ height: 3px;
+ display: block;
+ background: #7db0ff;
+ z-index: 10000;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Items</h1>
+ <p>Drag to change order.</p>
+ <ol id="item_list"></ol>
+
+ <script>
+ Item = Backbone.Model.extend({
+ });
+
+ ItemCollection = Backbone.Collection.extend({
+ model: Item
+ });
+
+ ItemView = Backbone.View.extend({
+ tagName: 'li',
+
+ className: 'item',
+
+ initialize: function(spec) {
+ _.bindAll(this, 'render');
+ this.model.bind('change', this.render);
+ this.model.view = this;
+ },
+
+ render: function() {
+ $(this.el).html(this.model.get('title'));
+ return this;
+ }
+ });
+
+ ItemCollectionView = Backbone.JQuery.CollectionView.extend({
+ initialize: function(options) {
+ Backbone.JQuery.CollectionView.prototype.initialize.call(this, options);
+ _.bindAll(this, 'createSubview');
+ },
+
+ createSubview: function(model) {
+ return new ItemView({model: model});
+ }
+ });
+
+ $(document).ready(function () {
+ var collection = new ItemCollection();
+ collection.add(new Item({title: "An item"}));
+ collection.add(new Item({title: "One more item"}));
+ collection.add(new Item({title: "Third item"}));
+ collection.add(new Item({title: "Four, really?"}));
+ collection.add(new Item({title: "Five is stretching it!"}));
+
+ new ItemCollectionView({
+ el: "#item_list",
+ tagName: 'li',
+ collection: collection,
+ dragConstraintX: true
+ }).render();
+ });
+ </script>
+ </body>
+</html>
@@ -0,0 +1,107 @@
+<html>
+ <head>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
+ <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
+ <script src="../jquery_collection_view.js"></script>
+ <style>
+ body {
+ padding: 100px 200px;
+ }
+ #item_list {
+ width: 400px;
+ }
+ .item {
+ padding: 10px;
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ list-style: none;
+ cursor: move;
+ margin: 0;
+ }
+ li:hover {
+ background: #f0f0f0;
+ }
+ .item.dragging {
+ opacity: 0.5;
+ z-index: 5000;
+ }
+ ol {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+ .drop_marker {
+ height: 3px;
+ display: block;
+ background: #7db0ff;
+ z-index: 10000;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Items</h1>
+ <p>Drag to change order.</p>
+
+ <ol id="item_list"></ol>
+
+ <script>
+ Item = Backbone.Model.extend({
+ });
+
+ ItemCollection = Backbone.Collection.extend({
+ model: Item,
+
+ comparator: function(item) {
+ return item.get('position');
+ }
+ });
+
+ ItemView = Backbone.View.extend({
+ tagName: 'li',
+
+ className: 'item',
+
+ initialize: function(spec) {
+ _.bindAll(this, 'render');
+ this.model.bind('change', this.render);
+ this.model.view = this;
+ },
+
+ render: function() {
+ $(this.el).html(this.model.get('position') + '. ' + this.model.get('title'));
+ return this;
+ }
+ });
+
+ ItemCollectionView = Backbone.JQuery.CollectionView.extend({
+ initialize: function(options) {
+ Backbone.JQuery.CollectionView.prototype.initialize.call(this, options);
+ _.bindAll(this, 'createSubview');
+ },
+
+ createSubview: function(model) {
+ return new ItemView({model: model});
+ }
+ });
+
+ $(document).ready(function () {
+ var collection = new ItemCollection();
+ collection.add(new Item({position: 1, title: "An item"}));
+ collection.add(new Item({position: 2, title: "One more item"}));
+ collection.add(new Item({position: 3, title: "Third item"}));
+ collection.add(new Item({position: 4, title: "Four, really?"}));
+ collection.add(new Item({position: 5, title: "Five is stretching it!"}));
+
+ new ItemCollectionView({
+ el: "#item_list",
+ tagName: 'li',
+ collection: collection,
+ dragConstraintX: true,
+ positionAttribute: 'position'
+ }).render();
+ });
+ </script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit dbe7c8c

Please sign in to comment.