8 var li = document.createElement("li"),
9 isABBR = function (str, abbr) {
10 var letters = abbr.toUpperCase().split(""),
11 first = letters.shift(),
12 rg = new RegExp("^[" + first.toLowerCase() + first + "][a-z]*" + letters.join("[a-z]*") + "[a-z]*$");
13 return !!String(str).match(rg);
15 score = function (me, search) {
17 search = String(search);
26 if (isABBR(me, search)) {
30 chunk = me.toLowerCase();
31 for (var j, i = 0, ii = search.length; i < ii; i++) {
32 j = chunk.indexOf(search.charAt(i));
34 chunk = chunk.substring(j + 1);
38 score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0);
41 li.innerHTML = '<input type="search" id="dr-filter" results="0">';
42 var lis = ol.getElementsByTagName("span"),
44 rgName = /[^\.\(]*(?=(\(\))?$)/;
45 for (var i = 0, ii = lis.length; i < ii; i++) {
47 li: lis[i].parentNode.parentNode,
48 text: lis[i].innerHTML.match(rgName)[0]
51 ol.insertBefore(li, ol.firstChild);
52 var input = document.getElementById("dr-filter");
53 input.style.width = "100%";
54 input.style.marginTop = "10px";
55 input.onclick = input.onchange = input.onkeydown = input.onkeyup = function () {
59 for (var i = 0, ii = names.length; i < ii; i++) {
62 weight: score(names[i].text, v)
65 res.sort(function (a, b) {
66 return b.weight - a.weight;
68 for (i = 0, ii = res.length; i < ii; i++) {
69 ol.appendChild(res[i].li);
72 for (i = 0, ii = names.length; i < ii; i++) {
73 ol.appendChild(names[i].li);
77 })(document.getElementById("dr-toc"));
79 function prepare(id) {
80 var div = document.getElementById(id);
81 div.style.cssText = "float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat";
82 return Raphael(div, 99, 99);
88 "stroke-linecap": "round",
89 "stroke-linejoin": "round"
94 "stroke-dasharray": "- ",
95 "stroke-linecap": "round",
96 "stroke-linejoin": "round"
103 "stroke-linecap": "round",
104 "stroke-linejoin": "round"
110 prepare("Paper.path-extra").path("M10,10R90,50 10,90").attr(line);
114 r.circle(15, 15, 10).attr(fill).click(function () {
115 var clr = Raphael.hsb(Math.random(), .6, 1);
116 this.animate(there ? {
128 }, 600, ["bounce", "<>", "elastic", ""][Math.round(Math.random() * 3)]);
131 })(prepare("Element.animate-extra"));
135 r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
137 cx: Math.min(Math.max(x + dx, 15), 85),
138 cy: Math.min(Math.max(y + dy, 15), 85)
145 })(prepare("Element.drag-extra"));
148 var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () {
151 }, 1000, function () {
157 bb = r.rect().attr(e.getBBox()).attr(dots);
158 eve.on("anim.frame." + e.id, function (anim) {
159 bb.attr(e.getBBox());
161 })(prepare("Element.getBBox-extra"));
164 var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
165 l = e.getTotalLength(),
167 r.customAttributes.along = function (a) {
168 var p = e.getPointAtLength(a * l);
170 transform: "t" + [p.x, p.y] + "r" + p.alpha
173 var c = r.ellipse(0, 0, 5, 2).attr({
176 r.rect(0, 0, 100, 100).attr(none).click(function () {
182 })(prepare("Element.getPointAtLength-extra"));
185 var e = r.path("M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90").attr(line),
186 l = e.getTotalLength() - 10,
188 r.customAttributes.along = function (a) {
190 path: e.getSubpath(a * l, a * l + 11)
193 var c = r.path().attr(line).attr({
198 r.rect(0, 0, 100, 100).attr(none).click(function () {
204 })(prepare("Element.getSubpath-extra"));
207 r.circle(50, 50, 40).attr(line).glow({color: "#fff"});
208 })(prepare("Element.glow-extra"));
211 r.rect(10, 10, 40, 30).attr(dots);
212 r.rect(10, 10, 40, 30).attr(line).transform("r-30, 50, 10t10, 20s1.5");
213 r.text(50, 90, "r-30, 50, 10\nt10, 20s1.5").attr({fill: "#fff"});
214 })(prepare("Element.transform-extra"));
217 r.circle(50, 50, 40).attr(line);
218 })(prepare("Paper.circle-extra"));
221 r.ellipse(50, 50, 40, 30).attr(line);
222 })(prepare("Paper.ellipse-extra"));
225 r.rect(10, 10, 50, 50).attr(line);
226 r.rect(40, 40, 50, 50, 10).attr(line);
227 })(prepare("Paper.rect-extra"));
231 r.rect(10, 10, 50, 50).attr(fill),
232 r.rect(40, 40, 50, 50, 10).attr(fill)
233 ).hover(function () {
234 set.stop().animate({stroke: "#f00"}, 600, "<>");
236 set.stop().animate({stroke: "#fff"}, 600, "<>");
238 })(prepare("Paper.set-extra"));
241 r.text(50, 50, "Raphaƫl\nkicks\nbutt!").attr({
243 font: "italic 20px Georgia",
246 })(prepare("Paper.text-extra"));