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