source: main/trunk/greenstone3/web/interfaces/oran/js/documentbasket/zoomer.jquery.js@ 24510

Last change on this file since 24510 was 24510, checked in by sjm84, 13 years ago

Some updates, mostly to do with adding in the new document maker functionality
  • Property svn:executable set to *
File size: 4.3 KB
Line 
1
2(function($) {
3
4 $.anythingZoomer = {
5
6 defaults: {
7 smallArea: "#small",
8 largeArea: "#large",
9 zoomPort: "#overlay",
10 mover: "#mover",
11 expansionSize: 30,
12 speedMultiplier: 1.5
13
14 }
15
16 }
17
18 $.fn.extend({
19 anythingZoomer:function(config) {
20
21 var config = $.extend({}, $.anythingZoomer.defaults, config);
22
23 var wrap = $(this);
24
25 var smallArea = $(config.smallArea);
26 var largeArea = $(config.largeArea);
27 var zoomPort = $(config.zoomPort);
28 var mover = $(config.mover);
29
30 var expansionSize = config.expansionSize;
31 var speedMultiplier = config.speedMultiplier;
32
33 var over = false;
34
35 function setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier) {
36
37 smallArea
38 .show();
39
40 zoomPort
41 .fadeIn();
42
43 mover
44 .css({
45 width: mover.data("origWidth"),
46 height: mover.data("origHeight"),
47 overflow: "hidden",
48 position: "absolute"
49 })
50
51 wrap
52 .css({
53 //width: "auto"
54 })
55 .mousemove(function(e){
56 var x = e.pageX - smallArea.offset().left;
57 var y = e.pageY - smallArea.offset().top;
58
59 if ( (x < -expansionSize) || (x > smallArea.width() + expansionSize) || (y < -expansionSize) || (y > smallArea.height() + expansionSize) ) {
60 if(over)
61 {
62 mover.fadeOut(50);
63 over = false;
64 }
65 return;
66 }
67 else
68 {
69 if(!over)
70 {
71 mover.fadeIn();
72 over = true;
73 }
74 }
75
76 mover.css({
77 top: y - 50,
78 left: x - 50
79 });
80
81 largeArea.css({
82
83 left: (-(e.pageX - smallArea.offset().left)*speedMultiplier)+expansionSize,
84 top: (-(e.pageY - smallArea.offset().top)*speedMultiplier)+expansionSize
85
86 });
87
88 })
89 .dblclick(function() {
90
91 expand(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
92
93 });
94
95 };
96
97 function expand(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier) {
98
99 smallArea
100 .hide();
101
102 zoomPort
103 .hide();
104
105 mover
106 .fadeIn()
107 .data("origWidth", mover.width())
108 .data("origHeight", mover.height())
109 .css({
110 position: "static",
111 height: "auto",
112 width: "auto",
113 overflow: "visible"
114 });
115
116 wrap
117 .css({
118 width: "100%"
119 })
120 .unbind()
121 .dblclick(function(){
122 setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
123 });
124
125
126 largeArea
127 .css({
128 left: 0,
129 top: 0,
130 width: largeArea.data("origWidth")
131 });
132
133 };
134
135 mover
136 .data("origWidth", mover.width())
137 .data("origHeight", mover.height());
138
139 // Because the largeArea is often hidden, the width() function returns zero, take width from CSS instead
140 largeArea
141 .data("origWidth", largeArea.css("width"));
142
143 setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
144
145 return this;
146
147 }
148
149 });
150
151})(jQuery);
152
153
154
155
156
157
Note: See TracBrowser for help on using the repository browser.