Subversion Repositories Applications.papyrus

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1318 alexandre_ 1
/*
2
	Copyright (c) 2004-2006, The Dojo Foundation
3
	All Rights Reserved.
4
 
5
	Licensed under the Academic Free License version 2.1 or above OR the
6
	modified BSD license. For more information on Dojo licensing, see:
7
 
8
		http://dojotoolkit.org/community/licensing.shtml
9
*/
10
 
11
dojo.provide("dojo.widget.FisheyeList");
12
dojo.require("dojo.widget.*");
13
dojo.require("dojo.widget.HtmlWidget");
14
dojo.require("dojo.html.style");
15
dojo.require("dojo.html.selection");
16
dojo.require("dojo.html.util");
17
dojo.require("dojo.event.*");
18
dojo.widget.defineWidget("dojo.widget.FisheyeList", dojo.widget.HtmlWidget, function () {
19
	this.pos = {x:-1, y:-1};
20
	this.EDGE = {CENTER:0, LEFT:1, RIGHT:2, TOP:3, BOTTOM:4};
21
	this.timerScale = 1;
22
}, {templateString:"<div class=\"dojoHtmlFisheyeListBar\"></div>", templateCssString:".dojoHtmlFisheyeListItemLabel {\n\tfont-family: Arial, Helvetica, sans-serif;\n\tbackground-color: #eee;\n\tborder: 2px solid #666;\n\tpadding: 2px;\n\ttext-align: center;\n\tposition: absolute;\n\tdisplay: none;\n}\n\n.dojoHtmlFisheyeListItemLabel.selected {\n\tdisplay: block;\n}\n\n.dojoHtmlFisheyeListItemImage {\n\tborder: 0px;\n\tposition: absolute;\n}\n\n.dojoHtmlFisheyeListItem {\n\tposition: absolute;\n\tz-index: 2;\n}\n\n.dojoHtmlFisheyeListBar {\n\tposition: relative;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/FisheyeList.css"), isContainer:true, snarfChildDomOutput:true, itemWidth:40, itemHeight:40, itemMaxWidth:150, itemMaxHeight:150, orientation:"horizontal", conservativeTrigger:false, effectUnits:2, itemPadding:10, attachEdge:"center", labelEdge:"bottom", enableCrappySvgSupport:false, fillInTemplate:function () {
23
	dojo.html.disableSelection(this.domNode);
24
	this.isHorizontal = (this.orientation == "horizontal");
25
	this.selectedNode = -1;
26
	this.isOver = false;
27
	this.hitX1 = -1;
28
	this.hitY1 = -1;
29
	this.hitX2 = -1;
30
	this.hitY2 = -1;
31
	this.anchorEdge = this._toEdge(this.attachEdge, this.EDGE.CENTER);
32
	this.labelEdge = this._toEdge(this.labelEdge, this.EDGE.TOP);
33
	if (this.isHorizontal && (this.anchorEdge == this.EDGE.LEFT)) {
34
		this.anchorEdge = this.EDGE.CENTER;
35
	}
36
	if (this.isHorizontal && (this.anchorEdge == this.EDGE.RIGHT)) {
37
		this.anchorEdge = this.EDGE.CENTER;
38
	}
39
	if (!this.isHorizontal && (this.anchorEdge == this.EDGE.TOP)) {
40
		this.anchorEdge = this.EDGE.CENTER;
41
	}
42
	if (!this.isHorizontal && (this.anchorEdge == this.EDGE.BOTTOM)) {
43
		this.anchorEdge = this.EDGE.CENTER;
44
	}
45
	if (this.labelEdge == this.EDGE.CENTER) {
46
		this.labelEdge = this.EDGE.TOP;
47
	}
48
	if (this.isHorizontal && (this.labelEdge == this.EDGE.LEFT)) {
49
		this.labelEdge = this.EDGE.TOP;
50
	}
51
	if (this.isHorizontal && (this.labelEdge == this.EDGE.RIGHT)) {
52
		this.labelEdge = this.EDGE.TOP;
53
	}
54
	if (!this.isHorizontal && (this.labelEdge == this.EDGE.TOP)) {
55
		this.labelEdge = this.EDGE.LEFT;
56
	}
57
	if (!this.isHorizontal && (this.labelEdge == this.EDGE.BOTTOM)) {
58
		this.labelEdge = this.EDGE.LEFT;
59
	}
60
	this.proximityLeft = this.itemWidth * (this.effectUnits - 0.5);
61
	this.proximityRight = this.itemWidth * (this.effectUnits - 0.5);
62
	this.proximityTop = this.itemHeight * (this.effectUnits - 0.5);
63
	this.proximityBottom = this.itemHeight * (this.effectUnits - 0.5);
64
	if (this.anchorEdge == this.EDGE.LEFT) {
65
		this.proximityLeft = 0;
66
	}
67
	if (this.anchorEdge == this.EDGE.RIGHT) {
68
		this.proximityRight = 0;
69
	}
70
	if (this.anchorEdge == this.EDGE.TOP) {
71
		this.proximityTop = 0;
72
	}
73
	if (this.anchorEdge == this.EDGE.BOTTOM) {
74
		this.proximityBottom = 0;
75
	}
76
	if (this.anchorEdge == this.EDGE.CENTER) {
77
		this.proximityLeft /= 2;
78
		this.proximityRight /= 2;
79
		this.proximityTop /= 2;
80
		this.proximityBottom /= 2;
81
	}
82
}, postCreate:function () {
83
	this._initializePositioning();
84
	if (!this.conservativeTrigger) {
85
		dojo.event.connect(document.documentElement, "onmousemove", this, "_onMouseMove");
86
	}
87
	dojo.event.connect(document.documentElement, "onmouseout", this, "_onBodyOut");
88
	dojo.event.connect(this, "addChild", this, "_initializePositioning");
89
}, _initializePositioning:function () {
90
	this.itemCount = this.children.length;
91
	this.barWidth = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth;
92
	this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight;
93
	this.totalWidth = this.proximityLeft + this.proximityRight + this.barWidth;
94
	this.totalHeight = this.proximityTop + this.proximityBottom + this.barHeight;
95
	for (var i = 0; i < this.children.length; i++) {
96
		this.children[i].posX = this.itemWidth * (this.isHorizontal ? i : 0);
97
		this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i);
98
		this.children[i].cenX = this.children[i].posX + (this.itemWidth / 2);
99
		this.children[i].cenY = this.children[i].posY + (this.itemHeight / 2);
100
		var isz = this.isHorizontal ? this.itemWidth : this.itemHeight;
101
		var r = this.effectUnits * isz;
102
		var c = this.isHorizontal ? this.children[i].cenX : this.children[i].cenY;
103
		var lhs = this.isHorizontal ? this.proximityLeft : this.proximityTop;
104
		var rhs = this.isHorizontal ? this.proximityRight : this.proximityBottom;
105
		var siz = this.isHorizontal ? this.barWidth : this.barHeight;
106
		var range_lhs = r;
107
		var range_rhs = r;
108
		if (range_lhs > c + lhs) {
109
			range_lhs = c + lhs;
110
		}
111
		if (range_rhs > (siz - c + rhs)) {
112
			range_rhs = siz - c + rhs;
113
		}
114
		this.children[i].effectRangeLeft = range_lhs / isz;
115
		this.children[i].effectRangeRght = range_rhs / isz;
116
	}
117
	this.domNode.style.width = this.barWidth + "px";
118
	this.domNode.style.height = this.barHeight + "px";
119
	for (var i = 0; i < this.children.length; i++) {
120
		var itm = this.children[i];
121
		var elm = itm.domNode;
122
		elm.style.left = itm.posX + "px";
123
		elm.style.top = itm.posY + "px";
124
		elm.style.width = this.itemWidth + "px";
125
		elm.style.height = this.itemHeight + "px";
126
		if (itm.svgNode) {
127
			itm.svgNode.style.position = "absolute";
128
			itm.svgNode.style.left = this.itemPadding + "%";
129
			itm.svgNode.style.top = this.itemPadding + "%";
130
			itm.svgNode.style.width = (100 - 2 * this.itemPadding) + "%";
131
			itm.svgNode.style.height = (100 - 2 * this.itemPadding) + "%";
132
			itm.svgNode.style.zIndex = 1;
133
			itm.svgNode.setSize(this.itemWidth, this.itemHeight);
134
		} else {
135
			itm.imgNode.style.left = this.itemPadding + "%";
136
			itm.imgNode.style.top = this.itemPadding + "%";
137
			itm.imgNode.style.width = (100 - 2 * this.itemPadding) + "%";
138
			itm.imgNode.style.height = (100 - 2 * this.itemPadding) + "%";
139
		}
140
	}
141
	this._calcHitGrid();
142
}, _onBodyOut:function (e) {
143
	if (dojo.html.overElement(dojo.body(), e)) {
144
		return;
145
	}
146
	this._setDormant(e);
147
}, _setDormant:function (e) {
148
	if (!this.isOver) {
149
		return;
150
	}
151
	this.isOver = false;
152
	if (this.conservativeTrigger) {
153
		dojo.event.disconnect(document.documentElement, "onmousemove", this, "_onMouseMove");
154
	}
155
	this._onGridMouseMove(-1, -1);
156
}, _setActive:function (e) {
157
	if (this.isOver) {
158
		return;
159
	}
160
	this.isOver = true;
161
	if (this.conservativeTrigger) {
162
		dojo.event.connect(document.documentElement, "onmousemove", this, "_onMouseMove");
163
		this.timerScale = 0;
164
		this._onMouseMove(e);
165
		this._expandSlowly();
166
	}
167
}, _onMouseMove:function (e) {
168
	if ((e.pageX >= this.hitX1) && (e.pageX <= this.hitX2) && (e.pageY >= this.hitY1) && (e.pageY <= this.hitY2)) {
169
		if (!this.isOver) {
170
			this._setActive(e);
171
		}
172
		this._onGridMouseMove(e.pageX - this.hitX1, e.pageY - this.hitY1);
173
	} else {
174
		if (this.isOver) {
175
			this._setDormant(e);
176
		}
177
	}
178
}, onResized:function () {
179
	this._calcHitGrid();
180
}, _onGridMouseMove:function (x, y) {
181
	this.pos = {x:x, y:y};
182
	this._paint();
183
}, _paint:function () {
184
	var x = this.pos.x;
185
	var y = this.pos.y;
186
	if (this.itemCount <= 0) {
187
		return;
188
	}
189
	var pos = this.isHorizontal ? x : y;
190
	var prx = this.isHorizontal ? this.proximityLeft : this.proximityTop;
191
	var siz = this.isHorizontal ? this.itemWidth : this.itemHeight;
192
	var sim = this.isHorizontal ? (1 - this.timerScale) * this.itemWidth + this.timerScale * this.itemMaxWidth : (1 - this.timerScale) * this.itemHeight + this.timerScale * this.itemMaxHeight;
193
	var cen = ((pos - prx) / siz) - 0.5;
194
	var max_off_cen = (sim / siz) - 0.5;
195
	if (max_off_cen > this.effectUnits) {
196
		max_off_cen = this.effectUnits;
197
	}
198
	var off_weight = 0;
199
	if (this.anchorEdge == this.EDGE.BOTTOM) {
200
		var cen2 = (y - this.proximityTop) / this.itemHeight;
201
		off_weight = (cen2 > 0.5) ? 1 : y / (this.proximityTop + (this.itemHeight / 2));
202
	}
203
	if (this.anchorEdge == this.EDGE.TOP) {
204
		var cen2 = (y - this.proximityTop) / this.itemHeight;
205
		off_weight = (cen2 < 0.5) ? 1 : (this.totalHeight - y) / (this.proximityBottom + (this.itemHeight / 2));
206
	}
207
	if (this.anchorEdge == this.EDGE.RIGHT) {
208
		var cen2 = (x - this.proximityLeft) / this.itemWidth;
209
		off_weight = (cen2 > 0.5) ? 1 : x / (this.proximityLeft + (this.itemWidth / 2));
210
	}
211
	if (this.anchorEdge == this.EDGE.LEFT) {
212
		var cen2 = (x - this.proximityLeft) / this.itemWidth;
213
		off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x) / (this.proximityRight + (this.itemWidth / 2));
214
	}
215
	if (this.anchorEdge == this.EDGE.CENTER) {
216
		if (this.isHorizontal) {
217
			off_weight = y / (this.totalHeight);
218
		} else {
219
			off_weight = x / (this.totalWidth);
220
		}
221
		if (off_weight > 0.5) {
222
			off_weight = 1 - off_weight;
223
		}
224
		off_weight *= 2;
225
	}
226
	for (var i = 0; i < this.itemCount; i++) {
227
		var weight = this._weighAt(cen, i);
228
		if (weight < 0) {
229
			weight = 0;
230
		}
231
		this._setItemSize(i, weight * off_weight);
232
	}
233
	var main_p = Math.round(cen);
234
	var offset = 0;
235
	if (cen < 0) {
236
		main_p = 0;
237
	} else {
238
		if (cen > this.itemCount - 1) {
239
			main_p = this.itemCount - 1;
240
		} else {
241
			offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain);
242
		}
243
	}
244
	this._positionElementsFrom(main_p, offset);
245
}, _weighAt:function (cen, i) {
246
	var dist = Math.abs(cen - i);
247
	var limit = ((cen - i) > 0) ? this.children[i].effectRangeRght : this.children[i].effectRangeLeft;
248
	return (dist > limit) ? 0 : (1 - dist / limit);
249
}, _setItemSize:function (p, scale) {
250
	scale *= this.timerScale;
251
	var w = Math.round(this.itemWidth + ((this.itemMaxWidth - this.itemWidth) * scale));
252
	var h = Math.round(this.itemHeight + ((this.itemMaxHeight - this.itemHeight) * scale));
253
	if (this.isHorizontal) {
254
		this.children[p].sizeW = w;
255
		this.children[p].sizeH = h;
256
		this.children[p].sizeMain = w;
257
		this.children[p].sizeOff = h;
258
		var y = 0;
259
		if (this.anchorEdge == this.EDGE.TOP) {
260
			y = (this.children[p].cenY - (this.itemHeight / 2));
261
		} else {
262
			if (this.anchorEdge == this.EDGE.BOTTOM) {
263
				y = (this.children[p].cenY - (h - (this.itemHeight / 2)));
264
			} else {
265
				y = (this.children[p].cenY - (h / 2));
266
			}
267
		}
268
		this.children[p].usualX = Math.round(this.children[p].cenX - (w / 2));
269
		this.children[p].domNode.style.top = y + "px";
270
		this.children[p].domNode.style.left = this.children[p].usualX + "px";
271
	} else {
272
		this.children[p].sizeW = w;
273
		this.children[p].sizeH = h;
274
		this.children[p].sizeOff = w;
275
		this.children[p].sizeMain = h;
276
		var x = 0;
277
		if (this.anchorEdge == this.EDGE.LEFT) {
278
			x = this.children[p].cenX - (this.itemWidth / 2);
279
		} else {
280
			if (this.anchorEdge == this.EDGE.RIGHT) {
281
				x = this.children[p].cenX - (w - (this.itemWidth / 2));
282
			} else {
283
				x = this.children[p].cenX - (w / 2);
284
			}
285
		}
286
		this.children[p].domNode.style.left = x + "px";
287
		this.children[p].usualY = Math.round(this.children[p].cenY - (h / 2));
288
		this.children[p].domNode.style.top = this.children[p].usualY + "px";
289
	}
290
	this.children[p].domNode.style.width = w + "px";
291
	this.children[p].domNode.style.height = h + "px";
292
	if (this.children[p].svgNode) {
293
		this.children[p].svgNode.setSize(w, h);
294
	}
295
}, _positionElementsFrom:function (p, offset) {
296
	var pos = 0;
297
	if (this.isHorizontal) {
298
		pos = Math.round(this.children[p].usualX + offset);
299
		this.children[p].domNode.style.left = pos + "px";
300
	} else {
301
		pos = Math.round(this.children[p].usualY + offset);
302
		this.children[p].domNode.style.top = pos + "px";
303
	}
304
	this._positionLabel(this.children[p]);
305
	var bpos = pos;
306
	for (var i = p - 1; i >= 0; i--) {
307
		bpos -= this.children[i].sizeMain;
308
		if (this.isHorizontal) {
309
			this.children[i].domNode.style.left = bpos + "px";
310
		} else {
311
			this.children[i].domNode.style.top = bpos + "px";
312
		}
313
		this._positionLabel(this.children[i]);
314
	}
315
	var apos = pos;
316
	for (var i = p + 1; i < this.itemCount; i++) {
317
		apos += this.children[i - 1].sizeMain;
318
		if (this.isHorizontal) {
319
			this.children[i].domNode.style.left = apos + "px";
320
		} else {
321
			this.children[i].domNode.style.top = apos + "px";
322
		}
323
		this._positionLabel(this.children[i]);
324
	}
325
}, _positionLabel:function (itm) {
326
	var x = 0;
327
	var y = 0;
328
	var mb = dojo.html.getMarginBox(itm.lblNode);
329
	if (this.labelEdge == this.EDGE.TOP) {
330
		x = Math.round((itm.sizeW / 2) - (mb.width / 2));
331
		y = -mb.height;
332
	}
333
	if (this.labelEdge == this.EDGE.BOTTOM) {
334
		x = Math.round((itm.sizeW / 2) - (mb.width / 2));
335
		y = itm.sizeH;
336
	}
337
	if (this.labelEdge == this.EDGE.LEFT) {
338
		x = -mb.width;
339
		y = Math.round((itm.sizeH / 2) - (mb.height / 2));
340
	}
341
	if (this.labelEdge == this.EDGE.RIGHT) {
342
		x = itm.sizeW;
343
		y = Math.round((itm.sizeH / 2) - (mb.height / 2));
344
	}
345
	itm.lblNode.style.left = x + "px";
346
	itm.lblNode.style.top = y + "px";
347
}, _calcHitGrid:function () {
348
	var pos = dojo.html.getAbsolutePosition(this.domNode, true);
349
	this.hitX1 = pos.x - this.proximityLeft;
350
	this.hitY1 = pos.y - this.proximityTop;
351
	this.hitX2 = this.hitX1 + this.totalWidth;
352
	this.hitY2 = this.hitY1 + this.totalHeight;
353
}, _toEdge:function (inp, def) {
354
	return this.EDGE[inp.toUpperCase()] || def;
355
}, _expandSlowly:function () {
356
	if (!this.isOver) {
357
		return;
358
	}
359
	this.timerScale += 0.2;
360
	this._paint();
361
	if (this.timerScale < 1) {
362
		dojo.lang.setTimeout(this, "_expandSlowly", 10);
363
	}
364
}, destroy:function () {
365
	dojo.event.disconnect(document.documentElement, "onmouseout", this, "_onBodyOut");
366
	dojo.event.disconnect(document.documentElement, "onmousemove", this, "_onMouseMove");
367
	dojo.widget.FisheyeList.superclass.destroy.call(this);
368
}});
369
dojo.widget.defineWidget("dojo.widget.FisheyeListItem", dojo.widget.HtmlWidget, {iconSrc:"", svgSrc:"", caption:"", id:"", _blankImgPath:dojo.uri.moduleUri("dojo.widget", "templates/images/blank.gif"), templateString:"<div class=\"dojoHtmlFisheyeListItem\">" + "  <img class=\"dojoHtmlFisheyeListItemImage\" dojoAttachPoint=\"imgNode\" dojoAttachEvent=\"onMouseOver;onMouseOut;onClick\">" + "  <div class=\"dojoHtmlFisheyeListItemLabel\" dojoAttachPoint=\"lblNode\"></div>" + "</div>", fillInTemplate:function () {
370
	if (this.svgSrc != "") {
371
		this.svgNode = this._createSvgNode(this.svgSrc);
372
		this.domNode.appendChild(this.svgNode);
373
		this.imgNode.style.display = "none";
374
	} else {
375
		if ((this.iconSrc.toLowerCase().substring(this.iconSrc.length - 4) == ".png") && (dojo.render.html.ie) && (!dojo.render.html.ie70)) {
376
			if (dojo.dom.hasParent(this.imgNode) && this.id != "") {
377
				var parent = this.imgNode.parentNode;
378
				parent.setAttribute("id", this.id);
379
			}
380
			this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.iconSrc + "', sizingMethod='scale')";
381
			this.imgNode.src = this._blankImgPath.toString();
382
		} else {
383
			if (dojo.dom.hasParent(this.imgNode) && this.id != "") {
384
				var parent = this.imgNode.parentNode;
385
				parent.setAttribute("id", this.id);
386
			}
387
			this.imgNode.src = this.iconSrc;
388
		}
389
	}
390
	if (this.lblNode) {
391
		this.lblNode.appendChild(document.createTextNode(this.caption));
392
	}
393
	dojo.html.disableSelection(this.domNode);
394
}, _createSvgNode:function (src) {
395
	var elm = document.createElement("embed");
396
	elm.src = src;
397
	elm.type = "image/svg+xml";
398
	elm.style.width = "1px";
399
	elm.style.height = "1px";
400
	elm.loaded = 0;
401
	elm.setSizeOnLoad = false;
402
	elm.onload = function () {
403
		this.svgRoot = this.getSVGDocument().rootElement;
404
		this.svgDoc = this.getSVGDocument().documentElement;
405
		this.zeroWidth = this.svgRoot.width.baseVal.value;
406
		this.zeroHeight = this.svgRoot.height.baseVal.value;
407
		this.loaded = true;
408
		if (this.setSizeOnLoad) {
409
			this.setSize(this.setWidth, this.setHeight);
410
		}
411
	};
412
	elm.setSize = function (w, h) {
413
		if (!this.loaded) {
414
			this.setWidth = w;
415
			this.setHeight = h;
416
			this.setSizeOnLoad = true;
417
			return;
418
		}
419
		this.style.width = w + "px";
420
		this.style.height = h + "px";
421
		this.svgRoot.width.baseVal.value = w;
422
		this.svgRoot.height.baseVal.value = h;
423
		var scale_x = w / this.zeroWidth;
424
		var scale_y = h / this.zeroHeight;
425
		for (var i = 0; i < this.svgDoc.childNodes.length; i++) {
426
			if (this.svgDoc.childNodes[i].setAttribute) {
427
				this.svgDoc.childNodes[i].setAttribute("transform", "scale(" + scale_x + "," + scale_y + ")");
428
			}
429
		}
430
	};
431
	return elm;
432
}, onMouseOver:function (e) {
433
	if (!this.parent.isOver) {
434
		this.parent._setActive(e);
435
	}
436
	if (this.caption != "") {
437
		dojo.html.addClass(this.lblNode, "selected");
438
		this.parent._positionLabel(this);
439
	}
440
}, onMouseOut:function (e) {
441
	dojo.html.removeClass(this.lblNode, "selected");
442
}, onClick:function (e) {
443
}});
444