Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/jquery.digilib.regions.js @ 792:d742bd92b05a jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first step to a regions plugin
author hertzhaft
date Fri, 18 Feb 2011 11:11:49 +0100
parents
children 12f790cb30de
comparison
equal deleted inserted replaced
791:304488c72344 792:d742bd92b05a
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 var geom;
19
20 var buttons = {
21 addregion : {
22 onclick : "setRegion",
23 tooltip : "set a region",
24 icon : "addregion.png"
25 },
26 delregion : {
27 onclick : "removeRegion",
28 tooltip : "delete the last region",
29 icon : "delregion.png"
30 },
31 regions : {
32 onclick : "toggleRegions",
33 tooltip : "show or hide regions",
34 icon : "regions.png"
35 },
36 regioninfo : {
37 onclick : "infoRegions",
38 tooltip : "information about regions",
39 icon : "regioninfo.png"
40 }
41 };
42 var regionSet = ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'];
43
44 var actions = {
45 // define a region interactively with two clicked points
46 "setRegion" : function(data) {
47 $elem = data.$elem;
48 $scaler = data.$scaler;
49 var pt1, pt2;
50 var $regionDiv = $('<div class="region" style="display:none"/>');
51 $regionDiv.attr("id", "region" + data.regions.length);
52 $elem.append($regionDiv);
53 var picRect = geom.rectangle($scaler);
54
55 var regionStart = function (evt) {
56 pt1 = geom.position(evt);
57 // setup and show zoom div
58 pt1.adjustDiv($regionDiv);
59 $regionDiv.width(0).height(0);
60 $regionDiv.show();
61 // register events
62 $elem.bind("mousemove.dlRegion", regionMove);
63 $elem.bind("mouseup.dlRegion", regionEnd);
64 return false;
65 };
66
67 // mouse move handler
68 var regionMove = function (evt) {
69 pt2 = geom.position(evt);
70 var rect = geom.rectangle(pt1, pt2);
71 rect.clipTo(picRect);
72 // update zoom div
73 rect.adjustDiv($regionDiv);
74 return false;
75 };
76
77 // mouseup handler: end moving
78 var regionEnd = function (evt) {
79 pt2 = geom.position(evt);
80 // assume a click and continue if the area is too small
81 var clickRect = geom.rectangle(pt1, pt2);
82 if (clickRect.getArea() <= 5) return false;
83 // unregister events
84 $elem.unbind("mousemove.dlRegion", regionMove);
85 $elem.unbind("mouseup.dlRegion", regionEnd);
86 // clip and transform
87 clickRect.clipTo(picRect);
88 clickRect.adjustDiv($regionDiv);
89 data.regions.push($regionDiv);
90 // fn.redisplay(data);
91 return false;
92 };
93
94 // clear old handler (also ZoomDrag)
95 $scaler.unbind('.dlRegion');
96 $elem.unbind('.dlRegion');
97 // bind start zoom handler
98 $scaler.one('mousedown.dlRegion', regionStart);
99 },
100
101 // remove the last added region
102 "removeRegion" : function (data) {
103 var $regionDiv = data.regions.pop();
104 $regionDiv.remove();
105 // fn.redisplay(data);
106 },
107
108 // add a region programmatically
109 "addRegion" : function(data, pos, url) {
110 // TODO: backlink mechanism
111 if (pos.length === 4) {
112 // TODO: trafo
113 var $regionDiv = $('<div class="region" style="display:none"/>');
114 $regionDiv.attr("id", "region" + i);
115 var regionRect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
116 regionRect.adjustDiv($regionDiv);
117 if (!data.regions) {
118 data.regions = [];
119 }
120 data.regions.push($regionDiv);
121 }
122 }
123 };
124
125 var addRegion = actions.addRegion;
126
127 var realizeRegions = function (data) {
128 // create regions from parameters
129 var settings = data.settings;
130 var rg = settings.rg;
131 var regions = rg.split(",");
132 for (var i = 0; i < regions.length ; i++) {
133 var pos = regions.split("/", 4);
134 // TODO: backlink mechanism
135 var url = paramString.match(/http.*$/);
136 addRegion(data, pos, url);
137 }
138 };
139
140 // display current regions
141 var renderRegions = function (data) {
142 var regions = data.regions;
143 for (var i = 0; i < regions.length; i++) {
144 var region = regions[i];
145 if (data.zoomArea.containsPosition(region)) {
146 var rpos = data.imgTrafo.transform(region);
147 console.debug("renderRegions: rpos=", rpos);
148 // create region
149 var $regionDiv = $('<div class="region" style="display:none"/>');
150 $regionDiv.attr("id", "region" + data.regions.length);
151 $elem.append($regionDiv);
152 rpos.adjustDiv($regionDiv);
153 }
154 }
155 };
156
157 var serializeRegions = function (data) {
158 if (data.regions) {
159 settings.rg = '';
160 for (var i = 0; i < data.regions.length; i++) {
161 if (i) {
162 settings.rg += ',';
163 }
164 settings.rg +=
165 cropFloat(data.regions[i].x).toString() + '/' +
166 cropFloat(data.regions[i].y).toString() + '/' +
167 cropFloat(data.regions[i].width).toString() + '/' +
168 cropFloat(data.regions[i].height).toString();
169 }
170 }
171 };
172
173 // export constructor functions to digilib plugin
174 var init = function (digilibdata) {
175 console.log('initialising regions plugin. data:', digilibdata);
176 data = digilibdata;
177 data.regions = [];
178 // setup geometry object
179 geom = data.plugins.geometry.init();
180 // add buttons and actions from this plugin
181 $.extend(this.buttons, buttons);
182 $.extend(this.actions, actions);
183 var buttonSettings = data.settings.buttonSettings.fullscreen;
184 // configure buttons through digilib "regionSet" option
185 var buttonSet = data.settings.regionSet || regionSet;
186 // set regionSet to [] or '' for no buttons (when showing regions only)
187 if (buttonSet.length && buttonSet.length > 0) {
188 buttonSettings['regionSet'] = buttonSet;
189 buttonSettings.buttonSets.push('regionSet');
190 }
191 fn = this.fn;
192 // console.log(data.settings.buttonSettings.fullscreen.buttonSets);
193 return {
194 };
195 };
196 if ($.fn.digilib == null) {
197 $.error("jquery.digilib.regions must be loaded after jquery.digilib!");
198 } else {
199 $.fn.digilib('plugin', {name : 'regions', init : init});
200 }
201 })(jQuery);