1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
/*
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
Available via Academic Free License >= 2.1 OR the modified BSD license.
see: http://dojotoolkit.org/license for details
*/
if(!dojo._hasResource["dojox.image.MagnifierLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.image.MagnifierLite"] = true;
dojo.provide("dojox.image.MagnifierLite");
dojo.experimental("dojox.image.MagnifierLite");
dojo.require("dijit._Widget");
dojo.declare("dojox.image.MagnifierLite", dijit._Widget,
{
// summary: Adds magnification on a portion of an image element
//
// description: An unobtrusive way to add an unstyled overlay
// above the srcNode image element. The overlay/glass is a
// scaled version of the src image (so larger images sized down
// are clearer).
//
// The logic behind requiring the src image to be large is
// "it's going to be downloaded, anyway" so this method avoids
// having to make thumbnails and 2 http requests among other things.
//
// glassSize: Int
// the width and height of the bounding box
glassSize: 125,
// scale: Decimal
// the multiplier of the Mangification.
scale: 6,
postCreate: function(){
this.inherited(arguments);
// images are hard to make into workable templates, so just add outer overlay
// and skip using dijit._Templated
this._adjustScale();
this._createGlass();
this.connect(this.domNode,"onmouseenter","_showGlass");
this.connect(this.glassNode,"onmousemove","_placeGlass");
this.connect(this.img,"onmouseout","_hideGlass");
// when position of domNode changes, _adjustScale needs to run.
// window.resize isn't it always, FIXME:
this.connect(window,"onresize","_adjustScale");
},
_createGlass: function(){
// summary: make img and glassNode elements as children of the body
var node = this.glassNode = dojo.create('div', {
style:{
height: this.glassSize + "px",
width: this.glassSize + "px"
},
className:"glassNode"
}, dojo.body());
this.surfaceNode = node.appendChild(dojo.create('div'));
this.img = dojo.place(dojo.clone(this.domNode), node);
// float the image around inside the .glassNode
dojo.style(this.img, {
position: "relative",
top: 0, left: 0,
width: this._zoomSize.w + "px",
height: this._zoomSize.h + "px"
});
},
_adjustScale: function(){
// summary: update the calculations should this.scale change
this.offset = dojo.coords(this.domNode, true);
this._imageSize = { w: this.offset.w, h:this.offset.h };
this._zoomSize = {
w: this._imageSize.w * this.scale,
h: this._imageSize.h * this.scale
};
},
_showGlass: function(e){
// summary: show the overlay
this._placeGlass(e);
dojo.style(this.glassNode, {
visibility: "visible",
display:""
});
},
_hideGlass: function(e){
// summary: hide the overlay
dojo.style(this.glassNode, {
visibility: "hidden",
display:"none"
});
},
_placeGlass: function(e){
// summary: position the overlay centered under the cursor
this._setImage(e);
var sub = Math.floor(this.glassSize / 2);
dojo.style(this.glassNode,{
top: Math.floor(e.pageY - sub) + "px",
left:Math.floor(e.pageX - sub) + "px"
});
},
_setImage: function(e){
// summary: set the image's offset in the clipping window relative to the mouse position
var xOff = (e.pageX - this.offset.l) / this.offset.w,
yOff = (e.pageY - this.offset.t) / this.offset.h,
x = (this._zoomSize.w * xOff * -1) + (this.glassSize * xOff),
y = (this._zoomSize.h * yOff * -1) + (this.glassSize * yOff);
dojo.style(this.img, {
top: y + "px",
left: x + "px"
});
},
destroy: function(finalize){
dojo.destroy(this.glassNode);
this.inherited(arguments);
}
});
}
|
