|
597
|
1 /*
|
|
|
2 * digilib jQuery plugin
|
|
|
3 *
|
|
|
4 */
|
|
|
5
|
|
|
6 (function($) {
|
|
603
|
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
|
|
598
|
138 var defaults = {
|
|
603
|
139 // base URL to Scaler servlet
|
|
|
140 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler',
|
|
|
141 // list of Scaler parameters
|
|
602
|
142 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo',
|
|
|
143 'rot','cont','brgt','rgbm','rgba','ddpi','ddpix','ddpiy'],
|
|
603
|
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,
|
|
605
|
150 // path to button images (must end with a slash)
|
|
|
151 'buttonsImagePath' : '../greyskin/',
|
|
603
|
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"],
|
|
604
|
155 'buttonsCustom' : []
|
|
603
|
156 };
|
|
598
|
157
|
|
601
|
158 // parameters from the query string
|
|
600
|
159 var queryParams = {};
|
|
601
|
160
|
|
|
161 // affine geometry classes
|
|
|
162 var geom = dlGeometry();
|
|
597
|
163
|
|
|
164 var methods = {
|
|
601
|
165 // digilib initialization
|
|
597
|
166 init : function(options) {
|
|
601
|
167 // settings for this digilib instance are merged from defaults and options
|
|
600
|
168 var settings = $.extend({}, defaults, options);
|
|
|
169 var isFullscreen = settings.interactionMode === 'fullscreen';
|
|
|
170 if (isFullscreen) {
|
|
|
171 queryParams = parseQueryParams();
|
|
|
172 };
|
|
597
|
173 return this.each(function() {
|
|
598
|
174 var $elem = $(this);
|
|
|
175 var data = $elem.data('digilib');
|
|
600
|
176 var elemSettings;
|
|
601
|
177 // if the plugin hasn't been initialized yet
|
|
597
|
178 if (!data) {
|
|
598
|
179 // merge query parameters
|
|
600
|
180 if (isFullscreen) {
|
|
|
181 elemSettings = $.extend({}, settings, queryParams);
|
|
|
182 } else {
|
|
|
183 elemSettings = $.extend({}, settings, parseImgParams($elem));
|
|
|
184 };
|
|
598
|
185 // store in data element
|
|
|
186 $elem.data('digilib', {
|
|
|
187 target : $elem,
|
|
600
|
188 settings : elemSettings
|
|
597
|
189 });
|
|
|
190 }
|
|
601
|
191 // create HTML structure
|
|
|
192 setupScalerDiv($elem, elemSettings);
|
|
604
|
193 setupButtons($elem, elemSettings, 'buttonsStandard');
|
|
597
|
194 });
|
|
|
195 },
|
|
601
|
196
|
|
|
197 // clean up digilib
|
|
597
|
198 destroy : function() {
|
|
|
199 return this.each(function(){
|
|
|
200 var $this = $(this);
|
|
|
201 var data = $this.data('digilib');
|
|
|
202 // Namespacing FTW
|
|
598
|
203 $(window).unbind('.digilib'); // unbinds all digilibs(?)
|
|
597
|
204 data.digilib.remove();
|
|
|
205 $this.removeData('digilib');
|
|
|
206 });
|
|
|
207 }
|
|
598
|
208 };
|
|
597
|
209
|
|
601
|
210 // returns parameters from page url
|
|
600
|
211 var parseQueryParams = function() {
|
|
|
212 return parseQueryString(location.search.slice(1));
|
|
|
213 };
|
|
|
214
|
|
601
|
215 // returns parameters taken from embedded img-element
|
|
600
|
216 var parseImgParams = function($elem) {
|
|
|
217 var src = $elem.children('img').attr('src');
|
|
|
218 var pos = src.indexOf('?');
|
|
|
219 var query = (pos < 0) ? '' : src.substring(pos + 1);
|
|
|
220 var scalerUrl = src.substring(0, pos);
|
|
|
221 var hash = parseQueryString(query);
|
|
602
|
222 hash.scalerBaseUrl = scalerUrl;
|
|
600
|
223 // console.log(hash);
|
|
|
224 return hash;
|
|
|
225 };
|
|
|
226
|
|
601
|
227 // parses query parameter string into parameter object
|
|
600
|
228 var parseQueryString = function(query) {
|
|
|
229 var pairs = query.split("&");
|
|
|
230 var hash = {};
|
|
|
231 for (var i = 0; i < pairs.length; i++) {
|
|
|
232 var pair = pairs[i].split("=");
|
|
|
233 if (pair.length === 2) {
|
|
601
|
234 hash[pair[0]] = pair[1];
|
|
600
|
235 };
|
|
|
236 };
|
|
|
237 return hash;
|
|
|
238 };
|
|
597
|
239
|
|
601
|
240 // returns URL and query string for Scaler
|
|
|
241 var getScalerString = function (settings) {
|
|
602
|
242 var url = settings.scalerBaseUrl + '?';
|
|
|
243 var i, parm, latter;
|
|
|
244 // go through param names and get values from settings
|
|
|
245 for (i = 0; i < settings.scalerParamNames.length; ++i) {
|
|
|
246 parm = settings.scalerParamNames[i];
|
|
|
247 if (settings[parm]) {
|
|
|
248 // first parm gets no '&'
|
|
|
249 url += latter ? '&' : '';
|
|
|
250 latter = 1;
|
|
|
251 // add parm=val
|
|
|
252 url += parm + '=' + settings[parm];
|
|
|
253 }
|
|
|
254 }
|
|
|
255 return url;
|
|
|
256 };
|
|
|
257
|
|
|
258 // returns maximum size for scaler img in fullscreen mode
|
|
|
259 var getFullscreenImgSize = function($elem) {
|
|
|
260 var winH = $(window).height();
|
|
|
261 var winW = $(window).width();
|
|
|
262 // TODO: account for borders?
|
|
|
263 return geom.size(winW, winH);
|
|
601
|
264 };
|
|
|
265
|
|
|
266 // creates HTML structure for digilib in elem
|
|
|
267 var setupScalerDiv = function ($elem, settings) {
|
|
|
268 if (settings.interactionMode === 'fullscreen') {
|
|
602
|
269 // fullscreen
|
|
|
270 var imgSize = getFullscreenImgSize($elem);
|
|
|
271 settings.dw = imgSize.width;
|
|
|
272 settings.dh = imgSize.height;
|
|
|
273 // create new html
|
|
601
|
274 $elem.empty(); // TODO: should we keep stuff for customization?
|
|
602
|
275 var scalerUrl = getScalerString(settings);
|
|
601
|
276 var scalerHTML = '<div class="scaler"><img class="pic"/></div>';
|
|
602
|
277 $elem.append(scalerHTML);
|
|
|
278 var $img = $elem.find("img.pic");
|
|
|
279 $img.attr('src', scalerUrl);
|
|
|
280 //$img.load(scalerImgLoaded);
|
|
|
281 } else {
|
|
|
282 // embedded mode -- keep inner img
|
|
|
283 var $img = $elem.detach('img');
|
|
|
284 $elem.empty(); // TODO: should we keep stuff for customization?
|
|
|
285 $img.addClass('pic');
|
|
|
286 var $scaler = $('<div class="scaler"/>');
|
|
|
287 $scaler.append($img);
|
|
|
288 $elem.append($scaler);
|
|
|
289 //$img.load(scalerImgLoaded);
|
|
601
|
290 }
|
|
|
291 };
|
|
|
292
|
|
603
|
293 // creates HTML structure for buttons in elem
|
|
|
294 var setupButtons = function ($elem, settings, buttonGroup) {
|
|
|
295 if (settings.interactionMode === 'fullscreen') {
|
|
|
296 // fullscreen -- create new
|
|
605
|
297 var $buttonsDiv = $('<div class="buttons"></div>');
|
|
|
298 $elem.append($buttonsDiv);
|
|
603
|
299 var buttonNames = settings[buttonGroup];
|
|
|
300 for (var i = 0; i < buttonNames.length; i++) {
|
|
|
301 var buttonName = buttonNames[i];
|
|
605
|
302 var buttonSettings = settings.buttons[buttonName];
|
|
|
303 // construct the button html
|
|
|
304 var $button = $('<div class="button"></div>');
|
|
|
305 var $a = $('<a/>');
|
|
|
306 var $img = $('<img/>');
|
|
|
307 $buttonsDiv.append($button);
|
|
|
308 $button.append($a);
|
|
|
309 $a.append($img);
|
|
|
310 // add attributes and bindings
|
|
|
311 $button.attr('title', buttonSettings.tooltip);
|
|
|
312 $button.addClass('button-' + buttonName);
|
|
|
313 // let the clicked <a> element know about the digilib context
|
|
|
314 $a.data('digilib', { 'name' : buttonName, 'settings' : settings } );
|
|
|
315 $a.bind('click', function(){
|
|
|
316 // get the context settings
|
|
|
317 var data = $(this).data('digilib');
|
|
|
318 // find the action for the clicked element
|
|
|
319 console.log(data.settings.buttons[data.name].onclick);
|
|
|
320 });
|
|
|
321 // binding mit closure
|
|
|
322 //(function(){ var action = buttonSettings.onclick;
|
|
|
323 // $a.bind('click', function(){ console.log( action )} );
|
|
|
324 //})();
|
|
|
325 $img.attr('src', settings.buttonsImagePath + buttonSettings.img);
|
|
604
|
326 };
|
|
|
327 }
|
|
605
|
328 return $buttonsDiv;
|
|
603
|
329 };
|
|
|
330
|
|
598
|
331 // hook plugin into jquery
|
|
|
332 $.fn.digilib = function(method) {
|
|
|
333 if (methods[method]) {
|
|
|
334 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
|
335 } else if (typeof(method) === 'object' || !method) {
|
|
|
336 return methods.init.apply(this, arguments);
|
|
|
337 } else {
|
|
|
338 $.error( 'Method ' + method + ' does not exist on jQuery.digilib' );
|
|
|
339 }
|
|
|
340 };
|
|
597
|
341
|
|
|
342 })(jQuery); |
