jQuery Plugin

js/heartcode-canvasloader.js

@@ -1,26 +1,26 @@
 /*
 * Copyright (c) 2011 Róbert Pataki
-* 
+*
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
-* 
+*
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
-* 
+*
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
-* 
+*
 * ----------------------------------------------------------------------------------------
-* 
+*
 * Check out my GitHub:	http://github.com/heartcode/
 * Send me an email:		heartcode@robertpataki.com
 * Follow me on Twitter:	http://twitter.com/#iHeartcode
@@ -108,7 +108,7 @@
 			c.translate(-x, -y);
 			c.beginPath();
 		};
-	/** 
+	/**
 	* Initialization method
 	* @method init
 	* @protected
@@ -120,16 +120,18 @@
 	* <li><strong>safeVML (Boolean):</strong> 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.</li>
 	**/
 	p.init = function (pId, opt) {
-		
+
 		if (typeof(opt.safeVML) === "boolean") { safeVML = opt.safeVML; }
-		
+
 		/*
 		* Find the containing div by id
 		* If the container element cannot be found we use the document body itself
 		*/
 		try {
 			// Look for the parent element
-			if (document.getElementById(pId) !== undefined) {
+      if (typeof pId === 'object') {
+        this.mum = pId;
+      } else if (document.getElementById(pId) !== undefined) {
 				this.mum = document.getElementById(pId);
 			} else {
 				this.mum = document.body;
@@ -138,8 +140,7 @@
 			this.mum = document.body;
 		}
 		// Creates the parent div of the loader instance
-		opt.id = typeof (opt.id) !== "undefined" ? opt.id : "canvasLoader";
-		this.cont = addEl("div", this.mum, {id: opt.id});
+		this.cont = addEl("div", this.mum);
 		if (canSup) {
 		// For browsers with Canvas support...
 			engine = engines[0];
@@ -319,7 +320,7 @@
 	* @public
 	* @param density {Number} The default value is 40
 	**/
-	p.setDensity = function (density) { 
+	p.setDensity = function (density) {
 		if (safeVML && engine === engines[1]) {
 			this.density = Math.round(Math.abs(density)) <= safeDensity ? Math.round(Math.abs(density)) : safeDensity;
 		} else {
@@ -407,7 +408,7 @@
 	**/
 	p.getFPS = function () { return this.fps; };
 // End of Property declarations
-/////////////////////////////////////////////////////////////////////////////////////////////	
+/////////////////////////////////////////////////////////////////////////////////////////////
 	/**
 	* Return the RGB values of the passed color
 	* @method getRGB
@@ -499,7 +500,7 @@
 			}
 			w = h = size;
 			x = d * 0.5 - h;
-			y = -h * 0.5;		
+			y = -h * 0.5;
 			while (i < de) {
 				bitMod = i <= animBits ? 1 - ((1 - minBitMod) / animBits * i) : bitMod = minBitMod;
 				ang = 270 - 360 / de * i;
@@ -529,7 +530,7 @@
 						x = d * 0.5 - w;
 						y = -h * 0.5;
 					}
-					arc = this.shape === shapes[4] ? 0.6 : 0; 
+					arc = this.shape === shapes[4] ? 0.6 : 0;
 					break;
 				}
 				g = setAttr(setCSS(addEl("group", this.vml), {width: d, height: d, rotation: ang}), {coordsize: d + "," + d, coordorigin: -d * 0.5 + "," + (-d * 0.5)});
@@ -614,7 +615,7 @@
 	*/
 	p.hide = function () {
 		if (typeof (this.timer) === "number") {
-			clearInterval(this.timer);			
+			clearInterval(this.timer);
 			delete this.timer;
 			setCSS(this.cont, {display: "none"});
 		}

js/jquery.heartcode-canvasloader.js

@@ -0,0 +1,105 @@
+/**
+* Copyright (c) 2012 Zensations
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+* THE SOFTWARE.
+*/
+
+/**
+ * Simple jquery module to apply heartcode canvas loader to arbitrary elements
+ * and style them with css font-styling properties.
+ */
+(function($) {
+  $.fn.canvasLoader = function(config) {
+    $.each(this, function(index, item){
+      config = $.extend({
+        'shape': 'spiral',
+        'color': '#000000',
+        'diameter': 16,
+        'density': 40,
+        'range': 1.3,
+        'fps': 24,
+        'speed': 2
+      }, config);
+      // shape is defined by font-family
+      var shapes = ['oval', 'rect', 'roundRect', 'spiral', 'square'];
+      var shape = $(item).css('font-family');
+      if ($.inArray(shape, shapes)) {
+        config.shape = shape;
+      }
+
+      // color maps to ... color!
+      config.color = rgb2hex($(item).css('color'));
+
+      // get min of height and width and apply it to diameter
+      var size = parseInt($(item).css('font-size'));
+      if (size > 0) {
+        config.diameter = size;
+      }
+
+      // letter-spacing is turned into density
+      var density = parseInt($(item).css('letter-spacing'));
+      if (density > 0) {
+        config.density = density;
+      }
+
+      // text-indent maps to range
+      var range = parseFloat($(item).css('text-indent'));
+      if (range > 0) {
+        config.range = range;
+      }
+
+      // word spacing equals the frames per second
+      var fps = parseInt($(item).css('word-spacing'))
+      if (fps > 0) {
+        config.fps = fps;
+      }
+
+      // speed is determined by font weight
+      var speed = parseInt($(item).css('font-weight'));
+      if (speed > 0) {
+        config.speed = speed;
+      }
+
+      if (!item.canvasLoader) {
+        item.canvasLoader = new CanvasLoader(item);
+      }
+
+      item.canvasLoader.setColor(config.color);
+      item.canvasLoader.setShape(config.shape);
+      item.canvasLoader.setDiameter(config.diameter);
+      item.canvasLoader.setDensity(config.density);
+      item.canvasLoader.setRange(config.range);
+      item.canvasLoader.setSpeed(config.speed);
+      item.canvasLoader.setFPS(config.fps);
+      item.canvasLoader.show();
+    });
+  };
+
+  function rgb2hex(rgb){
+    if (rgb.substr(0, 1) === '#') {
+        return rgb;
+    }
+    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    return "#" +
+      ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+      ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
+      ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
+  }
+}(jQuery));
+