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

Moved class methods in to separate module and added docs for them

master
Dmitry Baranovskiy 2014-06-13 13:48:24 +10:00
parent e2a8156f34
commit dae5337e7f
7 changed files with 607 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -33,6 +33,7 @@ module.exports = function(grunt) {
"./src/svg.js", "./src/svg.js",
"./src/matrix.js", "./src/matrix.js",
"./src/attr.js", "./src/attr.js",
"./src/class.js",
"./src/attradd.js", "./src/attradd.js",
"./src/paper.js", "./src/paper.js",
"./src/path.js", "./src/path.js",

8
dist/snap.svg-min.js vendored
View File

File diff suppressed because one or more lines are too long

261
dist/snap.svg.js vendored
View File

@ -14,7 +14,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
// //
// build: 2014-06-03 // build: 2014-06-13
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved. // Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
// //
// Licensed under the Apache License, Version 2.0 (the "License"); // Licensed under the Apache License, Version 2.0 (the "License");
@ -2468,14 +2468,6 @@ function Element(el) {
use.original = this; use.original = this;
return use; return use;
}; };
/*\
* Element.clone
[ method ]
**
* Creates a clone of the element and inserts it after the element
**
= (Element) the clone
\*/
function fixids(el) { function fixids(el) {
var els = el.selectAll("*"), var els = el.selectAll("*"),
it, it,
@ -2538,98 +2530,14 @@ function Element(el) {
} }
} }
} }
var rgNotSpace = /\S+/g, /*\
rgBadSpace = /[\t\r\n\f]/g, * Element.clone
rgTrim = /(^\s+|\s+$)/g; [ method ]
elproto.addClass = function (value) { **
var classes = (value || "").match(rgNotSpace) || [], * Creates a clone of the element and inserts it after the element
elem = this.node, **
className = elem.className.baseVal, = (Element) the clone
curClasses = className.match(rgNotSpace) || [], \*/
j,
pos,
clazz,
finalValue;
if (classes.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (!~pos) {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
elproto.removeClass = function (value) {
var classes = (value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
if (curClasses.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
elproto.hasClass = function (value) {
var elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [];
return !!~curClasses.indexOf(value);
};
elproto.toggleClass = function (value, flag) {
if (flag != null) {
if (flag) {
return this.addClass(value);
} else {
return this.removeClass(value);
}
}
var classes = (value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
} else {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
return this;
};
elproto.clone = function () { elproto.clone = function () {
var clone = wrap(this.node.cloneNode(true)); var clone = wrap(this.node.cloneNode(true));
if ($(clone.node, "id")) { if ($(clone.node, "id")) {
@ -4167,6 +4075,153 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
eve.on("snap.util.getattr.fontSize", getFontSize)(-1); eve.on("snap.util.getattr.fontSize", getFontSize)(-1);
eve.on("snap.util.getattr.font-size", getFontSize)(-1); eve.on("snap.util.getattr.font-size", getFontSize)(-1);
}); });
// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
var rgNotSpace = /\S+/g,
rgBadSpace = /[\t\r\n\f]/g,
rgTrim = /(^\s+|\s+$)/g,
Str = String,
elproto = Element.prototype;
/*\
* Element.addClass
[ method ]
**
* Adds given class name or list of class names to the element.
- value (string) class name or space separated list of class names
**
= (Element) original element.
\*/
elproto.addClass = function (value) {
var classes = Str(value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
if (classes.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (!~pos) {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
/*\
* Element.removeClass
[ method ]
**
* Removes given class name or list of class names from the element.
- value (string) class name or space separated list of class names
**
= (Element) original element.
\*/
elproto.removeClass = function (value) {
var classes = Str(value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
if (curClasses.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
/*\
* Element.hasClass
[ method ]
**
* Checks if the element has a given class name in the list of class names applied to it.
- value (string) class name
**
= (boolean) `true` if the element has given class
\*/
elproto.hasClass = function (value) {
var elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [];
return !!~curClasses.indexOf(value);
};
/*\
* Element.toggleClass
[ method ]
**
* Add or remove one or more classes from the element, depending on either
* the class’s presence or the value of the `flag` argument.
- value (string) class name or space separated list of class names
- flag (boolean) value to determine whether the class should be added or removed
**
= (Element) original element.
\*/
elproto.toggleClass = function (value, flag) {
if (flag != null) {
if (flag) {
return this.addClass(value);
} else {
return this.removeClass(value);
}
}
var classes = (value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
} else {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
return this;
};
});
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved. // Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
// //
// Licensed under the Apache License, Version 2.0 (the "License"); // Licensed under the Apache License, Version 2.0 (the "License");
@ -4573,7 +4628,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
* Paper.ptrn * Paper.ptrn
[ method ] [ method ]
** **
* Equivalent in behaviour to @Paper.g, except it’s a mask. * Equivalent in behaviour to @Paper.g, except it’s a pattern.
- x (number) @optional X of the element - x (number) @optional X of the element
- y (number) @optional Y of the element - y (number) @optional Y of the element
- width (number) @optional width of the element - width (number) @optional width of the element
@ -4583,7 +4638,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- vbw (number) @optional viewbox width - vbw (number) @optional viewbox width
- vbh (number) @optional viewbox height - vbh (number) @optional viewbox height
** **
= (object) the `mask` element = (object) the `pattern` element
** **
\*/ \*/
proto.ptrn = function (x, y, width, height, vx, vy, vw, vh) { proto.ptrn = function (x, y, width, height, vx, vy, vw, vh) {

312
doc/reference.html
View File

@ -75,6 +75,10 @@
<a href="#Element.add" class="dr-method"><span>Element.add()</span></a> <a href="#Element.add" class="dr-method"><span>Element.add()</span></a>
</li> </li>
<li class="dr-lvl1">
<a href="#Element.addClass" class="dr-method"><span>Element.addClass()</span></a>
</li>
<li class="dr-lvl1"> <li class="dr-lvl1">
<a href="#Element.after" class="dr-method"><span>Element.after()</span></a> <a href="#Element.after" class="dr-method"><span>Element.after()</span></a>
</li> </li>
@ -139,6 +143,10 @@
<a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a> <a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a>
</li> </li>
<li class="dr-lvl1">
<a href="#Element.hasClass" class="dr-method"><span>Element.hasClass()</span></a>
</li>
<li class="dr-lvl1"> <li class="dr-lvl1">
<a href="#Element.hover" class="dr-method"><span>Element.hover()</span></a> <a href="#Element.hover" class="dr-method"><span>Element.hover()</span></a>
</li> </li>
@ -211,6 +219,10 @@
<a href="#Element.remove" class="dr-method"><span>Element.remove()</span></a> <a href="#Element.remove" class="dr-method"><span>Element.remove()</span></a>
</li> </li>
<li class="dr-lvl1">
<a href="#Element.removeClass" class="dr-method"><span>Element.removeClass()</span></a>
</li>
<li class="dr-lvl1"> <li class="dr-lvl1">
<a href="#Element.removeData" class="dr-method"><span>Element.removeData()</span></a> <a href="#Element.removeData" class="dr-method"><span>Element.removeData()</span></a>
</li> </li>
@ -239,6 +251,10 @@
<a href="#Element.toString" class="dr-method"><span>Element.toString()</span></a> <a href="#Element.toString" class="dr-method"><span>Element.toString()</span></a>
</li> </li>
<li class="dr-lvl1">
<a href="#Element.toggleClass" class="dr-method"><span>Element.toggleClass()</span></a>
</li>
<li class="dr-lvl1"> <li class="dr-lvl1">
<a href="#Element.touchcancel" class="dr-method"><span>Element.touchcancel()</span></a> <a href="#Element.touchcancel" class="dr-method"><span>Element.touchcancel()</span></a>
</li> </li>
@ -4131,7 +4147,7 @@ and <code>-</code>: <code>&quot;+=2em&quot;</code>.
<article id="Element.clone"> <article id="Element.clone">
<header> <header>
<h3 class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1689 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1689">&#x27ad;</a></h3> <h3 class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1751 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1751">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.clone-extra"></div> <div class="extra" id="Element.clone-extra"></div>
@ -4173,7 +4189,7 @@ and <code>-</code>: <code>&quot;+=2em&quot;</code>.
<article id="Element.toDefs"> <article id="Element.toDefs">
<header> <header>
<h3 class="dr-method">Element.toDefs()<a href="#Element.toDefs" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1860 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1860">&#x27ad;</a></h3> <h3 class="dr-method">Element.toDefs()<a href="#Element.toDefs" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1768 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1768">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.toDefs-extra"></div> <div class="extra" id="Element.toDefs-extra"></div>
@ -4215,7 +4231,7 @@ and <code>-</code>: <code>&quot;+=2em&quot;</code>.
<article id="Element.pattern"> <article id="Element.pattern">
<header> <header>
<h3 class="dr-method">Element.pattern()<a href="#Element.pattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1871 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1871">&#x27ad;</a></h3> <h3 class="dr-method">Element.pattern()<a href="#Element.pattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1779 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1779">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.pattern-extra"></div> <div class="extra" id="Element.pattern-extra"></div>
@ -4240,7 +4256,7 @@ and <code>-</code>: <code>&quot;+=2em&quot;</code>.
<article id="Element.toPattern"> <article id="Element.toPattern">
<header> <header>
<h3 class="dr-method">Element.toPattern(x, y, width, height)<a href="#Element.toPattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1894 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1894">&#x27ad;</a></h3> <h3 class="dr-method">Element.toPattern(x, y, width, height)<a href="#Element.toPattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1802 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1802">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.toPattern-extra"></div> <div class="extra" id="Element.toPattern-extra"></div>
@ -4340,7 +4356,7 @@ c.attr({
<article id="Element.marker"> <article id="Element.marker">
<header> <header>
<h3 class="dr-method">Element.marker(x, y, width, height, refX, refY)<a href="#Element.marker" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1935 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1935">&#x27ad;</a></h3> <h3 class="dr-method">Element.marker(x, y, width, height, refX, refY)<a href="#Element.marker" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1843 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1843">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.marker-extra"></div> <div class="extra" id="Element.marker-extra"></div>
@ -4427,7 +4443,7 @@ To create a marker you have to specify the bounding rect and reference point:
<article id="Snap.animation"> <article id="Snap.animation">
<header> <header>
<h3 class="dr-method">Snap.animation(attr, duration, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1994 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1994">&#x27ad;</a></h3> <h3 class="dr-method">Snap.animation(attr, duration, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1902 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1902">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.animation-extra"></div> <div class="extra" id="Snap.animation-extra"></div>
@ -4496,7 +4512,7 @@ To create a marker you have to specify the bounding rect and reference point:
<article id="Element.inAnim"> <article id="Element.inAnim">
<header> <header>
<h3 class="dr-method">Element.inAnim()<a href="#Element.inAnim" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2012 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2012">&#x27ad;</a></h3> <h3 class="dr-method">Element.inAnim()<a href="#Element.inAnim" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1920 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1920">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.inAnim-extra"></div> <div class="extra" id="Element.inAnim-extra"></div>
@ -4598,7 +4614,7 @@ To create a marker you have to specify the bounding rect and reference point:
<article id="Snap.animate"> <article id="Snap.animate">
<header> <header>
<h3 class="dr-method">Snap.animate(from, to, setter, duration, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2062 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2062">&#x27ad;</a></h3> <h3 class="dr-method">Snap.animate(from, to, setter, duration, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1970 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1970">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.animate-extra"></div> <div class="extra" id="Snap.animate-extra"></div>
@ -4759,7 +4775,7 @@ rect.animate({x: 10}, 1000);</code></pre></section>
<article id="Element.stop"> <article id="Element.stop">
<header> <header>
<h3 class="dr-method">Element.stop()<a href="#Element.stop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2080 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2080">&#x27ad;</a></h3> <h3 class="dr-method">Element.stop()<a href="#Element.stop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1988 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1988">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.stop-extra"></div> <div class="extra" id="Element.stop-extra"></div>
@ -4801,7 +4817,7 @@ rect.animate({x: 10}, 1000);</code></pre></section>
<article id="Element.animate"> <article id="Element.animate">
<header> <header>
<h3 class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2099 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2099">&#x27ad;</a></h3> <h3 class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2007 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2007">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.animate-extra"></div> <div class="extra" id="Element.animate-extra"></div>
@ -4870,7 +4886,7 @@ rect.animate({x: 10}, 1000);</code></pre></section>
<article id="Element.data"> <article id="Element.data">
<header> <header>
<h3 class="dr-method">Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2172 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2172">&#x27ad;</a></h3> <h3 class="dr-method">Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2080 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2080">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.data-extra"></div> <div class="extra" id="Element.data-extra"></div>
@ -4992,7 +5008,7 @@ with <code>data-</code> attributes)
<article id="Element.removeData"> <article id="Element.removeData">
<header> <header>
<h3 class="dr-method">Element.removeData([key])<a href="#Element.removeData" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2201 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2201">&#x27ad;</a></h3> <h3 class="dr-method">Element.removeData([key])<a href="#Element.removeData" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2109 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2109">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.removeData-extra"></div> <div class="extra" id="Element.removeData-extra"></div>
@ -5053,7 +5069,7 @@ If key is not provided, removes all the data of the element.
<article id="Element.outerSVG"> <article id="Element.outerSVG">
<header> <header>
<h3 class="dr-method">Element.outerSVG()<a href="#Element.outerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2218 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2218">&#x27ad;</a></h3> <h3 class="dr-method">Element.outerSVG()<a href="#Element.outerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2126 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2126">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.outerSVG-extra"></div> <div class="extra" id="Element.outerSVG-extra"></div>
@ -5096,7 +5112,7 @@ If key is not provided, removes all the data of the element.
<article id="Element.toString"> <article id="Element.toString">
<header> <header>
<h3 class="dr-method">Element.toString()<a href="#Element.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2224 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2224">&#x27ad;</a></h3> <h3 class="dr-method">Element.toString()<a href="#Element.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2132 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2132">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.toString-extra"></div> <div class="extra" id="Element.toString-extra"></div>
@ -5121,7 +5137,7 @@ If key is not provided, removes all the data of the element.
<article id="Element.innerSVG"> <article id="Element.innerSVG">
<header> <header>
<h3 class="dr-method">Element.innerSVG()<a href="#Element.innerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2232 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2232">&#x27ad;</a></h3> <h3 class="dr-method">Element.innerSVG()<a href="#Element.innerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2140 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2140">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Element.innerSVG-extra"></div> <div class="extra" id="Element.innerSVG-extra"></div>
@ -5163,7 +5179,7 @@ If key is not provided, removes all the data of the element.
<article id="Snap.parse"> <article id="Snap.parse">
<header> <header>
<h3 class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2270 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2270">&#x27ad;</a></h3> <h3 class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2178 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2178">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.parse-extra"></div> <div class="extra" id="Snap.parse-extra"></div>
@ -5223,7 +5239,7 @@ If key is not provided, removes all the data of the element.
<article id="Fragment.select"> <article id="Fragment.select">
<header> <header>
<h3 class="dr-method">Fragment.select()<a href="#Fragment.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2302 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2302">&#x27ad;</a></h3> <h3 class="dr-method">Fragment.select()<a href="#Fragment.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2210 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2210">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Fragment.select-extra"></div> <div class="extra" id="Fragment.select-extra"></div>
@ -5248,7 +5264,7 @@ If key is not provided, removes all the data of the element.
<article id="Fragment.selectAll"> <article id="Fragment.selectAll">
<header> <header>
<h3 class="dr-method">Fragment.selectAll()<a href="#Fragment.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2309 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2309">&#x27ad;</a></h3> <h3 class="dr-method">Fragment.selectAll()<a href="#Fragment.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2217 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2217">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Fragment.selectAll-extra"></div> <div class="extra" id="Fragment.selectAll-extra"></div>
@ -5273,7 +5289,7 @@ If key is not provided, removes all the data of the element.
<article id="Snap.fragment"> <article id="Snap.fragment">
<header> <header>
<h3 class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2320 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2320">&#x27ad;</a></h3> <h3 class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2228 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2228">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.fragment-extra"></div> <div class="extra" id="Snap.fragment-extra"></div>
@ -5333,7 +5349,7 @@ If key is not provided, removes all the data of the element.
<article id="Paper.el"> <article id="Paper.el">
<header> <header>
<h3 class="dr-method">Paper.el(name, attr)<a href="#Paper.el" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2423 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2423">&#x27ad;</a></h3> <h3 class="dr-method">Paper.el(name, attr)<a href="#Paper.el" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2331 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2331">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.el-extra"></div> <div class="extra" id="Paper.el-extra"></div>
@ -5429,7 +5445,7 @@ var c = paper.el("circle", {
<article id="Snap.ajax"> <article id="Snap.ajax">
<header> <header>
<h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2541 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2541">&#x27ad;</a></h3> <h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2449 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2449">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.ajax-extra"></div> <div class="extra" id="Snap.ajax-extra"></div>
@ -5533,7 +5549,7 @@ var c = paper.el("circle", {
<article id="Snap.load"> <article id="Snap.load">
<header> <header>
<h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2587 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2587">&#x27ad;</a></h3> <h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2495 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2495">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.load-extra"></div> <div class="extra" id="Snap.load-extra"></div>
@ -5582,7 +5598,7 @@ var c = paper.el("circle", {
<article id="Snap.getElementByPoint"> <article id="Snap.getElementByPoint">
<header> <header>
<h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2618 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2618">&#x27ad;</a></h3> <h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2526 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2526">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.getElementByPoint-extra"></div> <div class="extra" id="Snap.getElementByPoint-extra"></div>
@ -5667,7 +5683,7 @@ var c = paper.el("circle", {
<article id="Snap.plugin"> <article id="Snap.plugin">
<header> <header>
<h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2653 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2653">&#x27ad;</a></h3> <h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2561 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2561">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.plugin-extra"></div> <div class="extra" id="Snap.plugin-extra"></div>
@ -7452,7 +7468,7 @@ g.add(c2, c1);</code></pre></section>
<p>Equivalent in behaviour to <a href="#Paper.g" class="dr-link">Paper.g</a>, except it’s a mask. <p>Equivalent in behaviour to <a href="#Paper.g" class="dr-link">Paper.g</a>, except it’s a pattern.
</p> </p>
@ -7512,7 +7528,7 @@ g.add(c2, c1);</code></pre></section>
<em class="dr-type-object">object</em> <em class="dr-type-object">object</em>
<span class="dr-description">the <code>mask</code> element</span> <span class="dr-description">the <code>pattern</code> element</span>
</p> </p>
@ -8194,6 +8210,250 @@ half the width, from black to white:
</div>
</section>
</article>
<article id="Element.addClass">
<header>
<h3 class="dr-method">Element.addClass(value)<a href="#Element.addClass" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 29 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L29">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.addClass-extra"></div>
<div class="dr-method">
<p>Adds given class name or list of class names to the element.
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">value</span>
<span class="dr-type"><em class="dr-type-string">string</em> </span>
<span class="dr-description">class name or space separated list of class names</span></li>
</ol>
</div>
<p class="dr-returns">
<strong class="dr-title">Returns:</strong>
<em class="dr-type-Element">Element</em>
<span class="dr-description">original element.</span>
</p>
</div>
</section>
</article>
<article id="Element.removeClass">
<header>
<h3 class="dr-method">Element.removeClass(value)<a href="#Element.removeClass" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 64 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L64">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.removeClass-extra"></div>
<div class="dr-method">
<p>Removes given class name or list of class names from the element.
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">value</span>
<span class="dr-type"><em class="dr-type-string">string</em> </span>
<span class="dr-description">class name or space separated list of class names</span></li>
</ol>
</div>
<p class="dr-returns">
<strong class="dr-title">Returns:</strong>
<em class="dr-type-Element">Element</em>
<span class="dr-description">original element.</span>
</p>
</div>
</section>
</article>
<article id="Element.hasClass">
<header>
<h3 class="dr-method">Element.hasClass(value)<a href="#Element.hasClass" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 98 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L98">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.hasClass-extra"></div>
<div class="dr-method">
<p>Checks if the element has a given class name in the list of class names applied to it.
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">value</span>
<span class="dr-type"><em class="dr-type-string">string</em> </span>
<span class="dr-description">class name</span></li>
</ol>
</div>
<p class="dr-returns">
<strong class="dr-title">Returns:</strong>
<em class="dr-type-boolean">boolean</em>
<span class="dr-description"><code>true</code> if the element has given class</span>
</p>
</div>
</section>
</article>
<article id="Element.toggleClass">
<header>
<h3 class="dr-method">Element.toggleClass(value, flag)<a href="#Element.toggleClass" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 115 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L115">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.toggleClass-extra"></div>
<div class="dr-method">
<p>Add or remove one or more classes from the element, depending on either
the class’s presence or the value of the <code>flag</code> argument.
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">value</span>
<span class="dr-type"><em class="dr-type-string">string</em> </span>
<span class="dr-description">class name or space separated list of class names</span></li>
<li class="topcoat-list__item"><span class="dr-param">flag</span>
<span class="dr-type"><em class="dr-type-boolean">boolean</em> </span>
<span class="dr-description">value to determine whether the class should be added or removed</span></li>
</ol>
</div>
<p class="dr-returns">
<strong class="dr-title">Returns:</strong>
<em class="dr-type-Element">Element</em>
<span class="dr-description">original element.</span>
</p>
</div> </div>
</section> </section>
</article> </article>

3
dr.json
View File

@ -11,6 +11,9 @@
}, { }, {
"url": "src/paper.js", "url": "src/paper.js",
"link": "https://github.com/adobe-webplatform/Snap.svg/blob/master/src/paper.js" "link": "https://github.com/adobe-webplatform/Snap.svg/blob/master/src/paper.js"
}, {
"url": "src/class.js",
"link": "https://github.com/adobe-webplatform/Snap.svg/blob/master/src/class.js"
}, { }, {
"url": "src/equal.js", "url": "src/equal.js",
"link": "https://github.com/adobe-webplatform/Snap.svg/blob/master/src/equal.js" "link": "https://github.com/adobe-webplatform/Snap.svg/blob/master/src/equal.js"

147
src/class.js Normal file
View File

@ -0,0 +1,147 @@
// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
var rgNotSpace = /\S+/g,
rgBadSpace = /[\t\r\n\f]/g,
rgTrim = /(^\s+|\s+$)/g,
Str = String,
elproto = Element.prototype;
/*\
* Element.addClass
[ method ]
**
* Adds given class name or list of class names to the element.
- value (string) class name or space separated list of class names
**
= (Element) original element.
\*/
elproto.addClass = function (value) {
var classes = Str(value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
if (classes.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (!~pos) {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
/*\
* Element.removeClass
[ method ]
**
* Removes given class name or list of class names from the element.
- value (string) class name or space separated list of class names
**
= (Element) original element.
\*/
elproto.removeClass = function (value) {
var classes = Str(value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
if (curClasses.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
/*\
* Element.hasClass
[ method ]
**
* Checks if the element has a given class name in the list of class names applied to it.
- value (string) class name
**
= (boolean) `true` if the element has given class
\*/
elproto.hasClass = function (value) {
var elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [];
return !!~curClasses.indexOf(value);
};
/*\
* Element.toggleClass
[ method ]
**
* Add or remove one or more classes from the element, depending on either
* the class’s presence or the value of the `flag` argument.
- value (string) class name or space separated list of class names
- flag (boolean) value to determine whether the class should be added or removed
**
= (Element) original element.
\*/
elproto.toggleClass = function (value, flag) {
if (flag != null) {
if (flag) {
return this.addClass(value);
} else {
return this.removeClass(value);
}
}
var classes = (value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
} else {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
return this;
};
});

108
src/svg.js
View File

@ -1678,14 +1678,6 @@ function Element(el) {
use.original = this; use.original = this;
return use; return use;
}; };
/*\
* Element.clone
[ method ]
**
* Creates a clone of the element and inserts it after the element
**
= (Element) the clone
\*/
function fixids(el) { function fixids(el) {
var els = el.selectAll("*"), var els = el.selectAll("*"),
it, it,
@ -1748,98 +1740,14 @@ function Element(el) {
} }
} }
} }
var rgNotSpace = /\S+/g, /*\
rgBadSpace = /[\t\r\n\f]/g, * Element.clone
rgTrim = /(^\s+|\s+$)/g; [ method ]
elproto.addClass = function (value) { **
var classes = (value || "").match(rgNotSpace) || [], * Creates a clone of the element and inserts it after the element
elem = this.node, **
className = elem.className.baseVal, = (Element) the clone
curClasses = className.match(rgNotSpace) || [], \*/
j,
pos,
clazz,
finalValue;
if (classes.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (!~pos) {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
elproto.removeClass = function (value) {
var classes = (value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
if (curClasses.length) {
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
}
return this;
};
elproto.hasClass = function (value) {
var elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [];
return !!~curClasses.indexOf(value);
};
elproto.toggleClass = function (value, flag) {
if (flag != null) {
if (flag) {
return this.addClass(value);
} else {
return this.removeClass(value);
}
}
var classes = (value || "").match(rgNotSpace) || [],
elem = this.node,
className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [],
j,
pos,
clazz,
finalValue;
j = 0;
while ((clazz = classes[j++])) {
pos = curClasses.indexOf(clazz);
if (~pos) {
curClasses.splice(pos, 1);
} else {
curClasses.push(clazz);
}
}
finalValue = curClasses.join(" ");
if (className != finalValue) {
elem.className.baseVal = finalValue;
}
return this;
};
elproto.clone = function () { elproto.clone = function () {
var clone = wrap(this.node.cloneNode(true)); var clone = wrap(this.node.cloneNode(true));
if ($(clone.node, "id")) { if ($(clone.node, "id")) {