*/\r
(function($) {\r
\r
+var counter = 0;\r
+\r
$.widget("ui.magnifier", {\r
init: function() {\r
-\r
- var self = this, o = this.options;\r
- this.items = [];\r
+ var self = this,\r
+ o = this.options;\r
+ \r
this.element.addClass("ui-magnifier");\r
- if(!(/^(r|a)/).test(this.element.css("position"))) this.element.css("position", "relative");\r
+ if (!(/^(r|a)/).test(this.element.css("position"))) {\r
+ this.element.css("position", "relative");\r
+ }\r
\r
this.pp = this.element.offset();\r
\r
- $(o.items, this.element).each(function() {\r
-\r
+ this.items = [];\r
+ this.element.find(o.items).each(function() {\r
+ var $this = $(this);\r
+ // TODO: use a hash so references to this data is readable\r
self.items.push([\r
this,\r
- $(this).offset(),\r
- [$(this).width(),$(this).height()],\r
- (o.overlap ? $(this).position() : null)\r
+ $this.offset(),\r
+ [$this.width(),$this.height()],\r
+ (o.overlap ? $this.position() : null)\r
]);\r
-\r
- if(o.opacity)\r
- $(this).css('opacity', o.opacity.min);\r
-\r
+ \r
+ (o.opacity && $this.css('opacity', o.opacity.min));\r
});\r
- \r
- if(o.overlap) {\r
- for(var i=0;i<this.items.length;i++) {\r
+ \r
+ if (o.overlap) {\r
+ for (var i=0; i<this.items.length; i++) {\r
//Absolutize\r
$(this.items[i][0]).css({\r
position: "absolute",\r
top: this.items[i][3].top,\r
left: this.items[i][3].left\r
});\r
- };\r
+ }\r
}\r
\r
- this.identifier = ++$.ui.magnifier.counter;\r
+ this.identifier = ++counter;\r
$(document).bind("mousemove.magnifier"+this.identifier, function(e) {\r
- if(!self.disabled) self.magnify.apply(self, [e]);\r
+ (self.disabled || self.magnify.apply(self, [e]));\r
});\r
\r
- if(o.click) {\r
+ if (o.click) {\r
this.element.bind('click.magnifier', function(e) {\r
- if(!self.disabled) o.click.apply(this, [e, { options: self.options, current: self.current[0], currentOffset: self.current[1] }]);\r
+ if (!self.disabled) {\r
+ o.click.apply(this, [e, {\r
+ options: self.options,\r
+ current: self.current[0],\r
+ currentOffset: self.current[1]\r
+ }]);\r
+ }\r
});\r
}\r
-\r
},\r
\r
- \r
destroy: function() {\r
this.reset();\r
this.element\r
- .removeClass("ui-magnifier")\r
- .removeClass("ui-magnifier-disabled")\r
+ .removeClass("ui-magnifier ui-magnifier-disabled")\r
.unbind(".magnifier");\r
$(document).unbind("mousemove.magnifier"+this.identifier);\r
},\r
+ \r
disable: function() {\r
this.reset();\r
- this.element.addClass("ui-magnifier-disabled");\r
- this.options.disabled = true;\r
+ $.widget.prototype.disable.apply(this, arguments);\r
},\r
+ \r
reset: function(e) {\r
+ var o = this.options, c;\r
\r
- var o = this.options, c, distance = 1;\r
- \r
- for(var i=0; i < this.items.length; i++) {\r
-\r
+ for (var i=0; i < this.items.length; i++) {\r
c = this.items[i];\r
\r
$(c[0]).css({\r
left: (c[3] ? c[3].left : 0)\r
});\r
\r
- if(o.opacity)\r
- $(c[0]).css('opacity', o.opacity.min);\r
- \r
- if(o.zIndex)\r
- $(c[0]).css("z-index", "");\r
- \r
+ (o.opacity && $(c[0]).css('opacity', o.opacity.min));\r
+ (o.zIndex && $(c[0]).css("z-index", ""));\r
}\r
-\r
},\r
+ \r
magnify: function(e) {\r
- \r
var p = [e.pageX,e.pageY], o = this.options, c, distance = 1;\r
this.current = this.items[0];\r
-\r
+ \r
//Compute the parents distance, because we don't need to fire anything if we are not near the parent\r
var overlap = ((p[0] > this.pp.left-o.distance && p[0] < this.pp.left + this.element[0].offsetWidth + o.distance) && (p[1] > this.pp.top-o.distance && p[1] < this.pp.top + this.element[0].offsetHeight + o.distance));\r
- if(!overlap) return false;\r
- \r
- for(var i=0;i<this.items.length;i++) {\r
- \r
+ if (!overlap) { return false; }\r
+ \r
+ for (var i=0; i<this.items.length; i++) {\r
c = this.items[i];\r
\r
var olddistance = distance;\r
} \r
}\r
\r
- if(distance < o.distance) {\r
-\r
+ if (distance < o.distance) {\r
this.current = distance < olddistance ? this.items[i] : this.current;\r
\r
- if(!o.axis || o.axis != "y") {\r
+ if (!o.axis || o.axis != "y") {\r
$(c[0]).css({\r
width: c[2][0]+ (c[2][0] * (o.magnification-1)) - (((distance/o.distance)*c[2][0]) * (o.magnification-1)),\r
left: (c[3] ? (c[3].left + o.verticalLine * ((c[2][1] * (o.magnification-1)) - (((distance/o.distance)*c[2][1]) * (o.magnification-1)))) : 0)\r
});\r
}\r
\r
- if(!o.axis || o.axis != "x") {\r
+ if (!o.axis || o.axis != "x") {\r
$(c[0]).css({\r
height: c[2][1]+ (c[2][1] * (o.magnification-1)) - (((distance/o.distance)*c[2][1]) * (o.magnification-1)),\r
top: (c[3] ? c[3].top : 0) + (o.baseline-0.5) * ((c[2][0] * (o.magnification-1)) - (((distance/o.distance)*c[2][0]) * (o.magnification-1)))\r
}); \r
}\r
\r
- if(o.opacity)\r
+ if (o.opacity) {\r
$(c[0]).css('opacity', o.opacity.max-(distance/o.distance) < o.opacity.min ? o.opacity.min : o.opacity.max-(distance/o.distance));\r
- \r
+ }\r
} else {\r
- \r
$(c[0]).css({\r
width: c[2][0],\r
height: c[2][1],\r
left: (c[3] ? c[3].left : 0)\r
});\r
\r
- if(o.opacity)\r
- $(c[0]).css('opacity', o.opacity.min);\r
- \r
+ (o.opacity && $(c[0]).css('opacity', o.opacity.min));\r
}\r
\r
- if(o.zIndex)\r
- $(c[0]).css("z-index", "");\r
-\r
+ (o.zIndex && $(c[0]).css("z-index", ""));\r
}\r
\r
- if(this.options.zIndex)\r
- $(this.current[0]).css("z-index", this.options.zIndex);\r
- \r
+ (this.options.zIndex &&\r
+ $(this.current[0]).css("z-index", this.options.zIndex));\r
} \r
- \r
- \r
});\r
\r
$.extend($.ui.magnifier, {\r
- counter: 0,\r
defaults: {\r
distance: 150,\r
magnification: 2,\r
baseline: 0,\r
verticalLine: -0.5,\r
items: "> *"\r
- } \r
+ }\r
});\r
\r
})(jQuery);\r