From 71394365c8a3a6efe196684bf199785676d5a815 Mon Sep 17 00:00:00 2001 From: zensations Date: Thu, 5 Apr 2012 13:45:35 +0200 Subject: [PATCH] Modified heartcode-canvasloader.js to accept not only id's, but also document-elements. Added jquery.heardcode-canvasloader.js, a jquery plugin to add canvasloader to arbitrary elements. --- js/heartcode-canvasloader.js | 33 ++++----- js/jquery.heartcode-canvasloader.js | 105 ++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+), 16 deletions(-) create mode 100644 js/jquery.heartcode-canvasloader.js diff --git a/js/heartcode-canvasloader.js b/js/heartcode-canvasloader.js index cf1c361..4bcd689 100644 --- a/js/heartcode-canvasloader.js +++ b/js/heartcode-canvasloader.js @@ -1,16 +1,16 @@ /* * 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 @@ -18,9 +18,9 @@ * 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 @@ *
  • 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.
    • **/ 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"}); } diff --git a/js/jquery.heartcode-canvasloader.js b/js/jquery.heartcode-canvasloader.js new file mode 100644 index 0000000..3187e82 --- /dev/null +++ b/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)); +