zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #217 from xogeny/master 

Adding a way to specify how attributes are bound on Set objects
master
Dmitry Baranovskiy 2014-05-06 10:30:46 +10:00
parent f94872941f b54624a11b
commit 59f85849e5
2 changed files with 86 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/set.js
View File

@ -18,6 +18,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
// Set
var Set = function (items) {
this.items = [];
this.bindings = {};
this.length = 0;
this.type = "set";
if (items) {
@ -87,9 +88,46 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
}
return this;
};
/*\
* Set.bind
[ method ]
**
* Specifies how to handle a specific attribute when applied
* to a set.
*
**
- attr (string) attribute name
- callback (function) function to run
* or
- attr (string) attribute name
- element (Element) specific element in the set to apply the attribute to
* or
- attr (string) attribute name
- element (Element) specific element in the set to apply the attribute to
- eattr (string) attribute on the element to bind the attribute to
= (object) Set object
\*/
setproto.bind = function(attr, a, b) {
var data = {};
if (typeof(a)=="function") {
this.bindings[attr] = a;
} else {
var aname = b || attr;
this.bindings[attr] = function(v) {
data[aname] = v;
a.attr(data);
}
}
return this;
}
setproto.attr = function (value) {
var unbound = {};
for (var k in value) {
if (this.bindings[k]) this.bindings[k](value[k]);
else unbound[k] = value[k];
}
for (var i = 0, ii = this.items.length; i < ii; i++) {
this.items[i].attr(value);
this.items[i].attr(unbound);
}
return this;
};

45
test/set.js
View File

@ -82,6 +82,51 @@ describe("Set methods", function () {
expect(set[1]).to.be(rect2);
expect(set[2]).to.be(rect3);
});
it("Set.attr", function() {
var rect1 = s.rect(10, 20, 30, 40);
var rect2 = s.rect(10, 20, 30, 40);
var set = Snap.set(rect1, rect2);
set.attr({"fill": "#ff0000"});
expect(rect1.node.getAttribute("fill")).to.be("#ff0000");
expect(rect2.node.getAttribute("fill")).to.be("#ff0000");
set.attr({"stroke": "#0000ff"});
expect(rect1.node.getAttribute("stroke")).to.be("#0000ff");
expect(rect2.node.getAttribute("stroke")).to.be("#0000ff");
});
it("Set.bind", function() {
var rect1 = s.rect(10, 20, 30, 40);
var rect2 = s.rect(10, 20, 30, 40);
var set = Snap.set(rect1, rect2);
// Setting "stroke" on set only applies it to rect1
set.bind("stroke", rect1);
// Setting "fill1" on set maps to fill attribute on rect1
set.bind("fill1", rect1, "fill");
// Setting "fill2" on set maps to fill attribute on rect2
set.bind("fill2", function(v) { rect2.attr({"fill": v}); });
// Set everything to black
rect1.attr({"fill": "#000000", "stroke": "#000000"})
rect2.attr({"fill": "#000000", "stroke": "#000000"})
set.attr({"fill1": "#00ff00"});
expect(rect1.node.getAttribute("fill")).to.be("#00ff00");
expect(rect2.node.getAttribute("fill")).to.be("#000000");
// Will trigger the fallback implementation of attr which is
// to set that attribute on all elements in the set.
set.attr({"fill": "#ff0000"});
expect(rect1.node.getAttribute("fill")).to.be("#ff0000");
expect(rect2.node.getAttribute("fill")).to.be("#ff0000");
set.attr({"fill2": "#00ff00"});
expect(rect1.node.getAttribute("fill")).to.be("#ff0000");
expect(rect2.node.getAttribute("fill")).to.be("#00ff00");
set.attr({"stroke": "#0000ff"});
expect(rect1.node.getAttribute("stroke")).to.be("#0000ff");
expect(rect2.node.getAttribute("stroke")).to.be("#000000");
});
it("Set.splice - remove only", function() {
var rect1 = s.rect(10, 20, 30, 40);
var rect2 = s.rect(10, 20, 30, 40);