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