├── .gitignore ├── README.markdown ├── bower.json ├── docs ├── CanvasLoader.html ├── assets │ ├── ac-js │ ├── api-js │ ├── api.css │ ├── bg_hd.gif │ ├── heartcode-logo.png │ ├── reset-fonts-grids-min.css │ └── yui.png ├── classmap.js ├── heartcode-canvasloader.js.html ├── index.html ├── index.json ├── module_canvasloader.html └── raw.json ├── heartcode-canvasloader.html └── js ├── heartcode-canvasloader-min.js └── heartcode-canvasloader.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Heartcode CanvasLoader 2 | Heartcode CanvasLoader is a JavaScript UI library, which uses the HTML canvas element to draw and animate circular preloaders.
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. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CanvasLoader", 3 | "version": "0.9.1", 4 | "homepage": "https://github.com/heartcode/CanvasLoader", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/heartcode/CanvasLoader.git" 8 | }, 9 | "authors": [ 10 | "Róbert Pataki" 11 | ], 12 | "description": "Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML canvas element to draw and animate circular preloaders. The library is currently in beta, some minor changes and improvements might be done to it in the near future.", 13 | "main": "js/heartcode-canvasloader.js", 14 | "moduleType": [ 15 | "globals" 16 | ], 17 | "keywords": [ 18 | "loader", 19 | "spinner", 20 | "canvas", 21 | "animation" 22 | ], 23 | "license": "MIT" 24 | } 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/assets/bg_hd.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartcode/CanvasLoader/8c1e010cde4cf630254e42d415af06e449fca21e/docs/assets/bg_hd.gif -------------------------------------------------------------------------------- /docs/assets/heartcode-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartcode/CanvasLoader/8c1e010cde4cf630254e42d415af06e449fca21e/docs/assets/heartcode-logo.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /docs/assets/yui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heartcode/CanvasLoader/8c1e010cde4cf630254e42d415af06e449fca21e/docs/assets/yui.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 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/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/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