3 //If the UI scope is not availalable, add it
\r
6 //Make nodes selectable by expression
\r
7 $.extend($.expr[':'], { magnifier: "(' '+a.className+' ').indexOf(' ui-magnifier ')" });
\r
9 //Macros for external methods that support chaining
\r
10 var methods = "destroy,enable,disable,reset".split(",");
\r
11 for(var i=0;i<methods.length;i++) {
\r
12 var cur = methods[i], f;
\r
13 eval('f = function() { var a = arguments; return this.each(function() { if(jQuery(this).is(".ui-magnifier")) jQuery.data(this, "ui-magnifier")["'+cur+'"](a); }); }');
\r
14 $.fn["magnifier"+cur.substr(0,1).toUpperCase()+cur.substr(1)] = f;
\r
17 //get instance method
\r
18 $.fn.magnifierInstance = function() {
\r
19 if($(this[0]).is(".ui-magnifier")) return $.data(this[0], "ui-magnifier");
\r
23 $.fn.magnifier = function(options) {
\r
24 return this.each(function() {
\r
25 new $.ui.magnifier(this,options);
\r
29 $.ui.magnifier = function(el,options) {
\r
31 var self = this; this.items = []; this.element = el;
\r
32 this.options = options || {}; var o = this.options;
\r
33 $.data(el, "ui-magnifier", this);
\r
34 $(el).addClass("ui-magnifier");
\r
36 o.distance = o.distance || 150;
\r
37 o.magnification = o.magnification || 2;
\r
38 o.baseline = o.baseline || 0;
\r
39 o.verticalLine = o.verticalLine != undefined ? o.verticalLine : -0.5;
\r
41 this.pp = $(el).offset({ border: false });
\r
43 $('> *', el).each(function() {
\r
44 var co = $(this).offset({ border: false });
\r
45 if(self.options.overlap) var cp = $(this).position();
\r
46 self.items.push([this, co, [$(this).width(),$(this).height()], (cp || null)]);
\r
49 $(this).css('opacity', o.opacity.min);
\r
53 for(var i=0;i<this.items.length;i++) {
\r
55 $(this.items[i][0]).css({
\r
56 position: "absolute",
\r
57 top: this.items[i][3].top,
\r
58 left: this.items[i][3].left
\r
63 this.moveEvent = function(e) { if(!self.disabled) self.magnify.apply(self, [e]); }
\r
64 $(document).bind("mousemove", this.moveEvent);
\r
66 if(o.click) { //If onclick callback is available
\r
68 this.clickEvent = function(e) { if(!self.disabled) o.click.apply(this, [e, { options: self.options, current: self.current[0], currentOffset: self.current[1] }]); }
\r
69 $(el).bind('click', this.clickEvent);
\r
74 $.extend($.ui.magnifier.prototype, {
\r
75 destroy: function() {
\r
76 $(this.element).removeClass("ui-magnifier").removeClass("ui-magnifier-disabled");
\r
77 $(document).unbind("mousemove", this.moveEvent);
\r
78 if(this.clickEvent) $(this.element).unbind("click", this.clickEvent);
\r
80 enable: function() {
\r
81 $(this.element).removeClass("ui-magnifier-disabled");
\r
82 this.disabled = false;
\r
84 disable: function() {
\r
85 $(this.element).addClass("ui-magnifier-disabled");
\r
87 this.disabled = true;
\r
89 reset: function(e) {
\r
91 var o = this.options;
\r
95 for(var i=0;i<this.items.length;i++) {
\r
102 top: (c[3] ? c[3].top : 0),
\r
103 left: (c[3] ? c[3].left : 0)
\r
107 $(c[0]).css('opacity', o.opacity.min);
\r
110 $(c[0]).css("z-index", "");
\r
115 magnify: function(e) {
\r
116 var p = [e.pageX,e.pageY];
\r
117 var o = this.options;
\r
119 this.current = this.items[0];
\r
122 //Compute the parents distance, because we don't need to fire anything if we are not near the parent
\r
124 var overlap = ((p[0] > this.pp.left-o.distance && p[0] < this.pp.left + this.element.offsetWidth + o.distance) && (p[1] > this.pp.top-o.distance && p[1] < this.pp.top + this.element.offsetHeight + o.distance));
\r
125 if(!overlap) return false;
\r
128 for(var i=0;i<this.items.length;i++) {
\r
131 var olddistance = distance;
\r
133 distance = Math.sqrt(
\r
134 Math.pow(p[0] - ((c[3] ? this.pp.left : c[1].left) + parseInt(c[0].style.left)) - (c[0].offsetWidth/2), 2)
\r
135 + Math.pow(p[1] - ((c[3] ? this.pp.top : c[1].top ) + parseInt(c[0].style.top )) - (c[0].offsetHeight/2), 2)
\r
138 if(o.axis == "y") {
\r
139 distance = Math.abs(p[1] - ((c[3] ? this.pp.top : c[1].top ) + parseInt(c[0].style.top )) - (c[0].offsetHeight/2));
\r
141 distance = Math.abs(p[0] - ((c[3] ? this.pp.left : c[1].left) + parseInt(c[0].style.left)) - (c[0].offsetWidth/2));
\r
145 if(distance < o.distance) {
\r
147 this.current = distance < olddistance ? this.items[i] : this.current;
\r
149 if(!o.axis || o.axis != "y") {
\r
151 width: c[2][0]+ (c[2][0] * (o.magnification-1)) - (((distance/o.distance)*c[2][0]) * (o.magnification-1)),
\r
152 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
156 if(!o.axis || o.axis != "x") {
\r
158 height: c[2][1]+ (c[2][1] * (o.magnification-1)) - (((distance/o.distance)*c[2][1]) * (o.magnification-1)),
\r
159 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
164 $(c[0]).css('opacity', o.opacity.max-(distance/o.distance) < o.opacity.min ? o.opacity.min : o.opacity.max-(distance/o.distance));
\r
171 top: (c[3] ? c[3].top : 0),
\r
172 left: (c[3] ? c[3].left : 0)
\r
176 $(c[0]).css('opacity', o.opacity.min);
\r
181 $(c[0]).css("z-index", "");
\r
185 if(this.options.zIndex)
\r
186 $(this.current[0]).css("z-index", this.options.zIndex);
\r