git.roojs.org Git - raphael/blob - reference.js

   1 Raphael(function () {
   2
   3     // TOC
   4     (function (ol) {
   5         if (!ol) {
   6             return;
   7         }
   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);
  14             },
  15             score = function (me, search) {
  16                 me = String(me);
  17                 search = String(search);
  18                 var score = 0,
  19                     chunk;
  20                 if (me == search) {
  21                     return 1;
  22                 }
  23                 if (!me || !search) {
  24                     return 0;
  25                 }
  26                 if (isABBR(me, search)) {
  27                     return .9;
  28                 }
  29                 score = 0;
  30                 chunk = me.toLowerCase();
  31                 for (var j, i = 0, ii = search.length; i < ii; i++) {
  32                     j = chunk.indexOf(search.charAt(i));
  33                     if (~j) {
  34                         chunk = chunk.substring(j + 1);
  35                         score += 1 / (j + 1);
  36                     }
  37                 }
  38                 score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0);
  39                 return score;
  40             };
  41         li.innerHTML = '<input type="search" id="dr-filter" results="0">';
  42         var lis = ol.getElementsByTagName("span"),
  43             names = [],
  44             rgName = /[^\.\(]*(?=(\(\))?$)/;
  45         for (var i = 0, ii = lis.length; i < ii; i++) {
  46             names[i] = {
  47                 li: lis[i].parentNode.parentNode,
  48                 text: lis[i].innerHTML.match(rgName)[0]
  49             };
  50         }
  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 () {
  56             var v = input.value,
  57                 res = [];
  58             if (v.length > 1) {
  59                 for (var i = 0, ii = names.length; i < ii; i++) {
  60                     res[i] = {
  61                         li: names[i].li,
  62                         weight: score(names[i].text, v)
  63                     };
  64                 }
  65                 res.sort(function (a, b) {
  66                     return b.weight - a.weight;
  67                 });
  68                 for (i = 0, ii = res.length; i < ii; i++) {
  69                     ol.appendChild(res[i].li);
  70                 }
  71             } else {
  72                 for (i = 0, ii = names.length; i < ii; i++) {
  73                     ol.appendChild(names[i].li);
  74                 }
  75             }
  76         };
  77     })(document.getElementById("dr-toc"));
  78
  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);
  83     }
  84
  85     var line = {
  86             stroke: "#fff",
  87             "stroke-width": 2,
  88             "stroke-linecap": "round",
  89             "stroke-linejoin": "round"
  90         },
  91         dots = {
  92             stroke: "#fff",
  93             "stroke-width": 2,
  94             "stroke-dasharray": "- ",
  95             "stroke-linecap": "round",
  96             "stroke-linejoin": "round"
  97         },
  98         fill = {
  99             stroke: "#fff",
 100             fill: "#fff",
 101             "fill-opacity": .5,
 102             "stroke-width": 2,
 103             "stroke-linecap": "round",
 104             "stroke-linejoin": "round"
 105         },
 106         none = {
 107             fill: "#000",
 108             opacity: 0
 109         };
 110     prepare("Paper.path-extra").path("M10,10R90,50 10,90").attr(line);
 111
 112     (function (r) {
 113         var there;
 114         r.circle(15, 15, 10).attr(fill).click(function () {
 115             var clr = Raphael.hsb(Math.random(), .6, 1);
 116             this.animate(there ? {
 117                 cx: 15,
 118                 cy: 15,
 119                 r: 10,
 120                 stroke: "#fff",
 121                 fill: "#fff"
 122             } : {
 123                 cx: 80,
 124                 cy: 80,
 125                 r: 15,
 126                 stroke: clr,
 127                 fill: clr
 128             }, 600, ["bounce", "<>", "elastic", ""][Math.round(Math.random() * 3)]);
 129             there = !there;
 130         });
 131     })(prepare("Element.animate-extra"));
 132
 133     (function (r) {
 134         var x, y;
 135         r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
 136             this.attr({
 137                 cx: Math.min(Math.max(x + dx, 15), 85),
 138                 cy: Math.min(Math.max(y + dy, 15), 85)
 139             });
 140         }, function () {
 141             x = this.attr("cx");
 142             y = this.attr("cy");
 143         });
 144
 145     })(prepare("Element.drag-extra"));
 146
 147     (function (r) {
 148         var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () {
 149                 this.animate({
 150                     transform: "r180"
 151                 }, 1000, function () {
 152                     this.attr({
 153                         transform: ""
 154                     });
 155                 });
 156             }),
 157             bb = r.rect().attr(e.getBBox()).attr(dots);
 158         eve.on("anim.frame." + e.id, function (anim) {
 159             bb.attr(e.getBBox());
 160         });
 161     })(prepare("Element.getBBox-extra"));
 162
 163     (function (r) {
 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(),
 166             to = 1;
 167         r.customAttributes.along = function (a) {
 168             var p = e.getPointAtLength(a * l);
 169             return {
 170                 transform: "t" + [p.x, p.y] + "r" + p.alpha
 171             };
 172         };
 173         var c = r.ellipse(0, 0, 5, 2).attr({
 174             along: 0
 175         }).attr(line);
 176         r.rect(0, 0, 100, 100).attr(none).click(function () {
 177             c.stop().animate({
 178                 along: to
 179             }, 5000);
 180             to = +!to;
 181         });
 182     })(prepare("Element.getPointAtLength-extra"));
 183
 184     (function (r) {
 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,
 187             to = 1;
 188         r.customAttributes.along = function (a) {
 189             return {
 190                 path: e.getSubpath(a * l, a * l + 11)
 191             };
 192         };
 193         var c = r.path().attr(line).attr({
 194             along: 0,
 195             stroke: "#f00",
 196             "stroke-width": 3
 197         });
 198         r.rect(0, 0, 100, 100).attr(none).click(function () {
 199             c.stop().animate({
 200                 along: to
 201             }, 5000);
 202             to = +!to;
 203         });
 204     })(prepare("Element.getSubpath-extra"));
 205
 206     (function (r) {
 207         r.circle(50, 50, 40).attr(line).glow({color: "#fff"});
 208     })(prepare("Element.glow-extra"));
 209
 210     (function (r) {
 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"));
 215
 216     (function (r) {
 217         r.circle(50, 50, 40).attr(line);
 218     })(prepare("Paper.circle-extra"));
 219
 220     (function (r) {
 221         r.ellipse(50, 50, 40, 30).attr(line);
 222     })(prepare("Paper.ellipse-extra"));
 223
 224     (function (r) {
 225         r.rect(10, 10, 50, 50).attr(line);
 226         r.rect(40, 40, 50, 50, 10).attr(line);
 227     })(prepare("Paper.rect-extra"));
 228
 229     (function (r) {
 230         var set = r.set(
 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, "<>");
 235         }, function () {
 236             set.stop().animate({stroke: "#fff"}, 600, "<>");
 237         });
 238     })(prepare("Paper.set-extra"));
 239
 240     (function (r) {
 241         r.text(50, 50, "Raphaël\nkicks\nbutt!").attr({
 242             fill: "#fff",
 243             font: "italic 20px Georgia",
 244             transform: "r-10"
 245         });
 246     })(prepare("Paper.text-extra"));
 247
 248 });