Mercurial > hg > digilib

comparison client/digitallibrary/jquery/jquery.digilib.birdseye.js @ 786:912519475259 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
documentation for new plugin api in jquery-digilib-plugin.txt. more steps towards plugification of birdseye view.
author robcast
date Fri, 18 Feb 2011 15:16:30 +0100
parents 966d5c938b4c
children 040e9bc1602e
comparison
equal deleted inserted replaced
784:966d5c938b4c 786:912519475259
6 // affine geometry plugin stub 6 // affine geometry plugin stub
7 var geom; 7 var geom;
8 8
9 var FULL_AREA; 9 var FULL_AREA;
10 10
11 var buttons = {
12 bird : {
13 onclick : "showBirdDiv",
14 tooltip : "show bird's eye view",
15 icon : "birds-eye.png"
16 }
17 };
18
11 var actions = { 19 var actions = {
20 // event handler: toggles the visibility of the bird's eye window
21 showBirdDiv : function (data, show) {
22 var settings = data.settings;
23 if (data.$birdDiv == null) {
24 // no bird div -> create
25 setupBirdDiv(data);
26 }
27 var on = showDiv(settings.isBirdDivVisible, data.$birdDiv, show);
28 settings.isBirdDivVisible = on;
29 highlightButtons(data, 'bird', on);
30 updateBirdDiv(data);
31 storeOptions(data);
32 }
12 }; 33 };
13 34
14 // init: plugin initialization 35 // plugin initialization called by digilib on plugin object.
15 var plugInit = function(data) { 36 var install = function() {
16 // import geometry classes 37 // import geometry classes
17 geom = digilib.fn.geometry; 38 geom = this.fn.geometry;
18 FULL_AREA = digilib.fn.FULL_AREA; 39 FULL_AREA = digilib.fn.FULL_AREA;
19 // TODO: add actions 40 // TODO: add actions
20 // TODO: add buttons 41 // TODO: add buttons
21 // TODO: add event handlers 42 // TODO: add event handlers
22 }; 43 };
23 44
24 45
46 // returns URL for bird's eye view image
47 var getBirdImgUrl = function (data, moreParams) {
48 var settings = data.settings;
49 var birdDivOptions = {
50 dw : settings.birdDivWidth,
51 dh : settings.birdDivHeight
52 };
53 var birdSettings = $.extend({}, settings, birdDivOptions);
54 // use only the relevant parameters
55 if (moreParams == null) {
56 var params = getParamString(birdSettings, settings.birdDivParams, defaults);
57 } else {
58 // filter scaler flags
59 if (birdSettings.mo != null) {
60 var mo = '';
61 if (data.scalerFlags.hmir != null) {
62 mo += 'hmir,';
63 }
64 if (data.scalerFlags.vmir != null) {
65 mo += 'vmir';
66 }
67 birdSettings.mo = mo;
68 }
69 var params = getParamString(birdSettings,
70 settings.birdDivParams.concat(moreParams), defaults);
71 }
72 var url = settings.scalerBaseUrl + '?' + params;
73 return url;
74 };
75
76 // creates HTML structure for the bird's eye view in elem
77 var setupBirdDiv = function (data) {
78 var $elem = data.$elem;
79 // the bird's eye div
80 var $birdDiv = $('<div class="birdview" style="display:none"/>');
81 // the detail indicator frame
82 var $birdZoom = $('<div class="birdzoom" style="display:none; background-color:transparent;"/>');
83 // the small image
84 var $birdImg = $('<img class="birdimg"/>');
85 data.$birdDiv = $birdDiv;
86 data.$birdZoom = $birdZoom;
87 data.$birdImg = $birdImg;
88 $elem.append($birdDiv);
89 $birdDiv.append($birdZoom);
90 $birdDiv.append($birdImg);
91 // $birdZoom.css(data.settings.birdIndicatorStyle);
92 var birdUrl = getBirdImgUrl(data);
93 $birdImg.load(birdImgLoadedHandler(data));
94 $birdImg.error(function () {console.error("error loading birdview image");});
95 $birdImg.attr('src', birdUrl);
96 };
97
98 // update bird's eye view
99 var updateBirdDiv = function (data) {
100 if (!data.settings.isBirdDivVisible) return;
101 var $birdImg = data.$birdImg;
102 var oldsrc = $birdImg.attr('src');
103 var newsrc = getBirdImgUrl(data);
104 if (oldsrc !== newsrc) {
105 $birdImg.attr('src', newsrc);
106 // onload handler re-renders
107 } else {
108 // re-render
109 renderBirdArea(data);
110 // enable click and drag
111 setupBirdDrag(data);
112 }
113 };
114
115 // returns function for load event of bird's eye view img
116 var birdImgLoadedHandler = function (data) {
117 return function () {
118 var $birdImg = $(this);
119 var birdRect = geom.rectangle($birdImg);
120 console.debug("birdImg loaded!", $birdImg, "rect=", birdRect, "data=", data);
121 if (birdRect.width === 0) {
122 // malheureusement IE7 calls load handler when there is no size info yet
123 setTimeout(function () { $birdImg.triggerHandler('load'); }, 200);
124 }
125 // update display (zoom area indicator)
126 updateDisplay(data);
127 };
128 };
129
130 // show zoom area indicator on bird's eye view
131 var renderBirdArea = function (data) {
132 if (data.$birdImg == null || ! data.$birdImg.get(0).complete) return;
133 var $birdZoom = data.$birdZoom;
134 var zoomArea = data.zoomArea;
135 var normalSize = isFullArea(zoomArea);
136 if (normalSize) {
137 $birdZoom.hide();
138 return;
139 } else {
140 $birdZoom.show();
141 }
142 // create Transform from current area and picsize
143 data.birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
144 var zoomRect = data.birdTrafo.transform(zoomArea);
145 console.debug("renderBirdArea:", zoomRect, "zoomArea:", zoomArea, "$birdTrafo:", data.birdTrafo);
146 // acount for border width
147 var bw = getBorderWidth($birdZoom);
148 zoomRect.addPosition({x : -bw, y : -bw});
149 if (data.settings.interactionMode === 'fullscreen') {
150 // no animation for fullscreen
151 zoomRect.adjustDiv($birdZoom);
152 } else {
153 // nice animation for embedded mode :-)
154 // correct offsetParent because animate doesn't use offset
155 var ppos = $birdZoom.offsetParent().offset();
156 var dest = {
157 left : (zoomRect.x - ppos.left) + 'px',
158 top : (zoomRect.y - ppos.top) + 'px',
159 width : zoomRect.width,
160 height : zoomRect.height
161 };
162 $birdZoom.animate(dest);
163 }
164 };
165
166 // bird's eye view zoom area click and drag handler
167 var setupBirdDrag = function(data) {
168 var $birdImg = data.$birdImg;
169 var $birdZoom = data.$birdZoom;
170 var $document = $(document);
171 var $scaler = data.$scaler;
172 var startPos, newRect, birdImgRect, birdZoomRect, fullRect, scalerPos;
173 var bw = getBorderWidth($birdZoom);
174
175 // mousedown handler: start dragging bird zoom to a new position
176 var birdZoomStartDrag = function(evt) {
177 startPos = geom.position(evt);
178 // position may have changed
179 data.birdTrafo = getImgTrafo($birdImg, FULL_AREA);
180 birdImgRect = geom.rectangle($birdImg);
181 birdZoomRect = geom.rectangle($birdZoom);
182 scalerPos = geom.position($scaler);
183 newRect = null;
184 fullRect = setZoomBG(data); // setup zoom background image
185 $document.bind("mousemove.dlBirdMove", birdZoomMove);
186 $document.bind("mouseup.dlBirdMove", birdZoomEndDrag);
187 return false;
188 };
189
190 // mousemove handler: drag
191 var birdZoomMove = function(evt) {
192 var pos = geom.position(evt);
193 var delta = startPos.delta(pos);
194 // move birdZoom div, keeping size
195 newRect = birdZoomRect.copy();
196 newRect.addPosition(delta);
197 newRect.stayInside(birdImgRect);
198 // reflect birdview zoom position in scaler image
199 var area = data.birdTrafo.invtransform(newRect);
200 var imgArea = data.imgTrafo.transform(area);
201 var offset = imgArea.getPosition().neg();
202 offset.add(scalerPos);
203 if (fullRect) {
204 var bgPos = fullRect.getPosition().add(offset);
205 } else {
206 var bgPos = offset;
207 }
208 // move the background image to the new position
209 data.$scaler.css({
210 'background-position' : bgPos.x + "px " + bgPos.y + "px"
211 });
212 // acount for border width
213 newRect.addPosition({x : -bw, y : -bw});
214 newRect.adjustDiv($birdZoom);
215 return false;
216 };
217
218 // mouseup handler: reload page
219 var birdZoomEndDrag = function(evt) {
220 var settings = data.settings;
221 $document.unbind("mousemove.dlBirdMove", birdZoomMove);
222 $document.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
223 if (newRect == null) {
224 // no movement happened - set center to click position
225 startPos = birdZoomRect.getCenter();
226 birdZoomMove(evt);
227 }
228 // ugly, but needed to prevent double border width compensation
229 newRect.addPosition({x : bw, y : bw});
230 var newArea = data.birdTrafo.invtransform(newRect);
231 data.zoomArea = newArea;
232 redisplay(data);
233 return false;
234 };
235
236 // clear old handler
237 $document.unbind(".dlBirdMove");
238 $birdImg.unbind(".dlBirdMove");
239 $birdZoom.unbind(".dlBirdMove");
240 if (! isFullArea(data.zoomArea)) {
241 // set new handler
242 $birdImg.bind("mousedown.dlBirdMove", birdZoomStartDrag);
243 $birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag);
244 }
245 };
246
247 // move bird zoom indicator to reflect zoomed detail area
248 var setBirdZoom = function(data, rect) {
249 var part = data.imgTrafo.invtransform(rect);
250 // area = FULL_AREA.fit(part); // no, we want to see where we transcend the borders
251 birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
252 var birdRect = birdTrafo.transform(part);
253 var $birdZoom = data.$birdZoom;
254 // acount for border width
255 var bw = getBorderWidth($birdZoom);
256 birdRect.addPosition({x : -bw, y : -bw});
257 birdRect.adjustDiv(data.$birdZoom);
258 };
259
25 // plugin object with name and init 260 // plugin object with name and init
26 // shared objects filled by digilib on registration 261 // shared objects filled by digilib on registration
27 var digilib = { 262 var digilib = {
28 name : 'birdseye', 263 name : 'birdseye',
29 init : plugInit, 264 install : install,
30 buttons : {}, 265 buttons : {},
31 actions : {}, 266 actions : {},
32 fn : {}, 267 fn : {},
33 plugins : {} 268 plugins : {}
34 }; 269 };