├── .gitignore ├── docs ├── assets │ ├── yui.png │ ├── bg_hd.gif │ ├── heartcode-logo.png │ ├── reset-fonts-grids-min.css │ ├── ac-js │ └── api.css ├── classmap.js ├── index.json ├── index.html ├── module_canvasloader.html ├── raw.json └── CanvasLoader.html ├── bower.json ├── README.markdown ├── heartcode-canvasloader.html └── js ├── heartcode-canvasloader-min.js └── heartcode-canvasloader.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /docs/assets/yui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartcode/CanvasLoader/HEAD/docs/assets/yui.png -------------------------------------------------------------------------------- /docs/assets/bg_hd.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartcode/CanvasLoader/HEAD/docs/assets/bg_hd.gif -------------------------------------------------------------------------------- /docs/assets/heartcode-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartcode/CanvasLoader/HEAD/docs/assets/heartcode-logo.png -------------------------------------------------------------------------------- /docs/classmap.js: -------------------------------------------------------------------------------- 1 | YAHOO.env.classMap = {"CanvasLoader": "CanvasLoader"}; 2 | 3 | YAHOO.env.resolveClass = function(className) { 4 | var a=className.split('.'), ns=YAHOO.env.classMap; 5 | 6 | for (var i=0; i 3 | The library is currently in beta, some minor changes and improvements might be done to it in the near future. 4 | 5 | ##Tools 6 | I created a tool that can help with generating and previewing loaders with copy/paste code snippets and instructions: http://heartcode.robertpataki.com/canvasloader 7 | 8 | ##Documentation 9 | The latest documentation can be found here: http://heartcode.robertpataki.com/canvasloader/docs/CanvasLoader.html 10 | 11 | ## Contribution 12 | Please contribute :) I am quite new to JavaScript and I am pretty sure that there are million ways of making the library better, cleaner and smaller. Any constructive contribution is welcome and appriciated. 13 | 14 | You can also add your website / web app link to the Wiki, so the community can see how others use CanvasLoader. 15 | 16 | ## License 17 | **(The MIT License)** 18 | 19 | Copyright (c) 2011 Róbert Pataki heartcode@robertpataki.com; 20 | 21 | Permission is hereby granted, free of charge, to any person obtaining 22 | a copy of this software and associated documentation files (the 23 | 'Software'), to deal in the Software without restriction, including 24 | without limitation the rights to use, copy, modify, merge, publish, 25 | distribute, sublicense, and/or sell copies of the Software, and to 26 | permit persons to whom the Software is furnished to do so, subject to 27 | the following conditions: 28 | 29 | The above copyright notice and this permission notice shall be 30 | included in all copies or substantial portions of the Software. 31 | 32 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 33 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 34 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 35 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 36 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 37 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 38 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 39 | 40 | ## Credits 41 | Heartcode CanvasLoader was created by Róbert Pataki. -------------------------------------------------------------------------------- /heartcode-canvasloader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | Heartcode CanvasLoader test 35 | 36 | 37 | 38 | 39 | 40 | 55 | 56 | 57 |
58 |
59 | Spiral 60 |
61 | 73 |
74 |
75 |
76 | Oval 77 |
78 | 89 |
90 |
91 |
92 | Square 93 |
94 | 104 |
105 |
106 |
107 | Rectangle 108 |
109 | 119 |
120 |
121 |
122 | Rounded rectangle 123 |
124 | 134 |
135 |
136 |
137 | 138 | -------------------------------------------------------------------------------- /docs/index.json: -------------------------------------------------------------------------------- 1 | [{"url": "CanvasLoader.html#property_activeId", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "activeId"}, {"url": "CanvasLoader.html#method_addEl", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "addEl"}, {"url": "CanvasLoader.html#property_can", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "can"}, {"url": "CanvasLoader.html#property_cCan", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "cCan"}, {"url": "CanvasLoader.html#property_cCon", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "cCon"}, {"url": "CanvasLoader.html#method_clean", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "clean"}, {"url": "CanvasLoader.html#property_color", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "color"}, {"url": "CanvasLoader.html#property_con", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "con"}, {"url": "CanvasLoader.html#property_cont", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "cont"}, {"url": "CanvasLoader.html#property_cRGB", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "cRGB"}, {"url": "CanvasLoader.html#property_density", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "density"}, {"url": "CanvasLoader.html#property_diameter", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "diameter"}, {"url": "CanvasLoader.html#method_draw", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "draw"}, {"url": "CanvasLoader.html#property_fps", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "fps"}, {"url": "CanvasLoader.html#method_getColor", "access": "", "host": "CanvasLoader", "type": "method", "name": "getColor"}, {"url": "CanvasLoader.html#method_getDensity", "access": "", "host": "CanvasLoader", "type": "method", "name": "getDensity"}, {"url": "CanvasLoader.html#method_getDiameter", "access": "", "host": "CanvasLoader", "type": "method", "name": "getDiameter"}, {"url": "CanvasLoader.html#method_getFPS", "access": "", "host": "CanvasLoader", "type": "method", "name": "getFPS"}, {"url": "CanvasLoader.html#method_getRange", "access": "", "host": "CanvasLoader", "type": "method", "name": "getRange"}, {"url": "CanvasLoader.html#method_getRGB", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "getRGB"}, {"url": "CanvasLoader.html#method_getShape", "access": "", "host": "CanvasLoader", "type": "method", "name": "getShape"}, {"url": "CanvasLoader.html#method_getSpeed", "access": "", "host": "CanvasLoader", "type": "method", "name": "getSpeed"}, {"url": "CanvasLoader.html#method_hide", "access": "", "host": "CanvasLoader", "type": "method", "name": "hide"}, {"url": "CanvasLoader.html#method_init", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "init"}, {"url": "CanvasLoader.html#method_kill", "access": "", "host": "CanvasLoader", "type": "method", "name": "kill"}, {"url": "CanvasLoader.html#property_range", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "range"}, {"url": "CanvasLoader.html#property_ready", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "ready"}, {"url": "CanvasLoader.html#method_redraw", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "redraw"}, {"url": "CanvasLoader.html#method_reset", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "reset"}, {"url": "CanvasLoader.html#method_setAttr", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "setAttr"}, {"url": "CanvasLoader.html#method_setColor", "access": "", "host": "CanvasLoader", "type": "method", "name": "setColor"}, {"url": "CanvasLoader.html#method_setCSS", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "setCSS"}, {"url": "CanvasLoader.html#method_setDensity", "access": "", "host": "CanvasLoader", "type": "method", "name": "setDensity"}, {"url": "CanvasLoader.html#method_setDiameter", "access": "", "host": "CanvasLoader", "type": "method", "name": "setDiameter"}, {"url": "CanvasLoader.html#method_setFPS", "access": "", "host": "CanvasLoader", "type": "method", "name": "setFPS"}, {"url": "CanvasLoader.html#method_setRange", "access": "", "host": "CanvasLoader", "type": "method", "name": "setRange"}, {"url": "CanvasLoader.html#method_setShape", "access": "", "host": "CanvasLoader", "type": "method", "name": "setShape"}, {"url": "CanvasLoader.html#method_setSpeed", "access": "", "host": "CanvasLoader", "type": "method", "name": "setSpeed"}, {"url": "CanvasLoader.html#property_shape", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "shape"}, {"url": "CanvasLoader.html#method_show", "access": "", "host": "CanvasLoader", "type": "method", "name": "show"}, {"url": "CanvasLoader.html#property_speed", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "speed"}, {"url": "CanvasLoader.html#method_tick", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "tick"}, {"url": "CanvasLoader.html#property_timer", "access": "protected", "host": "CanvasLoader", "type": "property", "name": "timer"}, {"url": "CanvasLoader.html#method_transCon", "access": "protected", "host": "CanvasLoader", "type": "method", "name": "transCon"}] -------------------------------------------------------------------------------- /docs/assets/reset-fonts-grids-min.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2008, Yahoo! Inc. All rights reserved. 3 | Code licensed under the BSD License: 4 | http://developer.yahoo.net/yui/license.txt 5 | version: 2.6.0 6 | */ 7 | html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#ft{clear:both;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:100%;}{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;} .yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;} 8 | -------------------------------------------------------------------------------- /js/heartcode-canvasloader-min.js: -------------------------------------------------------------------------------- 1 | (function(w){var k=function(b,c){typeof c=="undefined"&&(c={});this.init(b,c)},a=k.prototype,o,p=["canvas","vml"],f=["oval","spiral","square","rect","roundRect"],x=/^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,v=navigator.appVersion.indexOf("MSIE")!==-1&&parseFloat(navigator.appVersion.split("MSIE")[1])===8?true:false,y=!!document.createElement("canvas").getContext,q=true,n=function(b,c,a){var b=document.createElement(b),d;for(d in a)b[d]=a[d];typeof c!=="undefined"&&c.appendChild(b);return b},m=function(b, 2 | c){for(var a in c)b.style[a]=c[a];return b},t=function(b,c){for(var a in c)b.setAttribute(a,c[a]);return b},u=function(b,c,a,d){b.save();b.translate(c,a);b.rotate(d);b.translate(-c,-a);b.beginPath()};a.init=function(b,c){if(typeof c.safeVML==="boolean")q=c.safeVML;try{this.mum=document.getElementById(b)!==void 0?document.getElementById(b):document.body}catch(a){this.mum=document.body}c.id=typeof c.id!=="undefined"?c.id:"canvasLoader";this.cont=n("div",this.mum,{id:c.id});if(y)o=p[0],this.can=n("canvas", 3 | this.cont),this.con=this.can.getContext("2d"),this.cCan=m(n("canvas",this.cont),{display:"none"}),this.cCon=this.cCan.getContext("2d");else{o=p[1];if(typeof k.vmlSheet==="undefined"){document.getElementsByTagName("head")[0].appendChild(n("style"));k.vmlSheet=document.styleSheets[document.styleSheets.length-1];var d=["group","oval","roundrect","fill"],e;for(e in d)k.vmlSheet.addRule(d[e],"behavior:url(#default#VML); position:absolute;")}this.vml=n("group",this.cont)}this.setColor(this.color);this.draw(); 4 | m(this.cont,{display:"none"})};a.cont={};a.can={};a.con={};a.cCan={};a.cCon={};a.timer={};a.activeId=0;a.diameter=40;a.setDiameter=function(b){this.diameter=Math.round(Math.abs(b));this.redraw()};a.getDiameter=function(){return this.diameter};a.cRGB={};a.color="#000000";a.setColor=function(b){this.color=x.test(b)?b:"#000000";this.cRGB=this.getRGB(this.color);this.redraw()};a.getColor=function(){return this.color};a.shape=f[0];a.setShape=function(b){for(var c in f)if(b===f[c]){this.shape=b;this.redraw(); 5 | break}};a.getShape=function(){return this.shape};a.density=40;a.setDensity=function(b){this.density=q&&o===p[1]?Math.round(Math.abs(b))<=40?Math.round(Math.abs(b)):40:Math.round(Math.abs(b));if(this.density>360)this.density=360;this.activeId=0;this.redraw()};a.getDensity=function(){return this.density};a.range=1.3;a.setRange=function(b){this.range=Math.abs(b);this.redraw()};a.getRange=function(){return this.range};a.speed=2;a.setSpeed=function(b){this.speed=Math.round(Math.abs(b))};a.getSpeed=function(){return this.speed}; 6 | a.fps=24;a.setFPS=function(b){this.fps=Math.round(Math.abs(b));this.reset()};a.getFPS=function(){return this.fps};a.getRGB=function(b){b=b.charAt(0)==="#"?b.substring(1,7):b;return{r:parseInt(b.substring(0,2),16),g:parseInt(b.substring(2,4),16),b:parseInt(b.substring(4,6),16)}};a.draw=function(){var b=0,c,a,d,e,h,k,j,r=this.density,s=Math.round(r*this.range),l,i,q=0;i=this.cCon;var g=this.diameter;if(o===p[0]){i.clearRect(0,0,1E3,1E3);t(this.can,{width:g,height:g});for(t(this.cCan,{width:g,height:g});b< 7 | r;){l=b<=s?1-1/s*b:l=0;k=270-360/r*b;j=k/180*Math.PI;i.fillStyle="rgba("+this.cRGB.r+","+this.cRGB.g+","+this.cRGB.b+","+l.toString()+")";switch(this.shape){case f[0]:case f[1]:c=g*0.07;e=g*0.47+Math.cos(j)*(g*0.47-c)-g*0.47;h=g*0.47+Math.sin(j)*(g*0.47-c)-g*0.47;i.beginPath();this.shape===f[1]?i.arc(g*0.5+e,g*0.5+h,c*l,0,Math.PI*2,false):i.arc(g*0.5+e,g*0.5+h,c,0,Math.PI*2,false);break;case f[2]:c=g*0.12;e=Math.cos(j)*(g*0.47-c)+g*0.5;h=Math.sin(j)*(g*0.47-c)+g*0.5;u(i,e,h,j);i.fillRect(e,h-c*0.5, 8 | c,c);break;case f[3]:case f[4]:a=g*0.3,d=a*0.27,e=Math.cos(j)*(d+(g-d)*0.13)+g*0.5,h=Math.sin(j)*(d+(g-d)*0.13)+g*0.5,u(i,e,h,j),this.shape===f[3]?i.fillRect(e,h-d*0.5,a,d):(c=d*0.55,i.moveTo(e+c,h-d*0.5),i.lineTo(e+a-c,h-d*0.5),i.quadraticCurveTo(e+a,h-d*0.5,e+a,h-d*0.5+c),i.lineTo(e+a,h-d*0.5+d-c),i.quadraticCurveTo(e+a,h-d*0.5+d,e+a-c,h-d*0.5+d),i.lineTo(e+c,h-d*0.5+d),i.quadraticCurveTo(e,h-d*0.5+d,e,h-d*0.5+d-c),i.lineTo(e,h-d*0.5+c),i.quadraticCurveTo(e,h-d*0.5,e+c,h-d*0.5))}i.closePath();i.fill(); 9 | i.restore();++b}}else{m(this.cont,{width:g,height:g});m(this.vml,{width:g,height:g});switch(this.shape){case f[0]:case f[1]:j="oval";c=140;break;case f[2]:j="roundrect";c=120;break;case f[3]:case f[4]:j="roundrect",c=300}a=d=c;e=500-d;for(h=-d*0.5;b=1;)b.removeChild(b.firstChild)}};a.redraw=function(){this.clean();this.draw()};a.reset=function(){typeof this.timer=== 11 | "number"&&(this.hide(),this.show())};a.tick=function(b){var a=this.con,f=this.diameter;b||(this.activeId+=360/this.density*this.speed);o===p[0]?(a.clearRect(0,0,f,f),u(a,f*0.5,f*0.5,this.activeId/180*Math.PI),a.drawImage(this.cCan,0,0,f,f),a.restore()):(this.activeId>=360&&(this.activeId-=360),m(this.vml,{rotation:this.activeId}))};a.show=function(){if(typeof this.timer!=="number"){var a=this;this.timer=self.setInterval(function(){a.tick()},Math.round(1E3/this.fps));m(this.cont,{display:"block"})}}; 12 | a.hide=function(){typeof this.timer==="number"&&(clearInterval(this.timer),delete this.timer,m(this.cont,{display:"none"}))};a.kill=function(){var a=this.cont;typeof this.timer==="number"&&this.hide();o===p[0]?(a.removeChild(this.can),a.removeChild(this.cCan)):a.removeChild(this.vml);for(var c in this)delete this[c]};w.CanvasLoader=k})(window); -------------------------------------------------------------------------------- /docs/assets/ac-js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var Event=YAHOO.util.Event, 4 | Dom=YAHOO.util.Dom, 5 | oACDS, oAutoComp, 6 | show = { 7 | 'private': false, 8 | 'protected': false, 9 | 'deprecated': false 10 | }, 11 | 12 | ITEM_TEMPLATE = '{host} {name}', 13 | // ITEM_TEMPLATE = '{host} {params} {name}', 14 | // ITEM_TEMPLATE = '{host} {params} {name}
{description}
', 15 | yuidoc = YAHOO.namespace('yuidoc'), 16 | propdata, 17 | initialized = false; 18 | 19 | yuidoc.init = function(altdata) { 20 | yuidoc.initUI(altdata); 21 | }; 22 | 23 | yuidoc.initUI = function(altdata) { 24 | 25 | if (initialized) { 26 | return; 27 | } 28 | 29 | propdata = ALL_YUI_PROPS || altdata; 30 | 31 | //Checkboxes are available.. 32 | var handleClick = function(e) { 33 | var id, checked = false; 34 | if (YAHOO.lang.isString(e)) { 35 | id = e; 36 | } else { 37 | var tar = Event.getTarget(e); 38 | id = tar.id; 39 | } 40 | var el = Dom.get(id); 41 | checked = el.checked; 42 | 43 | var className = id; 44 | if (checked) { 45 | show[id.replace('show_', '')] = true; 46 | Dom.addClass(document.body, className); 47 | YAHOO.util.Cookie.setSub('yuidoc', id, 'checked'); 48 | } else { 49 | show[id.replace('show_', '')] = false; 50 | Dom.removeClass(document.body, className); 51 | YAHOO.util.Cookie.setSub('yuidoc', id, ''); 52 | } 53 | }; 54 | 55 | var checkCookie = function(id) { 56 | var value = YAHOO.util.Cookie.getSub('yuidoc', id), 57 | el = Dom.get(id), checked = (value === 'checked');; 58 | 59 | el.checked = checked; 60 | return checked; 61 | }; 62 | 63 | var els = ['show_deprecated', 'show_protected', 'show_private'], 64 | reapplyHash = false; 65 | 66 | for (var i = 0; i < els.length; i++) { 67 | Event.on(els[i], 'click', handleClick); 68 | reapplyHash = checkCookie(els[i]) || reapplyHash; 69 | handleClick(els[i]); 70 | } 71 | 72 | // If we dynamically show private/protected/etc items during 73 | // load, we need to reapply anchors so that the search feature 74 | // works correctly for items that are initially hidden. 75 | if (reapplyHash) { 76 | var dl = document.location, hash = dl.hash; 77 | if (hash) { 78 | dl.hash = hash; 79 | } 80 | } 81 | 82 | }; 83 | 84 | //Starting the AutoComplete code 85 | var getResults = function(query) { 86 | var results = []; 87 | if (query && query.length > 0) { 88 | var q = query.toLowerCase(); 89 | for (var i=0, len=propdata.length; i -1 ) { 100 | results.push([query, prop]); 101 | } 102 | } 103 | } 104 | } 105 | 106 | return results; 107 | }; 108 | 109 | // Define Custom Event handlers 110 | var myOnDataReturn = function(sType, aArgs) { 111 | var oAutoComp = aArgs[0]; 112 | var query = aArgs[1]; 113 | var aResults = aArgs[2]; 114 | 115 | if(aResults.length == 0) { 116 | if (query.length > 0) { 117 | oAutoComp.setBody("
Not found
"); 118 | } 119 | } 120 | }; 121 | 122 | var myOnItemSelect = function(sType, aArgs) { 123 | var ac = aArgs[0]; 124 | var item = aArgs[2]; 125 | location.href = item[1].url; 126 | }; 127 | 128 | 129 | Event.onAvailable("searchresults", function() { 130 | 131 | // Instantiate JS Function DataSource 132 | oACDS = new YAHOO.widget.DS_JSFunction(getResults); 133 | oACDS.maxCacheEntries = 30; 134 | 135 | // Instantiate AutoComplete 136 | oAutoComp = new YAHOO.widget.AutoComplete('searchinput','searchresults', oACDS); 137 | //oAutoComp.alwaysShowContainer = true; 138 | oAutoComp.queryDelay = 0.2; 139 | oAutoComp.maxResultsDisplayed = 200; 140 | oAutoComp.minQueryLength = 0; 141 | oAutoComp.formatResult = function(oResultItem, query) { 142 | // var sMarkup = "" + oResultItem[1].host + ' ' + oResultItem[1].name + ''; 143 | // return sMarkup; 144 | // return "" + oResultItem[1].host + ' ' + oResultItem[1].name + ''; 145 | return YAHOO.lang.substitute(ITEM_TEMPLATE, oResultItem[1]); 146 | }; 147 | 148 | // Subscribe to Custom Events 149 | oAutoComp.dataReturnEvent.subscribe(myOnDataReturn); 150 | oAutoComp.itemSelectEvent.subscribe(myOnItemSelect); 151 | 152 | // Set initial content in the container 153 | oAutoComp.sendQuery(Dom.get("searchinput").value); 154 | 155 | }); 156 | 157 | var validateForm = function() { 158 | return false; 159 | }; 160 | 161 | YAHOO.util.Event.onAvailable('classTab', function() { 162 | var tabs = new YAHOO.widget.TabView('classTab'); 163 | }); 164 | 165 | /* 166 | YAHOO.util.Event.onAvailable('codeTree', function() { 167 | var tree1 = new YAHOO.widget.TreeView('codeTree'); 168 | tree1.render(); 169 | }); 170 | */ 171 | 172 | YAHOO.util.Event.onDOMReady(function() { 173 | if (typeof ALL_YUI_PROPS != "undefined") { 174 | YAHOO.yuidoc.initUI(); 175 | } 176 | }); 177 | 178 | })(); 179 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | API: (Heartcode CanvasLoader) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Heartcode CanvasLoader YUI Library

19 |

  0.9.0

20 | Heartcode CanvasLoader YUI Library 21 |
22 |
23 | Search: 24 |
25 |   26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 |
36 | Filters 37 | 38 | 39 | 40 |
41 |
42 | 43 |
44 | This is the API documentation for the 45 | Heartcode CanvasLoader YUI Library. 46 |

Choose a module name from the list for more information.

47 |
48 | 49 | 50 |
51 |
52 |
53 |
54 | 55 |
56 |

Modules

57 | 60 |
61 | 62 |
63 |

Classes

64 | 67 |
68 | 69 |
70 |

Files

71 | 74 |
75 | 76 | 77 | 78 | 79 | 80 |
81 |
82 |
83 |
84 |
85 | Copyright © 2011 Róbert Pataki. The Heartcode CanvasLoader is released under the MIT licence. For more information and other open source stuff please visit the Heartcode blog, check out my GitHub profile and follow the Heartcode tweets. 86 |
87 |
88 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /docs/assets/api.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body { background-color: #ECF0F6; } 4 | 5 | /* main page */ 6 | a:link { color: #003399; } 7 | a:visited { color: #003399;} 8 | 9 | #doc3 #hd { margin-bottom:1em; position: relative; zoom: 1; } 10 | #doc3 #hd h1 { color: #545454; font-size: 240%; padding: 0px 0 8px 100px; background: url(heartcode-logo.png) 15px 9px no-repeat; height: 85px; font-weight: bold; } 11 | #doc3 #hd h1 a { position: relative; top: 48px; } 12 | #doc3 #hd a { text-decoration: none; color: black; } 13 | #doc3 #hd h3 { 14 | background: #98AAB1; background-image: url(bg_hd.gif); color: #000; font-size: 100%; padding: 4px 10px; margin: 0 0 7px 0; 15 | border: 1px solid #98AAB1; 16 | } 17 | #ft hr { 18 | display: none; 19 | } 20 | #ft { 21 | background: #98AAB1; background-image: url(bg_hd.gif); color: #000; font-size: 100%; padding: 4px 10px; margin: 7px 0 0 0; border: 1px solid #98AAB1; 22 | } 23 | #doc3 #hd h3 A { color: #FFF; text-decoration: none; } 24 | #doc3 #hd .breadcrumbs { font-size: 85%; margin-bottom:10px;} 25 | #doc3 #hd .subtitle {position: absolute; right:1em; padding: 0px;margin:0px} 26 | 27 | #doc3 dl { margin: 2px 0; } 28 | #doc3 dd { margin-left: 20px; } 29 | #doc3 .requires dt { font-style: italic; } 30 | #doc3 .default { margin-top:6px; } 31 | #doc3 .detail .deprecated { margin-top:4px; padding:4px; background-color: #EFECCA } 32 | #doc3 .detail .deprecated strong { color:#441054; } 33 | #doc3 code, pre {font-size:85%} 34 | 35 | #doc3 #hd h1 { 36 | border: 1px solid #98AAB1; 37 | background-color: #fff; 38 | margin-bottom: .5em; 39 | 40 | } 41 | #bd { 42 | border: 1px solid #98AAB1; 43 | background-color: #fff; 44 | } 45 | 46 | .submodules dd { 47 | font-size: 93%; 48 | font-weight: italic; 49 | } 50 | 51 | 52 | #doc3 .classopts { font-size: 85%; float:right; margin:2px; padding: 2px; background-color:#ECF0F6;border: 1px solid #98AAB1;} 53 | #yui-classopts-form fieldset legend { display: none; } 54 | 55 | /* undo reset.css styles for description block formatting */ 56 | #doc3 .description dl { margin: 5px 0 10px 0; } 57 | #doc3 .description ul { padding: 10px 0 10px 28px; font-size: 90%; list-style: disc} 58 | #doc3 .description li { list-style: disc} 59 | #doc3 .description p { padding-bottom: 10px} 60 | #doc3 .description strong { font-weight: bold;} 61 | #doc3 .description em {padding: 2px; background-color: #EFECCA} 62 | #doc3 pre { padding: 10px;} 63 | 64 | #doc3 .summary { margin: 0px 10px 10px 0; padding:10px; background-color:#ECF0F6; border:1px solid #98AAB1; } 65 | #doc3 .extends {font-weight: normal; font-size: 90%} 66 | 67 | #doc3 .nav {min-height: 400px;} 68 | #doc3 .nav .module { 69 | width:100%; 70 | border-right: 1px solid #98AAB1; 71 | border-bottom: 1px solid #98AAB1; 72 | padding: 0; overflow:hidden; 73 | } 74 | #doc3 .nav .module h4 { 75 | padding: 3px 5px; 76 | border-bottom: 1px solid #98AAB1; 77 | background-image: url(bg_hd.gif); 78 | } 79 | #doc3 .nav .module h4 A { color: #000; text-decoration: none; } 80 | #doc3 .nav .module .content { padding: 2px; } 81 | #doc3 .nav .module UL.content LI { font-size: 90%; } 82 | #doc3 .nav .module UL.content A { text-decoration: none; color: black; display: block; padding: 2px 4px 2px 4px; } 83 | #doc3 .nav .module LI, 84 | #doc3 .nav .module LI A { 85 | zoom: 1; 86 | } 87 | #doc3 .nav .module LI.selected A, 88 | #doc3 .nav .module LI A:hover { 89 | background-color: #ECF0F6; 90 | zoom: 1; 91 | } 92 | 93 | #doc3 .section { margin: 0 7px 7px 0; } 94 | #doc3 .section strong { font-weight: bold;} 95 | #doc3 .section hr { border: none 0; border-top: 1px solid #ccc; } 96 | #doc3 .section h4 { font-size:110%;} 97 | #doc3 .section h3 { background: #98AAB1; background-image: url(bg_hd.gif); width: 98%; color: #000; padding: 3px; margin: 0 0 7px 0; 98 | border: 1px solid #98AAB1; 99 | 100 | } 101 | #doc3 .section h3 .top { font-size: 60%; font-weight: normal; width: 100%; font-family: verdana; padding-left: 20px; } 102 | #doc3 .section h3 .top A { color: #000; text-decoration: none; } 103 | 104 | #doc3 .section.details .content { padding: 0 0 0 10px; } 105 | #doc3 .section.details .description { padding: 10px 0 0 20px; } 106 | #doc3 .section.details .description dt { font-weight: bold; } 107 | #doc3 .section.details .description td { border:1px solid #ccc; margin:2px;padding:2px;} 108 | 109 | #doc3 .inheritance { padding:10px; background-color:#ECF0F6; border:1px solid #98AAB1; } 110 | #doc3 .inheritance h4 { font-size: 100%;} 111 | 112 | /* index page autocomplete */ 113 | /* 114 | #propertysearch {;position:absolute;margin:1em;width:35em;} 115 | #searchinput {position:absolute;width:100%;height:1.4em;} 116 | #searchresults {position:absolute;top:1.7em;width:100%;} 117 | #searchresults .yui-ac-content {position:absolute;top:4px; left:0px; width:100%;height:20em;border:1px solid #aaa;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;} 118 | #searchresults .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}: 119 | #searchresults ul {padding:5px 0;width:100%;} 120 | #searchresults li {padding:0 5px;cursor:default;white-space:nowrap;} 121 | #searchresults li.yui-ac-highlight {background:#D1C6DA;} 122 | #searchresults li em { position:absolute; width:44%; overflow:hidden; color:#654D6C;} 123 | #searchresults li span { position:relative; left:46% } 124 | */ 125 | 126 | #propertysearch { 127 | width: 25em; 128 | position: absolute; 129 | right: 5px; 130 | bottom: -4px; 131 | } 132 | #searchinput { 133 | width: 83%; 134 | height: 1.4em; 135 | } 136 | #searchresults { 137 | position: absolute; 138 | right: 25em; 139 | top: 25px; 140 | height: 0; 141 | } 142 | #searchresults .yui-ac-content { 143 | position: absolute; 144 | top: 0; 145 | left: 0; 146 | width: 25em; 147 | height: 20em; 148 | border: 1px solid #98AAB1; 149 | background: #fff; 150 | overflow: auto; 151 | overflow-x: hidden; 152 | z-index: 9050; 153 | } 154 | #searchresults li.yui-ac-highlight { 155 | background-color: #ECF0F6; 156 | } 157 | #searchresults li em { 158 | width:44%; 159 | overflow: hidden; 160 | color: #98AAB1; 161 | } 162 | 163 | .deprecated, .private, .protected { 164 | display: none; 165 | } 166 | 167 | body.show_deprecated .deprecated, 168 | body.show_private .private, 169 | body.show_protected .protected { 170 | display: block; 171 | } 172 | 173 | #splash_classList ul { 174 | margin: 1em; 175 | margin-left:2em; 176 | } 177 | #splash_classList ul li { 178 | list-style: disc outside; 179 | } 180 | 181 | 182 | /* source code view */ 183 | #srcout {min-width: 580px; } 184 | *html #srcout { width: 100%; padding-bottom:1em; overflow-x:auto } 185 | 186 | .highlight .c { color: #60a0b0; font-style: italic } /* Comment */ 187 | .highlight .err { border: 1px solid #FF0000 } /* Error */ 188 | .highlight .k { color: #007020; font-weight: bold } /* Keyword */ 189 | .highlight .o { color: #666666 } /* Operator */ 190 | .highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */ 191 | .highlight .cp { color: #007020 } /* Comment.Preproc */ 192 | .highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */ 193 | .highlight .gd { color: #A00000 } /* Generic.Deleted */ 194 | .highlight .ge { font-style: italic } /* Generic.Emph */ 195 | .highlight .gr { color: #FF0000 } /* Generic.Error */ 196 | .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ 197 | .highlight .gi { color: #00A000 } /* Generic.Inserted */ 198 | .highlight .go { color: #808080 } /* Generic.Output */ 199 | .highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ 200 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 201 | .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ 202 | .highlight .gt { color: #0040D0 } /* Generic.Traceback */ 203 | .highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */ 204 | .highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */ 205 | .highlight .kp { color: #007020 } /* Keyword.Pseudo */ 206 | .highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */ 207 | .highlight .kt { color: #007020; font-weight: bold } /* Keyword.Type */ 208 | .highlight .m { color: #40a070 } /* Literal.Number */ 209 | .highlight .s { color: #4070a0 } /* Literal.String */ 210 | .highlight .na { color: #4070a0 } /* Name.Attribute */ 211 | .highlight .nb { color: #007020 } /* Name.Builtin */ 212 | .highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */ 213 | .highlight .no { color: #60add5 } /* Name.Constant */ 214 | .highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */ 215 | .highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */ 216 | .highlight .ne { color: #007020 } /* Name.Exception */ 217 | .highlight .nf { color: #06287e } /* Name.Function */ 218 | .highlight .nl { color: #002070; font-weight: bold } /* Name.Label */ 219 | .highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ 220 | .highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */ 221 | .highlight .nv { color: #bb60d5 } /* Name.Variable */ 222 | .highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */ 223 | .highlight .mf { color: #40a070 } /* Literal.Number.Float */ 224 | .highlight .mh { color: #40a070 } /* Literal.Number.Hex */ 225 | .highlight .mi { color: #40a070 } /* Literal.Number.Integer */ 226 | .highlight .mo { color: #40a070 } /* Literal.Number.Oct */ 227 | .highlight .sb { color: #4070a0 } /* Literal.String.Backtick */ 228 | .highlight .sc { color: #4070a0 } /* Literal.String.Char */ 229 | .highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */ 230 | .highlight .s2 { color: #4070a0 } /* Literal.String.Double */ 231 | .highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */ 232 | .highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */ 233 | .highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */ 234 | .highlight .sx { color: #c65d09 } /* Literal.String.Other */ 235 | .highlight .sr { color: #235388 } /* Literal.String.Regex */ 236 | .highlight .s1 { color: #4070a0 } /* Literal.String.Single */ 237 | .highlight .ss { color: #517918 } /* Literal.String.Symbol */ 238 | .highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */ 239 | .highlight .vc { color: #bb60d5 } /* Name.Variable.Class */ 240 | .highlight .vg { color: #bb60d5 } /* Name.Variable.Global */ 241 | .highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */ 242 | .highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */ 243 | 244 | -------------------------------------------------------------------------------- /docs/module_canvasloader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | API: CanvasLoader (Heartcode CanvasLoader) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Heartcode CanvasLoader YUI Library

19 |

CanvasLoader  0.9.0

20 | Heartcode CanvasLoader YUI Library 21 | > CanvasLoader 22 | 23 | 24 |
25 |
26 | Search: 27 |
28 |   29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 |
39 | Filters 40 | 41 | 42 | 43 |
44 |
45 | 46 | 47 |

Module: CanvasLoader 48 | 49 | 50 | 51 |

52 |
53 | CanvasLoader uses the HTML5 canvas element in modern browsers and VML in IE6/7/8 to create and animate the most popular preloader shapes (oval, spiral, rectangle, square and rounded rectangle).

54 | It is important to note that CanvasLoader doesn't show up and starts rendering automatically on instantiation. To start rendering and display the loader use the show() method. 55 |
56 | 57 | 58 | 59 |
60 |
61 | 62 |

This module contains the following classes:

63 | 66 |
67 | 70 |
71 |
72 |
73 | 74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 | 82 |
83 |

Modules

84 | 87 |
88 | 89 |
90 |

Classes

91 | 94 |
95 | 96 |
97 |

Files

98 | 101 |
102 | 103 | 104 | 105 | 106 | 107 |
108 |
109 |
110 |
111 |
112 | Copyright © 2011 Róbert Pataki. The Heartcode CanvasLoader is released under the MIT licence. For more information and other open source stuff please visit the Heartcode blog, check out my GitHub profile and follow the Heartcode tweets. 113 |
114 |
115 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /docs/raw.json: -------------------------------------------------------------------------------- 1 | {"majorversion": 2, "classmap": {"CanvasLoader": {"name": "CanvasLoader", "constructors": [{"params": [{"type": "String", "name": "id", "description": " The id of the placeholder div"}, {"type": "Object", "name": "opt", "description": " Optional parameters

\r\nPossible values of optional parameters:
\r\n
    \r\n
  • id (String): The id of the CanvasLoader instance
    • \r\n
  • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
    • "}], "description": "CanvasLoader is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.

    \r\nA CanvasLoader instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.

    \r\nIf no id is passed in the constructor, the canvas objects are paced in the document directly."}], "namespace": "", "module": "CanvasLoader", "guessedname": "CanvasLoader", "methods": {"getRange": {"public": "", "return": {"type": "Number", "description": ""}, "description": "Returns the modified shape range in percent", "guessedname": "getRange", "guessedtype": "function"}, "show": {"description": "Shows the rendering of the loader animation", "public": "", "guessedname": "show", "guessedtype": "function"}, "setDensity": {"public": "", "params": [{"type": "Number", "name": "density", "description": " The default value is 40"}], "description": "Sets the number of shapes drawn on the loader canvas", "guessedname": "setDensity", "guessedtype": "function"}, "getDiameter": {"public": "", "return": {"type": "Number", "description": ""}, "description": "Returns the diameter of the loader.", "guessedname": "getDiameter", "guessedtype": "function"}, "kill": {"description": "Removes the CanvasLoader instance and all its references", "public": "", "guessedname": "kill", "guessedtype": "function"}, "tick": {"protected": "", "description": "Renders the loader animation", "guessedname": "tick", "guessedtype": "function"}, "hide": {"description": "Stops the rendering of the loader animation and hides the loader", "public": "", "guessedname": "hide", "guessedtype": "function"}, "addEl": {"return": {"type": "Object", "description": "The DOM element"}, "description": "Creates a new element with the tag and applies the passed properties on it", "protected": "", "params": [{"type": "String", "name": "tag", "description": " The tag to be created"}, {"type": "String", "name": "par", "description": " The DOM element the new element will be appended to"}, {"type": "Object", "name": "opt", "description": " Additional properties passed to the new DOM element"}], "guessedname": "addEl", "guessedtype": "function"}, "init": {"protected": "", "params": [{"type": "String", "name": "id", "description": " The id of the placeholder div, where the loader will be nested into"}, {"type": "Object", "name": "opt", "description": " Optional parameters

    \r\nPossible values of optional parameters:
    \r\n
      \r\n
    • id (String): The id of the CanvasLoader instance
      • \r\n
    • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
      • "}], "description": "Initialization method", "guessedname": "init", "guessedtype": "function"}, "setRange": {"public": "", "params": [{"type": "Number", "name": "range", "description": " The default value is 1.3"}], "description": "Sets the amount of the modified shapes in percent.
      \r\nWith this value the user can set what range of the shapes should be scaled and/or faded. The shapes that are out of this range will be scaled and/or faded with a minimum amount only.
      \r\nThis minimum amount is 0.1 which means every shape which is out of the range is scaled and/or faded to 10% of the original values.
      \r\nThe visually acceptable range value should be between 0.4 and 1.5.", "guessedname": "setRange", "guessedtype": "function"}, "getFPS": {"public": "", "return": {"type": "Number", "description": ""}, "description": "Returns the fps of the loader", "guessedname": "getFPS", "guessedtype": "function"}, "draw": {"protected": "", "description": "Draw the shapes on the canvas", "guessedname": "draw", "guessedtype": "function"}, "setAttr": {"return": {"type": "Object", "description": "The DOM element"}, "description": "Sets the attributes on the element", "protected": "", "params": [{"type": "Object", "name": "el", "description": " The DOM element to add the attributes to"}, {"type": "Object", "name": "opt", "description": " The attributes"}], "guessedname": "setAttr", "guessedtype": "function"}, "getColor": {"public": "", "return": {"type": "String", "description": ""}, "description": "Returns the loader color in a hexadecimal form", "guessedname": "getColor", "guessedtype": "function"}, "setFPS": {"public": "", "params": [{"type": "Number", "name": "fps", "description": " The default value is 24"}], "description": "Sets the rendering frequency.
      \r\nThis value tells the loader how many times to refresh and modify the canvas in 1 second.
      \r\nUsing the right combination of the setSpeed and the setFPS methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level.", "guessedname": "setFPS", "guessedtype": "function"}, "getDensity": {"public": "", "return": {"type": "Number", "description": ""}, "description": "Returns the number of shapes drawn on the loader canvas", "guessedname": "getDensity", "guessedtype": "function"}, "setCSS": {"return": {"type": "Object", "description": "The DOM element"}, "description": "Sets the css properties on the element", "protected": "", "params": [{"type": "Object", "name": "el", "description": " The DOM element to be styled"}, {"type": "Object", "name": "opt", "description": " The style properties"}], "guessedname": "setCSS", "guessedtype": "function"}, "getSpeed": {"public": "", "return": {"type": "Number", "description": ""}, "description": "Returns the speed of the loader animation", "guessedname": "getSpeed", "guessedtype": "function"}, "reset": {"protected": "", "description": "Resets the timer", "guessedname": "reset", "guessedtype": "function"}, "setDiameter": {"public": "", "params": [{"type": "Number", "name": "diameter", "description": " The default value is 40"}], "description": "Sets the diameter of the loader", "guessedname": "setDiameter", "guessedtype": "function"}, "setColor": {"public": "", "params": [{"type": "String", "name": "color", "description": " The default value is '#000000'"}], "description": "Sets hexadecimal color of the loader", "guessedname": "setColor", "guessedtype": "function"}, "transCon": {"protected": "", "params": [{"type": "Object", "name": "x", "description": " The canvas context to be transformed"}, {"type": "Number", "name": "x", "description": " x translation"}, {"type": "Number", "name": "y", "description": " y translation"}, {"type": "Number", "name": "r", "description": " Rotation radians"}], "description": "Transforms the cache canvas before drawing", "guessedname": "transCon", "guessedtype": "function"}, "getRGB": {"protected": "", "params": [{"type": "String", "name": "color", "description": " The HEX color value to be converted to RGB"}], "description": "Return the RGB values of the passed color", "guessedname": "getRGB", "guessedtype": "function"}, "setSpeed": {"public": "", "params": [{"type": "Number", "name": "speed", "description": " The default value is 2"}], "description": "Sets the speed of the loader animation.
      \r\nThis value tells the loader how many shapes to skip by each tick.
      \r\nUsing the right combination of the setFPS and the setSpeed methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level.", "guessedname": "setSpeed", "guessedtype": "function"}, "getShape": {"public": "", "return": {"type": "String", "description": ""}, "description": "Returns the type of the loader shapes", "guessedname": "getShape", "guessedtype": "function"}, "clean": {"protected": "", "description": "Cleans the canvas", "guessedname": "clean", "guessedtype": "function"}, "redraw": {"protected": "", "description": "Redraws the canvas", "guessedname": "redraw", "guessedtype": "function"}, "setShape": {"public": "", "params": [{"type": "String", "name": "shape", "description": " The default value is 'oval'"}], "description": "Sets the type of the loader shapes.
      \r\n
      The acceptable values are:\r\n
        \r\n
      • 'oval'
        • \r\n
      • 'spiral'
        • \r\n
      • 'square'
        • \r\n
      • 'rect'
        • \r\n
      • 'roundRect'
        • \r\n
      ", "guessedname": "setShape", "guessedtype": "function"}}, "file": "heartcode-canvasloader.js", "guessedtype": "function", "shortname": "CanvasLoader", "properties": {"diameter": {"description": "The diameter of the loader", "default": "40", "protected": "", "guessedname": "diameter", "guessedtype": "property", "type": "Number"}, "cont": {"protected": "", "type": "Object", "description": "The div we place the canvas object into", "guessedname": "cont", "guessedtype": "property"}, "density": {"description": "The number of shapes drawn on the loader canvas", "default": "40", "protected": "", "guessedname": "density", "guessedtype": "property", "type": "Number"}, "color": {"description": "The color of the loader shapes in HEX", "default": "\"#000000\"", "protected": "", "guessedname": "color", "guessedtype": "property", "type": "String"}, "activeId": {"protected": "", "type": "Number", "description": "The active shape id for rendering", "guessedname": "activeId", "guessedtype": "property"}, "range": {"protected": "", "type": "Number", "description": "The amount of the modified shapes in percent.", "guessedname": "range", "guessedtype": "property"}, "timer": {"protected": "", "type": "Boolean", "description": "Adds a timer for the rendering", "guessedname": "timer", "guessedtype": "property"}, "cRGB": {"protected": "", "type": "Object", "description": "The color of the loader shapes in RGB", "guessedname": "cRGB", "guessedtype": "property"}, "shape": {"description": "The type of the loader shapes", "default": "\"oval\"", "protected": "", "guessedname": "shape", "guessedtype": "property", "type": "String"}, "can": {"protected": "", "type": "Object", "description": "The div we draw the shapes into", "guessedname": "can", "guessedtype": "property"}, "fps": {"protected": "", "type": "Number", "description": "The FPS value of the loader animation rendering", "guessedname": "fps", "guessedtype": "property"}, "cCan": {"protected": "", "type": "Object", "description": "The canvas we use for caching", "guessedname": "cCan", "guessedtype": "property"}, "ready": {"protected": "", "type": "Boolean", "description": "Tells if the canvas and its context is ready", "guessedname": "ready", "guessedtype": "property"}, "cCon": {"protected": "", "type": "Object", "description": "The context of the cache canvas", "guessedname": "cCon", "guessedtype": "property"}, "speed": {"protected": "", "type": "Number", "description": "The speed of the loader animation", "guessedname": "speed", "guessedtype": "property"}, "con": {"protected": "", "type": "Object", "description": "The canvas context", "guessedname": "con", "guessedtype": "property"}}, "description": "CanvasLoader is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.

      \r\nA CanvasLoader instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.

      \r\nIf no id is passed in the constructor, the canvas objects are paced in the document directly."}}, "version": "0.9.0", "modules": {"CanvasLoader": {"description": "CanvasLoader uses the HTML5 canvas element in modern browsers and VML in IE6/7/8 to create and animate the most popular preloader shapes (oval, spiral, rectangle, square and rounded rectangle).

      \r\nIt is important to note that CanvasLoader doesn't show up and starts rendering automatically on instantiation. To start rendering and display the loader use the show() method.", "submodules": [], "classlist": ["CanvasLoader"], "filelist": ["heartcode-canvasloader.js"], "subdata": {}, "name": "CanvasLoader"}}, "filemap": {"heartcode-canvasloader.js": {"classlist": ["CanvasLoader"], "name": "heartcode-canvasloader.js", "module": "CanvasLoader"}}} -------------------------------------------------------------------------------- /js/heartcode-canvasloader.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2011 Róbert Pataki 3 | * 4 | * Permission is hereby granted, free of charge, to any person obtaining a copy 5 | * of this software and associated documentation files (the "Software"), to deal 6 | * in the Software without restriction, including without limitation the rights 7 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | * copies of the Software, and to permit persons to whom the Software is 9 | * furnished to do so, subject to the following conditions: 10 | * 11 | * The above copyright notice and this permission notice shall be included in 12 | * all copies or substantial portions of the Software. 13 | * 14 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | * THE SOFTWARE. 21 | * 22 | * ---------------------------------------------------------------------------------------- 23 | * 24 | * Check out my GitHub: http://github.com/heartcode/ 25 | * Send me an email: heartcode@robertpataki.com 26 | * Follow me on Twitter: http://twitter.com/#iHeartcode 27 | * Blog: http://heartcode.robertpataki.com 28 | */ 29 | 30 | /** 31 | * CanvasLoader uses the HTML5 canvas element in modern browsers and VML in IE6/7/8 to create and animate the most popular preloader shapes (oval, spiral, rectangle, square and rounded rectangle).

      32 | * It is important to note that CanvasLoader doesn't show up and starts rendering automatically on instantiation. To start rendering and display the loader use the show() method. 33 | * @module CanvasLoader 34 | **/ 35 | (function (window) { 36 | "use strict"; 37 | /** 38 | * CanvasLoader is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.

      39 | * A CanvasLoader instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.

      40 | * If no id is passed in the constructor, the canvas objects are paced in the document directly. 41 | * @class CanvasLoader 42 | * @constructor 43 | * @param id {String} The id of the placeholder div 44 | * @param opt {Object} Optional parameters

      45 | * Possible values of optional parameters:
      46 | *
        47 | *
      • id (String): The id of the CanvasLoader instance
        • 48 | *
      • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
        • 49 | **/ 50 | var CanvasLoader = function (id, opt) { 51 | if (typeof(opt) == "undefined") { opt = {}; } 52 | this.init(id, opt); 53 | }, p = CanvasLoader.prototype, engine, engines = ["canvas", "vml"], shapes = ["oval", "spiral", "square", "rect", "roundRect"], cRX = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/, ie8 = navigator.appVersion.indexOf("MSIE") !== -1 && parseFloat(navigator.appVersion.split("MSIE")[1]) === 8 ? true : false, canSup = !!document.createElement('canvas').getContext, safeDensity = 40, safeVML = true, 54 | /** 55 | * Creates a new element with the tag and applies the passed properties on it 56 | * @method addEl 57 | * @protected 58 | * @param tag {String} The tag to be created 59 | * @param par {String} The DOM element the new element will be appended to 60 | * @param opt {Object} Additional properties passed to the new DOM element 61 | * @return {Object} The DOM element 62 | */ 63 | addEl = function (tag, par, opt) { 64 | var el = document.createElement(tag), n; 65 | for (n in opt) { el[n] = opt[n]; } 66 | if(typeof(par) !== "undefined") { 67 | par.appendChild(el); 68 | } 69 | return el; 70 | }, 71 | /** 72 | * Sets the css properties on the element 73 | * @method setCSS 74 | * @protected 75 | * @param el {Object} The DOM element to be styled 76 | * @param opt {Object} The style properties 77 | * @return {Object} The DOM element 78 | */ 79 | setCSS = function (el, opt) { 80 | for (var n in opt) { el.style[n] = opt[n]; } 81 | return el; 82 | }, 83 | /** 84 | * Sets the attributes on the element 85 | * @method setAttr 86 | * @protected 87 | * @param el {Object} The DOM element to add the attributes to 88 | * @param opt {Object} The attributes 89 | * @return {Object} The DOM element 90 | */ 91 | setAttr = function (el, opt) { 92 | for (var n in opt) { el.setAttribute(n, opt[n]); } 93 | return el; 94 | }, 95 | /** 96 | * Transforms the cache canvas before drawing 97 | * @method transCon 98 | * @protected 99 | * @param x {Object} The canvas context to be transformed 100 | * @param x {Number} x translation 101 | * @param y {Number} y translation 102 | * @param r {Number} Rotation radians 103 | */ 104 | transCon = function(c, x, y, r) { 105 | c.save(); 106 | c.translate(x, y); 107 | c.rotate(r); 108 | c.translate(-x, -y); 109 | c.beginPath(); 110 | }; 111 | /** 112 | * Initialization method 113 | * @method init 114 | * @protected 115 | * @param id {String} The id of the placeholder div, where the loader will be nested into 116 | * @param opt {Object} Optional parameters

        117 | * Possible values of optional parameters:
        118 | *
          119 | *
        • id (String): The id of the CanvasLoader instance
          • 120 | *
        • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
          • 121 | **/ 122 | p.init = function (pId, opt) { 123 | 124 | if (typeof(opt.safeVML) === "boolean") { safeVML = opt.safeVML; } 125 | 126 | /* 127 | * Find the containing div by id 128 | * If the container element cannot be found we use the document body itself 129 | */ 130 | try { 131 | // Look for the parent element 132 | if (document.getElementById(pId) !== undefined) { 133 | this.mum = document.getElementById(pId); 134 | } else { 135 | this.mum = document.body; 136 | } 137 | } catch (error) { 138 | this.mum = document.body; 139 | } 140 | // Creates the parent div of the loader instance 141 | opt.id = typeof (opt.id) !== "undefined" ? opt.id : "canvasLoader"; 142 | this.cont = addEl("div", this.mum, {id: opt.id}); 143 | if (canSup) { 144 | // For browsers with Canvas support... 145 | engine = engines[0]; 146 | // Create the canvas element 147 | this.can = addEl("canvas", this.cont); 148 | this.con = this.can.getContext("2d"); 149 | // Create the cache canvas element 150 | this.cCan = setCSS(addEl("canvas", this.cont), { display: "none" }); 151 | this.cCon = this.cCan.getContext("2d"); 152 | } else { 153 | // For browsers without Canvas support... 154 | engine = engines[1]; 155 | // Adds the VML stylesheet 156 | if (typeof (CanvasLoader.vmlSheet) === "undefined") { 157 | document.getElementsByTagName("head")[0].appendChild(addEl("style")); 158 | CanvasLoader.vmlSheet = document.styleSheets[document.styleSheets.length - 1]; 159 | var a = ["group", "oval", "roundrect", "fill"], n; 160 | for ( var n = 0; n < a.length; ++n ) { CanvasLoader.vmlSheet.addRule(a[n], "behavior:url(#default#VML); position:absolute;"); } 161 | } 162 | this.vml = addEl("group", this.cont); 163 | } 164 | // Set the RGB color object 165 | this.setColor(this.color); 166 | // Draws the shapes on the canvas 167 | this.draw(); 168 | //Hides the preloader 169 | setCSS(this.cont, {display: "none"}); 170 | }; 171 | ///////////////////////////////////////////////////////////////////////////////////////////// 172 | // Property declarations 173 | /** 174 | * The div we place the canvas object into 175 | * @property cont 176 | * @protected 177 | * @type Object 178 | **/ 179 | p.cont = {}; 180 | /** 181 | * The div we draw the shapes into 182 | * @property can 183 | * @protected 184 | * @type Object 185 | **/ 186 | p.can = {}; 187 | /** 188 | * The canvas context 189 | * @property con 190 | * @protected 191 | * @type Object 192 | **/ 193 | p.con = {}; 194 | /** 195 | * The canvas we use for caching 196 | * @property cCan 197 | * @protected 198 | * @type Object 199 | **/ 200 | p.cCan = {}; 201 | /** 202 | * The context of the cache canvas 203 | * @property cCon 204 | * @protected 205 | * @type Object 206 | **/ 207 | p.cCon = {}; 208 | /** 209 | * Adds a timer for the rendering 210 | * @property timer 211 | * @protected 212 | * @type Boolean 213 | **/ 214 | p.timer = {}; 215 | /** 216 | * The active shape id for rendering 217 | * @property activeId 218 | * @protected 219 | * @type Number 220 | **/ 221 | p.activeId = 0; 222 | /** 223 | * The diameter of the loader 224 | * @property diameter 225 | * @protected 226 | * @type Number 227 | * @default 40 228 | **/ 229 | p.diameter = 40; 230 | /** 231 | * Sets the diameter of the loader 232 | * @method setDiameter 233 | * @public 234 | * @param diameter {Number} The default value is 40 235 | **/ 236 | p.setDiameter = function (diameter) { this.diameter = Math.round(Math.abs(diameter)); this.redraw(); }; 237 | /** 238 | * Returns the diameter of the loader. 239 | * @method getDiameter 240 | * @public 241 | * @return {Number} 242 | **/ 243 | p.getDiameter = function () { return this.diameter; }; 244 | /** 245 | * The color of the loader shapes in RGB 246 | * @property cRGB 247 | * @protected 248 | * @type Object 249 | **/ 250 | p.cRGB = {}; 251 | /** 252 | * The color of the loader shapes in HEX 253 | * @property color 254 | * @protected 255 | * @type String 256 | * @default "#000000" 257 | **/ 258 | p.color = "#000000"; 259 | /** 260 | * Sets hexadecimal color of the loader 261 | * @method setColor 262 | * @public 263 | * @param color {String} The default value is '#000000' 264 | **/ 265 | p.setColor = function (color) { this.color = cRX.test(color) ? color : "#000000"; this.cRGB = this.getRGB(this.color); this.redraw(); }; 266 | /** 267 | * Returns the loader color in a hexadecimal form 268 | * @method getColor 269 | * @public 270 | * @return {String} 271 | **/ 272 | p.getColor = function () { return this.color; }; 273 | /** 274 | * The type of the loader shapes 275 | * @property shape 276 | * @protected 277 | * @type String 278 | * @default "oval" 279 | **/ 280 | p.shape = shapes[0]; 281 | /** 282 | * Sets the type of the loader shapes.
          283 | *
          The acceptable values are: 284 | *
            285 | *
          • 'oval'
            • 286 | *
          • 'spiral'
            • 287 | *
          • 'square'
            • 288 | *
          • 'rect'
            • 289 | *
          • 'roundRect'
            • 290 | *
          291 | * @method setShape 292 | * @public 293 | * @param shape {String} The default value is 'oval' 294 | **/ 295 | p.setShape = function (shape) { 296 | var n; 297 | for (n in shapes) { 298 | if (shape === shapes[n]) { this.shape = shape; this.redraw(); break; } 299 | } 300 | }; 301 | /** 302 | * Returns the type of the loader shapes 303 | * @method getShape 304 | * @public 305 | * @return {String} 306 | **/ 307 | p.getShape = function () { return this.shape; }; 308 | /** 309 | * The number of shapes drawn on the loader canvas 310 | * @property density 311 | * @protected 312 | * @type Number 313 | * @default 40 314 | **/ 315 | p.density = 40; 316 | /** 317 | * Sets the number of shapes drawn on the loader canvas 318 | * @method setDensity 319 | * @public 320 | * @param density {Number} The default value is 40 321 | **/ 322 | p.setDensity = function (density) { 323 | if (safeVML && engine === engines[1]) { 324 | this.density = Math.round(Math.abs(density)) <= safeDensity ? Math.round(Math.abs(density)) : safeDensity; 325 | } else { 326 | this.density = Math.round(Math.abs(density)); 327 | } 328 | if (this.density > 360) { this.density = 360; } 329 | this.activeId = 0; 330 | this.redraw(); 331 | }; 332 | /** 333 | * Returns the number of shapes drawn on the loader canvas 334 | * @method getDensity 335 | * @public 336 | * @return {Number} 337 | **/ 338 | p.getDensity = function () { return this.density; }; 339 | /** 340 | * The amount of the modified shapes in percent. 341 | * @property range 342 | * @protected 343 | * @type Number 344 | **/ 345 | p.range = 1.3; 346 | /** 347 | * Sets the amount of the modified shapes in percent.
          348 | * With this value the user can set what range of the shapes should be scaled and/or faded. The shapes that are out of this range will be scaled and/or faded with a minimum amount only.
          349 | * This minimum amount is 0.1 which means every shape which is out of the range is scaled and/or faded to 10% of the original values.
          350 | * The visually acceptable range value should be between 0.4 and 1.5. 351 | * @method setRange 352 | * @public 353 | * @param range {Number} The default value is 1.3 354 | **/ 355 | p.setRange = function (range) { this.range = Math.abs(range); this.redraw(); }; 356 | /** 357 | * Returns the modified shape range in percent 358 | * @method getRange 359 | * @public 360 | * @return {Number} 361 | **/ 362 | p.getRange = function () { return this.range; }; 363 | /** 364 | * The speed of the loader animation 365 | * @property speed 366 | * @protected 367 | * @type Number 368 | **/ 369 | p.speed = 2; 370 | /** 371 | * Sets the speed of the loader animation.
          372 | * This value tells the loader how many shapes to skip by each tick.
          373 | * Using the right combination of the setFPS and the setSpeed methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level. 374 | * @method setSpeed 375 | * @public 376 | * @param speed {Number} The default value is 2 377 | **/ 378 | p.setSpeed = function (speed) { this.speed = Math.round(Math.abs(speed)); }; 379 | /** 380 | * Returns the speed of the loader animation 381 | * @method getSpeed 382 | * @public 383 | * @return {Number} 384 | **/ 385 | p.getSpeed = function () { return this.speed; }; 386 | /** 387 | * The FPS value of the loader animation rendering 388 | * @property fps 389 | * @protected 390 | * @type Number 391 | **/ 392 | p.fps = 24; 393 | /** 394 | * Sets the rendering frequency.
          395 | * This value tells the loader how many times to refresh and modify the canvas in 1 second.
          396 | * Using the right combination of the setSpeed and the setFPS methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level. 397 | * @method setFPS 398 | * @public 399 | * @param fps {Number} The default value is 24 400 | **/ 401 | p.setFPS = function (fps) { this.fps = Math.round(Math.abs(fps)); this.reset(); }; 402 | /** 403 | * Returns the fps of the loader 404 | * @method getFPS 405 | * @public 406 | * @return {Number} 407 | **/ 408 | p.getFPS = function () { return this.fps; }; 409 | // End of Property declarations 410 | ///////////////////////////////////////////////////////////////////////////////////////////// 411 | /** 412 | * Return the RGB values of the passed color 413 | * @method getRGB 414 | * @protected 415 | * @param color {String} The HEX color value to be converted to RGB 416 | */ 417 | p.getRGB = function (c) { 418 | c = c.charAt(0) === "#" ? c.substring(1, 7) : c; 419 | return {r: parseInt(c.substring(0, 2), 16), g: parseInt(c.substring(2, 4), 16), b: parseInt(c.substring(4, 6), 16) }; 420 | }; 421 | /** 422 | * Draw the shapes on the canvas 423 | * @method draw 424 | * @protected 425 | */ 426 | p.draw = function () { 427 | var i = 0, size, w, h, x, y, ang, rads, rad, de = this.density, animBits = Math.round(de * this.range), bitMod, minBitMod = 0, s, g, sh, f, d = 1000, arc = 0, c = this.cCon, di = this.diameter, e = 0.47; 428 | if (engine === engines[0]) { 429 | c.clearRect(0, 0, d, d); 430 | setAttr(this.can, {width: di, height: di}); 431 | setAttr(this.cCan, {width: di, height: di}); 432 | while (i < de) { 433 | bitMod = i <= animBits ? 1 - ((1 - minBitMod) / animBits * i) : bitMod = minBitMod; 434 | ang = 270 - 360 / de * i; 435 | rads = ang / 180 * Math.PI; 436 | c.fillStyle = "rgba(" + this.cRGB.r + "," + this.cRGB.g + "," + this.cRGB.b + "," + bitMod.toString() + ")"; 437 | switch (this.shape) { 438 | case shapes[0]: 439 | case shapes[1]: 440 | size = di * 0.07; 441 | x = di * e + Math.cos(rads) * (di * e - size) - di * e; 442 | y = di * e + Math.sin(rads) * (di * e - size) - di * e; 443 | c.beginPath(); 444 | if (this.shape === shapes[1]) { c.arc(di * 0.5 + x, di * 0.5 + y, size * bitMod, 0, Math.PI * 2, false); } else { c.arc(di * 0.5 + x, di * 0.5 + y, size, 0, Math.PI * 2, false); } 445 | break; 446 | case shapes[2]: 447 | size = di * 0.12; 448 | x = Math.cos(rads) * (di * e - size) + di * 0.5; 449 | y = Math.sin(rads) * (di * e - size) + di * 0.5; 450 | transCon(c, x, y, rads); 451 | c.fillRect(x, y - size * 0.5, size, size); 452 | break; 453 | case shapes[3]: 454 | case shapes[4]: 455 | w = di * 0.3; 456 | h = w * 0.27; 457 | x = Math.cos(rads) * (h + (di - h) * 0.13) + di * 0.5; 458 | y = Math.sin(rads) * (h + (di - h) * 0.13) + di * 0.5; 459 | transCon(c, x, y, rads); 460 | if(this.shape === shapes[3]) { 461 | c.fillRect(x, y - h * 0.5, w, h); 462 | } else { 463 | rad = h * 0.55; 464 | c.moveTo(x + rad, y - h * 0.5); 465 | c.lineTo(x + w - rad, y - h * 0.5); 466 | c.quadraticCurveTo(x + w, y - h * 0.5, x + w, y - h * 0.5 + rad); 467 | c.lineTo(x + w, y - h * 0.5 + h - rad); 468 | c.quadraticCurveTo(x + w, y - h * 0.5 + h, x + w - rad, y - h * 0.5 + h); 469 | c.lineTo(x + rad, y - h * 0.5 + h); 470 | c.quadraticCurveTo(x, y - h * 0.5 + h, x, y - h * 0.5 + h - rad); 471 | c.lineTo(x, y - h * 0.5 + rad); 472 | c.quadraticCurveTo(x, y - h * 0.5, x + rad, y - h * 0.5); 473 | } 474 | break; 475 | } 476 | c.closePath(); 477 | c.fill(); 478 | c.restore(); 479 | ++i; 480 | } 481 | } else { 482 | setCSS(this.cont, {width: di, height: di}); 483 | setCSS(this.vml, {width: di, height: di}); 484 | switch (this.shape) { 485 | case shapes[0]: 486 | case shapes[1]: 487 | sh = "oval"; 488 | size = d * 0.14; 489 | break; 490 | case shapes[2]: 491 | sh = "roundrect"; 492 | size = d * 0.12; 493 | break; 494 | case shapes[3]: 495 | case shapes[4]: 496 | sh = "roundrect"; 497 | size = d * 0.3; 498 | break; 499 | } 500 | w = h = size; 501 | x = d * 0.5 - h; 502 | y = -h * 0.5; 503 | while (i < de) { 504 | bitMod = i <= animBits ? 1 - ((1 - minBitMod) / animBits * i) : bitMod = minBitMod; 505 | ang = 270 - 360 / de * i; 506 | switch (this.shape) { 507 | case shapes[1]: 508 | w = h = size * bitMod; 509 | x = d * 0.5 - size * 0.5 - size * bitMod * 0.5; 510 | y = (size - size * bitMod) * 0.5; 511 | break; 512 | case shapes[0]: 513 | case shapes[2]: 514 | if (ie8) { 515 | y = 0; 516 | if(this.shape === shapes[2]) { 517 | x = d * 0.5 -h * 0.5; 518 | } 519 | } 520 | break; 521 | case shapes[3]: 522 | case shapes[4]: 523 | w = size * 0.95; 524 | h = w * 0.28; 525 | if (ie8) { 526 | x = 0; 527 | y = d * 0.5 - h * 0.5; 528 | } else { 529 | x = d * 0.5 - w; 530 | y = -h * 0.5; 531 | } 532 | arc = this.shape === shapes[4] ? 0.6 : 0; 533 | break; 534 | } 535 | g = setAttr(setCSS(addEl("group", this.vml), {width: d, height: d, rotation: ang}), {coordsize: d + "," + d, coordorigin: -d * 0.5 + "," + (-d * 0.5)}); 536 | s = setCSS(addEl(sh, g, {stroked: false, arcSize: arc}), { width: w, height: h, top: y, left: x}); 537 | f = addEl("fill", s, {color: this.color, opacity: bitMod}); 538 | ++i; 539 | } 540 | } 541 | this.tick(true); 542 | }; 543 | /** 544 | * Cleans the canvas 545 | * @method clean 546 | * @protected 547 | */ 548 | p.clean = function () { 549 | if (engine === engines[0]) { 550 | this.con.clearRect(0, 0, 1000, 1000); 551 | } else { 552 | var v = this.vml; 553 | if (v.hasChildNodes()) { 554 | while (v.childNodes.length >= 1) { 555 | v.removeChild(v.firstChild); 556 | } 557 | } 558 | } 559 | }; 560 | /** 561 | * Redraws the canvas 562 | * @method redraw 563 | * @protected 564 | */ 565 | p.redraw = function () { 566 | this.clean(); 567 | this.draw(); 568 | }; 569 | /** 570 | * Resets the timer 571 | * @method reset 572 | * @protected 573 | */ 574 | p.reset = function () { 575 | if (typeof (this.timer) === "number") { 576 | this.hide(); 577 | this.show(); 578 | } 579 | }; 580 | /** 581 | * Renders the loader animation 582 | * @method tick 583 | * @protected 584 | */ 585 | p.tick = function (init) { 586 | var c = this.con, di = this.diameter; 587 | if (!init) { this.activeId += 360 / this.density * this.speed; } 588 | if (engine === engines[0]) { 589 | c.clearRect(0, 0, di, di); 590 | transCon(c, di * 0.5, di * 0.5, this.activeId / 180 * Math.PI); 591 | c.drawImage(this.cCan, 0, 0, di, di); 592 | c.restore(); 593 | } else { 594 | if (this.activeId >= 360) { this.activeId -= 360; } 595 | setCSS(this.vml, {rotation:this.activeId}); 596 | } 597 | }; 598 | /** 599 | * Shows the rendering of the loader animation 600 | * @method show 601 | * @public 602 | */ 603 | p.show = function () { 604 | if (typeof (this.timer) !== "number") { 605 | var t = this; 606 | this.timer = self.setInterval(function () { t.tick(); }, Math.round(1000 / this.fps)); 607 | setCSS(this.cont, {display: "block"}); 608 | } 609 | }; 610 | /** 611 | * Stops the rendering of the loader animation and hides the loader 612 | * @method hide 613 | * @public 614 | */ 615 | p.hide = function () { 616 | if (typeof (this.timer) === "number") { 617 | clearInterval(this.timer); 618 | delete this.timer; 619 | setCSS(this.cont, {display: "none"}); 620 | } 621 | }; 622 | /** 623 | * Removes the CanvasLoader instance and all its references 624 | * @method kill 625 | * @public 626 | */ 627 | p.kill = function () { 628 | var c = this.cont; 629 | if (typeof (this.timer) === "number") { this.hide(); } 630 | if (engine === engines[0]) { 631 | c.removeChild(this.can); 632 | c.removeChild(this.cCan); 633 | } else { 634 | c.removeChild(this.vml); 635 | } 636 | var n; 637 | for (n in this) { delete this[n]; } 638 | }; 639 | window.CanvasLoader = CanvasLoader; 640 | }(window)); -------------------------------------------------------------------------------- /docs/CanvasLoader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | API: CanvasLoader CanvasLoader (Heartcode CanvasLoader) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
          17 |
          18 |

          Heartcode CanvasLoader YUI Library

          19 |

          CanvasLoader  0.9.0

          20 | Heartcode CanvasLoader YUI Library 21 | > CanvasLoader 22 | > CanvasLoader 23 | 24 |
          25 |
          26 | Search: 27 |
          28 |   29 |
          30 |
          31 |
          32 |
          33 | 34 |
          35 |
          36 |
          37 |
          38 |
          39 | Filters 40 | 41 | 42 | 43 |
          44 |
          45 | 46 |

          47 | 48 | 49 | 50 | 51 | Class CanvasLoader 52 | 53 | 54 | 55 |

          56 | 57 | 58 | 59 | 60 | 61 |
          62 | CanvasLoader is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.

          63 | A CanvasLoader instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.

          64 | If no id is passed in the constructor, the canvas objects are paced in the document directly. 65 |
          66 | 67 |
          68 |

          Constructor

          69 |
          70 |
          71 | CanvasLoader 72 | 73 | ( 74 | 75 | 76 | 77 | id 78 | 79 | , 80 | opt 81 | ) 82 | 83 |
          84 |
          85 |
          Parameters:
          86 |
          87 | id 88 | <String> 89 | 90 | The id of the placeholder div 91 |
          92 |
          93 | opt 94 | <Object> 95 | 96 | Optional parameters

          97 | Possible values of optional parameters:
          98 |
            99 |
          • id (String): The id of the CanvasLoader instance
            • 100 |
          • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
            • 101 |
          102 |
          103 | 104 | 105 |
          106 |
          107 |
          108 |
          109 | 110 |
          111 |
          112 |

          Properties

          113 |
          114 |
          115 |

          activeId 116 | - protected Number 117 |

          118 |
          119 |
          120 | The active shape id for rendering 121 |
          122 |
          123 | 124 | 125 | 126 | 127 |
          128 |
          129 |
          130 |

          can 131 | - protected Object 132 |

          133 |
          134 |
          135 | The div we draw the shapes into 136 |
          137 |
          138 | 139 | 140 | 141 | 142 |
          143 |
          144 |
          145 |

          cCan 146 | - protected Object 147 |

          148 |
          149 |
          150 | The canvas we use for caching 151 |
          152 |
          153 | 154 | 155 | 156 | 157 |
          158 |
          159 |
          160 |

          cCon 161 | - protected Object 162 |

          163 |
          164 |
          165 | The context of the cache canvas 166 |
          167 |
          168 | 169 | 170 | 171 | 172 |
          173 |
          174 |
          175 |

          color 176 | - protected String 177 |

          178 |
          179 |
          180 | The color of the loader shapes in HEX 181 |
          182 |
          183 | 184 | 185 |
          186 | Default Value: "#000000" 187 |
          188 | 189 | 190 |
          191 |
          192 |
          193 |

          con 194 | - protected Object 195 |

          196 |
          197 |
          198 | The canvas context 199 |
          200 |
          201 | 202 | 203 | 204 | 205 |
          206 |
          207 |
          208 |

          cont 209 | - protected Object 210 |

          211 |
          212 |
          213 | The div we place the canvas object into 214 |
          215 |
          216 | 217 | 218 | 219 | 220 |
          221 |
          222 |
          223 |

          cRGB 224 | - protected Object 225 |

          226 |
          227 |
          228 | The color of the loader shapes in RGB 229 |
          230 |
          231 | 232 | 233 | 234 | 235 |
          236 |
          237 |
          238 |

          density 239 | - protected Number 240 |

          241 |
          242 |
          243 | The number of shapes drawn on the loader canvas 244 |
          245 |
          246 | 247 | 248 |
          249 | Default Value: 40 250 |
          251 | 252 | 253 |
          254 |
          255 |
          256 |

          diameter 257 | - protected Number 258 |

          259 |
          260 |
          261 | The diameter of the loader 262 |
          263 |
          264 | 265 | 266 |
          267 | Default Value: 40 268 |
          269 | 270 | 271 |
          272 |
          273 |
          274 |

          fps 275 | - protected Number 276 |

          277 |
          278 |
          279 | The FPS value of the loader animation rendering 280 |
          281 |
          282 | 283 | 284 | 285 | 286 |
          287 |
          288 |
          289 |

          range 290 | - protected Number 291 |

          292 |
          293 |
          294 | The amount of the modified shapes in percent. 295 |
          296 |
          297 | 298 | 299 | 300 | 301 |
          302 |
          303 |
          304 |

          ready 305 | - protected Boolean 306 |

          307 |
          308 |
          309 | Tells if the canvas and its context is ready 310 |
          311 |
          312 | 313 | 314 | 315 | 316 |
          317 |
          318 |
          319 |

          shape 320 | - protected String 321 |

          322 |
          323 |
          324 | The type of the loader shapes 325 |
          326 |
          327 | 328 | 329 |
          330 | Default Value: "oval" 331 |
          332 | 333 | 334 |
          335 |
          336 |
          337 |

          speed 338 | - protected Number 339 |

          340 |
          341 |
          342 | The speed of the loader animation 343 |
          344 |
          345 | 346 | 347 | 348 | 349 |
          350 |
          351 |
          352 |

          timer 353 | - protected Boolean 354 |

          355 |
          356 |
          357 | Adds a timer for the rendering 358 |
          359 |
          360 | 361 | 362 | 363 | 364 |
          365 |
          366 |
          367 |
          368 | 369 |
          370 | 371 |
          372 |
          373 |

          Methods

          374 |
          375 |
          376 |

          377 | addEl

          378 |
          379 | 380 | protected 381 | 382 | 383 | Object 384 | addEl 385 | ( 386 | 387 | 388 | tag 389 | 390 | 391 | , 392 | par 393 | 394 | 395 | , 396 | opt 397 | 398 | 399 | ) 400 | 401 | 402 |
          403 | Creates a new element with the tag and applies the passed properties on it 404 |
          405 | 406 |
          407 | 408 |
          409 |
          Parameters:
          410 |
          411 | tag 412 | <String> 413 | 414 | The tag to be created 415 |
          416 |
          417 | par 418 | <String> 419 | 420 | The DOM element the new element will be appended to 421 |
          422 |
          423 | opt 424 | <Object> 425 | 426 | Additional properties passed to the new DOM element 427 |
          428 |
          429 | 430 |
          431 |
          Returns: 432 | 433 | Object 434 |
          435 |
          The DOM element
          436 |
          437 | 438 | 439 | 440 | 441 |
          442 | 443 |
          444 |
          445 |
          446 |
          447 |

          448 | clean

          449 |
          450 | 451 | protected 452 | 453 | 454 | void 455 | clean 456 | ( 457 | ) 458 | 459 | 460 |
          461 | Cleans the canvas 462 |
          463 | 464 |
          465 | 466 | 467 | 468 | 469 | 470 | 471 |
          472 | 473 |
          474 |
          475 |
          476 |
          477 |

          478 | draw

          479 |
          480 | 481 | protected 482 | 483 | 484 | void 485 | draw 486 | ( 487 | ) 488 | 489 | 490 |
          491 | Draw the shapes on the canvas 492 |
          493 | 494 |
          495 | 496 | 497 | 498 | 499 | 500 | 501 |
          502 | 503 |
          504 |
          505 |
          506 |
          507 |

          508 | getColor

          509 |
          510 | 511 | 512 | 513 | 514 | String 515 | getColor 516 | ( 517 | ) 518 | 519 | 520 |
          521 | Returns the loader color in a hexadecimal form 522 |
          523 | 524 |
          525 | 526 | 527 | 528 | 529 | 530 | 531 |
          532 | 533 |
          534 |
          535 |
          536 |
          537 |

          538 | getDensity

          539 |
          540 | 541 | 542 | 543 | 544 | Number 545 | getDensity 546 | ( 547 | ) 548 | 549 | 550 |
          551 | Returns the number of shapes drawn on the loader canvas 552 |
          553 | 554 |
          555 | 556 | 557 | 558 | 559 | 560 | 561 |
          562 | 563 |
          564 |
          565 |
          566 |
          567 |

          568 | getDiameter

          569 |
          570 | 571 | 572 | 573 | 574 | Number 575 | getDiameter 576 | ( 577 | ) 578 | 579 | 580 |
          581 | Returns the diameter of the loader. 582 |
          583 | 584 |
          585 | 586 | 587 | 588 | 589 | 590 | 591 |
          592 | 593 |
          594 |
          595 |
          596 |
          597 |

          598 | getFPS

          599 |
          600 | 601 | 602 | 603 | 604 | Number 605 | getFPS 606 | ( 607 | ) 608 | 609 | 610 |
          611 | Returns the fps of the loader 612 |
          613 | 614 |
          615 | 616 | 617 | 618 | 619 | 620 | 621 |
          622 | 623 |
          624 |
          625 |
          626 |
          627 |

          628 | getRange

          629 |
          630 | 631 | 632 | 633 | 634 | Number 635 | getRange 636 | ( 637 | ) 638 | 639 | 640 |
          641 | Returns the modified shape range in percent 642 |
          643 | 644 |
          645 | 646 | 647 | 648 | 649 | 650 | 651 |
          652 | 653 |
          654 |
          655 |
          656 |
          657 |

          658 | getRGB

          659 |
          660 | 661 | protected 662 | 663 | 664 | void 665 | getRGB 666 | ( 667 | 668 | 669 | color 670 | 671 | 672 | ) 673 | 674 | 675 |
          676 | Return the RGB values of the passed color 677 |
          678 | 679 |
          680 | 681 |
          682 |
          Parameters:
          683 |
          684 | color 685 | <String> 686 | 687 | The HEX color value to be converted to RGB 688 |
          689 |
          690 | 691 | 692 | 693 | 694 | 695 |
          696 | 697 |
          698 |
          699 |
          700 |
          701 |

          702 | getShape

          703 |
          704 | 705 | 706 | 707 | 708 | String 709 | getShape 710 | ( 711 | ) 712 | 713 | 714 |
          715 | Returns the type of the loader shapes 716 |
          717 | 718 |
          719 | 720 | 721 | 722 | 723 | 724 | 725 |
          726 | 727 |
          728 |
          729 |
          730 |
          731 |

          732 | getSpeed

          733 |
          734 | 735 | 736 | 737 | 738 | Number 739 | getSpeed 740 | ( 741 | ) 742 | 743 | 744 |
          745 | Returns the speed of the loader animation 746 |
          747 | 748 |
          749 | 750 | 751 | 752 | 753 | 754 | 755 |
          756 | 757 |
          758 |
          759 |
          760 |
          761 |

          762 | hide

          763 |
          764 | 765 | 766 | 767 | 768 | void 769 | hide 770 | ( 771 | ) 772 | 773 | 774 |
          775 | Stops the rendering of the loader animation and hides the loader 776 |
          777 | 778 |
          779 | 780 | 781 | 782 | 783 | 784 | 785 |
          786 | 787 |
          788 |
          789 |
          790 |
          791 |

          792 | init

          793 |
          794 | 795 | protected 796 | 797 | 798 | void 799 | init 800 | ( 801 | 802 | 803 | id 804 | 805 | 806 | , 807 | opt 808 | 809 | 810 | ) 811 | 812 | 813 |
          814 | Initialization method 815 |
          816 | 817 |
          818 | 819 |
          820 |
          Parameters:
          821 |
          822 | id 823 | <String> 824 | 825 | The id of the placeholder div, where the loader will be nested into 826 |
          827 |
          828 | opt 829 | <Object> 830 | 831 | Optional parameters

          832 | Possible values of optional parameters:
          833 |
            834 |
          • id (String): The id of the CanvasLoader instance
            • 835 |
          • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.
            • 836 |
          837 |
          838 | 839 | 840 | 841 | 842 | 843 |
          844 | 845 |
          846 |
          847 |
          848 |
          849 |

          850 | kill

          851 |
          852 | 853 | 854 | 855 | 856 | void 857 | kill 858 | ( 859 | ) 860 | 861 | 862 |
          863 | Removes the CanvasLoader instance and all its references 864 |
          865 | 866 |
          867 | 868 | 869 | 870 | 871 | 872 | 873 |
          874 | 875 |
          876 |
          877 |
          878 |
          879 |

          880 | redraw

          881 |
          882 | 883 | protected 884 | 885 | 886 | void 887 | redraw 888 | ( 889 | ) 890 | 891 | 892 |
          893 | Redraws the canvas 894 |
          895 | 896 |
          897 | 898 | 899 | 900 | 901 | 902 | 903 |
          904 | 905 |
          906 |
          907 |
          908 |
          909 |

          910 | reset

          911 |
          912 | 913 | protected 914 | 915 | 916 | void 917 | reset 918 | ( 919 | ) 920 | 921 | 922 |
          923 | Resets the timer 924 |
          925 | 926 |
          927 | 928 | 929 | 930 | 931 | 932 | 933 |
          934 | 935 |
          936 |
          937 |
          938 |
          939 |

          940 | setAttr

          941 |
          942 | 943 | protected 944 | 945 | 946 | Object 947 | setAttr 948 | ( 949 | 950 | 951 | el 952 | 953 | 954 | , 955 | opt 956 | 957 | 958 | ) 959 | 960 | 961 |
          962 | Sets the attributes on the element 963 |
          964 | 965 |
          966 | 967 |
          968 |
          Parameters:
          969 |
          970 | el 971 | <Object> 972 | 973 | The DOM element to add the attributes to 974 |
          975 |
          976 | opt 977 | <Object> 978 | 979 | The attributes 980 |
          981 |
          982 | 983 |
          984 |
          Returns: 985 | 986 | Object 987 |
          988 |
          The DOM element
          989 |
          990 | 991 | 992 | 993 | 994 |
          995 | 996 |
          997 |
          998 |
          999 |
          1000 |

          1001 | setColor

          1002 |
          1003 | 1004 | 1005 | 1006 | 1007 | void 1008 | setColor 1009 | ( 1010 | 1011 | 1012 | color 1013 | 1014 | 1015 | ) 1016 | 1017 | 1018 |
          1019 | Sets hexadecimal color of the loader 1020 |
          1021 | 1022 |
          1023 | 1024 |
          1025 |
          Parameters:
          1026 |
          1027 | color 1028 | <String> 1029 | 1030 | The default value is '#000000' 1031 |
          1032 |
          1033 | 1034 | 1035 | 1036 | 1037 | 1038 |
          1039 | 1040 |
          1041 |
          1042 |
          1043 |
          1044 |

          1045 | setCSS

          1046 |
          1047 | 1048 | protected 1049 | 1050 | 1051 | Object 1052 | setCSS 1053 | ( 1054 | 1055 | 1056 | el 1057 | 1058 | 1059 | , 1060 | opt 1061 | 1062 | 1063 | ) 1064 | 1065 | 1066 |
          1067 | Sets the css properties on the element 1068 |
          1069 | 1070 |
          1071 | 1072 |
          1073 |
          Parameters:
          1074 |
          1075 | el 1076 | <Object> 1077 | 1078 | The DOM element to be styled 1079 |
          1080 |
          1081 | opt 1082 | <Object> 1083 | 1084 | The style properties 1085 |
          1086 |
          1087 | 1088 |
          1089 |
          Returns: 1090 | 1091 | Object 1092 |
          1093 |
          The DOM element
          1094 |
          1095 | 1096 | 1097 | 1098 | 1099 |
          1100 | 1101 |
          1102 |
          1103 |
          1104 |
          1105 |

          1106 | setDensity

          1107 |
          1108 | 1109 | 1110 | 1111 | 1112 | void 1113 | setDensity 1114 | ( 1115 | 1116 | 1117 | density 1118 | 1119 | 1120 | ) 1121 | 1122 | 1123 |
          1124 | Sets the number of shapes drawn on the loader canvas 1125 |
          1126 | 1127 |
          1128 | 1129 |
          1130 |
          Parameters:
          1131 |
          1132 | density 1133 | <Number> 1134 | 1135 | The default value is 40 1136 |
          1137 |
          1138 | 1139 | 1140 | 1141 | 1142 | 1143 |
          1144 | 1145 |
          1146 |
          1147 |
          1148 |
          1149 |

          1150 | setDiameter

          1151 |
          1152 | 1153 | 1154 | 1155 | 1156 | void 1157 | setDiameter 1158 | ( 1159 | 1160 | 1161 | diameter 1162 | 1163 | 1164 | ) 1165 | 1166 | 1167 |
          1168 | Sets the diameter of the loader 1169 |
          1170 | 1171 |
          1172 | 1173 |
          1174 |
          Parameters:
          1175 |
          1176 | diameter 1177 | <Number> 1178 | 1179 | The default value is 40 1180 |
          1181 |
          1182 | 1183 | 1184 | 1185 | 1186 | 1187 |
          1188 | 1189 |
          1190 |
          1191 |
          1192 |
          1193 |

          1194 | setFPS

          1195 |
          1196 | 1197 | 1198 | 1199 | 1200 | void 1201 | setFPS 1202 | ( 1203 | 1204 | 1205 | fps 1206 | 1207 | 1208 | ) 1209 | 1210 | 1211 |
          1212 | Sets the rendering frequency.
          1213 | This value tells the loader how many times to refresh and modify the canvas in 1 second.
          1214 | Using the right combination of the setSpeed and the setFPS methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level. 1215 |
          1216 | 1217 |
          1218 | 1219 |
          1220 |
          Parameters:
          1221 |
          1222 | fps 1223 | <Number> 1224 | 1225 | The default value is 24 1226 |
          1227 |
          1228 | 1229 | 1230 | 1231 | 1232 | 1233 |
          1234 | 1235 |
          1236 |
          1237 |
          1238 |
          1239 |

          1240 | setRange

          1241 |
          1242 | 1243 | 1244 | 1245 | 1246 | void 1247 | setRange 1248 | ( 1249 | 1250 | 1251 | range 1252 | 1253 | 1254 | ) 1255 | 1256 | 1257 |
          1258 | Sets the amount of the modified shapes in percent.
          1259 | With this value the user can set what range of the shapes should be scaled and/or faded. The shapes that are out of this range will be scaled and/or faded with a minimum amount only.
          1260 | This minimum amount is 0.1 which means every shape which is out of the range is scaled and/or faded to 10% of the original values.
          1261 | The visually acceptable range value should be between 0.4 and 1.5. 1262 |
          1263 | 1264 |
          1265 | 1266 |
          1267 |
          Parameters:
          1268 |
          1269 | range 1270 | <Number> 1271 | 1272 | The default value is 1.3 1273 |
          1274 |
          1275 | 1276 | 1277 | 1278 | 1279 | 1280 |
          1281 | 1282 |
          1283 |
          1284 |
          1285 |
          1286 |

          1287 | setShape

          1288 |
          1289 | 1290 | 1291 | 1292 | 1293 | void 1294 | setShape 1295 | ( 1296 | 1297 | 1298 | shape 1299 | 1300 | 1301 | ) 1302 | 1303 | 1304 |
          1305 | Sets the type of the loader shapes.
          1306 |
          The acceptable values are: 1307 |
            1308 |
          • 'oval'
            • 1309 |
          • 'spiral'
            • 1310 |
          • 'square'
            • 1311 |
          • 'rect'
            • 1312 |
          • 'roundRect'
            • 1313 |
          1314 |
          1315 | 1316 |
          1317 | 1318 |
          1319 |
          Parameters:
          1320 |
          1321 | shape 1322 | <String> 1323 | 1324 | The default value is 'oval' 1325 |
          1326 |
          1327 | 1328 | 1329 | 1330 | 1331 | 1332 |
          1333 | 1334 |
          1335 |
          1336 |
          1337 |
          1338 |

          1339 | setSpeed

          1340 |
          1341 | 1342 | 1343 | 1344 | 1345 | void 1346 | setSpeed 1347 | ( 1348 | 1349 | 1350 | speed 1351 | 1352 | 1353 | ) 1354 | 1355 | 1356 |
          1357 | Sets the speed of the loader animation.
          1358 | This value tells the loader how many shapes to skip by each tick.
          1359 | Using the right combination of the setFPS and the setSpeed methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level. 1360 |
          1361 | 1362 |
          1363 | 1364 |
          1365 |
          Parameters:
          1366 |
          1367 | speed 1368 | <Number> 1369 | 1370 | The default value is 2 1371 |
          1372 |
          1373 | 1374 | 1375 | 1376 | 1377 | 1378 |
          1379 | 1380 |
          1381 |
          1382 |
          1383 |
          1384 |

          1385 | show

          1386 |
          1387 | 1388 | 1389 | 1390 | 1391 | void 1392 | show 1393 | ( 1394 | ) 1395 | 1396 | 1397 |
          1398 | Shows the rendering of the loader animation 1399 |
          1400 | 1401 |
          1402 | 1403 | 1404 | 1405 | 1406 | 1407 | 1408 |
          1409 | 1410 |
          1411 |
          1412 |
          1413 |
          1414 |

          1415 | tick

          1416 |
          1417 | 1418 | protected 1419 | 1420 | 1421 | void 1422 | tick 1423 | ( 1424 | ) 1425 | 1426 | 1427 |
          1428 | Renders the loader animation 1429 |
          1430 | 1431 |
          1432 | 1433 | 1434 | 1435 | 1436 | 1437 | 1438 |
          1439 | 1440 |
          1441 |
          1442 |
          1443 |
          1444 |

          1445 | transCon

          1446 |
          1447 | 1448 | protected 1449 | 1450 | 1451 | void 1452 | transCon 1453 | ( 1454 | 1455 | 1456 | x 1457 | 1458 | 1459 | 1460 | 1461 | , 1462 | y 1463 | 1464 | 1465 | , 1466 | r 1467 | 1468 | 1469 | ) 1470 | 1471 | 1472 |
          1473 | Transforms the cache canvas before drawing 1474 |
          1475 | 1476 |
          1477 | 1478 |
          1479 |
          Parameters:
          1480 |
          1481 | x 1482 | <Object> 1483 | 1484 | The canvas context to be transformed 1485 |
          1486 |
          1487 | x 1488 | <Number> 1489 | 1490 | x translation 1491 |
          1492 |
          1493 | y 1494 | <Number> 1495 | 1496 | y translation 1497 |
          1498 |
          1499 | r 1500 | <Number> 1501 | 1502 | Rotation radians 1503 |
          1504 |
          1505 | 1506 | 1507 | 1508 | 1509 | 1510 |
          1511 | 1512 |
          1513 |
          1514 |
          1515 |
          1516 |
          1517 | 1518 |
          1519 | 1520 |
          1521 | 1522 | 1523 |
          1524 | 1525 |
          1526 | 1527 |
          1528 | 1529 |
          1530 |
          1531 |
          1532 |
          1533 | 1534 |
          1535 |

          Modules

          1536 | 1539 |
          1540 | 1541 |
          1542 |

          Classes

          1543 | 1546 |
          1547 | 1548 |
          1549 |

          Files

          1550 | 1553 |
          1554 | 1555 |
          1556 |

          Properties

          1557 | 1575 |
          1576 | 1577 |
          1578 |

          Methods

          1579 | 1609 |
          1610 | 1611 | 1612 | 1613 |
          1614 |
          1615 |
          1616 |
          1617 |
          1618 | Copyright © 2011 Róbert Pataki. The Heartcode CanvasLoader is released under the MIT licence. For more information and other open source stuff please visit the Heartcode blog, check out my GitHub profile and follow the Heartcode tweets. 1619 |
          1620 |
          1621 | 1625 | 1626 | 1627 | --------------------------------------------------------------------------------