In the process of adding useful animation methods + docs

master
Dmitry Baranovskiy 2013-08-20 19:42:07 +10:00
parent 8eacc3ab1a
commit 34c814c1df
4 changed files with 882 additions and 552 deletions

39
mina.js
View File

@ -11,8 +11,8 @@
// 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.
window.mina = (function () {
var animations = [],
window.mina = (function (eve) {
var animations = {},
requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
@ -71,15 +71,23 @@ window.mina = (function () {
a.s = a.s * val / a.dur;
a.dur = val;
},
stopit = function () {
var a = this;
delete animations[a.id];
eve("mina.stop." + a.id, a);
},
frame = function () {
for (var i = 0, ii = animations.length; i < ii; i++) {
var len = 0;
for (var i in animations) if (animations.hasOwnProperty(i)) {
var a = animations[i],
b = a.get(),
res;
len++;
a.s = (b - a.b) / (a.dur / a.spd);
if (a.s >= 1) {
animations.splice(i, 1);
delete animations[i];
a.s = 1;
len--;
}
if (isArray(a.start)) {
res = [];
@ -91,11 +99,11 @@ window.mina = (function () {
res = a.start + (a.end - a.start) * a.easing(a.s);
}
a.set(res);
if (a.s == 1 && typeof eve != "undefined") {
if (a.s == 1) {
eve("mina.finish." + a.id, a);
}
}
animations.length && requestAnimFrame(frame);
len && requestAnimFrame(frame);
},
mina = function (a, A, b, B, get, set, easing) {
var anim = {
@ -111,13 +119,24 @@ window.mina = (function () {
easing: easing || mina.linear,
status: sta,
speed: speed,
duration: duration
duration: duration,
stop: stopit
};
animations.push(anim);
animations.length == 1 && requestAnimFrame(frame);
animations[anim.id] = anim;
var len = 0, i;
for (i in animations) if (animations.hasOwnProperty(i)) {
len++;
if (len == 2) {
break;
}
}
len == 1 && requestAnimFrame(frame);
return anim;
};
mina.time = timer;
mina.getById = function (id) {
return animations[anim.id] || null;
};
mina.linear = function (n) {
return n;
@ -178,4 +197,4 @@ window.mina = (function () {
};
return mina;
})();
})(typeof eve == "undefined" ? function () {} : eve);

6
savage-min.js vendored

File diff suppressed because one or more lines are too long

778
savage.js
View File

@ -28,7 +28,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
//
// build: 2013-08-16
// build: 2013-08-20
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
@ -42,380 +42,8 @@
// 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.
// ┌────────────────────────────────────────────────────────────┐ \\
// │ Eve 0.4.2 - JavaScript Events Library │ \\
// ├────────────────────────────────────────────────────────────┤ \\
// │ Author Dmitry Baranovskiy (http://dmitry.baranovskiy.com/) │ \\
// └────────────────────────────────────────────────────────────┘ \\
(function (glob) {
var version = "0.4.2",
has = "hasOwnProperty",
separator = /[\.\/]/,
wildcard = "*",
fun = function () {},
numsort = function (a, b) {
return a - b;
},
current_event,
stop,
events = {n: {}},
/*\
* eve
[ method ]
* Fires event with given `name`, given scope and other parameters.
> Arguments
- name (string) name of the *event*, dot (`.`) or slash (`/`) separated
- scope (object) context for the event handlers
- varargs (...) the rest of arguments will be sent to event handlers
= (object) array of returned values from the listeners
\*/
eve = function (name, scope) {
name = String(name);
var e = events,
oldstop = stop,
args = Array.prototype.slice.call(arguments, 2),
listeners = eve.listeners(name),
z = 0,
f = false,
l,
indexed = [],
queue = {},
out = [],
ce = current_event,
errors = [];
current_event = name;
stop = 0;
for (var i = 0, ii = listeners.length; i < ii; i++) if ("zIndex" in listeners[i]) {
indexed.push(listeners[i].zIndex);
if (listeners[i].zIndex < 0) {
queue[listeners[i].zIndex] = listeners[i];
}
}
indexed.sort(numsort);
while (indexed[z] < 0) {
l = queue[indexed[z++]];
out.push(l.apply(scope, args));
if (stop) {
stop = oldstop;
return out;
}
}
for (i = 0; i < ii; i++) {
l = listeners[i];
if ("zIndex" in l) {
if (l.zIndex == indexed[z]) {
out.push(l.apply(scope, args));
if (stop) {
break;
}
do {
z++;
l = queue[indexed[z]];
l && out.push(l.apply(scope, args));
if (stop) {
break;
}
} while (l)
} else {
queue[l.zIndex] = l;
}
} else {
out.push(l.apply(scope, args));
if (stop) {
break;
}
}
}
stop = oldstop;
current_event = ce;
return out.length ? out : null;
};
// Undocumented. Debug only.
eve._events = events;
/*\
* eve.listeners
[ method ]
* Internal method which gives you array of all event handlers that will be triggered by the given `name`.
> Arguments
- name (string) name of the event, dot (`.`) or slash (`/`) separated
= (array) array of event handlers
\*/
eve.listeners = function (name) {
var names = name.split(separator),
e = events,
item,
items,
k,
i,
ii,
j,
jj,
nes,
es = [e],
out = [];
for (i = 0, ii = names.length; i < ii; i++) {
nes = [];
for (j = 0, jj = es.length; j < jj; j++) {
e = es[j].n;
items = [e[names[i]], e[wildcard]];
k = 2;
while (k--) {
item = items[k];
if (item) {
nes.push(item);
out = out.concat(item.f || []);
}
}
}
es = nes;
}
return out;
};
/*\
* eve.on
[ method ]
**
* Binds given event handler with a given name. You can use wildcards `*` for the names:
| eve.on("*.under.*", f);
| eve("mouse.under.floor"); // triggers f
* Use @eve to trigger the listener.
**
> Arguments
**
- name (string) name of the event, dot (`.`) or slash (`/`) separated, with optional wildcards
- f (function) event handler function
**
= (function) returned function accepts a single numeric parameter that represents z-index of the handler. It is an optional feature and only used when you need to ensure that some subset of handlers will be invoked in a given order, despite of the order of assignment.
> Example:
| eve.on("mouse", eatIt)(2);
| eve.on("mouse", scream);
| eve.on("mouse", catchIt)(1);
* This will ensure that `catchIt()` function will be called before `eatIt()`.
*
* If you want to put your handler before non-indexed handlers, specify a negative value.
* Note: I assume most of the time you dont need to worry about z-index, but its nice to have this feature just in case.
\*/
eve.on = function (name, f) {
name = String(name);
if (typeof f != "function") {
return function () {};
}
var names = name.split(separator),
e = events;
for (var i = 0, ii = names.length; i < ii; i++) {
e = e.n;
e = e.hasOwnProperty(names[i]) && e[names[i]] || (e[names[i]] = {n: {}});
}
e.f = e.f || [];
for (i = 0, ii = e.f.length; i < ii; i++) if (e.f[i] == f) {
return fun;
}
e.f.push(f);
return function (zIndex) {
if (+zIndex == +zIndex) {
f.zIndex = +zIndex;
}
};
};
/*\
* eve.f
[ method ]
**
* Returns function that will fire given event with optional arguments.
* Arguments that will be passed to the result function will be also
* concated to the list of final arguments.
| el.onclick = eve.f("click", 1, 2);
| eve.on("click", function (a, b, c) {
| console.log(a, b, c); // 1, 2, [event object]
| });
> Arguments
- event (string) event name
- varargs () and any other arguments
= (function) possible event handler function
\*/
eve.f = function (event) {
var attrs = [].slice.call(arguments, 1);
return function () {
eve.apply(null, [event, null].concat(attrs).concat([].slice.call(arguments, 0)));
};
};
/*\
* eve.stop
[ method ]
**
* Is used inside an event handler to stop the event, preventing any subsequent listeners from firing.
\*/
eve.stop = function () {
stop = 1;
};
/*\
* eve.nt
[ method ]
**
* Could be used inside event handler to figure out actual name of the event.
**
> Arguments
**
- subname (string) #optional subname of the event
**
= (string) name of the event, if `subname` is not specified
* or
= (boolean) `true`, if current events name contains `subname`
\*/
eve.nt = function (subname) {
if (subname) {
return new RegExp("(?:\\.|\\/|^)" + subname + "(?:\\.|\\/|$)").test(current_event);
}
return current_event;
};
/*\
* eve.nts
[ method ]
**
* Could be used inside event handler to figure out actual name of the event.
**
**
= (array) names of the event
\*/
eve.nts = function () {
return current_event.split(separator);
};
/*\
* eve.off
[ method ]
**
* Removes given function from the list of event listeners assigned to given name.
* If no arguments specified all the events will be cleared.
**
> Arguments
**
- name (string) name of the event, dot (`.`) or slash (`/`) separated, with optional wildcards
- f (function) event handler function
\*/
/*\
* eve.unbind
[ method ]
**
* See @eve.off
\*/
eve.off = eve.unbind = function (name, f) {
if (!name) {
eve._events = events = {n: {}};
return;
}
var names = name.split(separator),
e,
key,
splice,
i, ii, j, jj,
cur = [events];
for (i = 0, ii = names.length; i < ii; i++) {
for (j = 0; j < cur.length; j += splice.length - 2) {
splice = [j, 1];
e = cur[j].n;
if (names[i] != wildcard) {
if (e[names[i]]) {
splice.push(e[names[i]]);
}
} else {
for (key in e) if (e[has](key)) {
splice.push(e[key]);
}
}
cur.splice.apply(cur, splice);
}
}
for (i = 0, ii = cur.length; i < ii; i++) {
e = cur[i];
while (e.n) {
if (f) {
if (e.f) {
for (j = 0, jj = e.f.length; j < jj; j++) if (e.f[j] == f) {
e.f.splice(j, 1);
break;
}
!e.f.length && delete e.f;
}
for (key in e.n) if (e.n[has](key) && e.n[key].f) {
var funcs = e.n[key].f;
for (j = 0, jj = funcs.length; j < jj; j++) if (funcs[j] == f) {
funcs.splice(j, 1);
break;
}
!funcs.length && delete e.n[key].f;
}
} else {
delete e.f;
for (key in e.n) if (e.n[has](key) && e.n[key].f) {
delete e.n[key].f;
}
}
e = e.n;
}
}
};
/*\
* eve.once
[ method ]
**
* Binds given event handler with a given name to only run once then unbind itself.
| eve.once("login", f);
| eve("login"); // triggers f
| eve("login"); // no listeners
* Use @eve to trigger the listener.
**
> Arguments
**
- name (string) name of the event, dot (`.`) or slash (`/`) separated, with optional wildcards
- f (function) event handler function
**
= (function) same return function as @eve.on
\*/
eve.once = function (name, f) {
var f2 = function () {
eve.unbind(name, f2);
return f.apply(this, arguments);
};
return eve.on(name, f2);
};
/*\
* eve.version
[ property (string) ]
**
* Current version of the library.
\*/
eve.version = version;
eve.toString = function () {
return "You are running Eve " + version;
};
(typeof module != "undefined" && module.exports) ? (module.exports = eve) : (typeof define != "undefined" ? (define("eve", [], function() { return eve; })) : (glob.eve = eve));
})(this);
// Copyright (c) 2013 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.
window.mina = (function () {
var animations = [],
window.mina = (function (eve) {
var animations = {},
requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
@ -474,15 +102,23 @@ window.mina = (function () {
a.s = a.s * val / a.dur;
a.dur = val;
},
stopit = function () {
var a = this;
delete animations[a.id];
eve("mina.stop." + a.id, a);
},
frame = function () {
for (var i = 0, ii = animations.length; i < ii; i++) {
var len = 0;
for (var i in animations) if (animations.hasOwnProperty(i)) {
var a = animations[i],
b = a.get(),
res;
len++;
a.s = (b - a.b) / (a.dur / a.spd);
if (a.s >= 1) {
animations.splice(i, 1);
delete animations[i];
a.s = 1;
len--;
}
if (isArray(a.start)) {
res = [];
@ -494,11 +130,11 @@ window.mina = (function () {
res = a.start + (a.end - a.start) * a.easing(a.s);
}
a.set(res);
if (a.s == 1 && typeof eve != "undefined") {
if (a.s == 1) {
eve("mina.finish." + a.id, a);
}
}
animations.length && requestAnimFrame(frame);
len && requestAnimFrame(frame);
},
mina = function (a, A, b, B, get, set, easing) {
var anim = {
@ -514,13 +150,24 @@ window.mina = (function () {
easing: easing || mina.linear,
status: sta,
speed: speed,
duration: duration
duration: duration,
stop: stopit
};
animations.push(anim);
animations.length == 1 && requestAnimFrame(frame);
animations[anim.id] = anim;
var len = 0, i;
for (i in animations) if (animations.hasOwnProperty(i)) {
len++;
if (len == 2) {
break;
}
}
len == 1 && requestAnimFrame(frame);
return anim;
};
mina.time = timer;
mina.getById = function (id) {
return animations[anim.id] || null;
};
mina.linear = function (n) {
return n;
@ -581,7 +228,7 @@ window.mina = (function () {
};
return mina;
})();
})(typeof eve == "undefined" ? function () {} : eve);
/*
* Elemental 0.2.1 - Simple JavaScript Tag Parser
*
@ -884,6 +531,20 @@ window.mina = (function () {
(typeof exports == "undefined" ? this : exports).elemental = elemental;
})();
// Copyright (c) 2013 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.
var $VG, Savage = $VG = (function () {
Savage.version = "0.0.1";
function Savage(w, h) {
@ -1118,7 +779,7 @@ function x_y_w_h() {
}
/*\
* Raphael.rad
* Savage.rad
[ method ]
**
* Transform angle to radians
@ -1128,7 +789,7 @@ function x_y_w_h() {
\*/
Savage.rad = rad;
/*\
* Raphael.deg
* Savage.deg
[ method ]
**
* Transform angle to degrees
@ -1434,7 +1095,7 @@ function Matrix(a, b, c, d, e, f) {
};
})(Matrix.prototype);
/*\
* Raphael.Matrix
* Savage.Matrix
[ method ]
**
* Utility method
@ -2210,6 +1871,7 @@ function Element(el) {
this.paper = new Paper(svg);
}
this.type = el.tagName;
this.anims = {};
this._ = {
transform: [],
sx: 1,
@ -2232,6 +1894,29 @@ function arrayFirstValue(arr) {
}
}
(function (elproto) {
/*\
* Element.attr
[ method ]
**
* Gets or sets given attributes of the element
**
> Parameters
**
- params (object) key-value pairs of attributes you want to set
* or
- param (string) name of the attribute
= (Element)
* or
= (string) value of attribute
> Usage
| el.attr({
| fill: "#fc0",
| stroke: "#000",
| strokeWidth: 2, // CamelCase...
| "fill-opacity": 0.5 // or dash-separated names
| });
| console.log(el.attr("fill")); // “#fc0”
\*/
elproto.attr = function (params) {
var node = this.node;
if (is(params, "string")) {
@ -2244,6 +1929,31 @@ function arrayFirstValue(arr) {
}
return this;
};
/*\
* Element.getBBox
[ method ]
**
* Returns bounding box descriptor for the given element.
**
= (object) bounding box descriptor:
o {
o cx: (number) x of the center,
o cy: (number) x of the center,
o h: (number) height,
o height: (number) height,
o path: (string) path command for the box,
o r0: (number) radius of the circle that will enclose the box,
o r1: (number) radius of the smallest circle that can be enclosed,
o r2: (number) radius of the biggest circle that can be enclosed,
o vb: (string) box as a viewbox command,
o w: (number) width,
o width: (number) width,
o x2: (number) x of the right side,
o x: (number) x of the left side,
o y2: (number) y of the right side,
o y: (number) y of the left side
o }
\*/
elproto.getBBox = function (isWithoutTransform) {
if (this.removed) {
return {};
@ -2272,6 +1982,28 @@ function arrayFirstValue(arr) {
var propString = function () {
return this.local;
};
/*\
* Element.transform
[ method ]
**
* Gets or sets transformation of the element
**
> Parameters
**
- tstr (string) transform string in Savage or SVG format
= (Element)
* or
= (object) transformation descriptor:
o {
o string (string) transform string,
o globalMatrix (Matrix) matrix of all transformations applied to element or its parents,
o localMatrix (Matrix) matrix of transformations applied only to the element,
o diffMatrix (Matrix) matrix of difference between global and local transformations,
o global (string) global transformation as string,
o local (string) local transformation as string,
o toString (function) returns `string` property
o }
\*/
elproto.transform = function (tstr) {
var _ = this._;
if (tstr == null) {
@ -2306,9 +2038,28 @@ function arrayFirstValue(arr) {
return this;
};
/*\
* Element.parent
[ method ]
**
* Returns parent of the element
**
= (Element) parent
\*/
elproto.parent = function () {
return Savage(this.node.parentNode);
return wrap(this.node.parentNode);
};
/*\
* Element.append
[ method ]
**
* Appends given element to current one.
**
> Parameters
**
- el (Element|Set) element to append
= (Element) parent
\*/
elproto.append = function (el) {
if (el.type == "set") {
var it = this;
@ -2322,44 +2073,128 @@ function arrayFirstValue(arr) {
el.paper = this.paper;
return this;
};
/*\
* Element.prepend
[ method ]
**
* Prepends given element to current one.
**
> Parameters
**
- el (Element) element to prepend
= (Element) parent
\*/
elproto.prepend = function (el) {
el = wrap(el);
this.node.parentNode.insertBefore(el.node, this.node.firstChild);
el.paper = this.paper;
return this;
};
/*\
* Element.before
[ method ]
**
* Inserts given element before the current one.
**
> Parameters
**
- el (Element) element to insert
= (Element) parent
\*/
// TODO make it work for sets too
elproto.before = function (el) {
el = wrap(el);
this.node.parentNode.insertBefore(el.node, this.node);
el.paper = this.paper;
return this;
};
/*\
* Element.after
[ method ]
**
* Inserts given element after the current one.
**
> Parameters
**
- el (Element) element to insert
= (Element) parent
\*/
elproto.after = function (el) {
el = wrap(el);
this.node.parentNode.insertBefore(el.node, this.node.nextSibling);
el.paper = this.paper;
return this;
};
/*\
* Element.insertBefore
[ method ]
**
* Inserts the element after the given one.
**
> Parameters
**
- el (Element) element next to whom insert to
= (Element) parent
\*/
elproto.insertBefore = function (el) {
el = wrap(el);
el.node.parentNode.insertBefore(this.node, el.node);
this.paper = el.paper;
return this;
};
/*\
* Element.insertAfter
[ method ]
**
* Inserts the element after the given one.
**
> Parameters
**
- el (Element) element next to whom insert to
= (Element) parent
\*/
elproto.insertAfter = function (el) {
el = wrap(el);
el.node.parentNode.insertBefore(this.node, el.node.nextSibling);
this.paper = el.paper;
return this;
};
/*\
* Element.remove
[ method ]
**
* Removes element from the DOM
\*/
elproto.remove = function () {
this.node.parentNode.removeChild(this.node);
delete this.paper;
this.removed = true;
};
/*\
* Element.select
[ method ]
**
* Applies CSS selector with the element as a parent and returns the result as an @Element.
**
> Parameters
**
- query (string) CSS selector
= (Element) result of query selection
\*/
elproto.select = function (query) {
return wrap(this.node.querySelector(query));
};
/*\
* Element.selectAll
[ method ]
**
* Applies CSS selector with the element as a parent and returns the result as a set or array of elements.
**
> Parameters
**
- query (string) CSS selector
= (Set|array) result of query selection
\*/
elproto.selectAll = function (query) {
var nodelist = this.node.querySelectorAll(query),
set = (Savage.set || Array)();
@ -2368,9 +2203,32 @@ function arrayFirstValue(arr) {
}
return set;
};
/*\
* Element.asPX
[ method ]
**
* Return given attribute of the element as a `px` value. (Not %, em, etc)
**
> Parameters
**
- attr (string) attribute name
- value (string) #optional attribute value
= (Element) result of query selection
\*/
elproto.asPX = function (attr, value) {
if (value == null) {
value = this.attr(attr);
}
return unit2px(this, attr, value);
};
/*\
* Element.use
[ method ]
**
* Creates `<use>` element linked to the current element.
**
= (Element) `<use>` element
\*/
elproto.use = function () {
var use,
id = this.node.id;
@ -2391,12 +2249,44 @@ function arrayFirstValue(arr) {
});
return use;
};
/*\
* Element.clone
[ method ]
**
* Creates `<use>` element linked to the current element.
**
= (Element) `<use>` element
\*/
elproto.clone = function () {
var clone = this.node.cloneNode(true);
// TODO replace with this.insertAfter()
this.node.parentNode.insertBefore(clone, this.node);
return wrap(clone);
var clone = wrap(this.node.cloneNode(true));
clone.insertAfter(this);
return clone;
};
/*\
* Element.pattern
[ method ]
**
* Creates `<pattern>` element from the current element.
**
> Parameters
**
* To create a pattern you have to specify the pattern rect:
- x (string|number)
- y (string|number)
- width (string|number)
- height (string|number)
= (Element) `<pattern>` element
* You can use pattern later on as an argument for `fill` attribute:
| var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
| fill: "none",
| stroke: "#bada55",
| strokeWidth: 5
| }).pattern(0, 0, 10, 10),
| c = paper.circle(200, 200, 100);
| c.attr({
| fill: p
| });
\*/
elproto.pattern = function (x, y, width, height) {
var p = make("pattern", this.paper.defs);
if (x == null) {
@ -2420,6 +2310,25 @@ function arrayFirstValue(arr) {
p.node.appendChild(this.node);
return p;
};
/*\
* Element.marker
[ method ]
**
* Creates `<marker>` element from the current element.
**
> Parameters
**
* To create a marker you have to specify the bounding rect and reference point:
- x (number)
- y (number)
- width (number)
- height (number)
- refX (number)
- refY (number)
= (Element) `<marker>` element
* You can use pattern later on as an argument for `marker-start` or `marker-end` attributes.
\*/
// TODO add usage for markers
elproto.marker = function (x, y, width, height, refX, refY) {
var p = make("marker", this.paper.defs);
if (x == null) {
@ -2429,8 +2338,8 @@ function arrayFirstValue(arr) {
y = x.y;
width = x.width;
height = x.height;
refX = x.refX;
refY = x.refY;
refX = x.refX || x.cx;
refY = x.refY || x.cy;
x = x.x;
}
$(p.node, {
@ -2455,7 +2364,77 @@ function arrayFirstValue(arr) {
return f ? f(res) : res;
};
}
elproto.animate = function (attrs, ms, callback) {
var Animation = function (attr, ms, easing, callback) {
if (typeof easing == "function") {
callback = easing;
easing = mina.linear;
}
this.attr = attr;
this.dur = ms;
easing && (this.easing = easing);
callback && (this.callback = callback);
};
/*\
* Savage.animation
[ method ]
**
* Creates animation object.
**
> Parameters
**
- attr (object) attributes of final destination
- ms (number) animation duration
- easing (function) #optional one of easing functions of @mina or custom one
- callback (function) #optional callback
= (object) animation object
\*/
Savage.animation = function (attr, ms, easing, callback) {
return new Animation(attr, ms, easing, callback);
};
/*\
* Savage.inAnim
[ method ]
**
* to be continued...
**
= (object)
\*/
elproto.inAnim = function () {
var el = this,
res = [];
for (var id in el.anims) if (el.anims[has](id)) {
(function (a) {
res.push({
anim: new Animation(a._attrs, a.dur, a.easing, a._callback),
curStatus: a.status(),
status: function (val) {
return a.status(val);
}
});
}(el.anims[id]));
}
return res;
};
Savage.animate = function (from, to, setter, ms, easing, callback) {
if (typeof easing == "function") {
callback = easing;
easing = mina.linear;
}
var now = mina.time(),
anim = mina(from, to, now, now + ms, mina.time, setter, easing);
callback && eve.once("mina.finish." + anim.id, callback);
};
elproto.animate = function (attrs, ms, easing, callback) {
if (typeof easing == "function") {
callback = easing;
easing = mina.linear;
}
if (attrs instanceof Animation) {
callback = attrs.callback;
easing = attrs.easing;
ms = easing.dur;
attrs = attrs.attr;
}
var fkeys = [], tkeys = [], keys = {}, from, to, f, eq;
for (var key in attrs) if (attrs[has](key)) {
if (this.equal) {
@ -2480,9 +2459,16 @@ function arrayFirstValue(arr) {
attr[key] = keys[key](val);
}
el.attr(attr);
}, easing);
el.anims[anim.id] = anim;
anim._attrs = attrs;
anim._callback = callback;
eve.once("mina.finish." + anim.id, function () {
delete el.anims[anim.id];
callback && callback.call(el);
});
callback && eve.once("mina.finish." + anim.id, function () {
callback.call(el);
eve.once("mina.stop." + anim.id, function () {
delete el.anims[anim.id];
});
};
}(Element.prototype));

351
svg.js
View File

@ -246,7 +246,7 @@ function x_y_w_h() {
}
/*\
* Raphael.rad
* Savage.rad
[ method ]
**
* Transform angle to radians
@ -256,7 +256,7 @@ function x_y_w_h() {
\*/
Savage.rad = rad;
/*\
* Raphael.deg
* Savage.deg
[ method ]
**
* Transform angle to degrees
@ -562,7 +562,7 @@ function Matrix(a, b, c, d, e, f) {
};
})(Matrix.prototype);
/*\
* Raphael.Matrix
* Savage.Matrix
[ method ]
**
* Utility method
@ -1338,6 +1338,7 @@ function Element(el) {
this.paper = new Paper(svg);
}
this.type = el.tagName;
this.anims = {};
this._ = {
transform: [],
sx: 1,
@ -1360,6 +1361,29 @@ function arrayFirstValue(arr) {
}
}
(function (elproto) {
/*\
* Element.attr
[ method ]
**
* Gets or sets given attributes of the element
**
> Parameters
**
- params (object) key-value pairs of attributes you want to set
* or
- param (string) name of the attribute
= (Element)
* or
= (string) value of attribute
> Usage
| el.attr({
| fill: "#fc0",
| stroke: "#000",
| strokeWidth: 2, // CamelCase...
| "fill-opacity": 0.5 // or dash-separated names
| });
| console.log(el.attr("fill")); // “#fc0”
\*/
elproto.attr = function (params) {
var node = this.node;
if (is(params, "string")) {
@ -1372,6 +1396,31 @@ function arrayFirstValue(arr) {
}
return this;
};
/*\
* Element.getBBox
[ method ]
**
* Returns bounding box descriptor for the given element.
**
= (object) bounding box descriptor:
o {
o cx: (number) x of the center,
o cy: (number) x of the center,
o h: (number) height,
o height: (number) height,
o path: (string) path command for the box,
o r0: (number) radius of the circle that will enclose the box,
o r1: (number) radius of the smallest circle that can be enclosed,
o r2: (number) radius of the biggest circle that can be enclosed,
o vb: (string) box as a viewbox command,
o w: (number) width,
o width: (number) width,
o x2: (number) x of the right side,
o x: (number) x of the left side,
o y2: (number) y of the right side,
o y: (number) y of the left side
o }
\*/
elproto.getBBox = function (isWithoutTransform) {
if (this.removed) {
return {};
@ -1400,6 +1449,28 @@ function arrayFirstValue(arr) {
var propString = function () {
return this.local;
};
/*\
* Element.transform
[ method ]
**
* Gets or sets transformation of the element
**
> Parameters
**
- tstr (string) transform string in Savage or SVG format
= (Element)
* or
= (object) transformation descriptor:
o {
o string (string) transform string,
o globalMatrix (Matrix) matrix of all transformations applied to element or its parents,
o localMatrix (Matrix) matrix of transformations applied only to the element,
o diffMatrix (Matrix) matrix of difference between global and local transformations,
o global (string) global transformation as string,
o local (string) local transformation as string,
o toString (function) returns `string` property
o }
\*/
elproto.transform = function (tstr) {
var _ = this._;
if (tstr == null) {
@ -1434,9 +1505,28 @@ function arrayFirstValue(arr) {
return this;
};
/*\
* Element.parent
[ method ]
**
* Returns parent of the element
**
= (Element) parent
\*/
elproto.parent = function () {
return Savage(this.node.parentNode);
return wrap(this.node.parentNode);
};
/*\
* Element.append
[ method ]
**
* Appends given element to current one.
**
> Parameters
**
- el (Element|Set) element to append
= (Element) parent
\*/
elproto.append = function (el) {
if (el.type == "set") {
var it = this;
@ -1450,44 +1540,128 @@ function arrayFirstValue(arr) {
el.paper = this.paper;
return this;
};
/*\
* Element.prepend
[ method ]
**
* Prepends given element to current one.
**
> Parameters
**
- el (Element) element to prepend
= (Element) parent
\*/
elproto.prepend = function (el) {
el = wrap(el);
this.node.parentNode.insertBefore(el.node, this.node.firstChild);
el.paper = this.paper;
return this;
};
/*\
* Element.before
[ method ]
**
* Inserts given element before the current one.
**
> Parameters
**
- el (Element) element to insert
= (Element) parent
\*/
// TODO make it work for sets too
elproto.before = function (el) {
el = wrap(el);
this.node.parentNode.insertBefore(el.node, this.node);
el.paper = this.paper;
return this;
};
/*\
* Element.after
[ method ]
**
* Inserts given element after the current one.
**
> Parameters
**
- el (Element) element to insert
= (Element) parent
\*/
elproto.after = function (el) {
el = wrap(el);
this.node.parentNode.insertBefore(el.node, this.node.nextSibling);
el.paper = this.paper;
return this;
};
/*\
* Element.insertBefore
[ method ]
**
* Inserts the element after the given one.
**
> Parameters
**
- el (Element) element next to whom insert to
= (Element) parent
\*/
elproto.insertBefore = function (el) {
el = wrap(el);
el.node.parentNode.insertBefore(this.node, el.node);
this.paper = el.paper;
return this;
};
/*\
* Element.insertAfter
[ method ]
**
* Inserts the element after the given one.
**
> Parameters
**
- el (Element) element next to whom insert to
= (Element) parent
\*/
elproto.insertAfter = function (el) {
el = wrap(el);
el.node.parentNode.insertBefore(this.node, el.node.nextSibling);
this.paper = el.paper;
return this;
};
/*\
* Element.remove
[ method ]
**
* Removes element from the DOM
\*/
elproto.remove = function () {
this.node.parentNode.removeChild(this.node);
delete this.paper;
this.removed = true;
};
/*\
* Element.select
[ method ]
**
* Applies CSS selector with the element as a parent and returns the result as an @Element.
**
> Parameters
**
- query (string) CSS selector
= (Element) result of query selection
\*/
elproto.select = function (query) {
return wrap(this.node.querySelector(query));
};
/*\
* Element.selectAll
[ method ]
**
* Applies CSS selector with the element as a parent and returns the result as a set or array of elements.
**
> Parameters
**
- query (string) CSS selector
= (Set|array) result of query selection
\*/
elproto.selectAll = function (query) {
var nodelist = this.node.querySelectorAll(query),
set = (Savage.set || Array)();
@ -1496,9 +1670,32 @@ function arrayFirstValue(arr) {
}
return set;
};
/*\
* Element.asPX
[ method ]
**
* Return given attribute of the element as a `px` value. (Not %, em, etc)
**
> Parameters
**
- attr (string) attribute name
- value (string) #optional attribute value
= (Element) result of query selection
\*/
elproto.asPX = function (attr, value) {
if (value == null) {
value = this.attr(attr);
}
return unit2px(this, attr, value);
};
/*\
* Element.use
[ method ]
**
* Creates `<use>` element linked to the current element.
**
= (Element) `<use>` element
\*/
elproto.use = function () {
var use,
id = this.node.id;
@ -1519,12 +1716,44 @@ function arrayFirstValue(arr) {
});
return use;
};
/*\
* Element.clone
[ method ]
**
* Creates `<use>` element linked to the current element.
**
= (Element) `<use>` element
\*/
elproto.clone = function () {
var clone = this.node.cloneNode(true);
// TODO replace with this.insertAfter()
this.node.parentNode.insertBefore(clone, this.node);
return wrap(clone);
var clone = wrap(this.node.cloneNode(true));
clone.insertAfter(this);
return clone;
};
/*\
* Element.pattern
[ method ]
**
* Creates `<pattern>` element from the current element.
**
> Parameters
**
* To create a pattern you have to specify the pattern rect:
- x (string|number)
- y (string|number)
- width (string|number)
- height (string|number)
= (Element) `<pattern>` element
* You can use pattern later on as an argument for `fill` attribute:
| var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
| fill: "none",
| stroke: "#bada55",
| strokeWidth: 5
| }).pattern(0, 0, 10, 10),
| c = paper.circle(200, 200, 100);
| c.attr({
| fill: p
| });
\*/
elproto.pattern = function (x, y, width, height) {
var p = make("pattern", this.paper.defs);
if (x == null) {
@ -1548,6 +1777,25 @@ function arrayFirstValue(arr) {
p.node.appendChild(this.node);
return p;
};
/*\
* Element.marker
[ method ]
**
* Creates `<marker>` element from the current element.
**
> Parameters
**
* To create a marker you have to specify the bounding rect and reference point:
- x (number)
- y (number)
- width (number)
- height (number)
- refX (number)
- refY (number)
= (Element) `<marker>` element
* You can use pattern later on as an argument for `marker-start` or `marker-end` attributes.
\*/
// TODO add usage for markers
elproto.marker = function (x, y, width, height, refX, refY) {
var p = make("marker", this.paper.defs);
if (x == null) {
@ -1557,8 +1805,8 @@ function arrayFirstValue(arr) {
y = x.y;
width = x.width;
height = x.height;
refX = x.refX;
refY = x.refY;
refX = x.refX || x.cx;
refY = x.refY || x.cy;
x = x.x;
}
$(p.node, {
@ -1583,7 +1831,77 @@ function arrayFirstValue(arr) {
return f ? f(res) : res;
};
}
elproto.animate = function (attrs, ms, callback) {
var Animation = function (attr, ms, easing, callback) {
if (typeof easing == "function") {
callback = easing;
easing = mina.linear;
}
this.attr = attr;
this.dur = ms;
easing && (this.easing = easing);
callback && (this.callback = callback);
};
/*\
* Savage.animation
[ method ]
**
* Creates animation object.
**
> Parameters
**
- attr (object) attributes of final destination
- ms (number) animation duration
- easing (function) #optional one of easing functions of @mina or custom one
- callback (function) #optional callback
= (object) animation object
\*/
Savage.animation = function (attr, ms, easing, callback) {
return new Animation(attr, ms, easing, callback);
};
/*\
* Savage.inAnim
[ method ]
**
* to be continued...
**
= (object)
\*/
elproto.inAnim = function () {
var el = this,
res = [];
for (var id in el.anims) if (el.anims[has](id)) {
(function (a) {
res.push({
anim: new Animation(a._attrs, a.dur, a.easing, a._callback),
curStatus: a.status(),
status: function (val) {
return a.status(val);
}
});
}(el.anims[id]));
}
return res;
};
Savage.animate = function (from, to, setter, ms, easing, callback) {
if (typeof easing == "function") {
callback = easing;
easing = mina.linear;
}
var now = mina.time(),
anim = mina(from, to, now, now + ms, mina.time, setter, easing);
callback && eve.once("mina.finish." + anim.id, callback);
};
elproto.animate = function (attrs, ms, easing, callback) {
if (typeof easing == "function") {
callback = easing;
easing = mina.linear;
}
if (attrs instanceof Animation) {
callback = attrs.callback;
easing = attrs.easing;
ms = easing.dur;
attrs = attrs.attr;
}
var fkeys = [], tkeys = [], keys = {}, from, to, f, eq;
for (var key in attrs) if (attrs[has](key)) {
if (this.equal) {
@ -1608,9 +1926,16 @@ function arrayFirstValue(arr) {
attr[key] = keys[key](val);
}
el.attr(attr);
}, easing);
el.anims[anim.id] = anim;
anim._attrs = attrs;
anim._callback = callback;
eve.once("mina.finish." + anim.id, function () {
delete el.anims[anim.id];
callback && callback.call(el);
});
callback && eve.once("mina.finish." + anim.id, function () {
callback.call(el);
eve.once("mina.stop." + anim.id, function () {
delete el.anims[anim.id];
});
};
}(Element.prototype));