Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

source: Dev/trunk/src/client/dojox/gauges/_Gauge.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 26.0 KB

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

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

Download in other formats: