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