traceit
traceit is a jQuery plugin based on raphael.js that allows you dynamically trace page elements. It was written using jQuery prototypal inheritance plugin boilerplate Authors: Alex Sexton & Scott Gonzalez.
traceit adds a dynamic trace to any element on a page; configure its stroke width, animation speed, stroke/fill color and opacity as well as onHide, onClick and onEndTrace callback functions.
v 1.0 Trace size does not adapt to contents.
Plays nicely with Backbone.js and RequireJS
Examples
Now available as Angularjs directive
Usage:
//Initialize a trace instance with: $('#elem').trace(); //you can later refer to it by doing: var inst = $('#elem').data('trace'); inst.myMethod(); //or call $("#elem").trigger("myEvent");What can I configure? All options are optional. Here are the default options. You can overwrite each and every one of them. The trace constructor accepts the following traceOpt options object.
$('#example2').trace({ traceOpt: { traceCanvasPadding: 10, redrawSpeed: 3500, traceDivPref: "_wrap", traceCursor: 'pointer', traceOpt: { 'stroke': 'yellow', 'stroke-width': 5, 'stroke-opacity': 1, 'fill': 'none', 'fill-opacity': 0, 'zindex': 9999 }, isVisible: true, // will position relative to the document by default useRelativePositioning: false, onHide: function () { console.log("onHide callback was invoked.") }, onEndTrace: function () { console.log("onEndTrace callback was invoked.") }, onClick: function (me) { me.options.shape.animate({ opacity: 0 }, 1000, function () { me.hideTrace(); }); } } );Methods and Events
Methods are actions taken on trace instances. Methods can be called directly or by triggering the following events: hide.trace, show.trace, adjust.trace.
//to hide the trace shape do: $("#elem").trigger("hide.trace"); //or call hideTrace method directly: ints.hideTrace(); //to show previously initialized trace shape do: $("#elem").trigger("show.trace"); //or call showTrace method directly: inst.showTrace(); //to replay trace animation do: $("#elem").trigger({ type: 'adjust.trace', adjustments: adjustments_object }); //or call reTrace(opt) method directly: inst.reTrace(adjustments_object);To call the onClick callback function do:
$("#elem").trigger("click.trace"); //or inst.click();We can delete trace instance by triggering "delete.trace" event.
$("#elem").trigger("delete.trace");Callbacks
Can I have callbacks? Sure.
$('#elem').trace({ onClick: function () { console.log('triggered when user clicks on a trace shape.'); }, onHide: function () { console.log('triggered when hide animation completes.'); }, onEndTrace: function () { console.log("triggered when trace animation completes."); }, }); Author
Yuna Portnoy / valleybazaar.org
Licence
Do what you like, give credit when you can.
