In the process of adding useful animation methods + docs
parent
8eacc3ab1a
commit
34c814c1df
39
mina.js
39
mina.js
|
@ -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);
|
File diff suppressed because one or more lines are too long
778
savage.js
778
savage.js
|
@ -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 don’t need to worry about z-index, but it’s 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 event’s 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
351
svg.js
|
@ -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));
|
||||
|
|
Loading…
Reference in New Issue