Mercurial > hg > digilib-old
annotate webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1060:d9abeaa44c49
better region info
author | hertzhaft |
---|---|
date | Sat, 31 Mar 2012 19:56:53 +0200 |
parents | 4aa90cccb3e4 |
children | a45894a81e40 |
rev | line source |
---|---|
792 | 1 /** optional digilib regions plugin |
2 | |
1023 | 3 Mark up a digilib image with rectangular regions. |
4 | |
5 If hasRegionInfo=true reads regions from page HTML. | |
6 Element with regions has to be in digilib element, e.g. | |
792 | 7 |
1025 | 8 <map class="dl-keep dl-regioncontent"> |
9 <area href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1" alt="MPI fuer Wissenschaftsgeschichte"/> | |
10 <area href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1" alt="Bibliotheca Hertziana"/> | |
11 <area coords="0.3,0.5,0.15,0.1" /> | |
12 </map> | |
1023 | 13 |
792 | 14 */ |
15 | |
16 (function($) { | |
813 | 17 // the digilib object |
996 | 18 var digilib = null; |
813 | 19 // the functions made available by digilib |
1048 | 20 var fn = { |
21 // dummy function to avoid errors, gets overwritten by buttons plugin | |
22 highlightButtons : function () { | |
23 console.debug('regions: dummy function - highlightButtons'); | |
24 } | |
25 }; | |
813 | 26 // affine geometry plugin |
996 | 27 var geom = null; |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
28 |
792 | 29 var buttons = { |
30 addregion : { | |
813 | 31 onclick : "defineRegion", |
32 tooltip : "define a region", | |
792 | 33 icon : "addregion.png" |
34 }, | |
35 delregion : { | |
36 onclick : "removeRegion", | |
37 tooltip : "delete the last region", | |
38 icon : "delregion.png" | |
39 }, | |
40 regions : { | |
41 onclick : "toggleRegions", | |
42 tooltip : "show or hide regions", | |
43 icon : "regions.png" | |
44 }, | |
1048 | 45 regioninfo : { |
855 | 46 onclick : "showRegionInfo", |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
47 tooltip : "show information about regions", |
792 | 48 icon : "regioninfo.png" |
49 } | |
50 }; | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
51 |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
52 var defaults = { |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
53 // are regions shown? |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
54 'isRegionVisible' : true, |
813 | 55 // are region numbers shown? |
1023 | 56 'showRegionNumbers' : true, |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
57 // is there region content in the page? |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
58 'processHtmlRegions' : false, |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
59 // region defined by users and in the URL |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
60 'processUserRegions' : true, |
823 | 61 // turn any region into a clickable link to its detail view |
1025 | 62 'autoZoomRegionLinks' : false, |
63 // use full region as klickable link (instead of only number and text) | |
64 'fullRegionLinks' : false, | |
65 // css selector for area elements (should additionally be marked with class "keep") | |
66 'regionContentSelector' : 'map.dl-regioncontent area', | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
67 // buttonset of this plugin |
1048 | 68 'regionSet' : ['regions', 'addregion', 'delregion', 'regioninfo', 'lessoptions'], |
813 | 69 // url param for regions |
851 | 70 'rg' : null |
813 | 71 }; |
792 | 72 |
73 var actions = { | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
74 |
792 | 75 // define a region interactively with two clicked points |
1060 | 76 defineRegion : function(data) { |
813 | 77 if (!data.settings.isRegionVisible) { |
78 alert("Please turn on regions visibility!"); | |
79 return; | |
80 } | |
996 | 81 var cssPrefix = data.settings.cssPrefix; |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
82 var $elem = data.$elem; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
83 var $body = $('body'); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
84 var bodyRect = geom.rectangle($body); |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
85 var $scaler = data.$scaler; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
86 var scalerRect = geom.rectangle($scaler); |
792 | 87 var pt1, pt2; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
88 // overlay prevents other elements from reacting to mouse events |
996 | 89 var $overlay = $('<div class="'+cssPrefix+'overlay" style="position:absolute"/>'); |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
90 $body.append($overlay); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
91 bodyRect.adjustDiv($overlay); |
823 | 92 var $regionDiv = addRegionDiv(data, data.regions.length); |
792 | 93 |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
94 // mousedown handler: start sizing |
792 | 95 var regionStart = function (evt) { |
96 pt1 = geom.position(evt); | |
97 // setup and show zoom div | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
98 pt1.adjustDiv($regionDiv); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
99 $regionDiv.width(0).height(0); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
100 $regionDiv.show(); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
101 // register mouse events |
920 | 102 $overlay.on("mousemove.dlRegion", regionMove); |
103 $overlay.on("mouseup.dlRegion", regionEnd); | |
792 | 104 return false; |
105 }; | |
106 | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
107 // mousemove handler: size region |
792 | 108 var regionMove = function (evt) { |
109 pt2 = geom.position(evt); | |
110 var rect = geom.rectangle(pt1, pt2); | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
111 rect.clipTo(scalerRect); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
112 // update region |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
113 rect.adjustDiv($regionDiv); |
792 | 114 return false; |
115 }; | |
116 | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
117 // mouseup handler: end sizing |
792 | 118 var regionEnd = function (evt) { |
119 pt2 = geom.position(evt); | |
120 // assume a click and continue if the area is too small | |
121 var clickRect = geom.rectangle(pt1, pt2); | |
122 if (clickRect.getArea() <= 5) return false; | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
123 // unregister mouse events and get rid of overlay |
920 | 124 $overlay.off("mousemove.dlRegion", regionMove); |
125 $overlay.off("mouseup.dlRegion", regionEnd); | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
126 $overlay.remove(); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
127 // clip region |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
128 clickRect.clipTo(scalerRect); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
129 clickRect.adjustDiv($regionDiv); |
813 | 130 storeRegion(data, $regionDiv); |
792 | 131 // fn.redisplay(data); |
813 | 132 fn.highlightButtons(data, 'addregion', 0); |
133 redisplay(data); | |
792 | 134 return false; |
135 }; | |
136 | |
137 // bind start zoom handler | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
138 $overlay.one('mousedown.dlRegion', regionStart); |
813 | 139 fn.highlightButtons(data, 'addregion', 1); |
792 | 140 }, |
141 | |
142 // remove the last added region | |
1060 | 143 removeRegion : function (data) { |
813 | 144 if (!data.settings.isRegionVisible) { |
145 alert("Please turn on regions visibility!"); | |
146 return; | |
147 } | |
148 var region = data.regions.pop(); | |
149 if (region == null) return; | |
150 var $regionDiv = region.$div; | |
792 | 151 $regionDiv.remove(); |
813 | 152 redisplay(data); |
792 | 153 }, |
154 | |
813 | 155 // show/hide regions |
1060 | 156 toggleRegions : function (data) { |
813 | 157 var show = !data.settings.isRegionVisible; |
158 data.settings.isRegionVisible = show; | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
159 fn.highlightButtons(data, 'regions', show); |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
160 renderRegions(data, 1); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
161 }, |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
162 |
1048 | 163 // show region info in a window |
1060 | 164 showRegionInfo : function (data) { |
1048 | 165 var $elem = data.$elem; |
166 var cssPrefix = data.settings.cssPrefix; | |
1060 | 167 var infoselector = '#'+cssPrefix+'regionInfo'; |
168 if (fn.find(data, infoselector)) { | |
1048 | 169 fn.withdraw($info); |
170 return; | |
171 } | |
172 var html = '\ | |
173 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\ | |
1060 | 174 <table class="'+cssPrefix+'infoheader">\ |
175 <tr>\ | |
176 <td class="'+cssPrefix+'infobutton html">HTML</td>\ | |
177 <td class="'+cssPrefix+'infobutton svgattr">SVG</td>\ | |
178 <td class="'+cssPrefix+'infobutton csv">CSV</td>\ | |
179 <td class="'+cssPrefix+'infobutton digilib">Digilib</td>\ | |
180 <td class="'+cssPrefix+'infobutton x">X</td>\ | |
181 </tr>\ | |
182 </table>\ | |
1048 | 183 </div>'; |
184 $info = $(html); | |
185 $info.appendTo($elem); | |
186 $info.append(regionInfoHTML(data)); | |
187 $info.append(regionInfoSVG(data)); | |
1060 | 188 $info.append(regionInfoCSV(data)); |
1048 | 189 $info.append(regionInfoDigilib(data)); |
190 var bind = function(name) { | |
1060 | 191 $info.find('.'+name).on('click.regioninfo', function () { |
1048 | 192 $info.find('div.'+cssPrefix+'info').hide(); |
193 $info.find('div.'+cssPrefix+name).show(); | |
1060 | 194 fn.centerOnScreen(data, $info); |
832
e4133946a9ad
display regions as HTML for use in digilib element
hertzhaft
parents:
824
diff
changeset
|
195 }); |
1048 | 196 }; |
197 bind('html'); | |
198 bind('svgattr'); | |
1060 | 199 bind('csv'); |
1048 | 200 bind('digilib'); |
201 $info.find('.x').on('click.regioninfo', function () { | |
202 fn.withdraw($info); | |
203 }); | |
204 $info.fadeIn(); | |
1060 | 205 fn.centerOnScreen(data, $info); |
991
497ab03868ab
moved marks to separate plugin. (pack and unpack is still in digilib.js)
robcast
parents:
969
diff
changeset
|
206 } |
792 | 207 }; |
208 | |
813 | 209 // store a region div |
210 var storeRegion = function (data, $regionDiv) { | |
211 var regions = data.regions; | |
212 var rect = geom.rectangle($regionDiv); | |
213 var regionRect = data.imgTrafo.invtransform(rect); | |
214 regionRect.$div = $regionDiv; | |
215 regions.push(regionRect); | |
216 console.debug("regions", data.regions, "regionRect", regionRect); | |
217 }; | |
218 | |
855 | 219 // html for later insertion |
220 var regionInfoHTML = function (data) { | |
996 | 221 var cssPrefix = data.settings.cssPrefix; |
222 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'html"/>'); | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
223 $infoDiv.append($('<div/>').text('<map class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">')); |
855 | 224 $.each(data.regions, function(index, r) { |
872 | 225 var area = [ |
226 fn.cropFloatStr(r.x), | |
227 fn.cropFloatStr(r.y), | |
228 fn.cropFloatStr(r.width), | |
229 fn.cropFloatStr(r.height)].join(','); | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
230 $infoDiv.append($('<div/>').text('<area coords="' + area + '"/>')); |
855 | 231 }); |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
232 $infoDiv.append($('<div/>').text('</map>')); |
855 | 233 return $infoDiv; |
234 }; | |
235 | |
236 // SVG-style | |
237 var regionInfoSVG = function (data) { | |
996 | 238 var cssPrefix = data.settings.cssPrefix; |
239 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'svgattr"/>'); | |
855 | 240 $.each(data.regions, function(index, r) { |
872 | 241 var area = [ |
242 fn.cropFloatStr(r.x), | |
243 fn.cropFloatStr(r.y), | |
244 fn.cropFloatStr(r.width), | |
245 fn.cropFloatStr(r.height)].join(' '); | |
855 | 246 $infoDiv.append($('<div/>').text('"' + area + '"')); |
247 }); | |
248 return $infoDiv; | |
249 }; | |
250 | |
1060 | 251 // SVG-style |
252 var regionInfoCSV = function (data) { | |
253 var cssPrefix = data.settings.cssPrefix; | |
254 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>'); | |
255 $.each(data.regions, function(index, r) { | |
256 var area = [ | |
257 fn.cropFloatStr(r.x), | |
258 fn.cropFloatStr(r.y), | |
259 fn.cropFloatStr(r.width), | |
260 fn.cropFloatStr(r.height)].join(','); | |
261 $infoDiv.append($('<div/>').text(index+1 + ": " + area)); | |
262 }); | |
263 return $infoDiv; | |
264 }; | |
855 | 265 // digilib-style |
266 var regionInfoDigilib = function (data) { | |
996 | 267 var cssPrefix = data.settings.cssPrefix; |
268 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>'); | |
855 | 269 $.each(data.regions, function(index, r) { |
862 | 270 var area = r.toString(); |
855 | 271 $infoDiv.append($('<div/>').text(area)); |
272 }); | |
273 return $infoDiv; | |
274 }; | |
275 | |
813 | 276 // add a region to data.$elem |
873 | 277 var addRegionDiv = function (data, index, attributes) { |
1025 | 278 var settings = data.settings; |
279 var cssPrefix = settings.cssPrefix; | |
823 | 280 var nr = index + 1; // we count regions from 1 |
996 | 281 var $regionDiv = $('<div class="'+cssPrefix+'region '+cssPrefix+'overlay" style="display:none"/>'); |
813 | 282 data.$elem.append($regionDiv); |
1025 | 283 if (settings.showRegionNumbers) { |
1024 | 284 var $regionLink = $('<a class="'+cssPrefix+'regionnumber">'+nr+'</a>'); |
920 | 285 if (attributes) $regionLink.attr(attributes); |
851 | 286 $regionDiv.append($regionLink); |
813 | 287 } |
1025 | 288 var url = null; |
289 if (attributes) { | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
290 // copy attributes to div except href |
1025 | 291 if (attributes.href) { |
292 url = attributes.href; | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
293 // copy attributes |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
294 var attrs = $.extend({}, attributes); |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
295 delete attrs.href; |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
296 $regionDiv.attr(attrs); |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
297 } else { |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
298 $regionDiv.attr(attributes); |
1025 | 299 } |
300 } | |
301 if (settings.autoZoomRegionLinks || settings.fullRegionLinks) { | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
302 // handle click events on div |
1025 | 303 var region = data.regions[index]; |
304 $regionDiv.on('click.dlRegion', function(evt) { | |
305 if (settings.fullRegionLinks && url) { | |
306 //TODO: how about target? | |
307 window.location = url; | |
308 } | |
309 if (evt.target !== $regionDiv.get(0)) { | |
310 // this was not our event | |
311 return; | |
1024 | 312 } |
1025 | 313 if (settings.autoZoomRegionLinks) { |
314 // zoom to region | |
315 digilib.actions.zoomArea(data, region); | |
1024 | 316 } |
851 | 317 }); |
823 | 318 } |
813 | 319 return $regionDiv; |
320 }; | |
321 | |
851 | 322 // create a region div from the data.regions array |
947 | 323 var createRegionDiv = function (data, regions, index, attributes) { |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
324 var region = regions[index]; |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
325 // check if div exists |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
326 if (region.$div != null) return region.$div; |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
327 // create and add div |
873 | 328 var $regionDiv = addRegionDiv(data, index, attributes); |
813 | 329 region.$div = $regionDiv; |
330 return $regionDiv; | |
331 }; | |
332 | |
851 | 333 // create regions from URL parameters |
334 var createRegionsFromURL = function (data) { | |
335 unpackRegions(data); | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
336 var regions = data.regions; |
832
e4133946a9ad
display regions as HTML for use in digilib element
hertzhaft
parents:
824
diff
changeset
|
337 $.each(regions, function(i) { |
947 | 338 createRegionDiv(data, regions, i); |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
339 }); |
792 | 340 }; |
341 | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
342 // create regions from HTML |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
343 var createRegionsFromHTML = function (data) { |
823 | 344 var regions = data.regions; |
1025 | 345 // regions are defined in "area" tags |
346 var $content = data.$elem.find(data.settings.regionContentSelector); | |
851 | 347 console.debug("createRegionsFromHTML. elems: ", $content); |
835 | 348 $content.each(function(index, a) { |
349 var $a = $(a); | |
852 | 350 // the "coords" attribute contains the region coords (0..1) |
351 var coords = $a.attr('coords'); | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
352 var pos = coords.split(',', 4); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
353 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
354 rect.fromHtml = true; |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
355 regions.push(rect); |
1024 | 356 // copy some attributes |
873 | 357 var attributes = {}; |
1024 | 358 for (var n in {'id':1, 'href':1, 'title':1, 'target':1, 'style':1}) { |
359 attributes[n] = $a.attr(n); | |
360 } | |
851 | 361 // create the div |
947 | 362 var $regionDiv = createRegionDiv(data, regions, index, attributes); |
851 | 363 var $contents = $a.contents().clone(); |
1025 | 364 if (attributes.href != null) { |
365 // wrap contents in a-tag | |
366 var $ca = $('<a href="'+attributes.href+'"/>'); | |
367 $ca.append($contents); | |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
368 // alt attribute is also content (BTW: area-tag has no content()) |
1025 | 369 $ca.append($a.attr('alt')); |
370 $regionDiv.append($ca); | |
371 } else { | |
372 $regionDiv.append($contents); | |
373 // alt attribute is also content (BTW: area-tag has no content()) | |
374 $regionDiv.append($a.attr('alt')); | |
375 } | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
376 }); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
377 }; |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
378 |
813 | 379 // show a region on top of the scaler image |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
380 var renderRegion = function (data, index, anim) { |
813 | 381 if (!data.imgTrafo) return; |
792 | 382 var regions = data.regions; |
950
164d69e2c481
much nicer implementation of preview for scrolling and zooming.
robcast
parents:
947
diff
changeset
|
383 var zoomArea = data.zoomArea; |
813 | 384 if (index > regions.length) return; |
851 | 385 var region = regions[index]; |
813 | 386 var $regionDiv = region.$div; |
387 if (!$regionDiv) { | |
950
164d69e2c481
much nicer implementation of preview for scrolling and zooming.
robcast
parents:
947
diff
changeset
|
388 console.error("renderRegion: region has no $div", region); |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
389 // alert("renderRegion: region has no $div to show"); |
813 | 390 return; |
391 } | |
392 var regionRect = region.copy(); | |
393 var show = data.settings.isRegionVisible; | |
950
164d69e2c481
much nicer implementation of preview for scrolling and zooming.
robcast
parents:
947
diff
changeset
|
394 if (show && zoomArea.overlapsRect(regionRect)) { |
164d69e2c481
much nicer implementation of preview for scrolling and zooming.
robcast
parents:
947
diff
changeset
|
395 regionRect.clipTo(zoomArea); |
813 | 396 var screenRect = data.imgTrafo.transform(regionRect); |
851 | 397 console.debug("renderRegion: pos=",geom.position(screenRect)); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
398 if (anim) { |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
399 $regionDiv.fadeIn(); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
400 } else{ |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
401 $regionDiv.show(); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
402 } |
1024 | 403 // adjustDiv sets wrong coords when called BEFORE show() |
851 | 404 screenRect.adjustDiv($regionDiv); |
813 | 405 } else { |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
406 if (anim) { |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
407 $regionDiv.fadeOut(); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
408 } else{ |
824 | 409 $regionDiv.hide(); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
410 } |
813 | 411 } |
412 }; | |
413 | |
414 // show regions | |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
415 var renderRegions = function (data, anim) { |
813 | 416 for (var i = 0; i < data.regions.length ; i++) { |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
417 renderRegion(data, i, anim); |
813 | 418 } |
419 }; | |
420 | |
421 var unpackRegions = function (data) { | |
422 // create regions from parameters | |
423 var rg = data.settings.rg; | |
424 if (rg == null) return; | |
425 var regions = data.regions; | |
958
2a2e8c039c29
changed regions parameter separator to the same as for marks
hertzhaft
parents:
950
diff
changeset
|
426 var rs = rg.split(","); |
813 | 427 for (var i = 0; i < rs.length; i++) { |
428 var r = rs[i]; | |
958
2a2e8c039c29
changed regions parameter separator to the same as for marks
hertzhaft
parents:
950
diff
changeset
|
429 var pos = r.split("/", 4); |
813 | 430 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); |
431 regions.push(rect); | |
792 | 432 } |
433 }; | |
434 | |
813 | 435 // pack regions array into a parameter string |
436 var packRegions = function (data) { | |
437 var regions = data.regions; | |
815 | 438 if (!regions.length) { |
439 data.settings.rg = null; | |
440 return; | |
441 } | |
813 | 442 var rg = ''; |
443 for (var i = 0; i < regions.length; i++) { | |
1024 | 444 var region = regions[i]; |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
445 // skip regions from HTML |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
446 if (region.fromHtml != null) continue; |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
447 if (rg) { |
958
2a2e8c039c29
changed regions parameter separator to the same as for marks
hertzhaft
parents:
950
diff
changeset
|
448 rg += ','; |
792 | 449 } |
813 | 450 rg += [ |
451 fn.cropFloatStr(region.x), | |
452 fn.cropFloatStr(region.y), | |
453 fn.cropFloatStr(region.width), | |
454 fn.cropFloatStr(region.height) | |
958
2a2e8c039c29
changed regions parameter separator to the same as for marks
hertzhaft
parents:
950
diff
changeset
|
455 ].join('/'); |
813 | 456 } |
457 data.settings.rg = rg; | |
792 | 458 }; |
459 | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
460 // reload display after a region has been added or removed |
813 | 461 var redisplay = function (data) { |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
462 if (data.settings.processUserRegions) { |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
463 packRegions(data); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
464 } |
813 | 465 fn.redisplay(data); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
466 }; |
813 | 467 |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
468 // event handler, reads region parameter and creates region divs |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
469 var handleSetup = function (evt) { |
941 | 470 var data = this; |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
471 var settings = data.settings; |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
472 console.debug("regions: handleSetup", settings.rg); |
1048 | 473 // regions with content are given in HTML divs |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
474 if (settings.processHtmlRegions) { |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
475 createRegionsFromHTML(data); |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
476 } |
1048 | 477 // regions are defined in the URL |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
478 if (settings.processUserRegions) { |
851 | 479 createRegionsFromURL(data); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
480 } |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
481 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
482 |
851 | 483 // event handler, sets buttons and shows regions when scaler img is reloaded |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
484 var handleUpdate = function (evt) { |
941 | 485 var data = this; |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
486 console.debug("regions: handleUpdate"); |
848 | 487 var settings = data.settings; |
488 fn.highlightButtons(data, 'regions' , settings.isRegionVisible); | |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
489 renderRegions(data); |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
490 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
491 |
1048 | 492 // additional buttons |
493 var installButtons = function (data) { | |
494 var settings = data.settings; | |
495 var mode = settings.interactionMode; | |
496 var buttonSettings = settings.buttonSettings[mode]; | |
497 // configure buttons through digilib "regionSet" option | |
498 var buttonSet = settings.regionSet || regionSet; | |
499 // set regionSet to [] or '' for no buttons (when showing regions only) | |
500 if (buttonSet.length && buttonSet.length > 0) { | |
501 buttonSettings.regionSet = buttonSet; | |
502 buttonSettings.buttonSets.push('regionSet'); | |
503 } | |
504 }; | |
505 | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
506 // plugin installation called by digilib on plugin object. |
813 | 507 var install = function(plugin) { |
508 digilib = plugin; | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
509 console.debug('installing regions plugin. digilib:', digilib); |
1048 | 510 // import digilib functions |
511 $.extend(fn, digilib.fn); | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
512 // import geometry classes |
813 | 513 geom = fn.geometry; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
514 // add defaults, actions, buttons |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
515 $.extend(digilib.defaults, defaults); |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
516 $.extend(digilib.actions, actions); |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
517 $.extend(digilib.buttons, buttons); |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
518 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
519 |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
520 // plugin initialization |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
521 var init = function (data) { |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
522 console.debug('initialising regions plugin. data:', data); |
835 | 523 var $elem = data.$elem; |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
524 var settings = data.settings; |
996 | 525 var cssPrefix = data.settings.cssPrefix; |
823 | 526 // regions array |
527 data.regions = []; | |
1048 | 528 // install event handlers |
848 | 529 var $data = $(data); |
920 | 530 $data.on('setup', handleSetup); |
531 $data.on('update', handleUpdate); | |
1048 | 532 // install buttons |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
533 if (settings.processUserRegions) { |
823 | 534 // add "rg" to digilibParamNames |
848 | 535 settings.digilibParamNames.push('rg'); |
1048 | 536 if (digilib.plugins.buttons != null) { |
537 installButtons(data); | |
823 | 538 } |
813 | 539 } |
792 | 540 }; |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
541 |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
542 // plugin object with name and install/init methods |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
543 // shared objects filled by digilib on registration |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
544 var pluginProperties = { |
1048 | 545 name : 'regions', |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
546 install : install, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
547 init : init, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
548 buttons : {}, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
549 actions : {}, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
550 fn : {}, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
551 plugins : {} |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
552 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
553 |
792 | 554 if ($.fn.digilib == null) { |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
555 $.error("jquery.digilib.regions must be loaded after jquery.digilib!"); |
792 | 556 } else { |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
557 $.fn.digilib('plugin', pluginProperties); |
792 | 558 } |
559 })(jQuery); |