Mercurial > hg > digilib-old
annotate client/digitallibrary/jquery/jquery.digilib.js @ 615:ec131e9699a6 jquery
setup bird's eye view div
author | hertzhaft |
---|---|
date | Sun, 16 Jan 2011 19:21:16 +0100 |
parents | 0bd19b6cede4 |
children | 55e06ebb879f |
rev | line source |
---|---|
604 | 1 /* |
2 * digilib jQuery plugin | |
3 * | |
4 */ | |
5 | |
6 (function($) { | |
610 | 7 var buttons = { |
8 reference : { | |
9 onclick : "javascript:getRefWin()", | |
10 tooltip : "get a reference URL", | |
11 img : "reference.png" | |
12 }, | |
13 zoomin : { | |
14 onclick : "javascript:dl.zoomBy(1.4)", | |
15 tooltip : "zoom in", | |
16 img : "zoom-in.png" | |
17 }, | |
18 zoomout : { | |
19 onclick : "javascript:zoomBy(0.7)", | |
20 tooltip : "zoom out", | |
21 img : "zoom-out.png" | |
22 }, | |
23 zoomarea : { | |
24 onclick : "javascript:zoomArea()", | |
25 tooltip : "zoom area", | |
26 img : "zoom-area.png" | |
27 }, | |
28 zoomfull : { | |
29 onclick : "javascript:zoomFullpage()", | |
30 tooltip : "view the whole image", | |
31 img : "zoom-full.png" | |
32 }, | |
33 pagewidth : { | |
34 onclick : "javascript:zoomFullpage('width')", | |
35 tooltip : "page width", | |
36 img : "pagewidth.png" | |
37 }, | |
38 back : { | |
39 onclick : "javascript:gotoPage('-1')", | |
40 tooltip : "goto previous image", | |
41 img : "back.png" | |
42 }, | |
43 fwd : { | |
44 onclick : "javascript:gotoPage('+1')", | |
45 tooltip : "goto next image", | |
46 img : "fwd.png" | |
47 }, | |
48 page : { | |
49 onclick : "javascript:gotoPageWin()", | |
50 tooltip : "specify image", | |
51 img : "page.png" | |
52 }, | |
53 bird : { | |
54 onclick : "javascript:toggleBirdDiv()", | |
55 tooltip : "show bird's eye view", | |
56 img : "birds-eye.png" | |
57 }, | |
58 help : { | |
59 onclick : "javascript:toggleAboutDiv()", | |
60 tooltip : "about Digilib", | |
61 img : "help.png" | |
62 }, | |
63 reset : { | |
64 onclick : "javascript:resetImage()", | |
65 tooltip : "reset image", | |
66 img : "reset.png" | |
67 }, | |
68 mark : { | |
69 onclick : "javascript:setMark()", | |
70 tooltip : "set a mark", | |
71 img : "mark.png" | |
72 }, | |
73 delmark : { | |
74 onclick : "javascript:removeMark()", | |
75 tooltip : "delete the last mark", | |
76 img : "delmark.png" | |
77 }, | |
78 hmir : { | |
79 onclick : "javascript:mirror('h')", | |
80 tooltip : "mirror horizontally", | |
81 img : "mirror-horizontal.png" | |
82 }, | |
83 vmir : { | |
84 onclick : "javascript:mirror('v')", | |
85 tooltip : "mirror vertically", | |
86 img : "mirror-vertical.png" | |
87 }, | |
88 rot : { | |
89 onclick : "javascript:setParamWin('rot', 'Rotate (0..360) clockwise')", | |
90 tooltip : "rotate image", | |
91 img : "rotate.png" | |
92 }, | |
93 brgt : { | |
94 onclick : "javascript:setParamWin('brgt', 'Brightness (-255..255)')", | |
95 tooltip : "set brightness", | |
96 img : "brightness.png" | |
97 }, | |
98 cont : { | |
99 onclick : "javascript:setParamWin('cont', 'Contrast (0..8)')", | |
100 tooltip : "set contrast", | |
101 img : "contrast.png" | |
102 }, | |
103 rgb : { | |
104 onclick : "javascript:setParamWin('rgb', '...')", | |
105 tooltip : "set rgb values", | |
106 img : "rgb.png" | |
107 }, | |
108 quality : { | |
109 onclick : "javascript:setQualityWin('Quality (0..2)')", | |
110 tooltip : "set image quality", | |
111 img : "quality.png" | |
112 }, | |
113 size : { | |
114 onclick : "javascript:toggleSizeMenu()", | |
115 tooltip : "set page size", | |
116 img : "size.png" | |
117 }, | |
118 calibrationx : { | |
119 onclick : "javascript:calibrate('x')", | |
120 tooltip : "calibrate screen x-ratio", | |
121 img : "calibration-x.png" | |
122 }, | |
123 scale : { | |
124 onclick : "javascript:toggleScaleMenu()", | |
125 tooltip : "change image scale", | |
126 img : "original-size.png" | |
127 }, | |
128 options : { | |
129 onclick : "javascript:toggleOptionDiv()", | |
130 tooltip : "hide options", | |
131 img : "options.png" | |
132 }, | |
133 SEP : { | |
134 img : "sep.png" | |
135 } | |
136 }; | |
137 | |
605 | 138 var defaults = { |
610 | 139 // base URL to Scaler servlet |
140 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler', | |
141 // list of Scaler parameters | |
609 | 142 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo', |
143 'rot','cont','brgt','rgbm','rgba','ddpi','ddpix','ddpiy'], | |
610 | 144 // mode of operation. |
145 // fullscreen: takes parameters from page URL, keeps state in page URL | |
146 // embedded: takes parameters from Javascript options, keeps state inside object | |
147 'interactionMode' : 'fullscreen', | |
148 // buttons | |
149 'buttons' : buttons, | |
612 | 150 // path to button images (must end with a slash) |
151 'buttonsImagePath' : '../greyskin/', | |
610 | 152 // button groups |
153 'buttonsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], | |
154 'buttonsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], | |
615 | 155 'buttonsCustom' : [], |
156 // dimensions of bird's eye window | |
157 'birdMaxX' : 200, | |
158 'birdMaxY' : 200 | |
610 | 159 }; |
605 | 160 |
608 | 161 // parameters from the query string |
607 | 162 var queryParams = {}; |
608 | 163 |
164 // affine geometry classes | |
165 var geom = dlGeometry(); | |
604 | 166 |
167 var methods = { | |
608 | 168 // digilib initialization |
604 | 169 init : function(options) { |
608 | 170 // settings for this digilib instance are merged from defaults and options |
607 | 171 var settings = $.extend({}, defaults, options); |
172 var isFullscreen = settings.interactionMode === 'fullscreen'; | |
173 if (isFullscreen) { | |
174 queryParams = parseQueryParams(); | |
175 }; | |
604 | 176 return this.each(function() { |
605 | 177 var $elem = $(this); |
178 var data = $elem.data('digilib'); | |
607 | 179 var elemSettings; |
608 | 180 // if the plugin hasn't been initialized yet |
604 | 181 if (!data) { |
605 | 182 // merge query parameters |
607 | 183 if (isFullscreen) { |
184 elemSettings = $.extend({}, settings, queryParams); | |
185 } else { | |
186 elemSettings = $.extend({}, settings, parseImgParams($elem)); | |
187 }; | |
605 | 188 // store in data element |
189 $elem.data('digilib', { | |
190 target : $elem, | |
607 | 191 settings : elemSettings |
604 | 192 }); |
193 } | |
608 | 194 // create HTML structure |
195 setupScalerDiv($elem, elemSettings); | |
611 | 196 setupButtons($elem, elemSettings, 'buttonsStandard'); |
615 | 197 setupBirdviewDiv($elem, elemSettings); |
604 | 198 }); |
199 }, | |
608 | 200 |
201 // clean up digilib | |
604 | 202 destroy : function() { |
203 return this.each(function(){ | |
204 var $this = $(this); | |
205 var data = $this.data('digilib'); | |
206 // Namespacing FTW | |
605 | 207 $(window).unbind('.digilib'); // unbinds all digilibs(?) |
604 | 208 data.digilib.remove(); |
209 $this.removeData('digilib'); | |
210 }); | |
211 } | |
605 | 212 }; |
604 | 213 |
608 | 214 // returns parameters from page url |
607 | 215 var parseQueryParams = function() { |
216 return parseQueryString(location.search.slice(1)); | |
217 }; | |
218 | |
608 | 219 // returns parameters taken from embedded img-element |
607 | 220 var parseImgParams = function($elem) { |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
221 var src = $elem.find('img').first().attr('src'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
222 if (!src) { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
223 return null; |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
224 } |
607 | 225 var pos = src.indexOf('?'); |
226 var query = (pos < 0) ? '' : src.substring(pos + 1); | |
227 var scalerUrl = src.substring(0, pos); | |
228 var hash = parseQueryString(query); | |
609 | 229 hash.scalerBaseUrl = scalerUrl; |
607 | 230 // console.log(hash); |
231 return hash; | |
232 }; | |
233 | |
608 | 234 // parses query parameter string into parameter object |
607 | 235 var parseQueryString = function(query) { |
236 var pairs = query.split("&"); | |
237 var hash = {}; | |
238 for (var i = 0; i < pairs.length; i++) { | |
239 var pair = pairs[i].split("="); | |
240 if (pair.length === 2) { | |
608 | 241 hash[pair[0]] = pair[1]; |
607 | 242 }; |
243 }; | |
244 return hash; | |
245 }; | |
604 | 246 |
615 | 247 // returns a query string from key names from a parameter hash |
248 var makeParamString = function (settings, keys) { | |
249 var paramString = ''; | |
250 var latter = false; | |
251 for (i = 0; i < keys.length; ++i) { | |
252 var key = keys[i]; | |
253 if (settings[key]) { | |
254 // first param gets no '&' | |
255 paramString += latter ? '&' : ''; | |
256 latter = true; | |
257 // add parm=val | |
258 paramString += key + '=' + settings[key]; | |
259 }; | |
260 } | |
261 return paramString; | |
262 }; | |
263 | |
608 | 264 // returns URL and query string for Scaler |
265 var getScalerString = function (settings) { | |
615 | 266 var keys = settings.scalerParamNames; |
267 var queryString = makeParamString(settings, keys); | |
268 var url = settings.scalerBaseUrl + '?' + queryString; | |
609 | 269 return url; |
270 }; | |
615 | 271 |
609 | 272 // returns maximum size for scaler img in fullscreen mode |
273 var getFullscreenImgSize = function($elem) { | |
274 var winH = $(window).height(); | |
275 var winW = $(window).width(); | |
276 // TODO: account for borders? | |
277 return geom.size(winW, winH); | |
608 | 278 }; |
279 | |
280 // creates HTML structure for digilib in elem | |
281 var setupScalerDiv = function ($elem, settings) { | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
282 var rewrite; |
608 | 283 if (settings.interactionMode === 'fullscreen') { |
609 | 284 // fullscreen |
285 var imgSize = getFullscreenImgSize($elem); | |
286 settings.dw = imgSize.width; | |
287 settings.dh = imgSize.height; | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
288 $img = $('<img/>'); |
609 | 289 var scalerUrl = getScalerString(settings); |
290 $img.attr('src', scalerUrl); | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
291 $img.addClass('pic'); |
609 | 292 } else { |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
293 // embedded mode -- try to keep img tag |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
294 var $img = $elem.find('img'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
295 if ($img.length > 0) { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
296 console.debug("img detach:",$img); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
297 $img.detach(); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
298 $img.addClass('picsi'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
299 } else { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
300 $img = $('<img/>'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
301 var scalerUrl = getScalerString(settings); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
302 $img.attr('src', scalerUrl); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
303 $img.addClass('pic'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
304 } |
608 | 305 } |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
306 // create new html |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
307 $elem.empty(); // TODO: should we keep stuff for customization? |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
308 var $scaler = $('<div class="scaler"/>'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
309 $elem.append($scaler); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
310 $scaler.append($img); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
311 $img.load(scalerImgLoadedFn(settings)); |
608 | 312 }; |
615 | 313 |
610 | 314 // creates HTML structure for buttons in elem |
315 var setupButtons = function ($elem, settings, buttonGroup) { | |
316 if (settings.interactionMode === 'fullscreen') { | |
317 // fullscreen -- create new | |
612 | 318 var $buttonsDiv = $('<div class="buttons"></div>'); |
319 $elem.append($buttonsDiv); | |
610 | 320 var buttonNames = settings[buttonGroup]; |
321 for (var i = 0; i < buttonNames.length; i++) { | |
322 var buttonName = buttonNames[i]; | |
612 | 323 var buttonSettings = settings.buttons[buttonName]; |
324 // construct the button html | |
325 var $button = $('<div class="button"></div>'); | |
326 var $a = $('<a/>'); | |
614 | 327 var $img = $('<img class="button"/>'); |
612 | 328 $buttonsDiv.append($button); |
329 $button.append($a); | |
330 $a.append($img); | |
331 // add attributes and bindings | |
332 $button.attr('title', buttonSettings.tooltip); | |
333 $button.addClass('button-' + buttonName); | |
334 // let the clicked <a> element know about the digilib context | |
335 $a.data('digilib', { 'name' : buttonName, 'settings' : settings } ); | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
336 $a.bind('click', function() { |
612 | 337 // get the context settings |
338 var data = $(this).data('digilib'); | |
339 // find the action for the clicked element | |
340 console.log(data.settings.buttons[data.name].onclick); | |
341 }); | |
342 // binding mit closure | |
343 //(function(){ var action = buttonSettings.onclick; | |
344 // $a.bind('click', function(){ console.log( action )} ); | |
345 //})(); | |
346 $img.attr('src', settings.buttonsImagePath + buttonSettings.img); | |
611 | 347 }; |
348 } | |
612 | 349 return $buttonsDiv; |
610 | 350 }; |
615 | 351 |
352 // creates HTML structure for the bird's eye view in elem | |
353 var setupBirdviewDiv = function ($elem, settings) { | |
354 // use only the relevant parameters | |
355 var keys = ['fn','pn','dw','dh']; | |
356 var birdDimensions = { | |
357 'dw' : settings.birdMaxX, | |
358 'dh' : settings.birdMaxY | |
359 }; | |
360 var birdSettings = $.extend({}, settings, birdDimensions); | |
361 var birdUrl = settings.scalerBaseUrl + '?' + makeParamString(birdSettings, keys); | |
362 // the bird's eye div | |
363 var $birdviewDiv = $('<div class="birdview"/>'); | |
364 // the detail indicator frame | |
365 var $birdzoomDiv = $('<div class="birdzoom"/>'); | |
366 // the small image | |
367 var $birdImg = $('<img class="birdimg"/>'); | |
368 $elem.append($birdviewDiv); | |
369 $birdviewDiv.append($birdzoomDiv); | |
370 $birdviewDiv.append($birdImg); | |
371 $birdImg.attr('src', birdUrl); | |
372 }; | |
373 | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
374 // returns function for load event of scaler img |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
375 var scalerImgLoadedFn = function(settings) { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
376 return function() { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
377 console.debug("img loaded! settings=", settings); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
378 }; |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
379 }; |
605 | 380 // hook plugin into jquery |
381 $.fn.digilib = function(method) { | |
382 if (methods[method]) { | |
383 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | |
384 } else if (typeof(method) === 'object' || !method) { | |
385 return methods.init.apply(this, arguments); | |
386 } else { | |
387 $.error( 'Method ' + method + ' does not exist on jQuery.digilib' ); | |
388 } | |
389 }; | |
604 | 390 |
391 })(jQuery); |