Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/jquery.digilib.regions.js @ 800:65e70c03870b stream

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge from juqery branch 12f790cb30de0ac42ff62fb9921d7a3215243b7b
author robcast
date Sat, 19 Feb 2011 09:56:18 +0100
parents 12f790cb30de
children ae8e98c479d5
comparison
equal deleted inserted replaced
774:4568e539abd2 800:65e70c03870b
1 /** optional digilib regions plugin
2
3 markup a digilib image with rectangular regions
4
5 TODO:
6 - store region in params/cookie, regarding zoom, mirror, rotation (like marks)
7 - set regions programmatically
8 - read regions from params/cookie and display
9 - backlink mechanism
10 - don't write to data.settings?
11 */
12
13 (function($) {
14 // the data object passed by digilib
15 var data;
16 var buttons;
17 var fn;
18 // affine geometry plugin stub
19 var geom;
20
21 var FULL_AREA;
22
23 var buttons = {
24 addregion : {
25 onclick : "setRegion",
26 tooltip : "set a region",
27 icon : "addregion.png"
28 },
29 delregion : {
30 onclick : "removeRegion",
31 tooltip : "delete the last region",
32 icon : "delregion.png"
33 },
34 regions : {
35 onclick : "toggleRegions",
36 tooltip : "show or hide regions",
37 icon : "regions.png"
38 },
39 regioninfo : {
40 onclick : "infoRegions",
41 tooltip : "information about regions",
42 icon : "regioninfo.png"
43 }
44 };
45
46 var defaults = {
47 // are regions shown?
48 'isRegionVisible' : true,
49 // buttonset of this plugin
50 'regionSet' : ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'],
51 // array of defined regions
52 'regions' : []
53 };
54
55 var actions = {
56 // define a region interactively with two clicked points
57 "setRegion" : function(data) {
58 var $elem = data.$elem;
59 var $scaler = data.$scaler;
60 var picRect = geom.rectangle($scaler);
61 var pt1, pt2;
62 // TODO: temporary rectangle only, pass values to "addRegion" factory
63 var $tempDiv = $('<div class="region" style="display:none"/>');
64 $elem.append($tempDiv);
65
66 var regionStart = function (evt) {
67 pt1 = geom.position(evt);
68 // setup and show zoom div
69 pt1.adjustDiv($tempDiv);
70 $tempDiv.width(0).height(0);
71 $tempDiv.show();
72 // register events
73 $elem.bind("mousemove.dlRegion", regionMove);
74 $elem.bind("mouseup.dlRegion", regionEnd);
75 return false;
76 };
77
78 // mouse move handler
79 var regionMove = function (evt) {
80 pt2 = geom.position(evt);
81 var rect = geom.rectangle(pt1, pt2);
82 rect.clipTo(picRect);
83 // update zoom div
84 rect.adjustDiv($tempDiv);
85 return false;
86 };
87
88 // mouseup handler: end moving
89 var regionEnd = function (evt) {
90 pt2 = geom.position(evt);
91 // assume a click and continue if the area is too small
92 var clickRect = geom.rectangle(pt1, pt2);
93 if (clickRect.getArea() <= 5) return false;
94 // unregister events
95 $elem.unbind("mousemove.dlRegion", regionMove);
96 $elem.unbind("mouseup.dlRegion", regionEnd);
97 // clip and transform
98 clickRect.clipTo(picRect);
99 clickRect.adjustDiv($tempDiv);
100 $tempDiv.remove();
101 data.settings.regions.push(clickRect);
102 // fn.redisplay(data);
103 return false;
104 };
105
106 // clear old handler (also ZoomDrag)
107 $scaler.unbind('.dlRegion');
108 $elem.unbind('.dlRegion');
109 // bind start zoom handler
110 $scaler.one('mousedown.dlRegion', regionStart);
111 },
112
113 // remove the last added region
114 "removeRegion" : function (data) {
115 var $regionDiv = data.settings.regions.pop();
116 $regionDiv.remove();
117 // fn.redisplay(data);
118 },
119
120 // add a region programmatically
121 "addRegion" : function(data, pos, url) {
122 // TODO: backlink mechanism
123 if (pos.length === 4) {
124 // TODO: trafo
125 var $regionDiv = $('<div class="region" style="display:none"/>');
126 $regionDiv.attr("id", "region" + i);
127 var regionRect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
128 regionRect.adjustDiv($regionDiv);
129 if (!data.regions) {
130 data.regions = [];
131 }
132 data.regions.push($regionDiv);
133 }
134 }
135 };
136
137 var addRegion = actions.addRegion;
138
139 var realizeRegions = function (data) {
140 // create regions from parameters
141 var settings = data.settings;
142 var rg = settings.rg;
143 var regions = rg.split(",");
144 for (var i = 0; i < regions.length ; i++) {
145 var pos = regions.split("/", 4);
146 // TODO: backlink mechanism
147 var url = paramString.match(/http.*$/);
148 addRegion(data, pos, url);
149 }
150 };
151
152 // display current regions
153 var renderRegions = function (data) {
154 var regions = data.regions;
155 for (var i = 0; i < regions.length; i++) {
156 var region = regions[i];
157 if (data.zoomArea.containsPosition(region)) {
158 var rpos = data.imgTrafo.transform(region);
159 console.debug("renderRegions: rpos=", rpos);
160 // create region
161 var $regionDiv = $('<div class="region" style="display:none"/>');
162 $regionDiv.attr("id", "region" + data.regions.length);
163 $elem.append($regionDiv);
164 rpos.adjustDiv($regionDiv);
165 }
166 }
167 };
168
169 var serializeRegions = function (data) {
170 if (data.regions) {
171 settings.rg = '';
172 for (var i = 0; i < data.regions.length; i++) {
173 if (i) {
174 settings.rg += ',';
175 }
176 settings.rg +=
177 cropFloat(data.regions[i].x).toString() + '/' +
178 cropFloat(data.regions[i].y).toString() + '/' +
179 cropFloat(data.regions[i].width).toString() + '/' +
180 cropFloat(data.regions[i].height).toString();
181 }
182 }
183 };
184
185 var handleSetup = function (evt) {
186 console.debug("regions: handleSetup");
187 data = this;
188 // if (data.settings.isBirdDivVisible) {
189 // setupBirdDiv(data);
190 // data.$birdDiv.show();
191 // }
192 };
193
194 var handleUpdate = function (evt) {
195 console.debug("regions: handleUpdate");
196 data = this;
197 // if (data.settings.isBirdDivVisible) {
198 // renderBirdArea(data);
199 // setupBirdDrag(data);
200 // }
201 };
202
203 var handleRedisplay = function (evt) {
204 console.debug("regions: handleRedisplay");
205 data = this;
206 // if (data.settings.isBirdDivVisible) {
207 // updateBirdDiv(data);
208 // }
209 };
210
211 var handleDragZoom = function (evt, zoomArea) {
212 console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
213 data = this;
214 // if (data.settings.isBirdDivVisible) {
215 // setBirdZoom(data, zoomArea);
216 // }
217 };
218
219 // plugin installation called by digilib on plugin object.
220 var install = function(digilib) {
221 // import geometry classes
222 geom = digilib.fn.geometry;
223 FULL_AREA = geom.rectangle(0,0,1,1);
224 // add defaults
225 $.extend(digilib.defaults, defaults);
226 // add actions
227 $.extend(digilib.actions, actions);
228 // add buttons
229 $.extend(digilib.buttons, buttons);
230 };
231
232 // plugin initialization
233 var init = function (data) {
234 console.debug('initialising regions plugin. data:', data);
235 var $data = $(data);
236 var buttonSettings = data.settings.buttonSettings.fullscreen;
237 // configure buttons through digilib "regionSet" option
238 var buttonSet = data.settings.regionSet || regionSet;
239 // set regionSet to [] or '' for no buttons (when showing regions only)
240 if (buttonSet.length && buttonSet.length > 0) {
241 buttonSettings['regionSet'] = buttonSet;
242 buttonSettings.buttonSets.push('regionSet');
243 }
244 // install event handler
245 $data.bind('setup', handleSetup);
246 $data.bind('update', handleUpdate);
247 $data.bind('redisplay', handleRedisplay);
248 $data.bind('dragZoom', handleDragZoom);
249 };
250
251 // plugin object with name and init
252 // shared objects filled by digilib on registration
253 var pluginProperties = {
254 name : 'region',
255 install : install,
256 init : init,
257 buttons : {},
258 actions : {},
259 fn : {},
260 plugins : {}
261 };
262
263 if ($.fn.digilib == null) {
264 $.error("jquery.digilib.birdview must be loaded after jquery.digilib!");
265 } else {
266 $.fn.digilib('plugin', pluginProperties);
267 }
268 })(jQuery);