backbone.kineticview - npm Package Compare versions

Comparing version 0.5.1 to 0.9.0

backbone.KineticView.js

@@ -8,2 +8,4 @@ (function(root, factory) {
     });
+  } else if (typeof exports !== 'undefined') {
+    factory(root, require('backbone'), require('kinetic'));
   } else {
@@ -16,7 +18,6 @@ root.Backbone.KineticView = factory(root, Backbone, Kinetic);
      var KineticView = function(options) {
-      options = options || {};
       this.cid = _.uniqueId('view');
-      this._configure(options || {});
+      options || (options = {});
+      _.extend(this, _.pick(options, viewOptions));
       this._ensureElement();
-      this.delegateEvents();
       this.initialize.apply(this, arguments);
@@ -26,23 +27,27 @@ };
     var delegateEventSplitter = /^(\S+)\s*(.*)$/;
-    var viewOptions = ['model', 'collection', 'el', 'attributes', 'events'];
+    var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'events', 'nodeType'];
 
     _.extend(KineticView.prototype, Backbone.Events, {
+      nodeType : 'Group',
+
       initialize: function(){},
-      el : function(){
-        return new Kinetic.Group();
-      },
+
       render : function(){
         return this;
       },
+
       remove: function() {
-        this.$el.destroy();
+        this.undelegateEvents();
+        this.el.destroy();
         this.stopListening();
         return this;
       },
-      setElement: function(element, delegate) {
-        if (this.$el) this.undelegateEvents();
-        this.$el = element;
-        if (delegate !== false) this.delegateEvents();
+
+      setElement: function(element) {
+        this.undelegateEvents();
+        this.el = element;
+        this.delegateEvents();
         return this;
       },
+
       _deleteEventFromNode : function(node) {
@@ -56,4 +61,7 @@ var _this = this;
         var _this = this;
-        this._deleteEventFromNode(this.$el);
-        _.each(this.$el.children,function(child){
+        if (!this.el) {
+          return this;
+        }
+        this._deleteEventFromNode(this.el);
+        _.each(this.el.children, function(child){
           _this._deleteEventFromNode(child);
@@ -63,2 +71,12 @@ });
       },
+      undelegate: function(eventName, selector) {
+        eventName += '.delegateEvents' + this.cid;
+        if (selector === '' || !selector) {
+          this.el.off(eventName);
+        } else {
+          this.el.find && this.el.find(selector).each(function(child){
+            child.off(eventName);
+          });
+        }
+      },
       delegateEvents: function(events) {
@@ -71,18 +89,20 @@ if (!(events || (events = _.result(this, 'events')))) return this;
           if (!method) continue;
-
           var match = key.match(delegateEventSplitter);
-          var eventName = match[1], selector = match[2];
-          method = _.bind(method, this);
-          eventName += '.delegateEvents' + this.cid;
-
-          if (selector === '') {
-            this.$el.on(eventName, method);
-          } else {
-            this.$el.find(selector).each(function(child){
-              child.on(eventName, method);
-            });
-          }
+          this.delegate(match[1], match[2], _.bind(method, this));
         }
         return this;
       },
+      delegate: function(eventName, selector, listener) {
+        // listener = selector || listener;
+        eventName += '.delegateEvents' + this.cid;
+        if (selector === '') {
+          this.el.on(eventName, listener);
+        } else if (!listener) {
+          this.el.on(eventName, selector);
+        } else {
+          this.el.find && this.el.find(selector).each(function(child){
+            child.on(eventName, listener);
+          });
+        }
+      },
       _configure: function(options) {
@@ -93,9 +113,17 @@ if (this.options) options = _.extend({}, _.result(this, 'options'), options);
       },
+      _createElement: function(nodeType) {
+        return new Kinetic[nodeType];
+      },
       _ensureElement: function() {
         if (!this.el) {
-          var $el = new Kinetic.Group();
-          this.setElement($el, false);
+          var attrs = _.extend({}, _.result(this, 'attributes'));
+          if (this.id) attrs.id = _.result(this, 'id');
+          this.setElement(this._createElement(_.result(this, 'nodeType')));
+          this._setAttributes(attrs);
         } else {
-          this.setElement(_.result(this, 'el'), false);
+          this.setElement(_.result(this, 'el'));
         }
+      },
+      _setAttributes: function(attributes) {
+        this.el.setAttrs(attributes);
       }
@@ -102,0 +130,0 @@ });

bower.json

 {
   "name": "backbone.KineticView",
-  "version": "0.5.1",
+  "version": "0.9.0",
   "homepage": "https://github.com/slash-system/backbone.kineticview",
@@ -5,0 +5,0 @@ "authors": [

package.json

@@ -21,3 +21,3 @@ {
   "main": "backbone.KineticView.js",
-  "version": "0.5.1",
+  "version": "0.9.0",
   "license": "MIT",
@@ -24,0 +24,0 @@ "repository": {

README.md

@@ -13,2 +13,5 @@ backbone.kineticview
       // build Kineticjs object, then return it.
+      initialize : function(params) {
+        this.layer = params.layer;
+      },
       el : function(){
@@ -46,3 +49,3 @@ var rect = new Kinetic.Rect({
         // this.$el - cached kineticjs object.
-        this.options.layer.add(this.$el);
+        this.layer.add(this.el);
         layer.draw();
@@ -49,0 +52,0 @@ }

test/kineticView.js

@@ -0,1 +1,2 @@
+
 $(document).ready(function() {
@@ -10,8 +11,11 @@
     setup: function() {
-      group = new Kinetic.Group();
-      rect = new Kinetic.Rect({
-        id : "test"
+      // group = new Kinetic.Group();
+      // rect = new Kinetic.Rect({
+      //   id : "test"
+      // });
+      // group.add(rect);
+      view = new Backbone.KineticView({
+        id        : 'test-view',
+        other     : 'non-special-option'
       });
-      group.add(rect);
-      view = new Backbone.KineticView({el: group});
     }
@@ -21,6 +25,14 @@
 
-  test("constructor", function() {
-    equal(view.$el instanceof Kinetic.Group, true);
+  test("constructor", 2, function() {
+    equal(view.el.id(), 'test-view');
+    equal(view.el.other, void 0);
   });
 
+  test("el", 2, function() {
+    var view = new Backbone.KineticView();
+    strictEqual(view.el.nodeType, "Group");
+
+    ok(view.el instanceof Kinetic.Group);
+  });
+
   test("initialize", 1, function() {
@@ -37,19 +49,49 @@ var View = Backbone.KineticView.extend({
   test("delegateEvents", 3, function() {
+    var group = new Kinetic.Group();
+    var rect = new Kinetic.Rect({
+      id : "test"
+    });
+    group.add(rect);
+    var view = new Backbone.KineticView({
+      el : group
+    });
     var counter1 = 0;
-    view.increment = function(){ counter1++; };
 
-    var events = {'click #test': 'increment'};
+    view.increment = function() {
+        counter1++;
+    };
+    var events = {
+        'click #test': 'increment'
+    };
     view.delegateEvents(events);
-    rect.fire('click');
+
+    view.el.find('#test')[0].fire('click');
     equal(counter1, 1);
 
-    rect.fire('click');
+    view.el.find('#test')[0].fire('click');
     equal(counter1, 2);
 
     view.delegateEvents(events);
-    rect.fire('click');
+    view.el.find('#test')[0].fire('click');
     equal(counter1, 3);
   });
 
+  test("delegate", 2, function() {
+    var group = new Kinetic.Group();
+    var rect = new Kinetic.Rect();
+    group.add(rect);
+    var view = new Backbone.KineticView({
+      el : group
+    });
+    view.delegate('click', 'Rect', function() {
+      ok(true);
+    });
+    view.delegate('click', function() {
+      ok(true);
+    });
+    view.el.find('Rect')[0]._fireAndBubble('click', {});
+  });
+
   test("delegateEvents allows functions for callbacks", 3, function() {
+    var view = new Backbone.KineticView();
     view.counter = 0;
@@ -64,10 +106,10 @@
     view.delegateEvents(events);
-    view.$el.fire('click');
+    view.el.fire('click');
     equal(view.counter, 1);
 
-    view.$el.fire('click');
+    view.el.fire('click');
     equal(view.counter, 2);
 
     view.delegateEvents(events);
-    view.$el.fire('click');
+    view.el.fire('click');
     equal(view.counter, 3);
@@ -78,4 +120,5 @@ });
   test("delegateEvents ignore undefined methods", 0, function() {
+    var view = new Backbone.KineticView();
     view.delegateEvents({'click': 'undefinedMethod'});
-    view.$el.fire('click');
+    view.el.fire('click');
   });
@@ -93,3 +136,3 @@
     view.increment = function(){ counter1++; };
-    view.$el.on('click', function(){
+    view.el.on('click', function(){
       counter2++;
@@ -101,3 +144,3 @@ });
     view.delegateEvents(events);
-    rect.fire('click', null, true);
+    rect._fireAndBubble('click', {});
     equal(counter1, 1);
@@ -107,3 +150,3 @@ equal(counter2, 1);
     view.undelegateEvents();
-    rect.fire('click', null, true);
+    rect._fireAndBubble('click', {});
     equal(counter1, 1);
@@ -113,3 +156,3 @@ equal(counter2, 2);
     view.delegateEvents(events);
-    rect.fire('click', null, true);
+    rect._fireAndBubble('click', {});
     equal(counter1, 2);
@@ -119,2 +162,86 @@ equal(counter2, 3);
 
+  test("undelegate", 0, function() {
+    var group = new Kinetic.Group();
+    var rect = new Kinetic.Rect({
+      name : "test"
+    });
+    group.add(rect);
+    view = new Backbone.KineticView({el: group});
+    view.delegate('click', function() { ok(false); });
+
+    view.undelegate('click');
+
+    view.el._fireAndBubble('click', {});
+  });
+
+  test("undelegate with selector", 2, function() {
+    var group = new Kinetic.Group();
+    var rect = new Kinetic.Rect({
+      name : "test"
+    });
+    group.add(rect);
+    view = new Backbone.KineticView({el: group});
+
+    view.delegate('click', function() {
+      ok(true); });
+    view.delegate('click', 'Rect', function() {
+      ok(false);
+    });
+
+    view.undelegate('click', 'Rect');
+    view.el.find("Rect")[0]._fireAndBubble('click', {});
+    view.el._fireAndBubble('click', {});
+  });
+
+  test("undelegate with handler and selector", 2, function() {
+   var group = new Kinetic.Group();
+    var rect = new Kinetic.Rect({
+      name : "test"
+    });
+    group.add(rect);
+    view = new Backbone.KineticView({el: group});
+    view.delegate('click', function() {ok(true); });
+    var handler = function(){ ok(false); };
+    view.delegate('click', 'Rect', handler);
+    view.undelegate('click', 'Rect', handler);
+    view.el.find('Rect')[0]._fireAndBubble('click', {});
+    view.el._fireAndBubble('click', {});
+  });
+
+  test("with nodeType and id functions", 2, function() {
+    var View = Backbone.KineticView.extend({
+      nodeType: function() {
+        return 'Rect';
+      },
+      id: function() {
+        return 'id';
+      }
+    });
+    ok(new View().el instanceof Kinetic.Rect);
+
+    strictEqual(new View().el.id(), 'id');
+  });
+
+  test("with attributes", 2, function() {
+    var View = Backbone.KineticView.extend({
+      attributes: {
+        id: 'id',
+      },
+      nodeType : 'Circle'
+    });
+    ok(new View().el instanceof Kinetic.Circle);
+    strictEqual(new View().el.id(), 'id');
+  });
+
+  test("with attributes as a function", 1, function() {
+    var View = Backbone.KineticView.extend({
+      attributes: function() {
+        return {'id': 'id'};
+      }
+    });
+
+    strictEqual(new View().el.id(), 'id');
+  });
+
+
   test("multiple views per element", 3, function() {
@@ -146,11 +273,25 @@ var count = 0;
 
-  test("setElement uses provided object.", 3, function() {
+  test("custom events", 2, function() {
+    var View = Backbone.KineticView.extend({
+      events: {
+        "fake$event": function() { ok(true); }
+      }
+    });
+
+    var view = new View;
+    view.el.fire('fake$event');
+    view.el.fire('fake$event');
+
+    view.el.off('fake$event');
+    view.el.fire('fake$event');
+  });
+
+  test("setElement uses provided object.", 2, function() {
     var el = new Kinetic.Group();
 
     var view = new Backbone.KineticView();
-    ok(view.$el !== el);
+    ok(view.el !== el);
 
     view.setElement(el);
-    ok(view.$el === el);
-    ok(view.el !== el);
+    ok(view.el === el);
   });
@@ -165,3 +306,3 @@
         click: function(e) {
-          ok(view.$el === button2);
+          ok(view.el === button2);
         }
@@ -176,4 +317,70 @@ }
     button2.fire('click');
-  })
+  });
 
+  test("views stopListening", 0, function() {
+    var View = Backbone.KineticView.extend({
+      initialize: function() {
+        this.listenTo(this.model, 'all x', function(){ ok(false); });
+        this.listenTo(this.collection, 'all x', function(){ ok(false); });
+      }
+    });
+
+    var view = new View({
+      model: new Backbone.Model,
+      collection: new Backbone.Collection
+    });
+
+    view.stopListening();
+    view.model.trigger('x');
+    view.collection.trigger('x');
+  });
+
+  test("Provide function for el.", 1, function() {
+    var View = Backbone.KineticView.extend({
+      el: function() {
+        return new Kinetic.Circle();
+      }
+    });
+
+    var view = new View;
+    ok(view.el instanceof Kinetic.Circle);
+  });
+
+  test("events passed in options", 1, function() {
+    var counter = 0;
+
+    var View = Backbone.KineticView.extend({
+      el: new Kinetic.Group().add(new Kinetic.Rect),
+      increment: function() {
+        counter++;
+      }
+    });
+
+    var view = new View({
+      events: {
+        'click Rect': 'increment'
+      }
+    });
+
+    view.el.find('Rect').fire('click');
+    view.el.find('Rect').fire('click');
+    equal(counter, 2);
+  });
+
+  test("remove", 1, function() {
+    var parent = new Kinetic.Group();
+    var view = new Backbone.KineticView;
+    parent.add(view.el);
+
+    view.delegate('click', function() { ok(false); });
+    view.listenTo(view, 'all x', function() { ok(false); });
+
+    view.remove();
+    view.el.fire('click');
+    view.trigger('x');
+
+    // In IE8 and below, parentNode still exists but is not document.body.
+    notEqual(view.el.parent, parent);
+  });
+
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

977342

increased by4.89%

Lines of code

26795

increased by4.5%

Number of lines in readme file

64

increased by4.92%

No dependency changes