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