comparison webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1060:d9abeaa44c49

better region info
author hertzhaft
date Sat, 31 Mar 2012 19:56:53 +0200
parents 4aa90cccb3e4
children a45894a81e40
comparison
equal deleted inserted replaced
1059:c7fd2f239953 1060:d9abeaa44c49
71 }; 71 };
72 72
73 var actions = { 73 var actions = {
74 74
75 // define a region interactively with two clicked points 75 // define a region interactively with two clicked points
76 "defineRegion" : function(data) { 76 defineRegion : function(data) {
77 if (!data.settings.isRegionVisible) { 77 if (!data.settings.isRegionVisible) {
78 alert("Please turn on regions visibility!"); 78 alert("Please turn on regions visibility!");
79 return; 79 return;
80 } 80 }
81 var cssPrefix = data.settings.cssPrefix; 81 var cssPrefix = data.settings.cssPrefix;
138 $overlay.one('mousedown.dlRegion', regionStart); 138 $overlay.one('mousedown.dlRegion', regionStart);
139 fn.highlightButtons(data, 'addregion', 1); 139 fn.highlightButtons(data, 'addregion', 1);
140 }, 140 },
141 141
142 // remove the last added region 142 // remove the last added region
143 "removeRegion" : function (data) { 143 removeRegion : function (data) {
144 if (!data.settings.isRegionVisible) { 144 if (!data.settings.isRegionVisible) {
145 alert("Please turn on regions visibility!"); 145 alert("Please turn on regions visibility!");
146 return; 146 return;
147 } 147 }
148 var region = data.regions.pop(); 148 var region = data.regions.pop();
151 $regionDiv.remove(); 151 $regionDiv.remove();
152 redisplay(data); 152 redisplay(data);
153 }, 153 },
154 154
155 // show/hide regions 155 // show/hide regions
156 "toggleRegions" : function (data) { 156 toggleRegions : function (data) {
157 var show = !data.settings.isRegionVisible; 157 var show = !data.settings.isRegionVisible;
158 data.settings.isRegionVisible = show; 158 data.settings.isRegionVisible = show;
159 fn.highlightButtons(data, 'regions', show); 159 fn.highlightButtons(data, 'regions', show);
160 renderRegions(data, 1); 160 renderRegions(data, 1);
161 }, 161 },
162 162
163 // show region info in a window 163 // show region info in a window
164 "showRegionInfo" : function (data) { 164 showRegionInfo : function (data) {
165 var $elem = data.$elem; 165 var $elem = data.$elem;
166 var cssPrefix = data.settings.cssPrefix; 166 var cssPrefix = data.settings.cssPrefix;
167 var $info = $elem.find('#'+cssPrefix+'regionInfo'); 167 var infoselector = '#'+cssPrefix+'regionInfo';
168 if ($info.length > 0) { 168 if (fn.find(data, infoselector)) {
169 fn.withdraw($info); 169 fn.withdraw($info);
170 return; 170 return;
171 } 171 }
172 var html = '\ 172 var html = '\
173 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\ 173 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\
174 <div class="'+cssPrefix+'infoheader">\ 174 <table class="'+cssPrefix+'infoheader">\
175 <div class="'+cssPrefix+'infobutton html">HTML</div>\ 175 <tr>\
176 <div class="'+cssPrefix+'infobutton svgattr">SVG</div>\ 176 <td class="'+cssPrefix+'infobutton html">HTML</td>\
177 <div class="'+cssPrefix+'infobutton digilib">Digilib</div>\ 177 <td class="'+cssPrefix+'infobutton svgattr">SVG</td>\
178 <div class="'+cssPrefix+'infobutton x">X</div>\ 178 <td class="'+cssPrefix+'infobutton csv">CSV</td>\
179 </div>\ 179 <td class="'+cssPrefix+'infobutton digilib">Digilib</td>\
180 <td class="'+cssPrefix+'infobutton x">X</td>\
181 </tr>\
182 </table>\
180 </div>'; 183 </div>';
181 $info = $(html); 184 $info = $(html);
182 $info.appendTo($elem); 185 $info.appendTo($elem);
183 $info.append(regionInfoHTML(data)); 186 $info.append(regionInfoHTML(data));
184 $info.append(regionInfoSVG(data)); 187 $info.append(regionInfoSVG(data));
188 $info.append(regionInfoCSV(data));
185 $info.append(regionInfoDigilib(data)); 189 $info.append(regionInfoDigilib(data));
186 var bind = function(name) { 190 var bind = function(name) {
187 $info.find('div.'+name).on('click.regioninfo', function () { 191 $info.find('.'+name).on('click.regioninfo', function () {
188 $info.find('div.'+cssPrefix+'info').hide(); 192 $info.find('div.'+cssPrefix+'info').hide();
189 $info.find('div.'+cssPrefix+name).show(); 193 $info.find('div.'+cssPrefix+name).show();
194 fn.centerOnScreen(data, $info);
190 }); 195 });
191 }; 196 };
192 bind('html'); 197 bind('html');
193 bind('svgattr'); 198 bind('svgattr');
199 bind('csv');
194 bind('digilib'); 200 bind('digilib');
195 $info.find('.x').on('click.regioninfo', function () { 201 $info.find('.x').on('click.regioninfo', function () {
196 fn.withdraw($info); 202 fn.withdraw($info);
197 }); 203 });
198 $info.fadeIn(); 204 $info.fadeIn();
205 fn.centerOnScreen(data, $info);
199 } 206 }
200 }; 207 };
201 208
202 // store a region div 209 // store a region div
203 var storeRegion = function (data, $regionDiv) { 210 var storeRegion = function (data, $regionDiv) {
239 $infoDiv.append($('<div/>').text('"' + area + '"')); 246 $infoDiv.append($('<div/>').text('"' + area + '"'));
240 }); 247 });
241 return $infoDiv; 248 return $infoDiv;
242 }; 249 };
243 250
251 // SVG-style
252 var regionInfoCSV = function (data) {
253 var cssPrefix = data.settings.cssPrefix;
254 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>');
255 $.each(data.regions, function(index, r) {
256 var area = [
257 fn.cropFloatStr(r.x),
258 fn.cropFloatStr(r.y),
259 fn.cropFloatStr(r.width),
260 fn.cropFloatStr(r.height)].join(',');
261 $infoDiv.append($('<div/>').text(index+1 + ": " + area));
262 });
263 return $infoDiv;
264 };
244 // digilib-style 265 // digilib-style
245 var regionInfoDigilib = function (data) { 266 var regionInfoDigilib = function (data) {
246 var cssPrefix = data.settings.cssPrefix; 267 var cssPrefix = data.settings.cssPrefix;
247 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>'); 268 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>');
248 $.each(data.regions, function(index, r) { 269 $.each(data.regions, function(index, r) {