Context Navigation

source: Dev/branches/rest-dojo-ui/client/dojox/gauges/_Gauge.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 25.9 KB

Line
1	define(["dojo/_base/declare","dojo/_base/lang","dojo/_base/html","dojo/_base/array","dojo/_base/event",
2	"dojo/_base/connect","dojo/dom-construct", "dijit/_Widget", "dojox/gfx", "./Range", "dojo/fx/easing"],
3	function(declare, lang, html, arr, event, connect, dom, Widget, gfx, Range) {
4
5	var _tooltipModule = 0;
6	var _numberModule = 0;
7
8	/*=====
9	Widget = dijit._Widget;
10	=====*/
11
12	return declare("dojox.gauges._Gauge",[Widget],{
13	// summary:
14	// The abstract base class for gauges.
15	//
16	// description:
17	// using dojo.gfx (and thus either SVG or VML based on what is supported), this widget
18	// builds a gauge component, used to display numerical data in a familiar format.
19	// This widget is not to be used alone. it is meant to be subclassed, such as
20	// dojox.gauges.BarGauge or dojox.gauges.AnalogGauge
21
22	// width: Number
23	// The width of the gauge (default is 300)
24	width: 0,
25
26	// height: Number
27	// The height of the gauge (default is 200)
28	height: 0,
29
30	// background: Object
31	// The color of the background. This must be an object of one of two forms:
32	// {'color': 'color-name'}
33	// OR
34	// (for a gradient:)
35	// {'type': 'linear', 'x1': 0, 'x2': 0, 'y1': 0, 'y2': 200, 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}] }
36	background: null,
37
38	// image: String
39	// Background image for gauge (default is no image)
40	image: null,
41
42	// useRangeStyles: Number
43	// Indicates whether to use given css classes (dojoxGaugeRangeXX)
44	// to determine the color (and other style attributes?) of the ranges
45	// this value should be the number of dojoxGaugeRange classes that are
46	// defined, starting at dojoxGaugeRange1 (0 indicates falling to default
47	// hardcoded colors)
48	useRangeStyles: 0,
49
50	// useTooltip: Boolean
51	// Indicates whether tooltips should be displayed for ranges, indicators, etc.
52	useTooltip: true,
53
54	// majorTicks: Object
55	// An object representing the tick marks that should be added to the gauge. Major tick marks have a text label
56	// indicating the value. The object can have the following attributes (required are marked with a *):
57	// - offset: the distance from the 'center' of the gauge. Used differently for Analog vs. Bar
58	// - width: The width of the mark
59	// - length: The length of the mark
60	// - interval: The interval the ticks should be added on
61	// - color: The color of the mark and text
62	// - font: an object with any/all of the following parameters:
63	// {family: "Helvetica", style: "italic", variant: 'small-caps', weight: 'bold', size: "18pt"}
64	majorTicks: null,
65
66	// minorTicks: Object
67	// An object of the same format as majorTicks, indicating where the minor (label-less) marks should be placed
68	// The font parameter is ignored if provided since minor tick marks have no text label.
69	minorTicks: null,
70
71	// _defaultIndicator: Object
72	// Should be overridden by any extending classes and used to indicate what the 'default' indicator is.
73	// This object is used as the indicator when creating tick marks or when an anonymous object is passed into
74	// addIndicator.
75	_defaultIndicator: null,
76
77	// defaultColors: Array
78	// Set of default colors to color ranges with.
79	defaultColors: [[0x00,0x54,0xAA,1],
80	[0x44,0x77,0xBB,1],
81	[0x66,0x99,0xCC,1],
82	[0x99,0xBB,0xEE,1],
83	[0x99,0xCC,0xFF,1],
84	[0xCC,0xEE,0xFF,1],
85	[0xDD,0xEE,0xFF,1]],
86
87	// min: Number
88	// The minimum value of the gauge. Normally not set explicitly, as it will be determined by
89	// the ranges that are added.
90	min: null,
91
92	// max: Number
93	// The maximum value of the gauge. Normally not set explicitly, as it will be determined by
94	// the ranges that are added.
95	max: null,
96
97	// surface: Object
98	// The GFX surface that the shapes are drawn on. Can be accessed/used by indicators to draw themselves
99	surface: null,
100
101	// hideValues: Boolean
102	// Indicates whether the text boxes showing the value of the indicator (as text
103	// content) should be hidden or shown. Default is not hidden, aka shown.
104	hideValues: false,
105
106	// internal data
107	gaugeContent: undefined,
108	_backgroundDefault: {color: '#E0E0E0'},
109	_rangeData: null,
110	_indicatorData: null,
111	_drag: null,
112	_img: null,
113	_overOverlay: false,
114	_lastHover: '',
115
116	startup: function(){
117	// handle settings from HTML by making sure all the options are
118	// converted correctly to numbers and that we calculate defaults
119	// for cx, cy and radius
120	if(this.image === null){
121	this.image={};
122	}
123
124	this.connect(this.gaugeContent, 'onmousedown', this.handleMouseDown);
125	this.connect(this.gaugeContent, 'onmousemove', this.handleMouseMove);
126	this.connect(this.gaugeContent, 'onmouseover', this.handleMouseOver);
127	this.connect(this.gaugeContent, 'onmouseout', this.handleMouseOut);
128	this.connect(this.gaugeContent, 'touchstart', this.handleTouchStart);
129	this.connect(this.gaugeContent, 'touchend', this.handleTouchEnd);
130	this.connect(this.gaugeContent, 'touchmove', this.handleTouchMove);
131
132	if(!lang.isArray(this.ranges)){ this.ranges = []; }
133	if(!lang.isArray(this.indicators)){ this.indicators = []; }
134	var ranges = [], indicators = [];
135	var i;
136	if(this.hasChildren()){
137	var children = this.getChildren();
138	for(i=0; i<children.length; i++){
139	if(/.*Indicator/.test(children[i].declaredClass)){
140	indicators.push(children[i]);
141	//this.addIndicator(children[i]);
142	continue;
143	}
144
145	switch(children[i].declaredClass){
146	case Range.prototype.declaredClass:
147	ranges.push(children[i]);
148	break;
149	}
150	}
151	this.ranges = this.ranges.concat(ranges);
152	this.indicators = this.indicators.concat(indicators);
153	}
154	if(!this.background){ this.background = this._backgroundDefault; }
155	this.background = this.background.color \|\| this.background;
156	if(!this.surface){ this.createSurface(); }
157
158	this.addRanges(this.ranges);
159	if(this.minorTicks && this.minorTicks.interval){
160	this.setMinorTicks(this.minorTicks);
161	}
162	if(this.majorTicks && this.majorTicks.interval){
163	this.setMajorTicks(this.majorTicks);
164	}
165	for(i=0; i<this.indicators.length; i++){
166	this.addIndicator(this.indicators[i]);
167	}
168	this.inherited(arguments);
169	},
170
171	hasChildren: function(){
172	// summary:
173	// Returns true if widget has children, i.e. if this.containerNode contains something.
174	return this.getChildren().length > 0; // Boolean
175	},
176
177	buildRendering: function(){
178	// summary:
179	// Overrides _Widget.buildRendering
180	var n = this.domNode = this.srcNodeRef ? this.srcNodeRef: dom.create("div");
181	this.gaugeContent = dom.create("div", {
182	className: "dojoxGaugeContent"
183	});
184	this.containerNode = dom.create("div");
185	this.mouseNode = dom.create("div");
186	while(n.hasChildNodes()){
187	this.containerNode.appendChild(n.firstChild);
188	}
189	dom.place(this.gaugeContent, n);
190	dom.place(this.containerNode, n);
191	dom.place(this.mouseNode, n);
192	},
193
194	_setTicks: function(/Object/ oldTicks, /Object/ newTicks, /Boolean/ major){
195	// summary:
196	// internal method used to clear existing tick marks, then add new ones
197	var i;
198	if (oldTicks && lang.isArray(oldTicks._ticks)){
199	for (i = 0; i < oldTicks._ticks.length; i++){
200	this._removeScaleTick(oldTicks._ticks[i]);
201	}
202	}
203	var t = {
204	length: newTicks.length,
205	offset: newTicks.offset,
206	noChange: true
207	};
208	if (newTicks.color){
209	t.color = newTicks.color;
210	}
211	if (newTicks.font){
212	t.font = newTicks.font;
213	}
214	if (newTicks.labelPlacement){
215	t.direction = newTicks.labelPlacement;
216	}
217	newTicks._ticks = [];
218	for (i=this.min;i<=this.max;i+=newTicks.interval){
219	if (i==this.max&&this._isScaleCircular()) continue; // do not draw last tick on fully circular gauges
220	t.value=i;
221	if (major){
222	var NumberUtils = this._getNumberModule();
223	if (NumberUtils){ // use internationalization if loaded
224	t.label = (newTicks.fixedPrecision && newTicks.precision) ? NumberUtils.format(i, {
225	places: newTicks.precision
226	}): NumberUtils.format(i);
227	}else{
228	t.label = (newTicks.fixedPrecision && newTicks.precision) ? i.toFixed(newTicks.precision): i.toString();
229	}
230	}
231	newTicks._ticks.push(this._addScaleTick(t, major));
232	}
233	return newTicks;
234	},
235
236	_isScaleCircular: function(){
237	// summary:
238	// Internal method to check if the scale is fully circular
239	return false;
240	},
241
242	setMinorTicks: function(/Object/ ticks){
243	// summary:
244	// Creates and draws the minor tick marks based on the passed object (expecting the same format
245	// as the minorTicks object documented above)
246	this.minorTicks = this._setTicks(this.minorTicks, ticks, false);
247	},
248
249	setMajorTicks: function(/Object/ ticks){
250	// summary:
251	// Creates and draws the major tick marks based on the passed object (expecting the same format
252	// as the majorTicks object documented above)
253	this.majorTicks = this._setTicks(this.majorTicks, ticks, true);
254	},
255
256	postCreate: function(){
257	if(this.hideValues){
258	html.style(this.containerNode, "display", "none");
259	}
260	html.style(this.mouseNode, 'width', '0');
261	html.style(this.mouseNode, 'height', '0');
262	html.style(this.mouseNode, 'position', 'absolute');
263	html.style(this.mouseNode, 'z-index', '100');
264
265	if(this.useTooltip){
266	require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){
267	Tooltip.show('test', this.mouseNode, !this.isLeftToRight());
268	Tooltip.hide(this.mouseNode);
269	}));
270	}
271	},
272
273	_getNumberModule :function() {
274	// summary:
275	// Tests is AMD dojo/number is loaded
276
277	if (_numberModule == 0) {
278	try {
279	_numberModule = require("dojo/number");
280	}
281	catch (e) {
282	_numberModule = null;
283	}
284	}
285	return _numberModule;
286	},
287
288	createSurface: function(){
289	// summary:
290	// Internal method used by the gauge to create the graphics surface area
291	this.gaugeContent.style.width = this.width + 'px';
292	this.gaugeContent.style.height = this.height + 'px';
293	this.surface = gfx.createSurface(this.gaugeContent, this.width, this.height);
294
295	// create several groups where various gauge elements will be created.
296	this._backgroundGroup = this.surface.createGroup();
297	this._rangeGroup = this.surface.createGroup();
298	this._minorTicksGroup = this.surface.createGroup();
299	this._majorTicksGroup = this.surface.createGroup();
300	this._overlayGroup = this.surface.createGroup();
301	this._indicatorsGroup = this.surface.createGroup();
302	this._foregroundGroup = this.surface.createGroup();
303
304	this._background = this._backgroundGroup.createRect({x: 0, y: 0, width: this.width, height: this.height });
305	this._background.setFill(this.background);
306
307	if(this.image.url){
308	var imageGroup = this._backgroundGroup;
309	if (this.image.overlay)
310	imageGroup = this._overlayGroup;
311
312	this._img = imageGroup.createImage({width: this.image.width \|\| this.width, height: this.image.height \|\| this.height, src: this.image.url});
313	if(this.image.x \|\| this.image.y){
314	this._img.setTransform({dx: this.image.x \|\| 0, dy: this.image.y \|\| 0});
315	}
316	}
317	},
318
319	draw: function(){
320	// summary:
321	// This function is used to draw (or redraw) the gauge.
322	// description:
323	// Draws the gauge by drawing the surface, the ranges, and the indicators.
324	var i;
325	if (!this.surface)return;
326
327	this.drawBackground(this._backgroundGroup);
328
329	if(this._rangeData){
330	for(i=0; i<this._rangeData.length; i++){
331	this.drawRange(this._rangeGroup, this._rangeData[i]);
332	}
333	}
334
335	if(this._minorTicksData){
336	for(i=0; i<this._minorTicksData.length; i++){
337	this._minorTicksData[i].draw(this._minorTicksGroup);
338	}
339	}
340	if(this._majorTicksData){
341	for(i=0; i<this._majorTicksData.length; i++){
342	this._majorTicksData[i].draw(this._majorTicksGroup);
343	}
344	}
345
346	if(this._indicatorData){
347	for(i=0; i<this._indicatorData.length; i++){
348	this._indicatorData[i].draw(this._indicatorsGroup);
349	}
350	}
351	this.drawForeground(this._foregroundGroup);
352	},
353
354
355	drawBackground:function(group){
356	// summary:
357	// This function is used to draw (or redraw) the background of the gauge.
358	// description:
359	// The method may be used by subclasses to draw (or redraw) the background of the gauge.
360
361	},
362
363	drawForeground:function(group){
364	// summary:
365	// This function is used to draw (or redraw) the foreground of the gauge.
366	// description:
367	// The method may be used by subclasses to draw (or redraw) the foreground of the gauge.
368
369	},
370
371	setBackground: function(background){
372	// summary:
373	// This method is used to set the background of the gauge after it is created.
374	// description:
375	// Sets the background using the given object. Must be the same 'type' of object
376	// as the original background argument.
377	// background: Object
378	// An object in one of the two forms:
379	// {'color': 'color-name'}
380	// OR
381	// (for a gradient:)
382	// {'type': 'linear', 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}] }
383	// If background is null or undefined, this will set the fill to this._backgroundDefault
384	if(!background){ background = this._backgroundDefault; }
385	this.background = background.color \|\| background;
386	this._background.setFill(this.background);
387	},
388
389	addRange: function(/Object/range){
390	// summary:
391	// This method is used to add a range to the gauge.
392	// description:
393	// Creates a range (colored area on the background of the gauge)
394	// based on the given arguments.
395	// range: Object
396	// A range is either a dojox.gauges.Range object, or a object
397	// with similar parameters (low, high, hover, etc.).
398	this.addRanges([range]);
399	},
400
401	addRanges: function(/Array/ranges){
402	// summary:
403	// This method is used to add ranges to the gauge.
404	// description:
405	// Creates a range (colored area on the background of the gauge)
406	// based on the given arguments.
407	// range: Range
408	// A range is either a dojox.gauges.Range object, or a object
409	// with similar parameters (low, high, hover, etc.).
410	if(!this._rangeData){
411	this._rangeData = [];
412	}
413	var range;
414	for(var i=0; i<ranges.length; i++){
415	range = ranges[i];
416	if((this.min === null) \|\| (range.low < this.min)){this.min = range.low;}
417	if((this.max === null) \|\| (range.high > this.max)){this.max = range.high;}
418
419	if(!range.color){
420	var colorIndex = this._rangeData.length % this.defaultColors.length;
421	if(gfx.svg && this.useRangeStyles > 0){
422	colorIndex = (this._rangeData.length % this.useRangeStyles)+1;
423	range.color = {style: "dojoxGaugeRange"+colorIndex};
424	}else{
425	colorIndex = this._rangeData.length % this.defaultColors.length;
426	range.color = this.defaultColors[colorIndex];
427	}
428	}
429	this._rangeData[this._rangeData.length] = range;
430	}
431	this.draw();
432	},
433
434	_addScaleTick: function(/Object/indicator, /Boolean/ major){
435	// summary:
436	// Adds a scale ticks, that is an indicator.
437	// description:
438	// This method adds a tick mark to the gauge
439	// indicator: dojox.gauges._Indicator
440	// A dojox.gauges._Indicator or an object with similar parameters
441	// (value, color, offset, etc.).
442
443	if(!indicator.declaredClass){// !== 'dojox.gauges.Indicator'){
444	// We were passed a plain object, need to make an indicator out of it.
445	indicator = new this._defaultIndicator(indicator);
446	}
447
448	indicator._gauge = this;
449	if (major){
450	if (!this._majorTicksData){
451	this._majorTicksData = [];
452	}
453	this._majorTicksData[this._majorTicksData.length] = indicator;
454	indicator.draw(this._majorTicksGroup);
455	} else {
456	if (!this._minorTicksData){
457	this._minorTicksData = [];
458	}
459	this._minorTicksData[this._minorTicksData.length] = indicator;
460	indicator.draw(this._minorTicksGroup);
461	}
462	return indicator;
463	},
464
465	_removeScaleTick: function(/Object/indicator){
466	// summary:
467	// Removes the given scale tick from the gauge by calling it's remove function
468	// and removing it from the local cache.
469	var i;
470	if (this._majorTicksData) for (i = 0; i < this._majorTicksData.length; i++){
471	if (this._majorTicksData[i] === indicator){
472	this._majorTicksData.splice(i, 1);
473	indicator.remove();
474	return;
475	}
476	}
477	if (this._minorTicksData) for (i = 0; i < this._minorTicksData.length; i++){
478	if (this._minorTicksData[i] === indicator){
479	this._minorTicksData.splice(i, 1);
480	indicator.remove();
481	return;
482	}
483	}
484	},
485
486	addIndicator: function(/Object/indicator){
487	// summary:
488	// This method is used to add an indicator to the gauge.
489	// description:
490	// This method adds an indicator, such as a t needle,
491	// to the gauge.
492	// indicator: dojox.gauges._Indicator
493	// A dojox.gauges._Indicator or an object with similar parameters
494	// (value, color, offset, etc.).
495
496	if(!indicator.declaredClass){// !== 'dojox.gauges.Indicator'){
497	// We were passed a plain object, need to make an indicator out of it.
498	indicator = new this._defaultIndicator(indicator);
499	}
500	indicator._gauge = this;
501	if(!indicator.hideValue){
502	this.containerNode.appendChild(indicator.domNode);
503	}
504	if(!this._indicatorData){this._indicatorData = [];}
505	this._indicatorData[this._indicatorData.length] = indicator;
506	indicator.draw(this._indicatorsGroup);
507	return indicator;
508	},
509
510	removeIndicator: function(/Object/indicator){
511	// summary:
512	// Removes the given indicator from the gauge by calling it's remove function
513	// and removing it from the local cache.
514	// indicator: dojox.gauges._Indicator
515	// The indicator to remove.
516	for(var i=0; i<this._indicatorData.length; i++){
517	if(this._indicatorData[i] === indicator){
518	this._indicatorData.splice(i, 1);
519	indicator.remove();
520	break;
521	}
522	}
523	},
524
525	moveIndicatorToFront: function(/Object/indicator){
526	// summary:
527	// This function is used to move an indicator the the front (top)
528	// of the gauge
529	// indicator: dojox.gauges._Indicator
530	// A dojox.gauges._Indicator or an object with similar parameters
531	// (value, color, offset, etc.).
532	if(indicator.shape)
533	indicator.shape.moveToFront();
534
535	},
536
537	drawText: function(/dojox.gfx.Group/ group, /String/txt, /Number/x, /Number/y, /String?/align, /String?/color, /Object?/font){
538	// summary:
539	// This function is used draw text onto the gauge. The text object
540	// is also returned by the function so that may be removed later
541	// by calling removeText
542	// group: dojox.gfx.Group
543	// The GFX Group where the text will be added.
544	// txt: String
545	// The text to be drawn
546	// x: Number
547	// The x coordinate at which to place the text
548	// y: Number
549	// The y coordinate at which to place the text
550	// align?: String
551	// Indicates how to align the text
552	// Valid value is 'right', otherwise text is left-aligned
553	// color?: String
554	// Indicates the color of the text
555	// font?: Object
556	// A font object, generally of the following format:
557	// {family: "Helvetica", style: "italic", variant: 'small-caps', weight: 'bold', size: "18pt"}
558
559	var t = group.createText({x: x, y: y, text: txt, align: align});
560	t.setFill(color ? color: 'black');
561	if (font) t.setFont(font);
562	return t;
563	},
564
565	removeText:function(/String/t){
566	// summary:
567	// Removes a text element from the gauge.
568	// t: String
569	// The text to remove.
570	if (t.parent)
571	t.parent.remove(t);
572	},
573
574	updateTooltip: function(/String/txt, /Event/ e){
575	// summary:
576	// Updates the tooltip for the gauge to display the given text.
577	// txt: String
578	// The text to put in the tooltip.
579
580	if (this.useTooltip) {
581	require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){
582	if (this._lastHover != txt) {
583	if (txt !== '') {
584	Tooltip.hide(this.mouseNode);
585	Tooltip.show(txt, this.mouseNode, !this.isLeftToRight());
586	} else {
587	Tooltip.hide(this.mouseNode);
588	}
589	this._lastHover = txt;
590	}
591	}));
592	}
593	},
594
595	handleMouseOver: function(/Object/e){
596	// summary:
597	// This is an internal handler used by the gauge to support
598	// hover text
599	// e: Object
600	// The event object
601
602	if (this.image && this.image.overlay){
603	if (e.target == this._img.getEventSource()){
604	var hover;
605	this._overOverlay = true;
606	var r = this.getRangeUnderMouse(e);
607	if (r && r.hover){
608	hover = r.hover;
609	}
610
611	if (this.useTooltip && !this._drag){
612	if (hover){
613	this.updateTooltip(hover, e);
614	} else {
615	this.updateTooltip('', e);
616	}
617	}
618	}
619	}
620	},
621
622	handleMouseOut: function(/Object/e){
623	// summary:
624	// This is an internal handler used by the gauge to support
625	// hover text
626	// e: Object
627	// The event object
628
629	this._overOverlay = false;
630	this._hideTooltip();
631	},
632
633	handleMouseMove: function(/Object/e){
634	// summary:
635	// This is an internal handler used by the gauge to support using
636	// the mouse to show the tooltips
637	// e: Object
638	// The event object
639
640	if (this.useTooltip) {
641	if (e) {
642	html.style(this.mouseNode, 'left', e.pageX + 1 + 'px');
643	html.style(this.mouseNode, 'top', e.pageY + 1 + 'px');
644	}
645	if (this._overOverlay) {
646	var r = this.getRangeUnderMouse(e);
647	if (r && r.hover) {
648	this.updateTooltip(r.hover, e);
649	} else {
650	this.updateTooltip('', e);
651	}
652	}
653	}
654	},
655
656	handleMouseDown: function(e){
657	// summary:
658	// This is an internal handler used by the gauge to support using
659	// the mouse to move indicators
660	// e: Object
661	// The event object
662	var indicator = this._getInteractiveIndicator();
663	if (indicator){
664	this._handleMouseDownIndicator(indicator, e);
665	}
666	},
667
668	_handleDragInteractionMouseMove: function(e){
669	// summary:
670	// This is an internal handler used by the gauge to support using
671	// the mouse to drag an indicator to modify it's value
672	// e: Object
673	// The event object
674
675	if(this._drag){
676	this._dragIndicator(this, e);
677	event.stop(e);
678	}
679	},
680
681	_handleDragInteractionMouseUp: function(/Object/e){
682	// summary:
683	// This is an internal handler used by the gauge to support using
684	// the mouse to drag an indicator to modify it's value
685	// e: Object
686	// The event object
687	this._drag = null;
688
689	for (var i = 0 ; i < this._mouseListeners.length; i++){
690	connect.disconnect(this._mouseListeners[i]);
691	}
692	this._mouseListeners = [];
693	event.stop(e);
694	},
695
696	_handleMouseDownIndicator: function (indicator, e){
697	// summary:
698	// This is an internal handler used by the gauge to support using
699	// the mouse to drag an indicator to modify it's value
700	// indicator: _Indicator
701	// The indicator object
702	// e:Object
703	// The event object
704
705	if (!indicator.noChange){
706	if (!this._mouseListeners) this._mouseListeners = [];
707	this._drag = indicator;
708	this._mouseListeners.push(connect.connect(document, "onmouseup", this, this._handleDragInteractionMouseUp));
709	this._mouseListeners.push(connect.connect(document, "onmousemove", this, this._handleDragInteractionMouseMove));
710	this._mouseListeners.push(connect.connect(document, "ondragstart", this, event.stop));
711	this._mouseListeners.push(connect.connect(document, "onselectstart", this, event.stop));
712	this._dragIndicator(this, e);
713	event.stop(e);
714	}
715	},
716
717	_handleMouseOverIndicator: function (indicator, e){
718	// summary:
719	// This is an internal handler used by the gauge to support using
720	// the mouse to drag an indicator to modify it's value
721	// indicator: _Indicator
722	// The indicator object
723	// e: Object
724	// The event object
725	if (this.useTooltip && !this._drag){
726
727	if (indicator.hover){
728	require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){
729	html.style(this.mouseNode, 'left', e.pageX + 1 + 'px');
730	html.style(this.mouseNode, 'top', e.pageY + 1 + 'px');
731	Tooltip.show(indicator.hover, this.mouseNode, !this.isLeftToRight());
732	}));
733	} else {
734	this.updateTooltip('', e);
735	}
736	}
737
738	if (indicator.onDragMove && !indicator.noChange){
739	this.gaugeContent.style.cursor = 'pointer';
740	}
741	},
742
743	_handleMouseOutIndicator: function (indicator, e){
744	// summary:
745	// This is an internal handler used by the gauge to support using
746	// the mouse to drag an indicator to modify it's value
747	// indicator: _Indicator
748	// The indicator object
749	// e: Object
750	// The event object
751	this._hideTooltip();
752	this.gaugeContent.style.cursor = 'pointer';
753
754	},
755
756	_hideTooltip: function(){
757	if (this.useTooltip && this.mouseNode) {
758	require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){
759	Tooltip.hide(this.mouseNode);
760	}));
761	}
762	},
763
764	_handleMouseOutRange: function ( range, e){
765	this._hideTooltip();
766	},
767
768	_handleMouseOverRange: function (range, e){
769	if (this.useTooltip && !this._drag){
770	if (range.hover) {
771	html.style(this.mouseNode, 'left', e.pageX + 1 + 'px');
772	html.style(this.mouseNode, 'top', e.pageY + 1 + 'px');
773	require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){
774	Tooltip.show(range.hover, this.mouseNode, !this.isLeftToRight());
775	}));
776	} else {
777	this.updateTooltip('', e);
778	}
779	}
780	},
781
782	handleTouchStartIndicator: function(indicator, e){
783	// summary:
784	// This is an internal handler used by the gauge to support using
785	// touch events to drag an indicator to modify it's value
786	// indicator: _Indicator
787	// The indicator object
788	// e: Object
789	// The event object
790	if (!indicator.noChange){
791	this._drag = indicator;
792	event.stop(e);
793	}
794	},
795
796	handleTouchStart: function(e){
797	// summary:
798	// This is an internal handler used by the gauge to support using
799	// touch events to drag an indicator to modify it's value
800	// e: Object
801	// The touch event object
802	this._drag = this._getInteractiveIndicator();
803	this.handleTouchMove(e); //drag indicator to touch position
804	},
805
806	handleTouchEnd: function(e){
807	// summary:
808	// This is an internal handler used by the gauge to support using
809	// touch events to drag an indicator to modify it's value
810	// e: Object
811	// The touch e object
812	if (this._drag){
813	this._drag = null;
814	event.stop(e);
815	}
816	},
817
818	handleTouchMove: function(e){
819	// summary:
820	// This is an internal handler used by the gauge to support using
821	// touch events to drag an indicator to modify it's value
822	// e: Object
823	// The touch event object
824
825	if (this._drag && !this._drag.noChange){
826	var touches = e.touches;
827	var firstTouch = touches[0];
828	this._dragIndicatorAt(this, firstTouch.pageX, firstTouch.pageY);
829	event.stop(e);
830	}
831	},
832
833	_getInteractiveIndicator: function(){
834	for (var i = 0; i < this._indicatorData.length; i++){
835	var indicator = this._indicatorData[i];
836	if (indicator.interactionMode == "gauge" && !indicator.noChange){
837	return indicator;
838	}
839	}
840	return null;
841	}
842	});
843	});
844

Note: See TracBrowser for help on using the repository browser.

Download in other formats: