mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-23 20:49:21 +00:00
248 lines
8.0 KiB
JavaScript
248 lines
8.0 KiB
JavaScript
|
Raphael(function () {
|
||
|
|
|
||
|
|
// TOC
|
||
|
|
(function (ol) {
|
||
|
|
if (!ol) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var li = document.createElement("li"),
|
||
|
|
isABBR = function (str, abbr) {
|
||
|
|
var letters = abbr.toUpperCase().split(""),
|
||
|
|
first = letters.shift(),
|
||
|
|
rg = new RegExp("^[" + first.toLowerCase() + first + "][a-z]*" + letters.join("[a-z]*") + "[a-z]*$");
|
||
|
|
return !!String(str).match(rg);
|
||
|
|
},
|
||
|
|
score = function (me, search) {
|
||
|
|
me = String(me);
|
||
|
|
search = String(search);
|
||
|
|
var score = 0,
|
||
|
|
chunk;
|
||
|
|
if (me == search) {
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
if (!me || !search) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
if (isABBR(me, search)) {
|
||
|
|
return .9;
|
||
|
|
}
|
||
|
|
score = 0;
|
||
|
|
chunk = me.toLowerCase();
|
||
|
|
for (var j, i = 0, ii = search.length; i < ii; i++) {
|
||
|
|
j = chunk.indexOf(search.charAt(i));
|
||
|
|
if (~j) {
|
||
|
|
chunk = chunk.substring(j + 1);
|
||
|
|
score += 1 / (j + 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0);
|
||
|
|
return score;
|
||
|
|
};
|
||
|
|
li.innerHTML = '<input type="search" id="dr-filter" results="0">';
|
||
|
|
var lis = ol.getElementsByTagName("span"),
|
||
|
|
names = [],
|
||
|
|
rgName = /[^\.\(]*(?=(\(\))?$)/;
|
||
|
|
for (var i = 0, ii = lis.length; i < ii; i++) {
|
||
|
|
names[i] = {
|
||
|
|
li: lis[i].parentNode.parentNode,
|
||
|
|
text: lis[i].innerHTML.match(rgName)[0]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
ol.insertBefore(li, ol.firstChild);
|
||
|
|
var input = document.getElementById("dr-filter");
|
||
|
|
input.style.width = "100%";
|
||
|
|
input.style.marginTop = "10px";
|
||
|
|
input.onclick = input.onchange = input.onkeydown = input.onkeyup = function () {
|
||
|
|
var v = input.value,
|
||
|
|
res = [];
|
||
|
|
if (v.length > 1) {
|
||
|
|
for (var i = 0, ii = names.length; i < ii; i++) {
|
||
|
|
res[i] = {
|
||
|
|
li: names[i].li,
|
||
|
|
weight: score(names[i].text, v)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
res.sort(function (a, b) {
|
||
|
|
return b.weight - a.weight;
|
||
|
|
});
|
||
|
|
for (i = 0, ii = res.length; i < ii; i++) {
|
||
|
|
ol.appendChild(res[i].li);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (i = 0, ii = names.length; i < ii; i++) {
|
||
|
|
ol.appendChild(names[i].li);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
})(document.getElementById("dr-toc"));
|
||
|
|
|
||
|
|
function prepare(id) {
|
||
|
|
var div = document.getElementById(id);
|
||
|
|
div.style.cssText = "float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat";
|
||
|
|
return Raphael(div, 99, 99);
|
||
|
|
}
|
||
|
|
|
||
|
|
var line = {
|
||
|
|
stroke: "#fff",
|
||
|
|
"stroke-width": 2,
|
||
|
|
"stroke-linecap": "round",
|
||
|
|
"stroke-linejoin": "round"
|
||
|
|
},
|
||
|
|
dots = {
|
||
|
|
stroke: "#fff",
|
||
|
|
"stroke-width": 2,
|
||
|
|
"stroke-dasharray": "- ",
|
||
|
|
"stroke-linecap": "round",
|
||
|
|
"stroke-linejoin": "round"
|
||
|
|
},
|
||
|
|
fill = {
|
||
|
|
stroke: "#fff",
|
||
|
|
fill: "#fff",
|
||
|
|
"fill-opacity": .5,
|
||
|
|
"stroke-width": 2,
|
||
|
|
"stroke-linecap": "round",
|
||
|
|
"stroke-linejoin": "round"
|
||
|
|
},
|
||
|
|
none = {
|
||
|
|
fill: "#000",
|
||
|
|
opacity: 0
|
||
|
|
};
|
||
|
|
prepare("Paper.path-extra").path("M10,10R90,50 10,90").attr(line);
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
var there;
|
||
|
|
r.circle(15, 15, 10).attr(fill).click(function () {
|
||
|
|
var clr = Raphael.hsb(Math.random(), .6, 1);
|
||
|
|
this.animate(there ? {
|
||
|
|
cx: 15,
|
||
|
|
cy: 15,
|
||
|
|
r: 10,
|
||
|
|
stroke: "#fff",
|
||
|
|
fill: "#fff"
|
||
|
|
} : {
|
||
|
|
cx: 80,
|
||
|
|
cy: 80,
|
||
|
|
r: 15,
|
||
|
|
stroke: clr,
|
||
|
|
fill: clr
|
||
|
|
}, 600, ["bounce", "<>", "elastic", ""][Math.round(Math.random() * 3)]);
|
||
|
|
there = !there;
|
||
|
|
});
|
||
|
|
})(prepare("Element.animate-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
var x, y;
|
||
|
|
r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
|
||
|
|
this.attr({
|
||
|
|
cx: Math.min(Math.max(x + dx, 15), 85),
|
||
|
|
cy: Math.min(Math.max(y + dy, 15), 85)
|
||
|
|
});
|
||
|
|
}, function () {
|
||
|
|
x = this.attr("cx");
|
||
|
|
y = this.attr("cy");
|
||
|
|
});
|
||
|
|
|
||
|
|
})(prepare("Element.drag-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () {
|
||
|
|
this.animate({
|
||
|
|
transform: "r180"
|
||
|
|
}, 1000, function () {
|
||
|
|
this.attr({
|
||
|
|
transform: ""
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}),
|
||
|
|
bb = r.rect().attr(e.getBBox()).attr(dots);
|
||
|
|
eve.on("anim.frame." + e.id, function (anim) {
|
||
|
|
bb.attr(e.getBBox());
|
||
|
|
});
|
||
|
|
})(prepare("Element.getBBox-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
|
||
|
|
l = e.getTotalLength(),
|
||
|
|
to = 1;
|
||
|
|
r.customAttributes.along = function (a) {
|
||
|
|
var p = e.getPointAtLength(a * l);
|
||
|
|
return {
|
||
|
|
transform: "t" + [p.x, p.y] + "r" + p.alpha
|
||
|
|
};
|
||
|
|
};
|
||
|
|
var c = r.ellipse(0, 0, 5, 2).attr({
|
||
|
|
along: 0
|
||
|
|
}).attr(line);
|
||
|
|
r.rect(0, 0, 100, 100).attr(none).click(function () {
|
||
|
|
c.stop().animate({
|
||
|
|
along: to
|
||
|
|
}, 5000);
|
||
|
|
to = +!to;
|
||
|
|
});
|
||
|
|
})(prepare("Element.getPointAtLength-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
|
||
|
|
l = e.getTotalLength() - 10,
|
||
|
|
to = 1;
|
||
|
|
r.customAttributes.along = function (a) {
|
||
|
|
return {
|
||
|
|
path: e.getSubpath(a * l, a * l + 11)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
var c = r.path().attr(line).attr({
|
||
|
|
along: 0,
|
||
|
|
stroke: "#f00",
|
||
|
|
"stroke-width": 3
|
||
|
|
});
|
||
|
|
r.rect(0, 0, 100, 100).attr(none).click(function () {
|
||
|
|
c.stop().animate({
|
||
|
|
along: to
|
||
|
|
}, 5000);
|
||
|
|
to = +!to;
|
||
|
|
});
|
||
|
|
})(prepare("Element.getSubpath-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
r.circle(50, 50, 40).attr(line).glow({color: "#fff"});
|
||
|
|
})(prepare("Element.glow-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
r.rect(10, 10, 40, 30).attr(dots);
|
||
|
|
r.rect(10, 10, 40, 30).attr(line).transform("r-30, 50, 10t10, 20s1.5");
|
||
|
|
r.text(50, 90, "r-30, 50, 10\nt10, 20s1.5").attr({fill: "#fff"});
|
||
|
|
})(prepare("Element.transform-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
r.circle(50, 50, 40).attr(line);
|
||
|
|
})(prepare("Paper.circle-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
r.ellipse(50, 50, 40, 30).attr(line);
|
||
|
|
})(prepare("Paper.ellipse-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
r.rect(10, 10, 50, 50).attr(line);
|
||
|
|
r.rect(40, 40, 50, 50, 10).attr(line);
|
||
|
|
})(prepare("Paper.rect-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
var set = r.set(
|
||
|
|
r.rect(10, 10, 50, 50).attr(fill),
|
||
|
|
r.rect(40, 40, 50, 50, 10).attr(fill)
|
||
|
|
).hover(function () {
|
||
|
|
set.stop().animate({stroke: "#f00"}, 600, "<>");
|
||
|
|
}, function () {
|
||
|
|
set.stop().animate({stroke: "#fff"}, 600, "<>");
|
||
|
|
});
|
||
|
|
})(prepare("Paper.set-extra"));
|
||
|
|
|
||
|
|
(function (r) {
|
||
|
|
r.text(50, 50, "Raphaël\nkicks\nbutt!").attr({
|
||
|
|
fill: "#fff",
|
||
|
|
font: "italic 20px Georgia",
|
||
|
|
transform: "r-10"
|
||
|
|
});
|
||
|
|
})(prepare("Paper.text-extra"));
|
||
|
|
|
||
|
|
});
|