summaryrefslogtreecommitdiff
path: root/public/javascripts/hoverpng.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/javascripts/hoverpng.js')
-rw-r--r--public/javascripts/hoverpng.js120
1 files changed, 120 insertions, 0 deletions
diff --git a/public/javascripts/hoverpng.js b/public/javascripts/hoverpng.js
new file mode 100644
index 0000000..de7cdd5
--- /dev/null
+++ b/public/javascripts/hoverpng.js
@@ -0,0 +1,120 @@
+/*
+ * Hover PNG by OKFocus - http://okfoc.us - @okfocus
+ * Version 1.0
+ * Licensed under MIT.
+ *
+ */
+
+(function($){
+
+ $.hoverpng = function(el, options){
+ var base = this;
+ base.$el = $(el);
+ base.el = el;
+ base.$el.data("hoverpng", base);
+
+ var active = true, hovering = false;
+ var canvas, imageData = null;
+
+ base.init = function(){
+ base.options = $.extend({}, $.hoverpng.options, options);
+ base.options.threshold = Math.floor( base.options.threshold *= 254 );
+ base.build();
+ };
+
+ base.build = function(){
+ $(window).bind({
+ 'blur': function(){ hovering = false; }
+ });
+ base.$el.bind({
+ 'load': base.fetch,
+ 'mouseover': base.mouseover,
+ 'mouseout': base.mouseout,
+ 'mousemove': base.mousemove
+ });
+ if (base.el.complete) {
+ base.fetch();
+ }
+ };
+
+ base.fetch = function(){
+ canvas = document.createElement("canvas");
+ canvas.width = base.el.naturalWidth;
+ canvas.height = base.el.naturalHeight;
+ var ctx = canvas.getContext('2d');
+ ctx.drawImage(base.el, 0, 0);
+ imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height ).data;
+ }
+
+ base.clamp = function (x, min, max) {
+ return Math.max(min, Math.min(max, x));
+ };
+
+ base.mouseover = function(e) {
+ if ( base.detect(e) ) {
+ hovering = true;
+ base.options.mouseover(e);
+ }
+ }
+ base.mouseout = function(e) {
+ if ( hovering ) {
+ base.options.mouseout(e);
+ }
+ hovering = false;
+ }
+ base.mousemove = function(e) {
+ if ( base.detect(e) ) {
+ if ( hovering ) {
+xxx = e;
+ base.options.mousemove(e);
+ }
+ else {
+ base.options.mouseover(e);
+ }
+ hovering = true;
+ }
+ else if ( hovering ) {
+ base.options.mouseout(e);
+ hovering = false;
+ }
+ }
+ base.detect = function (e){
+ if (! imageData) {
+ return false;
+ }
+ var offset = base.$el.offset();
+ var x = e.pageX - offset.left;
+ var y = e.pageY - offset.top;
+ var pixelOffset = (canvas.width * y + x) * 4;
+ var alpha = imageData[ pixelOffset + 3 ];
+ e.rgba = [
+ imageData[(canvas.width * y + x) * 4 ],
+ imageData[(canvas.width * y + x) * 4 + 1 ],
+ imageData[(canvas.width * y + x) * 4 + 2 ],
+ imageData[(canvas.width * y + x) * 4 + 3 ]
+ ];
+ e.alpha = alpha;
+ return alpha > base.options.threshold;
+ }
+
+ base.init();
+ };
+
+ $.hoverpng.options = {
+ mouseover: function(){},
+ mousemove: function(){},
+ mouseout: function(){},
+ threshold: 0
+ };
+
+ $.fn.hoverpng = function(options){
+ return this.each(function(){
+ (new $.hoverpng(this, options));
+ });
+ };
+
+ function detectMobile () {
+ return navigator.userAgent.indexOf("Mobile") !== -1 || navigator.userAgent.indexOf("Android") !== -1;
+ }
+})(jQuery);
+