Mercurial > hg > digilib-old
annotate webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1104:415da4e4b76b
adapting button sets
author | hertzhaft |
---|---|
date | Fri, 26 Oct 2012 14:54:11 +0200 |
parents | d8c380faa347 |
children | 365f95a14057 |
rev | line source |
---|---|
792 | 1 /** optional digilib regions plugin |
2 | |
1023 | 3 Mark up a digilib image with rectangular regions. |
4 | |
1102 | 5 If the parameter "processHtmlRegions" is set, the plugin reads region data from HTML. |
6 Region data should be declared inside in the digilib element, like so: | |
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. | |
1102 | 16 To have regions with content use "a" tags, like so:. |
1067 | 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 | |
1102 | 28 Regions can also be defined in Javascript: |
29 Set the parameter "regions" to an array with items. | |
30 Each item should be an object containing the following fields: | |
31 | |
32 rect | |
33 a retangle with relative coordinates (0..1); | |
34 index (optional) | |
35 a number to display in the region | |
36 attributes (optional) | |
37 HTML attributes for the region (id, class, title) | |
38 inner (optional) | |
39 inner HTML (has to be a jQuery object) | |
40 | |
792 | 41 */ |
42 | |
43 (function($) { | |
813 | 44 // the digilib object |
996 | 45 var digilib = null; |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
46 // the normal zoom area |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
47 var FULL_AREA = null; |
813 | 48 // the functions made available by digilib |
1048 | 49 var fn = { |
50 // dummy function to avoid errors, gets overwritten by buttons plugin | |
51 highlightButtons : function () { | |
52 console.debug('regions: dummy function - highlightButtons'); | |
53 } | |
54 }; | |
813 | 55 // affine geometry plugin |
996 | 56 var geom = null; |
1102 | 57 // convenience variable, set in init() |
58 var CSS = ''; | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
59 |
792 | 60 var buttons = { |
1091 | 61 defineregion : { |
62 onclick : "defineUserRegion", | |
813 | 63 tooltip : "define a region", |
792 | 64 icon : "addregion.png" |
65 }, | |
1091 | 66 removeregion : { |
67 onclick : "removeUserRegion", | |
68 tooltip : "delete the last user defined region", | |
792 | 69 icon : "delregion.png" |
70 }, | |
1091 | 71 removeallregions : { |
72 onclick : "removeAllUserRegions", | |
73 tooltip : "delete all user defined regions", | |
1067 | 74 icon : "delallregions.png" |
75 }, | |
792 | 76 regions : { |
77 onclick : "toggleRegions", | |
78 tooltip : "show or hide regions", | |
79 icon : "regions.png" | |
80 }, | |
1092 | 81 findcoords : { |
82 onclick : "findCoords", | |
1098 | 83 tooltip : "find a region by entering its relative coordinates", |
84 icon : "regions.png" | |
85 }, | |
86 finddata : { | |
87 onclick : "findData", | |
88 tooltip : "find a region by entering text", | |
1092 | 89 icon : "regions.png" |
90 }, | |
1048 | 91 regioninfo : { |
855 | 92 onclick : "showRegionInfo", |
1091 | 93 tooltip : "show information about user defined regions", |
792 | 94 icon : "regioninfo.png" |
95 } | |
96 }; | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
97 |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
98 var defaults = { |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
99 // are regions being edited? |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
100 'editRegions' : false, |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
101 // are regions shown? |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
102 'isRegionVisible' : true, |
813 | 103 // are region numbers shown? |
1023 | 104 'showRegionNumbers' : true, |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
105 // default width for region when only point is given |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
106 'regionWidth' : 0.005, |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
107 // is there region content in the page? |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
108 'processHtmlRegions' : false, |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
109 // region defined by users and in the URL |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
110 'processUserRegions' : true, |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
111 // callback for click on region |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
112 'onClickRegion' : null, |
1091 | 113 // callback when new user region is defined |
114 'onNewRegion' : null, | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
115 // turn any region into a clickable link to its detail view (DEPRECATED) |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
116 'autoZoomOnClick' : false, |
1091 | 117 // css selector for area/a elements (must also be marked with class "dl-keep") |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
118 'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a', |
1104 | 119 // general buttonset of this plugin |
120 'regionSet' : ['regions', 'findcoords', 'finddata', 'lessoptions'], | |
121 // buttonset for region editing by user | |
122 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions', 'regioninfo'], | |
813 | 123 // url param for regions |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
124 'rg' : null, |
1102 | 125 // array with region data |
126 'regions' : null, | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
127 // region attributes to copy from HTML |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
128 'regionAttributes' : { |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
129 'id' :1, |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
130 'href' :1, |
1102 | 131 'name' :1, |
132 'alt' :1, | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
133 'target':1, |
1102 | 134 'title' :1, |
135 'style' :1 | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
136 } |
813 | 137 }; |
792 | 138 |
139 var actions = { | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
140 |
792 | 141 // define a region interactively with two clicked points |
1091 | 142 defineUserRegion : function(data) { |
813 | 143 if (!data.settings.isRegionVisible) { |
144 alert("Please turn on regions visibility!"); | |
145 return; | |
146 } | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
147 var $elem = data.$elem; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
148 var $body = $('body'); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
149 var bodyRect = geom.rectangle($body); |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
150 var $scaler = data.$scaler; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
151 var scalerRect = geom.rectangle($scaler); |
792 | 152 var pt1, pt2; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
153 // overlay prevents other elements from reacting to mouse events |
1102 | 154 var $overlay = $('<div class="'+CSS+'overlay" style="position:absolute"/>'); |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
155 $body.append($overlay); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
156 bodyRect.adjustDiv($overlay); |
1102 | 157 var attr = {'class' : CSS+"regionURL"}; |
158 var $regionDiv = newRegionDiv(data, attr); | |
792 | 159 |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
160 // mousedown handler: start sizing |
792 | 161 var regionStart = function (evt) { |
162 pt1 = geom.position(evt); | |
163 // setup and show zoom div | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
164 pt1.adjustDiv($regionDiv); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
165 $regionDiv.width(0).height(0); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
166 $regionDiv.show(); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
167 // register mouse events |
920 | 168 $overlay.on("mousemove.dlRegion", regionMove); |
169 $overlay.on("mouseup.dlRegion", regionEnd); | |
792 | 170 return false; |
171 }; | |
172 | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
173 // mousemove handler: size region |
792 | 174 var regionMove = function (evt) { |
175 pt2 = geom.position(evt); | |
176 var rect = geom.rectangle(pt1, pt2); | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
177 rect.clipTo(scalerRect); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
178 // update region |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
179 rect.adjustDiv($regionDiv); |
792 | 180 return false; |
181 }; | |
182 | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
183 // mouseup handler: end sizing |
792 | 184 var regionEnd = function (evt) { |
185 pt2 = geom.position(evt); | |
186 // assume a click and continue if the area is too small | |
187 var clickRect = geom.rectangle(pt1, pt2); | |
188 if (clickRect.getArea() <= 5) return false; | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
189 // unregister mouse events and get rid of overlay |
920 | 190 $overlay.off("mousemove.dlRegion", regionMove); |
191 $overlay.off("mouseup.dlRegion", regionEnd); | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
192 $overlay.remove(); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
193 // clip region |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
194 clickRect.clipTo(scalerRect); |
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
195 clickRect.adjustDiv($regionDiv); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
196 regionTrafo(data, $regionDiv); |
1103 | 197 var count = getRegions(data, 'regionURL').length; |
198 addRegionNumber(data, $regionDiv, count); | |
1091 | 199 fn.highlightButtons(data, 'defineregion', 0); |
813 | 200 redisplay(data); |
1095 | 201 $(data).trigger('newRegion', [$regionDiv]); |
792 | 202 return false; |
203 }; | |
204 | |
205 // bind start zoom handler | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
206 $overlay.one('mousedown.dlRegion', regionStart); |
1091 | 207 fn.highlightButtons(data, 'defineregion', 1); |
792 | 208 }, |
209 | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
210 // remove the last added URL region |
1091 | 211 removeUserRegion : function (data) { |
813 | 212 if (!data.settings.isRegionVisible) { |
213 alert("Please turn on regions visibility!"); | |
214 return; | |
215 } | |
1102 | 216 var selector = 'div.'+CSS+'regionURL'; |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
217 var $regionDiv = data.$elem.find(selector).last(); |
792 | 218 $regionDiv.remove(); |
813 | 219 redisplay(data); |
792 | 220 }, |
221 | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
222 // remove all manually added regions (defined through URL "rg" parameter) |
1091 | 223 removeAllUserRegions : function (data) { |
1067 | 224 if (!data.settings.isRegionVisible) { |
225 alert("Please turn on regions visibility!"); | |
226 return; | |
227 } | |
1102 | 228 var selector = 'div.'+CSS+'regionURL'; |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
229 var $regionDivs = data.$elem.find(selector); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
230 $regionDivs.remove(); |
1067 | 231 redisplay(data); |
232 }, | |
233 | |
813 | 234 // show/hide regions |
1060 | 235 toggleRegions : function (data) { |
813 | 236 var show = !data.settings.isRegionVisible; |
237 data.settings.isRegionVisible = show; | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
238 fn.highlightButtons(data, 'regions', show); |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
239 renderRegions(data, 1); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
240 }, |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
241 |
1048 | 242 // show region info in a window |
1060 | 243 showRegionInfo : function (data) { |
1048 | 244 var $elem = data.$elem; |
1102 | 245 var infoSelector = '#'+CSS+'regionInfo'; |
1098 | 246 if (fn.isOnScreen(data, infoSelector)) return; // already onscreen |
1048 | 247 var html = '\ |
1102 | 248 <div id="'+CSS+'regionInfo" class="'+CSS+'keep '+CSS+'regionInfo">\ |
249 <table class="'+CSS+'infoheader">\ | |
1060 | 250 <tr>\ |
1102 | 251 <td class="'+CSS+'infobutton html">HTML</td>\ |
252 <td class="'+CSS+'infobutton svgattr">SVG</td>\ | |
253 <td class="'+CSS+'infobutton csv">CSV</td>\ | |
254 <td class="'+CSS+'infobutton digilib">Digilib</td>\ | |
255 <td class="'+CSS+'infobutton x">X</td>\ | |
1060 | 256 </tr>\ |
257 </table>\ | |
1048 | 258 </div>'; |
259 $info = $(html); | |
260 $info.appendTo($elem); | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
261 var $regions = getRegions(data, 'regionURL'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
262 $info.append(regionInfoHTML(data, $regions)); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
263 $info.append(regionInfoSVG(data, $regions)); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
264 $info.append(regionInfoCSV(data, $regions)); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
265 $info.append(regionInfoDigilib(data, $regions)); |
1048 | 266 var bind = function(name) { |
1060 | 267 $info.find('.'+name).on('click.regioninfo', function () { |
1102 | 268 $info.find('div.'+CSS+'info').hide(); |
269 $info.find('div.'+CSS+name).show(); | |
1060 | 270 fn.centerOnScreen(data, $info); |
832
e4133946a9ad
display regions as HTML for use in digilib element
hertzhaft
parents:
824
diff
changeset
|
271 }); |
1048 | 272 }; |
273 bind('html'); | |
274 bind('svgattr'); | |
1060 | 275 bind('csv'); |
1048 | 276 bind('digilib'); |
277 $info.find('.x').on('click.regioninfo', function () { | |
278 fn.withdraw($info); | |
279 }); | |
280 $info.fadeIn(); | |
1060 | 281 fn.centerOnScreen(data, $info); |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
282 }, |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
283 |
1091 | 284 // display region coordinates in an edit line |
1095 | 285 showRegionCoords : function (data, $regionDiv) { |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
286 var $elem = data.$elem; |
1095 | 287 var rect = $regionDiv.data('rect'); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
288 var text = $regionDiv.data('text'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
289 var coordString = packCoords(rect, ','); |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
290 var html = '\ |
1102 | 291 <div id="'+CSS+'regionInfo" class="'+CSS+'keep '+CSS+'regionInfo">\ |
1098 | 292 <div>'+text+'</div>\ |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
293 <input name="coords" type="text" size="30" maxlength="40" value="'+coordString+'"/>\ |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
294 </div>'; |
1091 | 295 var $info = $(html); |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
296 $info.appendTo($elem); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
297 $div = $info.find('div'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
298 $div.text(text); |
1091 | 299 $input = $info.find('input'); |
300 $input.on('focus.regioninfo', function (event) { | |
301 this.select(); | |
302 }); | |
303 $input.on('blur.regioninfo', function (event) { | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
304 fn.withdraw($info); |
1091 | 305 return false; |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
306 }); |
1091 | 307 $input.on('keypress.regioninfo', function (event) { |
1092 | 308 fn.withdraw($info); // OBS: "return false" disables copy! |
1091 | 309 }); |
310 $input.prop("readonly",true); | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
311 $info.fadeIn(); |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
312 fn.centerOnScreen(data, $info); |
1091 | 313 $input.focus(); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
314 console.debug('showRegionCoords', coordString); |
1092 | 315 }, |
1091 | 316 |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
317 // draw a find region from coords and move into view |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
318 regionFromCoords : function (data, coords) { |
1095 | 319 var rect = parseCoords(data, coords); |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
320 if (rect == null) { |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
321 alert('invalid coordinates: ' + coords); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
322 return; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
323 } |
1102 | 324 var attr = { 'class' : CSS+'regionURL '+CSS+'findregion' }; |
325 var item = { 'rect' : rect, 'attributes' : attr }; | |
326 var $regionDiv = addRegionDiv(data, item); | |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
327 var za = data.zoomArea; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
328 if (!fn.isFullArea(za)) { |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
329 za.setCenter(rect.getCenter()).stayInside(FULL_AREA); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
330 if (!za.containsRect(rect)) { |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
331 za = FULL_AREA.copy(); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
332 } |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
333 fn.setZoomArea(data, za); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
334 } |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
335 console.debug('regionFromCoords', coords, rect, za); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
336 redisplay(data); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
337 }, |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
338 |
1092 | 339 // find coordinates and display as new region |
340 findCoords : function (data) { | |
341 var $elem = data.$elem; | |
1102 | 342 var findSelector = '#'+CSS+'regionFindCoords'; |
1098 | 343 if (fn.isOnScreen(data, findSelector)) return; // already onscreen |
1092 | 344 var html = '\ |
1102 | 345 <div id="'+CSS+'regionFindCoords" class="'+CSS+'keep '+CSS+'regionInfo">\ |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
346 <div>coordinates to find:</div>\ |
1102 | 347 <form class="'+CSS+'form">\ |
1092 | 348 <div>\ |
1102 | 349 <input class="'+CSS+'input" name="coords" type="text" size="30" maxlength="40"/> \ |
1092 | 350 </div>\ |
1102 | 351 <input class="'+CSS+'submit" type="submit" name="sub" value="Ok"/>\ |
352 <input class="'+CSS+'cancel" type="button" value="Cancel"/>\ | |
1092 | 353 </form>\ |
354 </div>'; | |
355 var $info = $(html); | |
356 $info.appendTo($elem); | |
357 var $form = $info.find('form'); | |
1102 | 358 var $input = $info.find('input.'+CSS+'input'); |
1092 | 359 // handle submit |
360 $form.on('submit', function () { | |
361 var coords = $input.val(); | |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
362 actions.regionFromCoords(data, coords); |
1092 | 363 fn.withdraw($info); |
364 return false; | |
1102 | 365 }); |
1092 | 366 // handle cancel |
1102 | 367 $form.find('.'+CSS+'cancel').on('click', function () { |
1092 | 368 fn.withdraw($info); |
1102 | 369 }); |
1092 | 370 $info.fadeIn(); |
371 fn.centerOnScreen(data, $info); | |
372 $input.focus(); | |
1098 | 373 }, |
374 | |
375 // find text data and display as new region | |
376 findData : function (data) { | |
377 var $elem = data.$elem; | |
1102 | 378 var findSelector = '#'+CSS+'regionFindData'; |
1098 | 379 if (fn.isOnScreen(data, findSelector)) return; // already onscreen |
380 var textOptions = getTextOptions(data, 'regionHTML'); | |
381 var html = '\ | |
1102 | 382 <div id="'+CSS+'regionFindData" class="'+CSS+'keep '+CSS+'regionInfo">\ |
1098 | 383 <div>text to find:</div>\ |
1102 | 384 <form class="'+CSS+'form">\ |
1098 | 385 <div>\ |
1102 | 386 <select class="'+CSS+'findData">\ |
1098 | 387 '+textOptions+'\ |
388 </select>\ | |
389 </div>\ | |
1102 | 390 <input class="'+CSS+'input" name="data" type="text" size="30" maxlength="40"/> \ |
391 <input class="'+CSS+'submit" type="submit" name="sub" value="Ok"/>\ | |
392 <input class="'+CSS+'cancel" type="button" value="Cancel"/>\ | |
1098 | 393 </form>\ |
394 </div>'; | |
395 var $info = $(html); | |
396 $info.appendTo($elem); | |
397 var $form = $info.find('form'); | |
1102 | 398 var $input = $info.find('input.'+CSS+'input'); |
1098 | 399 var $select = $info.find('select'); |
400 var findRegion = function () { | |
401 var coords = $select.val(); | |
402 actions.regionFromCoords(data, coords); | |
403 fn.withdraw($info); | |
404 return false; | |
405 }; | |
406 // handle submit | |
407 $form.on('submit', findRegion); | |
408 $select.on('change', findRegion); | |
409 // handle cancel | |
1102 | 410 $form.find('.'+CSS+'cancel').on('click', function () { |
1098 | 411 fn.withdraw($info); |
1102 | 412 }); |
1098 | 413 $info.fadeIn(); |
414 fn.centerOnScreen(data, $info); | |
415 $input.focus(); | |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
416 } |
792 | 417 }; |
418 | |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
419 // make a coords string |
1095 | 420 var packCoords = function (rect, sep) { |
1091 | 421 if (sep == null) sep = ','; // comma as default separator |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
422 return [ |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
423 fn.cropFloatStr(rect.x), |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
424 fn.cropFloatStr(rect.y), |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
425 fn.cropFloatStr(rect.width), |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
426 fn.cropFloatStr(rect.height) |
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
427 ].join(sep); |
813 | 428 }; |
429 | |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
430 // create a rectangle from a coords string |
1095 | 431 var parseCoords = function (data, coords) { |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
432 var pos = coords.match(/[0-9.]+/g); // TODO: check validity? |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
433 if (pos == null) { |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
434 return null; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
435 } |
1092 | 436 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
437 if (!fn.isNumber(rect.x) || !fn.isNumber(rect.y)) { |
1092 | 438 return null; |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
439 } |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
440 if (!rect.getArea()) { |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
441 var pt = rect.getPosition(); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
442 rect.width = data.settings.regionWidth; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
443 rect.height = rect.width; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
444 rect.setCenter(pt); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
445 } |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
446 return rect; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
447 }; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
448 |
1095 | 449 // create a new regionDiv and add it to data.$elem |
1102 | 450 var newRegionDiv = function (data, attr) { |
451 var cls = CSS+'region'; | |
1095 | 452 var $regionDiv = $('<div class="'+cls+'" style="display:none"/>'); |
1102 | 453 addRegionAttributes(data, $regionDiv, attr); |
1095 | 454 data.$elem.append($regionDiv); |
455 return $regionDiv; | |
456 }; | |
457 | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
458 // calculate the digilib coordinates of a completed user-defined region |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
459 var regionTrafo = function (data, $regionDiv) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
460 var screenRect = geom.rectangle($regionDiv); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
461 var rect = data.imgTrafo.invtransform(screenRect); |
1095 | 462 $regionDiv.data('rect', rect); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
463 console.debug("regionTrafo", $regionDiv, rect); |
1095 | 464 return rect; |
465 }; | |
466 | |
467 // copy attributes to a region div | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
468 var addRegionAttributes = function (data, $regionDiv, attributes) { |
1095 | 469 if (attributes == null) return; |
470 if (attributes['class']) { | |
471 $regionDiv.addClass(attributes['class']); | |
472 delete attributes['class']; | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
473 } |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
474 if (attributes['href']) { |
1102 | 475 $regionDiv.data('href', attributes['href']); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
476 delete attributes['href']; |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
477 } |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
478 if (attributes['title']) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
479 $regionDiv.data('text', attributes['title']); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
480 } |
1095 | 481 $regionDiv.attr(attributes); |
482 }; | |
483 | |
484 // set region number | |
485 var addRegionNumber = function (data, $regionDiv, index) { | |
1103 | 486 if (!data.settings.showRegionNumbers) return; |
487 if (!fn.isNumber(index)) return; | |
1102 | 488 var $number = $('<a class="'+CSS+'regionnumber">'+index+'</a>'); |
1095 | 489 $regionDiv.append($number); |
490 return $regionDiv; | |
491 }; | |
492 | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
493 // construct a region from a rectangle |
1102 | 494 var addRegionDiv = function (data, item) { |
495 var $regionDiv = newRegionDiv(data, item.attributes); | |
1095 | 496 var settings = data.settings; |
1102 | 497 // add region number |
1103 | 498 addRegionNumber(data, $regionDiv, item.index); |
1102 | 499 // add inner HTML |
500 if (item.inner) { | |
501 $regionDiv.append(item.inner); | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
502 } |
1102 | 503 // store the coordinates in data |
504 $regionDiv.data('rect', item.rect); | |
505 // trigger a region event on click | |
1095 | 506 $regionDiv.on('click.dlRegion', function(evt) { |
1102 | 507 $(data).trigger('regionClick', [$regionDiv]); |
508 }); | |
1095 | 509 return $regionDiv; |
510 }; | |
511 | |
1102 | 512 // create regions from a Javascript array of items |
513 var createRegionsFromJS = function (data, items) { | |
514 $.each(items, function(index, item) { | |
515 addRegionDiv(data, item); | |
516 }); | |
517 }; | |
518 | |
851 | 519 // create regions from URL parameters |
520 var createRegionsFromURL = function (data) { | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
521 var userRegions = unpackRegions(data); |
1102 | 522 if (!userRegions) return; |
523 createRegionsFromJS(data, userRegions); | |
792 | 524 }; |
525 | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
526 // create regions from HTML |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
527 var createRegionsFromHTML = function (data) { |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
528 // regions are defined in "area" tags |
1102 | 529 var $areas = data.$elem.find(data.settings.areaSelector); |
530 console.debug("createRegionsFromHTML - elems found: ", $areas.length); | |
531 $areas.each(function(index, area) { | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
532 var $area = $(area); |
1102 | 533 // the "title" attribute contains the text for the tooltip |
534 var title = $area.attr('title'); | |
852 | 535 // the "coords" attribute contains the region coords (0..1) |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
536 var coords = $area.attr('coords'); |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
537 // create the rectangle |
1095 | 538 var rect = parseCoords(data, coords); |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
539 if (rect == null) { |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
540 return console.error('bad coords in HTML:', title, coords); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
541 } |
1102 | 542 // mark div class as regionHTML |
543 var cls = $area.attr('class') || ''; | |
544 cls += ' '+CSS+'regionHTML'; | |
545 var attr = {'class' : cls}; | |
1095 | 546 // copy attributes |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
547 for (var n in data.settings.regionAttributes) { |
1102 | 548 attr[n] = $area.attr(n); |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
549 } |
1102 | 550 // copy inner HTML |
551 var $inner = $area.contents().clone(); | |
552 if (attr.href != null) { | |
1025 | 553 // wrap contents in a-tag |
1102 | 554 var $a = $('<a href="'+attr.href+'"/>'); |
555 $inner = $a.append($inner); | |
1025 | 556 } |
1102 | 557 var item = {'rect' : rect, 'attributes' : attr, 'inner' : $inner}; |
558 var $regionDiv = addRegionDiv(data, item); | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
559 }); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
560 }; |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
561 |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
562 // select region divs (HTML or URL) |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
563 var getRegions = function (data, selector) { |
1102 | 564 var $regions = data.$elem.find('div.'+CSS+selector); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
565 return $regions; |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
566 }; |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
567 |
1098 | 568 // make text data options html |
569 var getTextOptions = function (data, selector) { | |
1102 | 570 var createOption = function(item, index) { |
1098 | 571 var $item = $(item); |
572 var rect = $item.data('rect'); | |
573 if (rect == null) | |
574 return null; | |
575 var coords = packCoords(rect, ','); | |
576 var text = $item.data('text'); | |
577 return '<option value="'+coords+'">'+text+'</option>'; | |
578 }; | |
579 var $regions = getRegions(data, selector); | |
1102 | 580 var options = $.map($regions, createOption); |
1098 | 581 return options.join(''); |
582 }; | |
583 | |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
584 // list of HTML regions matching text in its title attribute |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
585 var matchRegionText = function (data, text) { |
1098 | 586 var $regions = getRegions(data, 'regionHTML'); |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
587 var re = new RegExp(text); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
588 return $.grep($regions, function($item, index) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
589 return re.match($item.data('text')); |
1094
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
590 }); |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
591 }; |
8d6bc18f7145
some polishing and refactoring, preparation for region text search
hertzhaft
parents:
1093
diff
changeset
|
592 |
1095 | 593 // html for later insertion |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
594 var regionInfoHTML = function (data, $regions) { |
1102 | 595 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'html"/>'); |
596 $infoDiv.append($('<div/>').text('<map class="'+CSS+'keep '+CSS+'regioncontent">')); | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
597 $regions.each(function(index, region) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
598 var rect = $(region).data('rect'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
599 var coords = packCoords(rect, ','); |
1095 | 600 $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>')); |
601 }); | |
602 $infoDiv.append($('<div/>').text('</map>')); | |
603 return $infoDiv; | |
604 }; | |
605 | |
606 // SVG-style | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
607 var regionInfoSVG = function (data, $regions) { |
1102 | 608 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'svgattr"/>'); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
609 $regions.each(function(index, region) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
610 var rect = $(region).data('rect'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
611 var coords = packCoords(rect, ','); |
1095 | 612 $infoDiv.append($('<div/>').text('"' + coords + '"')); |
613 }); | |
614 return $infoDiv; | |
615 }; | |
616 | |
617 // CSV-style | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
618 var regionInfoCSV = function (data, $regions) { |
1102 | 619 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'csv"/>'); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
620 $regions.each(function(index, region) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
621 var rect = $(region).data('rect'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
622 var coords = packCoords(rect, ','); |
1095 | 623 $infoDiv.append($('<div/>').text(index+1 + ": " + coords)); |
624 }); | |
625 return $infoDiv; | |
626 }; | |
627 | |
628 // digilib-style (h,w@x,y) | |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
629 var regionInfoDigilib = function (data, $regions) { |
1102 | 630 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'digilib"/>'); |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
631 $regions.each(function(index, region) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
632 var rect = $(region).data('rect'); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
633 var coords = packCoords(rect, ','); |
1095 | 634 $infoDiv.append($('<div/>').text(coords)); |
635 }); | |
636 return $infoDiv; | |
637 }; | |
638 | |
813 | 639 // show a region on top of the scaler image |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
640 var renderRegion = function (data, $regionDiv, anim) { |
813 | 641 if (!data.imgTrafo) return; |
950
164d69e2c481
much nicer implementation of preview for scrolling and zooming.
robcast
parents:
947
diff
changeset
|
642 var zoomArea = data.zoomArea; |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
643 var rect = $regionDiv.data('rect').copy(); |
813 | 644 var show = data.settings.isRegionVisible; |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
645 if (show && zoomArea.overlapsRect(rect) && !rect.containsRect(zoomArea)) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
646 rect.clipTo(zoomArea); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
647 var screenRect = data.imgTrafo.transform(rect); |
1067 | 648 // console.debug("renderRegion: pos=",geom.position(screenRect)); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
649 if (anim) { |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
650 $regionDiv.fadeIn(); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
651 } else{ |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
652 $regionDiv.show(); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
653 } |
1024 | 654 // adjustDiv sets wrong coords when called BEFORE show() |
851 | 655 screenRect.adjustDiv($regionDiv); |
813 | 656 } else { |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
657 if (anim) { |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
658 $regionDiv.fadeOut(); |
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
659 } else{ |
824 | 660 $regionDiv.hide(); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
661 } |
813 | 662 } |
663 }; | |
664 | |
665 // show regions | |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
666 var renderRegions = function (data, anim) { |
1096
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
667 var render = function(index, region) { |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
668 renderRegion(data, $(region), anim); |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
669 }; |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
670 var $regions = getRegions(data, 'region') |
3c75dda660bf
more refactoring: use jquery selections instead of arrays
hertzhaft
parents:
1095
diff
changeset
|
671 $regions.each(render); |
813 | 672 }; |
673 | |
1091 | 674 // read region data from URL parameters |
813 | 675 var unpackRegions = function (data) { |
676 var rg = data.settings.rg; | |
1095 | 677 if (rg == null) return []; |
678 var coords = rg.split(","); | |
1098 | 679 var regions = $.map(coords, function(coord, index) { |
1095 | 680 var pos = coord.split("/", 4); |
813 | 681 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); |
1102 | 682 var attr = {'class' : CSS+"regionURL"}; |
683 var item = {'rect' : rect, 'index' : index+1, 'attributes' : attr}; | |
684 return item; | |
1095 | 685 }); |
686 return regions; | |
792 | 687 }; |
688 | |
1091 | 689 // pack user regions array into a URL parameter string |
813 | 690 var packRegions = function (data) { |
1102 | 691 var $regions = getRegions(data, 'regionURL'); |
1103 | 692 if ($regions.length == 0 || !data.settings.processUserRegions) { |
815 | 693 data.settings.rg = null; |
694 return; | |
695 } | |
1102 | 696 var pack = function(region, index) { |
1099 | 697 var $region = $(region); |
698 var rect = $region.data('rect'); | |
1102 | 699 var packed = packCoords(rect, '/'); |
700 return packed; | |
1099 | 701 }; |
1102 | 702 var coords = $.map($regions, pack); |
1095 | 703 var rg = coords.join(','); |
813 | 704 data.settings.rg = rg; |
1088
16215fc22fbf
better separation of HTML and user defined regions
hertzhaft
parents:
1067
diff
changeset
|
705 console.debug('pack regions:', rg); |
792 | 706 }; |
707 | |
1095 | 708 // zoom to the region coordinates |
709 var zoomToRegion = function (data, region) { | |
710 digilib.actions.zoomArea(data, region); | |
711 }; | |
712 | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
713 // reload display after a region has been added or removed |
813 | 714 var redisplay = function (data) { |
1103 | 715 packRegions(data); |
813 | 716 fn.redisplay(data); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
717 }; |
813 | 718 |
1091 | 719 // event handler, gets called when a newRegion event is triggered |
1095 | 720 var handleNewRegion = function (evt, $regionDiv) { |
1091 | 721 var data = this; |
722 var settings = data.settings; | |
1095 | 723 console.debug("regions: handleNewRegion", $regionDiv); |
1091 | 724 if (typeof settings.onNewRegion === 'function') { |
725 // execute callback | |
1095 | 726 return settings.onNewRegion(data, $regionDiv); |
1091 | 727 } |
728 if (typeof settings.onNewRegion === 'string') { | |
729 // execute action | |
1095 | 730 return actions[settings.onNewRegion](data, $regionDiv); |
1091 | 731 } |
732 }; | |
733 | |
734 // event handler, gets called when a regionClick event is triggered | |
1095 | 735 var handleRegionClick = function (evt, $regionDiv) { |
1091 | 736 var data = this; |
737 var settings = data.settings; | |
1095 | 738 console.debug("regions: handleRegionClick", $regionDiv); |
739 if ($regionDiv.data('href')) { | |
1091 | 740 // follow the href attribute of the region area |
1095 | 741 window.location = $regionDiv.data('href'); //TODO: how about target? |
1091 | 742 } |
743 if (typeof settings.onClickRegion === 'function') { | |
744 // execute callback | |
1095 | 745 return settings.onClickRegion(data, $regionDiv); |
1091 | 746 } |
747 if (typeof settings.onClickRegion === 'string') { | |
748 // execute action | |
1095 | 749 return actions[settings.onClickRegion](data, $regionDiv); |
1091 | 750 } |
751 }; | |
752 | |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
753 // 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
|
754 var handleSetup = function (evt) { |
941 | 755 var data = this; |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
756 var settings = data.settings; |
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
757 console.debug("regions: handleSetup", settings.rg); |
1102 | 758 // regions with content are given in a Javascript array |
759 if (settings.regions) { | |
760 createRegionsFromJS(data, settings.regions); | |
761 } | |
1048 | 762 // regions with content are given in HTML divs |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
763 if (settings.processHtmlRegions) { |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
764 createRegionsFromHTML(data); |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
765 } |
1048 | 766 // regions are defined in the URL |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
767 if (settings.processUserRegions) { |
851 | 768 createRegionsFromURL(data); |
818
eff74cfaaf97
read regions from HTML (not working yet), show info
hertzhaft
parents:
815
diff
changeset
|
769 } |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
770 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
771 |
851 | 772 // 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
|
773 var handleUpdate = function (evt) { |
941 | 774 var data = this; |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
775 console.debug("regions: handleUpdate"); |
848 | 776 var settings = data.settings; |
777 fn.highlightButtons(data, 'regions' , settings.isRegionVisible); | |
850
47a6b93bde43
always show html-defined regions. wrong pos still not fixed
hertzhaft
parents:
848
diff
changeset
|
778 renderRegions(data); |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
779 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
780 |
1048 | 781 // additional buttons |
782 var installButtons = function (data) { | |
783 var settings = data.settings; | |
784 var mode = settings.interactionMode; | |
785 var buttonSettings = settings.buttonSettings[mode]; | |
1104 | 786 var buttonSet = settings.regionSet; |
787 if (settings.processUserRegions) { | |
788 var first = buttonSet.slice(0,1); | |
789 var rest = buttonSet.slice(1); | |
790 buttonSet = first.concat(settings.userRegionSet, rest); | |
791 } | |
1048 | 792 // set regionSet to [] or '' for no buttons (when showing regions only) |
793 if (buttonSet.length && buttonSet.length > 0) { | |
794 buttonSettings.regionSet = buttonSet; | |
795 buttonSettings.buttonSets.push('regionSet'); | |
796 } | |
797 }; | |
798 | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
799 // plugin installation called by digilib on plugin object. |
813 | 800 var install = function(plugin) { |
801 digilib = plugin; | |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
802 console.debug('installing regions plugin. digilib:', digilib); |
1048 | 803 // import digilib functions |
804 $.extend(fn, digilib.fn); | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
805 // import geometry classes |
813 | 806 geom = fn.geometry; |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
807 // add defaults, actions, buttons |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
808 $.extend(digilib.defaults, defaults); |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
809 $.extend(digilib.actions, actions); |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
810 $.extend(digilib.buttons, buttons); |
1103 | 811 // add "rg" to digilibParamNames |
812 digilib.defaults.digilibParamNames.push('rg'); | |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
813 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
814 |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
815 // plugin initialization |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
816 var init = function (data) { |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
817 console.debug('initialising regions plugin. data:', data); |
835 | 818 var $elem = data.$elem; |
1027
ff19b9e936d3
allow predefined and user regions at the same time.
robcast
parents:
1025
diff
changeset
|
819 var settings = data.settings; |
1102 | 820 CSS = settings.cssPrefix; |
1093
75a54db031dd
move found region into view, keep zoom factor if possible
hertzhaft
parents:
1092
diff
changeset
|
821 FULL_AREA = geom.rectangle(0, 0, 1, 1); |
1048 | 822 // install event handlers |
848 | 823 var $data = $(data); |
920 | 824 $data.on('setup', handleSetup); |
825 $data.on('update', handleUpdate); | |
1091 | 826 $data.on('newRegion', handleNewRegion); |
827 $data.on('regionClick', handleRegionClick); | |
1095 | 828 // default: autoZoom to region, when clicked - DEPRECATED |
829 if (settings.autoZoomOnClick && settings.onClickRegion == null) { | |
830 settings.onClickRegion = zoomToRegion; | |
831 } | |
832 // install region buttons if user defined regions are allowed | |
1104 | 833 if (digilib.plugins.buttons != null) { |
1103 | 834 installButtons(data); |
813 | 835 } |
792 | 836 }; |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
837 |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
838 // plugin object with name and install/init methods |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
839 // shared objects filled by digilib on registration |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
840 var pluginProperties = { |
1048 | 841 name : 'regions', |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
842 install : install, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
843 init : init, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
844 buttons : {}, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
845 actions : {}, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
846 fn : {}, |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
847 plugins : {} |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
848 }; |
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
849 |
792 | 850 if ($.fn.digilib == null) { |
808
ae8e98c479d5
stub for new plugins; overlay div for regions plugin
hertzhaft
parents:
799
diff
changeset
|
851 $.error("jquery.digilib.regions must be loaded after jquery.digilib!"); |
792 | 852 } else { |
799
12f790cb30de
started to adapt regions plugin to new plugin mechanism
hertzhaft
parents:
792
diff
changeset
|
853 $.fn.digilib('plugin', pluginProperties); |
792 | 854 } |
855 })(jQuery); |