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