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