Mercurial > hg > digilib-old

comparison webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1137:3b5968aeefac

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new region icons; autozoom on click
author hertzhaft
date Fri, 16 Nov 2012 18:26:55 +0100
parents 0a01d5cc66fe
children bbb09797d7fc
comparison
equal deleted inserted replaced
1136:95ca45086d00 1137:3b5968aeefac
71 icon : "delregion.png" 71 icon : "delregion.png"
72 }, 72 },
73 removeallregions : { 73 removeallregions : {
74 onclick : "removeAllUserRegions", 74 onclick : "removeAllUserRegions",
75 tooltip : "delete all user defined regions", 75 tooltip : "delete all user defined regions",
76 icon : "delallregions.png" 76 icon : "delregions.png"
77 }, 77 },
78 regions : { 78 regions : {
79 onclick : "toggleRegions", 79 onclick : "toggleRegions",
80 tooltip : "show or hide regions", 80 tooltip : "show or hide regions",
81 icon : "regions.png" 81 icon : "showregions.png"
82 }, 82 },
83 findcoords : { 83 findcoords : {
84 onclick : "findCoords", 84 onclick : "findCoords",
85 tooltip : "find a region by entering its relative coordinates", 85 tooltip : "find a region by entering its relative coordinates",
86 icon : "regions.png" 86 icon : "findcoords.png"
87 }, 87 },
88 finddata : { 88 finddata : {
89 onclick : "findData", 89 onclick : "findData",
90 tooltip : "find a region by entering text", 90 tooltip : "find a region by entering text",
91 icon : "regions.png" 91 icon : "findregion.png"
92 },
93 regioninfo : {
94 onclick : "showRegionInfo",
95 tooltip : "show information about user defined regions",
96 icon : "regioninfo.png"
97 } 92 }
98 }; 93 };
99 94
100 var defaults = { 95 var defaults = {
101 // are regions shown? 96 // are regions shown?
102 'isRegionVisible' : true, 97 'isRegionVisible' : true,
103 // are region numbers shown? 98 // are region numbers shown?
104 'showRegionNumbers' : true, 99 'showRegionNumbers' : true,
105 // default width for region when only point is given 100 // default width for region when only point is given
106 'regionWidth' : 0.005, 101 'regionWidth' : 0.005,
102 // zoomfactor for displaying larger area around region (for autoZoomOnClick)
103 'regionAutoZoomFactor' : 3,
107 // is there region content in the page? 104 // is there region content in the page?
108 'processHtmlRegions' : false, 105 'processHtmlRegions' : false,
109 // region defined by users and in the URL 106 // region defined by users and in the URL
110 'processUserRegions' : true, 107 'processUserRegions' : true,
111 // callback for click on region 108 // callback for click on region
112 'onClickRegion' : null, 109 'onClickRegion' : null,
113 // callback when new user region is defined 110 // callback when new user region is defined
114 'onNewRegion' : null, 111 'onNewRegion' : null,
115 // turn any region into a clickable link to its detail view (DEPRECATED) 112 // turn any region into a clickable link to its detail view
116 'autoZoomOnClick' : false, 113 'autoZoomOnClick' : true,
117 // zoom in when displaying the found region 114 // zoom in when displaying the found region
118 'autoZoomOnFind' : false, 115 'autoZoomOnFind' : false,
119 // css selector for area/a elements (must also be marked with class "dl-keep") 116 // css selector for area/a elements (must also be marked with class "dl-keep")
120 'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a', 117 'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
121 // general buttonset of this plugin 118 // general buttonset of this plugin
122 'regionSet' : ['regions', 'findcoords', 'finddata', 'lessoptions'], 119 'regionSet' : ['regions', 'finddata', 'findcoords', 'lessoptions'],
123 // buttonset for region editing by user 120 // buttonset for region editing by user
124 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions', 'regioninfo'], 121 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions'],
125 // url param for regions 122 // url param for regions
126 'rg' : null, 123 'rg' : null,
127 // array with region data 124 // array with region data
128 'regions' : null, 125 'regions' : null,
129 // function for extracting the sort string (for the region search window) 126 // function for extracting the sort string (for the region search window)
185 } 182 }
186 // remove most recently added user region 183 // remove most recently added user region
187 selector = 'div.'+CSS+'regionURL'; 184 selector = 'div.'+CSS+'regionURL';
188 var $region = data.$elem.find(selector).last(); 185 var $region = data.$elem.find(selector).last();
189 if ($region.length > 0) { 186 if ($region.length > 0) {
190 $regionDiv.remove(); 187 $region.remove();
191 redisplay(data); 188 redisplay(data);
192 return; 189 return;
193 } 190 }
194 }, 191 },
195 192
210 toggleRegions : function (data) { 207 toggleRegions : function (data) {
211 var show = !data.settings.isRegionVisible; 208 var show = !data.settings.isRegionVisible;
212 data.settings.isRegionVisible = show; 209 data.settings.isRegionVisible = show;
213 fn.highlightButtons(data, 'regions', show); 210 fn.highlightButtons(data, 'regions', show);
214 renderRegions(data, 1); 211 renderRegions(data, 1);
215 },
216
217 // show region info in a window
218 showRegionInfo : function (data) {
219 var $elem = data.$elem;
220 var infoSelector = '#'+CSS+'regionInfo';
221 if (fn.isOnScreen(data, infoSelector)) return; // already onscreen
222 var $regions = getRegions(data, 'regionURL');
223 if ($regions.length == 0) return; // no user regions available
224 var html = '\
225 <div id="'+CSS+'regionInfo" class="'+CSS+'keep '+CSS+'regionInfo">\
226 <table class="'+CSS+'infoheader">\
227 <tr>\
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>\
233 </tr>\
234 </table>\
235 </div>';
236 $info = $(html);
237 $info.appendTo($elem);
238 $info.append(regionInfoHTML(data, $regions));
239 $info.append(regionInfoSVG(data, $regions));
240 $info.append(regionInfoCSV(data, $regions));
241 $info.append(regionInfoDigilib(data, $regions));
242 var bind = function (name) {
243 $info.find('.'+name).on('click.regioninfo', function () {
244 $info.find('div.'+CSS+'info').hide();
245 $info.find('div.'+CSS+name).show();
246 fn.centerOnScreen(data, $info);
247 return false;
248 });
249 };
250 bind('html');
251 bind('svgattr');
252 bind('csv');
253 bind('digilib');
254 $info.on('click.regioninfo', function () {
255 fn.withdraw($info);
256 });
257 $info.find('.x').on('click.regioninfo', function () {
258 fn.withdraw($info);
259 });
260 $info.fadeIn();
261 fn.centerOnScreen(data, $info);
262 }, 212 },
263 213
264 // display region coordinates in a selected edit line (for copying) 214 // display region coordinates in a selected edit line (for copying)
265 showRegionCoords : function (data, $regionDiv) { 215 showRegionCoords : function (data, $regionDiv) {
266 var $elem = data.$elem; 216 var $elem = data.$elem;
398 }; 348 };
399 // adapt dropdown, show only matching entries 349 // adapt dropdown, show only matching entries
400 var filterOptions = function (text) { 350 var filterOptions = function (text) {
401 if (!text) { 351 if (!text) {
402 // not text, display all options, select first (empty) 352 // not text, display all options, select first (empty)
403 $options.show(); 353 // $options.show();
404 $select.prop("selectedIndex", 0); 354 $select.prop("selectedIndex", 0);
405 return; 355 return;
406 } 356 }
407 var first = true; 357 var first = true;
408 $options.each(function (index) { 358 $options.each(function (index) {
631 }); 581 });
632 // prepend an empty option 582 // prepend an empty option
633 return sorted.join(''); 583 return sorted.join('');
634 }; 584 };
635 585
636 // html for later insertion
637 var regionInfoHTML = function (data, $regions) {
638 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'html"/>');
639 $infoDiv.append($('<div/>').text('<map class="'+CSS+'keep '+CSS+'regioncontent">'));
640 $regions.each(function (index, region) {
641 var rect = $(region).data('rect');
642 var coords = packCoords(rect, ',');
643 $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>'));
644 });
645 $infoDiv.append($('<div/>').text('</map>'));
646 return $infoDiv;
647 };
648
649 // SVG-style
650 var regionInfoSVG = function (data, $regions) {
651 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'svgattr"/>');
652 $regions.each(function (index, region) {
653 var rect = $(region).data('rect');
654 var coords = packCoords(rect, ',');
655 $infoDiv.append($('<div/>').text('"' + coords + '"'));
656 });
657 return $infoDiv;
658 };
659
660 // CSV-style
661 var regionInfoCSV = function (data, $regions) {
662 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'csv"/>');
663 $regions.each(function (index, region) {
664 var rect = $(region).data('rect');
665 var coords = packCoords(rect, ',');
666 $infoDiv.append($('<div/>').text(index+1 + ": " + coords));
667 });
668 return $infoDiv;
669 };
670
671 // digilib-style (h,w@x,y)
672 var regionInfoDigilib = function (data, $regions) {
673 var $infoDiv = $('<div class="'+CSS+'info '+CSS+'digilib"/>');
674 $regions.each(function (index, region) {
675 var rect = $(region).data('rect');
676 var coords = packCoords(rect, ',');
677 $infoDiv.append($('<div/>').text(coords));
678 });
679 return $infoDiv;
680 };
681
682 // show a region on top of the scaler image 586 // show a region on top of the scaler image
683 var renderRegion = function (data, $regionDiv, anim) { 587 var renderRegion = function (data, $regionDiv, anim) {
684 if (!data.imgTrafo) return; 588 if (!data.imgTrafo) return;
685 var zoomArea = data.zoomArea; 589 var zoomArea = data.zoomArea;
686 var rect = $regionDiv.data('rect').copy(); 590 var rect = $regionDiv.data('rect').copy();
746 var rg = coords.join(','); 650 var rg = coords.join(',');
747 data.settings.rg = rg; 651 data.settings.rg = rg;
748 console.debug('pack regions:', rg); 652 console.debug('pack regions:', rg);
749 }; 653 };
750 654
751 // zoom to the region coordinates 655 // zoom in, displaying the region in the middle of the screen
752 var zoomToRegion = function (data, rect) { 656 var zoomToRegion = function (data, $regionDiv) {
753 digilib.actions.zoomArea(data, rect); 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);
754 }; 668 };
755 669
756 // reload display after a region has been added or removed 670 // reload display after a region has been added or removed
757 var redisplay = function (data) { 671 var redisplay = function (data) {
758 packRegions(data); 672 packRegions(data);
866 var $data = $(data); 780 var $data = $(data);
867 $data.on('setup', handleSetup); 781 $data.on('setup', handleSetup);
868 $data.on('update', handleUpdate); 782 $data.on('update', handleUpdate);
869 $data.on('newRegion', handleNewRegion); 783 $data.on('newRegion', handleNewRegion);
870 $data.on('regionClick', handleRegionClick); 784 $data.on('regionClick', handleRegionClick);
871 // default: autoZoom to region, when clicked - DEPRECATED 785 // default: autoZoom to region, when clicked
872 if (settings.autoZoomOnClick && settings.onClickRegion == null) { 786 if (settings.autoZoomOnClick && settings.onClickRegion == null) {
873 settings.onClickRegion = zoomToRegion; 787 settings.onClickRegion = zoomToRegion;
874 } 788 }
875 // install region buttons if user defined regions are allowed 789 // install region buttons if user defined regions are allowed
876 if (digilib.plugins.buttons != null) { 790 if (digilib.plugins.buttons != null) {